使用vue+elementUI编写运营活动生成工具

前端切图的对象，很大一部分是公司营销活动类和纯展示类的页面，这一类页面通常有以下特点：

1.页面：切片(cuts的添加和删除)、功能区域(map、area或absolute操作对象)、模块(include的固定代码)、组件(components的调用和配置)；

2：组件： 一份代码 + 一份数据，可复用组装。

3.有规则的数据监控和上线配置；

4.实时预览及快速发布上线。

以下为采用vue+elementUI制作运营活动工具的实践。

源码地址: JZ_Activity

活动上线流程：

1.新建活动页面，配置信息(页面标题，生成URL，分享图标及描述)

2.上传切好的各个切片(暂存于临时目录，活动生成后自动删除)

3.进入编辑页后选择组件(如：链接，功能性按钮，表单等等，可以根据需求自行开发)，框选组件位置和尺寸

4.生成代码 =>

1)一键上传到服务器(需配置好对应上传目录及权限)

2)下载代码，编写无法用编辑器实现的特定需求后上传(活动代码压缩包)；

组件开发流程：

1.新建vue组件.

2.进入活动编辑页

3.添加 - 选择组件 , 框选组件位置和尺寸

实现编辑页功能：

    import Vue from 'vue'export default {  components: {},  data () {    return {      defaults:{        width:0,height:0,left:0,top:0,        memorySize : true,//记住上一次尺寸        currentCutName:''      },      pageUrl:null,//生成地址      info:{},//活动信息      fileList : [],//切片列表      currentMoveArea : null,//补充未快速响应的移动事件      currentChangeArea : null,//补充未快速响应的移动事件      areaTypeList :[        {          name:'组件库',          type:2,          data:[            { key : 'slider-zhucai' , icon : 'menu' , text : '主材轮播',width:300,height:200},            { key : 'slider-fangan' , icon : 'menu' , text : '整装方案轮播',width:300,height:200},            { key : 'slider-ybj' , icon : 'menu' , text : '样板间轮播',width:300,height:200}          ]        },        {          name:'热区元素',          type:3,          data:[            { key : 'open-form' , icon : 'view' , text : '弹出表单',width:100,height:50},            { key : 'open-link' , icon : 'view' , text : '超链接',width:200,height:50}          ]        },        {          name:'表单录入',          type:3,          data:[            { key : 'input-name' , icon : 'edit' , text : '姓名',width:200,height:50},            { key : 'input-telephone' , icon : 'edit' , text : '电话',width:200,height:50},            { key : 'input-mianji' , icon : 'edit' , text : '面积',width:200,height:50},            { key : 'input-text' , icon : 'edit' , text : '文本',width:200,height:50},            { key : 'input-submit' , icon : 'check' , text : '提交',width:200,height:50}          ]        }      ]    }  },  filters: {    imgUrl (name) {      return Vue.globalOptions.root + '/static/server/custom/images/' + name;    }  },   methods: {    init (info,fileList){      this.info = info      this.fileList = fileList    },    add (item,type){      var width,height,left,top;      if(this.defaults.memorySize && this.defaults.left != 0 && item.name == this.defaults.currentCutName){          width = this.defaults.width;          height = this.defaults.height;          left = this.defaults.left;          this.defaults.top += this.defaults.height + 10;//跟上一个area加点间距          top = this.defaults.top      }else{          width = this.defaults.width = type.width;          height = this.defaults.height = type.height;          left = this.defaults.left = 100;          top = this.defaults.top = 20;      }      this.defaults.currentCutName = item.name;      item.areaList.push({        type:type,        drag:{          move_flag:false,          change_flag:false,          mousePosition:{x:0,y:0},          areaPosition:{x:0,y:0},          areaSize:{width:0,height:0}        },        left:left,        top:top,        width:width,        height:height      });    },    clear (item){      item.areaList = [];      this.defaults.width = 0;      this.defaults.height = 0;      this.defaults.left = 0;      this.defaults.top = 0;    },    move_down (event,area){      if(!area.drag.move_flag){        this.currentMoveArea = area;        area.drag.move_flag = true;        area.drag.mousePosition = {x:event.clientX,y:event.clientY};        area.drag.areaPosition = {x:area.left,y:area.top};      }    },    move_move (event,area){      if(area.drag.move_flag){        let left = area.drag.areaPosition.x + event.clientX - area.drag.mousePosition.x;        let top  = area.drag.areaPosition.y + event.clientY - area.drag.mousePosition.y;        area.left = left > 0 ? left : 0;        area.top = top > 0 ? top : 0;        if(this.defaults.memorySize){          this.defaults.left = left;          this.defaults.top = top;          this.defaults.width = area.width;          this.defaults.height = area.height;        }      }    },    move_up (event,area){      if(area.drag.move_flag){        area.drag.move_flag = false;      }    },    remove (event,area,item){      removeObjWithArr(item.areaList,area);      //设置最后一个area为默认尺寸      if(item.areaList.length>0){        let lastArea = item.areaList[item.areaList.length-1];        this.defaults.width = lastArea.width;        this.defaults.height = lastArea.height;        this.defaults.left = lastArea.left;        this.defaults.top = lastArea.top;      }else{        this.defaults.width = 0;        this.defaults.height = 0;        this.defaults.left = 0;        this.defaults.top = 0;      }    },    change_down (event,area){      event.cancelBubble = true;      if(!area.drag.change_flag){        this.currentChangeArea = area;        area.drag.change_flag = true;        area.drag.mousePosition = {x:event.clientX,y:event.clientY};        area.drag.areaSize = {width:area.width,height:area.height};      }    },    change_move (event,area){      if(area.drag.change_flag){        var width = area.drag.areaSize.width + event.clientX - area.drag.mousePosition.x;        var height = area.drag.areaSize.height + event.clientY - area.drag.mousePosition.y;        area.width = width > 50 ? width : 50;        area.height = height > 30 ? height : 30;        if(this.defaults.memorySize){          this.defaults.width = width;          this.defaults.height = height;          this.defaults.left = area.left;          this.defaults.top = area.top;        }      }    },    change_up (event,area){      if(area.drag.change_flag){        this.currentMoveArea = null;        area.drag.change_flag = false;      }    },    cut_move (event){//补充未快速响应的移动事件      if(this.currentMoveArea != null){        this.move_move(event,this.currentMoveArea);      }else if(this.currentChangeArea != null){        this.change_move(event,this.currentChangeArea);//补充未快速响应的移动事件      }    },    cut_up (event){//结束未快速响应的移动事件      if(this.currentMoveArea != null){        this.currentMoveArea.drag.move_flag = false;        this.currentMoveArea = null;      }else if(this.currentChangeArea != null){        this.currentChangeArea.drag.change_flag = false;        this.currentChangeArea = null;      }    },    save (){      var form = {          info:this.info,          cutList:this.fileList        };        var container = this.$refs.container;        var width;        if (window.getComputedStyle) {            width = window.getComputedStyle(container, null).width;        } else {             width = container.currentStyle.width;        }        form.ratio = (parseFloat(width)/1920).toFixed(2);        this.$post('activity/build', form, { emulateJSON: false }).then(function(data){          data = JSON.parse(data.bodyText);          if(data.code == 0 ){            this.$message({              message: '已存在的页面地址(请确认活动路径和页面名称是否重复)！',              type: 'warning'            });          }else{            this.pageUrl = "//localhost:8999/preview/" + this.info.url + '/' + (this.info.type=="1"?"pc":"mobile");          }          //this.$emit('close');          //this.$emit('reload');        })    }  }}

生成数据结构：

代码生成：

点击生成活动时：提交到本地nodejs server，实现以下步骤：

1.新建活动代码目录build；

2.匹配活动模板，拼接HTML字符串，生成至build目录

3.拷贝默认携带的js，images等资源至build目录

4.生成build压缩包或上线代码

5.清空暂存目录

  module.exports.build = function(req,res,next){    var info = req.body.info;    var cutList = req.body.cutList;    var ratio = req.body.ratio;    var type = info.type == "1"? "pc":"mobile";    var formIndex = 1;    var calculate = function(value){        if(type=="pc"){            return (value/ratio).toFixed(2) + 'px';        }else{            return (value/ratio/1920*100/10).toFixed(2) + 'rem';        }    };              //check dir exist    var output = Config.root + '/server/custom/output/' + info.url;    if(!fsExtra.pathExistsSync(output)){        fsExtra.ensureDirSync(output);    }    if(fsExtra.pathExistsSync(output + '/' + type )){        res.json({success:true,code:0});        return;    }else{        fsExtra.ensureDirSync(output);    }    //make html    var html_content = '';    for(let c = 0 ; c < cutList.length ; c++){        let cut = cutList[c];        let initForm = false;        if(cut.areaList.length == 0)            html_content += '<img src="<%= images(\'' + cut.name + '\') %>" alt="家装季" />\n';        else{            html_content += '<div class="activity-module">\n';            html_content += '<img src="<%= images(\'' + cut.name + '\') %>"  alt="家装季" />\n';            for(let a = 0 ; a < cut.areaList.length ; a++){                let area = cut.areaList[a];                let styles = 'top:' + calculate(area.top) + ';left:' + calculate(area.left) + ';width:' + calculate(area.width) + ';height:' + calculate(area.height) + ';';                switch(area.type.key){                    case 'open-form':                        html_content += '<button class="activity-button" style="'+ styles +'"></button>\n';                        break;                    case 'input-name':                        if(!initForm){                            initForm = true;                            html_content += '<div id="j_form' + formIndex++ + '" form-baoming="' + c + '" >\n';                        }                        html_content += '<input type="text" class="c1" data-placeholder="请输入您的姓名" style="'+ styles +'" />\n';                        break;                    case 'input-telephone':                        if(!initForm){                            initForm = true;                            html_content += '<div id="j_form' + formIndex++ + '" form-baoming="" >\n';                        }                        html_content += '<input type="tel" class="c2" data-placeholder="请输入您的联系方式" maxlength="11" style="'+ styles +'" />\n';                        break;                    case 'input-mianji':                        if(!initForm){                            initForm = true;                            html_content += '<div id="j_form' + formIndex++ + '" form-baoming="" >\n';                        }                        html_content += '<input type="tel" class="c3" data-placeholder="请输入您的房屋面积" maxlength="11" style="'+ styles +'" />\n';                        html_content = html_content.replace(new RegExp('form-baoming=\"' + c + '\"'),'form-baoming="baojia"');                        break;                    case 'input-text':                        if(!initForm){                            initForm = true;                            html_content += '<div id="j_form' + formIndex++ + '" form-baoming="" >\n';                        }                        html_content += '<input type="text" data-placeholder="请输入您的房屋面积" maxlength="11" style="'+ styles +'" />\n';                        break;                    case 'input-submit':                        if(!initForm){                            initForm = true;                            html_content += '<div id="j_form' + formIndex++ + '" form-baoming="" >\n';                        }                        html_content += '<button class="btn_submit" style="'+ styles +'"></button>\n';                        break;                          }            }            if(initForm) html_content += '</div>\n';            html_content += '</div>\n';                              }    }    //build html    var html_template_url = Config.root + '/server/custom/template/' + type + '.html';    var html_build_url = Config.root + '/server/custom/build/' + type + '/' + type + '.html';    var html = fs.readFileSync(html_template_url,"utf-8");    html = html.replace(/\[node-build-activity-title\]/g,info.title);    html = html.replace(/\[node-build-activity-modules-placeholder\]/g,html_content);    fs.writeFile(html_build_url,html,function(err){        if (err) throw err;                          //build js                  //build images        var images_build_url = Config.root + '/server/custom/build/' + type + '/' + type + '/images';        fsExtra.removeSync(images_build_url);        fsExtra.copySync(imagesUploadDir,images_build_url);                  //copy default images        var images_default_url = Config.root + '/server/custom/template/' + type + '/images';        fsExtra.copySync(images_default_url,images_build_url);                          //copy all to custom        var all_build_url = Config.root + '/server/custom/build/';        fsExtra.copySync(all_build_url + type , output);                          //clear pool        fsExtra.removeSync(imagesUploadDir);        res.json({success:true,code:1});    });                    };

源码地址: JZ_Activity

原文链接：http://www.tliangl.com/article67.aspx