07---vue前端实现增删改查(vue.js前端)

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

推荐整理分享07---vue前端实现增删改查(vue.js前端)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue前端页面设计,vue前端开发工具,vue前端页面设计,vue前段,vue.js前端,vue前端项目怎么运行,vue前端代码实例,vue前端开发教程,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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 requestmain.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、测试功能在前端页面上测试各功能能否正常使用