vue mysql 直连

news2024/10/28 16:48:20

最近又搞了个小项目，单机版本的内部考勤管理系统，直接部署在对方的工作电脑上，不需要在云端部署，因为项目本身就小，我就没配置后端同事进行开发，而是通过VUE直连mysql进行业务开发及保存。后期再通过PM2来守护页面及服务，随时打开使用。

下面来复盘一下整体开发过程。

一、mysql及navicat的安装

1、mysql的安装。

前往官方网站下载安装，点击连接->mysql下载及安装官网

需求说明的是，这里下载使用5.7.44的版本，8.0及9.0连接机制有所调整，会增加额外的一些配置。这里就不再讨论展开。

下载后的步骤一路默认进行即可。安装完成后配置环境变量即可。安装过程中需要输入root的密码，设置时记录好后面连接服务要用。

2、navicat的安装

网上自行找哈，这里也不展开，后期用于设计表。

二、创建Vue项目

CD到指定的目录后运行以下命令，按时提示完成项目的创建。

vue create 项目名

三、安装相关依赖

在项目目录中依次执行如下命令

下载express：npm install express -save

下载cors：npm install cors -save

下载mysql：npm install mysql -save

下载axios：npm install axios -save

下载elementUI：npm install element-ui -save

下载sass：npm install sass -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

以上完成后项目目录看起来应该是这样的：

五、设计用户表

5.1、使用navicat设计user表，字段简要定义如下：

id，

name，

mobile，

idNo，

sex，

5.2、手动插入一条数据。这步的目的是为了验证连接是否成功。

CD到server目录下，运行以下命令来启动服务：

node app.js

5.3、验证api连接服务是否正常

浏览器打开http://127.0.0.1/user，因为我的表包含以下字段，显示如下：

六、业务页面的开发

6.1、注册elementUI组件。在mian.js粘贴以下完整代码：

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

import Element from 'element-ui'
import './assets/styles/element-variables.scss'
import vuePrototype from '@/utils/vuePrototype'

Vue.use(Element)
Vue.use(vuePrototype)

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

6、2修改VUE脚本手架生成的页面，一般叫叫hellowordcomponet，把里面的代码清空，粘贴以下代码：

<template>
  <div>
    <button @click="get()">获取user表数据</button>
  </div>
</template>

<script>
import axios from "axios"
export default {
  data () {
    return {
    };
  },

  methods: {
    get() {
      axios.get('http://127.0.0.1/user').then(res=>{
          console.log(res.data);
      }).catch(err=>{
          console.log("获取数据失败" + err);
      })
    }
  }
}
</script>

不出意外的话，控制台打印数据如下：