使用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