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

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

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

1、編寫node服務(wù)器

先下載幾個依賴包

express（用于網(wǎng)絡(luò)連接）

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服務(wù)器的端口號
app.listen(3000, () => {
	console.log('恭喜你，服務(wù)器啟動成功')
})

接下來啟動node服務(wù)器。進(jìn)入對應(yīng)的index.js所在的文件夾，在搜索欄輸入cmd按回車進(jìn)入終端

啟動剛才編寫的index.js文件

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

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

到這我們已經(jīng)完成了服務(wù)器的搭建，并且寫了一個簡單的接口！

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)閉成功')
		}
	})
}
 
//導(dǎo)出conMysql函數(shù)
exports.conMysql = conMysql

連接數(shù)據(jù)庫的函數(shù)已經(jīng)寫好并導(dǎo)出，接下來就要在剛剛寫完的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())
//導(dǎo)入我們上一步寫的連接數(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服務(wù)器的端口號
app.listen(3000, () => {
	console.log('恭喜你，服務(wù)器啟動成功')
})

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

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

ok,到這我們已經(jīng)成功連接上數(shù)據(jù)庫并進(jìn)行了數(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)絡(luò)請求給后端

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服務(wù)器的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())
//導(dǎo)入我們上一步寫的連接數(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ù)庫中對應(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ù)庫連接出錯!')
	})
})
 
//監(jiān)聽node服務(wù)器的端口號
app.listen(3000, () => {
	console.log('恭喜你，服務(wù)器啟動成功')
})

貼一下我的目錄

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

接下來我們處理跨域問題，為什么跨域了，因為前端一般用的本地端口是8080，我們剛剛寫的node服務(wù)器用的接口是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>
//導(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>

啟動前端項目，啟動node服務(wù)，打開瀏覽器進(jìn)入項目輸入數(shù)據(jù)庫中的任意一個user