配合前端vue實現(xiàn)表格的增刪改查

2021-10-13 前端達(dá)人

前言：

這個章節(jié)內(nèi)容是比較多的，分為前端部分和后端部分。

實現(xiàn)效果：增刪改查

一、后端部分：

（1）數(shù)據(jù)庫：

新建一張表user,設(shè)置幾個字段，效果如下：

（2）egg邏輯部分：

提供的接口：http://localhost:7001/setUserList

get 請求，獲取數(shù)據(jù)，支持模糊查詢
post 請求，新增數(shù)據(jù)
put 請求，給后端當(dāng)前數(shù)據(jù)id，修改內(nèi)容
delete 請求，根據(jù)數(shù)據(jù)id刪除當(dāng)前條數(shù)據(jù)

（3）egg具體實現(xiàn)步驟：

1、router.js中添加：

 


    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 路由配置 
            

        

    

    

        

            

            

        

        

            
                 * @param app 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                module.exports = app => {
            

        

    

    

        

            

            

        

        

            
                const { router, controller } = app;
            

        

    

    

        

            

            

        

        

            
                //-------------------------------------------------- 
            

        

    

    

        

            

            

        

        

            
                // server接口 
            

        

    

    

        

            

            

        

        

            
                //-------------------------------------------------- 
            

        

    

    

        

            

            

        

        

            
                app.get('/setUserList', controller.new.user.getUserList);
            

        

    

    

        

            

            

        

        

            
                app.post('/setUserList', controller.new.user.postUserList);
            

        

    

    

        

            

            

        

        

            
                app.put('/setUserList', controller.new.user.putUserList);
            

        

    

    

        

            

            

        

        

            
                app.delete('/setUserList', controller.new.user.deleteUserList);
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }

2、新建：app / controller / new / user.js

（1）查，模糊查詢

select * from user where name like ? % 內(nèi)容 %

（2）增

this.app.mysql.insert('表名'，內(nèi)容)

（3）改

UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2

（4）刪

delete from user where id = 1

user.js 源碼：

 


    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 *  用戶信息路由 
            

        

    

    

        

            

            

        

        

            
                 * @param app 
            

        

    

    

        

            

            

        

        

            
                 * @returns {HomeController} 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                const Controller = require('egg').Controller;
            

        

    

    

        

            

            

        

        

            
                class NewsController extends Controller {
            

        

    

    

        

            

            

        

        

            
                async getUserList() {
            

        

    

    

        

            

            

        

        

            
                //查詢庫里的user表 
            

        

    

    

        

            

            

        

        

            
                let params = this.ctx.query //獲取路徑后面的參數(shù) 
            

        

    

    

        

            

            

        

        

            
                console.log('用戶的參數(shù)：');
            

        

    

    

        

            

            

        

        

            
                console.log(params);
            

        

    

    

        

            

            

        

        

            
                let sql = 'select * from user' 
            

        

    

    

        

            

            

        

        

            
                let initSql = sql
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let content = [];//參數(shù) 
            

        

    

    

        

            

            

        

        

            
                let isMore = false;//是否有多個查詢參數(shù) 
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * @模糊查詢-量大的時候效率低 
            

        

    

    

        

            

            

        

        

            
                 * select * from user where name like ? % 內(nèi)容 % 
            

        

    

    

        

            

            

        

        

            
                 * 在user表中全局查找name值 == 內(nèi)容的 
            

        

    

    

        

            

            

        

        

            
                 * % 內(nèi)容 % 全局查找內(nèi)容 
            

        

    

    

        

            

            

        

        

            
                 *   內(nèi)容 %  查找以 內(nèi)容 開頭的數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                if(params.name){
            

        

    

    

        

            

            

        

        

            
                sql += " where name like ?";
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.name+"%" );
            

        

    

    

        

            

            

        

        

            
                isMore = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                if(params.age){
            

        

    

    

        

            

            

        

        

            
                if(isMore){//true代表有多個參數(shù) 
            

        

    

    

        

            

            

        

        

            
                sql += "and age LIKE ?";//and是兩個條件都必須滿足，or是或的關(guān)系 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += " WHERE age LIKE ?";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.age+"%" )
            

        

    

    

        

            

            

        

        

            
                isMore = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                if(params.address){
            

        

    

    

        

            

            

        

        

            
                if(isMore){//true代表有多個參數(shù) 
            

        

    

    

        

            

            

        

        

            
                sql += "and address LIKE ?";//and是兩個條件都必須滿足，or是或的關(guān)系 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += " WHERE address LIKE ?";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.address+"%" )
            

        

    

    

        

            

            

        

        

            
                isMore = true;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                if(params.phone){
            

        

    

    

        

            

            

        

        

            
                if(isMore){//true代表有多個參數(shù) 
            

        

    

    

        

            

            

        

        

            
                sql += "and phone LIKE ?";//and是兩個條件都必須滿足，or是或的關(guān)系 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += " WHERE phone LIKE ?";
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                content.push( "%"+params.phone+"%" )
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                //開啟分頁 
            

        

    

    

        

            

            

        

        

            
                if(params.page || params.pageSize){
            

        

    

    

        

            

            

        

        

            
                let current = params.page;//當(dāng)前頁碼 
            

        

    

    

        

            

            

        

        

            
                let pageSize = params.pageSize;//一頁展示多少條數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                sql += " limit ?,?";
            

        

    

    

        

            

            

        

        

            
                content.push((current-1)*pageSize,parseInt(pageSize));
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let allList = await this.app.mysql.query(initSql);
            

        

    

    

        

            

            

        

        

            
                let userList= await this.app.mysql.query(
            

        

    

    

        

            

            

        

        

            
                sql,content
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data: {
            

        

    

    

        

            

            

        

        

            
                list:userList,
            

        

    

    

        

            

            

        

        

            
                total:allList.length
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 新增用戶信息 
            

        

    

    

        

            

            

        

        

            
                 * INSERT INTO loginlist (aaa,bbb,ccc) VALUES ('"'+111+'","'+222+'","'+333+'"') 
            

        

    

    

        

            

            

        

        

            
                 * this.app.mysql.insert('表名'，內(nèi)容) 
            

        

    

    

        

            

            

        

        

            
                 * this.app.mysql.insert('表名'，{ 
            

        

    

    

        

            

            

        

        

            
                 *   name:123, 
            

        

    

    

        

            

            

        

        

            
                 *   age:1, 
            

        

    

    

        

            

            

        

        

            
                 *   address:西安 
            

        

    

    

        

            

            

        

        

            
                 * }) 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                // 
            

        

    

    

        

            

            

        

        

            
                async postUserList() {
            

        

    

    

        

            

            

        

        

            
                console.log(this.ctx.request.body);
            

        

    

    

        

            

            

        

        

            
                //新增數(shù)據(jù)-user表 
            

        

    

    

        

            

            

        

        

            
                let data = this.ctx.request.body
            

        

    

    

        

            

            

        

        

            
                data.id = parseInt(Math.random()*100000)
            

        

    

    

        

            

            

        

        

            
                let insertResult = await this.app.mysql.insert(
            

        

    

    

        

            

            

        

        

            
                'user', data
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data:insertResult
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 修改用戶信息 
            

        

    

    

        

            

            

        

        

            
                 * UPDATE loginlist SET `password` = 'Ad123456' WHERE id = 2（唯一值），修改一個 
            

        

    

    

        

            

            

        

        

            
                 * UPDATE loginlist SET username = 'admins', `password` = 'Ad123456' WHERE id = 2，修改多個 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                async putUserList(){
            

        

    

    

        

            

            

        

        

            
                //新增數(shù)據(jù)-user表 
            

        

    

    

        

            

            

        

        

            
                let id = this.ctx.query.id //獲取路徑后面的參數(shù) 
            

        

    

    

        

            

            

        

        

            
                let data = this.ctx.request.body
            

        

    

    

        

            

            

        

        

            
                let sql = 'update user set ' 
            

        

    

    

        

            

            

        

        

            
                let isMore = false;//是否有多個查詢參數(shù) 
            

        

    

    

        

            

            

        

        

            
                if(!id){
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'warning',
            

        

    

    

        

            

            

        

        

            
                data:'id沒有傳' 
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                return 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //姓名 
            

        

    

    

        

            

            

        

        

            
                if(data.name){
            

        

    

    

        

            

            

        

        

            
                sql += 'name = "'+data.name+'"' 
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //年齡 
            

        

    

    

        

            

            

        

        

            
                if(data.age){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',age = "'+data.age+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'age = "'+data.age+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //地址 
            

        

    

    

        

            

            

        

        

            
                if(data.address){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',address = "'+data.address+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'address = "'+data.address+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //手機(jī)號 
            

        

    

    

        

            

            

        

        

            
                if(data.phone){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',phone = "'+data.phone+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'phone = "'+data.phone+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                isMore = true 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                //郵箱地址 
            

        

    

    

        

            

            

        

        

            
                if(data.email){
            

        

    

    

        

            

            

        

        

            
                if(isMore){
            

        

    

    

        

            

            

        

        

            
                sql += ',email = "'+data.email+'"' 
            

        

    

    

        

            

            

        

        

            
                }else{
            

        

    

    

        

            

            

        

        

            
                sql += 'email = "'+data.email+'"' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                sql += ' where id = ' + id
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                let insertResult = await this.app.mysql.query(sql)
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data:insertResult
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 注銷用戶接口 
            

        

    

    

        

            

            

        

        

            
                 * DELETE FROM loginlist WHERE username = 'superman' 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                async deleteUserList(){
            

        

    

    

        

            

            

        

        

            
                //查詢庫里的user表 
            

        

    

    

        

            

            

        

        

            
                let params = this.ctx.query //獲取路徑后面的參數(shù) 
            

        

    

    

        

            

            

        

        

            
                console.log('用戶的參數(shù)：');
            

        

    

    

        

            

            

        

        

            
                console.log(params);
            

        

    

    

        

            

            

        

        

            
                let sql = 'delete from user where id = '+ params.id
            

        

    

    

        

            

            

        

        

            
                let res = await this.app.mysql.query(
            

        

    

    

        

            

            

        

        

            
                sql
            

        

    

    

        

            

            

        

        

            
                );
            

        

    

    

        

            

            

        

        

            
                this.ctx.body = {
            

        

    

    

        

            

            

        

        

            
                code:200,
            

        

    

    

        

            

            

        

        

            
                masg:'success',
            

        

    

    

        

            

            

        

        

            
                data:res
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 模糊查詢封裝方法 
            

        

    

    

        

            

            

        

        

            
                 * @params = auth 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                async query( auth ) {
            

        

    

    

        

            

            

        

        

            
                const TABLE_NAME = 'user';
            

        

    

    

        

            

            

        

        

            
                const QUERY_STR = 'id, name, age, phone, address';
            

        

    

    

        

            

            

        

        

            
                let sql = `select ${QUERY_STR} from ${TABLE_NAME} where authName like "%${auth.authName}%"`;
            

        

    

    

        

            

            

        

        

            
                const row = await this.app.mysql.query(sql);
            

        

    

    

        

            

            

        

        

            
                return row;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                module.exports = NewsController;

3、引入mysql:點我

4、跨域問題解決：點我

二、前端部分：

新建vue文件：testApi.vue

1、初始化查詢列表數(shù)據(jù)：頁面展示列表，列表數(shù)據(jù)mouted獲取

 


    

        

            

            

        

        

            
                <el-table 
            

        

    

    

        

            

            

        

        

            
                :data="tableInfo.list" 
            

        

    

    

        

            

            

        

        

            
                style="width: 100%">
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                type="index" 
            

        

    

    

        

            

            

        

        

            
                label="序號" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="name" 
            

        

    

    

        

            

            

        

        

            
                label="姓名" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="age" 
            

        

    

    

        

            

            

        

        

            
                label="年齡" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="address" 
            

        

    

    

        

            

            

        

        

            
                label="地址">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="phone" 
            

        

    

    

        

            

            

        

        

            
                label="手機(jī)號">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="email" 
            

        

    

    

        

            

            

        

        

            
                label="郵箱">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                label="操作" 
            

        

    

    

        

            

            

        

        

            
                width="100">
            

        

    

    

        

            

            

        

        

            
                <template slot-scope="scope"> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="editFun(scope.row)">編輯</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="deleteFun(scope.row)">刪除</el-button> 
            

        

    

    

        

            

            

        

        

            
                </template> 
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                </el-table>

 


    

        

            

            

        

        

            
                mounted(){
            

        

    

    

        

            

            

        

        

            
                this.initPage()
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                methods: {
            

        

    

    

        

            

            

        

        

            
                /*** 
            

        

    

    

        

            

            

        

        

            
                 * 獲取列表數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                initPage() {
            

        

    

    

        

            

            

        

        

            
                let params = {
            

        

    

    

        

            

            

        

        

            
                page: this.tableInfo.page, //當(dāng)前頁 
            

        

    

    

        

            

            

        

        

            
                pageSize: this.tableInfo.pageSize //一頁展示多少條 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.$axios.get('http://localhost:7001/setUserList',{
            

        

    

    

        

            

            

        

        

            
                params
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.list = res.data.data.list
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.total = res.data.data.total
            

        

    

    

        

            

            

        

        

            
                }).catch(error => {
            

        

    

    

        

            

            

        

        

            
                this.$message(error.data.message)
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }

2、頁面點擊新增：展示彈框，并將彈框內(nèi)容去除掉，點擊新增，將彈框內(nèi)容發(fā)送給后端

3、頁面點擊列表里面具體數(shù)據(jù)的編輯：彈框，并回填數(shù)據(jù)，修改將當(dāng)前數(shù)據(jù)的id和表格數(shù)據(jù)傳給后端

4、刪除按鈕，點擊出現(xiàn)二次確認(rèn)彈框，點擊確認(rèn)將當(dāng)前數(shù)據(jù)的id給后端就行

testApi.vue 源碼：

 


    

        

            

            

        

        

            
                <template> 
            

        

    

    

        

            

            

        

        

            
                <div class="pro_body"> 
            

        

    

    

        

            

            

        

        

            
                <el-button type='success' @click="addModal">新增</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-table 
            

        

    

    

        

            

            

        

        

            
                :data="tableInfo.list" 
            

        

    

    

        

            

            

        

        

            
                style="width: 100%">
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                type="index" 
            

        

    

    

        

            

            

        

        

            
                label="序號" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="name" 
            

        

    

    

        

            

            

        

        

            
                label="姓名" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="age" 
            

        

    

    

        

            

            

        

        

            
                label="年齡" 
            

        

    

    

        

            

            

        

        

            
                align="center">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="address" 
            

        

    

    

        

            

            

        

        

            
                label="地址">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="phone" 
            

        

    

    

        

            

            

        

        

            
                label="手機(jī)號">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                prop="email" 
            

        

    

    

        

            

            

        

        

            
                label="郵箱">
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                <el-table-column 
            

        

    

    

        

            

            

        

        

            
                label="操作" 
            

        

    

    

        

            

            

        

        

            
                width="100">
            

        

    

    

        

            

            

        

        

            
                <template slot-scope="scope"> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="editFun(scope.row)">編輯</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button type="text" size="small" @click="deleteFun(scope.row)">刪除</el-button> 
            

        

    

    

        

            

            

        

        

            
                </template> 
            

        

    

    

        

            

            

        

        

            
                </el-table-column> 
            

        

    

    

        

            

            

        

        

            
                </el-table> 
            

        

    

    

        

            

            

        

        

            
                <el-pagination 
            

        

    

    

        

            

            

        

        

            
                class="work_pagination" 
            

        

    

    

        

            

            

        

        

            
                background 
            

        

    

    

        

            

            

        

        

            
                :layout="'total,prev, pager, next,sizes'" 
            

        

    

    

        

            

            

        

        

            
                :total="tableInfo.total" 
            

        

    

    

        

            

            

        

        

            
                :hide-on-single-page="false" 
            

        

    

    

        

            

            

        

        

            
                :current-page="tableInfo.page" 
            

        

    

    

        

            

            

        

        

            
                :page-size="tableInfo.pageSize" 
            

        

    

    

        

            

            

        

        

            
                @current-change="pageChange" 
            

        

    

    

        

            

            

        

        

            
                @size-change="pageSizeChange" 
            

        

    

    

        

            

            

        

        

            
                >
            

        

    

    

        

            

            

        

        

            
                </el-pagination> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <!--彈框部分--> 
            

        

    

    

        

            

            

        

        

            
                <el-dialog 
            

        

    

    

        

            

            

        

        

            
                custom-class="modalName" 
            

        

    

    

        

            

            

        

        

            
                :visible.sync="modal.show" 
            

        

    

    

        

            

            

        

        

            
                :width="modal.type === 'delete'? '470px' : '800px'">
            

        

    

    

        

            

            

        

        

            
                <h3 v-if="modal.type === 'add'" slot="title">新增</h3> 
            

        

    

    

        

            

            

        

        

            
                <h3 v-if="modal.type === 'edit'" slot="title">修改</h3> 
            

        

    

    

        

            

            

        

        

            
                <h3 v-if="modal.type === 'delete'" slot="title">提示</h3> 
            

        

    

    

        

            

            

        

        

            
                <div v-if="modal.type !== 'delete'" class="editNameBody"> 
            

        

    

    

        

            

            

        

        

            
                <el-form class="editNameFrom" :model="modalFrom" label-width="120px" label-position="right"> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="姓名："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.name"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="年紀(jì)："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.age"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="手機(jī)號："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.phone"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="郵箱："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.email"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                <el-form-item label="地址："> 
            

        

    

    

        

            

            

        

        

            
                <el-input v-model="modalFrom.address" type="textarea"></el-input> 
            

        

    

    

        

            

            

        

        

            
                </el-form-item> 
            

        

    

    

        

            

            

        

        

            
                </el-form> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                <div v-if="modal.type === 'delete'"> 
            

        

    

    

        

            

            

        

        

            
                <i class="el-icon-warning" style="margin-right:7px;color:#FFAA00;font-size: 16px;"></i>請確認(rèn)是否刪除
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                <div slot="footer" class="dialog-footer"> 
            

        

    

    

        

            

            

        

        

            
                <el-button @click="modal.show = false">取 消</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button v-if="modal.type === 'add'" type="primary" @click="addUserList">新增</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button v-if="modal.type === 'edit'" type="primary" @click="editUserList">修改</el-button> 
            

        

    

    

        

            

            

        

        

            
                <el-button v-if="modal.type === 'delete'" type="primary" @click="deleteUserList">確 認(rèn)</el-button> 
            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </el-dialog> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                </div> 
            

        

    

    

        

            

            

        

        

            
                </template> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <script> 
            

        

    

    

        

            

            

        

        

            
                export default {
            

        

    

    

        

            

            

        

        

            
                data() {
            

        

    

    

        

            

            

        

        

            
                return {
            

        

    

    

        

            

            

        

        

            
                tableInfo:{
            

        

    

    

        

            

            

        

        

            
                columns:[
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                title: '序號',
            

        

    

    

        

            

            

        

        

            
                type: 'index',
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '姓名',
            

        

    

    

        

            

            

        

        

            
                prop: 'name',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {
            

        

    

    

        

            

            

        

        

            
                title: '年齡',
            

        

    

    

        

            

            

        

        

            
                prop: 'age',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '地址',
            

        

    

    

        

            

            

        

        

            
                prop: 'address',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '郵箱',
            

        

    

    

        

            

            

        

        

            
                prop: 'email',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },{
            

        

    

    

        

            

            

        

        

            
                title: '手機(jī)號',
            

        

    

    

        

            

            

        

        

            
                prop: 'phone',
            

        

    

    

        

            

            

        

        

            
                align: 'center' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                {//內(nèi)容slot 
            

        

    

    

        

            

            

        

        

            
                slot: 'operateT' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                ],
            

        

    

    

        

            

            

        

        

            
                list:[],
            

        

    

    

        

            

            

        

        

            
                page:1,
            

        

    

    

        

            

            

        

        

            
                pageSize:10,
            

        

    

    

        

            

            

        

        

            
                total:0,
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                modal:{
            

        

    

    

        

            

            

        

        

            
                show:false,
            

        

    

    

        

            

            

        

        

            
                type:'add' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                modalFrom:{
            

        

    

    

        

            

            

        

        

            
                name:'',
            

        

    

    

        

            

            

        

        

            
                age:'',
            

        

    

    

        

            

            

        

        

            
                phone:'',
            

        

    

    

        

            

            

        

        

            
                address:'',
            

        

    

    

        

            

            

        

        

            
                email:'' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                };
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                mounted(){
            

        

    

    

        

            

            

        

        

            
                this.initPage()
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                methods: {
            

        

    

    

        

            

            

        

        

            
                /*** 
            

        

    

    

        

            

            

        

        

            
                 * 獲取列表數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                 */ 
            

        

    

    

        

            

            

        

        

            
                initPage() {
            

        

    

    

        

            

            

        

        

            
                let params = {
            

        

    

    

        

            

            

        

        

            
                page: this.tableInfo.page, //當(dāng)前頁 
            

        

    

    

        

            

            

        

        

            
                pageSize: this.tableInfo.pageSize //一頁展示多少條 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.$axios.get('http://localhost:7001/setUserList',{
            

        

    

    

        

            

            

        

        

            
                params
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.list = res.data.data.list
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.total = res.data.data.total
            

        

    

    

        

            

            

        

        

            
                }).catch(error => {
            

        

    

    

        

            

            

        

        

            
                this.$message(error.data.message)
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 當(dāng)前頁發(fā)生改變 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                pageChange(page) {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.page = page
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新列表數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                /** 
            

        

    

    

        

            

            

        

        

            
                 * 當(dāng)前第幾頁發(fā)生改變 
            

        

    

    

        

            

            

        

        

            
                 * */ 
            

        

    

    

        

            

            

        

        

            
                pageSizeChange(pageSize) {
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.page = 1 
            

        

    

    

        

            

            

        

        

            
                this.tableInfo.pageSize = pageSize
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新列表數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //新增彈框 
            

        

    

    

        

            

            

        

        

            
                addModal(){
            

        

    

    

        

            

            

        

        

            
                this.modalFrom ={
            

        

    

    

        

            

            

        

        

            
                name:'',
            

        

    

    

        

            

            

        

        

            
                age:'',
            

        

    

    

        

            

            

        

        

            
                phone:'',
            

        

    

    

        

            

            

        

        

            
                address:'',
            

        

    

    

        

            

            

        

        

            
                email:'' 
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = true 
            

        

    

    

        

            

            

        

        

            
                this.modal.type  = 'add' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //修改彈框 
            

        

    

    

        

            

            

        

        

            
                editFun(row){
            

        

    

    

        

            

            

        

        

            
                this.modalFrom = row
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = true 
            

        

    

    

        

            

            

        

        

            
                this.modal.type  = 'edit' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                //刪除彈框 
            

        

    

    

        

            

            

        

        

            
                deleteFun(row){
            

        

    

    

        

            

            

        

        

            
                this.modalFrom = row
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = true 
            

        

    

    

        

            

            

        

        

            
                this.modal.type  = 'delete' 
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                addUserList(){
            

        

    

    

        

            

            

        

        

            
                this.$axios({
            

        

    

    

        

            

            

        

        

            
                method:'post',
            

        

    

    

        

            

            

        

        

            
                url:'http://localhost:7001/setUserList',
            

        

    

    

        

            

            

        

        

            
                data:this.modalFrom
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.$message.success('新增成功')
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = false 
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                editUserList(){
            

        

    

    

        

            

            

        

        

            
                this.$axios({
            

        

    

    

        

            

            

        

        

            
                method:'put',
            

        

    

    

        

            

            

        

        

            
                url:'http://localhost:7001/setUserList',
            

        

    

    

        

            

            

        

        

            
                params:{
            

        

    

    

        

            

            

        

        

            
                id:this.modalFrom.id
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                data:this.modalFrom
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.$message.success('修改成功')
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = false 
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                },
            

        

    

    

        

            

            

        

        

            
                deleteUserList(){
            

        

    

    

        

            

            

        

        

            
                this.$axios({
            

        

    

    

        

            

            

        

        

            
                method:'delete',
            

        

    

    

        

            

            

        

        

            
                url:'http://localhost:7001/setUserList',
            

        

    

    

        

            

            

        

        

            
                params:{
            

        

    

    

        

            

            

        

        

            
                id:this.modalFrom.id
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }).then(res => {
            

        

    

    

        

            

            

        

        

            
                this.$message.success('刪除成功')
            

        

    

    

        

            

            

        

        

            
                this.initPage() //刷新數(shù)據(jù) 
            

        

    

    

        

            

            

        

        

            
                this.modal.show  = false 
            

        

    

    

        

            

            

        

        

            
                })
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </script> 
            

        

    

    

        

            

            

        

        

            

            

        

    

    

        

            

            

        

        

            
                <style lang='scss'> 
            

        

    

    

        

            

            

        

        

            
                .modalName{
            

        

    

    

        

            

            

        

        

            
                h3{
            

        

    

    

        

            

            

        

        

            
                padding:10px;
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                }
            

        

    

    

        

            

            

        

        

            
                </style>

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進(jìn)入一起成長學(xué)習(xí)，請掃碼藍(lán)小助，報下信息，藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

轉(zhuǎn)自：csdn
免責(zé)聲明：藍(lán)藍(lán)設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計( m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)

« js_防抖與節(jié)流（閉包的使用）全面總結(jié)圖表設(shè)計的思路和方法 »

配合前端vue實現(xiàn)表格的增刪改查

前言：

這個章節(jié)內(nèi)容是比較多的，分為前端部分和后端部分。

目錄：

實現(xiàn)效果：增刪改查

一、后端部分：

（1）數(shù)據(jù)庫：

新建一張表user,設(shè)置幾個字段，效果如下：

（2）egg邏輯部分：

提供的接口：http://localhost:7001/setUserList

（3）egg具體實現(xiàn)步驟：

1、router.js中添加：

2、新建：app / controller / new / user.js

（1）查，模糊查詢

（2）增

（3）改

（4）刪

user.js 源碼：

3、引入mysql:點我

4、跨域問題解決：點我

二、前端部分：

新建vue文件：testApi.vue

1、初始化查詢列表數(shù)據(jù)：頁面展示列表，列表數(shù)據(jù)mouted獲取

2、頁面點擊新增：展示彈框，并將彈框內(nèi)容去除掉，點擊新增，將彈框內(nèi)容發(fā)送給后端

3、頁面點擊列表里面具體數(shù)據(jù)的編輯：彈框，并回填數(shù)據(jù)，修改將當(dāng)前數(shù)據(jù)的id和表格數(shù)據(jù)傳給后端

4、刪除按鈕，點擊出現(xiàn)二次確認(rèn)彈框，點擊確認(rèn)將當(dāng)前數(shù)據(jù)的id給后端就行

testApi.vue 源碼：

分類

日歷

鏈接

個人資料

存檔

配合前端vue實現(xiàn)表格的增刪改查

前言：

這個章節(jié)內(nèi)容是比較多的，分為前端部分和后端部分。

目錄：

實現(xiàn)效果：增刪改查

一、后端部分：

（1）數(shù)據(jù)庫：

新建一張表user,設(shè)置幾個字段，效果如下：

（2）egg邏輯部分：

提供的接口：http://localhost:7001/setUserList

（3）egg具體實現(xiàn)步驟：

1、router.js中添加：

2、新建：app / controller / new / user.js

（1）查，模糊查詢

（2）增

（3）改

（4）刪

user.js 源碼：

3、引入mysql:點我

4、跨域問題解決：點我

二、前端部分：

新建vue文件：testApi.vue

1、初始化查詢列表數(shù)據(jù)：頁面展示列表，列表數(shù)據(jù)mouted獲取

2、頁面點擊新增：展示彈框，并將彈框內(nèi)容去除掉，點擊新增，將彈框內(nèi)容發(fā)送給后端

3、頁面點擊列表里面具體數(shù)據(jù)的編輯：彈框，并回填數(shù)據(jù)，修改將當(dāng)前數(shù)據(jù)的id和表格數(shù)據(jù)傳給后端

4、刪除按鈕，點擊出現(xiàn)二次確認(rèn)彈框，點擊確認(rèn)將當(dāng)前數(shù)據(jù)的id給后端就行

testApi.vue 源碼：

分類

日歷

鏈接

個人資料

存檔

這個章節(jié)內(nèi)容是比較多的，分為前端部分和后端部分。

一、后端部分：

1、router.js中添加：

2、新建：app / controller / new / user.js

3、引入mysql:點我

二、前端部分：

1、初始化查詢列表數(shù)據(jù)：頁面展示列表，列表數(shù)據(jù)mouted獲取

2、頁面點擊新增：展示彈框，并將彈框內(nèi)容去除掉，點擊新增，將彈框內(nèi)容發(fā)送給后端

3、頁面點擊列表里面具體數(shù)據(jù)的編輯：彈框，并回填數(shù)據(jù)，修改將當(dāng)前數(shù)據(jù)的id和表格數(shù)據(jù)傳給后端

4、刪除按鈕，點擊出現(xiàn)二次確認(rèn)彈框，點擊確認(rèn)將當(dāng)前數(shù)據(jù)的id給后端就行