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即可正常使用
文章结束
要不,加老衲微信做个朋友?