毕设过程记录（web管理系统）
2024-06-20 06:41:47
党建管理系统
1、软件版本
- jdk1.8
- mysql8.0
- node14.16.0
- navicat
- idea2021.3
##2、准备与创建vue项目
vue-cli安装：npm install -g @vue/cli
npm设置淘宝镜像加速：npm config set registry https://registry.npm.taobao.org
- 创建vue项目：
vue create vue - 运行vue项目：
cd vue
npm run serve
- 安装ElementUI：
npm i element-ui -S
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../src/assets/gloable.css'Vue.config.productionTip = falseVue.use(ElementUI,{size:"small"});new Vue({router,render: h => h(App)
}).$mount('#app')
Home.vue（第一节）
<el-button type="danger">{{ msg }}</el-button>export default{name:'Home',components:{Helloworld},data(){return{msg:"hello world"}}}
Home.vue（第二节）
<template><div style="height: 100%"><el-container style="height: 100%; /*border: 1px solid #eee*/"><el-aside width="217px" style="background-color: rgb(238, 241, 246);height: 100%"><el-menu :default-openeds="['1', '3']" style="height: 100%"><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i>导航一</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i>导航二</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i>导航三</template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="text-align: right; font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px"><el-dropdown><i class="el-icon-setting" style="margin-right: 15px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>查看</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>删除</el-dropdown-item></el-dropdown-menu></el-dropdown><span>王小虎</span></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container></div>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',data(){const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item)}}
}
</script>
App.vue（第二节）
<template><div id="app"><router-view/></div>
</template><style>
#app{height: 100%;
}</style>
package.json
{"name": "vue01","version": "0.1.0","private": true,"scripts": {"serve": "vue-cli-service serve","build": "vue-cli-service build"},"dependencies": {"core-js": "^3.6.5","element-ui": "^2.15.6","vue": "^2.6.11","vue-router": "^3.2.0"},"devDependencies": {"@vue/cli-plugin-babel": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-service": "~4.5.0","vue-template-compiler": "^2.6.11"},"browserslist": ["> 1%","last 2 versions","not dead"]
}
gloable.css（第二节）
html,body,div{margin: 0;padding: 0;
}html,body{height: 100%;
}
在main.js引入：import '../src/assets/gloable.css'
3、Vue后台整体布局完善
gloable.css（第二节）
*{margin: 0;padding: 0;box-sizing: border-box;
}
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="3-1">选项1</el-menu-item><el-menu-item index="3-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="3-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="3-4"><template slot="title">选项4</template><el-menu-item index="3-4-1">选项4-1</el-menu-item></el-submenu></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><el-table :data="tableData"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',data(){const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item),collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true}},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}}}
}
</script>
App.vue
<template><div id="app"><router-view/></div>
</template><style>
#app{min-height: 100vh;
}</style>
main.js
保持不变
4、Vue页面主体布局完善
gloable.css（第三节）
*{margin: 0;padding: 0;box-sizing: border-box;
}.ml-5{margin-left: 5px;
}.mr-5{margin-right: 5px;
}.pd-10{padding: 10px 0;
}
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入查找内容" suffix-icon="el-icon-search"></el-input><el-button class="ml-5" type="primary">搜索</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination:page-sizes="[5, 10, 15, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination><!--分页栏--></div></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',data(){const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item),collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../src/assets/gloable.css'Vue.config.productionTip = falseVue.use(ElementUI,{size:"mini"});new Vue({router,render: h => h(App)
}).$mount('#app')App.vue
<template><div id="app"><router-view/></div>
</template><style>
#app{min-height: 100vh;
}</style>
5、SpringBoot框架搭建
pom里配置阿里云仓库（加速maven下载依赖，放在pom.xml文件最后）
<repositories><repository><id>nexus-aliyun</id><name>nexus-aliyun</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url><releases><enabled>true</enabled></releases><snapshots><enabled>false</enabled></snapshots></repository>
</repositories><pluginRepositories><pluginRepository><id>public</id><name>aliyun nexus</name><url>http://maven.aliyun.com/nexus/content/groups/public</url><releases><enabled>true</enabled></releases><snapshots><enabled>false</enabled></snapshots></pluginRepository>
</pluginRepositories>
配置application.properties
server.port=9090spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/dangjian?serverTimezone=GMT%2b8
spring.datasource.username=root
spring.datasource.password=180918
写个测试接口
package com.kep.springboot;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@SpringBootApplication
public class SpringbootApplication {public static void main(String[] args) {SpringApplication.run(SpringbootApplication.class, args);}@GetMapping("/")public String index(){return "ok";}
}
并导入vue项目到springboot文件夹中
6、SpringBoot集成Mybatis实现数据查询
application.properties改进为application.yml
server:port: 9090spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/dangjian?serverTimezone=GMT%2b8username: rootpassword: 180918
按照数据库三范式创建数据库表
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nLyuODru-1647074177441)(软工毕设/image/Snipaste_2022-02-07_11-53-34.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ox2gYV1m-1647074177442)(软工毕设/image/Snipaste_2022-02-07_11-54-02.png)]
用Mybatis来操作数据库
1、首先在java包下创建entity包
2、在entity包里创建实体类User，将数据库表中属性在实体类中声明出来
set和get方法一般是用来给类的成员变量赋值的，由于类的成员变量一般会声明为private的，其他的类是不能直接访问成员变量的，所以为了在类以外给该类的成员变量赋值或者取值，只有用声明为public的set和get方法来实现set和get方法是用于封装的 所以一般只在private中用 当然你如果不是在private中用也没关系 代码也是可以执行的。
public void setA(int a){this.a = a; }是传进去一个int类型的实参a把它赋值给类里的形参a
public void setA(){this.a = a; }相当于执行了一条a=a的代码 都是形参;
public int getA(int a){this.a = a;}
public int get(){this.a = a;}
这两条代码都通不过编译 会提示没有返回值。
package com.kep.springboot.entity;public class User {private Integer id;private String username;private String password;private String nickname;private String email;private String address;public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getUsername() {return username;}public void setUsername(String username) {this.username = username;}public String getPassword() {return password;}public void setPassword(String password) {this.password = password;}public String getNickname() {return nickname;}public void setNickname(String nickname) {this.nickname = nickname;}public String getEmail() {return email;}public void setEmail(String email) {this.email = email;}public String getAddress() {return address;}public void setAddress(String address) {this.address = address;}
}
可使用lombok插件简化代码
package com.kep.springboot.entity;import lombok.Data;@Data
public class User {private Integer id;private String username;private String password;private String nickname;private String email;private String address;}
3、在java包下创建mapper包，在包下创建数据库接口（注解@select由Mybatis提供，注解@Mapper将UserMapper这个bean注入springboot）
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();}
4、在SpringbootApplication.java里查询出所有数据（@RestController注解与@GetMapper组合使用，@RestController标识SpringbootApplication是一个接口，然后@GetMapper用于查询所有数据。）
package com.kep.springboot;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
@SpringBootApplication
public class SpringbootApplication {@Autowiredprivate UserMapper userMapper;public static void main(String[] args) {SpringApplication.run(SpringbootApplication.class, args);}@GetMapping("/")public List<User> index(){return userMapper.findAll();}
}
但是我们并不应该这么写，而是：
4、在java包下com.kep.springboot包里新建controller包，在controller包里新建类UserController.java，再将SpringbootApplication.java内的内容转移到到UserController里。此时：
SpringbootApplication.java
package com.kep.springboot;import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplication
public class SpringbootApplication {public static void main(String[] args) {SpringApplication.run(SpringbootApplication.class, args);}}
UserController.java
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.List;@RestController
public class UserController {@Autowiredprivate UserMapper userMapper;@GetMapping("/")public List<User> index(){return userMapper.findAll();}
}
7、SpringBoot实现增删改查
1、接口UserMapper.java中添加插入注解@Insert
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();@Insert("INSERT into sys_user(username,password,nickname,email,phone,address) VALUES (#{username},#{password}," +"#{nickname},#{email},#{phone},#{address})")int insert(User user);
}
2、在UserController.java类中添加注解@PostMapper，写上save接口，注解@RequestBody是把前台传来的json对象转成后台的java对象
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@PostMappingpublic Integer save(@RequestBody User user){return userMapper.insert(user);}@GetMappingpublic List<User> index(){List<User> all= userMapper.findAll();return all;}
}
3、下载postman工具，用于测试接口
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ots5vfLk-1647074177443)(软工毕设/image/Snipaste_2022-02-07_14-48-31.png)]
send成功插入数据后：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mkzKLwH3-1647074177444)(软工毕设/image/Snipaste_2022-02-07_14-52-48.png)]
4、在包下添加service包，创建UserService类，加入注解@Service
package com.kep.springboot.service;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserService {@Autowiredprivate UserMapper userMapper;public int save(User user){if (user.getId()==null){ //user没有id，则表示是新增return userMapper.insert(user);}else { //否则为更新return userMapper.update(user);}}}
在UserMapper接口中并用postman测试（静态更新操作）
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();@Insert("INSERT into sys_user(username,password,nickname,email,phone,address) VALUES (#{username},#{password}," +"#{nickname},#{email},#{phone},#{address})")int insert(User user);@Update("update sys_user set username = #{username},password = #{password},nickname=#{nickname},email=#{email}," +"phone=#{phone},address=#{address} where id = #{id}")int update(User user);
}
5、改为动态sql更新数据库
先在resources下建文件夹mapper，创建文件User.xml，将原来@update注解删除
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTO Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.kep.springboot.mapper.UserMapper"><update id="update">update sys_user<set><if test="username !=null">username = #{username},</if><!--<if test="password !=null">password = #{password}</if>--><if test="nickname !=null">nickname = #{nickname},</if><if test="email !=null">email = #{email},</if><if test="phone !=null">phone = #{phone},</if><if test="address !=null">address = #{address}</if></set><where>id = #{id}</where></update></mapper>
删除后UserMapper.java
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import org.apache.ibatis.annotations.Update;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();@Insert("INSERT into sys_user(username,password,nickname,email,phone,address) VALUES (#{username},#{password}," +"#{nickname},#{email},#{phone},#{address})")int insert(User user);int update(User user);
}
最后在application.yml文件中添加扫描所有mybatis的xml文件
server:port: 9090spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/dangjian?serverTimezone=GMT%2b8username: rootpassword: 180918
mybatis:mapper-locations: classpath:mapper/*.xml #扫描所有mybatis的xml文件
测试结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-a6JVdYFG-1647074177444)(软工毕设/image/Snipaste_2022-02-07_16-28-48.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-J7y7Yugc-1647074177444)(软工毕设/image/Snipaste_2022-02-07_16-29-12.png)]
6、删除功能（用注释实现）
在UserController.java中
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic Integer save(@RequestBody User user){// 新增或者更新return userService.save(user);}//查询所有数据@GetMappingpublic List<User> index(){List<User> all= userMapper.findAll();return all;}//删除@DeleteMapping("/{id}")public Integer delete(@PathVariable Integer id) { //表示url参数return userMapper.deleteById(id);}
}
在UserMapper.java中
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();@Insert("INSERT into sys_user(username,password,nickname,email,phone,address) VALUES (#{username},#{password}," +"#{nickname},#{email},#{phone},#{address})")int insert(User user);int update(User user);@Delete("delete from sys_user where id = #{id}")Integer deleteById(@Param("id") Integer id);}
测试结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-u8TBLEh2-1647074177445)(软工毕设/image/Snipaste_2022-02-07_16-46-59.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MMmofhUg-1647074177445)(软工毕设/image/Snipaste_2022-02-07_16-47-31.png)]
8、SpringBoot实现分页查询
1、纯手写分页查询
在UserController里
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic Integer save(@RequestBody User user){// 新增或者更新return userService.save(user);}//查询所有数据@GetMappingpublic List<User> index(){List<User> all= userMapper.findAll();return all;}//删除@DeleteMapping("/{id}")public Integer delete(@PathVariable Integer id) { //表示url参数return userMapper.deleteById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来@GetMapping("/page")public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){pageNum = (pageNum -1) * pageSize;List<User> data=userMapper.selectPage(pageNum,pageSize);Integer total = userMapper.selectTotal();Map<String,Object> res = new HashMap<>();res.put("data",data);res.put("total",total);return res;}
}
在UserMapper类里
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();@Insert("INSERT into sys_user(username,password,nickname,email,phone,address) VALUES (#{username},#{password}," +"#{nickname},#{email},#{phone},#{address})")int insert(User user);int update(User user);@Delete("delete from sys_user where id = #{id}")Integer deleteById(@Param("id") Integer id);@Select("select * from sys_user limit #{pageNum},#{pageSize}")List<User> selectPage(Integer pageNum, Integer pageSize);@Select("select count(*) from sys_user")Integer selectTotal();
}
测试结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZsXjX7hj-1647074177445)(软工毕设/image/Snipaste_2022-02-07_17-34-26.png)]
分页与Home.vue结合
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入查找内容" suffix-icon="el-icon-search"></el-input><el-button class="ml-5" type="primary">搜索</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="date" label="日期" width="140"></el-table-column><el-table-column prop="name" label="姓名" width="120"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination:page-sizes="[5, 10, 15, 20]":page-size="10"layout="total, sizes, prev, pager, next, jumper":total="400"></el-pagination><!--分页栏--></div></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',data(){const item = {date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'};return {tableData: Array(10).fill(item),collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据fetch("http://localhost:9090/user/page?pageNum=1&pageSize=2").then(res => res.json()).then(res => {console.log(res)})},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
产生了前端跨域问题
Access to fetch at ‘http://localhost:9090/user/page?pageNum=1&pageSize=2’ from origin ‘http://192.168.10.3:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
跨域是当它请求的一个资源是从一个与它本身提供的第一个资源的不同的域名时，一个资源会发起一个跨域HTTP请求(Cross-site HTTP request)。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HPCUfR5A-1647074177446)(软工毕设/image/Snipaste_2022-02-07_18-08-35.png)]
因此需要springboot跨域配置
在包下创建config包，包里创建CorsConfig.java
package com.kep.springboot.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {// 当前跨域请求最大有效时长。这里默认1天private static final long MAX_AGE = 24 * 60 * 60;@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("http://localhost:8080"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法corsConfiguration.setMaxAge(MAX_AGE);source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}忽略某个字段，不展示给前端
package com.kep.springboot.entity;import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;@Data
public class User {private Integer id;private String username;@JsonIgnoreprivate String password;private String nickname;private String email;private String phone;private String address;}
动态sql改变后
对于UserController，用Map封装起来
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic Integer save(@RequestBody User user){// 新增或者更新return userService.save(user);}//查询所有数据@GetMappingpublic List<User> index(){List<User> all= userMapper.findAll();return all;}//删除@DeleteMapping("/{id}")public Integer delete(@PathVariable Integer id) { //表示url参数return userMapper.deleteById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来@GetMapping("/page")public Map<String, Object> findPage(@RequestParam Integer pageNum, @RequestParam Integer pageSize){pageNum = (pageNum -1) * pageSize;List<User> data=userMapper.selectPage(pageNum,pageSize);Integer total = userMapper.selectTotal();Map<String,Object> res = new HashMap<>();res.put("data",data);res.put("total",total);return res;}
}
对于Home.vue，进行修改后
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入查找内容" suffix-icon="el-icon-search"></el-input><el-button class="ml-5" type="primary">搜索</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[2, 5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:2,collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize).then(res => res.json()).then(res => {console.log(res)this.tableData = res.datathis.total = res.total})},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
SpringBoot针对于username进行模糊查询
对于Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入查找内容" suffix-icon="el-icon-search" v-model="username"></el-input><el-button class="ml-5" type="primary" @click="load">搜索</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){fetch("http://localhost:9090/user/page?pageNum="+this.pageNum+"&pageSize="+this.pageSize+"&username="+this.username).then(res => res.json()).then(res => {console.log(res)this.tableData = res.datathis.total = res.total})},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
对于UserMapper.java
package com.kep.springboot.mapper;import com.kep.springboot.entity.User;
import org.apache.ibatis.annotations.*;import java.util.List;@Mapper
public interface UserMapper {@Select("SELECT * from sys_user")List<User> findAll();@Insert("INSERT into sys_user(username,password,nickname,email,phone,address) VALUES (#{username},#{password}," +"#{nickname},#{email},#{phone},#{address})")int insert(User user);int update(User user);@Delete("delete from sys_user where id = #{id}")Integer deleteById(@Param("id") Integer id);@Select("select * from sys_user where username like #{username} limit #{pageNum},#{pageSize}")List<User> selectPage(Integer pageNum, Integer pageSize,String username);@Select("select count(*) from sys_user where username like #{username}")Integer selectTotal(String username);
}
对于UserController.java
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic Integer save(@RequestBody User user){// 新增或者更新return userService.save(user);}//查询所有数据@GetMappingpublic List<User> index(){List<User> all= userMapper.findAll();return all;}//删除@DeleteMapping("/{id}")public Integer delete(@PathVariable Integer id) { //表示url参数return userMapper.deleteById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来@GetMapping("/page")public Map<String, Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username){pageNum = (pageNum -1) * pageSize;username = "%"+username+"%";List<User> data=userMapper.selectPage(pageNum,pageSize,username);Integer total = userMapper.selectTotal(username);Map<String,Object> res = new HashMap<>();res.put("data",data);res.put("total",total);return res;}
}
下节实现多条件查询
9、SpringBoot集成Mybatis-plus和SwaggerUI
依赖引入Mybatis-plus
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.5.1</version>
</dependency>
在config包下创建MybatisPlusConfig.java，再加上@MapperScan，而此时UserMapper.java中@Mapper不需要了
package com.kep.springboot.config;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.mybatis.spring.annotation.MapperScan;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;@Configuration
@MapperScan("com.kep.springboot.mapper")
public class MybatisPlusConfig {// 最新版@Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));return interceptor;}
}
用Mybatis-plus框架来实现新增与修改
UserService.java
package com.kep.springboot.service;import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;@Service
public class UserService extends ServiceImpl<UserMapper,User> {public boolean saveUser(User user) {// if (user.getId() ==null){// return save(user); //mybatis-plus提供的方法，表示插入数据
// }else {// return updateById(user);
// }
// }return saveOrUpdate(user);
// @Autowired
// private UserMapper userMapper;// public int save(User user){// if (user.getId()==null){ //user没有id，则表示是新增
// return userMapper.insert(user);
// }else { //否则为更新
// return userMapper.update(user);
// }
// }}
}
UserController.java
package com.kep.springboot.controller;import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){List<User> all= userMapper.findAll();return all;}//删除@DeleteMapping("/{id}")public Integer delete(@PathVariable Integer id) { //表示url参数return userMapper.deleteById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来@GetMapping("/page")public Map<String, Object> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username){pageNum = (pageNum -1) * pageSize;username = "%"+username+"%";List<User> data=userMapper.selectPage(pageNum,pageSize,username);Integer total = userMapper.selectTotal(username);Map<String,Object> res = new HashMap<>();res.put("data",data);res.put("total",total);return res;}
}
因为Mybatis-plus无法识别数据库表名称
错误示例：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pAYGy5k0-1647074177447)(软工毕设/image/Snipaste_2022-02-07_23-02-26.png)]
因此：
User.java
package com.kep.springboot.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonIgnore;
import lombok.Data;@Data
@TableName(value = "sys_user")
public class User {@TableId(type = IdType.AUTO) //指定主键是idprivate Integer id;private String username;@JsonIgnoreprivate String password;private String nickname;private String email;private String phone;private String address; //驼峰写法也可以_后面第一个字母大写}
集成Swagger-UI，用Swagger测试接口，Swagger是一个后台生成的接口文档，在springboot项目中集成swagger-ui
1、Swagger配置类
第一步，需要在pom中引入相应的配置，这里使用2.7.0的版本。需要注意的是2.7.0和2.8.0的版本在界面风格上差异很大，如果感兴趣，可以试试2.8.0以上的版本，我比较青睐使用2.7.0及以下的版本，因为界面比较清爽。
第一步 引入pom
<!--swagger-->
<dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.7.0</version>
</dependency>
<dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger-ui</artifactId><version>2.7.0</version>
</dependency>
第二步
在代码中加入相应的配置，新建config包，写入swaggerConfig配置类：
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;
import springfox.documentation.swagger2.annotations.EnableSwagger2;@Configuration
@EnableSwagger2
public class SwaggerConfig {/*** 创建API应用* apiInfo() 增加API相关信息* 通过select()函数返回一个ApiSelectorBuilder实例,用来控制哪些接口暴露给Swagger来展现，* 本例采用指定扫描的包路径来定义指定要建立API的目录。** @return*/@Beanpublic Docket restApi() {return new Docket(DocumentationType.SWAGGER_2).groupName("标准接口").apiInfo(apiInfo("Spring Boot中使用Swagger2构建RESTful APIs", "1.0")).useDefaultResponseMessages(true).forCodeGeneration(false).select().apis(RequestHandlerSelectors.basePackage("com.xqnode.learning.controller")).paths(PathSelectors.any()).build();}/*** 创建该API的基本信息（这些基本信息会展现在文档页面中）* 访问地址：http://ip:port/swagger-ui.html** @return*/private ApiInfo apiInfo(String title, String version) {return new ApiInfoBuilder().title(title).description("更多请关注: https://blog.csdn.net/xqnode").termsOfServiceUrl("https://blog.csdn.net/xqnode").contact(new Contact("xqnode", "https://blog.csdn.net/xqnode", "xiaqingweb@163.com")).version(version).build();}
}
此时访问http://localhost:9090/swagger-ui.html
若改用Swagger3.0版本，则：
在pom.xml中引入依赖
<!--swagger--><!-- https://mvnrepository.com/artifact/io.springfox/springfox-swagger2 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-boot-starter</artifactId><version>3.0.0</version></dependency>
在SwaggerConfig.java中
package com.kep.springboot.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import springfox.documentation.builders.ApiInfoBuilder;
import springfox.documentation.builders.PathSelectors;
import springfox.documentation.builders.RequestHandlerSelectors;
import springfox.documentation.oas.annotations.EnableOpenApi;
import springfox.documentation.service.ApiInfo;
import springfox.documentation.service.Contact;
import springfox.documentation.spi.DocumentationType;
import springfox.documentation.spring.web.plugins.Docket;@Configuration
@EnableOpenApi
public class SwaggerConfig {/*** 创建API应用* apiInfo() 增加API相关信息* 通过select()函数返回一个ApiSelectorBuilder实例,用来控制哪些接口暴露给Swagger来展现，* 本例采用指定扫描的包路径来定义指定要建立API的目录。** @return*/@Beanpublic Docket restApi() {return new Docket(DocumentationType.SWAGGER_2).groupName("标准接口").apiInfo(apiInfo("Spring Boot中使用Swagger2构建RESTful APIs", "1.0")).useDefaultResponseMessages(true).forCodeGeneration(false).select().apis(RequestHandlerSelectors.basePackage("com.kep.springboot.controller")).paths(PathSelectors.any()).build();}/*** 创建该API的基本信息（这些基本信息会展现在文档页面中）* 访问地址：http://ip:port/swagger-ui.html** @return*/private ApiInfo apiInfo(String title, String version) {return new ApiInfoBuilder().title(title).description("党建管理系统Swagger-UI").termsOfServiceUrl("https://blog.csdn.net/xqnode").contact(new Contact("xqnode", "https://blog.csdn.net/xqnode", "xiaqingweb@163.com")).version(version).build();}
}
此时访问http://localhost:9090/swagger-ui/index.html来实现对后台接口测试
用Mybatis-plus的方式实现分页查询
则UserController.java变为：
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username){IPage<User> page =new Page<>(pageNum,pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<>();IPage<User> userPage = userService.page(page, queryWrapper);return userPage;}
}
出现错误：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uSxeIeUD-1647074177448)(软工毕设/image/Snipaste_2022-02-08_13-26-01.png)]
原因是与UserMapper.java中的SelectPage重复了，将UserMapper中用注解写的全都注释掉后
将UserMapper.java写成
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserMapper userMapper;@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username){IPage<User> page =new Page<>(pageNum,pageSize);
// QueryWrapper<User> queryWrapper = new QueryWrapper<>();IPage<User> userPage = userService.page(page, null);
// queryWrapper.like("username",username);return userPage;}
}
postman测试结果为：
{
"records": [{"id": 1,"username": "admin","nickname": "管理员","email": "admin@qq.com","phone": "1388888888","address": "湖北省武汉市"},{"id": 2,"username": "ke","nickname": "柯鹏","email": "k180918@163.com","phone": "13872062736","address": "湖北省黄石市"}
],
"total": 8,
"size": 2,
"current": 1,
"orders": [],
"optimizeCountSql": true,
"searchCount": true,
"countId": null,
"maxLimit": null,
"pages": 4
}
但我们只需要record与total内容
最后我们将UserController改写为：
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username){IPage<User> page =new Page<>(pageNum,pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.like("username",username);IPage<User> userPage = userService.page(page,queryWrapper);return userPage;}
}
模糊查询测试结果为：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5p5qCbgp-1647074177448)(软工毕设/image/Snipaste_2022-02-08_13-48-33.png)]
并且Mybatis-plus框架可以方便实现多条件模糊查询
在UserController中
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username,@RequestParam String nickname){IPage<User> page =new Page<>(pageNum,pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.like("username",username);queryWrapper.like("nickname",nickname);//或者 queryWrapper.and(w -> w.like("nickname",nickname));IPage<User> userPage = userService.page(page,queryWrapper);return userPage;}
}
可实现：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jloBha0b-1647074177448)(软工毕设/image/Snipaste_2022-02-08_14-04-45.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yiHhcO5H-1647074177449)(软工毕设/image/Snipaste_2022-02-08_14-05-04.png)]
如果将并查询换成或查询后（例如将address加为或查询）
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam String username,@RequestParam String nickname,@RequestParam String address){IPage<User> page =new Page<>(pageNum,pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<>();queryWrapper.like("username",username);queryWrapper.like("nickname",nickname);queryWrapper.or().like("address",address);//或者 queryWrapper.and(w -> w.like("nickname",nickname));IPage<User> userPage = userService.page(page,queryWrapper);return userPage;}
}
测试结果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OyOy1Bld-1647074177449)(软工毕设/image/Snipaste_2022-02-08_14-10-55.png)]
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zyxbZThy-1647074177449)(软工毕设/image/Snipaste_2022-02-08_14-11-29.png)]
若并查询，则若username与nickname为空，只按address查询应该可全部查到
因此改进UserController.java（加上默认值与判断语句）
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.mapper.UserMapper;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.HashMap;
import java.util.List;
import java.util.Map;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam(defaultValue = "") String username,@RequestParam(defaultValue = "") String nickname,@RequestParam(defaultValue = "") String address){IPage<User> page =new Page<>(pageNum,pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<>();if (!"".equals(username)) {queryWrapper.like("username", username);}if (!"".equals(nickname)) {queryWrapper.like("nickname", nickname);}if (!"".equals(address)) {queryWrapper.like("address", address);}//或者 queryWrapper.and(w -> w.like("nickname",nickname));IPage<User> userPage = userService.page(page,queryWrapper);return userPage;}
}
实现效果：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-gbQ8Jnzy-1647074177450)(软工毕设/image/Snipaste_2022-02-08_14-37-55.png)]
10、Vue实现增删改查
我们之前用的fetch来实现前端页面显示后台数据，现在用了Mybatis-plus框架后，我们改用axios
下载axios，在idea中前端项目文件中Terminal里写上 npm i axios -S
在前台部分新建文件夹utils，utils下新建文件request.js，request.js封装
import axios from 'axios'const request = axios.create({baseURL: '/api', // 注意！！ 这里是全局统一加上了 '/api' 前缀，也就是说所有接口都会加上'/api'前缀在，页面里面写接口的时候就不要加 '/api'了，否则会出现2个'/api'，类似 '/api/api/user'这样的报错，切记！！！timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token，对请求参数统一加密
request.interceptors.request.use(config => {config.headers['Content-Type'] = 'application/json;charset=utf-8';// config.headers['token'] = user.token; // 设置请求头return config
}, error => {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response => {let res = response.data;// 如果是返回的文件if (response.config.responseType === 'blob') {return res}// 兼容服务端返回的字符串数据if (typeof res === 'string') {res = res ? JSON.parse(res) : res}return res;},error => {console.log('err' + error) // for debugreturn Promise.reject(error)}
)export default request
在main.js中引入request.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../src/assets/gloable.css'
import request from "./utils/request";Vue.config.productionTip = falseVue.use(ElementUI,{size:"mini"});Vue.prototype.request=requestnew Vue({router,render: h => h(App)
}).$mount('#app')
在Home.vue中修改fetch部分
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入查找内容" suffix-icon="el-icon-search" v-model="username"></el-input><el-button class="ml-5" type="primary" @click="load">搜索</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){request.get("http://localhost:9090/user/page",{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username}}).then(res =>{console.log(res)this.tableData = res.recordsthis.total = res.total})},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
此时可实现前后端数据绑定
实现新增功能
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入用户名查找" suffix-icon="el-icon-search" v-model="username" @keyup.enter.native="triggerClick"></el-input><el-button class="ml-5" type="primary" @click="load" ref="btn">搜索</el-button><el-button class="ml-5" type="warning" @click="reset">重置</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div><el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%"><el-form label-width="80px" size="small"><el-form-item label="用户名"><el-input v-model="form.username" autocomplete="off"></el-input></el-form-item><el-form-item label="昵称"><el-input v-model="form.nickname" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" autocomplete="off"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="地址"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",nickname:"",form:{},dialogFormVisible:false,collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){request.get("http://localhost:9090/user/page",{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username}}).then(res =>{console.log(res)this.tableData = res.recordsthis.total = res.total})},save(){request.post("http://localhost:9090/user",this.form).then(res => {if (res){this.$message.success("保存成功！")this.dialogFormVisible = false}else {this.$message.error("保存失败！")}})},reset(){this.username = ""this.load()},triggerClick(){ //用于回车键触发搜索功能this.$refs.btn.$emit('click')this.$refs.select.blur()//解决选择框回车后展示下拉列表问题},handleAdd(){this.dialogFormVisible = true //打开弹窗this.form = {} //把form对象置空},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
此时新增的数据得实时显示，因此需要倒叙排列显示
实现编辑功能
由于新增和修改都是post接口
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入用户名查找" suffix-icon="el-icon-search" v-model="username" @keyup.enter.native="triggerClick"></el-input><el-button class="ml-5" type="primary" @click="load" ref="btn">搜索</el-button><el-button class="ml-5" type="warning" @click="reset">重置</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button><el-button type="danger">删除 <i class="el-icon-remove-outline"></i></el-button></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div><el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%"><el-form label-width="80px" size="small"><el-form-item label="用户名"><el-input v-model="form.username" autocomplete="off"></el-input></el-form-item><el-form-item label="昵称"><el-input v-model="form.nickname" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" autocomplete="off"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="地址"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",nickname:"",form:{},dialogFormVisible:false,collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){request.get("/user/page",{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username}}).then(res =>{console.log(res)this.tableData = res.recordsthis.total = res.total})},save(){request.post("/user",this.form).then(res => {if (res){this.$message.success("保存成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("保存失败！")}})},reset(){this.username = ""this.load()},triggerClick(){ //用于回车键触发搜索功能this.$refs.btn.$emit('click')this.$refs.select.blur()//解决选择框回车后展示下拉列表问题},handleAdd(){this.dialogFormVisible = true //打开弹窗this.form = {} //把form对象置空},handleEdit(row){this.form = rowthis.dialogFormVisible = true},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
删除功能
用delete接口
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入用户名查找" suffix-icon="el-icon-search" v-model="username" @keyup.enter.native="triggerClick"></el-input><el-button class="ml-5" type="primary" @click="load" ref="btn">搜索</el-button><el-button class="ml-5" type="warning" @click="reset">重置</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg"><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='取消'icon="el-icon-info"icon-color="red"title="确定删除吗？"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference" >删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div><el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%"><el-form label-width="80px" size="small"><el-form-item label="用户名"><el-input v-model="form.username" autocomplete="off"></el-input></el-form-item><el-form-item label="昵称"><el-input v-model="form.nickname" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" autocomplete="off"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="地址"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",nickname:"",form:{},dialogFormVisible:false,collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){request.get("/user/page",{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username}}).then(res =>{console.log(res)this.tableData = res.recordsthis.total = res.total})},save(){request.post("/user",this.form).then(res => {if (res){this.$message.success("保存成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("保存失败！")}})},del(id){request.delete("/user/"+id).then(res => {if (res){this.$message.success("删除成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("删除失败！")}})},reset(){this.username = ""this.load()},triggerClick(){ //用于回车键触发搜索功能this.$refs.btn.$emit('click')this.$refs.select.blur()//解决选择框回车后展示下拉列表问题},handleAdd(){this.dialogFormVisible = true //打开弹窗this.form = {} //把form对象置空},handleEdit(row){this.form = rowthis.dialogFormVisible = true},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
批量删除功能
用element-ui中Checkbox
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入用户名查找" suffix-icon="el-icon-search" v-model="username" @keyup.enter.native="triggerClick"></el-input><el-button class="ml-5" type="primary" @click="load" ref="btn">搜索</el-button><el-button class="ml-5" type="warning" @click="reset">重置</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-button type="danger" @click="delBatch">批量删除 <i class="el-icon-remove-outline"></i> </el-button><el-button type="primary">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='取消'icon="el-icon-info"icon-color="red"title="确定删除吗？"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference" >删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div><el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%"><el-form label-width="80px" size="small"><el-form-item label="用户名"><el-input v-model="form.username" autocomplete="off"></el-input></el-form-item><el-form-item label="昵称"><el-input v-model="form.nickname" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" autocomplete="off"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="地址"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",nickname:"",form:{},dialogFormVisible:false,multipleSelection:[],collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){request.get("/user/page",{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username}}).then(res =>{console.log(res)this.tableData = res.recordsthis.total = res.total})},save(){request.post("/user",this.form).then(res => {if (res){this.$message.success("保存成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("保存失败！")}})},del(id){request.delete("/user/"+id).then(res => {if (res){this.$message.success("删除成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("删除失败！")}})},handleSelectionChange(val){console.log(val)this.multipleSelection = val},delBatch(){let ids = this.multipleSelection.map(v => v.id) //将多选获取的对象扁平化处理，即[{},{},{}] => [1,2,3]request.post("/user/del/batch",ids).then(res => {if (res){this.$message.success("批量删除成功！")this.load()}else {this.$message.error("批量删除失败！")}})},reset(){this.username = ""this.load()},triggerClick(){ //用于回车键触发搜索功能this.$refs.btn.$emit('click')this.$refs.select.blur()//解决选择框回车后展示下拉列表问题},handleAdd(){this.dialogFormVisible = true //打开弹窗this.form = {} //把form对象置空},handleEdit(row){this.form = rowthis.dialogFormVisible = true},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
UserController.java
package com.kep.springboot.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.kep.springboot.entity.User;
import com.kep.springboot.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;import java.util.List;@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService;//新增和修改@PostMappingpublic boolean save(@RequestBody User user){// 新增或者更新return userService.saveUser(user);}//查询所有数据@GetMappingpublic List<User> index(){return userService.list();}//删除@DeleteMapping("/{id}")public boolean delete(@PathVariable Integer id) { //表示url参数return userService.removeById(id);}//批量删除@PostMapping("/del/batch")public boolean deleteBatch(@RequestBody List<Integer> ids) { //表示url参数return userService.removeBatchByIds(ids);}//分页查询//接口路径：/user/page//@RequestParam接收 pageNum=1&pageSize=10//limit第一个参数 = (pageNum - 1) * pageSize//pageSize//selectTotal记录数据总条数//用Map封装起来
// @GetMapping("/page")
// public Map<String, Object> findPage(@RequestParam Integer pageNum,
// @RequestParam Integer pageSize,
// @RequestParam String username){// pageNum = (pageNum -1) * pageSize;
// username = "%"+username+"%";
// List<User> data=userMapper.selectPage(pageNum,pageSize,username);
// Integer total = userMapper.selectTotal(username);
// Map<String,Object> res = new HashMap<>();
// res.put("data",data);
// res.put("total",total);
// return res;
// }// 分页查询 - mybatis-plus的方式@GetMapping("/page")public IPage<User> findPage(@RequestParam Integer pageNum,@RequestParam Integer pageSize,@RequestParam(defaultValue = "") String username,@RequestParam(defaultValue = "") String nickname,@RequestParam(defaultValue = "") String address){IPage<User> page =new Page<>(pageNum,pageSize);QueryWrapper<User> queryWrapper = new QueryWrapper<>();if (!"".equals(username)) {queryWrapper.like("username", username);}if (!"".equals(nickname)) {queryWrapper.like("nickname", nickname);}if (!"".equals(address)) {queryWrapper.like("address", address);}queryWrapper.orderByDesc("id");//新增数据倒叙排列//或者 queryWrapper.and(w -> w.like("nickname",nickname));IPage<User> userPage = userService.page(page,queryWrapper);return userPage;}
}
新增批量删除接口，并改为@PostMapping
新增删除前询问：
Home.vue
<template><el-container style="min-height:100vh /*border: 1px solid #eee*/"><el-aside width="sideWidth + 'px'" style="background-color: rgb(238, 241, 246);box-shadow: 1px 0 6px rgb(205 133 63)"><el-menu :default-openeds="['1', '3']" style="min-height: 100%;overflow-x: hidden"background-color="rgb(139 71 38)"text-color="#fff"active-text-color="#ffd04b":collapse-transition="false":collapse="isCollapse"><!--关掉菜单本身动画--><div style="height: 60px;line-height: 60px;text-align: center"><img src="../assets/logo.png" alt="" style="width: 19px;position: relative;top: 5px;margin-right: 3px"><b style="color: white" v-show="logoTextShow">后台管理系统</b></div><el-submenu index="1"><template slot="title"><i class="el-icon-message"></i><span slot="title" >导航一</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="1-1">选项1</el-menu-item><el-menu-item index="1-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="1-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="1-4"><template slot="title">选项4</template><el-menu-item index="1-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="2"><template slot="title"><i class="el-icon-menu"></i><span slot="title" >导航二</span></template><el-menu-item-group><template slot="title">分组一</template><el-menu-item index="2-1">选项1</el-menu-item><el-menu-item index="2-2">选项2</el-menu-item></el-menu-item-group><el-menu-item-group title="分组2"><el-menu-item index="2-3">选项3</el-menu-item></el-menu-item-group><el-submenu index="2-4"><template slot="title">选项4</template><el-menu-item index="2-4-1">选项4-1</el-menu-item></el-submenu></el-submenu><el-submenu index="3"><template slot="title"><i class="el-icon-setting"></i><span slot="title">导航三</span></template></el-submenu></el-menu></el-aside><el-container><el-header style="font-size: 12px;border-bottom: 1px solid #ccc;line-height: 60px;display: flex"><div style="flex: 1;font-size: 20px"><span :class="collapseBtnClass" style="cursor: pointer" @click="collapse"></span></div><el-dropdown style="width: 70px;cursor: pointer">
<!-- <i class="el-icon-setting" style="margin-right: 15px"></i>--><span>王小虎</span><i class="el-icon-arrow-down" style="margin-left: 5px"></i><el-dropdown-menu slot="dropdown"><el-dropdown-item>个人信息</el-dropdown-item><el-dropdown-item>新增</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></el-header><el-main><div style="margin-bottom: 30px"><el-breadcrumb separator="/"><el-breadcrumb-item :to="{path:'/'}">首页</el-breadcrumb-item><el-breadcrumb-item>用户管理</el-breadcrumb-item></el-breadcrumb></div><div style="padding: 10px 0"><el-input style="width: 200px" placeholder="请输入用户名查找" suffix-icon="el-icon-search" v-model="username" @keyup.enter.native="triggerClick"></el-input><el-button class="ml-5" type="primary" @click="load" ref="btn">搜索</el-button><el-button class="ml-5" type="warning" @click="reset">重置</el-button></div><!--搜索框--><div style="margin: 10px 0"><el-button type="primary" @click="handleAdd">新增 <i class="el-icon-circle-plus-outline"></i> </el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='取消'icon="el-icon-info"icon-color="red"title="您确定批量删除这些数据吗？"@confirm="delBatch"><el-button type="danger" slot="reference">批量删除 <i class="el-icon-remove-outline"></i> </el-button></el-popconfirm><el-button type="primary" class="ml-5">导入 <i class="el-icon-bottom"></i> </el-button><el-button type="primary">导出 <i class="el-icon-top"></i> </el-button></div><el-table :data="tableData" border stripe :header-cell-class-name="headerBg" @selection-change="handleSelectionChange"><el-table-column type="selection" width="55"></el-table-column><el-table-column prop="id" label="ID" width="60"></el-table-column><el-table-column prop="username" label="用户名" width="140"></el-table-column><el-table-column prop="nickname" label="昵称" width="120"></el-table-column><el-table-column prop="email" label="邮箱"></el-table-column><el-table-column prop="phone" label="电话"></el-table-column><el-table-column prop="address" label="地址"></el-table-column><el-table-column label="修改操作"><template slot-scope="scope"><el-button type="success" @click="handleEdit(scope.row)">编辑 <i class="el-icon-edit"></i></el-button><el-popconfirmclass="ml-5"confirm-button-text='确定'cancel-button-text='取消'icon="el-icon-info"icon-color="red"title="确定删除吗？"@confirm="del(scope.row.id)"><el-button type="danger" slot="reference" >删除 <i class="el-icon-remove-outline"></i></el-button></el-popconfirm></template></el-table-column></el-table><div style="padding: 10px 0"><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pageNum":page-sizes="[5, 10, 20]":page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination><!--分页栏--></div><el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%"><el-form label-width="80px" size="small"><el-form-item label="用户名"><el-input v-model="form.username" autocomplete="off"></el-input></el-form-item><el-form-item label="昵称"><el-input v-model="form.nickname" autocomplete="off"></el-input></el-form-item><el-form-item label="邮箱"><el-input v-model="form.email" autocomplete="off"></el-input></el-form-item><el-form-item label="电话"><el-input v-model="form.phone" autocomplete="off"></el-input></el-form-item><el-form-item label="地址"><el-input v-model="form.address" autocomplete="off"></el-input></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button @click="dialogFormVisible = false">取 消</el-button><el-button type="primary" @click="save">确 定</el-button></div></el-dialog></el-main></el-container></el-container>
</template><script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import request from "../utils/request";export default {name: 'Home',data(){return {tableData:[],total:0,pageNum:1,pageSize:5,phone:"",username:"",nickname:"",form:{},dialogFormVisible:false,multipleSelection:[],collapseBtnClass:'el-icon-s-fold',isCollapse:false,sideWidth:200,logoTextShow:true,headerBg:'headerBg'}},created() {//请求分页查询数据this.load()},methods:{collapse(){ //点击收缩按钮触发this.isCollapse = !this.isCollapseif (this.isCollapse){this.sideWidth = 64this.collapseBtnClass='el-icon-s-unfold'this.logoTextShow = false}else{ //展开this.sideWidth = 200this.collapseBtnClass = 'el-icon-s-fold'this.logoTextShow = true}},load(){request.get("/user/page",{params:{pageNum:this.pageNum,pageSize:this.pageSize,username:this.username}}).then(res =>{console.log(res)this.tableData = res.recordsthis.total = res.total})},save(){request.post("/user",this.form).then(res => {if (res){this.$message.success("保存成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("保存失败！")}})},del(id){request.delete("/user/"+id).then(res => {if (res){this.$message.success("删除成功！")this.dialogFormVisible = falsethis.load()}else {this.$message.error("删除失败！")}})},handleSelectionChange(val){console.log(val)this.multipleSelection = val},delBatch(){let ids = this.multipleSelection.map(v => v.id) //将多选获取的对象扁平化处理，即[{},{},{}] => [1,2,3]request.post("/user/del/batch",ids).then(res => {if (res){this.$message.success("批量删除成功！")this.load()}else {this.$message.error("批量删除失败！")}})},reset(){this.username = ""this.load()},triggerClick(){ //用于回车键触发搜索功能this.$refs.btn.$emit('click')this.$refs.select.blur()//解决选择框回车后展示下拉列表问题},handleAdd(){this.dialogFormVisible = true //打开弹窗this.form = {} //把form对象置空},handleEdit(row){this.form = rowthis.dialogFormVisible = true},handleSizeChange(pageSize){console.log(pageSize)this.pageSize=pageSizethis.load()},handleCurrentChange(pageNum){console.log(pageNum)this.pageNum=pageNumthis.load()}}
}
</script><style>
.headerBg{background-color: #eee!important;
}
</style>
这样一来，增删改查就已经全部实现！
毕设过程记录（web管理系统）相关推荐
- 哈工大毕设体验记录-使用ZYNQ MPSoC开发板实现的Linux环境千兆以太网C语言UDP协议批量文件存取（上）
写在前面:本文仅为一位哈工大本科学生的毕设过程记录(吐槽),可参考性有限,供后来的广大学弟学妹们参考一下吧,我趟过的坑别再跳了. 字体区别:黑色加粗为文章结构脉络表述,红色为必须明确的重点,绿色为次重 ...
- 云服务器主控系统,NoKvm云主机管理系统主控面板安装过程记录
老左平时接触网站运营和服务器云主机简单的运维处理比较多,且对于云服务器商家也仅仅停留在遇到和尝试使用的一些商家而已.未来在博客中也依旧保持这样的风格,只分享和接触过的商家,包括一些软件面板产品.对于服 ...
- ssm毕设项目基于web的教学资源管理系统01jkz（java+VUE+Mybatis+Maven+Mysql+sprnig）
ssm毕设项目基于web的教学资源管理系统01jkz(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysq ...
- [附源码]Nodejs计算机毕业设计交通事故记录信息管理系统Express(程序+LW)
该项目含有源码.文档.程序.数据库.配套开发软件.软件安装教程.欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue ...
- [附源码]Python计算机毕业设计SSM交通事故记录信息管理系统（程序+LW)
项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX(Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclis ...
- 计算机毕设项目：毕业论文管理系统（一）
简单的描述一下我的毕设项目:毕业论文管理系统,论文题目是基于SpringBoot的毕业论文管理系统的设计与实现.主要技术:SpringBoot+Vue+ElementUI:是一个前后端分离项目,主要实 ...
- 音乐网站毕设进度记录
这个帖子就用来做为我做毕设的记录贴吧,感觉进度越来越慢,得记录下,做对比. 2020/2/29 今天就完成了音乐的站内搜索和站外搜索,音乐播放页面一点动静都没.(不该啊!!!) 2020/3/1 今天 ...
- 学生Web管理系统(java+SQLserver)
学生Web管理系统(java+sqlserver) 系统简介 本系统对java初学者了解经典的MVC三层架构有帮助,主要采用java面向对象语言.SQL server数据库实现对学生信息搜索.修改 ...
- OpenStack Train 安装过程记录（一）：基础环境准备
文章目录 规划 硬件配置 IP规划 修改 hosts 解析 挂载安装磁盘,配置本地源 安装基础服务 NTP 时间同步 安装 OpenStack 包 控制节点需要安装的服务 数据库 消息队列 Memca ...
最新文章
- 【怎样写代码】偷窥高手 -- 反射技术（五）：深入窥视方法
- 门户网站建设与运营需要付出更多成本
- scanf_s()函数 (是Microsoft公司VS开发工具提供的一个功能相同的安全标准输入函数)
- boost::container实现devector选项程序
- .Net 5性能改进
- 光影变幻：自动化所基于最优传输理论的影视换脸技术
- 微软称伊朗国家黑客攻击美国国防技术公司
- 基于jQuery带标题的图片3D切换焦点图
- 操作系统安全与系统攻击
- 回溯法——利用解空间树解决0-1背包问题
- 【QCM2150】WCN3680 WFA 11ac STA 5.2.1/5.2.61测试失败
- 苹果提示：“未信任的企业开发者”
- 2020-09-25
- 《OKR工作法》读书笔记
- CLSID {10020200-E260-11CF-AE68-00AA004A34D5} failed due to the following error: 80040154. 错误的解决办法
- 常用docker镜像启动了解
- html5相对路径写法,相对路径写法
- 仿交易猫 转转闲鱼源码 多版本合一
- maven 排除某个类_Maven依赖排除的问题和答案
- 纸球的40种折法_怎么做纸球的折法步骤图解