?? 1. 新建一個node項(xiàng)目
* 初始化node
-
查看node是否安裝
node -v
-
初始化命令
npm init
初始化配置解釋如下：
package name: (node項(xiàng)目) node-pc//項(xiàng)目名字
version: (1.0.0) //版本號
description: 一個node.js開發(fā)的管理系統(tǒng)后端項(xiàng)目//項(xiàng)目解釋詳情
entry point: (index.js) app.js//全局入口文件
test command: npm test//測試命令
git repository: //git倉庫
keywords:
author: //作者
完成后會有一個package.json文件
* 安裝可能用到的依賴
根據(jù)需求安裝，我這里需要對接mysql，安裝依賴 ，我是一次性安裝完，后邊會直接使用，也可以邊安裝邊使用。如下
//安裝express框架
npm install express
//安裝數(shù)據(jù)庫
npm install mysql
//安裝加密解密的bcryptjs
npm i bcryptjs@2.4.3
//安裝nodemon,實(shí)時監(jiān)聽node修改的代碼
npm install nodemon
//跨域
npm install cors
安裝成功如下：
* 配置文件目錄
- 下圖1中新增文件分別為，靜態(tài)文件放置處、項(xiàng)目邏輯文件、全局入口文件
- 下圖2中是app.js初始化內(nèi)容，使用node app.js是項(xiàng)目運(yùn)行起來，如圖中3
上邊有安裝安裝nodemon,實(shí)時監(jiān)聽node修改的代碼，這里可以在package.json中添加"start": "nodemon app.js"，之后使用npm start啟動
* 添加路由router
1. 添加router.js文件，添加一個test目錄
2. 修改app.js ,引入router
const router=require('./views/router/router');
//使用
app.use('/', cors(), router);
app.listen(3000, function () {
console.log("項(xiàng)目啟動")
})
?? 3. 啟動并在瀏覽器打開
* 連接mysql 并做表格查詢
1. 創(chuàng)建/views/db/index.js文件，并填寫數(shù)據(jù)庫基礎(chǔ)信息
1. 修改app.js ,引入mysql
const db = require('./views/db/index')//導(dǎo)入數(shù)據(jù)庫操作模塊
// 查詢命令
const sqlStr = 'select * from mq_user'
db.query(sqlStr, (err, results) => {
if (err) return console.log(err.message)
// 能夠成功的執(zhí)行 SQL 語句
console.log(results);
});
?? 3. 啟動后 終端打印查詢到的數(shù)據(jù)
* node 寫一個get接口，返回mysql用戶表單中的列表數(shù)據(jù)
1. 把上一部引入的mysql轉(zhuǎn)移到router.js文件中
2. router.js種寫get請求
// 參數(shù)1：客戶端請求的URL地址
// 參數(shù)2：請求對應(yīng)的處理函數(shù)
// req:請求 相關(guān)的屬性和方法
// res:響應(yīng) 相關(guān)的屬性和方法
router.get('/adminList', function (req, res) {
res.setHeader('Content-Type', 'application/json;charset=utf-8')
// res.end(JSON.stringify({ "code": 200,"dataList":date}))//end 傳的是字符串類型
res.send({ "code": 200,"dataList":date})//可以傳遞對象
})
?? 3. 啟動并在瀏覽器打開（因?yàn)槭褂玫膅et請求直接在瀏覽器打開）
* node 寫一個post接口，添加一條表格數(shù)據(jù)
1. router.js種寫post請求
router.post('/addAdminList', function (req, res) {
console.log(req) //獲取客戶端傳參數(shù)
res.send()//向客戶端發(fā)送響應(yīng)數(shù)據(jù)
})
2. 添加multer 中間件用于處理文件上傳，并將上傳的文件保存到指定的目錄中。
1. 下載：npm install nodemon 引入 ，
//--------- 處理文件上傳，保存的文件格式取決于上傳的文件本身，
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });//創(chuàng)建文件保存路徑 uploads/
添加到post請求之中，變成這樣
router.post('/addAdminList', upload.single('file'),function (req, res) {
res.setHeader('Content-Type', 'multipart/form-data')
console.log(req);
res.send({ "code": 200, "data": 'ok' });
})
?? 運(yùn)行后如下：node項(xiàng)目會多一個文件夾
2. 引入fs ，Node.js 內(nèi)置的文件系統(tǒng)模塊，用于處理文件和目錄的讀取、寫入、修改和刪除等操作
const fs = require('fs');
3. 接收一個pdf文件，下載依賴并引入：npm install pdf-lib，根目錄創(chuàng)建一個patch用于保存pdf文件
-引入：const { PDFDocument } = require('pdf-lib');
-使用：代碼修改如下
router.post('/addAdminList', upload.single('file'), async function (req, res) {
res.setHeader('Content-Type', 'multipart/form-data')
console.log(req.body);
console.log(req.file);
const filePath = req.file.path;
try {
// 讀取上傳的文件內(nèi)容
const fileContent = fs.readFileSync(filePath);
// 創(chuàng)建一個新的 PDF 文檔
const pdfDoc = await PDFDocument.create();
// 將上傳的文件作為附件嵌入到 PDF 文檔中
const attachment = await pdfDoc.embedPdf(fileContent);
// 創(chuàng)建一個新的頁面，并添加一個鏈接到附件文件
const page = pdfDoc.addPage();
page.drawText('Click here to open the attached file', {
x: 50,
y: 50,
size: 12,
underline: true,
link: attachment,
});
// 保存 PDF 文件
const pdfBytes = await pdfDoc.save();
const pdfFilePath = `path/${req.file.originalname}`;
fs.writeFileSync(pdfFilePath, pdfBytes);
// 刪除上傳的原始文件
fs.unlinkSync(filePath);
res.send({ "code": 200, "data": 'ok' });
} catch (error) {
console.error(error);
return res.status(500).send('Error converting file to PDF');
}
})
4. 啟動node項(xiàng)目，
??3. 前端上傳一次請求后node運(yùn)行如下，（前端代碼在最后一條）
?? 2. node開發(fā)的借口對接vue3管理系統(tǒng)
使用接口時候node項(xiàng)目要是運(yùn)行狀態(tài)，不能關(guān)閉
1. vue3+ts+element-plus項(xiàng)目相關(guān)筆記
以上已經(jīng)實(shí)現(xiàn)node開發(fā)的通過get獲取到mysql中用戶列表數(shù)據(jù)，后邊將獲取到的數(shù)據(jù)。
使用axios接入到vue3+ts項(xiàng)目中
關(guān)于vue3+ts項(xiàng)目搭建和axios引入可以看這兩篇筆記，
??
vue3+ts+element-plus管理系統(tǒng)實(shí)際開發(fā)業(yè)務(wù)之增刪改查
?? 從0實(shí)戰(zhàn)一個 vue3+ ts+element-plus
項(xiàng)目
2. 新建api文件adminTable.ts,并添加一個get請求方法（vue3前端項(xiàng)目）
3. 獲取列表數(shù)據(jù)并渲染到頁面
* 引入get請求方法到tableList.vue文件中，并配置列表字段
import {adminList } from '../../api/adminTable'
let tableData = ref([])
//---- 獲取列表數(shù)據(jù)相關(guān)代碼 ----
onMounted(() => {
adminList().then(((res: any) => {
console.log(res.dataList)
tableData=res.dataList
}))
})
?? *運(yùn)行效果
* 踩了個小坑-- reactive() 不可重新賦值（會丟失響應(yīng)性），如果需要賦值操作需要使用ref，ref() 有一個 .value 屬性可以用來重新賦值
4. 添加一條數(shù)據(jù)到表格中
* 引入post請求方法并添加到tableList.vue文件中
- 請求方法設(shè)置
* 引入使用
import { addList } from '../../api/index'
* 具體表單和獲取數(shù)據(jù)提交在之前同系列博客有寫過，這里直接用。
文章來源：http://www.zghlxwxcb.cn/news/detail-613616.html
?? 發(fā)起請求
文章來源地址http://www.zghlxwxcb.cn/news/detail-613616.html
本人發(fā)布文章都是個人學(xué)習(xí)筆記，如果有不對的希望路過的能指出，感謝！
到了這里，關(guān)于vue3+ts+element-plus 之使用node.js對接mysql進(jìn)行表格數(shù)據(jù)展示的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
