1、实现查询功能

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

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

UserController.java

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

UserService.java

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

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

2、实现批量删除

UserController.java


    //批量删除
    @PostMapping ("/del/batch")
    public boolean deleteBatch(@RequestBody List<Integer>ids){
        return userService.removeBatchByIds(ids);
    }

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

3、增、删、改

后端代码之前已经写过

package com.xqh.controller;
import com.baomidou.mybatisplus.core.metadata.IPage;
import com.xqh.entity.User;
import com.xqh.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;
import java.util.List;
import java.util.Map;
@RestController  //返回json
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserService userService;
    //插入和修改操作
    @PostMapping
    public boolean save(@RequestBody User user){
        return userService.saveOrUpdate(user);
    }
    //查询所有数据
    @GetMapping
    public List<User> findAll(){
        return userService.list();
    }
    //删除
    @DeleteMapping("/{id}")
    public boolean delete(@PathVariable Integer id){
        return userService.removeById(id);
    }

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

4、使用axios请求后端

先下载axios组件

npm install axios --save

创建一个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 debug
        return Promise.reject(error)
    }
)
export default request

main.js中注册

import request from "@/utils/request"

然后就可以在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、测试功能

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

标签 Vue, 前端, 增删改查

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

1、实现查询功能

2、实现批量删除

3、增、删、改

4、使用axios请求后端

5、前端Vue完整代码

6、测试功能