Vue項(xiàng)目通過(guò)node連接MySQL數(shù)據(jù)庫(kù)并實(shí)現(xiàn)增刪改查操作的過(guò)程詳解

更新時(shí)間：2022年05月09日 10:18:46 作者：呦呀

最近在研究vue項(xiàng)目中使用node.js搭建server服務(wù)器,鏈接本地mysql數(shù)據(jù)庫(kù),進(jìn)行數(shù)據(jù)操作,下面這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目通過(guò)node連接MySQL數(shù)據(jù)庫(kù)并實(shí)現(xiàn)增刪改查操作的相關(guān)資料,需要的朋友可以參考下

Vue項(xiàng)目通過(guò)node連接MySQL數(shù)據(jù)庫(kù)

1.創(chuàng)建Vue項(xiàng)目

vue create 項(xiàng)目名

Vue項(xiàng)目創(chuàng)建的詳細(xì)步驟，有需要的可移步這里

2.下載安裝需要的插件

下載express

npm install express

下載cors，用于處理接口跨域問(wèn)題

npm install cors

下載mysql

npm install mysql

下載axios

npm install axios

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

新建/server/app.js，用于配置服務(wù)器相關(guān)信息

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')

app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的數(shù)據(jù)
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域，必須在路由之前

app.listen(80, () => {
    console.log('服務(wù)器啟動(dòng)成功');
})

新建/server/db/index.js，用于配置數(shù)據(jù)庫(kù)相關(guān)信息

let mysql = require('mysql')

let db = mysql.createPool({
    host: '127.0.0.1',     //數(shù)據(jù)庫(kù)IP地址
    user: 'root',          //數(shù)據(jù)庫(kù)登錄賬號(hào)
    password: 'root',      //數(shù)據(jù)庫(kù)登錄密碼
    database: 'test'       //要操作的數(shù)據(jù)庫(kù)
})

module.exports = db

新建/server/API/user.js，用于操作數(shù)據(jù)庫(kù)

let db = require('../db/index')

exports.get = (req, res) => {
    var sql = 'select * from user'
    db.query(sql, [req.query.name, req.query.password], (err, data) => {
        if(err) {
            return res.send('錯(cuò)誤：' + err.message)
        }
        res.send(data)
    })
}

新建/server/router.js，用于配置對(duì)應(yīng)路由

let express = require('express')
let router = express.Router()
let user = require('./API/user')

router.get('/user', user.get)

module.exports = router

在/server/app.js中導(dǎo)入路由配置

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')

app.use(bodyParser.json());  //配置解析，用于解析json和urlencoded格式的數(shù)據(jù)
app.use(bodyParser.urlencoded({extended: false}));
app.use(cors())              //配置跨域
app.use(router)              //配置路由

app.listen(80, () => {
    console.log('服務(wù)器啟動(dòng)成功');
})

測(cè)試服務(wù)器是否搭建成功

server文件夾下執(zhí)行

node app.js

提示“服務(wù)器啟動(dòng)成功”，瀏覽器打開(kāi)http://127.0.0.1/user，可看見(jiàn)user數(shù)據(jù)表中對(duì)應(yīng)的數(shù)據(jù)，表示服務(wù)器搭建成功。

4.Vue項(xiàng)目訪問(wèn)接口獲取數(shù)據(jù)

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

執(zhí)行結(jié)果

注意：運(yùn)行項(xiàng)目前，一定要先啟動(dòng)服務(wù)器，只有服務(wù)器啟動(dòng)之后，接口才能被調(diào)用，所以需要打開(kāi)兩個(gè)終端，分別用于啟動(dòng)服務(wù)器和項(xiàng)目

數(shù)據(jù)表的增刪改查操作

1.服務(wù)器配置

新建/server/API/list.js，用于存放列表相關(guān)操作

let db = require('../db/index')

exports.all = (req, res) => {        //獲取info表全部數(shù)據(jù)
    var sql = 'select * from info'
    db.query(sql, (err, data) => {
        if(err) {
            return res.send('錯(cuò)誤：' + err.message)
        }
        res.send(data)
    })
}
exports.get = (req, res) => {        //通過(guò)id查詢數(shù)據(jù)
    var sql = 'select * from info where id = ?'    //？用于占位
    db.query(sql, [req.query.id], (err, data) => {
        if(err) {
            return res.send('錯(cuò)誤：' + err.message)
        }
        res.send(data)
    })
}

exports.del = (req, res) => {        //通過(guò)id刪除數(shù)據(jù)
    var sql = 'delete from info where id = ?'
    db.query(sql, [req.query.id], (err, data) => {
        if(err) {
            return res.send('錯(cuò)誤：' + err.message)
        }
        res.send(data)
    })
}

exports.add = (req, res) => {        //向info表添加數(shù)據(jù)
    var sql = 'insert into info (id,name,address,tel) values (?,?,?,?)'
    db.query(sql, [req.query.id, req.query.name, req.query.address, req.query.tel], (err, data) => {
        if(err) {
            return res.send('錯(cuò)誤：' + err.message)
        }
        res.send(data)
    })
}

exports.update = (req, res) => {        //通過(guò)id更新數(shù)據(jù)
    var sql = 'update info set name = ?, address = ?, tel = ? where id = ?'
    db.query(sql, [req.query.name, req.query.address, req.query.tel, req.query.id], (err, data) => {
        if(err) {
            return res.send('錯(cuò)誤：' + err.message)
        }
        res.send(data)
    })
}

在/server/router.js中配置對(duì)應(yīng)路由

let express = require('express')
let router = express.Router()
let user= require('./API/user')
let info = require('./API/list')

router.get('/user', user.get)
router.get('/list/all', info.all)
router.get('/list/get', info.get)
router.get('/list/add', info.add)
router.get('/list/update', info.update)
router.get('/list/del', info.del)

module.exports = router

2.前端配置頁(yè)面樣式

（本人懶得寫(xiě)樣式了，隨便看看就好_(:з」∠)_）

注意：此處的頁(yè)面搭建本人使用了elementUI組件，CV前要先下載elementUI
在終端執(zhí)行 npm i element-ui -S ，同時(shí)在main.js中導(dǎo)入注冊(cè)即可

<template>
  <div id="box">
    <div class="left">
      <el-button type="primary" @click="all">獲取info表的全部數(shù)據(jù)</el-button>
      <h2>-----------------------------------</h2>
      <el-input v-model="id" placeholder="請(qǐng)輸入id" class="input"></el-input>
      <el-button type="danger" @click="del">刪除</el-button>
      <el-button type="primary" @click="get">查詢</el-button>
      <h2>-----------------------------------</h2>
      <el-input v-model="id" placeholder="請(qǐng)輸入id" class="input"></el-input>
      <el-input v-model="name" placeholder="請(qǐng)輸入姓名" class="input"></el-input>
      <el-input v-model="address" placeholder="請(qǐng)輸入地址" class="input"></el-input>
      <el-input v-model="tel" placeholder="請(qǐng)輸入電話" class="input"></el-input>
      <el-button type="primary" @click="add">添加</el-button>
      <el-button type="primary" @click="updata">修改</el-button>
    </div>
    <div class="right">
      <table class="hovertable">
        <tr>
          <th>ID</th><th>姓名</th><th>家庭住址</th><th>聯(lián)系電話</th>
        </tr>
        <tr v-for="(item, index) in info"  v-bind:key="index">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.address}}</td>
          <td>{{item.tel}}</td>
        </tr>
      </table>
    </div>
  </div>
</template>

對(duì)應(yīng)的實(shí)現(xiàn)函數(shù)

<script>
import axios from "axios"
export default {
  data () {
    return {
      id: '',
      name: '',
      address: '',
      tel: '',
      info: []
    };
  },
  methods: {
    all() {    //查找info表全部數(shù)據(jù)
      axios.get('http://127.0.0.1/list/all').then(res=>{
          // console.log(res.data);
          this.info = res.data
      }).catch(err=>{
          console.log("獲取數(shù)據(jù)失敗" + err);
      })
    },
    del() {    //刪除操作
      axios.get('http://127.0.0.1/list/del',{
        params: {
          id: this.id
        }
      }).then(res=>{
          // console.log(res.data);
          this.all()
      }).catch(err=>{
          console.log("操作失敗" + err);
      })
    },
    get() {    //查詢操作
      axios.get('http://127.0.0.1/list/get',{
        params: {
          id: this.id
        }
      }).then(res=>{
          // console.log(res.data);
          this.info = res.data
      }).catch(err=>{
          console.log("獲取數(shù)據(jù)失敗" + err);
      })
    },
    add() {   //添加操作
      axios.get('http://127.0.0.1/list/add',{
        params: {
          id: this.id,
          name: this.name,
          address: this.address,
          tel: this.tel
        }
      }).then(res=>{
          // console.log(res.data);
          this.all()
      }).catch(err=>{
          console.log("獲取數(shù)據(jù)失敗" + err);
      })
    },
    update() {     //修改操作
      axios.get('http://127.0.0.1/list/update',{
        params: {
          id: this.id,
          name: this.name,
          address: this.address,
          tel: this.tel
        }
      }).then(res=>{
          // console.log(res.data);
          this.all()
      }).catch(err=>{
          console.log("獲取數(shù)據(jù)失敗" + err);
      })
    }
  }
}
</script>

效果展示

vue+mysql+node實(shí)現(xiàn)數(shù)據(jù)表增刪改查

再補(bǔ)充一點(diǎn)：get請(qǐng)求傳參數(shù)據(jù)存放在req.query中；post請(qǐng)求傳參數(shù)據(jù)存放在req.body中。
文章中只展示了get請(qǐng)求，所以在此特別補(bǔ)充說(shuō)明一下
具體可參見(jiàn)vue登錄注冊(cè)案例，其中的登錄使用的是get請(qǐng)求，注冊(cè)使用的是post請(qǐng)求

文中的內(nèi)容都是一些相當(dāng)基礎(chǔ)的知識(shí)，希望大家可以在看懂理解的基礎(chǔ)上多敲代碼，這樣才能有所進(jìn)步（雖然cv真的很快樂(lè)）

總結(jié)

到此這篇關(guān)于Vue項(xiàng)目通過(guò)node連接MySQL數(shù)據(jù)庫(kù)并實(shí)現(xiàn)增刪改查操作的文章就介紹到這了,更多相關(guān)Vue node連接MySQL并增刪改查內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: