VUE框架 + Element UI + Node 模拟打印机的 Web 即时打印【100010758】
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)
}
})
开发环境
前端开发路径
后端开发路径
♻️ 资源
大小: 2.62MB
➡️ 资源下载:https://download.csdn.net/download/s1t16/87430302
注:如当前文章或代码侵犯了您的权益,请私信作者删除!
相关文章
- webpack+vue-cli+ElementUI+vue-resource 前端开发
- VUE - 路由跳转时设置动画效果
- VUE - vue.runtime.esm.js?6e6d:619 [Vue warn]: Do not use built-in or reserved HTML elements as component i
- vue中v-for数组和对象的循环
- [Vue @Component] Simplify Vue Components with vue-class-component
- 高性能流媒体服务器EasyDSS前端重构(三)- webpack + vue + AdminLTE 多页面引入 element-ui
- Easy Mock以及Vue+Mock.js模拟数据
- [Vue @Component] Simplify Vue Components with vue-class-component
- vue v-for遍历json
- vue商城项目开发:封装banner组件、组件参数传递
- standalone vue initialization process - Vue应用的初始化过程
- vue-router路由的安装、配置、具体用法和Vue-router学习笔记
- Vue CLI 4.x安装成功,但是无法运行vue-V等指令。报错vue -V 不是内部或外部命令,也不是可运行的程序或批处理文件解决方案!!!
- vue品牌列表案例demo
- Vue、Vuejs从入门到精通 | vue-router详解
- 测试开发之Vue学习笔记-Vue基础
- Vue(八)vue 脚手架、脚手架创建项目示例
- Vue(五)计算属性、过滤器、axios、vue 生命周期
- Vue: vue-router路由
- Vue:第一个vue-cli项目