SpringBoot+Mybatis-Plus的使用
创建项目
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-UroGMhMQ-1644579894961)(C:\Users\violetmuzi\AppData\Roaming\Typora\typora-user-images\image-20220211192541108.png)]
添加springweb、lombook、mysql driver、jdbc api、thymeleaf
创建package包:
controller
写注解@Controller
package cn.kgc.lh.controller;
import cn.kgc.lh.dao.PersonMapper;
import cn.kgc.lh.pojo.Person;
import com.alibaba.fastjson.JSON;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
import javax.annotation.Resource;
/**
* @author: violetmuzi
* @date: 2022/2/11
* @description:
*/
@Controller
public class PersonController {
@Resource
private PersonMapper personMapper;
@RequestMapping("/index")
public String index(){
return "index";
}
@RequestMapping("/page")
@ResponseBody
public String page(@RequestParam Integer currentPage, @RequestParam Integer pageSize){
Page<Person> page=new Page<Person>(currentPage,pageSize);
QueryWrapper qw = new QueryWrapper();
qw.orderByDesc("id");
IPage<Person>iPage=personMapper.selectPage(page,qw);
return JSON.toJSONString(iPage);
}
@RequestMapping("/add")
public String add() {
return "add";
}
@PostMapping("/save")
@ResponseBody
public boolean add(@ModelAttribute Person person) {
int insert = personMapper.insert(person);
System.out.println(insert);
if (insert > 0) {
return true;
}
return false;
}
@RequestMapping("/del")
@ResponseBody
public boolean del(@RequestParam int id){
int del= personMapper.deleteById(id);
System.out.println(del);
if (del > 0) {
return true;
}
return false;
}
}
启动类CompanyApplication
写注解@MapperScan(“dao的路径”) //扫描Mapper文件
package cn.kgc.lh;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
@MapperScan("cn.kgc.lh.dao")
public class CompanyApplication {
public static void main(String[] args) {
SpringApplication.run(CompanyApplication.class, args);
}
}
pojo
注解@TableId(type = IdType.AUTO) 方便id自增的排序
package cn.kgc.lh.pojo;
import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;
/**
* @author: violetmuzi
* @date: 2022/2/11
* @description:
*/
@Data
@AllArgsConstructor
@NoArgsConstructor
public class Person {
@TableId(type = IdType.AUTO)
private int id;
private String name;
private int gender;
private int age;
private int rank;
private String department;
}
dao(Mapper)
写接口继承BaseMapper //BaseMapper<>中封装着很多常用的方法
package cn.kgc.lh.dao;
import cn.kgc.lh.pojo.Person;
import com.baomidou.mybatisplus.core.mapper.BaseMapper;
/**
* @author: violetmuzi
* @date: 2022/2/11
* @description:
*/
public interface PersonMapper extends BaseMapper<Person> {
}
utils(工具包放(MybatisPlusConfig)工具类)方便调用
package cn.kgc.lh.utils;
import com.baomidou.mybatisplus.extension.plugins.PaginationInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
/**
* @author: violetmuzi
* @date: 2022/2/11
* @description:
*/
@Configuration
public class MybatisPlusConfig {
@Bean
public PaginationInterceptor page(){
return new PaginationInterceptor();
}
}
3.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 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.6.3</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>cn.kgc</groupId>
<artifactId>company</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>company</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>junit</groupId>
<artifactId>junit</artifactId>
<scope>test</scope>
</dependency>
<!--添加依赖的开始 —————————————————————————————————— -->
<!--fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.76</version>
</dependency>
<!--mybati-plus-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.4.1</version>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
<configuration>
<excludes>
<exclude>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</exclude>
</excludes>
</configuration>
</plugin>
</plugins>
</build>
</project>
编写application.yml
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/companydb //数据库路径
username: root
password: 698511 //数据密码
mybatis-plus:
configuration:
log-impl: org.apache.ibatis.logging.stdout.StdOutImpl //输出日志用
分页页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>人员列表</title>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/index.js"></script>
</head>
<body onload="pageInfo()">
<table border="1" align="center" width="1000" class="table-page">
<tr style="background: chartreuse">
<td colspan="7">
<h2 align="center">人员列表</h2>
</td>
</tr>
<tr style="background: chartreuse">
<th>序号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>等级</th>
<th>部门</th>
<th>操作</th>
</tr>
<!-- 第1行 -->
<tr align="center" style="background: chocolate">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第2行 -->
<tr align="center" style="background: chartreuse">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<!-- 第3行 -->
<tr align="center" style="background: chocolate">
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<h5 style="text-align: center">
<a href="javascript:void(0)" onclick="start()">首页</a>
<a href="javascript:void(0)" onclick="prev()">上一页</a>
<a href="javascript:void(0)" onclick="next()">下一页</a>
<a href="javascript:void(0)" onclick="end()">尾页</a>
<span class="showPage">第1页/共1页</span>
<button onclick="jump()">添加人员</button>
</h5>
</body>
</html>
添加页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>添加人员</title>
<style>
.red {
color: red;
}
</style>
<script src="js/jquery-3.6.0.min.js"></script>
<script src="js/add.js"></script>
</head>
<body>
<h1 align="center" style="background: aqua">添加人员</h1>
<table border="1" align="center" width="400" height="300">
<tr style="background: chartreuse">
<td>姓名：</td>
<td>
<input type="text" class="cname"> <span class="red">*</span>
</td>
</tr>
<tr style="background: aqua">
<td>性别：</td>
<td>
<select class="gender">
<option value="-1">请选择</option>
<option value="0">男</option>
<option value="1">女</option>
</select>
<span class="red">*</span>
</td>
</tr>
<tr style="background: chartreuse">
<td>年龄：</td>
<td><input type="text" class="age"></td>
</tr>
<tr style="background: aqua">
<td>等级：</td>
<td>
<select class="rank">
<option value="-1">请选择</option>
<option value="1">1级</option>
<option value="2">2级</option>
<option value="3">3级</option>
<option value="4">4级</option>
<option value="5">5级</option>
</select>
<span class="red">*</span>
</td>
</tr>
<tr style="background: chartreuse">
<td>部门：</td>
<td>
<select class="department">
<option value="-1">请选择</option>
<option value="开发部">开发部</option>
<option value="支持部">支持部</option>
<option value="工程质量部">工程质量部</option>
</select>
<span class="red">*</span>
</td>
</tr>
<tr style="background: aqua">
<td colspan="2" align="center">
<button onclick="save()">保存</button>
<a href="/index">返回查询</a>
</td>
</tr>
</table>
</body>
</html>
js文件
别忘了引入jquery-3.6.0.min.js
index.js
var currentPage = 1;
var totalPage = 1;
var pageSize = 3;
var totalCount = 0;
function pageInfo() {
//清空
$(".table-page tr:gt(0) td").html(" ");
//声明json串，并赋值
let jsonA = {
currentPage: currentPage,
pageSize: pageSize
};
$.ajaxSettings.async = false;
$.getJSON("page",jsonA,function (dataA) {
console.log(dataA);
//总条数
totalCount = dataA.total;
//总页数
totalPage = dataA.pages;
//渲染数据
$(dataA.records).each(function (i, v) {
console.log(v);
let sex=""
if(v.gender==0){
sex="男";
}else {
sex="女";
}
$(".table-page").find("tr").eq(i + 2).find("td").eq(0).text((currentPage-1)*pageSize+i+1);
$(".table-page").find("tr").eq(i + 2).find("td").eq(1).text(v.name);
$(".table-page").find("tr").eq(i + 2).find("td").eq(2).text(sex);
$(".table-page").find("tr").eq(i + 2).find("td").eq(3).text(v.age);
$(".table-page").find("tr").eq(i + 2).find("td").eq(4).text(v.rank+"级");
$(".table-page").find("tr").eq(i + 2).find("td").eq(5).text(v.department);
$(".table-page").find("tr").eq(i + 2).find("td").eq(6).html("<a onclick='del("+v.id+")' href='javascript:void(0)'>删除</a>");
})
})
$.ajaxSettings.async = true;
showPage();
}
//展示页码
function showPage() {
$(".showPage").text("第" + currentPage + "页 / 共" + totalPage + "页");
if(currentPage>totalPage){
currentPage--;
pageInfo();
}
}
// /下一页
function next() {
currentPage++;
if (currentPage > totalPage) {
currentPage = totalPage;
return;
}
pageInfo();
}
//上一页
function prev() {
currentPage--;
if (currentPage < 1) {
currentPage = 1;
return;
}
pageInfo();
}
//首页
function start() {
currentPage = 1;
pageInfo();
}
//尾页
function end() {
currentPage = totalPage;
pageInfo();
}
function jump() {
location.href="/add";
}
function del(id) {
let a= confirm("确定要删除吗？")
if (a==false){
return;
}
$.ajaxSettings.async = false;
$.post("/del","id="+id,function (data) {
if (data==true){
alert("删除成功！")
return;
}else {
alert("删除失败！")
return;
}
})
const totalPage = Math.ceil((this.count - 1) / this.pageSize) // 总页数
this.currentPage = this.currentPage > totalPage ? totalPage : this.currentPage
this.currentPage = this.currentPage < 1 ? 1 : this.currentPage
$.ajaxSettings.async = true;
pageInfo();
}
add.js
function save() {
var name=$(".cname").val();
var gender=$(".gender").val();
var age=$(".age").val();
var rank=$(".rank").val();
var department =$(".department").val();
function boo() {
let reg=/^(?:[1-9][0-9]?|1[01][0-9]|120)$/;//年龄是1-120之间有效
if (name == "") {
alert("必须填写联系人姓名");
return false;
} else if (gender<0) {
alert("请选择性别!");
return false;
} else if (!reg.test(age)){
alert("请正确填写年龄!");
return false;
}else if (rank<0) {
alert("请选择等级!");
return false;
} else if (department==-1) {
alert("请选择部门!");
return false;
}
return true;
}
let json={
name:name,
gender:gender,
age:age,
rank:rank,
department:department
};
var bo=boo();
console.log(bo);
console.log(json);
$.ajaxSettings.async=false;
$.post("/save",json,function (data) {
console.log(data)
if (data == true&&bo== true){
alert("添加成功")
}else{
alert("添加失败")
}
});
$.ajaxSettings.async=true;
}
目录结构
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-k5zhqFEA-1644579894963)(C:\Users\violetmuzi\AppData\Roaming\Typora\typora-user-images\image-20220211193404144.png)]
实现了简单的分页查询功能、添加和删除功能
return false;
}
return true;
}
let json={
name:name,
gender:gender,
age:age,
rank:rank,
department:department
};
var bo=boo();
console.log(bo);
console.log(json);
$.ajaxSettings.async=false;
$.post("/save",json,function (data) {
console.log(data)
if (data == true&&bo== true){
alert("添加成功")
}else{
alert("添加失败")
}
});
$.ajaxSettings.async=true;
}
目录结构
[外链图片转存中...(img-k5zhqFEA-1644579894963)]
**实现了简单的分页查询功能、添加和删除功能**
**如有错误，请斧正。**
