1.搭建Vue项目

1.在cmd中运行 vue ui，按照自己想要的配置进行搭建

1
vue ui

2.在vue项目的根目录下安装axios 和Element UI

1
2
npm install axios --save
npm i element-ui -S

3.安装完成后，在main.js中引入

1
2
3
4
5
6
import axios from 'axios'//引入axios
Vue.prototype.$axios = axios;//把axios挂载到vue上

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

2.搭建Node.js项目

1.新建一个 server 文件夹，作为项目的根目录，并运行命令

1
npm init -y

2.安装 express，cors

1
2
npm i express@4.17.1
npm i cors@2.8.5

3.在项目根目录新建 app.js 作为入口文件，并写入如下代码：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 导入express
const express = require('express')
// 创建express服务器实例
const app = express()
// 导入cors 中间件
const cors = require('cors')
// cors注册为全局中间件
app.use(cors())
// 解析application/x-www-form-urlencoded 格式
app.use(express.urlencoded({exrended:false}))

app.listen('3008',function(){
    console.log('api server running at http://127.0.0.1:3008');
})

3.在项目根目录，新建 router 文件夹，存放路由模块；新建router_handler文件夹，存放路由处理函数模块

4.在router文件夹中，新建 user.js 文件，作为用户的路由模块，并写入如下代码：

1
2
3
4
5
6
// 导入express
const express = require('express')
// 导入router
const router = express.Router()
// 暴露
module.exports = router

5.在 app.js 中导入并使用路由模块

1
2
3
// 导入并使用路由模块
const userRouter = require('./router/user')
app.use('/api',userRouter)

6.在 router_handler 文件夹中，新建 userhandler.js ，作为存放用户路由处理函数模块

3.配置MySQL模块

1.安装mysql模块

1
npm i mysql@2.18.1

2.在 server 文件中 新建 /db/index.js 文件，创建数据库连接对象：

1
2
3
4
5
6
7
8
9
10
11
// 导入mysql模块
const mysql = require('mysql')
// 配置数据库
const db = mysql.createPool({
    host:'127.0.0.1',
    user:'root',
    password:'123456',
    database:'test'
})
// 暴露
module.exports = db

4.编写接口

1.在 \router_handler\userHeandler.js 中导入 index.js 数据库文件

1
2
// 导入index文件
const db = require('../db/index')

2.使用exports对象，编写 路由处理函数

1
2
3
4
5
6
7
8
9
10
11
//查询用户信息
exports.getUserInfo = (req, res) => {
    const sql = `select * from t_user`
    db.query(sql,(err,results)=>{
        if (err) {
            res.send({code:201,message:'查询失败'})
        }else{
            res.send({ code: 200, message: '查询成功',data:results})
        }
    })
}

3.在 \router\user.js 中导入userHandler文件并使用

1
2
3
// 导入userHandler文件并使用
const userHandler = require('../router_handler/userHeandler')
router.get('/user/list',userHandler.getUserInfo)

4.运行app.js，使用postman调试接口

1
node app.js

5.编写其他接口函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//新增用户
exports.addUserInfo = (req, res) => {
    const data = req.body
    console.log(data);
    const sql = `insert into t_user(u_name,u_email,u_sex,u_province,u_hobby) values('${data.u_name}','${data.u_email}','${data.u_sex}','${data.u_province}','${data.u_hobby}')`
    db.query(sql,(err,results)=>{
        if (err) {
            res.send({code:201,message:'新增失败'})
        }else{
            res.send({ code: 200, message: '新增成功'})
        }
    })
}
//删除用户
exports.deleteUserInfo = (req, res) => {
    const data = req.body
    console.log(data);
    const sql = `delete from t_user where u_id = '${data.u_id}'`
    db.query(sql,(err,results)=>{
        if (err) {
            res.send({code:201,message:'删除失败'})
        }else{
            res.send({ code: 200, message: '删除成功'})
        }
    })
}

6.在 \router\user.js 中使用

1
2
router.post('/user/add',userHandler.addUserInfo)
router.post('/user/delete',userHandler.deleteUserInfo)

5.Vue实现页面渲染

1.在 src 文件夹下，新建一个 /api/index.js 和 /api/api.js

2.在 index.js 中导入 axios 并获取后端地址：

1
2
3
4
5
6
7
8
9
// 导入axios
import axios from 'axios'

const serve = axios.create({
    baseURL:"http://127.0.0.1:3008/api",
    timeout:3000,

})
export default serve

3.在 api.js 中导入index.js文件，并封装接口

1
2
3
4
5
6
7
8
9
10
import serve from '../api/index'
import qs from 'qs'

//获取用户信息
export function getUserInfo() {
    return serve({
        method: 'GET',
        url: '/user/list',
    })
}

4.在vue文件中使用接口

1
2
3
4
5
6
//获取用户信息
async getUserList(){
    const {data:res} = await getUserInfo()
	if (res.code != 200) return this.$message.error("查询用户失败！");
    this.tableData = res.data
},

6.Vue页面代码汇总

1.HomeView.js页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
  <div class="home">
    <form @submit.prevent="demo" class="home-form">
      <table border="1" cellspacing="0">
        <tr>
          <td>用户名：</td>
          <td><input type="text" v-model="userInfo.u_name" /></td>
        </tr>
        <tr>
          <td>邮箱：</td>
          <td><input type="text" v-model="userInfo.u_email" /></td>
        </tr>

        <tr>
          <td>性别：</td>
          <td>
            <input
              type="radio"
              v-model="userInfo.u_sex"
              name="u_sex"
              value="男"
              checked="checked"
            />男
            <input
              type="radio"
              v-model="userInfo.u_sex"
              name="u_sex"
              value="女"
            />女
            <input
              type="radio"
              v-model="userInfo.u_sex"
              name="u_sex"
              value="未知"
            />未知
          </td>
        </tr>
        <tr>
          <td>省份：</td>
          <td>
            <select v-model="userInfo.u_province">
              <option value="湖北省">湖北省</option>
              <option value="上海市">上海市</option>
              <option value="重庆市">重庆市</option>
              <option value="湖南省">湖南省</option>
            </select>
          </td>
        </tr>
        <tr>
          <td>爱好：</td>
          <td>
            <input
              type="checkbox"
              v-model="userInfo.u_hobby"
              value="篮球"
            />篮球
            <input
              type="checkbox"
              v-model="userInfo.u_hobby"
              value="读书"
            />读书
            <input
              type="checkbox"
              v-model="userInfo.u_hobby"
              value="插画"
            />插画
            <input
              type="checkbox"
              v-model="userInfo.u_hobby"
              value="编程"
            />编程
            <input
              type="checkbox"
              v-model="userInfo.u_hobby"
              value="弹琴"
            />弹琴
          </td>
        </tr>
      </table>
      <button>新增</button>
    </form>

    <div class="home-box">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="u_id" label="id">
        </el-table-column>
        <el-table-column prop="u_name" label="用户名" >
        </el-table-column>
        <el-table-column prop="u_email" label="邮箱"> </el-table-column>
         <el-table-column prop="u_sex" label="性别"> </el-table-column>
        <el-table-column prop="u_province" label="省份"> </el-table-column>
        <el-table-column prop="u_hobby" label="爱好"> </el-table-column>
        <el-table-column label="操作"> 
          <template slot-scope="scope">
              <button @click ="deleteuser(scope.row.u_id)">删除</button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<script>
import { getUserInfo,postAddUser,deleteUser} from "../api/api";

export default {
  name: "HomeView",
  data() {
    return {
      userInfo: {
        u_name: "",
        u_email: "",
        u_sex: "",
        u_province: "",
        u_hobby: [],
      },
      tableData:[]
    };
  },
  created(){
    this.getUserList()
  },
  methods: {
    async getUserList(){
      const {data:res} = await getUserInfo()
      if (res.code != 200) return this.$message.error("查询用户失败！");
      this.tableData = res.data
    },
    async demo() {
      //JSON.stringify() 将数据转换为json字符串
      const {data:res} = await postAddUser(this.userInfo) 
      if (res.code != 200) return this.$message.error("新增用户失败！");
      this.getUserList() 

    },
    async deleteuser(id){
      const confirmResult = await this.$confirm(
        "此操作将删除该用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const data = {
        u_id : id
      }
      const {data:res} = await deleteUser(data) 
      if (res.code != 200) return this.$message.error("删除用户失败！");
      this.getUserList();
      
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<style scoped>
.home-form {
  width: 60%;
  margin: 0 auto;
  align-content: center;
  margin-top: 50px;
}
.home-form table {
  width: 100%;
}
.home-form button {
  display: flex;
  margin-top: 10px;
}
.home-box {
  width: 60%;
  margin: 0 auto;
  align-content: center;
  margin-top: 20px;
}
.home-box .el-table {
  width: 100%;
}
</style>

2.api.js代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
import serve from '../api/index'
import qs from 'qs'

//获取用户信息
export function getUserInfo() {
    return serve({
        method: 'GET',
        url: '/user/list',
    })
}
//新增用户
export function postAddUser(data) {
    return serve({
        method: 'POST',
        url: '/user/add',
        data:qs.stringify(data)
    })
}
// 删除用户
export function deleteUser(data) {
    console.log(data);
    return serve({
        method: 'POST',
        url: '/user/delete',
        data:qs.stringify(data)
    })
}

7.效果展示