需求分析
前端网页向后端发起相应请求,后端响应前端的请求,做出相关操作.如前端发出获取数据库用户表的请求,后端则将用户表的内容返回给前端.简而言之,前端发出对数据库访问的请求,后端需响应结果.
项目结构
后端项目结构
实现步骤
导入相关依赖包
<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: 8090
spring:
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: 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{
@Autowired
private UserMapper userMapper;
@Override
public List<User> 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<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>
结果显示
网页首页
添加用户
点击添加用户按钮,显示结果如下,输入名字、年龄、性别之后点击确认即可添加成功
更新用户
每条数据信息之后都有相应的修改和删除操作,点击更新按钮,即可在网页下方回显当前需要更新的数据,然后更改相应的姓名、年龄、性别,提交之后即可更新成功
删除用户
点击删除按钮,页面会提示是否确认删除,确认之后即可删除用户,取消则不会进行删除操作