vue3+ts+element-plus 之使用node.js对接mysql进行表格数据展示

---

✏️ 1. 新建一个node项目

* 初始化node

1. 查看node是否安装 node -v

2. 初始化命令 npm init
   
   初始化配置解释如下：

package name: (node项目) node-pc//项目名字
version: (1.0.0) //版本号
description: 一个node.js开发的管理系统后端项目//项目解释详情
entry point: (index.js) app.js//全局入口文件
test command: npm test//测试命令
git repository: //git仓库
keywords: 
author: //作者

完成后会有一个package.json文件

* 安装可能用到的依赖

根据需求安装，我这里需要对接mysql，安装依赖 ，我是一次性安装完，后边会直接使用，也可以边安装边使用。如下

//安装express框架
npm install express
//安装数据库
npm install mysql
//安装加密解密的bcryptjs
npm i bcryptjs@2.4.3
//安装nodemon,实时监听node修改的代码
npm install nodemon
//跨域
npm install cors

安装成功如下：

* 配置文件目录

• 下图1中新增文件分别为，静态文件放置处、项目逻辑文件、全局入口文件
• 下图2中是app.js初始化内容，使用node app.js是项目运行起来，如图中3
  
  上边有安装安装nodemon,实时监听node修改的代码，这里可以在package.json中添加 "start": "nodemon app.js"，之后使用npm start启动

* 添加路由router

1. 添加router.js文件，添加一个test目录

2. 修改app.js ,引入router

var express = require("express")
app = express()
const cors = require('cors');
const router=require('./views/router/router');
//使用
app.use('/', cors(), router);
app.listen(3000, function () {
    console.log("项目启动")
})

📒 3. 启动并在浏览器打开

* 连接mysql 并做表格查询

1. 创建/views/db/index.js文件，并填写数据库基础信息

1. 修改app.js ,引入mysql

const db = require('./views/db/index')//导入数据库操作模块


// 查询命令
const sqlStr = 'select * from mq_user'
db.query(sqlStr, (err, results) => {
    if (err) return console.log(err.message)
    // 能够成功的执行 SQL 语句
    console.log(results);
});

📒 3. 启动后 终端打印查询到的数据

* node 写一个get接口，返回mysql用户表单中的列表数据

1. 把上一部引入的mysql转移到router.js文件中

2. router.js种写get请求

// 参数1：客户端请求的URL地址
// 参数2：请求对应的处理函数
// 	  req:请求 相关的属性和方法
// 	  res:响应 相关的属性和方法
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. 启动并在浏览器打开（因为使用的get请求直接在浏览器打开）

* node 写一个post接口，添加一条表格数据

1. router.js种写post请求

router.post('/addAdminList', function (req, res) {
    console.log(req) //获取客户端传参数
    res.send()//向客户端发送响应数据
})

2. 添加multer 中间件用于处理文件上传，并将上传的文件保存到指定的目录中。

1. 下载：npm install nodemon 引入 ，

//---------  处理文件上传，保存的文件格式取决于上传的文件本身，
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });//创建文件保存路径 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' });
})

📒 运行后如下：node项目会多一个文件夹

2. 引入fs ，Node.js 内置的文件系统模块，用于处理文件和目录的读取、写入、修改和删除等操作

const fs = require('fs');

3. 接收一个pdf文件，下载依赖并引入：npm install pdf-lib，根目录创建一个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 {
        // 读取上传的文件内容
        const fileContent = fs.readFileSync(filePath);
        // 创建一个新的 PDF 文档
        const pdfDoc = await PDFDocument.create();
        // 将上传的文件作为附件嵌入到 PDF 文档中
        const attachment = await pdfDoc.embedPdf(fileContent);
        // 创建一个新的页面，并添加一个链接到附件文件
        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项目，

📒3. 前端上传一次请求后node运行如下，（前端代码在最后一条）

✏️ 2. node开发的借口对接vue3管理系统

使用接口时候node项目要是运行状态，不能关闭

1. vue3+ts+element-plus项目相关笔记

以上已经实现node开发的通过get获取到mysql中用户列表数据，后边将获取到的数据。
使用axios接入到vue3+ts项目中
关于vue3+ts项目搭建和axios引入可以看这两篇笔记，
⏭️
vue3+ts+element-plus管理系统实际开发业务之增删改查
⏭️ 从0实战一个 vue3+ ts+element-plus
项目

2. 新建api文件adminTable.ts,并添加一个get请求方法（vue3前端项目）

3. 获取列表数据并渲染到页面

* 引入get请求方法到tableList.vue文件中，并配置列表字段

import {adminList } from '../../api/adminTable'
let tableData = ref([])
//---- 获取列表数据相关代码 ----
onMounted(() => {
    adminList().then(((res: any) => {
        console.log(res.dataList)
        tableData=res.dataList
    }))
})

📒 *运行效果

* 踩了个小坑-- reactive() 不可重新赋值（会丢失响应性），如果需要赋值操作需要使用ref，ref() 有一个 .value 属性可以用来重新赋值

4. 添加一条数据到表格中

* 引入post请求方法并添加到tableList.vue文件中

• 请求方法设置
  

* 引入使用

import { addList } from '../../api/index'

* 具体表单和获取数据提交在之前同系列博客有写过，这里直接用。

📒 发起请求

本人发布文章都是个人学习笔记，如果有不对的希望路过的能指出，感谢！