1.Spring 整合 Mybatis-Plus
a.链接：https://www.cnblogs.com/vettel0329/p/11990721.html
2.后端搭建：
a.在数据库创建 tb_user 用户表
-- 用户表 CREATE TABLE `tb_user` ( `id` varchar(255) NOT NULL, `user_name` varchar(255) NOT NULL, `user_code` int(11) NOT NULL, PRIMARY KEY (`id`) );
b.创建SpringBoot工程，选择依赖 Web、Thymeleaf、Mysql Driver，并手动添加 Mybatis-Plus 的SpringBoot依赖
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.2.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
......
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.2.0</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
......
</dependencies>
c.编辑 application.yml 配置文件
# 服务端口
server:
port: 8081
spring:
# 服务名称
application:
name: springboot-mybatis-plus
# 数据源配置
datasource:
driver-class-name: com.mysql.jdbc.Driver
url: jdbc:mysql://localhost:3306/mytest?useUnicode=true&characterEncoding=utf-8&useSSL=true&serverTimezone=UTC
username: root
password: 123456
# thymeleaf热更新
thymeleaf:
cache: false
# mybatis-plus相关配置
mybatis-plus:
# entity扫描
type-aliases-package: com.wode.springbootmybatisplus.entity
global-config:
db-config:
# AUTO -> 数据库ID自增
# INPUT -> 用户输入ID
# ID_WORKER -> 全局唯一ID（数字类型唯一ID）
# UUID -> 全局唯一ID（UUID）
id-type: UUID
# 全局表前缀
table-prefix: tb_
d.创建 Mybatis-Plus 配置类
@Configuration
@EnableTransactionManagement //开启事务
@MapperScan("com.wode.springbootmybatisplus.dao") //mapper扫描
public class MybatisPlusConfig {
//分页插件
@Bean
public PaginationInterceptor paginationInterceptor() {
return new PaginationInterceptor();
}
}
e.创建entity实体类
@TableName
public class User {
@TableId
private String id;
private String userName;
private int userCode;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getUserName() {
return userName;
}
public void setUserName(String userName) {
this.userName = userName;
}
public int getUserCode() {
return userCode;
}
public void setUserCode(int userCode) {
this.userCode = userCode;
}
@Override
public String toString() {
return "User(id[" + id + "], userName[" + userName + "], userCode[" + userCode + "])";
}
}
f.创建Dao
public interface UserMapper extends BaseMapper<User> {
}
g.创建Service
@Service
public class UserService {
@Resource
private UserMapper userMapper;
public boolean addUser(User user){
if(userMapper.insert(user) > 0){
return true;
}
return false;
}
public boolean updateUser(User user){
if(userMapper.updateById(user) > 0){
return true;
}
return false;
}
public User getUser(String id){
return userMapper.selectById(id);
}
public IPage<User> getUserList(int currentPage, int pageSize){
Page<User> page = new Page<>(currentPage, pageSize);
QueryWrapper<User> queryWrapper = new QueryWrapper<>();
return userMapper.selectPage(page, queryWrapper);
}
public boolean deleteUser(String id){
if(userMapper.deleteById(id) > 0){
return true;
}
return false;
}
}
h.创建Controller
@RestController
@RequestMapping("/user")
public class UserController {
@Resource
private UserService userService;
@PostMapping("/add")
public String addUser(User user) {
if(userService.addUser(user)){
return "Success";
}
return "Failure";
}
@PostMapping("/update")
public String updateUser(User user) {
if(userService.updateUser(user)){
return "Success";
}
return "Failure";
}
@RequestMapping("/get/{id}")
public User getUser(@PathVariable("id") String id) {
return userService.getUser(id);
}
@RequestMapping("/list")
public IPage<User> getUserList(int currentPage, int pageSize){
return userService.getUserList(currentPage, pageSize);
}
@RequestMapping("/delete/{id}")
public String deleteUser(@PathVariable("id") String id){
if(userService.deleteUser(id)){
return "Success";
}
return "Failure";
}
}
@Controller
public class PageController {
//默认页面
@RequestMapping("/")
public String index() {
return "home";
}
//跳转到首页
@RequestMapping("/home")
public String home() {
return "home";
}
//跳转到详情
@RequestMapping("/detail")
public String detail() {
return "detail";
}
}
3.前端测试
a.在 resources/templates 下创建 home.html 和 detail.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>首页</title>
<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
<div>
<h1>首页</h1>
<div class="row">
<table id="list-table" border="1">
<tr>
<th>ID</th>
<th>账号</th>
<th>编号</th>
<th>操作</th>
</tr>
</table>
</div>
<div class="row">
<div class="col">
<button id="list-btn">用户列表</button>
</div>
<div class="col">
<button id="add-btn">添加用户</button>
</div>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/home.js"></script>
</html>
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>保存</title>
<link rel="stylesheet" href="css/common.css"/>
</head>
<body>
<div>
<h1>保存</h1>
<div class="row">
<div class="col">
<label>用户名：</label><input id="username-input" type="text"/>
</div>
</div>
<div class="row">
<div class="col">
<label>编号：</label><input id="usercode-input" type="text"/>
</div>
</div>
<div class="row">
<div class="col">
<button id="save-btn">保存</button>
</div>
<div class="col">
<button id="close-btn">关闭</button>
</div>
</div>
<input id="id" type="hidden" th:value="${#request.getParameter(‘id‘)}" />
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/detail.js"></script>
</html>
b.在 resources/static/css 下创建 common.css
.row{
margin:10px 0px;
}
.col{
display: inline-block;
margin:0px 5px;
}
c.在 resources/static/css 下创建 home.js 和 detail.js
$(function() {
//获取用户列表
$("#list-btn").on("click", getUserListFunc);
//用户详情
$(document).on("click", ".detail-btn",function(){
let id = $(this).attr(‘data-id‘);
location.href = "detail?id=" + id;
});
//删除用户
$(document).on("click", ".delete-btn",function(){
let id = $(this).attr(‘data-id‘);
$.ajax({
url: "user/delete/" + id,
success: function(data){
alert("删除成功！");
getUserListFunc();
},
error: function(e){
alert("系统错误！");
},
})
});
//添加用户
$("#add-btn").on("click",function(){
location.href = "detail";
});
});
//函数：获取用户列表
let getUserListFunc = function() {
$.ajax({
url: "user/list",
data: {
currentPage: 1,
pageSize: 100
},
success: function (data) {
if (data) {
$("#list-table").empty();
$("#list-table").html("<tr><th>ID</th><th>账号</th><th>编号</th><th>操作</th></tr>");
let userArray = data.records;
for (let i in userArray) {
let user = userArray[i];
let id = user.id;
let userName = user.userName;
let userCode = user.userCode
let trTemplate = `<tr>
<th>${id}</th>
<th>${userName}</th>
<th>${userCode}</th>
<th>
<button class="detail-btn" data-id="${id}">详情</button>
<button class="delete-btn" data-id="${id}">删除</button>
</th>
</tr>`;
$("#list-table").append(trTemplate);
}
}
},
error: function (e) {
console.log("系统错误！");
},
})
}
$(function() {
//加载
let id = $("#id").val();
if(id){
$.ajax({
url: "user/get/" + id,
success: function(data){
if(data){
let userName = data.userName;
let userCode = data.userCode;
$("#username-input").val(userName);
$("#usercode-input").val(userCode);
}else{
alert("系统错误！");
}
},
error: function(e){
alert("系统错误！");
},
})
}
//获取用户列表
$("#save-btn").on("click",function(){
let userName = $("#username-input").val();
if(! userName){
alert("用户名不能为空");
return;
}
let userCode = $("#usercode-input").val();
if(! userCode){
alert("编号不能为空");
return;
}
let user;
let url;
//修改
if(id){
url = "user/update";
user = {
userName: userName,
userCode: userCode,
id: id
};
//添加
}else{
url = "user/add";
user = {
userName: userName,
userCode: userCode
};
}
$.ajax({
url: url,
type: "POST",
data: user,
success: function(data){
alert("保存成功！");
},
error: function(e){
alert("系统错误！");
},
})
});
//添加用户
$("#close-btn").on("click",function(){
location.href = "home";
});
});
d.访问 http://localhost:8080 进行测试
原文地址：https://www.cnblogs.com/vettel0329/p/12038468.html
时间： 2024-10-04 13:54:52