需求分析

前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果.

项目结构

后端项目结构

实现步骤

导入相关依赖包

 <parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.5.2</version><relativePath/> <!-- lookup parent from repository --></parent><properties><java.version>1.8</java.version><!--跳过测试类打包--><skipTests>true</skipTests></properties><!--原则：按需导入--><dependencies><dependency><groupId>org.springframework.boot</groupId><!--springboot启动项(器)，在包的内部springboot已经完成了项目的“整合”(配置)用户拿来就能用--><artifactId>spring-boot-starter-web</artifactId></dependency><!--数据库驱动--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-jdbc</artifactId></dependency><!--springboot数据库连接--><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.4.3</version></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><dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId></dependency></dependencies><!--springboot项目与Maven整合的一个插件可以通过插件 执行项目打包/测试/文档生成等操作注意事项：该插件不能省略，如果省略启动时报错(省略时)项目发布时：java -jar xxxx.jar 报错没有主清单信息！！--><build><plugins><plugin><groupId>org.springframework.boot</groupId><artifactId>spring-boot-maven-plugin</artifactId></plugin></plugins></build>

配置yml文件

server:port: 8090spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://127.0.0.1:3306/jt?serverTimezone=GMT%2B8&useUnicode=true&characterEncoding=utf8&autoReconnect=true&allowMultiQueries=trueusername: rootpassword: 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: false
logging: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<User> {}

service业务层

创建接口:

package com.jt.service;
import com.jt.pojo.User;
import java.util.List;
public interface UserService {//查List<User> 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;
@Service
public class UserServiceImpl implements UserService{@Autowiredprivate UserMapper userMapper;@Overridepublic List<User> getAll() {return userMapper.selectList(null);}@Overridepublic int delById(Integer id){return userMapper.deleteById(id);}@Overridepublic int insertUser(User user){return userMapper.insert(user);}@Overridepublic 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 {@Autowiredprivate UserService userService;@GetMapping("/getUserList")private List<User> 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);}
}

前端代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>用户数据</title><style>.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;}</style></head><body><!-- 定义vue根标签 --><div id="app"><hr/><table id="tab1" border="1px" align="center" width="80%" bgcolor="aquamarine"><tr><td colspan="5" align="center" bgcolor="beige"><h2>用户信息表</h2></td></tr><tr align="center"><td bgcolor="brown">编号</td><td bgcolor="red">姓名</td><td bgcolor="orange">年龄</td><td bgcolor="greenyellow">性别</td><td bgcolor="#0000FF">操作</td></tr><tr align="center" v-for="user in userList"><td v-text="user.id" bgcolor="brown"></td><td v-text="user.name" bgcolor="red"></td><td v-text="user.age" bgcolor="orange"></td><td v-text="user.sex" bgcolor="greenyellow"></td><td bgcolor="#0000FF"><button @click="updateUserBtn(user)" class="hand chg">修改</button><button @click="delById(user.id)" class="hand del">删除</button></td></tr></table><div align="center"><button @click="chgFlag1()" class="add">添加用户</button></div><div v-if="flag1" align="center"><table align="center" bgcolor="#7FFFD4"><tr bgcolor="#0000FF"><td>名称:<input type="text" v-model.trim="addUser.name" /></td></tr><tr bgcolor="magenta"><td>年龄:<input type="text" v-model.number="addUser.age"/></td></tr><tr bgcolor="royalblue"><td>性别:<input type="text" v-model.trim="addUser.sex"/></td></tr><tr align="right" bgcolor="rosybrown"><td><button @click="insertUser" style="background-color: green;">确认</button></td></tr></table></div><hr /><div align="center"><button @click="chgFlag2()" class="add">修改用户</button></div><div v-if="flag2" align="center"><table align="center" bgcolor="#7FFFD4"><tr bgcolor="#0000FF"><td>名称:<input type="text" v-model.trim="upUser.name" /></td></tr><tr bgcolor="magenta"><td>年龄:<input type="text" v-model.number="upUser.age"/></td></tr><tr bgcolor="royalblue"><td>性别:<input type="text" v-model.trim="upUser.sex"/></td></tr><tr align="right" bgcolor="rosybrown"><td><button @click="updateUser()" style="background-color: green;">提交</button></td></tr></table></div></div><script src="../js/axios.js"></script><script src="../js/vue.js"></script><!-- 页面中的数据必须在data中定义Ajax的请求结果赋值给属性--><script>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()},})</script></body>
</html>