开发背景
某日接到大学某同学的一个活，他需要做一个人员信息的二维码，需要将人员基本信息还有N张扫描图片合成到一张图上。他的方法是简单粗暴的利用PS一个图一个图的合成（按照我的PS水平合成一张图的话大概耗时20分钟）。作为一个懂得粗浅前端的知识的我来说，这种方法显然是不可取的。综合需求，我决定使用
express搭建一个简单的人员信息录入系
统然后展示出来，再用phantomjs自动截取图片......
express安装及基本目录结构
首先就是安装express了，首先你的电脑要安装过nodejs和 npm
输入以下命令安装express以及项目目录初始化需要的 express generator
由于我们上传文件时需要用到express 的 multer中间件这里我们也给安装上
npm install express --save
npm install express-generator -g
npm install multer --save
OK现在一切就绪，见证奇迹的时刻到了，当 当 当
再命令行里输入
express -e
你将会得到由express generator 自动创建的一个基础的express项目目录和文件(如下所示)
下面我们来分析一下每个文件的作用分别是什么。###
- 首先
www这个是express的入口文件，主要作用就是对运行环境的配置，还有生成一个web服务器。 - 然后是public文件夹这个文件夹是由
express定义的一个服务器可访问静态文件存放的地方也就是网页图片css以及js
具体用法可以去 express官网查看。 -
routers文件夹包含了express的路由相关的文件，我们看一下这里面的index.js和users.js都分别包含什么内容。
**index.js**
**users.js**
可以看到这两个文件分别定义了当url分别输入
http://xxxxx.xx/ 和 http:/xxxxxx.xxx/users的不同的路由行为。而这两个路由文件的调用是在aap.js里发生的。
Paste_Image.png
-
view文件夹里面放的是express的视图层文件，也就是前端展示相关的文件，再本项目里是 EJS的模板文件， EJS是一个模板引擎除了 EJS外还有 Pug, Mustache, and Jade ，原来express默认的模板引擎是 Jade 现在是 EJS，关于模板引擎方面的知识大家可以参考express官网的信息。 - app.js 这个文件是各种资源引入，初始化express对象以及设置路由及模板引擎的文件。
-
package.json文件这个文件就是项目的配置文件了，项目的基本信息以及各种安装包依赖都在里面。
进行实际的开发
- 首先根据设计图做好展示页（index.ejs）（设计图就不放出来了，因为确实惨不忍睹）；
-
制作一个简单的数据上传页面模板文件(admin.ejs)；
-
index.js路由开发
var express = require('express'); // 引入express
var router = express.Router(); // 路由实例
var multer = require('multer'); // 引入multer中间件
// 初始化每次上传文件长度的flag值
var i = 0;
// 初始化将post传过来的req.body值缓存的对象
var getObj;
// 自定义multer上传文件的存储位置及文件名
var storage = multer.diskStorage({
// 定义文件存储位置
destination: 'public/upload',
// 重命名文件（如果未制定multer将生成随机名且无后缀）
filename: function (req, file, cb) {
// 判断上次上传文件的flag值是否大与此次上传的文件长度
if(i>req.files.length){
i = 0;
}
// 重命名文件此处cb是callback函数的缩写
cb(null, req.body.name+file.fieldname + i++ + '.jpg');
}
});
// 应用multer的配置使其生效
var upload = multer({storage: storage});
// post 请求时的返回
router.post('/', upload.any()/* 此处是引入multer处理上传的文件any()指接收任何文件 */, function (req, res, next) {
res.render('index', {obj: req.body});
console.log(req.body);
console.log(req.files);
console.log(upload.single('pic_person'));
next();
},function(req,res){
getObj = req.body;
});
console.log(getObj);
// get请求时的返回
router.get('/',function(req,res,next){
res.render('show',{obj : getObj});
});
// 导出路由
module.exports = router;
-
users.js
var express = require('express');
var router = express.Router();
/* GET users listing. */
router.get('/', function(req, res, next) {
res.render('admin',{title:"admin"});
});
module.exports = router;
主要就是定义了路由处理函数
总结
文中没有贴出模板文件，因为这个项目本身比较简单，只是一个工具，这篇文章也只是个人的一个总结，如果有感兴趣的同学何以去我得github上看看具体的代码。
github：alixwang
网友评论