用Express和Jade搭建Web扫描和上传应用

最新推荐文章于 2022-04-14 21:38:50 发布

weixin_34208283

最新推荐文章于 2022-04-14 21:38:50 发布

阅读量87

点赞数

文章标签： json git python

原文链接：https://my.oschina.net/yushulx/blog/381123

版权

2019独角兽企业重金招聘Python工程师标准>>>

Express是一个用于nodejs的Web框架，通过配合模板引擎Jade，可以让Web应用的开发更加简洁高效。这里学习下如何使用Express和Jade来改造Web扫描上传应用。

参考原文：Document Scanning and Uploading in Node.js with Express and Jade

使用Express Application Generator创建工程

全局安装express generator：

npm install express-generator -g

通过命令行创建一个Dynamic Web TWAIN的工程：

express Dynamic_Web_TWAIN

看一下package.json里面的东西：

{
  "name": "Dynamic_Web_TWAIN",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "node ./bin/www"
  },
  "dependencies": {
    "body-parser": "~1.10.2",
    "cookie-parser": "~1.3.3",
    "debug": "~2.1.1",
    "express": "~4.11.1",
    "jade": "~1.9.1",
    "morgan": "~1.5.1",
    "serve-favicon": "~2.2.0"
  }
}

依赖的库都已经在了，现在通过命令来安装这些库：

npm install

运行程序：

node ./bin/www

现在可以试着打开http://localhost:3000/来访问一下页面。

使用Jade重写DWT应用代码

为了实现文件上传，我们需要在package.json里面增加一个依赖库multer：

现在把DWT SDK中的resources目录拷贝到public文件夹里：

打开/routes/index.js，修改title：

router.get('/', function(req, res, next) {
  res.render('index', { title: 'Dynamic Web TWAIN Demo' });
});

现在开始编辑jade模板。打开layout.jade，把需要用到的js文件include进来：

script(src='/Resources/dynamsoft.webtwain.initiate.js')
script(src='/Resources/dynamsoft.webtwain.config.js')

打开index.jade，把原来的HTML语言转换成jade的语法：

extends layout
 
block content
  h1= title
  p Welcome to #{title}
  #dwtcontrolContainer
  input(
    type='button'
    value='Acquire'
    onclick='AcquireImage()'
  )
  input(
    id='btnUpload'
    type='button'
    value='Upload Image'
    onclick='btnUpload_onclick()'
  )
  script(type='text/javascript').
        function AcquireImage(){
            DWObject.IfShowUI = false;
            DWObject.SelectSource();
            DWObject.OpenSource();
            DWObject.AcquireImage();
            }
            function btnUpload_onclick() {
                DWObject.HTTPPort = 3000;
                var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
                var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
                var strActionPage = CurrentPath + "upload";
                var strHostIP = "localhost";
                var sFun = function(){
                    alert('successful');
                }, fFun = function(){
 
                };
                DWObject.HTTPUploadThroughPostEx(
                strHostIP,
                DWObject.CurrentImageIndexInBuffer,
                strActionPage,
                "test.jpg",
                1,// JPEG
            sFun, fFun
            );
            }

对应的HTML是这样的：

<!DOCTYPE html><html><head><title>DWT Hello World</title><link rel="stylesheet" href="/stylesheets/style.css"><script src="/Resources/dynamsoft.webtwain.initiate.js"></script><script src="/Resources/dynamsoft.webtwain.config.js"></script></head><body><h1>Dynamic Web TWAIN Demo</h1><p>Welcome to Dynamic Web TWAIN Demo</p><div id="dwtcontrolContainer"></div><input type="button" value="Acquire" onclick="AcquireImage()"><input id="btnUpload" type="button" value="Upload Image" onclick="btnUpload_onclick()"><script type="text/javascript">function AcquireImage(){
    DWObject.IfShowUI = false;
    DWObject.SelectSource();
    DWObject.OpenSource();
    DWObject.AcquireImage();
    }
    function btnUpload_onclick() {
        DWObject.HTTPPort = 3000;
        var CurrentPathName = unescape(location.pathname); // get current PathName in plain ASCII
        var CurrentPath = CurrentPathName.substring(0, CurrentPathName.lastIndexOf("/") + 1);
        var strActionPage = CurrentPath + "upload";
        var strHostIP = "localhost";
        var sFun = function(){
            alert('successful');
        }, fFun = function(){
 
        };
        DWObject.HTTPUploadThroughPostEx(
        strHostIP,
        DWObject.CurrentImageIndexInBuffer,
        strActionPage,
        "test.jpg",
        1,// JPEG
    sFun, fFun
    );
    }</script></body></html>

创建一个上传目录upload 用于接收上传的文件，并用时间来重命名。在目录routes中，创建一个文件upload.js：

var express = require('express'); 
var router = express.Router(); 
var multer = require('multer');
 
router.use(multer({dest:"./upload/", 
    rename: function (fieldname, filename) {
        return Date.now()
    }
}));
 
module.exports = router;

在app.js中，把upload模块加载进来：

var upload = require('./routes/upload');
app.use('/upload', upload);

现在这个Web应用已经改造完成了。

视频

源码

https://github.com/DynamsoftRD/DWT-with-Web-App-Framework/tree/master/express_jade

git clone https://github.com/DynamsoftRD/DWT-with-Web-App-Framework.git

转载于:https://my.oschina.net/yushulx/blog/381123

weixin_34208283

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用Express和Jade搭建Web扫描和上传应用

2019独角兽企业重金招聘Python工程师标准>>> ...
复制链接

扫一扫