前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果.
项目结构 后端项目结构 实现步骤 导入相关依赖包 org.springframework.boot spring-boot-starter-parent 2.5.2 1.8 true org.springframework.boot spring-boot-starter-web org.springframework.boot spring-boot-starter-jdbc mysql mysql-connector-java com.baomidou mybatis-plus-boot-starter 3.4.3 org.springframework.boot spring-boot-starter-test test org.springframework.boot spring-boot-devtools org.projectlombok lombok org.springframework.boot spring-boot-maven-plugin 配置yml文件 server: port: 8090spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=true username: root password: root #如果数据库密码以数字0开头 则必须使用""号包裹 #password: "01234"#SpringBoot整合Mybatis配置#定义别名包：实现对象映射#只做增强不做改变mybatis-plus: type-aliases-package: com.jt.pojo #映射文件加载路径 mapper-locations: classpath:/mybatisplus/*.xml #开启驼峰映射 configuration: map-underscore-to-camel-case: true#不打印日志debug: falselogging: level: com.jt.mapper: debug 各层级代码编写使用了mybatisplus,可以不用写简单的增删改查SQL语句
mapper(dao)层 package com.jt.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;import com.jt.pojo.User;import org.apache.ibatis.annotations.Param;import java.util.List;//继承接口时必须添加泛型对象，否则映射表报错public interface UserMapper extends BaseMapper {} service业务层创建接口:
package com.jt.service;import com.jt.pojo.User;import java.util.List;public interface UserService { //查 List getAll(); //删 int delById(Integer id); //增 int insertUser(User user); //改 int updateUser(User user);}创建接口实现类:
package com.jt.service;import com.jt.mapper.UserMapper;import com.jt.pojo.User;import org.springframework.beans.factory.annotation.Autowired;import org.springframework.stereotype.Service;import java.util.List;@Servicepublic class UserServiceImpl implements UserService{ @Autowired private UserMapper userMapper; @Override public List getAll() { return userMapper.selectList(null); } @Override public int delById(Integer id){ return userMapper.deleteById(id); } @Override public int insertUser(User user){ return userMapper.insert(user); } @Override public int updateUser(User user){ return userMapper.updateById(user); }} controller控制层 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.ArrayList;import java.util.List;@RestController@CrossOrigin@RequestMapping("/vue")public class VueController { @Autowired private UserService userService; @GetMapping("/getUserList") private List getUserList(){ return userService.getAll(); } @PostMapping("insertUser") private int insertUser(@RequestBody User user){ return userService.insertUser(user); } @DeleteMapping("deleteById") private int deleteById(Integer id){ return userService.delById(id); } @PutMapping("updateUser") private int updateUser(@RequestBody User user){ return userService.updateUser(user); }} 前端代码 用户数据.hand{cursor: pointer;background-color: aquamarine;}.bgc :hover{background-color: #FF3366;cursor: pointer;}.add{cursor: pointer;background-color: red;border: 0rem;border-radius: 3px;width: 40%;}.del{background-color: deepskyblue;}用户信息表编号姓名年龄性别操作修改删除添加用户名称:年龄:性别:确认修改用户名称:年龄:性别:提交axios.defaults.baseURL = "http://localhost:8090"const App = new Vue({el: "#app",data: {a: null,flag1: false,flag2: false,userList: [],addUser: {name: ,age: null,sex: },upUser: {id: null,name:,age: null,sex: }},methods: {async getUserList(){let {data: result} = await axios.get("/vue/getUserList")// console.log(result)//ajax请求结果赋值给属性this.userList = result},async insertUser(){let {data: result} = await axios.post("/vue/insertUser", this.addUser)console.log(result)//将列表页面重新刷新this.getUserList()},async delById(n){if(confirm("确定删除吗")){let {data: result} = await axios.delete("/vue/deleteById",{params: {id: n}})this.getUserList()}},updateUserBtn(user){this.upUser=user},async updateUser(){await axios.put("/vue/updateUser",this.upUser)alert("更新成功")this.upUser={}},chgFlag1(){this.flag1 = !this.flag1},chgFlag2(){this.flag2 = !this.flag2}},mounted(){this.getUserList()},}) 结果显示 网页首页添加用户
点击添加用户按钮,显示结果如下,输入名字、年龄、性别之后点击确认即可添加成功
更新用户每条数据信息之后都有相应的修改和删除操作，点击更新按钮，即可在网页下方回显当前需要更新的数据,然后更改相应的姓名、年龄、性别，提交之后即可更新成功
删除用户
点击删除按钮，页面会提示是否确认删除，确认之后即可删除用户，取消则不会进行删除操作