VUE前端+Node后台模拟打印机Web即时打印
资源下载地址：https://download.csdn.net/download/sheziqiong/85788429
资源下载地址：https://download.csdn.net/download/sheziqiong/85788429
VUE + Element UI 作为前端，Node 的 Express 作为后台，模拟打印机的 Web 即时打印
开发背景
公司接到了这样一个用户需求，用户可以通过手机扫描打印机的二维码来打开打印机的 WebPage，然后可以通过 WebPage 来设定部分打印参数，并且可以向打印机发送打印文件，可以查看打印完毕的历史记录。
由于打印机端的固件程序开发还没有完成(二维码生成模块，打印部模块还在重构中)，为了保证前后端的开发同其他部门并行顺利进行，在没有打印机硬件的前提下，我决定先行模拟开发出一个演示版，模拟开发可以提前确定一部分 API 接口，等到打印机硬件开发结束，可以把我们的前端代码，嵌入的到打印机里，直接进入到测试阶段，以缩短我们的开发周期。
模拟方案提出
使用 VUE 框架 + Element UI 开发 Web 前端，使用 Node 的 Express 框架来模拟打印机后端，前端使用 axios 通信框架向 Express 发送请求，Express 接收到请求后，模拟打印机把设定的参数保存到文件中，把收到的打印文件数据保存到一个固定的目录中。如果目录中的文件可以完整的打开，就说明数据收到正确。
软件架构
接口设计
设定打印参数
方法：post
URL: /printer/parameter
参数：form: {
size: ‘’,
type: ‘’,
depulx: false,
tray: ‘’,
direction: ‘’
},
取得打印参数
方法：get
URL: /printer/parameter
取得打印历史数据
方法：get
URL: /printer/history
发送打印文件，打印机收到文件开始打印
方法：post
URL: /printer/upload
参数：formdata type=file
前端设计
组件结构
设计了三个组件: Home 组件(父组件)，Print 组件(子组件)，History 组件(子组件)
Home 组件：入口组件，负责加载两个子组件。
Print 组件：负责打印参数设定和打印文件的组件，在这个组件中使用 Element UI 的 el-form 和 el-upload。
History 组件：负责显示打印的历史记录，在这个组件中使用 Element UI 的 el-table。
模块关系
发送打印文件动作时序
发送打印文件代码参照
以下是局部代码，整体代码请参照上传到 Git 的代码
fileUpload () {if (this.fileList.length === 0) {this.$message({type: 'warning',message: '请先选择文件 !!! '})} else {this.$confirm('可以开始打印？', '打印确认', {distinguishCancelAndClose: true,confirmButtonText: '开始打印',cancelButtonText: '取消打印',type: 'info'}).then(async () => {while (this.fileList.length !== 0) {let data = new FormData()data.append('file', this.fileList.shift().raw)try {let response = await startPrint(data)if (response.status === 200) {this.$message({type: 'success',message: response.data.data})}} catch (error) {this.$message({type: 'error',message: '打印失败 : ' + error})}}}).catch(action => {this.$message({type: 'info',message: action === 'cancel'? '已经取消打印': action})})}},
整体画面
打印设定和发送打印文件画面
打印历史记录画面
后端设计
模块结构
整体结构，由如下中间件组成。浅绿色部分不是中间件是功能函数。
模块关系
模拟打印
模拟打印的实现在 printer 路由中间件实现，当服务器收到 http://XXXXX:8080/printer/upload 的请求后，读出请求体的文件内容，保存到指定的路径下来完成模拟打印。
printer.post('/upload', upload.single('file'), async (req, res, next) => {try {// console.log(req)if (req.file == undefined) {throw new Error('你发送一个空文件');} else {let parameter = await getParameter()if (parameter == undefined) {res.status(202).send('请先进行打印参数设定')}else{let name = upload_path + `${req.file.originalname}`await rename(`${req.file.path}`, name)console.log('成功打印' + name)let time = getTime()let db = await getDb()db.upload.push({"ip": req.ip,"date": time,"file": `${req.file.originalname}`,"parameter": parameter})await saveDb(db)res.json({data: `成功收到文件: ${req.file.originalname}`})}}} catch (error) {next(error)}
})
开发环境
前端开发路径
后端开发路径
} catch (error) {
next(error)
}
})
资源下载地址：https://download.csdn.net/download/sheziqiong/85788429
资源下载地址：https://download.csdn.net/download/sheziqiong/85788429
VUE前端+Node后台模拟打印机Web即时打印相关推荐
- vue前端处理后台返回的Long型数据精度丢失
vue前端处理后台返回的Long型数据精度丢失 问题描述 开发时后端返回的id为Long型,结果发现俩id怎么会一样呢?如下图是控制台Preview返回的数据 正以为是后端那边数据有误时,我点开Res ...
- Vue前端-Flask后台跨域访问问题的处理
采用前后端分离的方式开发WEB应用,前端适用了Vue.js,后端用的是Flask. 在使用axios进行前后台交互时,浏览器控制台报错: blocked by CORS policy: No 'Acc ...
- vue前端+springboot后台实现人脸识别签到系统
项目背景:临近大四毕设,选了一个高校课时管理系统的项目,欠于没有什么可以拿得出手的亮点,老师建议我加入人脸识别的功能(人脸识别早已有现成的接口,百度ai免费使用). 这里先展示一下成果吧. 登录界面就 ...
- 前端vue不经过后台实现下载功能本地打印出现报错跨域问题
这段时间有个项目对接法院的项目,主要是内网实现笔录的一个下载打印的问题,主要来说一下打印和下载遇到的坑的问题.首先是打印的 问题,这边就是需求就是根据html的东西完了点击打印直接下载为docx的wo ...
- VUE前端从后台请求过来的数据进行转换数据结构
let label(){let _this = this; let _offset = (_this.pagination.currentPage - 1) * _this.pagination.pa ...
- vue前端如何向后台发送值_VUE前端从后台请求过来的数据进行转换数据结构操作...
我就废话不多说了,大家还是直接看代码吧` let label(){ let _this = this; let _offset = (_this.pagination.currentPage - 1) ...
- Vue Element+Node.js开发企业通用管理后台系统笔记完
第三四章 Vue进阶 emit和emit 和emit和on 用this.$on来定义一个事件, 并且指定事件的执行对象(函数), 他主要是用来干什么的呢 --事件的定义和消费 使用this.on来定义 ...
- java mysql物联网土壤智能监控web前端+java后台+数据接程序
博主介绍:✌在职Java研发工程师.专注于程序设计.源码分享.技术交流.专注于Java技术领域和毕业设计✌ 项目名称 java mysql物联网土壤智能监控web前端+java后台+数据接程序 视频效 ...
- 【前端Vue+后端Node.js+MySql】部署到服务器
[前端Vue+后端Node.js+MySql]部署到服务器 文章目录 [前端Vue+后端Node.js+MySql]部署到服务器 1.买服务器 2.服务器操作 2.1.修改服务器密码,xshell登录 ...
- 完整企业官网源码，前端基于Vue+ElementUI，后台基于基于core3 webapi，含数据库文件，含详情安装部署文档
完整企业官网源码,前端基于Vue+ElementUI,后台基于基于core3 webapi,含数据库文件,含详情安装部署文档 完整代码下载地址:完整企业官网源码 某工程管理有限公司企业官网 前端 新版 ...
最新文章
- leetcode算法题--Surrounded Regions
- 为什么batchnormalize 有效
- 自定义Exchange2003未送达报告(NDR)
- 关于LGame-0.2.9版的开发进度
- SQL Server 行转列，列转行。多行转成一列
- 【ArcGIS遇上Python】从入门到精通系列之第一章：ArcGIS Python简介
- c语言变量相等问题穷举法,C语言穷举法经典例题.ppt
- 若依的框架怎么样_若依框架的功能代码
- （32）SystemVerilog语言编写打两拍
- Zookeeper 夺命连环 9 问
- 控件无法安装的问题-Unable to execute file
- （课程笔记1）ENVI裁剪出Landsat8全色波段和其他波段的同一区域数据
- 计算机毕设 SpringBoot+Vue车辆租赁管理系统 网上汽车租赁系统 汽车租赁管理系统 汽车分时租赁系统Java Vue MySQL数据库 远程调试 代码讲解
- 【报告分享】休闲游戏商业化发行指南-穿山甲（附下载）
- 冰点还原忘记密码如何修改配置或卸载
- 由微博图床挂掉之后想到的
- screen和scp
- 情人节c语言程序,情人节c语言代码.doc
- HTML----锚标签
- Java解析JSON格式数据