[JavaScript知识库]axios ---- 综合案例

axios的综合案例

需求：

• 用户发起请求：http://localhost:8080/vue/findAll,获取所有的user数据
• 通过Vue.js 要求在页面中展现数据，以表格的形式展现
• 为每行数据添加 修改/删除 的按钮
• 在一个新的div中编辑3个文本框 name/age/sex 通过提交按钮实现新增
• 如果用户点击修改按钮，则在全新的div中，回显数据
• 用户修改完成数据之后，通过提交按钮，实现数据的修改
• 当用户点击删除按钮时,要求实现数据的删除操作

1. 创建springboot项目，并导入依赖

	<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>

        <!-- 配置热部署依赖 -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-devtools</artifactId>
        </dependency>
        <!-- 添加lombok依赖 -->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.20</version>
        </dependency>
        <!-- 引入数据库依赖 -->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.23</version>
        </dependency>
        <!--  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.4.3</version>
        </dependency>
    </dependencies>

2. 配置类

	server:
	  port: 8080
	spring:
	  datasource:
	    driver-class-name: com.mysql.cj.jdbc.Driver
	    # autoReconnect=true设置自动重连，allowMultiQueries=true设置允许批量操作
	    url: jdbc:mysql://localhost:3306/jt?useSSL=false&useUnicode=true&characterEncoding=utf-8&serverTimezone=GMT%2B8&allowPublicKeyRetrieval=true&autoReconnect=true&allowMultiQueries=true
	    username: root
	    password: 123456
	
	#Spring整合Mybatis
	#mybatis:
	#Spring整合Mybatis-plus
	mybatis-plus:
	  #开启驼峰映射
	  configuration:
	    map-underscore-to-camel-case: true
	  #导入映射文件
	  #如果xml的映射文件，在根目录下(一般不建议这样写)，则加载时使用classpath*:/*.xml，进行强制加载
	  mapper-locations: classpath:/mappers/*.xml
	  #定义别名包
	  type-aliases-package: com.jt.pojo
	
	# 为com.jt.mapper包下的Sql执行打印日志语句
	logging:
	  level:
	    com.jt.mapper: debug

3. 启动类

	package com.jt;
	
	import org.mybatis.spring.annotation.MapperScan;
	import org.springframework.boot.SpringApplication;
	import org.springframework.boot.autoconfigure.SpringBootApplication;
	
	/**
	 * @Author Sky-haohao
	 * @Date 2021/8/24 17:25
	 * @Version 1.0
	 */
	@SpringBootApplication
	@MapperScan("com.jt.mapper")
	public class RunApp {
	    public static void main(String[] args) {
	        SpringApplication.run(RunApp.class, args);
	    }
	}

4. 实体类 ----- User

	package com.jt.pojo;
	
	import com.baomidou.mybatisplus.annotation.IdType;
	import com.baomidou.mybatisplus.annotation.TableField;
	import com.baomidou.mybatisplus.annotation.TableId;
	import com.baomidou.mybatisplus.annotation.TableName;
	import lombok.Data;
	import lombok.experimental.Accessors;
	
	import java.io.Serializable;
	
	/**
	 * @Author Sky-haohao
	 * @Date 2021/8/24 17:24
	 * @Version 1.0
	 */
	@Data
	@Accessors(chain = true)
	//1.将对象与表进行关联
	//规则1：如果表名与对象名一致，名称可以省略
	//规则2：如果字段名与属性名一致，则注解可以省略
	@TableName("demo_user")
	// 序列化接口的作用：保证对象网络传输的有效性
	public class User implements Serializable {
	    //2.主键自增、非空、生成唯一编号(UUID)
	    @TableId(type = IdType.AUTO,value = "id")
	    private Integer id;
	    //3.标识属性与字段的映射
	    @TableField("name")
	    private String name;
	    @TableField("age")
	    private Integer age;
	    @TableField("sex")
	    private String sex;
	}

5. 控制层

• VueController

  	package com.jt.controller;
  	
  	import com.jt.pojo.User;
  	import com.jt.service.VueService;
  	import org.springframework.beans.factory.annotation.Autowired;
  	import org.springframework.web.bind.annotation.*;
  	
  	import java.util.List;
  	
  	/**
  	 * @Author Sky-haohao
  	 * @Date 2021/8/27 14:38
  	 * @Version 1.0
  	 */
  	@RestController
  	@CrossOrigin
  	@RequestMapping("/vue")
  	public class VueController {
  	
  	    @Autowired
  	    private VueService vueService;
  	
  	    /**
  	     * 需求：查询所有的数据
  	     * URL：http://localhost:8080/vue/findAll
  	     * 参数： null
  	     * @return List<User>
  	     */
  	    @GetMapping("/findAll")
  	    public List<User> findAll(){
  	        return vueService.findAll();
  	    }
  	
  	    /**
  	     * 需求：实现用户新增
  	     * URL：http://localhost:8080/vue/insert
  	     * @param user  User对象的json
  	     * @return 成功信息
  	     */
  	    @PostMapping("/insert")
  	    public String insert(@RequestBody User user){
  	        int row = vueService.insert(user);
  	        return "新增成功，受影响的行数："+row;
  	    }
  	
  	    @DeleteMapping("/deleteById")
  	    public String deleteById(Integer id){
  	        int row = vueService.deleteById(id);
  	        return "删除成功，影响的行数："+row;
  	    }
  	
  	    /* restFul的写法 */
  	    /*@DeleteMapping("/deleteById/{id}")
  	    public String deleteById(@PathVariable Integer id){
  	        int row = vueService.deleteById(id);
  	        return "删除成功，影响的行数："+row;
  	    }*/
  		
  	    /**
  	     * 实现数据更新操作
  	     * URL:http://localhost:8080/vue/updateUser
  	     * 参数： user的json串
  	     * 返回值：提示信息
  	     */
  	    @PutMapping("/updateUser")
  	    public String updateUser(@RequestBody User user){
  	        int row = vueService.updateById(user);
  	        return "更新成功，受影响的行数："+row;
  	    }
  	}
  
  

6. Mapper接口

• VueMapper

  	package com.jt.mapper;
  	
  	import com.baomidou.mybatisplus.core.mapper.BaseMapper;
  	import com.jt.pojo.User;
  	
  	/**
  	 * @Author Sky-haohao
  	 * @Date 2021/8/27 14:39
  	 * @Version 1.0
  	 */
  	public interface VueMapper extends BaseMapper<User> {
  	}
  
  

7. 业务层

• VueService

  	package com.jt.service;
  	
  	import com.jt.pojo.User;
  	
  	import java.util.List;
  	
  	/**
  	 * @Author Sky-haohao
  	 * @Date 2021/8/27 14:40
  	 * @Version 1.0
  	 */
  	public interface VueService {
  	    /**
  	     * 查询所有信息
  	     * @return List<User>
  	     */
  	    List<User> findAll();
  	
  	    /**
  	     * 插入信息
  	     * @param user user对象
  	     * @return 影响的行数
  	     */
  	    int insert(User user);
  	
  	    /**
  	     * 根据id删除
  	     * @param id id值
  	     * @return 影响的行数
  	     */
  	    int deleteById(Integer id);
  	
  	    /**
  	     * 根据id更新
  	     * @param user user对象
  	     * @return 影响的行数
  	     */
  	    int updateById(User user);
  	}
  
  

• VueServiceImpl

  	package com.jt.service.impl;
  	
  	import com.jt.mapper.VueMapper;
  	import com.jt.pojo.User;
  	import com.jt.service.VueService;
  	import org.springframework.beans.factory.annotation.Autowired;
  	import org.springframework.stereotype.Service;
  	
  	import java.util.List;
  	
  	/**
  	 * @Author Sky-haohao
  	 * @Date 2021/8/27 14:40
  	 * @Version 1.0
  	 */
  	@Service
  	public class VueServiceImpl implements VueService {
  	    @Autowired
  	    private VueMapper vueMapper;
  	
  	    @Override
  	    public List<User> findAll() {
  	        return vueMapper.selectList(null);
  	    }
  	
  	    @Override
  	    public int insert(User user) {
  	        return vueMapper.insert(user);
  	    }
  	
  	    @Override
  	    public int deleteById(Integer id) {
  	        return vueMapper.deleteById(id);
  	    }
  	
  	    @Override
  	    public int updateById(User user) {
  	        return vueMapper.updateById(user);
  	    }
  	}
  
  

8. 前端页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>综合案例</title>
	</head>
	<body>
		<!-- 引入类库 vue/axios -->
		<script src="../js/vue.js"></script>
		<script src="../js/axios.js"></script>
	<!-- 需求：
			用户发起请求：http://localhost:8080/vue/findAll,获取所有的user数据
			通过Vue.js 要求在页面中展现数据，以表格的形式展现
			为每行数据添加 修改/删除 的按钮
			在一个新的div中编辑3个文本框 name/age/sex 通过提交按钮实现新增
			如果用户点击修改按钮，则在全新的div中，回显数据
			用户修改完成数据之后，通过提交按钮，实现数据的修改
			当用户点击删除按钮时,要求实现数据的删除操作
	 -->

		<div id="app">
			<!-- 新增div -->
			<div align="center">
				<h3>用户新增</h3>
				姓名：<input type="text" v-model="addUser.name" />
				年龄：<input type="text" v-model="addUser.age" />
				性别：<input type="text" v-model="addUser.sex" />
				<!-- 点击调用入库的函数 -->
				<button @click="addUserBtn">新增</button>
			</div>
			<hr />
			
			<!-- 用户修改 -->
			<div align="center">
				<h3>用户修改</h3>
				编号：<input type="text" disabled="disabled" v-model="updateUser.id" />
				姓名：<input type="text" v-model="updateUser.name" />
				年龄：<input type="text" v-model="updateUser.age" />
				性别：<input type="text" v-model="updateUser.sex" />
				<button @click="updateUserMet()">修改</button>
			</div>
			<hr />
			
			<!-- 展现 -->
			<div>
				<table border="1px" width="80%" align="center">
					<tr align="center"></tr>
						<th colspan="5">用户列表</th>
					<tr align="center">
						<th>编号</th>
						<th>姓名</th>
						<th>年龄</th>
						<th>性别</th>
						<th>操作</th>
					</tr>
					<tr align="center">
						<th>101</th>
						<th>嫦娥</th>
						<th>20</th>
						<th>女</th>
						<th width="20%">
							<button>修改</button>
							<button @click="deleteBtn(user)">删除</button>
						</th>
					</tr>
					<tr align="center" v-for="user in userList">
						<td v-text="user.id"></td>
						<td v-text="user.name"></td>
						<td v-text="user.age"></td>
						<td v-text="user.sex"></td>
						<td width="20%">
							<button @click="updateUserBtn(user)">修改</button>
							<!-- 调用方法，将'当前'对象传递 -->
							<button @click="deleteBtn(user)">删除</button>
						</td>
					</tr>
				
				</table>
			</div>
		</div>

		<!-- 2.创建vue对象 -->
		<script>

			// 3.定义axios请求的前缀
			axios.defaults.baseURL = "http://localhost:8080/vue"
			const app = new Vue({
				el:"#app",
				data() {
					return {
						// 1. 定义用户数据
						userList: [],
						// 封装新增数据
						addUser: {
							name: '',
							age: '',
							sex: ''
						},
						//封装修改的数据
						updateUser: {
							id: '',
							name: '',
							age: '',
							sex: ''
						}

					}
				},
				methods:{
					// 获取用户信息
					getUserList(){
						// alert("查询数据")
						axios.get("/findAll").then(promise => {
							//console.log(promise.data)
							this.userList = promise.data
							//console.log(this.userList)
						})
					},
					//实现数据新增
					addUserBtn(){
						//alert("新增数据")
						axios.post("/insert",this.addUser).then(promise => {
							//获取服务器的返回值
							let msg = promise.data
							//弹出框的操作
							alert(msg)
							//将列表数据刷新
							this.getUserList()
							//新增之后，清空数据
							this.addUser = {}
						})
					},
					//实现数据删除
					deleteBtn(user){
						//问题：用户点击删除，如何获取数据?
						//		传递循环遍历的数据即可
						axios.delete("/deleteById?id="+user.id).then(promise =>{
							//获取服务器的返回值
							let msg = promise.data
							//弹出框的操作
							alert(msg)
							//将列表数据刷新
							this.getUserList()
						})
						/* restFul的写法 */
						/*axios.delete(`/deleteById/${user.id}`).then(promise =>{
							//获取服务器的返回值
							let msg = promise.data
							//弹出框的操作
							alert(msg)
							//将列表数据刷新
							this.getUserList()
						})*/
					},
					updateUserBtn(user){
						//实现数据的回显，将user传递给data属性
						this.updateUser = user
					},
					//实现数据的更新操作
					updateUserMet(){
						axios.put("/updateUser",this.updateUser).then(promise => {
							//提示信息
							alert(promise.data)
							//刷新列表
							this.getUserList()
							//清空修改数据
							this.updateUser = {}
						})
					}
				},
				created() {
					alert("生命周期函数")
					this.getUserList()
				}
			})
		</script>

	</body>
</html>