本文目标
了解RESTful的基本概念，对Swagger接口API的语法有基本的认识，动手搭建Easy-Mock服务器，对接
Element-UI进行数据提供。
RESTful
RESTful架构，REST的名称"表现层状态转化"。就是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易 于理解、扩展方便，所以正得到越来越多网站的采用。
资源（Resources）
就是网络环境中的一个信息，比如：图像，视频，音乐，文字等存在的内容，都是可以使用URI去定位它们的位置然后得到它。这是一个独一无二的标识。
表现层（Representation）
把上述“资源“进行展示的形式。比如JPG，MP4，MP3，TXT等。
状态转化（State Transfer）
访问一个网站，就代表了客户端和服务器的一个互动过程。比如存在于数据库中的数据经过后台服务器的处理生成静态文件HTML呈现到浏览器中。
HTTP协议里面，四个表示操作方式的动词：GET、POST、PUT、DELETE。它们分别对应四种基本操作：GET用来获取资源，POST用来新建资源（也可以用于更新资源），PUT用来更新资源，DELETE用来删除资源。
Swagger
swagger是一个流行的API开发框架，这个框架以“开放API声明”（OpenAPI Specification，OAS）为基础，对整个API的开发周期都提供了相应的解决方案，是一个非常庞大的项目（包括设计、文档以及测试和部署，几乎支持所有语言）。
Swagger 是一个规范和完整的框架，用于生成、描述、调用和可视化 RESTful 风格的 Web 服务。总体目标是使客户端和文件系统作为服务器以同样的速度来更新。文件的方法，参数和模型紧密集成到服务器端的代码，允许API来始终保持同步。Swagger 让部署管理和使用功能强大的API从未如此简单。
语法
字段名 | 类型 | 描述 |
swagger | string | 必需的。使用指定的规范版本。 |
info | Info Object | 必需的。提供元数据API。 |
host | string | 主机名或ip服务API。 |
basePath | string | API的基本路径 |
schemes | string | API的传输协议。 值必须从列表中:“http”,“https”,“ws”,“wss”。 |
consumes | string | 一个MIME类型的api可以使用列表。值必须是所描述的Mime类型。 |
produces | string | MIME类型的api可以产生的列表。 值必须是所描述的Mime类型。 |
paths | 路径对象 | 必需的。可用的路径和操作的API。 |
definitions | 定义对象 | 一个对象数据类型生产和使用操作。 |
parameters | 参数定义对象 | 一个对象来保存参数,可以使用在操作。 这个属性不为所有操作定义全局参数。 |
responses | 反应定义对象 | 一个对象响应,可以跨操作使用。 这个属性不为所有操作定义全球响应。 |
externalDocs | 外部文档对象 | 额外的外部文档。 |
summary | string | 什么操作的一个简短的总结。 最大swagger-ui可读性,这一领域应小于120个字符。 |
description | string | |
operationId | string | 独特的字符串用于识别操作。 id必须是唯一的在所有业务中所描述的API。 工具和库可以使用operationId来唯一地标识一个操作,因此,建议遵循通用的编程的命名约定。 |
deprecated | boolean | 声明该操作被弃用。 使用声明的操作应该没有。 默认值是false。 |
（2）字段类型与格式定义
普通的名字 | type | format | 说明 |
integer | integer | int32 | 签署了32位 |
long | integer | int64 | 签署了64位 |
float | number | float | |
double | number | double | |
string | string | ||
byte | string | byte | base64编码的字符 |
binary | string | binary | 任何的八位字节序列 |
boolean | boolean | ||
date | string | date | 所定义的full-date- - - - - -RFC3339 |
dateTime | string | date-time | 所定义的date-time- - - - - -RFC3339 |
password | string | password | 用来提示用户界面输入需要模糊。 |
举例
swagger: '2.0'
info:
version: "1.0.0"
title: API
basePath: /base
host: www.surpass.org.cn
paths:
/city:
post:
summary: 新增城市
parameters:
- name: "body"
in: "body"
description: 城市实体类
required: true
schema:
$ref: '#/definitions/City'
responses:
200:
description: 成功
schema:
$ref: '#/definitions/ApiResponse'
definitions:
City:
type: object
properties:
id:
type: string
description: "ID"
name:
type: string
description: "名称"
ishot:
type: string
description: 是否热门
ApiResponse:
type: object
properties:
flag:
type: boolean
description: 是否成功
code:
type: integer
format: int32
description: 返回码
message:
type: string
description: 返回信息API预览
（1）在本地安装nginx
（2）下载SwaggerUI源码 https://swagger.io/download-swagger-ui/
（3）解压，将dist文件夹下的全部文件拷贝至 nginx的html目录
（4）启动nginx
（5）浏览器打开页面 http://localhost:801即可看到文档页面
Mock.js
Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试，根据数据模板生成模拟数据模拟 Ajax 请求，生成并返回模拟数据基于 HTML 模板生成模拟数据。
Mock.js具有以下特点：
- 前后端分离
- 让前端攻城师独立于后端进行开发。
- 增加单元测试的真实性
- 通过随机数据，模拟各种场景。
- 开发无侵入
- 不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
- 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
安装
cnpm install mockjs举例
以前生成五条数据的集合只能写死。
{
"list": [
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
}
]
}新建一个js文件，填入内容：
let Mock=require('mockjs')
let data=Mock.mock({
'list|5':[
{
'id':1,
'name':'测试'
}
]
})
console.log(JSON.stringify(data,null,2 ))命名m1.js,执行命令 node m1，查看运行结果。可以看出与上面写死的效果是一样的。
再来看一个比较复杂的效果。
let Mock=require('mockjs')
let data= Mock.mock({
'list|3':[ //生成三个实体数据
{
"id":1,
"name|2-4":'舟舟', //字符串重复次数
"phone|11":"1",
"point|120-150":0, //数字就随机120-150之内的数
"money|1000-3000.2-4":0, //数字就随机1000-3000之内的数,并保留两到四位小数
"status|1":true, //随机生成布尔值 概率均等
"default|1-3":true, //随机生成布尔值 true为1/4
"detail|1":{id:2,name:'ss',age:12} //随机去body内一个属性
}
]
})
console.log(JSON.stringify(data,null,2))命名m2.js,执行命令 node m2，查看运行结果，生成了不同的数据结果。这样就会更加真实的来模拟后端给我们发送的数据。
EasyMock
Easy Mock 是一个极其简单、高效、可视化、并且能快速生成模拟数据的在线 mock 服务。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据。
在线文档：https://www.easy-mock.com/docs
腾讯云安装EasyMock
首先下载需要的node，mongoDB，redis
yum方式安装nodejs
(1) 安装
yum install -y nodejs查看安装的版本
node -vyum方式安装mongoDb
(1)配置yum
vi /etc/yum.repos.d/mongodb-org-3.2.repo编辑以下内容：
[mongodb-org-3.2]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/3.2/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-3.2.asc(2)安装MongoDB
yum install -y mongodb-org(3)启动MongoD
systemctl start mongodyum方式安装redis
(1)下载fedora的epel仓库
yum install epel-release(2)下载安装redis
yum install redis(3)启动redis服务
systemctl start redis安装easy-mock
上传压缩文件：https://github.com/easy-mock/easy-mock
安装zip 和unzip
yum install zip unzip解压压缩包
unzip easy-mock-dev.zip进入目录，安装依赖
cd easy-mock-dev/
npm install执行构建，运行
npm run build
npm run start使用方法
浏览器中访问地址
http://{ip}:7300初始界面如下，不吹牛皮的说，这个页面确实好看。
注册账户后进入首页
我们新创建一个项目，填入相关信息，选择上传文件按，上传我们上面的yml文件。
后续如果想要添加这个项目的api可以点击右上角设置导入。现在可以对这个接口api的 /base/city 进行预览，编辑和删除等操作。这里新建接口，左边填入数据，设置请求地址为 city ，请求方式为 post ,填下描述。确认。
{
"flag": "@boolean",
"code": "@integer(60, 100)",
"message": "查询城市数据",
"data": {
"list|2-5": [{ //随机生成2-5条数据
"id": "@id", //随机ID号
"name": "@city(true)", //随机城市名称
"ishot": "@boolean" //随机true，false
}]
}
}添加完成后再postman中进行接口测试，接口请求地址为 Base URL+/city 类型为 get 。请求结果下图
ElementUI对接Easy-mock
首先官网上提供了非常基础的脚手架，如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主界面菜单等内容。
- 下载vue代码：https://panjiachen.gitee.io/vue-element-admin-site/zh/解压后文件夹中下载依赖并运行，确认其能够正常运行。
npm install
npm run dev- 在Easy-mock中新建接口
/gather/gather的GET请求，填下以下内容
{
"code": 20000,
"flag": true,
"message": "查询成功",
"data|10": [{
"id": "@id",
"name": "@cword(8,12)",
"summary": "@cword(20,40)",
"detail": "@cword(20,40)",
"sponsor": "@string",
"image": "@image",
"starttime": "@date",
"endtime": "@date",
"address": "@county(true)",
"enrolltime": "@date",
"state": "@string",
"city": "@string"
}]
}- 修改config文件下的
dev.env.js中的BASE_API为你的服务器API
'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
BASE_API: '"http://2**.***.***.**0:7300/mock/5fdc3ea***11ebb66f1f/demo"',
MOCK: 'true',
})- 我们尝试修改一个表格来展示数据。找到路径
src\views\table\index.vue，然后填入如下内容
<template>
<div class="app-container">
<el-table :data="list" border style="width: 100%">
<el-table-column prop="id" label="活动ID" width="180"></el-table-column>
<el-table-column prop="name" label="活动名称" width="180"></el-table-column>
<el-table-column prop="sponsor" label="主办方" width="180"></el-table-column>
<el-table-column prop="address" label="活动地址" width="180"></el-table-column>
<el-table-column prop="starttime" label="开始日期" width="180"></el-table-column>
<el-table-column prop="endtime" label="结束日期" width="180"></el-table-column>
</el-table>
</div>
</template>
<script>
import gatheringApi from '@/api/gather'
export default {
data(){
return {
list:[]
}
},
created(){
this.fetchData();
},
methods:{
fetchData(){
gatheringApi.getList().then(response => {
this.list=response.data
});
}
}
}
</script>- 找到路径
src\api\table.js，然后填入如下内容
import request from "@/utils/request"
export default {
getList(){
return request({
url:'/gather/gather',
method:'get'
})
}
}- 重新运行项目，浏览器访问控制台打印的地址，找到相应的菜单就能看到结果了。我们不断刷新能够看到显示的数据是不同的，显然，这比之前的数据更加真实，能够模拟真实数据，进行数据填充。
尾言
到此文章结束。这里主要介绍了如何在腾讯云中搭建自己的EasyMock并且在Element-UI中使用它来为我们提供更为真实的数据。以上RestFul、Swagger等皆为铺垫，对接口信息有一个基本的认识和使用。
