♻️ 资源大小2.62MB➡️资源下载https://download.csdn.net/download/s1t16/87430302VUE Element UI 作为前端Node 的 Express 作为后台模拟打印机的 Web 即时打印开发背景公司接到了这样一个用户需求用户可以通过手机扫描打印机的二维码来打开打印机的 WebPage然后可以通过 WebPage 来设定部分打印参数并且可以向打印机发送打印文件可以查看打印完毕的历史记录。由于打印机端的固件程序开发还没有完成(二维码生成模块打印部模块还在重构中)为了保证前后端的开发同其他部门并行顺利进行在没有打印机硬件的前提下我决定先行模拟开发出一个演示版模拟开发可以提前确定一部分 API 接口等到打印机硬件开发结束可以把我们的前端代码嵌入的到打印机里直接进入到测试阶段以缩短我们的开发周期。模拟方案提出使用 VUE 框架 Element UI 开发 Web 前端使用 Node 的 Express 框架来模拟打印机后端前端使用 axios 通信框架向 Express 发送请求Express 接收到请求后模拟打印机把设定的参数保存到文件中把收到的打印文件数据保存到一个固定的目录中。如果目录中的文件可以完整的打开就说明数据收到正确。软件架构接口设计设定打印参数方法postURL: /printer/parameter参数form: {size: ,type: ,depulx: false,tray: ,direction: },取得打印参数方法getURL: /printer/parameter取得打印历史数据方法getURL: /printer/history发送打印文件打印机收到文件开始打印方法postURL: /printer/upload参数formdata typefile前端设计组件结构设计了三个组件: 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) } })开发环境前端开发路径后端开发路径