目录
一、mysql及navicat的安装1、mysql的安装2、navicat的安装二、创建Vue项目三、安装相关依赖四、在项目中创建server文件夹，用于搭建本地服务器。五、设计用户表六、业务页面的开发最近又搞了个小项目，单机版本的内部考勤管理系统，直接部署在对方的工作电脑上，不需要在云端部署，因为项目本身就小，我就没配置后端同事进行开发，而是通过VUE直连mysql进行业务开发及保存。后期再通过PM2来守护页面及服务，随时打开使用。
下面来复盘一下整体开发过程。
一、mysql及navicat的安装
1、mysql的安装
前往官方网站下载安装，点击连接->mysql下载及安装官网
需求说明的是，这里下载使用5.7.44的版本，8.0及9.0连接机制有所调整，会增加额外的一些配置。这里就不再讨论展开。
下载后的步骤一路默认进行即可。安装完成后配置环境变量即可。安装过程中需要输入root的密码，设置时记录好后面连接服务要用。
2、navicat的安装
网上自行找哈，这里也不展开，后期用于设计表。
二、创建Vue项目
CD到指定的目录后运行以下命令，按时提示完成项目的创建。
vue create 项目名
三、安装相关依赖
在项目目录中依次执行如下命令
下载express：npminstallexpress-save
下载cors：npminstallcors-save
下载mysql：npminstallmysql-save
下载axios：npminstallaxios-save
下载elementUI：npminstallelement-ui-save
下载sass：npminstallsass-save
等，所有依赖如下，自行查看并安装即可
四、在项目中创建server文件夹，用于搭建本地服务器。
4.1、在server文件下创建app.js文件，粘贴以下内容。此为api连接服务。
let express = require('express')let cors = require('cors')let bodyParser = require('body-parser')let router = require('./router')let app = express()app.use(bodyParser.json())app.use(bodyParser.urlencoded({extended:false}))app.use(cors())app.use(router)app.listen(80,()=>{ console.log('服务器启动成功');})
4.2、在server文件下创建db文件夹，并在db文件夹下创建index.js文件，粘贴以下内容。此为mysql连接服务。注意数据库名及密码，密码即1.1步设置的ROOT密码，我创建的库名叫oadb，你创建的叫什么就写什么。不要写为user哦，user是表名不是库名，一个库里面有多个表，注意关系区分。
let mysql = require('mysql')let db = mysql.createConnection({ host:'127.0.0.1', user:'root', password:'abel', database:'oadb'})module.exports = db
4.3、在server文件夹下创建api文件夹，并在api文件夹下创建user.js，用于操作数据库。注意此为示例，这里也仅供部分功能，其他业务逻辑功能暂不示例。all方法在API路由表中定义的是get方式，所以取参是req.query.xxx，而del和update方法是POST方法，取参是req.body.xxx,自己注意区分。
let db = require("../db/index");exports.all = (req, res) => { var sql = "select * from t_user"; db.query(sql, [], (err, data) => { if (err) { console.log("出错了", err); return res.send("错误" + err.message); } res.send(data); });};//删除人员exports.del = (req, res) => { var sql = "delete from t_user where id = ?"; db.query(sql, [req.body.id], (err, data) => { if (err) { console.log("出错了", err); return res.send("错误" + err); } res.send(data); });};//更新exports.update = (req, res) => { var sql = "update t_user set name = ?,mobile=?,idNo=?,sex=?,noteText=?,groupId=? where id = ?"; db.query( sql, [ req.body.name, req.body.mobile, req.body.idNo, req.body.sex, req.body.noteText, req.body.groupId, req.body.id, ], (err, data) => { if (err) { console.log("出错了", err); return res.send("错误" + err); } res.send(data); } );};4.4、在server文件夹下创建router.js，用于配置对应api路由，这个文件管理着所有接口及请求方式，将api与相应的表操作类进行关联。代码如下 ：
let express = require('express')let router = express.Router()let user = require('./api/user')//用户相关，get方法router.get('/user/all',user.all)//post方法router.post('/user/del',user.del)router.post('/user/update',user.update)module.exports = router
