vue pc端网站项目开发坑点与难度记录

背景

在一pc端的web项目里，由于某些特性需要由动态语言处理，所以只在有需要使用vue来处理数据的页面，直接引入vue.js来处理。
由于刚开始并没有打算使用前端来渲染数据和处理交互，所以使用了一些非vue的ui和插件，导致后来冲突坑点不少。
非vue模块化下使用vue，虽然不能import vue文件，使用组件方式也有点恶心，但处理一些事情还是不错的。

使用formdata提交表单数据

先上代码

        var that           = this;
        var myForm         = document.getElementById("form_add");
        var submitFormData = new FormData(myForm);
        submitFormData.append('action', this.action);//添加自定义的参数，这里是动作，添加或者修改
        layer.load(0,{time:500});
        $.ajax({
            url         : apiAddressAdd,
            type        : 'POST',
            dataType    : 'json',
            cache       : false,
            processData : false,
            contentType : false,
            data        : submitFormData
        })

有2个参数是必须设置processData 和 contentType

这里要说的是contentType，经实践，不管是否有包括file上传文件或图片，则必须设置为false, 设置为true或不设置，后台都不能获取

jquery赋值不响应input使用v-model绑定的值

在做某个修改数据功能的时候，由于表单的所有数据，使用v-model绑定的，包括地址。

地址使用了一个jquery地址选择器，当选择器选择好地址的时候，只是赋值给input，并没有触发v-model绑定的数据

查看了一篇文章，赋值之后，需要触发input的原生input事件，才会响应v-model：方式如下

$("#city-picker")[0].dispatchEvent(new Event('input'))

商品筛选之参数组选择组件

这是很常见的一个功能，本处只是记录一下思路过程，以防日后老年痴呆，请看下图

如图中，有4个参数组，每个参数组只能选定一个参数，选中的参数在下面以标签，点击X可以去掉相应已选择的标签

但由于参数组是从后台输出的接口得到的，也就是说，不同的种类的商品，有不同的参数组，有的可能只有1组参数，也有可能有4组

本篇实现此处功能的前提，数据库表应该设计为：

参数组为单独一张表，如上面的是选择了茶具种类，有：分类、材质、风格、摆放空间，四种参数组（不同的商品种类可能会有相同的参数组，但统一添加到此表中，即唯一id值不会重复）
参数组的参数项为单独一张表，关联参数组表，和上面情况一样，有可能和别的商品种类的一样的参数组中有相同的参数项（名字就算相同，但是同表中唯一id值不会重复）

这2点也是实现本筛选功能的基础。

以下为代码的实现思路：

先看json数据结构

如图所示，和上面的筛选组件截图对应，4个参数组，每个参数组不同的id,所有参数项的id也不同,即便name相同也没有关系。

请求到参数组的时候，做如下处理

res.data.paramGroup.forEach(function(item){
   vm.$set(vm_data.param_group_active,'active_'+item.gid,0);
})

//更新数据
that.dataParamsGroup = res.data.paramGroup;

把参数组所有数据原始格式放到一个叫param_group_active中

这个对象，用来标识当前哪组参数选中的哪项参数项，0，当然就是默认没有选中

然后并遍历参数组，以参数组的唯一id为标识，创建一个响应式的对象，值为0 （注意，这里说的是参数组，非参数组下面的参数项）

得到如下对象

然后看参数组dom结构：

里面的A标签，就是参数的详细项，激活的状态，就是常见的tab的那个做法

选中当前标签，当然是以class来表示了，上面绑定的class，取决于参数项自己的id,对应 param_group_active组中，激活的值

点击参数项的时候：

参数带入：参数组和id,当前点击的参数项的id,并且vue的set方法来设置响应数据

比如当我选择风格中的花鸟之后，风格的唯一id是14，而花鸟是12

很明了了，可以理解成动态tab。。。

接下来，选中的参数，都要显示在下排，并可以取消。结构如下：

根据我们的激活参数项的数据param_group_active循环出来，大于0，当然是有了选择，

然后你会看到paramsFlattening[item]这个东西，很明显这是一个object，item一看就知道是当前选中的参数项的id值，

这里是要显示所选中的参数项的名称，所以，这个paramsFlattening里面肯定放了参数项的数据

但ahax取回来的数据是一个二维object,暂且这么叫，我们想一个办法，我们在这例子中暂时叫参数扁平化

看代码：

也就是把所有参数项，放到一个新的object中（注意，我们这里的paramsFlattening是一个计算属性）

以参数项的id为键名，中文名称为值，遍历放进去，得到了这么个对象：

所以我们在dom结构中直接以插值方式调用：{{paramsFlattening[item]}} ，便可以显示所选中的标签的对应中文名称。

接下来是取消选中的标签

从上面的截图中可以看到点击了i 标签（是一个x图标）调用了deleteParam,并带进了参数item, 是参数项的id

来看这个方法：

遍历存放激活状态的对象，这里的key，就是这串:

看哪个对象（每个参数组）的id（记得这里存的是激活的参数项的id）值和带进来的id值一致，就设为0，

这样，选中的标签那个地方，是依赖这里值大于0才显示的，设为0就不显示了

最后你可能会问，选中是选中了，但怎么提交这些参数数据

在本例中，老衲把这些选中的参数项id值，堆成一块，用,号分隔，开来，当然后台查询的时候还要处理这个数据

封装一个不完美的图片上传类

我们暂且称它为类，虽然不是用es6 class...此处只当充数字量记录一下，没什么难度
使用场景：多个地方需要上传图片，于是搞了这么个东西，有可能直接点file元，也有可能点击的是别的触发元素，比如换头像的时候。

依赖jquery和layer消息,使用formdata数据来当ajax发送的数据，好像有file元素，就要设置这2项:

contentType : false,
processData : false

由于项目中api接口直接统一写进配置文件，则这里不做成参数带进方式

/**
 * [图片上传类，统一上传地址]
 * @param {[type]}   params [description]
 * @param {Function} cb     [description]
 */
function ClassUploadImage(params,cb){
    this.__proxyEl      = params.proxyEl;
    this.__imgFileInput = params.imgFileInput;
    this.__module       = params.module;
    this.__cb           = cb ;
}
//初始化过程
ClassUploadImage.prototype.init = function(){
    var that = this

    //先判断是否有layer和jquery
    if(!window.$ || !window.jQuery){alert('没有jquery!'); return false;}
    if(typeof layer == 'undefined'){alert('没有引入layer!'); return false;}

    //绑定代理解发file事件的元素
    $(that.__proxyEl).on("click",this,function(){
        $(that.__imgFileInput).trigger('click');
    })

    //绑定文件表单的选择事件，当选择了文件，立即执行上传
    $(that.__imgFileInput).change(function(){
        var files   = $(this)[0].files[0];
        var formObj = new FormData();
        formObj.append('image', files);
        formObj.append('module', that.__module);
        that.upload(formObj);
    });
}
//上传过程
ClassUploadImage.prototype.upload = function(formObj){
    var that = this;
    console.log('执行上传！');
    layer.load(0, {shade: false,time:300});
    $.ajax({
        url         : apiImageUpload,
        type        : 'post',
        dataType    : 'json',
        data        : formObj,
        cache       : false,
        contentType : false,
        processData : false
    })
    .done(function(res) {
        //此处未对返回的报文进行状态码判断
        $.lightTip.success(res.msg);
        that.__cb(res);
    })
    .fail(function(e) {
        console.log('不知发生了什么错误...');
    })
}

使用：

   //上传图片初始化
    var myUploadImg = new ClassUploadImage({
        proxyEl:'#proxyuploadbutton,#proxyuploadimg',
        imgFileInput:'#image',
        module:'headimg'
    },function(res){
        $(".header_original_img").val(res.img);
        $("#proxyuploadimg").attr('src',res.imgurl)
    });
    myUploadImg.init();

参数__proxyEl为代理input的点击事件元素，如果忽略此参数，就只能直接点击file元素

data 里的Object变量中的Array类型属性值坑人记录

场景：产品详情页数据返回的对象中，其中有一个是数组类型，是产品的相册

{
    "code": 0,
    "msg": "数据正常！",
    "data": {
        "id": 1,
        "img": "http://dummyimage.com/360x360",
        "name": "唐五代耀州窑剔刻莲瓣水注",
        "artist": "艺术家名字",
        "authorId": 93,
        "price": "250000",
        "dsc": "镰田先生的天目已经烧造几十年，作品风格古朴自然 ，口部自然露胎，和传统油滴建盏有很多相似之处。微距下，斑纹底部透明有反射膜 ，膜上斑纹大而立体，表面微有有触感。胎体轻盈，色为棕，表面略泛光，喝茶之佳物。",
        "view": 779,
        "pcid": 2,
        "album": [
            "http://lorempixel.com/600/600/technics/",
            "http://lorempixel.com/600/600/technics/",
            "http://lorempixel.com/600/600/technics/"
        ],
        "birth": "1986-11-16",
        "birthplace": "安徽省 宿州市 埇桥区",
        "birthtype": 2,
        "awidth": "30",
        "aheight": "80",
        "liked": 57,
        "detail": "事拉我道象特据片四信厂华。种海点支育容量作积斗众运进。南界眼参派传我真音例活术者所。持人较方观切度题始可做习列。主万适等自件教相全门话取用。低金色其命么放从特长拉线经便。",
        "selled": 0,
        "favorite": 1
    }
}

如代码中的album,

如果在视图中直接使用：<img :src="dataProduct.album[0]"/>

可以正常显示图片，但是会报错，并且页面中其它地方某些纯粹的html结构出不来：

如果使用计算属性：

<div>{{albumFirstImg}}</div>

一样会报上面那个错误

开发工具中查看，确实是数组没错：

总结应该因为Vue数据包装的问题，没有学习研究过vue源码，不知怎么回事，先放一边
解决办法：直接把返回数据中的album再赋值到data根对象下的album即可正常使用

文章结束

要不，加老衲微信做个朋友？