网站开发的经费预算,,php网站超市源码下载,网站竞争对手如何做调研,南京中天园林建设网站文章目录 前言统一的设置返回类型Vue安装axios#xff0c;封装request查询所有的用户前端页面请求后端接口编写 条件查询前台请求后台处理请求 分页查询前台发送请求后台接受请求 新增、编辑管理员信息前台后台 删除操作前台请求后台 前言
SpringBoot实现增删改查、分页查询、… 文章目录 前言统一的设置返回类型Vue安装axios封装request查询所有的用户前端页面请求后端接口编写 条件查询前台请求后台处理请求 分页查询前台发送请求后台接受请求 新增、编辑管理员信息前台后台 删除操作前台请求后台 前言
SpringBoot实现增删改查、分页查询、模糊查询。
统一的设置返回类型
统一的返回数据结构可以使代码更加清晰易懂方便阅读和维护。例如当所有接口都返回相同格式的 JSON 数据时开发人员可以轻松地理解和使用返回的数据而无需猜测不同接口返回的数据格式。
public class Result {private static final String SUCCESS 0;private static final String ERROR -1;private String code;private String msg;private Object data;public static Result success() {Result result new Result();result.setCode(SUCCESS);return result;}public static Result success(Object data) {Result result new Result();result.setCode(SUCCESS);result.setData(data);return result;}public static Result error(String msg) {Result result new Result();result.setCode(ERROR);result.setMsg(msg);return result;}
}Vue安装axios封装request
npm i axios -S在src目录下创建一个utils包用来存放我们自己定义的工具在utils包里创建一个request.js来封装request请求
import axios from axios// 创建一个axios对象出来
const request axios.create({baseURL: http://localhost:8080,timeout: 5000
})// request 拦截器
// 可以自请求发送前对请求做一些处理
// 比如统一加token对请求参数统一加密
request.interceptors.request.use(config {config.headers[Content-Type] application/json;charsetutf-8;// config.headers[token] user.token; // 设置请求头return config
}, error {return Promise.reject(error)
});// response 拦截器
// 可以在接口响应后统一处理结果
request.interceptors.response.use(response {// response.data即为后端返回的Resultlet res response.data;// 兼容服务端返回的字符串数据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查询所有的用户
前端页面请求
我们前端规定要发送的请求和数据是什么。
export default {name: AdminView,data() {return {tableData: []}},created() {this.load();},methods: {load() {request.get(/admin).then(res {if (res.code 0) {this.tableData res.data;}})},}
}后端接口编写
controller Service Mapper
CrossOrigin
RestController
RequestMapping(/admin)
public class AdminController {AdminService adminService;Autowiredpublic AdminController(AdminService adminService){this.adminServiceadminService;}GetMappingpublic Result getUser(){ListUser listadminService.getUser();return Result.success(list);}
}
public interface AdminService {public ListUser getUser();
}
?xml version1.0 encodingUTF-8?
!DOCTYPE mapper PUBLIC -//mybatis.org//DTD Mapper 3.0//EN http://mybatis.org/dtd/mybatis-3-mapper.dtd
mapper namespacecom.example.mapper.AdminMapper!--2. 基于xml的方式--select idgetUser resultTypecom.example.entity.Userselect * from user/select/mapper 如果出现了跨域问题 在controller上加个注解CrossOrigin
条件查询
我们的条件查询就是根据电话号码和名字进行模糊查询下面就让我们开始。
前台请求
按钮控件
el-input v-modelparams.name stylewidth: 200px placeholder请输入姓名/el-input
el-input v-modelparams.phone stylewidth: 200px; margin-left: 5px placeholder请输入电话/el-input
el-button typewarning stylemargin-left: 10px clickfindBySearch()查询/el-button创建数据
// data里定义一个params
params: {name: ,phone:
},发送请求
// methods里定义一个findBySearch
findBySearch() {request.get(/admin/search, {params: this.params}).then(res {if (res.code 0) {this.tableData res.data;} else {}})
},后台处理请求
定义实体类Parms接受参数 这里是接受 前端发送的请求
public class Params {private String name;private String phone;
}定义Controller GetMapping(/search)public Result findBySearch(Params params){ListAdmin listadminService.finBySearch(params);return Result.success(list);}Service层 Overridepublic ListAdmin finBySearch(Params params) {return adminMapper.findBySearch(params);}Mapper层 ListAdmin findBySearch(Param(params) Params params);select idfindBySearch resultTypecom.example.entity.Adminselect * from adminwhereif testparams ! null and params.name ! null and params.name ! and name like concat(%, #{ params.name }, %)/ifif testparams ! null and params.phone ! null and params.phone ! and phone like concat(%, #{ params.phone }, %)/if/where/select加一个小功能清空查询
el-button typewarning clickreset()清空/el-buttonreset(){this.params{name:,phone:}this.findBySearch()
}分页查询
前台发送请求
设置页面
div stylemargin-top: 10pxel-paginationsize-changehandleSizeChangecurrent-changehandleCurrentChange:current-pageparams.pageNum:page-sizes[5, 10, 15, 20]:page-sizeparams.pageSizelayouttotal, sizes, prev, pager, next:totaltotal/el-pagination
/div1. size-changehandleSizeChange这也是一个事件绑定表示当用户改变每页显示的条数 (page-size) 时会触发 handleSizeChange 方法。
handleSizeChange 方法需要自行定义负责处理用户改变每页显示条数的逻辑例如更新 params.pageSize 和重新获取数据。
2. current-changehandleCurrentChange
这也是事件绑定。当用户改变当前页 (current-page) 时会触发 handleCurrentChange 方法。
handleCurrentChange 方法需要自行定义负责处理用户改变当前页的逻辑例如更新 params.pageNum 和重新获取数据。
3. :current-pageparams.pageNum这是绑定将组件属性 (current-page) 与数据对象 (params) 的属性 (pageNum) 绑定在一起。
在这种情况下el-pagination 组件的当前页号 (current-page) 将被设置为 params 对象的 pageNum 属性的值。
4. :page-sizes[5, 10, 15, 20]
这是使用数组指定 el-pagination 组件中显示的页面大小每页显示的条目数的选项。
通过此设置用户可以选择每页显示 5、10、15 或 20 项。
5. :page-sizeparams.pageSize
这也是绑定将 el-pagination 组件的 page-size 属性与 params 对象的 pageSize 属性绑定在一起。
通过此设置el-pagination 组件中当前选定的页面大小将被设置为 params 对象的 pageSize 属性的值。
6. layouttotal, sizes, prev, pager, next这是使用字符串指定 el-pagination 组件的布局。
total 显示总条目数。
sizes 显示页面大小选项。
prev 显示上一页按钮。
pager 显示当前页号和总页数。
next 显示下一页按钮。
通过此设置将显示总条目数、页面大小选项、上一页和下一页按钮以及当前页号和总页数。
7. :totaltotal这也是绑定将 el-pagination 组件的 total 属性与变量 total 绑定在一起。
通过此设置总条目数将显示在 el-pagination 组件中。发送请求
params: {name: ,phone: ,pageNum: 1,pageSize: 5
},
total: 0后台接受请求
在pom.xml 加载 分页插件
dependencygroupIdcom.github.pagehelper/groupIdartifactIdpagehelper-spring-boot-starter/artifactIdversion1.2.10/version
/dependency在application.yml拷贝好分页配置
pagehelper:helper-dialect: mysqlreasonable: truesupport-methods-arguments: trueparams: countcountSqlPageHelper 配置解释 helper-dialect: 指定数据库方言这里设置为 mysql表示使用 MySQL 数据库方言。
reasonable: 开启合理化查询可以自动优化分页查询语句提高效率。
support-methods-arguments: 开启对方法参数的支持可以自动从方法参数中获取分页参数。
params: 配置分页参数这里配置了 countcountSql表示使用 countSql 方法计算总记录数。
编写Controller接口
GetMapping(/search)
public Result findBySearch(Params params) {PageInfoAdmin info adminService.findBySearch(params);return Result.success(info);
}Service接口
public PageInfoAdmin findBySearch(Params params) {// 开启分页查询PageHelper.startPage(params.getPageNum(), params.getPageSize());// 接下来的查询会自动按照当前开启的分页设置来查询ListAdmin list adminDao.findBySearch(params);return PageInfo.of(list);
}Mapper层接口 select idfindBySearch resultTypecom.example.entity.Adminselect * from adminwhereif testparams ! null and params.name ! null and params.name ! and name like concat(%, #{ params.name }, %)/ifif testparams ! null and params.phone ! null and params.phone ! and phone like concat(%, #{ params.phone }, %)/if/where/select新增、编辑管理员信息
前台
构造页面
el-button typewarning stylemargin-left: 10px clickadd()新增/el-buttonel-dialog title请填写信息 :visible.syncdialogFormVisible width30%el-form :modelformel-form-item label姓名 label-width15%el-input v-modelform.name autocompleteoff stylewidth: 90%/el-input/el-form-itemel-form-item label性别 label-width15%el-radio v-modelform.sex label男男/el-radioel-radio v-modelform.sex label女女/el-radio/el-form-itemel-form-item label年龄 label-width15%el-input v-modelform.age autocompleteoff stylewidth: 90%/el-input/el-form-itemel-form-item label电话 label-width15%el-input v-modelform.phone autocompleteoff stylewidth: 90%/el-input/el-form-item/el-formdiv slotfooter classdialog-footerel-button clickdialogFormVisible false取 消/el-buttonel-button typeprimary clicksubmit()确 定/el-button/div/el-dialog构造请求
add() {this.form {};this.dialogFormVisible true;
},
submit() {request.post(/admin, this.form).then(res {if (res.code 0) {this.$message({message: 操作成功,type: success});this.dialogFormVisible false;this.findBySearch();} else {this.$message({message: res.msg,type: success});}})
}后台
controller层 PostMapping()public Result insert(RequestBody Admin admin) {adminService.add(admin);return Result.success();}Service
public Result add(Admin admin) {
// // 1. 用户名一定要有否则不让新增后面需要用户名登录if (admin.getName() null || .equals(admin.getName())) {throw new CustomException(用户名不能为空);}// 2. 进行重复性判断同一名字的管理员不允许重复新增只要根据用户名去数据库查询一下就可以了Admin user adminMapper.findByName(admin.getName());if (user ! null) {// 说明已经有了这里我们就要提示前台不允许新增了throw new CustomException(该用户名已存在请更换用户名);}//初始化一个密码if (admin.getPassword() null) {admin.setPassword(123456);}if (admin.getId() null) {adminMapper.insert(admin);} else {adminMapper.updateById(admin);}return Result.success();}
Mapper int insert(Admin admin);insert idinsert parameterTypecom.example.entity.Admin useGeneratedKeystrueinsert into admintrim prefix( suffix) suffixOverrides,if testid ! nullid,/ifif testusername ! nullusername,/ifif testpassword ! nullpassword,/ifif testname ! nullname,/ifif testphone ! nullphone,/ifif testemail ! nullemail,/ifif testavatar ! nullavatar,/ifif testrole ! nullrole,/if/trimtrim prefixvalues ( suffix) suffixOverrides,if testid ! null#{id},/ifif testusername ! null#{username},/ifif testpassword ! null#{password},/ifif testname ! null#{name},/ifif testphone ! null#{phone},/ifif testemail ! null#{email},/ifif testavatar ! null#{avatar},/ifif testrole ! null#{role},/if/trim/insert删除操作
前台请求 del(id) {request.delete(/admin/ id).then(res {if (res.code 0) {this.$message({message: 删除成功,type: success});this.findBySearch();} else {this.$message({message: res.msg,type: success});}})
},后台
controller /*** 删除操作* param id* return*/DeleteMapping(/{id})public Result delete(PathVariable Integer id) {adminService.delete(id);return Result.success();}service public void delete(Integer id) {adminMapper.deleteById(id);}mapper int deleteById(Integer id);delete iddeleteByIddelete from adminwhere id#{id}/delete
