Springboot+vue后台管理系统-数据回显+增删改查的实现

转x33g5p2x  于2022-02-07 转载在 Vue.js  
字(7.7k)|赞(0)|评价(0)|浏览(781)

上一篇文章已经基本搭建好了框架并且实现了与数据库的对接，我们这篇文章来讲解怎样完成数据的增删改查

首先是上一篇文章写的新增，但是数据没有回显在前端：

我们首先需要在后端写一个查询数据库数据的方法可以将数据显现出来：

我们这里是分页查询，所以需要给他传两个值，分别是当前页和每页条数：这里的我们默认不传参就是第一页然后十条数据

  1. /**
  2.      * 查询数据 模糊查询
  3.      */
  4.     @GetMapping
  5.     public Result<?> findPage(
  6.              @RequestParam(defaultValue = "1") Integer pageNum
  7.             ,@RequestParam(defaultValue = "10") Integer pageSize
  8.             ,@RequestParam(defaultValue = "") String search){
  10.         LambdaQueryWrapper<User> wrapper = Wrappers.<User>lambdaQuery();
  11.         if (StrUtil.isNotBlank(search)){
  12.             wrapper.like(User::getNickName,search);
  13.         }
  14.         Page<User> userPage = userMapper.selectPage(new Page<>(pageNum, pageSize),wrapper);
  15.         return Result.success(userPage);
  16.     }

然后我们在网页上可以看到这样的现象：

然后我们接下来在前端接收这些值：

  1. // 加载数据库数据进行渲染
  2.     load(){
  3.       request.get("/user",{
  4.         params:{
  5.           pageNum:this.currentPage,
  6.           pageSize:this.pageSize,
  7.           search:this.search
  8.         }
  9.       }).then(res =>{
  10.         console.log(res)
  11.         this.tableData = res.data.records
  12.         this.total = res.data.total
  13.       })
  14.     },

然后我们在初始的时候加载：

接下来就是增删改查的前后端代码：

后端：

  1. package com.example.demo.controller;
  3. import cn.hutool.core.util.StrUtil;
  4. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  5. import com.baomidou.mybatisplus.core.toolkit.Wrappers;
  6. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  7. import com.example.demo.common.Result;
  8. import com.example.demo.entity.User;
  9. import com.example.demo.mapper.UserMapper;
  10. import org.springframework.web.bind.annotation.*;
  12. import javax.annotation.Resource;
  14. /**
  15.  * @RestController:返回数据
  16.  * @Controller：渲染界面
  17.  */
  19. @RestController
  20. @RequestMapping("/user")
  21. public class UserController {
  23.     @Resource
  24.     UserMapper userMapper;
  25.     /**
  26.      * 新增  @RequestBody:前台传过来的json转换为java对象
  27.      * @return
  28.      */
  29.     @PostMapping
  30.     public Result<?> save(@RequestBody User user){
  31.         if (user.getPassword() == null){
  32.             user.setPassword("123456");
  33.         }
  34.         userMapper.insert(user);
  35.         return Result.success();
  36.     }
  38.     /**
  39.      * 查询数据 模糊查询
  40.      */
  41.     @GetMapping
  42.     public Result<?> findPage(
  43.              @RequestParam(defaultValue = "1") Integer pageNum
  44.             ,@RequestParam(defaultValue = "10") Integer pageSize
  45.             ,@RequestParam(defaultValue = "") String search){
  47.         LambdaQueryWrapper<User> wrapper = Wrappers.<User>lambdaQuery();
  48.         if (StrUtil.isNotBlank(search)){
  49.             wrapper.like(User::getNickName,search);
  50.         }
  51.         Page<User> userPage = userMapper.selectPage(new Page<>(pageNum, pageSize),wrapper);
  52.         return Result.success(userPage);
  53.     }
  55.     /**
  56.      * 更新操作
  57.      */
  58.     @PutMapping
  59.     public Result<?> update(@RequestBody User user){
  61.         userMapper.updateById(user);
  62.         return Result.success();
  63.     }
  65.     /**
  66.      * 删除操作
  67.      */
  68.     @DeleteMapping("/{id}")
  69.     public Result<?> delete(@PathVariable Long id){
  70.         userMapper.deleteById(id);
  71.         return Result.success();
  72.     }
  76. }

前端：

  1. <template>
  3.   <div style="padding: 10px" >
  5.     <!--    功能区域-->
  6.     <div style="margin: 10px 0px">
  7.       <el-button type="primary" @click="add">新增</el-button>
  8.       <el-button type="primary">导入</el-button>
  9.       <el-button type="primary">导出</el-button>
  10.     </div>
  11.     <!--    搜索区域-->
  12.     <div style="margin: 10px 0px">
  13.       <el-input v-model="search" placeholder="请输入关键字" style="width:20%" clearable></el-input>
  14.       <el-button type="primary" style="margin-left: 5px" @click="load">查询</el-button>
  15.     </div>
  17.     <el-table :data="tableData" border style="width: 100%">
  18.       <el-table-column
  19.           prop="id"
  20.           label="ID" sortable="sortable" >
  21.       </el-table-column>
  22.       <el-table-column
  23.           prop="username"
  24.           label="用户名" >
  25.       </el-table-column>
  26.       <el-table-column
  27.           prop="nickName"
  28.           label="昵称">
  29.       </el-table-column>
  30.       <el-table-column
  31.           prop="age"
  32.           label="年龄">
  33.       </el-table-column>
  34.       <el-table-column
  35.           prop="sex"
  36.           label="性别">
  37.       </el-table-column>
  38.       <el-table-column
  39.           prop="address"
  40.           label="地址">
  41.       </el-table-column>
  43.       <el-table-column fixed="right" label="操作" >
  44.         <template #default="scope">
  45.           <el-button @click="handleEdit(scope.row)" type="success">编辑</el-button>
  46.           <el-popconfirm title="确定删除吗？" @confirm="handleDelete(scope.row.id)">
  47.             <template #reference>
  48.               <el-button type="danger">删除</el-button>
  49.             </template>
  50.           </el-popconfirm>
  51.         </template>
  52.       </el-table-column>
  53.     </el-table>
  55.     <div style="margin: 10px 0">
  56.       <el-pagination
  57.           @size-change="handleSizeChange"
  58.           @current-change="handleCurrentChange"
  59.           :current-page="currentPage"
  60.           :page-sizes="[5, 10, 20]"
  61.           :page-size="pageSize"
  62.           layout="total, sizes, prev, pager, next, jumper"
  63.           :total="total"
  64.       >
  65.       </el-pagination>
  67.       <el-dialog title="提示" v-model="dialogVisible" width="30%">
  68.         <el-form :model="form" label-width="120px">
  69.           <el-form-item label="用户名">
  70.             <el-input v-model="form.username" style="width: 80%"></el-input>
  71.           </el-form-item>
  72.           <el-form-item label="昵称">
  73.             <el-input v-model="form.nickName" style="width: 80%"></el-input>
  74.           </el-form-item>
  75.           <el-form-item label="年龄">
  76.             <el-input v-model="form.age" style="width: 80%"></el-input>
  77.           </el-form-item>
  78.           <el-form-item label="性别">
  79.             <el-radio v-model="form.sex" label="男">男</el-radio>
  80.             <el-radio v-model="form.sex" label="女">女</el-radio>
  81.           </el-form-item>
  82.           <el-form-item label="地址">
  83.             <el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
  84.           </el-form-item>
  86.         </el-form>
  87.         <template #footer>
  88.           <span class="dialog-footer">
  89.             <el-button @click="dialogVisible = false">取 消</el-button>
  90.             <el-button type="primary" @click="save" >确 定</el-button>
  91.           </span>
  92.         </template>
  93.       </el-dialog>
  95.     </div>
  97.   </div>
  98. </template>
  100. <script>
  102. import request from "@/util/request";
  104. export default {
  105.   name: 'Home',
  106.   components: {
  108.   },
  109.   data(){
  110.     return{
  111.       form:{},
  112.       dialogVisible:false,
  113.       search:'',
  114.       currentPage:1,
  115.       pageSize:10,
  116.       total:0,
  117.       tableData:[]
  118.     }
  119.   },
  120.   // 页面加载
  121.   created(){
  122.     this.load()
  123.   },
  124.   methods:{
  126.     // 加载数据库数据进行渲染
  127.     load(){
  128.       request.get("/user",{
  129.         params:{
  130.           pageNum:this.currentPage,
  131.           pageSize:this.pageSize,
  132.           search:this.search
  133.         }
  134.       }).then(res =>{
  135.         console.log(res)
  136.         this.tableData = res.data.records
  137.         this.total = res.data.total
  138.       })
  139.     },
  140.     // 新增用户
  141.     add(){
  142.       this.dialogVisible = true
  143.       // 先清空表单域
  144.       this.form = {}
  145.     },
  146.     // 保存用户传送给后台，使用常见的api:axios
  147.     save(){
  148.       if (this.form.id){   //更新
  149.         request.put("/user",this.form).then(res => {
  150.           console.log(res)
  151.           if (res.code ==='0'){
  152.             this.$message({
  153.               type:"success",
  154.               message:"更新成功！"
  155.             })
  156.           }else {
  157.             this.$message({
  158.               type:"error",
  159.               message:res.msg
  160.             })
  161.           }
  162.           this.load()  //刷新表格数据
  163.           this.dialogVisible=false
  164.         })
  166.       }else {  //新增
  167.         request.post("/user",this.form).then(res => {
  168.           console.log(res)
  169.           if (res.code ==='0'){
  170.             this.$message({
  171.               type:"success",
  172.               message:"新增成功！"
  173.             })
  174.           }else {
  175.             this.$message({
  176.               type:"error",
  177.               message:res.msg
  178.             })
  179.           }
  180.           this.load()  //刷新表格数据
  181.           this.dialogVisible=false
  182.         })
  183.       }
  184.     },
  185.     handleEdit(row){
  186.       // 设置弹窗内独立对象
  187.       this.form = JSON.parse(JSON.stringify(row))
  188.       this.dialogVisible=true
  190.     },
  191.     // 删除用户
  192.     handleDelete(id){
  193.       console.log(id)
  194.       request.delete("/user/"+id).then(res =>{
  195.         if (res.code ==='0'){
  196.           this.$message({
  197.             type:"success",
  198.             message:"删除成功！"
  199.           })
  200.         }else {
  201.           this.$message({
  202.             type:"error",
  203.             message:res.msg
  204.           })
  205.         }
  206.         this.load() //重新加载表格数据
  207.       })
  208.     },
  209.     handleSizeChange(pageSize){  //改变当前每页的个数触发
  210.       this.pageSize = pageSize
  211.       this.load()
  212.     },
  214.     handleCurrentChange(pageNum){    //改变当前页码触发
  215.       this.currentPage = pageNum
  216.       this.load()
  218.     }
  220.   }
  221. }
  222. </script>

项目截图：

到目前为止的项目地址：

  1. 链接：https://pan.baidu.com/s/1a-DBEUDuhAQB4JfmvKO3nw 
  2. 提取码：jgcj 
  3. --来自百度网盘超级会员V3的分享

版权说明 : 本文为转载文章, 版权归原作者所有 版权申明

原文链接 : https://blog.csdn.net/justleavel/article/details/122765229

内容来源于网络，如有侵权，请联系作者删除！

vue.js后端

相关文章

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新文章

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com