手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)
ok，讓我們開(kāi)始吧
1、編寫(xiě)node服務(wù)器
先下載幾個(gè)依賴包
express（用于網(wǎng)絡(luò)連接）
npm i express --save
cors（用于處理跨域問(wèn)題）
npm i cors --save
接下來(lái)好還需要處理一下前端傳過(guò)來(lái)的數(shù)據(jù)，對(duì)于get請(qǐng)求無(wú)需特殊處理，但是對(duì)于post請(qǐng)求發(fā)送的數(shù)據(jù)類(lèi)型取決于post請(qǐng)求頭Content-type的類(lèi)型。常見(jiàn)三種
multipart/form-data 、 application/x-www-form-urlencode 、 application/json（最常用）
這幾種類(lèi)型想要了解更多可自行百度
為了處理這幾種類(lèi)型需要下載幾個(gè)依賴包
npm i body-parser --save
npm i connect-multiparty --save
新建 index.js 文件
/*
* @Author: maximing
* @Date: 2022-12-28 09:06:42
* @LastEditTime: 2022-12-28 11:23:40
* @LastEditors: your name
* @Description: 請(qǐng)?zhí)砑用枋?
* @FilePath: \domysql\src\server\index.js
*/
const express = require('express')
const app = express()
const cors = require('cors') //解決跨域問(wèn)題
app.use(cors())
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
// 處理 x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))
// 處理 mutipart/form-data
app.use(multiparty())
// 處理 application/json
app.use(bodyParser.json())
//一個(gè)簡(jiǎn)單的測(cè)試接口
app.get('/test',(req,res)=>{
res.send('測(cè)試用的接口')
})
//監(jiān)聽(tīng)node服務(wù)器的端口號(hào)
app.listen(3000, () => {
console.log('恭喜你，服務(wù)器啟動(dòng)成功')
})接下來(lái)啟動(dòng)node服務(wù)器。進(jìn)入對(duì)應(yīng)的index.js所在的文件夾，在搜索欄輸入cmd按回車(chē)進(jìn)入終端
啟動(dòng)剛才編寫(xiě)的index.js文件
然后打開(kāi)瀏覽器輸入 localhost：3000/
3000端口號(hào)是我們剛才監(jiān)聽(tīng)時(shí)使用的，是我們的node服務(wù)的端口號(hào)
到這我們已經(jīng)完成了服務(wù)器的搭建，并且寫(xiě)了一個(gè)簡(jiǎn)單的接口 ！
2、用node連接數(shù)據(jù)庫(kù)
先下載一個(gè)依賴 mysql （用于連接數(shù)據(jù)庫(kù))
npm i mysql --save
新建一個(gè)mysql.js文件，和index.js 同級(jí)目錄哦
/*
* @Author: maximing
* @Date: 2022-12-28 09:33:17
* @LastEditTime: 2022-12-28 09:52:00
* @LastEditors: your name
* @Description: 請(qǐng)?zhí)砑用枋?
* @FilePath: \domysql\src\server\mysql.js
*/
const mySql = require('mysql')
//連接數(shù)據(jù)庫(kù)的配置信息
const db_config = {
host: 'localhost', //本地都是localhost
user: 'root', //賬戶名
password: '12345', //密碼
port: '3306', //端口號(hào)
database: 'demo' //數(shù)據(jù)庫(kù)的名稱
}
function conMysql(sql) {
//創(chuàng)建數(shù)據(jù)庫(kù)連接池
let Myconnect = mysql.createConnection(db_config)
//開(kāi)始連接數(shù)據(jù)庫(kù)
Myconnect.connect(function (err) {
if (err) {
console.log(`myqsl連接失敗:${err}!`)
} else {
console.log('恭喜哦，mysql連接成功哦')
}
})
//因?yàn)閝uery查詢是一個(gè)異步操作，所以用promise來(lái)操作
return new Promise((resolve, reject) => {
//query() 函數(shù)用于mysql語(yǔ)句查詢
connect.query(sql, (err, result) => {
if (err) {
reject(err)
} else {
let res = JSON.parse(JSON.stringify(result))
closeMysql(connect) //調(diào)用函數(shù)關(guān)閉mysql連接
resolve(res)
}
});
})
}
//關(guān)閉mysql數(shù)據(jù)庫(kù)的函數(shù)
function closeMysql(Myconnect) {
Myconnect.end((err) => {
if (err) {
console.log(`mysql關(guān)閉失敗:${err}!`)
} else {
console.log('mysql關(guān)閉成功')
}
})
}
//導(dǎo)出conMysql函數(shù)
exports.conMysql = conMysql連接數(shù)據(jù)庫(kù)的函數(shù)已經(jīng)寫(xiě)好并導(dǎo)出，接下來(lái)就要在剛剛寫(xiě)完的index.js文件里接著往下寫(xiě)一個(gè)簡(jiǎn)單數(shù)據(jù)庫(kù)查詢接口
/*
* @Author: maximing
* @Date: 2022-12-28 09:06:42
* @LastEditTime: 2022-12-28 11:23:40
* @LastEditors: your name
* @Description: 請(qǐng)?zhí)砑用枋?
* @FilePath: \domysql\src\server\index.js
*/
const express = require('express')
const app = express()
const cors = require('express') //解決跨域問(wèn)題
app.use(cors())
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
// 處理 x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))
// 處理 mutipart/form-data
app.use(multiparty())
// 處理 application/json
app.use(bodyParser.json())
//導(dǎo)入我們上一步寫(xiě)的連接數(shù)據(jù)庫(kù)的函數(shù)
const {conMysql} = require('./mysql')
//創(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;
}
}
//一個(gè)簡(jiǎn)單的測(cè)試接口
app.get('/test',(req,res)=>{
res.send('測(cè)試用的接口')
})
//一個(gè)簡(jiǎn)單的接口，查詢數(shù)據(jù)庫(kù)中的信息
app.get('/getUser', (req, res) => {
let sql = 'select * from test'
conMysql(sql).then(result => {
res.send(result)
})
})
//監(jiān)聽(tīng)node服務(wù)器的端口號(hào)
app.listen(3000, () => {
console.log('恭喜你，服務(wù)器啟動(dòng)成功')
})貼一下我的數(shù)據(jù)庫(kù)的表
在瀏覽器輸入我們剛才寫(xiě)的接口地址
ok,到這我們已經(jīng)成功連接上數(shù)據(jù)庫(kù)并進(jìn)行了數(shù)據(jù)的查詢
3、編寫(xiě)前端頁(yè)面
用vue的腳手架新建一個(gè)vue項(xiàng)目
貼一下我的項(xiàng)目目錄
寫(xiě)一個(gè)前端展示的界面
<template>
<div>
<input v-model="user" placeholder="輸入用戶名查詢用戶信息">
<button @click="getUser">點(diǎn)擊獲取用戶信息</button>
</div>
</template>
<script>
export default {
name: 'userInfor',
data() {
return {
userInfo: '',
user: '',
}
},
methods: {
},
created() {
}
}
</script>
<style>
</style>接下來(lái)我們還需要安裝axios依賴包，用于發(fā)送網(wǎng)絡(luò)請(qǐng)求給后端
npm i axios --save
對(duì)axios二次封裝
在axios文件夾下新建一個(gè)index.js 文件
import Axios from 'axios'
const instance = Axios.create({
baseURL: '/api'
})
instance.interceptors.request.use((config) => {
console.log(config, '發(fā)送請(qǐng)求前config信息')
return config
}, err => {
return Promise.reject(err)
})
instance.interceptors.response.use((res) => {
console.log('接受的數(shù)據(jù)')
return res.data
}, err => {
return Promise.reject(err)
})
export default instance在同級(jí)目錄下新建一個(gè)api.js文件，用于統(tǒng)一處理接口
import request from './index'
//獲取用戶信息接口
export const getUserInfo = (data) => request.get('/getUserInfo', { params: data })在剛才我們寫(xiě)node服務(wù)器的index.js文件里面添加一個(gè)根據(jù)用戶id查詢信息的后端接口
/*
* @Author: maximing
* @Date: 2022-12-28 09:06:42
* @LastEditTime: 2022-12-28 11:23:40
* @LastEditors: your name
* @Description: 請(qǐng)?zhí)砑用枋?
* @FilePath: \domysql\src\server\index.js
*/
const express = require('express')
const app = express()
const cors = require('express') //解決跨域問(wèn)題
app.use(cors())
const bodyParser = require('body-parser')
const multiparty = require('connect-multiparty')
// 處理 x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: true }))
// 處理 mutipart/form-data
app.use(multiparty())
// 處理 application/json
app.use(bodyParser.json())
//導(dǎo)入我們上一步寫(xiě)的連接數(shù)據(jù)庫(kù)的函數(shù)
const {conMysql} = require('./mysql')
//創(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;
}
}
//一個(gè)簡(jiǎn)單的測(cè)試接口
app.get('/test',(req,res)=>{
res.send('測(cè)試用的接口')
})
//一個(gè)簡(jiǎn)單的接口，查詢數(shù)據(jù)庫(kù)中的信息
app.get('/getUser', (req, res) => {
let sql = 'select * from test'
conMysql(sql).then(result => {
res.send(result)
})
})
//根據(jù)前端傳過(guò)來(lái)的id查詢數(shù)據(jù)庫(kù)中對(duì)應(yīng)的id的信息
app.get('/getUserInfo', (req, res) => {
let sql = `select * from test where user = '${req.query.user}'`
conMysql(sql).then(result => {
let response = new Response(true, '獲取成功', 200, result)
res.send(response)
}).catch(err => {
res.status(500).send('數(shù)據(jù)庫(kù)連接出錯(cuò)!')
})
})
//監(jiān)聽(tīng)node服務(wù)器的端口號(hào)
app.listen(3000, () => {
console.log('恭喜你，服務(wù)器啟動(dòng)成功')
})貼一下我的目錄
ok，到這里我們已經(jīng)把前端的接口也寫(xiě)完了
接下來(lái)我們處理跨域問(wèn)題，為什么跨域了，因?yàn)榍岸艘话阌玫谋镜囟丝谑?080，我們剛剛寫(xiě)的node服務(wù)器用的接口是3000，不同的端口就出現(xiàn)了跨域。
我們?cè)诟夸浵滦陆ㄒ粋€(gè) vue.config.js 文件，一般用腳手架建立的vue項(xiàng)目都自帶這個(gè)文件
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
})
module.exports = {
devServer: {
proxy: {
'/api': {
//target 我們要連接的后端地址
target: 'http://localhost:3000',
changeOrigin: true, //是否跨域
pathRewrite: { '^/api': '' }
},
},
},
}ok，到這一步跨域也搞定了，接下來(lái)就是前后端交互了
4、前后端交互
在剛才寫(xiě)的前端展示界面調(diào)用接口
<template>
<div>
<input v-model="user" placeholder="輸入用戶名查詢用戶信息">
<button @click="getUser">點(diǎn)擊獲取用戶信息</button>
<span>{{userInfo}}</span>
</div>
</template>
<script>
//導(dǎo)入我們之前寫(xiě)的接口
import { getUserInfo } from '@/axios/api'
export default {
name: 'userInfor',
data() {
return {
userInfo: '',
user: '',
}
},
methods: {
async getUser() {
let res = await getUserInfo({ user: this.user })
console.log(res, '/api', '獲取的用戶信息')
this.userInfo = res.data
},
},
created() {
}
}
</script>
<style>
</style>啟動(dòng)前端項(xiàng)目，啟動(dòng)node服務(wù)，打開(kāi)瀏覽器進(jìn)入項(xiàng)目輸入數(shù)據(jù)庫(kù)中的任意一個(gè)user
ok，到這里整個(gè)前后端已經(jīng)完成交互
結(jié)束
到這里整個(gè)教程就已經(jīng)結(jié)束了，如果實(shí)踐當(dāng)中有什么報(bào)錯(cuò)或不懂的地方一定要自己去百度及時(shí)了解新知識(shí)。
到此這篇關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)的文章就介紹到這了,更多相關(guān)vue node作后端連接數(shù)據(jù)庫(kù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue-i18n實(shí)現(xiàn)中英文切換的方法，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下2020-07-07
Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例
這篇文章主要為大家介紹了Vue技巧Element Table二次封裝實(shí)戰(zhàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-11-11
Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼的方法
這篇文章主要介紹了Vue3+Vue-cli4項(xiàng)目中使用騰訊滑塊驗(yàn)證碼,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決
這篇文章主要介紹了vue中使用vant的Toast輕提示報(bào)錯(cuò)的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-05-05
Vue子組件props從父組件接收數(shù)據(jù)并存入data
這篇文章主要介紹了Vue子組件props從父組件接收數(shù)據(jù)并存入data的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-08-08
vue解決花括號(hào)數(shù)據(jù)綁定不成功的問(wèn)題
今天小編就為大家分享一篇vue解決花括號(hào)數(shù)據(jù)綁定不成功的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-10-10
vue3?Table分頁(yè)保留選中狀態(tài)代碼示例
這篇文章主要給大家介紹了關(guān)于vue3?Table分頁(yè)保留選中狀態(tài)的相關(guān)資料,vue table組件是一個(gè)非常方便的表格組件,它可以幫助我們實(shí)現(xiàn)分頁(yè)和選中功能,需要的朋友可以參考下2023-08-08
vue3?typescript封裝axios過(guò)程示例
這篇文章主要為大家介紹了vue3?typescript封裝axios過(guò)程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
這篇文章主要介紹了vue3?自定義圖片放大器效果，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
目前前端最流行的網(wǎng)絡(luò)請(qǐng)求庫(kù)還是axios,所以對(duì)axios的封裝很有必要,下面這篇文章主要給大家介紹了關(guān)于vue3和ts封裝axios以及使用mock.js的相關(guān)資料,文章通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02