SSM整合项目（删除家居 + 分页查询）

1.删除家居

1.需求分析

2.编写Service层

1.FurnService.java 添加方法

        //删除家居public void del(Integer id);

2.FurnServiceImpl.java 实现方法

    @Overridepublic void del(Integer id) {furnMapper.deleteByPrimaryKey(id);}

3.单元测试

    @Testpublic void del() {furnService.del(3);}

3.编写Controller层

1.FurnController.java 添加处理delete请求的接口

    @DeleteMapping("/del/{id}") //路径参数@ResponseBodypublic Msg del(@PathVariable Integer id) {furnService.del(id);return Msg.success();}

2.postman测试

4.修改 HomeView.vue实现删除功能

1.找到删除按钮位置添加确认弹窗

      <el-table-column fixed="right" label="操作" width="120"><template #default="scope"><!--#default="scope"然后使用scope.row可以获取当前行的数据--><el-button @click="handleEdit(scope.row)" type="text">编辑</el-button><!--这里的@confirm事件，当用户点击确定的时候会触发--><el-popconfirm title="确认删除" @confirm="deleteById(scope.row.id)"><template #reference><el-button type="danger" size="small">删除</el-button></template></el-popconfirm></template></el-table-column>

2.编写删除家居方法

    //删除家居deleteById(id) {//这里是使用的模板字符串来取数据request.delete(`/api/del/${id}`).then(res => {//code是200则表示修改成功if (res.code === 200) {//弹出更新成功的消息框this.$message({type: "success",message: "删除成功！"})} else {//删除失败//弹出更新失败的消息框this.$message({type: "error",message: "删除失败！"})}//刷新页面this.list()})}

5.结果展示

6.课后练习：将表单回显方式改为从数据库获取信息

1.编写Service层

1.FurnService.java 添加方法

        //根据id获取家居信息public Furn findById(Integer id);

2.FurnServiceImpl.java 实现方法

    @Overridepublic Furn findById(Integer id) {Furn furn = furnMapper.selectByPrimaryKey(id);return furn;}

2.编写Controller层

FurnController.java 添加方法

    @ResponseBody@GetMapping("/findById/{id}")public Msg findById(@PathVariable Integer id) {Furn furn = furnService.findById(id);//将查询结果添加到成功的Msg对象中return Msg.success().add("furn", furn);}

3.HomeView.vue 修改编辑按钮

4.HomeView.vue 编写触发方法

    handleEditById(id) {request.get(`/api/findById/${id}`).then(res => {//将数据绑定到modelthis.form = res.extend.furn;//显示提示框this.dialogVisible = true;})//根据id进行查询并回显结果}

5.结果展示

2.分页展示

1.需求分析

2.思路分析

3.引入mybais pageHelper插件 pom.xml

  <!--  引入mybais pageHelper插件--><dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.2.1</version></dependency>

4.配置mybatis分页拦截器 mybatis-config.xml

    <!--配置mubatis分页拦截器--><plugins><plugin interceptor="com.github.pagehelper.PageInterceptor"><!--配置分页合理化1.当用户请求的页数大于最后一页时，显示查询最后一页2.当用户请求的页数小于第一页时，显示查询第一页--><property name="reasonable" value="true"/></plugin></plugins>

5.编写Controller

    //分页功能接口@RequestMapping("/furnsByPage")@ResponseBodypublic Msg listFurnsByPage(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "5") Integer pageSize) {//1.设置分页参数PageHelper.startPage(pageNum, pageSize);//2.查询所有数据List<Furn> all = furnService.findAll();//3.进行物理分页pageInfo存放了分页的信息PageInfo pageInfo = new PageInfo(all, pageSize);return Msg.success().add("pageInfo", pageInfo);}

6.postman测试

7.HomeView.vue 引入分页控件

1.在div的最下面引入分页导航控件

<!--    增加分页导航--><div style="margin: 10px 0"><el-pagination@size-change="handlePageSizeChange" @current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5,10]" :page-size="pageSize"layout="total, sizes, prev, pager, next, jumper":total="total"></el-pagination></div>

2.数据池设置三个数据

3.结果展示

8.前端分页请求

1.HomeView.vue 修改list方法

    //请求返回家居（分页）list() {request.get("/api/furns").then(// res => {//   console.log(res)//   this.tableData = res.extend.furnList// }//请求分页request.get("/api/furnsByPage", {params: {//相当于双向绑定的modelpageNum: this.currentPage,pageSize: this.pageSize}}).then(res => {//将返回的json对象数组给tableData，进行遍历展示数据console.log(res)this.tableData = res.extend.pageInfo.list}))}

2.结果展示

9.根据pageNo和PageSize的变化实时分页

1.HomeView.vue 添加两个方法

    //当view的currentPage发生变化，pageNo就代表了当前页号handleCurrentChange(pageNo) {//替换model中的当前页号this.currentPage = pageNo;//根据model发送分页请求this.list();},//当view的pageSize发生变化，则会传到这个函数handlePageSizeChange(pageSize) {this.pageSize = pageSize;this.list();}

2.结果展示

10.前端分页查询三部曲（示意图）

11.条件分页

1.需求分析

2.编写Service层

1.FurnService.java 添加方法

        //根据条件模糊查询public List<Furn> findByCondition(String name);

2.FurnServiceImpl.java 实现方法

    @Overridepublic List<Furn> findByCondition(String name) {FurnExample furnExample = new FurnExample();//使用这个对象来添加条件FurnExample.Criteria criteria = furnExample.createCriteria();//判断是否有查询条件if (StringUtils.hasText(name)) {//添加根据传进来的名字进行模糊查询criteria.andNameLike("%" + name + "%");}//进行查询//注意：这里如果是没有传参数，则会查询出所有的记录return furnMapper.selectByExample(furnExample);}

3.单元测试

    @Testpublic void findByCondition() {List<Furn> list = furnService.findByCondition("桌子");for (Furn furn : list) {System.out.println(furn);}}

3.编写Controller层

1.FurnController.java

    //条件分页接口@RequestMapping("/listFurnsByCondition")@ResponseBodypublic Msg listFurnsByCondition(@RequestParam(defaultValue = "1") Integer pageNum,@RequestParam(defaultValue = "5") Integer pageSize, @RequestParam(defaultValue = "") String search) {//1.设置分页参数PageHelper.startPage(pageNum, pageSize);//2.查询所有数据List<Furn> byCondition = furnService.findByCondition(search);//3.进行分页PageInfo pageInfo = new PageInfo(byCondition, pageSize);return Msg.success().add("pageInfo", pageInfo);}

2.postman测试

4.前端分页请求

1.双向绑定输入框信息，为查找绑定点击事件

2.编写根据model进行分页查询的函数

    //根据条件进行分页查询findByCondition() {request.get("/api/listFurnsByCondition", {params: {//根据model的数据进行分页查询pageNum: this.currentPage,pageSize: this.pageSize,search: this.search}}).then(res => {//渲染view,并设置totalconsole.log(res)this.total = res.extend.pageInfo.total;this.tableData = res.extend.pageInfo.list;})}

3.解决点击页号则不会进行条件查询的问题

    //当view的currentPage发生变化，pageNo就代表了当前页号handleCurrentChange(pageNo) {//替换model中的当前页号this.currentPage = pageNo;//根据model发送分页请求if (this.search) { //只要search有值，则进行条件分页查询this.findByCondition();} else {this.list();}},//当view的pageSize发生变化，则会传到这个函数handlePageSizeChange(pageSize) {this.pageSize = pageSize;if (this.search) { //只要search有值，则进行条件分页查询this.findByCondition();} else {this.list();}}