Vue.js + express +mysql实现数据库增删改查

1、 下载安装Node.js

在Node.js官网可下载

2、下载vue-cli脚手架

npm install vue-cli -g

3、 创建项目

后面是项目名称，在安装项目过程中需要选择安装vue-router
vue init webpack mysqlconnect

4、安装vue-resource依赖

npm install vue-resourve

5、 安装express模块

npm install express

6、安装mysql依赖

npm install mysql

7、安装body-parser依赖

npm install body-parser

8、 在项目根目录文件下创建server文件夹，在文件夹中有两个文件（db.js和index.js)和一个api文件夹（含有user.Api.js）

db.js，用于数据库连接配置

// 数据库连接配置

module.exports = {
  mysql: {
    host: 'localhost',
    user: 'root',//数据库用户名
    password: 'password',//数据库密码
    database: 'vue',//所用数据库
    port: '3306'
  }
};

index.js，用于配置后端服务器

// node 后端服务器

const userApi = require('./api/userApi');
const fs = require('fs');
const path = require('path');
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('success listen at port:3000......');

api/userApi.js，用于数据库增删改查操作

var models = require('../db');

var express = require('express');

var router = express.Router();

var mysql = require('mysql');


// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();

var jsonWrite = function(res, ret) {
  if(typeof ret === 'undefined') {
    res.json({
      code: '1',
      msg: '操作失败'
    });
  } else {
    res.json(ret);
  }
};

// 增加用户接口
router.post('/addUser', (req, res) => {
  var params = req.body;
  var sql = 'insert into user(username, password) values (?, ?)';
  console.log(params);
  conn.query(sql, [params.username, params.password], function(err, result) {
    if (err) {
      console.log(err);
    }
    if (result) {
      jsonWrite(res, result);
    }
  })
});

// 查询用户接口
router.post('/queryUser', (req, res) => {
  var params = req.body;
  var sql = " select * from user where username = '" + params.username + "'";
  console.log(params);
  conn.query(sql, [params.username], function(err, result) {
    if (err) {
      console.log(err);
    }
    if (result) {
      console.log(res);
      jsonWrite(res, result);
    }
  })
});

// 修改用户接口
router.post('/updateUser', (req, res) => {
  var params = req.body;
  var sql = " update user set password = '"+ params.password + "' where username = '" + params.username + "'";
  console.log(params);
  conn.query(sql, [params.username], function(err, result) {
    if (err) {
      console.log(err);
    }
    if (result) {
      console.log(res);
      jsonWrite(res, result);
    }
  })
});

// 删除用户接口
router.post('/deleteUser', (req, res) => {
  var params = req.body;
  var sql = " delete from user where username = '" + params.username + "'";
  console.log(params);
  conn.query(sql, [params.username], function(err, result) {
    if (err) {
      console.log(err);
    }
    if (result) {
      console.log(res);
      jsonWrite(res, result);
    }
  })
});

module.exports = router;

Hello.vue，项目主页

<template>
  <div>
    {{msg}}
    <div>
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <button @click="addUser">新增</button>
    </div>
    <div>
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <button @click="queryUser">查询</button>
    </div>
    <div>
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <button @click="updateUser">修改</button>
    </div>
    <div>
      <input type="text" v-model="username">
      <input type="password" v-model="password">
      <button @click="deleteUser">删除</button>
    </div>
  </div>

</template>

<script>
  export default {
    name: 'hello',
    
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        username: '',
        password: '',
        // tableData: [],
      }
    },
    
    methods: {

      // 新增函数
      addUser() {
        var username = this.username;
        var password = this.password;
        this.$http.post('/api/user/addUser', {
          username: username,
          password: password
        },{}).then((response) => {
          console.log(response);
        })
      },
      
      // 查询函数
      queryUser() {
        var username = this.username;
        var password = this.password;
        this.$http.post('/api/user/queryUser', {
          username: username,
          password: password
        },{}).then((response) => {
          console.log(response);
        })
      },
      
      // 修改函数
      updateUser() {
        var username = this.username;
        var password = this.password;
        this.$http.post('/api/user/updateUser', {
          username: username,
          password: password
        },{}).then((response) => {
          console.log(response);
        })
      },
      
      // 删除函数
      deleteUser() {
        var username = this.username;
        var password = this.password;
        this.$http.post('/api/user/deleteUser', {
          username: username,
          password: password
        },{}).then((response) => {
          console.log(response);
        })
      },
    }

  }
</script>

<style scoped>

</style>

注意：

1、通过npm run dev在终端运行项目，如果没有引用vue-resouce，this.$http.post无法生效，报错如下：

解决方法：在main.js文件中引入vue-resource

import Vue from 'vue'
import App from './App'
import router from './router'

import VueRouter from 'vue-router'
//引入vue-resource
import VueResource from 'vue-resource'

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
});

// 此处需要use后，this.$http.get或者this.$http.post才可以
Vue.use(VueRouter);
//使用vue-resource
Vue.use(VueResource);

2、在config/index.js中还需要加入以下代码段，否则增删改查过程中会出现（Not Found）。

解决方法

proxyTable: {
      '/api': {
        target: 'http://localhost:3000/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

3、有一位博主说，在npm run dev过程中还会报eslint的错误，但是我这边是没有遇到这种情况，下面我也给出博主的解决方案供大家参考。

解决方法：

如果执行npm run dev后，报eslint的错误，可以在build目录的webpack.base.conf.js文件中，把eslint的代码注释掉,重新执行npm run dev就不会报错了：ESLint是一个QA工具，用来避免低级错误和统一代码的风格。ESLint被设计为完全可配置的，主要有两种方式来配置ESLint：
在注释中配置：使用JavaScript注释直接把配置嵌入到文件中。
配置文件：使用一个JSON或YAML文件来为全部的目录和它的子目录指定配置信息。
注释的代码如下：
// 去掉eslint验证，注释掉下面的代码
// {
// test: /.(js|vue)$/,
// loader: ‘eslint-loader’,
// enforce: “pre”,
// include: [resolve(‘src’), resolve(‘test’)],
// options: {
// formatter: require(‘eslint-friendly-formatter’)
// }
// }
作者：余生社会
链接：https://www.jianshu.com/p/4c058db039d5
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

实验效果：

1、开始数据表

2、运行界面

3、新增用户 123

4、查询用户

5、修改用户 1 密码

6、删除用户 2

参考学习
https://www.jianshu.com/p/4c058db039d5