前言：

這個章節內容是比較多的，分為前端部分和后端部分，

實作效果：增刪改查

一、后端部分：

（1）資料庫：

新建一張表user,設定幾個欄位，效果如下：

（2）egg邏輯部分：

提供的介面：http://localhost:7001/setUserList

get 請求，獲取資料，支持模糊查詢
post 請求，新增資料
put 請求，給后端當前資料id，修改內容
delete 請求，根據資料id洗掉當前條資料

（3）egg具體實作步驟：

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 ? % 內容 %

（2）增

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

（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 //獲取路徑后面的引數
    console.log('用戶的引數：');
    console.log(params);
    let sql = 'select * from user'
    let initSql = sql

      let content = [];//引數
    let isMore = false;//是否有多個查詢引數
    /**
     * @模糊查詢-量大的時候效率低
     * select * from user where name like ? % 內容 %
     * 在user表中全域查找name值 == 內容的
     * % 內容 % 全域查找內容
     *   內容 %  查找以 內容 開頭的資料
     * */
    if(params.name){
      sql += " where name like ?";
      content.push( "%"+params.name+"%" );
      isMore = true;
    }
    if(params.age){
      if(isMore){//true代表有多個引數
        sql += "and age LIKE ?";//and是兩個條件都必須滿足，or是或的關系
      }else{
        sql += " WHERE age LIKE ?";
      }
      content.push( "%"+params.age+"%" )
      isMore = true;
    }
    if(params.address){
      if(isMore){//true代表有多個引數
        sql += "and address LIKE ?";//and是兩個條件都必須滿足，or是或的關系
      }else{
        sql += " WHERE address LIKE ?";
      }
      content.push( "%"+params.address+"%" )
      isMore = true;
    }
    if(params.phone){
      if(isMore){//true代表有多個引數
        sql += "and phone LIKE ?";//and是兩個條件都必須滿足，or是或的關系
      }else{
        sql += " WHERE phone LIKE ?";
      }
      content.push( "%"+params.phone+"%" )
    }

    //開啟分頁
    if(params.page || params.pageSize){
      let current = params.page;//當前頁碼
      let pageSize = params.pageSize;//一頁展示多少條資料
      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('表名'，內容)
   * this.app.mysql.insert('表名'，{
   *   name:123,
   *   age:1,
   *   address:西安
   * })
   */
  //
  async postUserList() {
    console.log(this.ctx.request.body);
    //新增資料-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(){
    //新增資料-user表
    let id = this.ctx.query.id //獲取路徑后面的引數
    let data = this.ctx.request.body
    let sql = 'update user set '
    let isMore = false;//是否有多個查詢引數
    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
    }
    //手機號
    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 //獲取路徑后面的引數
    console.log('用戶的引數：');
    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、初始化查詢串列資料：頁面展示串列，串列資料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="手機號">
      </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: {
      /***
       * 獲取串列資料
       */
      initPage() {
        let params = {
          page: this.tableInfo.page, //當前頁
          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、頁面點擊新增：展示彈框，并將彈框內容去除掉，點擊新增，將彈框內容發送給后端

3、頁面點擊串列里面具體資料的編輯：彈框，并回填資料，修改將當前資料的id和表格資料傳給后端

4、洗掉按鈕，點擊出現二次確認彈框，點擊確認將當前資料的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="手機號">
      </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="年紀：">
            <el-input v-model="modalFrom.age"></el-input>
          </el-form-item>
          <el-form-item label="手機號：">
            <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>請確認是否洗掉
      </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">確 認</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: '手機號',
              prop: 'phone',
              align: 'center'
            },
            {//內容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: {
      /***
       * 獲取串列資料
       */
      initPage() {
        let params = {
          page: this.tableInfo.page, //當前頁
          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)
        })
      },
      /**
       * 當前頁發生改變
       * */
      pageChange(page) {
        this.tableInfo.page = page
        this.initPage() //重繪串列資料
      },
      /**
       * 當前第幾頁發生改變
       * */
      pageSizeChange(pageSize) {
        this.tableInfo.page = 1
        this.tableInfo.pageSize = pageSize
        this.initPage() //重繪串列資料
      },
      //新增彈框
      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() //重繪資料
          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() //重繪資料
          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() //重繪資料
          this.modal.show  = false
        })
      }
    }

  }
</script>

<style lang='scss'>
.modalName{
  h3{
    padding:10px;
  }
}
</style>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/310598.html

標籤：其他

上一篇：js_防抖與節流（閉包的使用）

下一篇：五分鐘掌握用Vue腳手架搭建一個完整專案！

egg(八):配合前端vue實作表格的增刪改查

前言：

這個章節內容是比較多的，分為前端部分和后端部分，

目錄：

實作效果：增刪改查

一、后端部分：

（1）資料庫：

新建一張表user,設定幾個欄位，效果如下：

（2）egg邏輯部分：

提供的介面：http://localhost:7001/setUserList

（3）egg具體實作步驟：

1、router.js中添加：

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

（1）查，模糊查詢

（2）增

（3）改

（4）刪

user.js 原始碼：

3、引入mysql:點我

4、跨域問題解決：點我

二、前端部分：

新建vue檔案：testApi.vue

1、初始化查詢串列資料：頁面展示串列，串列資料mouted獲取

2、頁面點擊新增：展示彈框，并將彈框內容去除掉，點擊新增，將彈框內容發送給后端

3、頁面點擊串列里面具體資料的編輯：彈框，并回填資料，修改將當前資料的id和表格資料傳給后端

4、洗掉按鈕，點擊出現二次確認彈框，點擊確認將當前資料的id給后端就行

testApi.vue 原始碼：