Vue与后端链接并且实现增删改查(操作数据库)
1 后端准备1.1 代码结构1.2 pom.xml文件（配置文件）<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocatio
·
1 后端准备
1.1 代码结构
1.2 pom.xml文件（配置文件）
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.jt</groupId>
<artifactId>springboot_demo4</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.5.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<java.version>1.8</java.version>
<skipTests>true</skipTests>
</properties>
<!--历史: SSM 需要手动的编辑大量的配置信息
SpringBoot 使用体系了 "开箱即用" 的思想
-->
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<!--Spring的启动器,相当于之前大量的配置文件 在内部已经将整合的配置写好了,实现拿来即用-->
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.48</version>
</dependency>
<dependency>
<!--spring整合mybatis-plus 删除mybatis的包-->
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.3</version>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
</dependency>
</dependencies>
<!--插件:
springboot项目:在打包部署发布时,需要依赖maven 工具API
如果不添加该插件,则直接影响项目的发布
-->
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
1.3 application.yml
#端口配置
server:
port: 8080
#配置源
spring:
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql:///jt?useUnicode=true&characterEncoding=utf8&useSSL=false
username: root
password: root
#SpringBoot整合Mybatis-plus配置
mybatis-plus:
type-aliases-package: com.jt.pojo
mapper-locations: classpath:/mappers/*.xml
#开启驼峰映射
configuration:
map-underscore-to-camel-case: true
#打印Sql语句 为com.jt.mapper包下的Sql执行打印日志
logging:
level:
com.jt.mapper: debug
1.4 User类（POJO 数据层）
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.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
import lombok.experimental.Accessors;
import java.io.Serializable;
@Data
@Accessors(chain = true)
@AllArgsConstructor
@NoArgsConstructor
//1 将对象与表进行关联
//规则:如果表名与对象名一致时,名称可以省略
// 如果字段名与属性名一致,则注解可以省略
//序列化接口的作用:保证对象网络传输的有效性 网络传输(不同的服务器之间传递同一个对象)
//对象与表关联
@TableName("demo_user")
public class User implements Serializable {//序列化
@TableId(type = IdType.AUTO) //table + 主键 //主键自增/非空/UUID /生成唯一编号
private Integer id;
@TableField("name")//标识属性与字段的映射
private String name;
@TableField("age")
private Integer age;
@TableField("sex")
private String sex;
}
2 具体实现
注意：1 VUE的生命周期函数要写到Vue对象中，并且与el，data 同级
created（）生命周期函数，创建对象后，视图渲染前调用执行，
2 一般来说：get用于查找，
delete与get用法相似 常用于删除
post用于增加
put与post用法相似，常用于修改
需要在controller层添加@CrossOrigin注解 用于前端的跨域
3 展示所有数据：1 利用axios将数据调到前台
2 在vue对象的data区域创建一个数组，用于接收后台数据
3 利用v-for 形参 in 数组 来循环后台数据
4 v-text 展示形参.属性
4 添加一条数据：1 在Vue对象的data区域添加一个空对象，利用v-model双向数据绑定用户输入框 点击按钮绑定一个axios函数
2 在axios.post（url，this.对象）url为后台地址值 this.对象为用户输入
3 注意：注意：因为前台传到后台的对象为json串，所有需要在 后台的
controller层传入对象前调用@RequestBody：例如：
@PostMapping("/addUser")
public String addUser(@RequestBody User user){//将浏览器的json数据转化为对象
userService.addUser(user);
return "添加成功";
}4 添加完成后自动刷新页面已经将用户输入值情况
this.listuser()
this.user = {}5 修改（axios.put）一条数据 ： 1 点击修改按钮，将数据回显到修改的div中，因为v-for 形参 in 数组 每一条都是一个数据对象，所有：新创建一个对象： this.新对象 = 形参 就是拿到了一条数据，v-model数据双向绑定到需要修改的页面，完成回显，剩余的操作与添加一条数据相似
6 删除：与修改类似，获得一条数据后，根据主键（ID）删除用户数据
2.1.1 前端
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>案例</title>
<script src="../js/axios.js"></script>
<script src="../js/vue.js"></script>
</head>
<body>
<div id = "app">
<!-- 新增div -->
<div align="center">
用户名：<input type="text" v-model="user.name" />
年龄：<input type="text" v-model="user.age"/>
性别：<input type="text" v-model="user.sex"/>
<button @click="addUser()">添加</button>
</div>
<hr/>
<!-- 修改div -->
<div align="center">
id：<input type="text" v-model="user1.id" />
用户名：<input type="text" v-model="user1.name" />
年龄：<input type="text" v-model="user1.age"/>
性别：<input type="text" v-model="user1.sex"/>
<button @click="updateUser1()">修改</button>
</div>
<hr/>
<!-- 展现div -->
<div>
<table border="1px" width="80%" align="center">
<tr align="center">
<th colspan="5"><h3>用户列表</h3></th>
</tr>
<tr align="center">
<td>编号</td>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
<tr align="center" v-for="user in listuser1">
<td v-text="user.id"></td><!-- 为什么不能使用v-model -->
<td v-text="user.name"></td>
<td v-text="user.age"> </td>
<td v-text="user.sex"></td>
<td width="25%" @click="update2(user)"><button>修改</button><!-- 传的是当前对象 -->
<button @click="delete1(user)">删除</button></td><!-- 传的是当前对象 注意：方法名不能与asios自带的方法名相同 -->
</tr>
</table></div>
</div>
<!-- 2 创建对象 -->
<script>
const app = new Vue({
el:"#app",
data:{
listuser1:[],//数字写法：listuser1 : []
user:{
name :"",
age :"",
sex:"",
},
user1:{
id:"",
name :"",
age :"",
sex:"",
}
},
methods:{
listuser(){
axios.get("http://localhost:8080/vue/getUser").then(promise =>{
console.log(promise.data)
this.listuser1 = promise.data
})
},
addUser(user){
axios.post("http://localhost:8080/vue/addUser",this.user).then(promise => {
console.log(promise.data)
this.listuser()
this.user = {}
})
},
delete1(user){
axios.delete("http://localhost:8080/vue/deleteUser?id=" + user.id).then(promise =>{
console.log(promise.data)
this.listuser()
})
},
update2(user){
this.user1 = user
},
updateUser1(){
axios.put("http://localhost:8080/vue/updateUser1",this.user1).then(promise =>{
/* /updataUser */
this.listuser()
this.user1 = {}
})
}
},
created() {//生命周期函数，创建对象后，视图渲染执行调用 生命周期函数在vue中，并且与el，data等同级
this.listuser()
},
})
</script>
</body>
</html>
2.1.2 Lx1Controller
package com.jt.controller;
import com.jt.pojo.User;
import com.jt.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
@RestController
@RequestMapping("/vue")
@CrossOrigin//跨域
public class LxController {
@Autowired
private UserService userService;
@GetMapping("/getUser")
public List<User> getUser1(){
return userService.getUser1();
}
@PostMapping("/addUser")
public String addUser(@RequestBody User user){//将浏览器的json数据转化为对象
userService.addUser(user);
return "添加成功";
}
@DeleteMapping("/deleteUser")
public String deleteUser(Integer id){
userService.deleteUser(id);
return "删除成功";
}
@PutMapping("/updateUser1")
public String updateUser(@RequestBody User user){
userService.updataUser1(user);
return "修改成功";
}
}
2.1.2 UserService
package com.jt.service;
import com.jt.pojo.User;
import java.util.List;
public interface UserService {
List<User> getUser1();
void addUser(User user);
void deleteUser(Integer id);
void updataUser1(User user);
}
2.2.2 UserServiceImpl
package com.jt.service;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.jt.mapper.UserMapper;
import com.jt.pojo.User;
import com.sun.corba.se.spi.orbutil.threadpool.WorkQueue;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.Arrays;
import java.util.List;
@Service
public class UserServiceImpl implements UserService {
@Autowired
private UserMapper userMapper;
@Override
public List<User> getUser1() {
return userMapper.selectList(null);
}
@Override
public void addUser(User user) {
userMapper.insert(user);
}
@Override
public void deleteUser(Integer id) {
userMapper.deleteById(id);
}
@Override
public void updataUser1(User user) {
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
queryWrapper.eq("id", user.getId());
userMapper.update(user, queryWrapper);
}
}
2.2.3 启动类
package com.jt;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.CrossOrigin;
@SpringBootApplication
@MapperScan("com.jt.mapper")
public class RunApp {
public static void main(String[] args) {
SpringApplication.run(RunApp.class, args);
}
}
注意:restFul 与 put 共用
用途：例如：用户需要将name = “hanmm”的用户修改为name=“mmh”
注意：注意：user为修改后的对象 而 /{whereName} 为查找的条件，查找到添加形参不能与对象中的属性一致，否则会发生覆盖
@RequestBody 用于将前端穿来的json转换为对象
@PathVariable 用于restFul传输，并且顺序要与url中属性的顺序完全一致：
在restFul的url中，属性使用/{属性}拼接
/*
* restFul 可以使用对象接收 与set对象冲突 restFul的名称不要与属性重名,则会覆盖
* */
@PutMapping("/updataUserByName/{whereName}")
public String updataUserByName(@RequestBody User user,@PathVariable String whereName){
userService.updataUserByName(user,whereName);
return "用户修改成功";
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
16
0- 0
已为社区贡献1条内容
所有评论(0)