使用Node+Vue实现简单CRUD

前言

在上一篇写的数据库的增删改查用的是node模块写的客户端，这次写一个纯前端发起请求与后端的交互。 用到的技术主要是Vue+ElementUi+Axios做前端，NodeJs+Express+Mysql写后端接口。

准备工作

vue

初始化一个vue项目

sudo cnpm install --global vue-cli
cnpm install webpack -g
vue init webpack my-project
cd my-project
cnpm install
cnpm run dev
复制代码

安装依赖插件

cnpm install express body-parser --save
cnpm install element-ui --save
npm install axios --save
复制代码

ElementUi使用

import "element-ui/lib/theme-chalk/index.css"
import ElementUI from "element-ui"
Vue.use(ElementUI)
复制代码

Mysql db.js

完成sql语句映射

后端

// node 后端服务器

const userApi = require('./api/userApi');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));

// 后端api路由
app.use('/api/user', userApi);

// 监听端口
app.listen(3000);
console.log('监听端口 :3000');

复制代码

查询接口

//根据条件查询用户接口
router.get('/queryUser', (req, res) => {
    var sql = $sql.user.select;
    var params = req.query;
    console.log(params);
    conn.query(sql, [params.queryParam], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            res.send(result);
        }
    })
});
//返回全部数据接口,一开始进来就进行加载
router.get('/allUser', (req, res) => {
    var sql = $sql.user.selectAll;
    conn.query(sql, function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            res.send(result);
        }
    })
});
复制代码

用户一进入页面用户数据会全部请求一次，这里数据是按姓名查询的

增加接口

// 增加用户接口
router.post('/addUser', (req, res) => {
    var sql = $sql.user.add;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.username, params.age,params.address], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            res.send(result);
        }
    })
});
复制代码

这里增加用户的姓名，年龄，地址， ID是自增长的

更改接口

//修改用户数据接口
router.patch('/patchUser', (req, res) => {
    var sql = $sql.user.update;
    var params = req.body;
    console.log(params);
    conn.query(sql, [params.username, params.age,params.address,params.id], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            res.send(result);
        }
    })
});
复制代码

删除接口

//删除用户接口
router.delete('/deleteUser', (req, res) => {
    var sql = $sql.user.delete;
    console.log(req)
    var params = req.query;
    console.log(params);
    conn.query(sql, [params.id], function(err, result) {
        if (err) {
            console.log(err);
        }
        if (result) {
            res.send(result);
        }
    })
});
复制代码

前端传入相应要删减的用户ID，后端根据参数操作数据库，删除相应用户数据

前端

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <div class="searchBox">
      <el-input
        class="search"
        type="text"
        name="queryParam"
        v-model="queryParam"
        placeholder="输入关键字搜索"
      ></el-input>
      <el-button type="primary" @click="queryUser">查询</el-button>
    </div>
    <form ref="formbox">
      <el-input type="text" name="username" v-model="userName" placeholder="请输入姓名" ref="input1"></el-input>
      <br>
      <el-input type="text" name="age" v-model="age" placeholder="请输入年龄" class="mt10"></el-input>
      <br>
      <el-input type="text" name="address" v-model="address" placeholder="请输入地址" class="mt10"></el-input>
      <br>
      <el-button type="primary" @click="addUser" class="mt10">添加</el-button>
    </form>
    <el-table
      :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 60%;margin: 0 auto"
    >
      <el-table-column label="Id" prop="id"></el-table-column>
      <el-table-column label="Name" prop="name"></el-table-column>
      <el-table-column label="Age" prop="age"></el-table-column>
      <el-table-column label="Address" prop="address"></el-table-column>
      <el-table-column align="right">
        <template slot-scope="scope">
          <el-button size="mini" type="text" @click="showDialog(scope.$index, scope.row)">修改</el-button>
          <el-button size="mini" type="danger" @click="handleDelete(scope.$index+1, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--弹窗数据-->
    <el-dialog title="提交修改信息" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
      <el-input type="text" name="username" v-model="userName2" placeholder="请输入姓名" ref="input1"></el-input>
      <br>
      <el-input type="text" name="age" v-model="age2" placeholder="请输入年龄" class="mt10"></el-input>
      <br>
      <el-input type="text" name="address" v-model="address2" placeholder="请输入地址" class="mt10"></el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
...

复制代码

这里前端主要用的前端UI框架ElementUi,做view展示

查询数据

queryUser () {
      var queryParam = this.queryParam;
      axios
        .get("api/user/queryUser", {
          params: {
            queryParam: queryParam
          }
        })
        .then(response => {
          console.log(response);
          // this.user = response.data;
          var resdata = response.data;
          this.tableData = resdata;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
    queryallUser () {
      axios
        .get("api/user/allUser")
        .then(response => {
          // console.log(response);
          var resdata = response.data;
          this.tableData = resdata;
        })
        .catch(function (error) {
          console.log(error);
        });
    },
复制代码

从后端请求来的数据赋给来了this.tableData,直接渲染到页面上

增加数据

 addUser () {
      var name = this.userName;
      var age = this.age;
      var address = this.address;
      axios
        .post("api/user/addUser", {
          username: name,
          age: age,
          address: address
          // address: address
        })
        .then(response => {
          console.log(response);
          //增加数据成功后会执行open2函数弹出成功提示
          this.open2();
          //添加数据成功后，清空input框的数据
          this.userName = "";
          this.age = "";
          this.address = "";
        })
        .catch(function (error) {
          console.log(error);
        });
    },
复制代码

更改数据

    handleEdit () {
    //获取相应要更改的ID
      var id = parseInt(this.objId.id);
      console.log(id)
      //获取更改后的内容
      var name = this.userName2;
      var age = this.age2;
      var address = this.address2;
      axios
        .patch("api/user/patchUser", {
        //传递的参数
          username: name,
          age: age,
          address: address,
          id: id
        })
        .then(response => {
          console.log(response);
          //这里有一个天写更改内容的弹窗，更改内容成功后，弹窗消失，数据清空
          this.dialogVisible = false;
          this.userName2 = "";
          this.age2 = "";
          this.address2 = "";
        })
        .catch(function (error) {
          console.log(error);
        });
    },
复制代码

根据ID，更改相应用户的数据，把内容和条件一起传递过去。
这里update: 'update userinfo set name=? , age=? , address=? where id=?'语句不写and 连接

删除数据

handleDelete (index, row) {
      console.log(row);
      var id = row.id;
      console.log(id);
      axios
        .delete("api/user/deleteUser", {
          params: {
            id: id
          }
        })
        .then(response => {
          console.log(response);
          //执行成功，给予删除成功提示
          this.open3();
        })
        .catch(function (error) {
          console.log(error);
        });
    },
复制代码

把要删除的用户ID作为参数传递过去，服务端根据ID操作数据库，删除相应用户数据。

跨域

前端请求数据，不得不提跨域问题，在 config>index.js 的 dev 中添加配置项 proxyTable：