毕业设计(上):Vue+MySQL前端连接数据库实现表格增删改查

毕业设计主题是数据可视化，选择的技术栈是Vue2.0，数据库选的是MySQL，首先需要解决的就是前端连接数据库的问题。本文基于前端网站连接MySQL数据库和Node+Mysql+Vue实现登录注册功能，手把手教你使用前端连接数据库，实现增删改查。

项目初始化

使用vue-cli搭建一个基于webpack的vue2.0项目，使用脚手架生成项目框架。
安装mysql数据库，附上mysql安装教程，然后安装navicat for mysql，推荐使用mysql的图形化界面管理数据库。

添加服务端目录

在项目根目录下新建server文件夹，目录结构如下

1
2
3
4
5
6
7


|-- server
  |-- api    // 与数据库的各个表连接接口
    |-- userApi.js
    |-- hireApi.js
  |-- db.js     // mysql数据库连接配置
  |-- index.js    // Express服务器入口文件
  |-- sqlMap.js

db.js为mysql数据库基本配置信息，index.js用来定义与监听后端服务器，sqlMap.js是SQL语句映射文件，以供api逻辑调用。原代码基本上无需更改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// sqlMap.js
var sqlMap = {
    // 用户
    user: {
        add: 'insert into user(id, username, password) values (0, ?, ?)',
        select_name: 'SELECT * from user where username = ?',    //查询 username
        select_password: 'SELECT * from user where password = ?'      //查询 password
    },
    // 招聘
    hire: {
        add: 'insert into hire(hire_id, title, money, degree, exp, site, time, addr) values (0, ?, ?, ?, ?, ?, ?, ?)',
        getAll: 'SELECT * from hire',
        search: 'select * from hire where title = ?',
        update: 'update hire set title = ? where hire_id = ?'
    }
}

module.exports = sqlMap;

代理与跨域

设置地址映射表，修改项目配置文件index.js中的proxyTable参数

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


dev:{
  // ...
  proxyTable: {
      '/api': {
          target: 'http://127.0.0.1:3000/api/',
          changeOrigin: true,
          pathRewrite: {
              '^/api': ''
          }
      }
  },
  // ...
}

数据库表连接入口

 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


// hireUpi.js
var models = require('../db');
var express = require('express');
var router = express.Router();
var mysql = require('mysql');
var $sql = require('../sqlMap');
// 连接数据库
var conn = mysql.createConnection(models.mysql);
conn.connect();
var jsonWrite = function(res, ret) {
  if (typeof ret === 'undefined') {
    res.send('err')
  } else {
    //res.json(ret);
    res.send('ok')
  }
};

// 增加
router.post('/addList', (req, res) => {
  var sql = $sql.hire.add
  var params = req.body
  conn.query(sql, [params.title, params.money, params.degree, params.exp, params.site, params.time, params.addr], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

// 更新
router.post('/updateList', (req, res) => {
  var sql = $sql.hire.update
  var params = req.body
  conn.query(sql, [params.title, params.hire_id], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})

//查找
router.get('/searchList', (req, res) => {
  var sql = $sql.hire.search
  var params = req.query
  console.log(params)
  conn.query(sql, [params.title], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      console.log(result)
      res.send(result)
    }
  })
})

// 获取所有list
router.get('/getAllList', (req, res) => {
  var sql = $sql.hire.getAll
  var params = req.query
  conn.query(sql, function(err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      console.log(result)
      res.send(result)
    }
  })
})

// 删除
router.post('/delList', (req, res) => {
  var sql = $sql.hire.del
  var params = req.body
  conn.query(sql, [params.hire_id], function (err, result) {
    if (err) {
      console.log(err)
    }
    if (result) {
      jsonWrite(res, result)
    }
  })
})


module.exports = router;

数据测试

 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


// editTable.vue
<el-form-item>
  <el-button type="primary" @click="handleAdd">新增</el-button>
</el-form-item>
<!--列表-->
<el-table>
  <el-table-column type="selection" width="55">
  </el-table-column>
  <el-table-column prop="title" label="岗位名称" width="120">
  </el-table-column>
</el-table>
<!--编辑界面-->
<el-dialog :visible.sync="dialogFormVisible" @click="dialogFormVisible=false">
  <el-form label-width="80px" :model="editForm">
    <el-form-item label="岗位名称" prop="title">
      <el-input v-model="editForm.title" placeholder="请输入岗位名"></el-input>
    </el-form-item>
    <div slot="footer" class="dialog-footer">
      <el-button @click.native="dialogFormVisible=false">取消</el-button>
      <el-button v-if="dialogStatus=='create'" type="primary" @click="addList">添加</el-button>
      <el-button v-else type="primary" @click="updateList">修改</el-button>
    </div>
  </el-form>
</el-dialog>
// ...
<script>
methods: {
  handleAdd: function() {
    this.dialogFormVisible = true;
    // 新增时清空
    this.editForm = {
      title: ''
    }
  },
  // 添加
  addList() {
    var title = this.editForm.title
    axios.post('/api/hire/addList', {
      title: title
    }).then(function(response) {
      alert('成功录入' + title + '')
      this.dialogFormVisible = false
    }).catch(function(error) {
      console.log(error)
    })
  },
  // 更改
  updateList() {
    var title = this.editForm.title
    var hire_id = this.editForm.hire_id
    axios.post('/api/hire/updateList', {
      title: title,
      hire_id: hire_id
    }).then(function(response) {
      alert('成功更新' + title + '')
      this.dialogFormVisible = false
    }).catch(function(error) {
      console.log(error)
    })
  }
}
</script>

启动

编写完成后，安装相应的依赖npm install express mysql body-parser 在系统中找到"服务"，将快捷方式发送到桌面。打开services.msc，找到mysql更改为手动启动，调试时候选择启动或停止服务。开启mysql服务后，在server文件夹下执行node index，看到success listen at port:3000......即服务端启动成功。在项目根目录下，npm run dev启动web服务器。

其它

设计数据库表时候，录入字段为中文，出现乱码，解决方法：修改数据库和数据表的编码规则。

1
2


show creat database test; 
ALTER DATABASE test DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

1
2


ALTER TABLE test.hire CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci;
show create table test.hire;

删除数据清空自增ID

1

truncate table test.company;

参考

[1]前端网站连接MySQL数据库

[2]Node+Mysql+Vue实现登录注册功能

[3]Vue+MySQL+Express小试牛刀

[4]项目完整代码