axios ---- 综合案例
程序员文章站
2022-03-05 09:31:05
...
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. 控制层
-
VueControllerpackage 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; }*/ @GetMapping("/findById/{id}") public User findById(@PathVariable Integer id){ return vueService.findById(id); } @PutMapping("/updateById") public String updateById(@RequestBody User user){ int row = vueService.updateById(user); return "更新成功，受影响的行数："+row; } }
6. Mapper接口
-
VueMapperpackage 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. 业务层
-
VueServicepackage 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 id id值 * @return user对象 */ User findById(Integer id); /** * 根据id更新 * @param user user对象 * @return 影响的行数 */ int updateById(User user); } -
VueServiceImplpackage 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 User findById(Integer id) { return vueMapper.selectById(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>
<!-- {{addUser}} -->
<br />
编号：<input type="text" v-model="getUser.id" />
姓名：<input type="text" v-model="getUser.name" />
年龄：<input type="text" v-model="getUser.age" />
性别：<input type="text" v-model="getUser.sex" />
<button @click="changeById(getUser)">修改</button>
</div>
<hr />
<!-- 展现 -->
<div>
<table border="1px" width="80%" align="center">
<tr align="center">
<th colspan="5">用户列表</th>
</tr>
<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>删除</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="findById(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: ''
},
getUser: {
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()
})*/
},
findById(user){
axios.get(`/findById/${user.id}`).then(promise => {
let msg = promise.data
this.getUser = promise.data
//alert(msg)
console.log(msg)
//this.getUserList()
})
},
changeById(user){
axios.put("/updateById",this.getUser).then(promise => {
let msg = promise.data
alert(msg)
this.getUserList()
this.getUser = {}
})
}
},
created() {
alert("生命周期函数")
this.getUserList()
}
})
</script>
</body>
</html>