express+vue实现批量添加功能

express+vue实现批量添加功能

  前段时间由于后台的研究僧跑路了，我这个应届小菜鸟肩负起了全栈开发的工作，学得那是一个心累啊。项目没有很大，但麻雀虽小五脏俱全，写几篇文章不枉此行吧。废话不多说，华丽丽的分割线进入正题。

---

项目需求

   管理后台一个个录入表单太慢了，采用excel来批量添加数据到数据库中。由于是公司的项目，就不截图了。还有项目中所用到的npm依赖安装也不做多余赘述。
   前端部分：vue全家桶+elementUI
   后台部分：express+formidable+xlsx+mongodb

前端采用饿了么的上传组件，无需使用axios来post提交，只需要配置好action即可。

 <el-upload ref="upload" action="/fashion/multiAdd" :show-file-list="false"
  class="upload-data" :on-success="multiAddSucc">
    <el-button slot="trigger" icon="el-icon-upload" type="success">批量导入</el-button>
 </el-upload>

顺带提一句，在开发环境中vue的项目采用npm run dev来调试，而后台是node的开发环境，在进行通信的过程中端口不一致，将会发生跨域。所以前端需要配置代理来访问后台。

          //  config/index.js
    '/fashion/*': {
        target: 'http://127.0.0.1:3020',
        changeOrigin: true
      },

而后台需要配置CORS允许跨域

   // app.js
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE,PUT');
res.header('Access-Control-Allow-Headers', 'Content-Type,Accept');
res.header('Access-Control-Allow-Credentials', 'true');

后台需要先接受前端传过来的excel文件，此处我们采用formidable中间件进行接受

// fashion.js
var express = require('express');
var router = express.Router();
var fs = require('fs');
var XLSX = require('xlsx');
var formidable = require('formidable'); 

router.post('/multiAdd', function (req, res) {
    var form = new formidable.IncomingForm();
    var xlsxJson;
    form.encoding = 'utf-8';            // 编码方式
    form.uploadDir = 'public/tmp';      // 临时上传路径
    form.keepExtensions = true;         // 保存后缀名
})

之后将上传的excel重命名并移动

 // fashion.js
 form.parse(req, function (err, fields, files) {
        // console.log(files);
        // 重命名并修改上传文件的路径
        var sourceFileName = files.file.name;
        var tempPath = files.file.path;
        var targetPath = 'public/upload/' + sourceFileName;
        fs.renameSync(tempPath, targetPath);
 })

  原本到这一步我们已经可以直接使用js-xlsx对excel进行解析成json，然后批量添加进入数据库就好了。但此处发现有一个坑，XLSX将excel转换成json时，无法将excel的日期格式正常转换。如2018/05/03，解析成json变成了一串数字。查了资料后，发现只要将日期单拎出来单独处理就好了。

let date = new Date(1900,0,dateVal-1); 

遂在我的项目中有以下代码

 // fashion.js
const workbook = XLSX.readFile(targetPath);
const sheetNames = workbook.SheetNames;
const worksheet = workbook.Sheets[sheetNames[0]];
xlsxJson = XLSX.utils.sheet_to_json(worksheet);
var len = xlsxJson.length;
for (let i = 0; i < len; i++) {
    let dateVal = xlsxJson[i].pub_time;
    let date = new Date(1900, 0, dateVal - 1).format('yyyy-MM-dd');   
    // console.log(date);
    xlsxJson[i].pub_time = date;
}

由于js直接new Date()时会出现时间，项目不需要时间。
注意在for循环中还对new Date进行了一次格式化，格式化的代码来源于网上。（赞一个）

Date.prototype.format = function (fmt) {
    var o = {
        "M+": this.getMonth() + 1, //月份 
        "d+": this.getDate(), //日 
        "h+": this.getHours(), //小时 
        "m+": this.getMinutes(), //分 
        "s+": this.getSeconds(), //秒 
        "q+": Math.floor((this.getMonth() + 3) / 3), //季度 
        "S": this.getMilliseconds() //毫秒 
    };
    if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
    for (var k in o)
        if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
    return fmt;
}

如上，我们将excel成功转换成了json。接下来的工作是批量添加到mongodb就好了。

    // fashions是我写的一个model
  fashions.insertMany(xlsxJson, function (err, docs) {
            if (err) {
                res.json({
                    status: '0',
                    msg: '批量导入出错，请检查表格格式',
                    result: ''
                })
            } else {
                res.json({
                    status: '1',
                    msg: '插入成功',
                    result: ''
                })
            }
        })

前端有个钩子函数处理el-upload组件上传成功的，即on-suceess函数。我们在前端做点上传友好提示吧。

multiAddSucc(res, file) {
        if (res.status == '1') {
          this.$message({
            message: '批量上传成功',
            type: 'success'
          })
          this.getFashionList(1, 1, 5);     // 这个函数是用来刷新数据的就不说了
        }
        else {
          this.$message.error(res.msg);
        }
      }