Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的過程詳解
更新時間：2022年05月09日 10:18:46 作者：呦呀
最近在研究vue項目中使用node.js搭建server服務器,鏈接本地mysql數(shù)據(jù)庫,進行數(shù)據(jù)操作,下面這篇文章主要給大家介紹了關于Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的相關資料,需要的朋友可以參考下
Vue項目通過node連接MySQL數(shù)據(jù)庫
1.創(chuàng)建Vue項目
vue create 項目名
Vue項目創(chuàng)建的詳細步驟，有需要的可移步這里
2.下載安裝需要的插件
下載express
npm install express
下載cors，用于處理接口跨域問題
npm install cors
下載mysql
npm install mysql
下載axios
npm install axios
3.在項目中創(chuàng)建server文件夾，用于搭建本地服務器
新建/server/app.js，用于配置服務器相關信息
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('服務器啟動成功');
})
新建/server/db/index.js，用于配置數(shù)據(jù)庫相關信息
let mysql = require('mysql')
let db = mysql.createPool({
host: '127.0.0.1', //數(shù)據(jù)庫IP地址
user: 'root', //數(shù)據(jù)庫登錄賬號
password: 'root', //數(shù)據(jù)庫登錄密碼
database: 'test' //要操作的數(shù)據(jù)庫
})
module.exports = db新建/server/API/user.js，用于操作數(shù)據(jù)庫
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('錯誤：' + err.message)
}
res.send(data)
})
}新建/server/router.js，用于配置對應路由
let express = require('express')
let router = express.Router()
let user = require('./API/user')
router.get('/user', user.get)
module.exports = router
在/server/app.js中導入路由配置
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('服務器啟動成功');
})
測試服務器是否搭建成功
server文件夾下執(zhí)行
node app.js
提示“服務器啟動成功”，瀏覽器打開http://127.0.0.1/user，可看見user數(shù)據(jù)表中對應的數(shù)據(jù)，表示服務器搭建成功。
4.Vue項目訪問接口獲取數(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é)果
注意：運行項目前，一定要先啟動服務器，只有服務器啟動之后，接口才能被調(diào)用，所以需要打開兩個終端，分別用于啟動服務器和項目
數(shù)據(jù)表的增刪改查操作
1.服務器配置
新建/server/API/list.js，用于存放列表相關操作
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('錯誤：' + err.message)
}
res.send(data)
})
}
exports.get = (req, res) => { //通過id查詢數(shù)據(jù)
var sql = 'select * from info where id = ?' //？用于占位
db.query(sql, [req.query.id], (err, data) => {
if(err) {
return res.send('錯誤：' + err.message)
}
res.send(data)
})
}
exports.del = (req, res) => { //通過id刪除數(shù)據(jù)
var sql = 'delete from info where id = ?'
db.query(sql, [req.query.id], (err, data) => {
if(err) {
return res.send('錯誤：' + 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('錯誤：' + err.message)
}
res.send(data)
})
}
exports.update = (req, res) => { //通過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('錯誤：' + err.message)
}
res.send(data)
})
}
在/server/router.js中配置對應路由
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.前端配置 頁面樣式
（本人懶得寫樣式了，隨便看看就好_(:з」∠)_）
注意：此處的頁面搭建本人使用了elementUI組件，CV前要先下載elementUI
在終端執(zhí)行 npm i element-ui -S ，同時在main.js中導入注冊即可
<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="請輸入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="請輸入id" class="input"></el-input>
<el-input v-model="name" placeholder="請輸入姓名" class="input"></el-input>
<el-input v-model="address" placeholder="請輸入地址" class="input"></el-input>
<el-input v-model="tel" placeholder="請輸入電話" 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>
對應的實現(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實現(xiàn)數(shù)據(jù)表增刪改查
再補充一點：get請求傳參數(shù)據(jù)存放在req.query中；post請求傳參數(shù)據(jù)存放在req.body中。
文章中只展示了get請求，所以在此特別補充說明一下
具體可參見vue登錄注冊案例，其中的登錄使用的是get請求，注冊使用的是post請求
文中的內(nèi)容都是一些相當基礎的知識，希望大家可以在看懂理解的基礎上多敲代碼，這樣才能有所進步（雖然cv真的很快樂）
總結(jié)
到此這篇關于Vue項目通過node連接MySQL數(shù)據(jù)庫并實現(xiàn)增刪改查操作的文章就介紹到這了,更多相關Vue node連接MySQL并增刪改查內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
這篇文章主要介紹了vue緩存組件keepalive的相關資料,keep-alive組件是使用 include exclude這兩個屬性傳入組件名稱來確認哪些可以被緩存的，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-08-08
這篇文章主要介紹了vue異步加載高德地圖的實現(xiàn)，詳細的介紹了異步加載的實現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
因為不同的用戶有不同的權限,能訪問的頁面是不一樣的,所以我們在寫后臺管理系統(tǒng)時就會遇過這樣的需求：根據(jù)后臺數(shù)據(jù)動態(tài)添加路由和菜單，這篇文章主要給大家介紹了關于vue配置文件自動生成路由和菜單的相關資料,需要的朋友可以參考下2021-08-08
在Vue中,路由攔截器主要用于在導航到某個路由前或者離開某個路由時進行攔截和處理,下面給大家介紹vue中的路由攔截器的作用,感興趣的朋友一起看看吧2024-07-07
這篇文章主要介紹了vue配置文件實現(xiàn)代理v2版本的方法，本文給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue使用video.js實現(xiàn)播放m3u8格式的視頻
這篇文章主要為大家詳細介紹了vue如何使用video.js實現(xiàn)播放m3u8格式的視頻,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2023-12-12
這篇文章主要介紹了vue中使用微信jssdk，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
這篇文章主要為大家介紹了Vue生命周期中的八個鉤子函數(shù)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)
這篇文章主要給大家介紹了關于vue中動態(tài)出來返回的時間秒數(shù)(在多少秒顯示分、小時等等)的相關資料,文中通過代碼示例介紹的非常詳細,對大家學習或者工作具有一定的參考借鑒價值,需要的朋友可以參考下2024-01-01
CodeMirror提供了強大的代碼編輯功能,而Vue.js使得組件的創(chuàng)建和數(shù)據(jù)綁定變得非常簡單,當用戶編輯代碼時,實時預覽會根據(jù)代碼的變化進行更新,從而為用戶提供了一個交互式的編程環(huán)境,這篇文章主要介紹了Vue中如何進行代碼編輯器與實時預覽,需要的朋友可以參考下2023-10-10