手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)

更新時(shí)間：2023年03月09日 10:00:27 作者：小白的實(shí)習(xí)記錄

為了快速學(xué)習(xí)nodejs制作后端并和數(shù)據(jù)庫(kù)進(jìn)行交互的方法,所以趕緊寫一篇這樣的文章出來(lái),下面這篇文章主要給大家介紹了關(guān)于手把手帶你使用vue+node作后端連接數(shù)據(jù)庫(kù)的相關(guān)資料,需要的朋友可以參考下

1、編寫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ù)類型取決于post請(qǐng)求頭Content-type的類型。常見(jiàn)三種

multipart/form-data 、 application/x-www-form-urlencode 、 application/json（最常用）

這幾種類型想要了解更多可自行百度

為了處理這幾種類型需要下載幾個(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)聽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按回車進(jìn)入終端

啟動(dòng)剛才編寫的index.js文件

然后打開瀏覽器輸入 localhost：3000/

3000端口號(hào)是我們剛才監(jiān)聽時(shí)使用的，是我們的node服務(wù)的端口號(hào)

到這我們已經(jīng)完成了服務(wù)器的搭建，并且寫了一個(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)
	//開始連接數(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)寫好并導(dǎo)出，接下來(lái)就要在剛剛寫完的index.js文件里接著往下寫一個(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)入我們上一步寫的連接數(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)聽node服務(wù)器的端口號(hào)
app.listen(3000, () => {
	console.log('恭喜你，服務(wù)器啟動(dòng)成功')
})

貼一下我的數(shù)據(jù)庫(kù)的表

在瀏覽器輸入我們剛才寫的接口地址

ok,到這我們已經(jīng)成功連接上數(shù)據(jù)庫(kù)并進(jìn)行了數(shù)據(jù)的查詢

3、編寫前端頁(yè)面

用vue的腳手架新建一個(gè)vue項(xiàng)目

貼一下我的項(xiàng)目目錄

寫一個(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 })

在剛才我們寫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)入我們上一步寫的連接數(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)聽node服務(wù)器的端口號(hào)
app.listen(3000, () => {
	console.log('恭喜你，服務(wù)器啟動(dòng)成功')
})

貼一下我的目錄

ok，到這里我們已經(jīng)把前端的接口也寫完了

接下來(lái)我們處理跨域問(wèn)題，為什么跨域了，因?yàn)榍岸艘话阌玫谋镜囟丝谑?080，我們剛剛寫的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、前后端交互

在剛才寫的前端展示界面調(diào)用接口

<template>
	<div>
        <input v-model="user" placeholder="輸入用戶名查詢用戶信息">
		<button @click="getUser">點(diǎn)擊獲取用戶信息</button>
		<span>{{userInfo}}</span>
	</div>
</template>
 
<script>
//導(dǎo)入我們之前寫的接口
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ù)，打開瀏覽器進(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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: