Vue整合Node.js直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作過(guò)程詳解

更新時(shí)間：2023年07月18日 10:54:34 作者：豆苗學(xué)前端

這篇文章主要給大家分享Vue整合Node.js，直連Mysql數(shù)據(jù)庫(kù)進(jìn)行CURD操作的詳細(xì)過(guò)程，文中有詳細(xì)的代碼講解，具有一定的參考價(jià)值,需要的朋友可以參考下

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

vue create xxxx

2. 安裝相應(yīng)的依賴

引入需要的模塊（mysql、express、body-parser、cors、vue-resource）

cnpm install mysql --save
cnpm install express --save
cnpm install body-parser --save
cnpm install cors --save
cnpm install vue-resource --save

3.在項(xiàng)目根目錄下創(chuàng)建server文件夾：

3.1 在src目錄下，main.js中使用vue-resource模塊：

// 將vue-resource模塊引入進(jìn)來(lái)，否則this.$http將無(wú)法使用
import VueResource from 'vue-resource'
Vue.use(VueResource);

3.2 在server目錄下，編寫database.js：

// 配置數(shù)據(jù)庫(kù)相關(guān)信息

// 配置數(shù)據(jù)庫(kù)相關(guān)信息
module.exports = {
  mysql: {
    host: "localhost",
    user: "root",
    password: "root",
    database: "test",
    port: 3306
  }
};

3.3 在server目錄下，編寫sql.js：

// 編寫相關(guān)sql語(yǔ)句
let sqlMap = {
  user: {
    // 查詢數(shù)據(jù)
    select: "select * from user where username = ?;",
    // 插入數(shù)據(jù)
    insert: "insert into user values(?,?);",
    // 修改數(shù)據(jù)
    update: "update user set password = ? where username = ?;",
    // 刪除數(shù)據(jù)
    delete: "delete from user where username = ? and password = ?;"
  }
};
// 暴露sqlMap
module.exports = sqlMap;

3.4 在server目錄下，編寫api.js

// 引入database.js文件（配置數(shù)據(jù)庫(kù)相關(guān)信息）
let models = require('./database');
// 引入sql.js文件（編寫相關(guān)sql語(yǔ)句）
let $sql = require('./sql');
// 引入mysql和express模塊
let mysql = require('mysql');
let express = require('express');
let router = express.Router();
// 開始連接數(shù)據(jù)庫(kù)
let conn = mysql.createConnection(models.mysql);
conn.connect();
// 對(duì)JSON字符串進(jìn)行處理
let jsonWrite = function (response, result) {
  if (typeof result === 'undefined') {
    response.json({
      code: '500',
      msg: '操作失敗'
    });
  } else {
    response.json(result);
  }
};
// 查詢數(shù)據(jù)（'/select'）
router.post('/select', (request, response) => {
  // 獲取編寫相關(guān)sql語(yǔ)句
  let sql = $sql.user.select;
  console.log("相關(guān)sql語(yǔ)句：", sql);
  // 獲取請(qǐng)求參數(shù)
  let params = request.body;
  console.log("相關(guān)參數(shù)", params);
  // [params.username]傳參類似mybatis
  conn.query(sql, [params.username], function (error, result) {
    if (error) {
      console.log('網(wǎng)絡(luò)連接異常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
      for (let i = 0; i < result.length; i++) {
        if (result[i].password == params.password) {
          return response.end();
        } else {
          return response.end();
        }
      }
    }
  })
});
// 插入數(shù)據(jù)（'/insert'）
router.post('/insert', (request, response) => {
  // 獲取編寫相關(guān)sql語(yǔ)句
  let sql = $sql.user.insert;
  console.log("相關(guān)sql語(yǔ)句：", sql);
  // 獲取請(qǐng)求參數(shù)
  let params = request.body;
  console.log("相關(guān)參數(shù)", params);
  // [params.username]傳參類似mybatis
  conn.query(sql, [params.username, params.password], function (error, result) {
    if (error) {
      console.log('網(wǎng)絡(luò)連接異常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
    }
  })
});
// 修改數(shù)據(jù)（'/update'）
router.post('/update', (request, response) => {
  // 獲取編寫相關(guān)sql語(yǔ)句
  let sql = $sql.user.update;
  console.log("相關(guān)sql語(yǔ)句：", sql);
  // 獲取請(qǐng)求參數(shù)
  let params = request.body;
  console.log("相關(guān)參數(shù)", params);
  // [params.username]傳參類似mybatis
  conn.query(sql, [params.password, params.username], function (error, result) {
    if (error) {
      console.log('網(wǎng)絡(luò)連接異常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
    }
  })
});
// 刪除數(shù)據(jù)（'/delete'）
router.post('/delete', (request, response) => {
  // 獲取編寫相關(guān)sql語(yǔ)句
  let sql = $sql.user.delete;
  console.log("相關(guān)sql語(yǔ)句：", sql);
  // 獲取請(qǐng)求參數(shù)
  let params = request.body;
  console.log("相關(guān)參數(shù)", params);
  // [params.username]傳參類似mybatis
  conn.query(sql, [params.username, params.password], function (error, result) {
    if (error) {
      console.log('網(wǎng)絡(luò)連接異常:' + error);
    }
    if (result) {
      jsonWrite(response, result);
    }
  })
});
// 暴露router
module.exports = router;

3.5 在serve文件夾下，寫入server.js

// 引入api.js
const userApi = require('./api');
// 引入express模塊
const express = require('express');
const app = express();
// 引入cors模塊，處理跨域問(wèn)題
const cors = require('cors');
app.use(cors());
// 引入body-parser模塊，解析請(qǐng)求過(guò)來(lái)的參數(shù)
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: false}));
// 訪問(wèn)Node服務(wù)端映射地址
app.use('/api', userApi);
// 開始服務(wù)器端口
app.listen(8088);
console.log("服務(wù)器端口開啟成功！");

4. 編寫demo2.vue進(jìn)行交互界面簡(jiǎn)單編寫

// 在路由中引入新demo2.vue頁(yè)面
import demo2 from "@/components/demo2";
{
   path: '/demo2',
   name: 'demo2',
   component: demo2,
}

<template>
  <div style="margin-left: 100px">
    <h3>數(shù)據(jù)庫(kù)增刪改查（CURD操作）</h3>
    <label>用戶名:<input type="text" v-model="username"/></label><br/><br/>
    <label>密碼:<input type="password" v-model="password"/></label><br/><br/>
    <el-button type="primary" @click="selectData">查詢</el-button>
    <el-button type="primary" @click="insertData">增加</el-button>
    <el-button type="primary" @click="updateData">修改</el-button>
    <el-button type="primary" @click="deleteData">刪除</el-button>
  </div>
</template>
<script>
  export default {
    name: "demo2",
    data() {
      return {
        username: '',
        password: '',
      }
    },
    methods: {
      selectData() {
        // 訪問(wèn)node.js服務(wù)端（參數(shù)名稱:要和api.js中[params.屬性名]一致，請(qǐng)求方式也應(yīng)該保持一致）
        this.$http.post('http://localhost:8088/api/select', {
          username: this.username
        }).then(data => {
          if (data.data[0].username == this.username && data.data[0].password == this.password) {
            this.$message({type: 'success', message: "查詢成功"});
          } else {
            this.$message({type: 'warning', message: "查詢失敗"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "網(wǎng)絡(luò)連接異常"});
        });
      },
      insertData() {
        // 訪問(wèn)node.js服務(wù)端（參數(shù)名稱:要和api.js中[params.屬性名]一致，請(qǐng)求方式也應(yīng)該保持一致）
        this.$http.post('http://localhost:8088/api/insert', {
          username: this.username,
          password: this.password
        }).then(data => {
          if (data.data.affectedRows > 0) {
            this.$message({type: 'success', message: "新增成功"});
          } else {
            this.$message({type: 'warning', message: "新增失敗"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "網(wǎng)絡(luò)連接異常"});
        });
      },
      updateData() {
        // 訪問(wèn)node.js服務(wù)端（參數(shù)名稱:要和api.js中[params.屬性名]一致，請(qǐng)求方式也應(yīng)該保持一致）
        this.$http.post('http://localhost:8088/api/update', {
          username: this.username,
          password: this.password
        }).then(data => {
          if (data.data.affectedRows > 0) {
            this.$message({type: 'success', message: "修改成功"});
          } else {
            this.$message({type: 'warning', message: "修改失敗"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "網(wǎng)絡(luò)連接異常"});
        });
      },
      deleteData() {
        // 訪問(wèn)node.js服務(wù)端（參數(shù)名稱:要和api.js中[params.屬性名]一致，請(qǐng)求方式也應(yīng)該保持一致）
        this.$http.post('http://localhost:8088/api/delete', {
          username: this.username,
          password: this.password
        }).then(data => {
          if (data.data.affectedRows > 0) {
            this.$message({type: 'success', message: "刪除成功"});
          } else {
            this.$message({type: 'warning', message: "刪除失敗"});
          }
        }).catch(error => {
          this.$message({type: 'error', message: "網(wǎng)絡(luò)連接異常"});
        });
      }
    }
  }
</script>
<style scoped>
</style>

啟動(dòng)后端