vue3+ts+element-plus :使用node.js对接mysql进行表格数据展示
✏️ 1. 新建一个node项目
* 初始化node
-
查看node是否安装
node -v
-
初始化命令
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
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'
* 具体表单和获取数据提交在之前同系列博客有写过,这里直接用。
📒 发起请求
本人发布文章都是个人学习笔记,如果有不对的希望路过的能指出,感谢!
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgckhkf
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01