07---vue前端实现增删改查

前端VUE通过请求后端实现增删改查，文末会有前端完整代码

1、实现查询功能

一、实现三个条件一起查询

• 后台需要实现这三个条件的模糊查询

1. UserController.java

//分页查询@GetMapping("/page")publicIPage<User>findPage(@RequestParamInteger pageNum,@RequestParamInteger pageSize,@RequestParam(defaultValue ="")String username,@RequestParam(defaultValue ="")String email,@RequestParam(defaultValue ="")String address){return userService.findPage(pageNum,pageSize,username,email,address);}

1. UserService.java

publicIPage<User>findPage(Integer pageNum,Integer pageSize,String username,String email,String address){IPage<User> page =newPage<>(pageNum, pageSize);QueryWrapper<User>queryWrapper=newQueryWrapper<>();if(!"".equals(username)){
            queryWrapper.like("username",username);}if(!"".equals(email)){
            queryWrapper.like("email",email);}if(!"".equals(address)){
            queryWrapper.like("address",address);}//增加的排在前面，倒序
        queryWrapper.orderByDesc("id");returnthis.page(page,queryWrapper);}

1. 前端请求这个page接口，即可实现查询

2、实现批量删除

1. UserController.java

//批量删除@PostMapping("/del/batch")publicbooleandeleteBatch(@RequestBodyList<Integer>ids){return userService.removeBatchByIds(ids);}

1. 前端请求这个接口即可实现批量删除

3、增、删、改

1. 后端代码之前已经写过

packagecom.xqh.controller;importcom.baomidou.mybatisplus.core.metadata.IPage;importcom.xqh.entity.User;importcom.xqh.service.UserService;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.web.bind.annotation.*;importjava.util.List;importjava.util.Map;@RestController//返回json@RequestMapping("/user")publicclassUserController{@AutowiredprivateUserService userService;//插入和修改操作@PostMappingpublicbooleansave(@RequestBodyUser user){return userService.saveOrUpdate(user);}//查询所有数据@GetMappingpublicList<User>findAll(){return userService.list();}//删除@DeleteMapping("/{id}")publicbooleandelete(@PathVariableInteger id){return userService.removeById(id);}

前端只需要请求响应的接口即可

4、使用axios请求后端

1. 先下载axios组件

npm install axios --save

1. 创建一个utils包，在里面创建一个request.js文件

import axios from'axios'const request = axios.create({baseURL:'http://localhost:8081',//这是请求后端的前面那串网址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)})exportdefault request

1. main.js中注册

import request from"@/utils/request"

1. 然后就可以在Home.vue中使用axios调用接口了，如

 load(){
      request.get("/user/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        username:this.username,
        email:this.email,
        address:this.address

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.records
        this.total=res.total 
      })
     }

5、前端Vue完整代码

Home.vue

<template>
  <el-container style="height: 100vh; border: 1px solid #eee">
 <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246);height: 100%;" >
   <el-menu :default-openeds="['1', '3']" style="min-height:100%;overflow-x:hidden" 
   background-color="rgb(48,65,86)"
   text-color="#fff"
   active-text-color="ffd04b"
   :collapse-transition="false"
   :collapse="isCollapse"
   class="el-menu-vertical-demo"
   >
   <div style="height:60px;line-height:60px;text-align:center">
     <img src="../assets/logo.png" alt="" style="width:20px;position:relative;top:5px;margin-right: 5px;">
     <b style="color:#ccc" v-show="logoTextShow">后台管理系统</b>

   </div>
    
     <el-submenu index="1">
       <template slot="title">
         <i class="el-icon-message"></i>
         <span slot="title">导航一</span>
       </template>
       <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-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 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:18px">
       <span :class="collapseBtnClass" style="cursor:pointer" @click="collapse"></span>
     </div>
     <el-dropdown style="width:80px;cursor:pointer" >
       <span>Truthfully</span><i class="el-icon-arrow-down" style="margin-left:2px"></i>
       <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-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><a href="/">用户管理</a></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-input style="width:200px" placeholder="请输入邮箱" suffix-icon="el-icon-message" class="ml-5" v-model="email"></el-input>
       <el-input style="width:200px" placeholder="请输入地址" suffix-icon="el-icon-position" class="ml-5" v-model="address"></el-input>
       <el-button class="ml-5" type="primary" @click="load">搜索</el-button>
       <el-button  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-popconfirm
                class="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">导入<i class="el-icon-top"></i></el-button>
       <el-button type="primary">导出<i class="el-icon-bottom"></i></el-button>
     </div>

     <el-table :data="tableData" border stripe :header-cell-calss-name="headerBg"    @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="id" label="ID" width="80"></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="操作" width="200" align="center">
         <template slot-scope="scope" >
           <el-button type="success" @click="handleUpdate(scope.row)">编辑 <i class="el-icon-edit"></i></el-button>
          <el-popconfirm
                class="ml-5"
                confirm-button-text='确定'
                cancel-button-text='我再想想'
                icon="el-icon-info"
                icon-color="red"
                title="您确定要删除吗？"
                @confirm="handleDelete(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="[2, 4, 6, 10]"
         :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>
import request from '@/utils/request'
export default {
 name:'HomeView',
 data() {
     return {
       tableData:[],
       total: 0 ,
       pageNum:1,
       pageSize:2,
       username:"",
       email:"",
       address:"",
       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.isCollapse
       if(this.isCollapse){  //收缩
         this.sideWidth=64
         this.collapseBtnClass='el-icon-s-unfold'
         this.logoTextShow=false
       }else{  //展开
         this.sideWidth = 200 
         this.collapseBtnClass='el-icon-s-fold'
         this.logoTextShow=true 
       }

     },
     load(){
      request.get("/user/page",{
        params:{
        pageNum:this.pageNum,
        pageSize:this.pageSize,
        username:this.username,
        email:this.email,
        address:this.address

      }
        }).then(res=>{
        console.log(res)
        this.tableData=res.records
        this.total=res.total 
      })
     },
     save(){
      request.post("/user",this.form).then(res=>{
        if(res){
          this.$message.success("保存成功!")
          this.dialogFormVisible=false
          this.load()
        }else{
          this.$message.error("保存失败！")
        }
      })

     },
     handleAdd(){

      this.dialogFormVisible=true
      this.form={}

     },
     handleUpdate(row){
      this.form={...row}
      this.dialogFormVisible=true
     
     },
     handleDelete(id){
      request.delete("/user/" + id).then(res=>{
        if(res){
          this.$message.success("删除成功!")
          this.load()
        }else{
          this.$message.error("删除失败！")
        }
      })
     },
     delBatch(){
      let ids=this.multipleSelection.map(v=>v.id)  //把对象数组转化为id数组【1,2,3】
      request.post("/user/del/batch",ids).then(res=>{
        if(res){
          this.$message.success("批量删除成功!")
          this.load()
        }else{
          this.$message.error("批量删除失败！")
        }
      })

     },
     handleSelectionChange(val){
      this.multipleSelection=val

     },
     reset(){
      this.username=""
      this.email=""
      this.address=""
      this.load()

     },
    
     handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
     },
     handleCurrentChange(pageNum){
      this.pageNum=pageNum
      this.load()
     }
   }
}
</script>

6、测试功能

1. 在前端页面上测试各功能能否正常使用