记一次简单人员信息录入系统开发

开发背景

某日接到大学某同学的一个活，他需要做一个人员信息的二维码，需要将人员基本信息还有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