快捷導(dǎo)航

vue實(shí)現(xiàn)直連mysql的方法步驟

更新時(shí)間：2024年11月21日 10:09:21 作者：zhaocarbon

Vue.js通常運(yùn)行在瀏覽器環(huán)境,而瀏覽器不允許直接與MySQL數(shù)據(jù)庫進(jìn)行連接,本文主要介紹了vue實(shí)現(xiàn)直連mysql的方法步驟,感興趣的可以了解一下

最近又搞了個(gè)小項(xiàng)目，單機(jī)版本的內(nèi)部考勤管理系統(tǒng)，直接部署在對方的工作電腦上，不需要在云端部署，因?yàn)轫?xiàng)目本身就小，我就沒配置后端同事進(jìn)行開發(fā)，而是通過VUE直連mysql進(jìn)行業(yè)務(wù)開發(fā)及保存。后期再通過PM2來守護(hù)頁面及服務(wù)，隨時(shí)打開使用。

下面來復(fù)盤一下整體開發(fā)過程。

一、mysql及navicat的安裝

1、mysql的安裝

前往官方網(wǎng)站下載安裝，點(diǎn)擊連接->mysql下載及安裝官網(wǎng)

需求說明的是，這里下載使用5.7.44的版本，8.0及9.0連接機(jī)制有所調(diào)整，會增加額外的一些配置。這里就不再討論展開。

下載后的步驟一路默認(rèn)進(jìn)行即可。安裝完成后配置環(huán)境變量即可。安裝過程中需要輸入root的密碼，設(shè)置時(shí)記錄好后面連接服務(wù)要用。

2、navicat的安裝

網(wǎng)上自行找哈，這里也不展開，后期用于設(shè)計(jì)表。

二、創(chuàng)建Vue項(xiàng)目

CD到指定的目錄后運(yùn)行以下命令，按時(shí)提示完成項(xiàng)目的創(chuàng)建。

vue create 項(xiàng)目名

三、安裝相關(guān)依賴

在項(xiàng)目目錄中依次執(zhí)行如下命令

下載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

等，所有依賴如下，自行查看并安裝即可

四、在項(xiàng)目中創(chuàng)建server文件夾，用于搭建本地服務(wù)器。

4.1、在server文件下創(chuàng)建app.js文件，粘貼以下內(nèi)容。此為api連接服務(wù)。

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('服務(wù)器啟動(dòng)成功');
})

4.2、在server文件下創(chuàng)建db文件夾，并在db文件夾下創(chuàng)建index.js文件，粘貼以下內(nèi)容。此為mysql連接服務(wù)。注意數(shù)據(jù)庫名及密碼，密碼即1.1步設(shè)置的ROOT密碼，我創(chuàng)建的庫名叫oadb，你創(chuàng)建的叫什么就寫什么。不要寫為user哦，user是表名不是庫名，一個(gè)庫里面有多個(gè)表，注意關(guān)系區(qū)分。

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文件夾下創(chuàng)建api文件夾，并在api文件夾下創(chuàng)建user.js，用于操作數(shù)據(jù)庫。注意此為示例，這里也僅供部分功能，其他業(yè)務(wù)邏輯功能暫不示例。all方法在API路由表中定義的是get方式，所以取參是req.query.xxx，而del和update方法是POST方法，取參是req.body.xxx,自己注意區(qū)分。

let db = require("../db/index");

exports.all = (req, res) => {
    var sql =
        "select * from t_user";
    db.query(sql, [], (err, data) => {
        if (err) {
            console.log("出錯(cuò)了", err);
            return res.send("錯(cuò)誤" + 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("出錯(cuò)了", err);
            return res.send("錯(cuò)誤" + 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("出錯(cuò)了", err);
                return res.send("錯(cuò)誤" + err);
            }
            res.send(data);
        }
    );
};

4.4、在server文件夾下創(chuàng)建router.js，用于配置對應(yīng)api路由，這個(gè)文件管理著所有接口及請求方式，將api與相應(yīng)的表操作類進(jìn)行關(guān)聯(lián)。代碼如下：

let express = require('express')
let router = express.Router()

let user = require('./api/user')

//用戶相關(guān)，get方法
router.get('/user/all',user.all)
//post方法
router.post('/user/del',user.del)
router.post('/user/update',user.update)


module.exports = router

以上完成后項(xiàng)目目錄看起來應(yīng)該是這樣的：

五、設(shè)計(jì)用戶表

5.1、使用navicat設(shè)計(jì)user表，字段簡要定義如下：

id，
name，
mobile，
idNo，
sex，

5.2、手動(dòng)插入一條數(shù)據(jù)。這步的目的是為了驗(yàn)證連接是否成功。

CD到server目錄下，運(yùn)行以下命令來啟動(dòng)服務(wù)：

node app.js

5.3、驗(yàn)證api連接服務(wù)是否正常

瀏覽器打開http://127.0.0.1/user，因?yàn)槲业谋戆韵伦侄?，顯示如下：

六、業(yè)務(wù)頁面的開發(fā)

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表數(shù)據(jù)</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("獲取數(shù)據(jù)失敗" + err);
      })
    }
  }
}
</script>

不出意外的話，控制臺打印數(shù)據(jù)如下：