1. vue创建项目(vue create xxxx)2. 安装相应的依赖

引入需要的模块（mysql、express、body-parser、cors、vue-resource）

cnpm install mysql --savecnpm install express --savecnpm install body-parser --savecnpm install cors --savecnpm install vue-resource --save

3.在项目根目录下创建server文件夹：3.1 在src目录下，main.js中使用vue-resource模块：

// 将vue-resource模块引入进来，否则this.$http将无法使用import VueResource from 'vue-resource'Vue.use(VueResource);

3.2 在server目录下，编写database.js：

// 配置数据库相关信息

// 配置数据库相关信息module.exports = {  mysql: {    host: "localhost",    user: "root",    password: "root",    database: "test",    port: 3306  }};

3.3 在server目录下，编写sql.js：

// 编写相关sql语句let sqlMap = {  user: {    // 查询数据    select: "select * from user where username = ?;",    // 插入数据    insert: "insert into user values(?,?);",    // 修改数据    update: "update user set password = ? where username = ?;",    // 删除数据    delete: "delete from user where username = ? and password = ?;"  }};// 暴露sqlMapmodule.exports = sqlMap;

3.4 在server目录下，编写api.js

// 引入database.js文件（配置数据库相关信息）let models = require('./database');// 引入sql.js文件（编写相关sql语句）let $sql = require('./sql');// 引入mysql和express模块let mysql = require('mysql');let express = require('express');let router = express.Router();// 开始连接数据库let conn = mysql.createConnection(models.mysql);conn.connect();// 对JSON字符串进行处理let jsonWrite = function (response, result) {  if (typeof result === 'undefined') {    response.json({      code: '500',      msg: '操作失败'    });  } else {    response.json(result);  }};// 查询数据（'/select'）router.post('/select', (request, response) => {  // 获取编写相关sql语句  let sql = $sql.user.select;  console.log("相关sql语句：", sql);  // 获取请求参数  let params = request.body;  console.log("相关参数", params);  // [params.username]传参类似mybatis  conn.query(sql, [params.username], function (error, result) {    if (error) {      console.log('网络连接异常:' + error);    }    if (result) {      jsonWrite(response, result);      for (let i = 0; i < result.length; i++) {        if (result[i].password == params.password) {          return response.end();        } else {          return response.end();        }      }    }  })});// 插入数据（'/insert'）router.post('/insert', (request, response) => {  // 获取编写相关sql语句  let sql = $sql.user.insert;  console.log("相关sql语句：", sql);  // 获取请求参数  let params = request.body;  console.log("相关参数", params);  // [params.username]传参类似mybatis  conn.query(sql, [params.username, params.password], function (error, result) {    if (error) {      console.log('网络连接异常:' + error);    }    if (result) {      jsonWrite(response, result);    }  })});// 修改数据（'/update'）router.post('/update', (request, response) => {  // 获取编写相关sql语句  let sql = $sql.user.update;  console.log("相关sql语句：", sql);  // 获取请求参数  let params = request.body;  console.log("相关参数", params);  // [params.username]传参类似mybatis  conn.query(sql, [params.password, params.username], function (error, result) {    if (error) {      console.log('网络连接异常:' + error);    }    if (result) {      jsonWrite(response, result);    }  })});// 删除数据（'/delete'）router.post('/delete', (request, response) => {  // 获取编写相关sql语句  let sql = $sql.user.delete;  console.log("相关sql语句：", sql);  // 获取请求参数  let params = request.body;  console.log("相关参数", params);  // [params.username]传参类似mybatis  conn.query(sql, [params.username, params.password], function (error, result) {    if (error) {      console.log('网络连接异常:' + error);    }    if (result) {      jsonWrite(response, result);    }  })});// 暴露routermodule.exports = router;

3.5 在serve文件夹下，写入server.js

// 引入api.jsconst userApi = require('./api');// 引入express模块const express = require('express');const app = express();// 引入cors模块，处理跨域问题const cors = require('cors');app.use(cors());// 引入body-parser模块，解析请求过来的参数const bodyParser = require('body-parser');app.use(bodyParser.json());app.use(bodyParser.urlencoded({extended: false}));// 访问Node服务端映射地址app.use('/api', userApi);// 开始服务器端口app.listen(8088);console.log("服务器端口开启成功！");

4. 编写demo2.vue进行交互界面简单编写

// 在路由中引入新demo2.vue页面import demo2 from "@/components/demo2";{   path: '/demo2',   name: 'demo2',   component: demo2,}

<template>  <div style="margin-left: 100px">    <h3>数据库增删改查（CURD操作）</h3>    <label>用户名:<input type="text" v-model="username"/></label><br/><br/>    <label>密码:<input type="password" v-model="password"/></label><br/><br/>    <el-button type="primary" @click="selectData">查询</el-button>    <el-button type="primary" @click="insertData">增加</el-button>    <el-button type="primary" @click="updateData">修改</el-button>    <el-button type="primary" @click="deleteData">删除</el-button>  </div></template><script>  export default {    name: "demo2",    data() {      return {        username: '',        password: '',      }    },    methods: {      selectData() {        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）        this.$http.post(';, {          username: this.username        }).then(data => {          if (data.data[0].username == this.username && data.data[0].password == this.password) {            this.$message({type: 'success', message: "查询成功"});          } else {            this.$message({type: 'warning', message: "查询失败"});          }        }).catch(error => {          this.$message({type: 'error', message: "网络连接异常"});        });      },      insertData() {        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）        this.$http.post(';, {          username: this.username,          password: this.password        }).then(data => {          if (data.data.affectedRows > 0) {            this.$message({type: 'success', message: "新增成功"});          } else {            this.$message({type: 'warning', message: "新增失败"});          }        }).catch(error => {          this.$message({type: 'error', message: "网络连接异常"});        });      },      updateData() {        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）        this.$http.post(';, {          username: this.username,          password: this.password        }).then(data => {          if (data.data.affectedRows > 0) {            this.$message({type: 'success', message: "修改成功"});          } else {            this.$message({type: 'warning', message: "修改失败"});          }        }).catch(error => {          this.$message({type: 'error', message: "网络连接异常"});        });      },      deleteData() {        // 访问node.js服务端（参数名称:要和api.js中[params.属性名]一致，请求方式也应该保持一致）        this.$http.post(';, {          username: this.username,          password: this.password        }).then(data => {          if (data.data.affectedRows > 0) {            this.$message({type: 'success', message: "删除成功"});          } else {            this.$message({type: 'warning', message: "删除失败"});          }        }).catch(error => {          this.$message({type: 'error', message: "网络连接异常"});        });      }    }  }</script><style scoped></style>

启动后端

5. 测试：