学习RESTful架构前端笔记

1.Swagger

swagger 就是一款让你更好的书写API文档的框架

1.1SwaggerEditor安装与启动

1. 下载地址：https://github.com/swagger-api/swagger-editor
2. 解压swagger-editor
3. 全局安装http-server(http-server是一个简单的零配置命令行http服务器)
   npm install -g http-server
4. 启动swagger-editor                                                                                                                                                                  http‐server swagger-editor
5. 浏览器打开： http://localhost:8080

1.1.1语法规则 

固定字段

字段名	类型	描述
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	详细解释操作的行为。GFM语法可用于富文本表示。
operationId	string	独特的字符串用于识别操作。 id必须是唯一的在所 有业务中所描述的API。 工具和库可以使用 operationId来唯一地标识一个操作,因此,建议遵循 通用的编程的命名约定。
deprecated	boolean	声明该操作被弃用。 使用声明的操作应该没 有。 默认值是false。

可以使用代码生成器(先建表)批量生成API文档（yml文档）。

1.2SwaggerUI的安装与启动

SwaggerUI是用来展示Swagger文档的界面

1. 在本地安装nginx
2. 下载SwaggerUI源码 https://swagger.io/download-swagger-ui/
3. 解压，将dist文件夹下的全部文件拷贝至 nginx的html目录
4. 启动nginx
5. 浏览器打开页面 http://localhost即可看到文档页面
6. 我们将编写好的yml文件也拷贝至nginx的html目录，这样我们就可以加载我们的swagger文档了

2.Mock.js

Mock.js （官网http://mockjs.com/）是一款模拟(伪造)数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试提供了以下模拟功能：

• 根据数据模板生成模拟数据
• 模拟 Ajax 请求，生成并返回模拟数据
• 基于 HTML 模板生成模拟数据

2.1Mock.js的安装

在命令提示符下用npm安装mockjs(注意安装在同一个文件夹下，不然下面测试报错Error: Cannot find module 'mockjs')
cnpm install mockjs

2.2快速入门

需求：生成列表数据，数据条数为5条。

显示效果如下：
{
"list": [
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
}
]
}

新建demo1.js 代码如下

执行node demo1命令

我们在本例中产生了5条相同的数据，这些数据都是相同的，如果我们需要让这些数据是
按照一定规律随机生成的，需要按照Mock.js的语法规范来定义。
Mock.js 的语法规范包括两部分：

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

具体规范可见文档(.pdf)。

3.EasyMock

Easy Mock 是杭州大搜车无线团队出品的一个极其简单、高效、​ 可视化、并且能快速生成模拟数据的 在线 mock 服务 。以项目管理的方式组织 Mock List，能帮助我们更好的管理 Mock 数据。

地址：https://www.easy-mock.com
在线文档：https://www.easy-mock.com/docs

3.1EasyMock的基本入门

3.1.1初始设置

浏览器打开https://www.easy-mock.com 输出用户名和密码，如果不存在会自动注册。
注意：请牢记密码，系统没有找回密码功能！

3.1.2创建项目

主界面点击右下角+号

填写项目名称，点击创建按钮

3.2.1接口操作

点击进去 创建接口

点击“创建接口” ,左侧区域输出mock数据，右侧定义Method 、 Url 、描述等信息。

点击创建

现在就可以对接口进行各种操作（预览、克隆、下载、删除等。。。）

3.2本地部署EasyMock

EasyMock为开源项目，为了对其网站不产生依赖，我们可以在本地部署一个

3.2.1centos部署nodejs

服务器环境:centos7

1. 将node官网下载的node-v8.11.1-linux-x64.tar.xz 上传至服务器
2. 解压xz文件
   xz -d node-v8.11.1-linux-x64.tar.xz
3. 解压tar文件
   tar -xvf node-v8.11.1-linux-x64.tar
4. 目录重命名
   mv node-v8.11.1-linux-x64 node
5. 移动目录到/usr/local下
   mv node /usr/local/
6. 配置环境变量
   vi /etc/profile
   填写以下内容
   #set for nodejs
   export NODE_HOME=/usr/local/node
   export PATH=$NODE_HOME/bin:$PATH
   执行命令让环境变量生效
   source /etc/profile
   查看node版本看是否安装成功
   node -v

3.2.2MongoDB安装与启动

我们使用yum方式安装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 mongod

3.2.3Redis安装与启动

1. 下载fedora的epel仓库
   yum install epel-release
2. 下载安装redis
   yum install redis
3. 启动redis服务
   systemctl start redis

3.2.4本地部署easy-mock

1. 项目下载地址： https://github.com/easy-mock/easy-mock
2. 将easy-mock-dev.zip上传至服务器
3. 安装zip 和unzip
   yum install zip unzip
4. 解压
   unzip easy-mock-dev.zip
5. 进入其目录，安装依赖
   npm install
6. 执行构建
   npm run build
7. 启动
   npm run start
8. 打开浏览器 http://服务器ip地址:7300    注意关闭centos防火墙！

3.3导入SwaggerAPI文档

1. 在easyMock中点击“设置”选项卡
2. SwaggerDocs API 选择Upload