vue項(xiàng)目使用node連接數(shù)據(jù)庫的方法(前后端分離)
學(xué)習(xí)關(guān)鍵語句：
vue連接mysql數(shù)據(jù)庫
vue項(xiàng)目連接后臺數(shù)據(jù)庫配置
vue通過node連接MySQL數(shù)據(jù)庫
寫在前面
為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來,如果你對這篇文章中提到的內(nèi)容有所疑惑,請飛快的將你的疑惑輸入到下方評論區(qū)中!
另外一個真實(shí)原因是我在做這個練習(xí)時很難找到完整的教學(xué)性文章 , 所以決定分享一下經(jīng)驗(yàn)
注意：本文在2022/8/16號已進(jìn)行完善，此次完善的內(nèi)容如下
- 變?yōu)楦险鎸?shí)項(xiàng)目的目錄結(jié)構(gòu)
- axios請求二次封裝
- 前端跨域處理完善
文章末尾附帶本文項(xiàng)目文件鏈接
對于搜索自己問題找到這篇文章的網(wǎng)友,可以參考右邊的菜單目錄快速定位到你可能想找的內(nèi)容
編寫順序
- 編寫前端頁面
- 編寫后端node服務(wù)器
- 編寫node連接數(shù)據(jù)庫
- 編寫數(shù)據(jù)庫交互
- 編寫前后端交互
開始
1.編寫前端頁面
這里使用vue2腳手架快速搭建項(xiàng)目
vue create node-app
選擇 babel, router即可
建立好之后如下圖
刪除無需內(nèi)容
APP.vue
只保留路由切換
Home.vue 和 About.vue 全部清空,重新建立vue文件模板(template + script + style)
制作登錄頁和首頁
將 Home.vue 當(dāng)做登錄頁面, About.vue當(dāng)做首頁,這樣就不用麻煩配置路由了,當(dāng)做演示就很方便
登錄頁
登錄頁的功能需求 ： 輸入賬號密碼完成登錄操作，并根據(jù)登錄情況給出響應(yīng)提示
制作登錄頁面, 放置兩個 input 輸入框和一個 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>
首頁
首頁就用來修改密碼好了, 修改保存在數(shù)據(jù)庫中的密碼
首頁功能需求 ： 修改用戶密碼 ， 查看用戶個人信息
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>
昵稱:{{userInfo.nickname}}
</div>
<div v-if="userInfo.gender != '無'">
性別:{{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>
到這里,前端頁面除了交互以外就已經(jīng)完成了
接下來我們來編寫后端 node服務(wù)器
2.制作后端 node 服務(wù)器
初始化項(xiàng)目
新建文件夾, 起名為 node-server , 新建文件 app.js , 在終端中初始化項(xiàng)目
npm init npm i
完成之后 node-server 文件夾中會出現(xiàn)以下目錄
編寫 app.js
我們想要制作服務(wù)器, 這里使用 express 來實(shí)現(xiàn)
npm i --save express
當(dāng)然了, 我們還需要解決跨域問題, 這里使用 cors 來解決
npm i --save cors
現(xiàn)在我們來考慮前端傳參問題
對于get請求，其參數(shù)是直接拼接在url后面的，解析也相對容易。在express框架中，get請求的參數(shù)全部都被放置在了request對象的query中。
post請求有多種形式可以發(fā)送數(shù)據(jù)，這取決于post請求的請求頭Content-type的內(nèi)容，常見的有三種：
- multipart/form-data
- application/x-www-form-urlencoded
- application/json
為此，我們引入中間件來解決讀取參數(shù)的問題
這里使用 body-parser 和 connect-multiparty 來解決
npm i --save body-parser
npm i --save connect-multiparty
接下來編寫 app.js 文件
app.js
// 導(dǎo)入 express
const express = require('express')
// 創(chuàng)建 app
const app = express()
// 設(shè)置跨域訪問
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())
// 測試接口能否正常調(diào)用
app.get('/info', (req, res) => {
res.send("Hello shaoyahu !")
})
// 啟動
app.listen(3000, () => {
console.log('express server running at http://127.0.0.1:' + 3000);
})接下來我們在控制臺使用 node 命令就可以啟動服務(wù)器了
node app.js
最先看到控制臺打印了消息
接下來我們在瀏覽器中打開看一看效果
太棒了 ! 我們已經(jīng)完成了最簡單的接口
3.編寫 node 連接數(shù)據(jù)庫
編寫 mysql.js 文件
我們在 node-server 文件夾下新建文件 mysql.js
首先, 我們需要安裝 mysql
本機(jī)安裝
本機(jī)安裝 mysql 服務(wù)請參考其他文章 , 這里不做詳細(xì)介紹 , 大致行動為 : 下載安裝包 , 點(diǎn)擊安裝 , 配置
安裝 mysql 依賴
npm i --save mysql
編寫 mysql.js 文件
mysql.js
let mysql = require('mysql')
const db_config = {
host: 'localhost',
user: '請輸入你自己的賬號, 一般為 root',
password: '請輸入你自己的密碼, 一般也為 root',
port: "3306",// 默認(rèn)使用3306端口號
database: 'node_app'// 使用你自己創(chuàng)建的數(shù)據(jù)庫名稱,我這里使用 node_app
}
// 進(jìn)行數(shù)據(jù)庫交互
function conMysql(sql) {
let connect = mysql.createConnection(db_config)
// 開始鏈接數(shù)據(jù)庫
connect.connect(function (err) {
if (err) {
console.log(`mysql連接失敗: ${err}!`)
} else {
console.log('mysql連接成功!')
}
})
// 返回一個Promise承諾對象
return new Promise((resolve, reject) => {
connect.query(sql, (err, result) => {
if (err) {
reject(err)
} else {
// 此處需要將返回數(shù)據(jù)轉(zhuǎn)為JSON再轉(zhuǎn)回來,否則原數(shù)據(jù)不為任何數(shù)據(jù)類型
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
測試數(shù)據(jù)庫連接
我們在數(shù)據(jù)庫中新建一張表 userinfo , 里面提前插入兩條數(shù)據(jù)
繼續(xù)編寫 app.js 文件獲取這兩條數(shù)據(jù)
app.js
在原有的基礎(chǔ)上新增一個接口 , 位置放在 /info 下就可以
// 引入 mysql 方法
let { conMysql } = require('./mysql')
// 獲取全部用戶信息，測試數(shù)據(jù)庫連接的上不上
app.get('/getUser', (req, res) => {
let sql = 'select * from userinfo'
conMysql(sql).then(result => {
res.send(result)
})
})同樣我們在瀏覽器中打開
測試成功 !
4.實(shí)現(xiàn)登錄、修改密碼和獲取用戶信息接口
接下來就是最重要的部分了 , 我們來實(shí)現(xiàn)登錄、修改密碼和獲取用戶信息的接口 , 同樣的里面還包含了數(shù)據(jù)庫的交互
但是 , 在此之前 , 我們先來統(tǒng)一返回的數(shù)據(jù)格式
app.js
我們創(chuàng)建一個類來返回數(shù)據(jù)
// 創(chuàng)建統(tǒng)一的返回報文對象
class Response {
constructor(isSucceed, msg, code, data) {
this.isSucceed = isSucceed;
this.msg = msg;
this.code = code;
this.data = data;
}
}登錄
app.js
登錄方法我們使用 post 請求，想來沒人希望自己的賬號密碼被人一眼看見吧
// 登錄
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, '用戶名或密碼錯誤', 400)
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('數(shù)據(jù)庫連接出錯!')
})
})其中 , res.send() 方法默認(rèn)返回狀態(tài)碼為 200 , 可以通過增加調(diào)用 .status() 方法返回想要返回的狀態(tài)碼
修改密碼
app.js
修改密碼我們使用 post 請求
// 修改密碼
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, '修改失敗,請稍后重試', 400)
res.status(400).send(response)
}
}).catch(err => {
res.status(500).send('數(shù)據(jù)庫連接出錯!')
})
})獲取用戶個人信息
app.js
獲取用戶個人信息我們使用 get 請求
// 獲取當(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ù)庫連接出錯!')
})
})這樣一來 , 我們登錄、修改密碼和獲取個人信息都已經(jīng)完成了 , 接下來只需要完成前后端交互就可以了 , 很顯然的是 , 接下來的事應(yīng)該是由前端開發(fā)來完成了 , 所有如果有哪位有意向于前端開發(fā)的朋友閱讀到這里 , 就可以嘗試自己動手完成接下來的工作了
5.完成前后端交互
前后端交互我們使用 axios
安裝依賴
$ npm i --save axios
二次封裝axios和請求
在src同級目錄下新建文件 axios.js
打開axios.js文件，我們進(jìn)行簡單封裝
axios.js
進(jìn)行簡單的封裝，不添加攔截器
為了簡潔，同時相同請求地址的域名都是相同的，我們就可以將域名提出來統(tǒng)一放在最前面
const axios = require('axios')
const service = axios.create({
baseURL: 'http://localhost:3000'
})
export default service接下來進(jìn)行請求的封裝
在src目錄下新建 api 文件夾同時在該文件夾下新增文件 user.js 專門存放和用戶有關(guān)的接口請求
我們在 user.js 中封裝三個方法，分別是登錄，修改密碼和查看個人信息
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)然了，前端也是會遇到跨域問題的，我們這里使用代理服務(wù)器來解決跨域問題
在src同級目錄下新增 vue.config.js 文件
vue.config.js
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' }
},
},
}
}由于我們將所有的 /api 都使用域名進(jìn)行重寫
所以我們再來修改 axios.js 文件
axios.js
const axios = require('axios')
const service = axios.create({
baseURL: '/api'
})
export default service好了這樣一來我們和發(fā)送請求相關(guān)的文件便寫好了，現(xiàn)在要去寫交互頁面了
添加登錄功能
Home.vue
首先需要引入請求方法
import { userLogin } from '../api/user'再只需要對上面的 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)
})
}這樣就可以完成登錄功能了 , 接下來我們來處理修改密碼
添加修改密碼功能
About.vue
首先需要引入請求方法
import { updatePassword, getUserInfo } from '../api/user'再只需要對上面的 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('修改密碼后請重新登錄')
})
.catch((err) => {
alert(err.response.data.msg)
})
}結(jié)束
如此一來 , 一個簡單的前后端分離的項(xiàng)目就是有了雛形 , 雖然實(shí)現(xiàn)的功能非常簡陋 , 但能讓我在 js 這條路上再進(jìn)一步 , 就是說非常高興了
如果你對文中的內(nèi)容有所疑惑或者覺得不對勁 , 請趕快到評論區(qū)給我留言 , 千萬別耽誤了
文件鏈接
最后附上文件鏈接: https://dyyidc.jb51.net/202212/yuanma/vue_node_270703_jb51.rar
到此這篇關(guān)于vue項(xiàng)目使用node連接數(shù)據(jù)庫（前后端分離）的文章就介紹到這了,更多相關(guān)vue使用node連接數(shù)據(jù)庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的插槽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2022-02-02
這篇文章主要為大家詳細(xì)介紹了vue組件間通信子與父的相關(guān)資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-11-11
這篇文章主要介紹了詳解vue的數(shù)據(jù)binding原理介紹，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Vue中生命周期包括多個階段,如created和mounted,每階段有特定鉤子函數(shù),生命周期與瀏覽器渲染過程密切相關(guān),了解這些可以優(yōu)化頁面渲染和數(shù)據(jù)處理,created階段適用于數(shù)據(jù)初始化,而mounted階段適合進(jìn)行DOM操作和頁面渲染后的處理2024-10-10
vue定時器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題
這篇文章主要介紹了vue定時器清除不掉,導(dǎo)致功能頻繁執(zhí)行問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-06-06
key屬性可以用來提升v-for渲染的效率,vue中使用v-for渲染數(shù)據(jù)的時候,并不會去改變原有的元素和數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于vue?v-for中key原理的相關(guān)資料,需要的朋友可以參考下2022-04-04
淺談vue-cli加載不到dev-server.js的解決辦法
本篇文章主要介紹了淺談vue-cli加載不到dev-server.js的解決辦法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
vue 如何從單頁應(yīng)用改造成多頁應(yīng)用
這篇文章主要介紹了vue 如何從單頁應(yīng)用改造成多頁應(yīng)用，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-10-10
這篇文章主要介紹了Vue如何清空對象，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue之解決Echarts組件使用ID不能復(fù)用的問題
這篇文章主要介紹了Vue之解決Echarts組件使用ID不能復(fù)用的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03