Vue

最近在做一个叫资源树的小型商城项目,其中有一个场景需要在小程序中嵌入的web-view内向小程序发起支付请求完成支付,折腾了一天,在网上各种经验的帮助下总算搞定了,现在记录一下流程 环境&技术栈 采用前后端分离的开发模式 接口请求协议:https+http(https为了兼顾小程序) 后端:lnmp 前端:vue-cli+element-ui开发的spa(路由模式为history) 小程序:pages/index/index.js(默认入口文件,用于获取openid并跳转),webview页面(嵌套了spa),wxpay页面(发起小程序支付),webvieworders页面(支付成功后跳转) 步骤 index.js在onload里使用wx.login获取到code参数,并携带该参数向后台服务器请求openid 携带后台返回的openid通过小程序路由跳转至webview页面，webview页面的js在onload里通过options参数获取到携带的openid后通过webview发送至spa应用中 spa入口接收到openid后保存至cookie 在支付页面获取该openid并向后台(调用微信统一下单接口并返回后续wxpayment方法所需参数的地址)发起请求，拿到服务器返回的jsParameters后携带该参数通过小程序提供的wx.miniProgram.navigateTo方法跳转回小程序支付页面(逻辑自己写)，支付页面接收到该参数后解析成js对象并在请求小程序支付方法中携带该参数 处理支付成功或失败逻辑即可 已完成初步测试以及小程序上线

问题 最近在使用SSR(服务器端渲染)方式引入vue+element-ui开发一个商城项目的时候遇到一个问题:因为商城的订单是可能包含多个商品,所以订单的评价涉及到同一个页面多组表单的异步提交(每一组表单包含评价内容和上传的多张图片) 由于element-ui的upload组件默认没有提供多个组件在同一页面绑定不同模型的接口,因此在网上搜了一下,搜到了这篇文章,文章中最后的建议是自己封装一个组件来调用upload组件,使用的时候直接调用自己封装的这个组件,但是项目时间紧迫,我这边希望更快的搞定这个问题,于是想到了以下办法 解决方法 在upload组件的接口中,有一个data接口,可以绑定需要上传的除文件之外的其他数据对象,由于订单评价页的一个特点:每个商品不论数量大小都只会被评价一次,因此此处直接将当前数组中商品的uuid绑定到data并传递至上传接口,此操作后表单提交的payload就会包含类似如下数据: Content-Disposition: form-data; name="uuid" E7D947BA-79F1-11E8-B786-00163E063020 而后台文件上传位置可以做一个判断:如果接收的上传请求包含额外参数,则全部原路返回,因此在上传成功后又会在on-success这个钩子接收到这个唯一的uuid,此处对当前页面商品数组进行遍历并进行比对,在包含返回的uuid对应数组的对应保存组图路径的数组push当前上传成功的图片路径 this.data.goods_list.forEach((e,k)=>{ if(e.uuid === response.uuid){ e.evaluate.thumbs.push(response.url) } }) 以下是完整代码(html): <div class="userEva-cont" v-for="(item,key) in data.goods_list"> <table class="userEva-table"> <thead> <tr> <th width="420">商品</th> <th width="280">型号</th> <th width="280">数量</th> </tr> </thead> <tbody> <tr> <td> <div class="evaluate-pic"><a :href="'/product/'+item.goods_id+'.html'"><img :src="'__PHOTO__'+item.thumb"></a></div> <div class="evaluate-text"> <h3><a>{{item.goods_name}}</a></h3> <p>编号：{{item.uuid}}</p> </div> </td> <td>型号：{{item.goods_specification_name}}</td> <td>{{item.num}}</td> </tr> </tbody> </table> <div class="evaluate-wrap"> <form> <dl> <dt>评论：</dt> <dd> <textarea v-model="item.evaluate.content" placeholder="评论内容"></textarea> </dd> </dl> <dl> <dt>晒单：</dt> <dd> <el-upload class="upload-demo" :action="basePath" :on-preview="handlePreview" :on-remove="handleRemove" drag multiple :data="item" :limit="5" :on-success="setFileList" list-type="picture"> <i class="el-icon-upload"></i> <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div> <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> </el-upload> </dd> </dl> <div class="evaluate-btns"> <button type="button" class="evaluate-sub" @click="submit(item.evaluate,item)">提交评价</button> <label><input type="checkbox" class="evaluate-show" v-model="item.evaluate.is_anonymous">匿名评价</label> </div> </form> </div> </div> js ...

关于axios的使用细节 基于vue做spa开发,个人很多时候使用的请求扩展是axios,这个扩展会把常用的请求封装好发送出去,使用的时候只需要传参数即可。今天遇到的一个问题是后端接口接收get方式传参,我这边有一个数组需要通过get方式传递过去,假设数组名称是:ids,请求中默认就是ids[]的形式,接口需要提供ids的形式,此时需要引入qs扩展,并在请求位置添加一项配置,以转换参数格式,示例代码如下: /* * todo :会员审核列表的通过与驳回(批量和单个为同一个方法), 需要管理员登陆 * @param data object * */ export function userInfoCheck(data) { return request({ url: '/backend/userInfoCheck', method: 'get', params: data, paramsSerializer: function(params) { return qs.stringify(params, { arrayFormat: 'repeat' }) } }) }

当下公司在做一个媒体门户网站,后台由另一家公司使用java开发并提供接口,本人负责开发后台页面,使用的是vue-element-admin开发 下面说一下问题场景,在开发过程中有一个后台管理员角色页面,其中包含一个表单dialog,在其中使用了el-tree组件,相关 代码结构如下: <div class="filter-container"> <el-button class="filter-item" style="margin-left: 10px;" v-waves @click="handleCreate" type="primary" icon="el-icon-edit">新增角色 </el-button> </div> <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" width="50%"> <el-form :rules="rules" ref="dataForm" :model="temp" label-position="top" label-width="90px" style='width: 400px; margin-left:50px;'> <el-form-item label="选择权限" prop="sysPermission"> <el-tree ref="tree" :data="sysPermission" :props="formProps" show-checkbox @check-change="handleCheckChange" node-key="id"></el-tree> </el-form-item> </el-form> </el-dialog> 相关的js如下: export default { name: 'sysRoleList', data() { return { tableKey: 0, list: null, total: null, listLoading: true, formLoading: true, listQuery: { page: 1, limit: 20, importance: undefined, title: undefined, type: undefined, sort: '+id' }, dialogFormVisible: false, dialogStatus: 'update', textMap: { update: '编辑角色', create: '新增角色' }, rules: { sysRoleName: [{required: true, message: '必须填写角色名称', trigger: 'blur'}] }, // 表单数据 temp: { id: '', sysPermissionList: [], sysRoleName: '' }, currentKeys: [], // 表单权限字段映射 formProps: { label: 'sysPermissionName' }, sysPermission: {} } }, created() { // 列表数据 // this.getList() // 获取所有权限 // this.findAllSysPermission() }, methods: { /* * todo:checkbox状态变更监听 * */ handleCheckChange(data, checked, indeterminate) { const idObj = {id: data.id} this.temp.sysPermissionList.push(idObj) }, resetTemp() { this.temp = { id: '', sysRoleName: '', sysPermissionList: [] } }, handleCreate() { this.resetTemp() this.dialogStatus = 'create' this.currentKeys = [] this.dialogFormVisible = true this.$nextTick(() => { this.$refs['dataForm'].clearValidate() this.$refs.tree.setCheckedKeys(this.currentKeys) }) }, handleUpdate(row) { this.resetTemp() this.dialogStatus = 'update' this.dialogFormVisible = true this.temp = Object.assign({}, row) // copy obj this.currentKeys = [] row.sysPermissionList.forEach((value, index) => { this.currentKeys.push(value[0]) }) this.$nextTick(() => { this.$refs['dataForm'].clearValidate() this.$refs.tree.setCheckedKeys(this.currentKeys) }) } } } 需求: 需要在每次编辑数据的时候触发<el-tree>的方法setCheckedKeys 问题: 之前没有把this.$refs.tree.setCheckedKeys()写在this.$nextTick的callback之中,因此会提示: ...