安卓开发-大觅项目中与服务端通信

本章简介
本章主要介绍大觅项目与服务端通信的内容。vue.js本身并没有提供与服务器通信的接口，但是通过插件的形式实现了基于AJAX等技术的服务端通信。
随着 Vue.js作者尤雨溪推荐大家使用Axios，越来越多的人开始了解并使用Axios。
由于大觅项目采用的是前后端完全分离的方式，实现了前后端环境的分离开发，这样不仅能提高开发效率，还能减少服务器之间的相互影响，
同时能保证数据安全等。但是随之而来的问题也比较明显，前端如何进行快速的开发，才能保证后期与后端交互的时候不受影响?在跟后端调试时，
如何不需要修改太多的代码又能实现与后端联调?
前端页面上的数据来源由前端开发人员自行模拟，为了方便模拟前端数据需要介绍Mock.js 工具,另外前端开发还需要模拟 API接口,因此会介绍
connect-mock-middleware的使用，这个工具可以方便地根据前后端人员协商出的API-Schema(接口定义文档)实现接口模拟。
模拟的接口数据如何被调用，需要使用snail mock，它能够模拟服务器的功能，调用生成接口的 url 服务地址。
预习作业
简答题
(1)简述 connect-mock-middleware 的作用。
(2)简述 Mock.js 的应用场景以及使用规范。
(3)简述 snail mock 的工作原理。
(4)简述 Axios 安装及配置需要注意的问题
任务 1
connect-mock-middleware 工具的使用
在引入 Mock.js 工具模拟数据接口之前，必须先介绍一个应用广泛的前端工具一connect-mock-middleware，connect-mock-middleware
是一个非常方便、实用的mock 模拟工具。它具有哪些特点呢?
>支持mockJs语法
>支持 json、jsonp
>修改 mock 数据的时候不需要重新加载
1.1 添加 middleware
在config的index 文件中添加如下代码，在本地开启一个地址固定的服务(实际项目中和后端联调时会换成后端实际提供的接口服务地址)。
proxyTable:{
'/api':{
target: "http://127.0.0.1:3721',
changeOrigin: true,
secure: false
}
}
1.2 写mock 文件
mock 文件支持两种请求:
>get /api/xxx
>post /api/<id>/123
<id>代表链接路由表达式，如/api/:id/123,id 值会发生改变。具体的文件结构如下所示。
mock
\get
\api_xxx.js
post
\api_@id_xxx.js
以大觅项目中的“猜你喜欢接口”api_list_guesslike.js为例，此接口的命名:api代表接口，list 代表所属页面，这里是指列表页面，
最后的guesslike代表接口名称为“猜你喜欢接口”。具体代码如示例1所示。
示例 1
//猜你喜欢接口
module.exports= function(param){
let paid = parseInt(param.body.itemTypeId);
if(paid == 0){
return{
"success": "string",
"errorCode": "string",
"msg": "",
"data|1-4": [{
"id": '@string("number", 2)’,
"itemName": '@csentence(5)',
"imgUrl": 'https://pimg.dmcdn.cn/perform/project/1381/138121_n.jpg',
"areaId": '@string("number", 3)',
"areaName": '@province',
"address": '@county(true)',
"startDate": '@datetime("yyyy-MM-dd")',
"endDate": '@datetime("yyyy-MM-dd")',
"minPrice": '@integer(60, 100)'
}]
}
}else if (paid == 1){
return{
"success":"string",
"errorCode": "string",
"msg": "",
"data|1-4":[{
"id": '@string("number", 2)',
"itemName": '@csentence(10)',
"imgUrl": "https://pimg.dmcdn.cn/perform/project/1381/138121_n.jpg",
"areaId": '@string("number", 3)',
"areaName": '@province',
"address": '@county(true)',
"startDate": '@datetime("yyyy-MM-dd")',
"endDate": '@datetime("yyyy-MM-dd")',
"minPrice": '@integer(60, 100)'
}]}
}else {
return{
"success": "string",
"errorCode": "string",
"msg": "",
"data":{
"currentPage": param,
"pageCount": 1,
"pageSize":10,
"total": 6}}}}
此接口的模拟要根据项目前期由前后端人员共同协商出的API-Schema(接口定义文档)实现，先来看一下接口定义文档中的“猜你喜欢接口”定义，如图1所示。
图1 接口定义文档说明
查看了接口定义文档的介绍，再来看示例1，就很容易理解模拟的接口了，对其中Mock的部分还不甚了解，后面介绍了Mock语法之后，读者便能轻松理解接口含义了。
2.1 Mock.js 基本介绍
从示例1的“猜你喜欢接口”中会发现，返回值data里面的数据值写法有些奇怪，这种写法就是 Mock.js的语法。下面来介绍 Mock.js。
Mock.js 是一个模拟数据生成器，可以使前端独立于后端开发。如果正在开发一个前端页面，但是后台还没有完成供前端页面调用的API，
并且数据格式已经确定，这时想要尽可能还原真实的数据，要么编写更多代码，要么手动模拟数据。如果遇到特殊的格式(如 IP、随机数、图片、地址等)，
前端工作量必然会剧增。为了解决这个问题，可以使用 Mock.js 来模拟，方便地生成各种类型的假数据来查看页面效果。
Mock.is 的功能如下。
>根据数据模板生成模拟数据。
>模拟 AJAX请求，生成并返回模拟数据。
>基于 HTML 模板生成模拟数据。
2.2 Mock.js 语法规范
Mock.js 的语法规范包括两部分:
>数据模板定义规范(Data Template Definition，DTD)
>数据占位符定义规范(Data Placeholder Definition，DPD)
1.数据模板定义规范
语法
数据模板中的每个属性由3部分构成:属性名、生成规则、属性值。
//属性名 name
//生成规则 rule
//属性值 value
'name|rule': value
注意
>属性名和生成规则之间用竖线“|”分隔。
>生成规则是可选的。
>生成规则有了种格式:
‘name|min-max':value
'name|count’: value
'name|min-max.dmin-dmax':value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
>生成规则的含义需要依赖属性值的类型才能确定。
>属性值中可以含有“@”占位符。
>属性值还指定了最终值的初始值和类型。
下面根据属性值的类型和示例来具体查看数据定义操作。
(1)属性值是字符串(String)
>‘name|min-max':string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
>’name|count': string
通过重复 string 生成一个字符串，重复次数等于 count。
(2)属性值是数字(Number)
>‘name|+1': number
属性值自动加1，初始值为number。
>’name|min-max':number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只用来确定类型。
>'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于min、小于等于max，小数部分保留 dmin 到dmax 位。
示例2
Mock.mock({
'number1|1-100.1-10': 1,
'number2|123.1-10':1,
'number3|123.3':1,
'number4|123.10':1.123
})
//模拟之后的数据为
{
"number1":12.92,
"number2":123.51,
"number3":123.777,
"number4":123.1231091814
}
(3)属性值是布尔型(Boolean)
>'name|1': boolean
随机生成一个布尔值，值为true的概率是1/2，值为false的概率同样是1/2。
>'name|min-max': value
随机生成一个布尔值，值为value的概率是min/(min+max)，值为!value 的概率是
max /(min + max)。
(4)属性值是对象(Object)
>'name|count': object
从属性值 object 中随机选取 count 个属性。
>'name|min-max': object
从属性值 object 中随机选取 min 到max个属性。
(5)属性值是数组(Array)
>'name|1': array
从属性值 array 中随机选取一个元素，作为最终值。
>'name|+1': array
从属性值 array中顺序选取一个元素，作为最终值。
>'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于min，小于等于 max。
>'name|count': array
通过重复属性值 array 生成一个新数组，重复次数为count。
(6)属性值是函数(Function)
>'name': function
执行函数 function，取其返回值作为最终的属性值，函数的上下文为属性name 所在的对象。
(7)属性值是正则表达式(RegExp)
>'name':regexp
根据正则表达式(regexp)反向生成可以匹配它的字符串，用于生成自定义格式字符串。
示例 3
Mock.mock( {
'regexp1': /[a-z][A-Z][0-9]/,
'regexp2': /\w\W\s\S\d\D/,
'regexp3': /\d{5,10}/
})
// 模拟之后的数据为
{
"regexp1": "pJ7"
"regexp2": "F)\fp1G",
"regexp3": "561659409"
}
2.数据占位符定义规范
占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
语法
@占位符
@占位符(参数[,参数])
注意
使用占位符时，需要注意以下几点:
>用“@”来标识其后的字符串是占位符。
>占位特引用的是 Mock.Random 中的方法。
>通过 Mock.Random.extend()来扩展自定义占位符
>占位符也可以引用数据模板中的属性。
>占位符会优先引用数据模板中的属性。
>占位符支持相对路径和绝对路径。
示例 4
Mock.mock( {
name:{
first: '@FIRST',
middle: '@FIRST',
last:'@LAST',
full: '@first @middle @last'
}
})
//模拟之后的数据为
{
"name":{
"first": "Charles",
"middle": "Brenda",
"last": "Lopez",
"full":"Charles Brenda Lopez"
}
}
任务 3
snail mock 工具使用
通过前面任务1、任务2的介绍，读者基本上可以自行实现后端接口的拟。现在的问题是这些数据如何被调用?snail mock 可以解决这个问题。
snail mock 能够模拟服务器的功能，生成接口的 u1服务地址供调用。
要使用 snail mock 这个前端工具首先需要初始化。在命令提示符窗口执行如下命令
cnpm install -g snail-cline
执行以上安装命令便可全局安装 snail-cline，要开启 mock 服务还需要在命令提示符窗口中执行如下命令。
snail mock
执行以上命令可以启动模拟服务，具体如图2所示。http://127.0.0.1:3721 就是前面在添加 middleware的时候配置的地址。
经验
在本地全局安装了 snail-cline，其内部实现依赖很多其他包。打开下载的 snail-cline的package.json，在 dependencies
选项中可以看到其是依赖 connect-mock-middleware 的，依赖内部会自动下载管理依赖的包，同理 connect-mock-middleware中
依赖 mock。由上可知，只需在本地全局安装 snail-cline 即可使用 mock 语法。
任务 4)Axios 的安装及配置
4.1 Axios 基本介绍
Axios 是一个基于 Promise、用于浏览器和 node.js的 HTTP 客户端，常用于处理 AJAX请求，具有如下特征。
>从浏览器中创建XMLHttpRequest
>从node.js发出 http 请求
>支持 Promise API
>拦截请求和响应
>转换请求和响应数据
>取消请求
>自动转换 JSON 数据
>客户端可以防止CSRF/XSRF(两种伪造站点请求的方式。伪造的恶意请求对服
务器来说完全合法，都完成了攻击者期望的操作)恶意请求发生
4.2 Axios 安装使用
1.安装
首先来看 Axios的安装，可以通过NPM或CDN的形式来使用Axios，因为是在大
觅项目中使用，所以选择NPM方式进行安装。在项目目录下打开命令提示符窗口，运行如下安装命令。
cnpm install axios --save
2.API方法
为了方便，Axios 提供了对所有请求方法的重命名支持。
>axios.request(config)
>axios.get(url[, config])
>axios.delete(url[, config])
>axios.head(url[, config])
>axios.options(url[, config])
>axios.post(url[, data[, config]])
>axios.put(url[, data[, config]])
>axios.patch(url, data[, config]])
Axios提供了8种API方法，官方并没有明确推荐使用哪种方法，但是结合企业级开发经验，经常使用的是get和post方法。
另外，方法中没有jsonp方法，它是关于跨域的解决方法，后面会介绍。
3.GET、POST 请求方式
发起一个 GET 请求，请查看示例5代码:
示例 5
//发起一个 user 请求，参数为给定的ID
axios.get('/user?ID=1234')
.then(function(respone){
console.log(response);
})
.catch(function(error) {
console.log(error);
});
//上面的请求也可选择下面的方式来写
axios.get('/user' ,{
params:{
ID:12345
}})
.then(function(response){
console.log(response);
})
.catch(function(error) {
console.log(error)
});
发起一个POST请求，请查看示例6代码.
示例 6
axios.post('/user', {
firstName:'friend',
lastName:'Flintstone'
})
.then(function(response){
console.log(response);
})
.catch(function(error){
console.log(error);
});
4.3 Axios 封装及调用
在实际的开发中，经常将请求方法封装后再调用，便于做通用的配置。下面通过封装 postRequest方法来请求数据，这里使用post方法。
对封装的postRequest 方法的参数params格式约定如下。
说明
params格式:
{
type:"string",//type是请求变量的ur地址常量名称
data:{object}  //data是传递到后台的参数信息，主要是 object对象，传入时进行对象转换
}
封装的 postRequest 方法如下所示。
export function postRequest(params){
return request('post',url[params.type],{...params.data})
}
4.4 请求设置
以下列出了一些请求时的常用设置选项，只有url是必需的，如果没有指明method的话，默认的请求方法是 get。
{
//url是服务器链接，用来指定请求的ur地址
url:'/user',
// method 是发起请求时的请求方法
method:'get',
//如果url不是绝对地址，那么baseURL将会加在其前面
//当Axios 使用相对地址时这个设置非常方便
//在其实例中的方法
baseURL:'http://some-domain.com/api/',
// transformRequest 允许请求的数据在传到服务器之前进行转化，只适用于put、get、patch
//方法
transformRequest:[function(data){
//依自己的需求对请求数据进行处理
return data;
}],
// transformResponse 允许返回的数据在传入then/catch之前进行处理
transformResponse:[function(data){
//依需要对数据进行处理
return data;
}],
// headers 是自定义的要被发送的头信息
headers: {'X-Requested-with':'XMLHttpRequest'},
// params 是请求连接中的请求参数，必须是一个纯对象或者URLSearchParams对象
params:{
ID:12345
},
//paramsSerializer是一个可选的函数，用来序列化参数
//例如:(https://ww.npmjs.com/package/qs,http://api.jquery.com/jquery.param/)
paramsSerializer: function(params){
return Qs.stringify(params, {arrayFormat:'brackets'})
},
//data是请求主体需要设置的数据
//只适用于应用的put、get、patch 方法
data:{
firstName:'fred'
},
//timeout定义请求的时间，单位是毫秒
//如果请求的时间超过这个设定时间，请求将会停止
timeout:1000,
}
以上为开发中经常使用的选项，还有一些其他的配置选项，更为详细的请求设置选项介绍详见官网，这里不再一一列举。