vue+node+express+MySQL 写一个表格数据添加删除修改

---

前言

学习nodejs制作的前后端分离小页面；
前端：vue，element-ui
后端：node，express，MySQL
如有不好可留言一起学习
项目GitHub：https://github.com/Angel-HW/admin_web

---

一、前端演示视频

演示视频

<-上面要是打不开点这里->

二、后端接口

dbConfig.js文件，设置数据库连接池
(具体写法也是在网上学的，可自行寻找资料)

var mysql = require('mysql')

let config = {
  host: 'localhost',
  user: 'root',
  password: '123456',
  database: 'lol'
}

let pool = mysql.createPool(config)

var query = function(sql,options,callback){
  // console.log('in query')
  pool.getConnection(function(err,conn){
    if(err){
      callback(err,null,null);
    }else{
      conn.query(sql,options,function(err,results){
        // console.log('in getConnection')
        //释放连接  
        conn.release();
        //事件驱动回调  
        callback(err,results);
      });
    }
  });
}

module.exports = query;

api.js文件，写接口(这里举一个例子)

const express = require('express')
const route = express.Router()
const db = require('../../dbConfig/dbConfig')
const url = require('url')

// 获取数据
route.get('/getList', async(req, res) => {
  let obj = url.parse(req.url, true).query
  // 分页查询
  let startData = obj.startData*1
  let countData = obj.countData*1
  // mysql查询语句
  let sql = 'select * from person limit ?,?'
  let sqlArr = [startData, countData]
  // console.log(sqlArr)
  db(sql, sqlArr, function (_err, data) {
    if (_err) {
      res.json({
        status: '404',
        msg: 'fail',
        data: _err
      })
    } else {
      const results = data
      res.json({
        status: '200',
        msg: 'success',
        data: results
      })
    }
  })
})

module.exports = route

调用上面那个接口，将返回数据存在 tableData 里面

// 获取列表数据
    async getListData () {
      try {
        const startData = (this.currnetPage - 1) * this.pageSize
        const countData = this.pageSize
        const res = await this.$http.get('/getList', { startData, countData })
        console.log('success!')
        console.log(res)
        this.tableData = res.data
      } catch (_err) {
        console.log('err！')
        this.$message({
          type: 'error',
          message: '连接失败'
        })
      }
    },

---

总结

本来打算写个完整的项目，但是由于时间不允许，只能做了点功能，第一次学nodejs,有不足请大佬们改正；
关于项目过程中遇到的问题都写在项目的 README.md 文件里面
点这里直接看 README.md （server）
点这里直接看 README.md (admin)
完整项目GitHub地址在上面