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

时间 2019-12-07

原文原文链接

背景

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

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

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

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

在作某个修改数据功能的时候，因为表单的全部数据，使用v-model绑定的，包括地址。es6

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

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

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

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

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

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

但因为参数组是从后台输出的接口获得的，也就是说，不一样的种类的商品，有不一样的参数组，有的可能只有1组参数，也有可能有4组api

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

参数组为单独一张表，如上面的是选择了茶具种类，有：分类、材质、风格、摆放空间，四种参数组（不一样的商品种类可能会有相同的参数组，但统一添加到此表中，即惟一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便可正常使用

文章结束

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