《京东E维》基于VUE+Webpack的单页面实践

本篇文章和大家聊一聊我们近期的项目——京东E维平台,这是一个专门为运维工程师设计的工单处理系统。它所要肩负的任务是,针对公司内部所有员工在办公时遇到的有关计算机、网络、软件方面等问题,通过E维平台发起问题上报请求。工程师通过该系统可以根据上报工单的紧急程度进行抢单、解决事件单、流转事件单、退回请求广场、挂起事件单等操作,这个系统一定程度上起到了提高办公效率的作用。 在与产品和研发沟通过后,我们发现,这个项目基本上所有交互部分都放在前端这里,研发只提供接口,可以做到前后端分离。因此经过小组讨论后,决定用 Vue 去实现。基于京东 E 维平台视觉稿的统一性,且页面较少,关联性较强,加上之前在会员PLUS项目中使用 Vue + Webpack 的经验教训,对该项目我们决定尝试着用vue的单页面开发模式进行开发。 初试Vue单文件组件开发页面,我们遇到了一些问题,也总结了一些经验,以下是我们的一些总结 (下图为界面总览): 请求广场页面: 我的事件页面: 事件单详情页: 本篇文章适合具有 Vue 和 webpack 基础的同学,里面的具体配置和vue用法并未写的过于详细。 Vue+Webpack 单页面的文档结构与构建方法 项目构建的目录结构如下: 先和大家介绍下我们的思路,进入项目的第一层,是src文件夹以及各种配置文件。 接下来src目录下的文件功能如下: ♦  component 用来存放功能组件 ♦  css 存放所有样式文件 ♦  image 用于存放图片 ♦  view 存放业务上的各个单文件 vue 页面组件 ♦  app.js 是入口文件 ♦  app.vue 渲染最高级路由匹配到的组件用的出口 vue 文件 ♦  index.html 页面模板 ♦  router.js 为配置各种跳转信息的路由文件 1、首先是 package.json […]

[译] 使用Vue.js创建自定义输入框

原文:https://www.smashingmagazine.com/2017/08/creating-custom-inputs-vue-js/ 基于组件的库或者框架(例如 Vue)给我们在开发可复用的组件带来了极大的方便。这些组件可以非常简单的在独立的应用程序中被使用,并且最终呈现的效果一致。 比如,在表单输入的场景,在功能上往往会比较复杂,通常我们的做法是希望使用组件将表单中自定义的设计、标签、验证、帮助信息等进行封装,以确保这些能被依次正确的渲染。 Vue 有一个特别且重要的指令 v-model,它通过绑定和捕获输入事件来实现数据的双向绑定。如果你要构建自定义输入组件,那么该组件毫无疑问的需要支持 v-model 指令了。 遗憾的是,当我查阅 Vue 单选按钮或者复选框的自定义的示例时,发现他们要么没有考虑到 v-model 指令,要么没有正确的实现。有一些自定义输入框的使用文档,但它没有解释自定义单选按钮和复选框如何使用,我将在下面给出一些例子和说明。 本文意在帮助你理解以下几点内容: 理解 v-model 指令在原生输入框上是如何实现的,主要侧重于单选按钮和复选框。 理解 v-model 指令一般在自定义组件是如何实现的。 学习如何创建具有类似 v-model 指令功能的自定义单选按钮和复选框。 本文涉及到的代码示例,我将采用ES2015+。在使用 vue.component 或者 new Vue 来编写代码时,我更倾向于使用单文件组件的语法,这样能使项目结构更为清晰。 v-model通常是如何工作的? 官方的 vue 文档在这个主题上已经讲的很清晰了,但是仍然有一些遗漏点。总之,我都会从头讲解这块的内容。v-model 实质上只是为我们提供双向数据绑定功能的语法糖。其会随着不同类型的表单控件而不同。具体例子如下:

当使用文本输入框(包括 email,number 类型等)或 textarea 类型时,v-model =”varName”等同于:value =”varName” @input =”e => varName = e.target.value”。这意味着每次在文本框输入时,input 事件通过输入事件将 value 值传给 varName,每次输入时使用这种方式更新 varName。同样,除了含有 multiple […]

京东PLUS会员移动端改版实战

帝都的三月春暖花开、惠风和畅。在这美好的时节,我们接了个“大项目”——京东PLUS会员M端频道改版。 京东为向核心客户提供更优质的购物体验,推出了京东PLUS会员,包含购物回馈、自营运费补贴、畅读电子书、退换无忧、专属客服和专享商品等权益,全方位提升和丰富网购特权。PLUS会员项目作为国内第一个电商付费会籍项目,由传统的以流量为核心向以用户为核心进行转变,通过付费服务锁定高净值核心用户,向其提供更优质的购物体验,实现用户价值最大化。 这是京东很重要的一个产品,刘总在各种不同场合向雷军、刘中国、杨元庆、周鸿祎等知名人士赠予过PLUS终身荣誉会员。京东APP 6.0计划在首屏增加PLUS会员频道的入口,预计将会带来大量的新用户访问,我们以此为契机对PLUS会员频道M端进行了整体改版,以提升用户体验和转化率。 这个项目还是蛮有挑战的: 一方面要赶 APP 新版上线这个 deadline,另一方面需求提出的太晚,导致工期特别紧张。 业务逻辑本身比较复杂,近10种用户账户状态、实名认证情况、小白信用达标状态、自动续费开通状态、会员级别、后台配置等维度都将直接影响页面的楼层顺序、样式和逻辑。而根据需求,频道首页特别重,复杂程度远超现有页面和其他频道页。 我们前端和后端、产品团队身处异地,沟通成本较高。 项目页面既要作为京东M站的一部分适配主流手机的各种浏览器,同时还需要内嵌在 iOS/Android 平台的京东、京东金融、微信、手Q等 App 中,兼容性要求高。在项目后期,产品方对个别机型上的低版本浏览器也提出了兼容要求。 页面需要兼容一些其他团队提供的公共代码。 我们开工时,需求文档还未完全定稿,对需求了解的不充分和对业务逻辑复杂度认识不够,让我们一度非常被动,开发工作充满了挑战。为保证按时上线,我们顶着压力,加班加点,那段时间几乎连轴转。无论如何,我们拿下了这场硬仗,现在回过头来看,还是感慨无限。这里记录一下这个项目开发中遇到的一些问题。 选型之坑 旧版采用的是前端开发静态页面,后端再套页面的开发模式,在这种模式下前端人员可发挥的空间受到了很大制约,也给后期的维护和二次开发工作带来了麻烦。于是,此次改版我们提出采用前后端分离模式开发,以明确前后端权责、提高开发效率,同时提高后期可维护性,这一方案得到了后端团队的支持。而难点在于这次是改版,并不是完全从零开始,所以一旦前后端分离,之前在view层面的很多业务逻辑就也要拿到前端来做,而我们团队作为一个公共部门并不熟悉他们的业务,这无疑进一步增加了我们的压力。 我们在前端采用了目前比较流行的 Vue.js 2.0 开发框架,脚手架工具和之前开发的很多项目一样,仍然选择了京东前端自己开发的 JDF,而当时的 JDF 版本尚不支持解析 Vue 模板文件,所以我们使用了 Vue.js 的独立构建模式,也就是在页面上直接引入完整版的 Vue.js 文件(包含模板编译器),模板的编译在浏览器端完成,后来发现这给我们挖了个大坑。 项目测试阶段发现,iOS版京东APP 频道首页的打开速度明显慢于其他浏览器和 APP,每次进入页面都会首先渲染出 loading 浮层,之后3-4秒才渲染出页面的楼层。我们马上开始排查。在 APP 中调试还是比较困难的,而在调试方便的浏览器中又不存在这个问题,所以这个问题的排查,我们还真是下了一番功夫。 我们初步判断这不是常规的因为请求多、资源数据量大、JS逻辑等原因造成的问题,因为这些问题一旦存在必然影响不止一个浏览器,且通过浏览器性能监控并未发现明显异常情况。 我们和测试团队利用抓包工具对 iOS版京东APP 中这个页面的资源请求情况进行了监测(这个阶段我们还踩了iOS 10.3 版本 https 请求抓包的坑,下文细说),也没有发现明显异常,基本印证了我们的判断。 另一方面,我们发现同一部 iPhone 的 Safari 浏览器和京东金融、微信、手机QQ等 APP 中页面加载速度都明显快于 […]

图片上传进阶 VS 京东户簿实战

由于现在身份比较敏感,所以很多情况下你在网购时都会涉及到需要实名认证,此时就需要上传身份证照片。为了让大家能够在任何情况下都可以进行实名认证,前端的上传工作必不可少,如何进行图片上传的功能呢?下面会一步一步的深入到上传的海洋中,让你畅游其中。  京东推出了整站京东户簿组件,来统一管理用户的实名认证信息。此组件支持不同业务线跨域接入并兼容到 IE7+ 的不同场景。(黑科技)上传的图片支持 OCR 图像识别,可以与输入的证件号码做匹配,防止随便录入信息。 户簿系统组件的界面如下图: 接下来我们来逐步深入的剖析一下此组件的是如何来实现的。上传主要使用了 Ajax 与 XMLHttpRequest(文章中简称为 XHR ) 技术来实现。Ajax 介绍以及背景请参考Ajax 背景。 (如不了解  XHR ,可参考 w3.org 的一些文章基础教程文章即可快速了解,可参考如下连接地址:https://www.w3.org/TR/XMLHttpRequest/.) 上传图片功能实现 代码实现:

以上代码中,文件需要通过 FormData 来承载并通过 xhr 发送给服务端,FormData 会有哪些隐患呢?来看一下 XHR 的发展历程。  XHR 一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了 XHR 标准。XHR 标准又分为Level 1 和 Level 2。 XHR Level 1 中,XHR 有以下三个缺点: 只支持文本数据的传送,无法用来读取和上传二进制文件。 传送和接收数据时,没有进度信息,只能提示有没有完成。 受到“同域限制”(Same Origin Policy),只能向同一域名的服务器请求数据。 XHR Level 2 新版本针对老版本做出了大幅改进: 可以设置 http 请求的时限。 可以使用 FormData 对象管理表单数据。 可以上传文件。 可以请求不同域名下的数据(跨域请求)。 可以获取服务器端的二进制数据。 可以获得数据传输的进度信息。 FormData 参数为 […]

浅谈Vue组件在实际项目中的应用

Vue.js 是一套构建用户界面的渐进式框架,目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。——摘自 Vue 官网。 虽然目前 Vue 已经很火了,但不可否认的是,仍有很多人刚刚开始学习使用 Vue 来构建前端项目,从生疏的初学者到熟练运用 Vue 的过程中,不可避免地会走一些弯路。为了实现某个功能,也许尝试过很多方法,最终蓦然回首,才发现当初犯下的错误是那么幼稚。然而,这些错误也正是通往成功道路上的奠基石,因此,总结这个过程很有必要。本文基于参与过的项目——绩效管理与人才库项目,总结了在实际项目中使用 Vue 组件逐渐完善的过程,旨在抛砖引玉,共同学习。 合理的使用 Vue 子组件 初次使用 Vue 组件是在绩效管理项目中,由于当时对于父、子组件只是停留在基础概念上,在实际项目中没有合理构建父、子组件结构。首先看一下需要完成的页面效果: 图中最外层是二级部门,从外到里,一直嵌套到五级部门(为了更好的展示层级效果,这里把每级部门中的人员列表省略了)。当时分析每一级部门都是类似的,于是把每一层级部门作为一个子组件来构建,正如下图所示:左图为搭建的 Vue 组件结构图,右图为代码结构: 相信看到这里,各位看官已经发现了问题所在:二级部门子组件嵌套了三级部门的子组件,同时三级部门子组件嵌套了四级部门子组件,以此类推。这样导致子组件嵌套层数过多,父子组件之间、兄弟组件之间通信繁琐,并且也失去了组件的意义——即组件是可以扩展 HTML 元素,用来封装可重用的代码。 接下来,我们分析这样搭建组件带来的困难:也就是父子组件之间、兄弟组件之间通信繁琐的问题。因为很快我就遇到了这样一个需求,如下图所示: 每一级部门都会有人员信息,此时如果点击第五级部门中的“绩效评价”按钮,需要出现“评价与评级”的弹窗(右图),然而弹窗组件是放在最外层 Vue 实例中的,与二级部门子组件形成并列关系,其 Vue 组件结构如下图所示: 这样一来,五级部门子组件中点击按钮要想触发弹窗组件,需要层层监听被触发的函数,直至传到根实例 Vue 中,再分配到弹窗组件中(注,这里采用的是父子组件通信方式 $emit ,因为尽可能的不要让子组件修改父组件中的数据,所以没有采用其他通信方式,例如直接修改父组件数据或者父组件的数据公共化等方法)。 根据 Vue 知识,父组件向子组件中使用 props 传递属性值,子组件向父组件中传递数据使用 $emit(eventName) 触发事件,父组件使用 $on(eventName) 监听事件。这样说可能有些糊涂,请看图解: 从图中可以看出,要想从五级部门和父组件中进行通信,需要层层上传数据,每一层通信函数都要在 HTML 和 JavaScript 中触发、监听, 何其繁琐!尤其务必注意的是,命名的规范问题,由于 HTML  属性会忽略大小写,父子间通信定义的函数名称可以使用中划线命名,但不能使用驼峰法定义,否则无法正常对通信函数触发和监听!笔者初期就因为在 […]

© 2017 JDC. All Rights Reserved.