客服平台总结

Vue

Vue是一个构建数据驱动的 web 界面的库，也就是一个以 MVVM 为核心的库。

为什么选择Vue

• 简洁

  API 足够简洁明了，文档足够清晰有条理，上手难度足够低

  HTML 模板加上 JSON 数据，就是一个 Vue 实例。

• 数据驱动

  DOM和数据绑定，对数据的操作自动追踪依赖的模板表达式，自动更新DOM。

  例如，列表的渲染，只需给定一个数组，将这个数组绑定到列表的模板表达式上，数组的变化自动触发DOM的更新，无需手动维护DOM。

• 组件化

  提供了一套完整的组件化开发方式，用解藕、可敷用的组件来构造界面，极大简化代码量的同时，对维护工作也相当友好。

  例如，全局的 loading/alert/表单 组件、局部的表格组件，一处定义，多处复用，一处更改，全局同步。

• 快速

  库内部对自动更新DOM的操作做了很多优化，内部ID排序，最小变更步骤等，和手动更新DOM相比，速度更快。

• 轻量但不失强大

  Vue 本身只是一个关注 view 层的轻量化库，但是搭配官方出品的几个轻量库，能够完成相当复杂的 web 应用。

  例如，客服平台中用到的 vue-router ，用来控制路由；vuex，用来集中式管理应用状态，控制 SPA 内数据流向。

• 新技术的试验田

  Vue 足够灵活，能够完美的搭配前端中新兴的各种技术，加快开发效率，规范开发流程，减少人工操纵。

  例如，客服平台中模块化的 js 开发方式，webpack 编译，NPM 管理依赖，sass 书写样式等，都能够融合进 vue 的开发体系中。

相关文档

• Vue 文档

• Vue-router 文档

• Vuex 文档

NodeJs/Npm

NodeJs

NodeJs 虽然是一门后端语言，但是在前端工作中，利用 NodeJs 开发的一些工具能够极大简化我们的工作。

例如，客服平台实现了一个简易的 web server，本地开发时以这个 web server 作为入口，可以很方便的访问接口，代理静态资源等。

利用 NodeJs 开发的工具也能够完成自动化操作、构建等任务，这个将在下文的 webpack/gulp 部分具体讲述。

NPM

NPM 是管理 NodeJs 开发依赖的工具，同样能够用在前端的开发工作中，大部分的开发依赖通过 NPM 来管理，杜绝手工管理依赖包，也能够很方便的控制依赖的版本。

NPM 还提供一些便捷的 script 定义方式，在一个 NPM 项目下，会存在一个 package.json 文件，其中有一个字段为 scripts ，在这个字段中定义的 key ，可以通过 npm run {key} 来执行 value 中的命令。

例如，在本地开发时，需要连接后台人员的机器，可以执行 npm run localtest 命令，而实际执行的命令是 scripts 字段中 localtest 对应的 NODE_ENV=localtest gulp watch 命令。

这相当于为某些命令做了个缩写，但是在本项目中，由于环境变量定义方式不同，mac 环境可以直接执行 npm run localtest ，win 上只能执行具体的命令 NODE_ENV=localtest gulp watch。

相关文档

• NodeJs 文档

• NPM 文档

其他

客服平台对 NodeJs 的依赖不可或缺，开发人员必须安装 NodeJs ，建议版本 v4.2.4

ES6/7

JavaScript 这门语言在以往的版本中存在着很多缺陷，比如没有类，没有标准的模块管理，没有统一的异步流程控制API，没有块级作用域赋值等等，但是在新版本中，这些都有了相应的解决方案，所以客服平台的开发，我们选择了 JS 的新标准 ES6 作为主要开发语言。

本项目中用到的主要 ES6 新特性包括：

• 变量声明：let/const 命令
• 变量的结构赋值
• 模板字符串
• 箭头函数
• 模块管理：import/export
• Promise 对象控制异步流程
• 其他的新API

ES6 文档

Webpack/Gulp

Webpack

上文提到，我们用了 Vue，用了 ES6，用了很多新特性新东西，但是对于浏览器来说，这些东西浏览器是没有办法直接运行的，所以需要有构建这一过程，我们选择了 webpack 这个工具。

webpack 是一个灵活的模块打包工具，搭配不同的 plugin 和 loader 可以打包几乎所有 js 方言，css 方言，不同的模板文件，最后生成可供浏览器直接运行的 js 文件。

客服平台的 webpack 配置在 gulpfile.js 文件的 webpackConfig 变量中，具体可以看代码。

webpack 文档

Gulp

除了 webpack 用来打包构建之外，还有一些额外的自动化工作需要完成，比如图片的拷贝，静态资源更改 hash 值以控制缓存，打包四个环境不同的 bundle 包等，这一部分我们选择了 gulp 来完成。

gulp 主要利用 NodeJs 文件流的概念在内存中操作文件，减少 IO 操作，能够更加快速的完成复杂的构建工作。

gulp 文档

Sass/Jade

Sass

一个 css 方言，提供了嵌套的书写方式，css 的变量定义，逻辑控制功能等。

客服平台使用的是页面构建组提供的 sass 源码，最后使用 gulp 编译成浏览器可识别的 css。

sass 文档

Jade(Pug)

HTML 模板引擎，页面构建组使用的 HTML 方言，用更加简洁的方式书写 HTML，也可以在 HTML 中加以逻辑，写出更加强大健壮的 HTML 模板。

客服平台使用的是页面构建组提供的生成后的普通 HTML 文件。

已更名为 Pug 。

pug 文档

Git

客服平台的所有代码，都托管在公司的 gitlab 上，项目地址是： http://gitlab.intra.gomeplus.com/gomeplusFED/CSP。

配合 git ，我们完成了一套完整的开发发布流程。

Webscoket

简介

WebSocket协议，代替原先http协议的1s轮询，能更好的节省服务器资源和带宽并达到实时通讯，本项目用于客服与买家的实时通讯聊天、表情、上传图片、接收图片音频视频。

```js
// 创建一个Socket实例
var socket = new WebSocket('ws://localhost:8080'); 

// 打开Socket 
socket.onopen = function(event) { 

    // 发送一个初始化消息
    socket.send('I am the client and I\'m listening!'); 

    // 监听消息
    socket.onmessage = function(event) { 
        console.log('Client received a message',event); 
    }; 

    // 监听Socket的关闭
    socket.onclose = function(event) { 
        console.log('Client notified socket has closed',event); 
    };    

    // 监听Socket报错
    socket.onerror = function(event) { 
        console.log('Client notified socket has error',event); 
    }; 

    // 关闭Socket.... 
    //socket.close() 
};
```

断开重连机制

• 断网重连

• 关闭重连

• 异常重连

• 客服选择在线重连

Webscoket 文档

业务详解

目录结构

```shell
├── src                             源码文件夹
│   ├── font                            font 文件夹
│   ├── img                             img 文件夹
│   ├── css                             css 文件夹
│   │   ├── app.scss                        样式主入口
│   │   ├── common                          基础样式文件夹
│   │   ├── module                          业务样式文件夹
│   │   │   └── all.scss                        所有业务样式
│   │   └── vendors                         第三方插件样式
│   └── js                              js 文件夹
│       ├── app.js                          app 入口文件 （定义路由表，启动项目，过滤ajax请求等）
│       ├── debug.js                        debug 文件 （定义一些全局变量，在控制台直接调用）
│       ├── base                            基础功能文件夹
│       ├── component                       组件文件夹
│       │   ├── app.vue                         入口组件 （组织全局组件，定义路由容器）
│       │   ├── base                            全局组件 （alert、loading组件等）
│       │   ├── common                          通用组件 （导航、时间选择器、头部、尾部等）
│       │   ├── dashboard                       dashboard 路由下所有组件
│       │   │   ├── account-manage.vue              账户管理
│       │   │   ├── chat-record.vue                 聊天记录
│       │   │   ├── common-msg.vue                  常用语
│       │   │   ├── config.vue                      配置管理
│       │   │   ├── index.vue                       首页
│       │   │   └── password.vue                    修改密码
│       │   ├── form                            通用表单组件
│       │   ├── im                              im 路由下所有组件
│       │   │   ├── common_msg.vue                  常用语
│       │   │   ├── contacts.vue                    联系人
│       │   │   ├── header.vue                      头部 
│       │   │   ├── index.vue                       首页
│       │   │   └── record.vue                      聊天记录
│       │   └── login                           登陆组件
│       ├── config                              配置文件
│       │   ├── env                                 环境设置
│       │   └── http.json                           AJAX 请求跟路径配置文件
│       ├── directive                           指令文件夹
│       ├── filter                              过滤器文件夹
│       ├── store                               vuex 文件夹
│       ├── util                                工具函数文件夹
│       └── vendors                             第三方插件文件夹
├── dist                            编译打包生成的dist文件
├── app.babel.js                    node 执行文件入口 （babel引导）
├── app.js                          web server 入口文件
├── gulpfile.js                     gulp 配置文件
├── index.html                      view 首页
├── node_modules                    依赖文件夹 （npm install 后会出现）
├── package.json                    依赖管理配置文件
├── config.json                     项目配置文件
├── README.md                       README
├── .babelrc                        babel 配置文件
├── .bin                            脚本文件夹 （格式化文件脚本）
├── .gitignore                      git 忽略规则
├── doc                             文档文件夹
├── demo                            demo 
├── ui                              页面构建组提供的 ui 文件夹
├── development                     开发环境编译打包后产出目录
├── test                            测试环境编译打包后产出目录
├── pre-production                  预生产环境编译打包后产出目录
└── production                      生产环境编译打包后产出目录
```

业务结构划分

• 登录
  /src/js/component/login/index.vue
/#!/login

• 欢迎页
  /src/js/component/dashboard/index.vue
/#!/dashboard

• 用户管理
  /src/js/component/dashboard/account-manage.vue
/#!/dashboard/account-manage

• 聊天记录查询
  /src/js/component/dashboard/chat-record.vue
/#!/dashboard/chat-record

• 常用语
  /src/js/component/dashboard/common-msg.vue
/#!/dashboard/common-msg

• 系统配置管理
  /src/js/component/dashboard/config.vue
/#!/dashboard/config

• 修改密码
  /src/js/component/dashboard/password.vue
/#!/dashboard/password

• IM
  /src/js/component/im/index.vue
/#!/im

发布流程

• git checkout dev 切换到dev更新到最新版本

• git checkout pre-release 切换到pre-release分支

• git merge dev merge dev分支到pre-release分支

• git checkout release 切换到release 分支

• git checkout pre-release ./src index.html package.json gulpfile.js 将 ./src index.html package.json gulpfile.js 等指定文件merge过来

• npm run buildall 生成开发、测试、预生产、生产四个环境的待发布包裹

• git commit -am "提交信息" 提交所有变动

• git push origin release --force 覆盖式推送到远程release分支

• 通知BS发布对应环境的包裹

本地调试

• git clone http://gitlab.intra.gomeplus.com/gomeplusFED/CSP.git

• cd CSP

• npm install -d

• npm run localdev 本地开发，连接AMP平台

• npm run localtest 本地开发，连接后台人员本机

• node app.babel.js 开启本地静态资源服务

• ifconfig(mac)\ipconfig(win) 查看ip

• http:// + ip + :1234/#!/login 访问地址

• 可以通过修改 /src/js/config/http.json 文件改变各个环境地址

• http.json 文件

    {
        "localdev": "http://10.69.205.26:9090/mock/5742c66eb094235129ee29b5",
        "localtest": "http://10.125.2.43:6080/venus-crm-rest",
        "development":"http://10.69.201.13:8080/venus-crm-rest",
        "test": "http://10.125.2.43:6080/venus-crm-rest",
        "pre-production": "http://10.125.2.10:8093/venus-crm-rest/",
        "production": "http://10.125.139.206:8093/venus-crm-rest"
    }