手把手帶你使用vue+node作后端連接數(shù)據(jù)庫
更新時間：2023年03月09日 10:00:27 作者：小白的實習記錄
為了快速學習nodejs制作后端并和數(shù)據(jù)庫進行交互的方法,所以趕緊寫一篇這樣的文章出來,下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的相關(guān)資料,需要的朋友可以參考下
ok，讓我們開始吧
1、編寫node服務器
先下載幾個依賴包
express（用于網(wǎng)絡連接）
npm i express --save
cors（用于處理跨域問題）
npm i cors --save
接下來好還需要處理一下前端傳過來的數(shù)據(jù)，對于get請求無需特殊處理，但是對于post請求發(fā)送的數(shù)據(jù)類型取決于post請求頭Content-type的類型。常見三種
multipart/form-data 、 application/x-www-form-urlencode 、 application/json（最常用）
這幾種類型想要了解更多可自行百度
為了處理這幾種類型需要下載幾個依賴包
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: 請?zhí)砑用枋?
* @FilePath: \domysql\src\server\index.js
*/
const express = require('express')
const app = express()
const cors = require('cors') //解決跨域問題
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())
//一個簡單的測試接口
app.get('/test',(req,res)=>{
res.send('測試用的接口')
})
//監(jiān)聽node服務器的端口號
app.listen(3000, () => {
console.log('恭喜你，服務器啟動成功')
})接下來啟動node服務器。進入對應的index.js所在的文件夾，在搜索欄輸入cmd按回車進入終端
啟動剛才編寫的index.js文件
然后打開瀏覽器輸入 localhost：3000/
3000端口號是我們剛才監(jiān)聽時使用的，是我們的node服務的端口號
到這我們已經(jīng)完成了服務器的搭建，并且寫了一個簡單的接口 ！
2、用node連接數(shù)據(jù)庫
先下載一個依賴 mysql （用于連接數(shù)據(jù)庫)
npm i mysql --save
新建一個mysql.js文件，和index.js 同級目錄哦
/*
* @Author: maximing
* @Date: 2022-12-28 09:33:17
* @LastEditTime: 2022-12-28 09:52:00
* @LastEditors: your name
* @Description: 請?zhí)砑用枋?
* @FilePath: \domysql\src\server\mysql.js
*/
const mySql = require('mysql')
//連接數(shù)據(jù)庫的配置信息
const db_config = {
host: 'localhost', //本地都是localhost
user: 'root', //賬戶名
password: '12345', //密碼
port: '3306', //端口號
database: 'demo' //數(shù)據(jù)庫的名稱
}
function conMysql(sql) {
//創(chuàng)建數(shù)據(jù)庫連接池
let Myconnect = mysql.createConnection(db_config)
//開始連接數(shù)據(jù)庫
Myconnect.connect(function (err) {
if (err) {
console.log(`myqsl連接失敗:${err}!`)
} else {
console.log('恭喜哦，mysql連接成功哦')
}
})
//因為query查詢是一個異步操作，所以用promise來操作
return new Promise((resolve, reject) => {
//query() 函數(shù)用于mysql語句查詢
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ù)庫的函數(shù)
function closeMysql(Myconnect) {
Myconnect.end((err) => {
if (err) {
console.log(`mysql關(guān)閉失敗:${err}!`)
} else {
console.log('mysql關(guān)閉成功')
}
})
}
//導出conMysql函數(shù)
exports.conMysql = conMysql連接數(shù)據(jù)庫的函數(shù)已經(jīng)寫好并導出，接下來就要在剛剛寫完的index.js文件里接著往下寫一個簡單數(shù)據(jù)庫查詢接口
/*
* @Author: maximing
* @Date: 2022-12-28 09:06:42
* @LastEditTime: 2022-12-28 11:23:40
* @LastEditors: your name
* @Description: 請?zhí)砑用枋?
* @FilePath: \domysql\src\server\index.js
*/
const express = require('express')
const app = express()
const cors = require('express') //解決跨域問題
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())
//導入我們上一步寫的連接數(shù)據(jù)庫的函數(shù)
const {conMysql} = require('./mysql')
//創(chuàng)建統(tǒng)一的返回報文對象
class Response {
constructor(isSucceed, msg, code, data) {
this.isSucceed = isSucceed;
this.msg = msg;
this.code = code;
this.data = data;
}
}
//一個簡單的測試接口
app.get('/test',(req,res)=>{
res.send('測試用的接口')
})
//一個簡單的接口，查詢數(shù)據(jù)庫中的信息
app.get('/getUser', (req, res) => {
let sql = 'select * from test'
conMysql(sql).then(result => {
res.send(result)
})
})
//監(jiān)聽node服務器的端口號
app.listen(3000, () => {
console.log('恭喜你，服務器啟動成功')
})貼一下我的數(shù)據(jù)庫的表
在瀏覽器輸入我們剛才寫的接口地址
ok,到這我們已經(jīng)成功連接上數(shù)據(jù)庫并進行了數(shù)據(jù)的查詢
3、編寫前端頁面
用vue的腳手架新建一個vue項目
貼一下我的項目目錄
寫一個前端展示的界面
<template>
<div>
<input v-model="user" placeholder="輸入用戶名查詢用戶信息">
<button @click="getUser">點擊獲取用戶信息</button>
</div>
</template>
<script>
export default {
name: 'userInfor',
data() {
return {
userInfo: '',
user: '',
}
},
methods: {
},
created() {
}
}
</script>
<style>
</style>接下來我們還需要安裝axios依賴包，用于發(fā)送網(wǎng)絡請求給后端
npm i axios --save
對axios二次封裝
在axios文件夾下新建一個index.js 文件
import Axios from 'axios'
const instance = Axios.create({
baseURL: '/api'
})
instance.interceptors.request.use((config) => {
console.log(config, '發(fā)送請求前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在同級目錄下新建一個api.js文件，用于統(tǒng)一處理接口
import request from './index'
//獲取用戶信息接口
export const getUserInfo = (data) => request.get('/getUserInfo', { params: data })在剛才我們寫node服務器的index.js文件里面添加一個根據(jù)用戶id查詢信息的后端接口
/*
* @Author: maximing
* @Date: 2022-12-28 09:06:42
* @LastEditTime: 2022-12-28 11:23:40
* @LastEditors: your name
* @Description: 請?zhí)砑用枋?
* @FilePath: \domysql\src\server\index.js
*/
const express = require('express')
const app = express()
const cors = require('express') //解決跨域問題
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())
//導入我們上一步寫的連接數(shù)據(jù)庫的函數(shù)
const {conMysql} = require('./mysql')
//創(chuàng)建統(tǒng)一的返回報文對象
class Response {
constructor(isSucceed, msg, code, data) {
this.isSucceed = isSucceed;
this.msg = msg;
this.code = code;
this.data = data;
}
}
//一個簡單的測試接口
app.get('/test',(req,res)=>{
res.send('測試用的接口')
})
//一個簡單的接口，查詢數(shù)據(jù)庫中的信息
app.get('/getUser', (req, res) => {
let sql = 'select * from test'
conMysql(sql).then(result => {
res.send(result)
})
})
//根據(jù)前端傳過來的id查詢數(shù)據(jù)庫中對應的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ù)庫連接出錯!')
})
})
//監(jiān)聽node服務器的端口號
app.listen(3000, () => {
console.log('恭喜你，服務器啟動成功')
})貼一下我的目錄
ok，到這里我們已經(jīng)把前端的接口也寫完了
接下來我們處理跨域問題，為什么跨域了，因為前端一般用的本地端口是8080，我們剛剛寫的node服務器用的接口是3000，不同的端口就出現(xiàn)了跨域。
我們在根目錄下新建一個 vue.config.js 文件，一般用腳手架建立的vue項目都自帶這個文件
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，到這一步跨域也搞定了，接下來就是前后端交互了
4、前后端交互
在剛才寫的前端展示界面調(diào)用接口
<template>
<div>
<input v-model="user" placeholder="輸入用戶名查詢用戶信息">
<button @click="getUser">點擊獲取用戶信息</button>
<span>{{userInfo}}</span>
</div>
</template>
<script>
//導入我們之前寫的接口
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>啟動前端項目，啟動node服務，打開瀏覽器進入項目輸入數(shù)據(jù)庫中的任意一個user
ok，到這里整個前后端已經(jīng)完成交互
結(jié)束
到這里整個教程就已經(jīng)結(jié)束了，如果實踐當中有什么報錯或不懂的地方一定要自己去百度及時了解新知識。
到此這篇關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫的文章就介紹到這了,更多相關(guān)vue node作后端連接數(shù)據(jù)庫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
這篇文章主要為大家詳細介紹了如何使用vue3實現(xiàn)一個高德地圖天氣小組件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學習一下2024-10-10
這篇文章主要介紹了vue中使用codemirror的實例教程，非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-11-11
Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)
最近在使用Element開發(fā)時遇到了不少問題,下面這篇文章主要給大家介紹了關(guān)于Element?ui中menu組件(el-menu/el-menu-item/el-submenu/template)層級結(jié)構(gòu)與用法的相關(guān)資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue3實現(xiàn)ai聊天對話框功能,本文通過實例代碼給大家介紹的非常詳細,感興趣的朋友一起看看吧2024-12-12
Vue props實現(xiàn)父組件給子組件傳遞數(shù)據(jù)的方式
Vue中的配置項Props能讓組件接收外部傳遞過來的數(shù)據(jù),本文給大家介紹了Vue props實現(xiàn)父組件給子組件傳遞數(shù)據(jù)的幾種方式,文中有詳細的實現(xiàn)方式,具有一定的參考價值,需要的朋友可以參考下2023-10-10
創(chuàng)建vue報錯vue-cli Failed to download repo&n
通過vue-cli創(chuàng)建Vue項目時,若遇到連接超時錯誤,可采用離線方式解決,具體操作是下載并解壓vue-templates/webpack到本地.vue-templates目錄,再使用--offline參數(shù)重新執(zhí)行初始化命令2024-09-09
下面小編就為大家分享一篇vue axios 在頁面切換時中斷請求方法 ajax，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
在vue3中對響應式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref與reactive的相關(guān)資料,需要的朋友可以參考下2021-06-06
這篇文章主要給大家介紹了關(guān)于Vue前端生成UUID的相關(guān)資料,前端需要生成一個唯一標識符作為ID時,可以使用Vue UUID插件,比如生成訂單號、用戶ID等等,需要的朋友可以參考下2023-09-09
這篇文章主要介紹了Vue+Mock.js模擬登錄和表格的增刪改查功能,需要的朋友可以參考下2018-07-07