文档章节

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

yushulx
 yushulx
发布于 2015/03/02 08:51
字数 644
阅读 119
收藏 2

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


本文转载自:http://www.codepool.biz/nodejs/document-scanning-nodejs-express-jade.html

yushulx
粉丝 29
博文 107
码字总数 60955
作品 0
杭州
私信 提问
Node.js开发入门—使用AngularJS

做一个Web应用,一般都有前台和后台,Node.js可以实现后台,利用jade模板引擎也可以生成一些简单的前台页面,但要想开发出具有实际意义的现代Web应用,还得搭配一个Web前端框架。 AngularJS是...

foruok
2015/08/13
0
0
从零开始使用express搭建博客系统(一):前期环境构建与代码初始化

node 这里会有三篇文章,教你从零开始使用express搭建博客系统,每篇文章都很简单,希望大家看完文章能大致入门express。 一,安装node 直接在node官网进行下载,下载下来进行傻瓜式安装,安...

Darrell
2018/02/10
0
0
express web的一款mvc框架

express express相关的网站 http://expressjs.com/ http://www.expressjs.com.cn/ https://github.com/pugjs/pug https://pug.bootcss.com/api/g... web开发有这么常用的四款mvc (model(数据......

哈希
2017/10/21
0
0
Nodejs·构建web应用

1 首先是从基本的Nodejs服务方面讲述前后端统一语言在web应用中的作用; 2 然后讲了web中基本的知识,从请求方法到路由、从查询字符串到Cookie和Session以及缓存、从表单数据到上传文件、以及...

青夜之衫
2017/12/04
0
0
基于 Express+Gulp+BrowserSync 搭建一套高性能的前端开发环境

原文发布于我的博客 www.kisnows.com 为什么要搭这么一套开发环境 公司 Pc 端以前遗留的项目,都是基于 jekyll+ruby-sass 这一套比较老的技术搭建的。不过 jekyll 的模版继承加上 sass 强大预...

moqiao
2016/03/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

CRM、DMP、CDP都是什么?有什么区别?

Markter对CRM系统(Customer Relationship Management System,客户关系管理系统),营销自动化等概念都已经比较熟悉,也许DMP(Data Management Platform,数据管理平台)也多多少少有些了解。...

怡海软件-CRM
24分钟前
4
0
中台是什么,到底要解决什么问题?

故事的开始 这个最早由阿里在2015年提出的“大中台,小前台”战略中延伸出来的概念,最近在国内大热。阿里、腾讯、百度、京东、美团、滴滴等一众互联网巨头,从去年到今年,接连开始组织架构...

喵二狸
36分钟前
4
0
Linux Centos 7 - MySQL 5.7离线安装

内部网络通过离线包的方式进行安装。 一、下载 下载地址:https://dev.mysql.com/downloads/mysql/ 进入页面后,点击右侧链接。 下载对应版本。 通过xftp6等工具上传到服务器上。 二、安装和...

华山猛男
36分钟前
5
0
EventBus 3 全解

EventBus 3 全解 [TOC] 使用 一个基于观察者模式的事件发布/订阅框架. 用于模块间通信和解耦, 使用方便,性能高. 基本使用 1. gradle导入依赖库 implementation 'org.greenrobot:eventbus:3....

马湖村第九后羿
38分钟前
4
0
HTTP 协议

什么是HTTP协议? HTTP是hypertext transport protocol的缩写,即超文本传输协议。 是用于万维网服务器与本地浏览器之间传输超文本的传送协议。可以使浏览器更加高效,使网络传输减少。能够保...

彩色泡泡糖
49分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部