vue項(xiàng)目使用node連接數(shù)據(jù)庫(kù)的方法(前后端分離)
學(xué)習(xí)關(guān)鍵語(yǔ)句:
vue連接mysql數(shù)據(jù)庫(kù)
vue項(xiàng)目連接后臺(tái)數(shù)據(jù)庫(kù)配置
vue通過(guò)node連接MySQL數(shù)據(jù)庫(kù)
寫(xiě)在前面
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫(kù)進(jìn)行交互的方法,所以趕緊寫(xiě)一篇這樣的文章出來(lái),如果你對(duì)這篇文章中提到的內(nèi)容有所疑惑,請(qǐng)飛快的將你的疑惑輸入到下方評(píng)論區(qū)中!
另外一個(gè)真實(shí)原因是我在做這個(gè)練習(xí)時(shí)很難找到完整的教學(xué)性文章 , 所以決定分享一下經(jīng)驗(yàn)
注意:本文在2022/8/16號(hào)已進(jìn)行完善,此次完善的內(nèi)容如下
- 變?yōu)楦险鎸?shí)項(xiàng)目的目錄結(jié)構(gòu)
- axios請(qǐng)求二次封裝
- 前端跨域處理完善
文章末尾附帶本文項(xiàng)目文件鏈接
對(duì)于搜索自己?jiǎn)栴}找到這篇文章的網(wǎng)友,可以參考右邊的菜單目錄快速定位到你可能想找的內(nèi)容
編寫(xiě)順序
- 編寫(xiě)前端頁(yè)面
- 編寫(xiě)后端node服務(wù)器
- 編寫(xiě)node連接數(shù)據(jù)庫(kù)
- 編寫(xiě)數(shù)據(jù)庫(kù)交互
- 編寫(xiě)前后端交互
開(kāi)始
1.編寫(xiě)前端頁(yè)面
這里使用vue2腳手架快速搭建項(xiàng)目
vue create node-app
選擇 babel, router即可
建立好之后如下圖

刪除無(wú)需內(nèi)容
APP.vue
只保留路由切換

Home.vue 和 About.vue 全部清空,重新建立vue文件模板(template + script + style)
制作登錄頁(yè)和首頁(yè)
將 Home.vue 當(dāng)做登錄頁(yè)面, About.vue當(dāng)做首頁(yè),這樣就不用麻煩配置路由了,當(dāng)做演示就很方便
登錄頁(yè)
登錄頁(yè)的功能需求 : 輸入賬號(hào)密碼完成登錄操作,并根據(jù)登錄情況給出響應(yīng)提示
制作登錄頁(yè)面, 放置兩個(gè) input 輸入框和一個(gè) button 按鈕,并給上最基本的樣式
Home.vue
<template>
<div class="home">
用戶名 <input type="text" v-model="form.username" /><br />
秘密碼 <input type="password" v-model="form.password" /><br />
<button @click="login">登錄</button>
</div>
</template>
<script>
export default {
name: 'Home',
data() {
return {
form: {
username: '',
password: ''
}
}
},
methods: {
login() {
}
}
}
</script>
<style>
* {
margin: 5px;
padding: 5px;
}
button {
width: 50px;
height: 30px;
}
</style>

首頁(yè)
首頁(yè)就用來(lái)修改密碼好了, 修改保存在數(shù)據(jù)庫(kù)中的密碼
首頁(yè)功能需求 : 修改用戶密碼 , 查看用戶個(gè)人信息
About.vue
<template>
<div style="display:flex">
<div>
用戶名:<input type='text' v-model='form.username' /><br />
新密碼:<input type='text' v-model='form.newPassword' /><br />
新密碼:<input type='text' v-model='form.rePassword' /><br />
<button @click='update'>確認(rèn)</button>
<button @click='getUser'>查詢</button>
</div>
<div class="div2" v-if="userInfo.nickname">
<h3>用戶信息</h3>
<div>
昵稱(chēng):{{userInfo.nickname}}
</div>
<div v-if="userInfo.gender != '無(wú)'">
性別:{{userInfo.gender}}
</div>
<div v-if="userInfo.age != ''">
年齡:{{userInfo.age}}
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
form: {
username: '',
newPassword: '',
rePassword: ''
},
userInfo: {}
}
},
methods: {
getUser() {
},
update() {
}
}
}
</script>
<style>
</style>

到這里,前端頁(yè)面除了交互以外就已經(jīng)完成了
接下來(lái)我們來(lái)編寫(xiě)后端 node服務(wù)器
2.制作后端 node 服務(wù)器
初始化項(xiàng)目
新建文件夾, 起名為 node-server , 新建文件 app.js , 在終端中初始化項(xiàng)目
npm init npm i
完成之后 node-server 文件夾中會(huì)出現(xiàn)以下目錄

編寫(xiě) app.js
我們想要制作服務(wù)器, 這里使用 express 來(lái)實(shí)現(xiàn)
npm i --save express
當(dāng)然了, 我們還需要解決跨域問(wèn)題, 這里使用 cors 來(lái)解決
npm i --save cors
現(xiàn)在我們來(lái)考慮前端傳參問(wèn)題
對(duì)于get請(qǐng)求,其參數(shù)是直接拼接在url后面的,解析也相對(duì)容易。在express框架中,get請(qǐng)求的參數(shù)全部都被放置在了request對(duì)象的query中。
post請(qǐng)求有多種形式可以發(fā)送數(shù)據(jù),這取決于post請(qǐng)求的請(qǐng)求頭Content-type的內(nèi)容,常見(jiàn)的有三種:
- multipart/form-data
- application/x-www-form-urlencoded
- application/json
為此,我們引入中間件來(lái)解決讀取參數(shù)的問(wèn)題
這里使用 body-parser 和 connect-multiparty 來(lái)解決
npm i --save body-parser
npm i --save connect-multiparty
接下來(lái)編寫(xiě) app.js 文件
app.js
// 導(dǎo)入 express
const express = require('express')
// 創(chuàng)建 app
const app = express()
// 設(shè)置跨域訪問(wèn)
const cors = require('cors')
app.use(cors())
// 處理POST參數(shù)
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
// 處理 x-www-form-urlencoded
app.use(bodyParser.urlencoded({
extended:true
}));
// 處理 application/json
app.use(bodyParser.json())
// 處理 mutipart/form-data
app.use(multiparty())
// 測(cè)試接口能否正常調(diào)用
app.get('/info', (req, res) => {
res.send("Hello shaoyahu !")
})
// 啟動(dòng)
app.listen(3000, () => {
console.log('express server running at http://127.0.0.1:' + 3000);
})接下來(lái)我們?cè)诳刂婆_(tái)使用 node 命令就可以啟動(dòng)服務(wù)器了
node app.js
最先看到控制臺(tái)打印了消息

接下來(lái)我們?cè)跒g覽器中打開(kāi)看一看效果

太棒了 ! 我們已經(jīng)完成了最簡(jiǎn)單的接口
3.編寫(xiě) node 連接數(shù)據(jù)庫(kù)
編寫(xiě) mysql.js 文件
我們?cè)?node-server 文件夾下新建文件 mysql.js
首先, 我們需要安裝 mysql
本機(jī)安裝
本機(jī)安裝 mysql 服務(wù)請(qǐng)參考其他文章 , 這里不做詳細(xì)介紹 , 大致行動(dòng)為 : 下載安裝包 , 點(diǎn)擊安裝 , 配置
安裝 mysql 依賴(lài)
npm i --save mysql
編寫(xiě) mysql.js 文件
mysql.js
let mysql = require('mysql')
const db_config = {
host: 'localhost',
user: '請(qǐng)輸入你自己的賬號(hào), 一般為 root',
password: '請(qǐng)輸入你自己的密碼, 一般也為 root',
port: "3306",// 默認(rèn)使用3306端口號(hào)
database: 'node_app'// 使用你自己創(chuàng)建的數(shù)據(jù)庫(kù)名稱(chēng),我這里使用 node_app
}
// 進(jìn)行數(shù)據(jù)庫(kù)交互
function conMysql(sql) {
let connect = mysql.createConnection(db_config)
// 開(kāi)始鏈接數(shù)據(jù)庫(kù)
connect.connect(function (err) {
if (err) {
console.log(`mysql連接失敗: ${err}!`)
} else {
console.log('mysql連接成功!')
}
})
// 返回一個(gè)Promise承諾對(duì)象
return new Promise((resolve, reject) => {
connect.query(sql, (err, result) => {
if (err) {
reject(err)
} else {
// 此處需要將返回?cái)?shù)據(jù)轉(zhuǎn)為JSON再轉(zhuǎn)回來(lái),否則原數(shù)據(jù)不為任何數(shù)據(jù)類(lèi)型
let res = JSON.parse(JSON.stringify(result))
closeMysql(connect)
resolve(res)
}
});
})
}
// 查詢成功后關(guān)閉mysql
function closeMysql(connect) {
connect.end((err) => {
if (err) {
console.log(`mysql關(guān)閉失敗:${err}!`)
} else {
console.log('mysql關(guān)閉成功!')
}
})
}
// 導(dǎo)出方法
exports.conMysql = conMysql
測(cè)試數(shù)據(jù)庫(kù)連接
我們?cè)跀?shù)據(jù)庫(kù)中新建一張表 userinfo , 里面提前插入兩條數(shù)據(jù)

繼續(xù)編寫(xiě) app.js 文件獲取這兩條數(shù)據(jù)
app.js
在原有的基礎(chǔ)上新增一個(gè)接口 , 位置放在 /info 下就可以
// 引入 mysql 方法
let { conMysql } = require('./mysql')
// 獲取全部用戶信息,測(cè)試數(shù)據(jù)庫(kù)連接的上不上
app.get('/getUser', (req, res) => {
let sql = 'select * from userinfo'
conMysql(sql).then(result => {
res.send(result)
})
})同樣我們?cè)跒g覽器中打開(kāi)

測(cè)試成功 !
4.實(shí)現(xiàn)登錄、修改密碼和獲取用戶信息接口
接下來(lái)就是最重要的部分了 , 我們來(lái)實(shí)現(xiàn)登錄、修改密碼和獲取用戶信息的接口 , 同樣的里面還包含了數(shù)據(jù)庫(kù)的交互
但是 , 在此之前 , 我們先來(lái)統(tǒng)一返回的數(shù)據(jù)格式
app.js
我們創(chuàng)建一個(gè)類(lèi)來(lái)返回?cái)?shù)據(jù)
// 創(chuàng)建統(tǒng)一的返回報(bào)文對(duì)象
class Response {
constructor(isSucceed, msg, code, data) {
this.isSucceed = isSucceed;
this.msg = msg;
this.code = code;
this.data = data;
}
}登錄
app.js
登錄方法我們使用 post 請(qǐng)求,想來(lái)沒(méi)人希望自己的賬號(hào)密碼被人一眼看見(jiàn)吧
// 登錄
app.post('/login', (req, res) => {
let sql = `select * from userinfo where username = '${req.body.username}'`
conMysql(sql).then(result => {
if (result[0].password === req.body.password) {
let response = new Response(true, '登錄成功', 200, result)
res.send(response)
} else {
let response = new Response(false, '用戶名或密碼錯(cuò)誤', 400)
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
})
})其中 , res.send() 方法默認(rèn)返回狀態(tài)碼為 200 , 可以通過(guò)增加調(diào)用 .status() 方法返回想要返回的狀態(tài)碼
修改密碼
app.js
修改密碼我們使用 post 請(qǐng)求
// 修改密碼
app.post('/updatePassword', (req, res) => {
let sql = `update userinfo set password = '${req.body.newPassword}' where username = '${req.body.username}'`
conMysql(sql).then(result => {
if (result.affectedRows == 1) {
let response = new Response(true, '修改成功', 200, result)
res.send(response)
} else {
let response = new Response(false, '修改失敗,請(qǐng)稍后重試', 400)
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
})
})獲取用戶個(gè)人信息
app.js
獲取用戶個(gè)人信息我們使用 get 請(qǐng)求
// 獲取當(dāng)前用戶信息
app.get('/getUserInfo', (req, res) => {
let sql = `select * from userinfo where username = '${req.query.username}'`
conMysql(sql).then(result => {
let response = new Response(true, '獲取成功', 200, result)
res.send(response)
}).catch(err => {
res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
})
})這樣一來(lái) , 我們登錄、修改密碼和獲取個(gè)人信息都已經(jīng)完成了 , 接下來(lái)只需要完成前后端交互就可以了 , 很顯然的是 , 接下來(lái)的事應(yīng)該是由前端開(kāi)發(fā)來(lái)完成了 , 所有如果有哪位有意向于前端開(kāi)發(fā)的朋友閱讀到這里 , 就可以嘗試自己動(dòng)手完成接下來(lái)的工作了
5.完成前后端交互
前后端交互我們使用 axios
安裝依賴(lài)
$ npm i --save axios
二次封裝axios和請(qǐng)求
在src同級(jí)目錄下新建文件 axios.js

打開(kāi)axios.js文件,我們進(jìn)行簡(jiǎn)單封裝
axios.js
進(jìn)行簡(jiǎn)單的封裝,不添加攔截器
為了簡(jiǎn)潔,同時(shí)相同請(qǐng)求地址的域名都是相同的,我們就可以將域名提出來(lái)統(tǒng)一放在最前面
const axios = require('axios')
const service = axios.create({
baseURL: 'http://localhost:3000'
})
export default service接下來(lái)進(jìn)行請(qǐng)求的封裝
在src目錄下新建 api 文件夾同時(shí)在該文件夾下新增文件 user.js 專(zhuān)門(mén)存放和用戶有關(guān)的接口請(qǐng)求

我們?cè)?user.js 中封裝三個(gè)方法,分別是登錄,修改密碼和查看個(gè)人信息
user.js
import axios from '../../axios'
// 用戶登錄
export function userLogin(data) {
return axios.post(`/login`, data)
}
// 修改密碼
export function updatePassword(data) {
return axios.post('/updatePassword', data)
}
// 獲取用戶信息
export function getUserInfo(username){
return axios.get('/getUserInfo?username=' + username)
}當(dāng)然了,前端也是會(huì)遇到跨域問(wèn)題的,我們這里使用代理服務(wù)器來(lái)解決跨域問(wèn)題
在src同級(jí)目錄下新增 vue.config.js 文件
vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
},
},
}
}由于我們將所有的 /api 都使用域名進(jìn)行重寫(xiě)
所以我們?cè)賮?lái)修改 axios.js 文件
axios.js
const axios = require('axios')
const service = axios.create({
baseURL: '/api'
})
export default service好了這樣一來(lái)我們和發(fā)送請(qǐng)求相關(guān)的文件便寫(xiě)好了,現(xiàn)在要去寫(xiě)交互頁(yè)面了
添加登錄功能
Home.vue
首先需要引入請(qǐng)求方法
import { userLogin } from '../api/user'再只需要對(duì)上面的 login 方法進(jìn)行補(bǔ)充就可以了
login() {
userLogin(this.form)
.then((res) => {
alert(res.data.msg)
this.$router.push('about')
})
.catch((err) => {
alert(err.response.data.msg)
})
}這樣就可以完成登錄功能了 , 接下來(lái)我們來(lái)處理修改密碼
添加修改密碼功能
About.vue
首先需要引入請(qǐng)求方法
import { updatePassword, getUserInfo } from '../api/user'再只需要對(duì)上面的 update 和 getUser 方法進(jìn)行補(bǔ)充就可以了
getUser() {
getUserInfo(this.form.username).then(res => {
this.userInfo = res.data.data[0]
}).catch((err) => {
console.log(err)
})
},
update() {
if (
this.form.username == '' ||
this.form.newPassword == '' ||
this.form.rePassword == ''
) {
alert('數(shù)據(jù)不能為空')
return
}
updatePassword(this.form)
.then((res) => {
alert(res.data.msg)
this.$router.push('/')
alert('修改密碼后請(qǐng)重新登錄')
})
.catch((err) => {
alert(err.response.data.msg)
})
}結(jié)束
如此一來(lái) , 一個(gè)簡(jiǎn)單的前后端分離的項(xiàng)目就是有了雛形 , 雖然實(shí)現(xiàn)的功能非常簡(jiǎn)陋 , 但能讓我在 js 這條路上再進(jìn)一步 , 就是說(shuō)非常高興了
如果你對(duì)文中的內(nèi)容有所疑惑或者覺(jué)得不對(duì)勁 , 請(qǐng)趕快到評(píng)論區(qū)給我留言 , 千萬(wàn)別耽誤了
文件鏈接
最后附上文件鏈接: https://dyyidc.jb51.net/202212/yuanma/vue_node_270703_jb51.rar
到此這篇關(guān)于vue項(xiàng)目使用node連接數(shù)據(jù)庫(kù)(前后端分離)的文章就介紹到這了,更多相關(guān)vue使用node連接數(shù)據(jù)庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問(wèn)題
這篇文章主要介紹了vue定時(shí)器清除不掉,導(dǎo)致功能頻繁執(zhí)行問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-06-06
淺談vue-cli加載不到dev-server.js的解決辦法
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
vue 如何從單頁(yè)應(yīng)用改造成多頁(yè)應(yīng)用
這篇文章主要介紹了vue 如何從單頁(yè)應(yīng)用改造成多頁(yè)應(yīng)用,幫助大家更好的理解和使用vue,感興趣的朋友可以了解下2020-10-10
Vue之解決Echarts組件使用ID不能復(fù)用的問(wèn)題
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復(fù)用的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03

