本文目标

了解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从未如此简单。

语法

字段名类型描述
swaggerstring必需的。使用指定的规范版本。
infoInfo Object必需的。提供元数据API。
hoststring主机名或ip服务API。
basePathstringAPI的基本路径
schemesstringAPI的传输协议。 值必须从列表中:”http”,”https”,”ws”,”wss”。
consumesstring一个MIME类型的api可以使用列表。值必须是所描述的Mime类型。
producesstringMIME类型的api可以产生的列表。 值必须是所描述的Mime类型。
paths路径对象必需的。可用的路径和操作的API。
definitions定义对象一个对象数据类型生产和使用操作。
parameters参数定义对象一个对象来保存参数,可以使用在操作。 这个属性不为所有操作定义全局参数。
responses反应定义对象一个对象响应,可以跨操作使用。 这个属性不为所有操作定义全球响应。
externalDocs外部文档对象额外的外部文档。
summarystring什么操作的一个简短的总结。 最大swagger-ui可读性,这一领域应小于120个字符。
descriptionstring详细解释操作的行为。GFM语法可用于富文本表示。
operationIdstring独特的字符串用于识别操作。 id必须是唯一的在所有业务中所描述的API。 工具和库可以使用operationId来唯一地标识一个操作,因此,建议遵循通用的编程的命名约定。
deprecatedboolean声明该操作被弃用。 使用声明的操作应该没有。 默认值是false。

(2)字段类型与格式定义

普通的名字typeformat说明
integerintegerint32签署了32位
longintegerint64签署了64位
floatnumberfloat
doublenumberdouble
stringstring
bytestringbytebase64编码的字符
binarystringbinary任何的八位字节序列
booleanboolean
datestringdate所定义的full-date- - - - - -RFC3339
dateTimestringdate-time所定义的date-time- - - - - -RFC3339
passwordstringpassword用来提示用户界面输入需要模糊。

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
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具有以下特点:

  1. 前后端分离
  2. 让前端攻城师独立于后端进行开发。
  3. 增加单元测试的真实性
  4. 通过随机数据,模拟各种场景。
  5. 开发无侵入
  6. 不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据。
  7. 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

安装

1
cnpm install mockjs

举例

以前生成五条数据的集合只能写死。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
{
"list": [
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
}
]
}

新建一个js文件,填入内容:

1
2
3
4
5
6
7
8
9
10
let Mock=require('mockjs')
let data=Mock.mock({
'list|5':[
{
'id':1,
'name':'测试'
}
]
})
console.log(JSON.stringify(data,null,2 ))

命名m1.js,执行命令 node m1,查看运行结果。可以看出与上面写死的效果是一样的。

再来看一个比较复杂的效果。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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

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

腾讯云安装EasyMock

首先下载需要的node,mongoDB,redis

yum方式安装nodejs

(1) 安装

1
yum install -y nodejs

查看安装的版本

1
node -v

yum方式安装mongoDb

(1)配置yum

1
vi /etc/yum.repos.d/mongodb-org-3.2.repo

编辑以下内容:

1
2
3
4
5
6
[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

1
yum install -y mongodb-org

(3)启动MongoD

1
systemctl start mongod

yum方式安装redis

(1)下载fedora的epel仓库

1
yum install epel-release

(2)下载安装redis

1
yum install redis

(3)启动redis服务

1
systemctl start redis

安装easy-mock

上传压缩文件:https://github.com/easy-mock/easy-mock

安装zip 和unzip

1
yum install zip unzip

解压压缩包

1
unzip easy-mock-dev.zip

进入目录,安装依赖

1
2
cd easy-mock-dev/
npm install

执行构建,运行

1
2
npm run build
npm run start

使用方法

浏览器中访问地址

1
http://{ip}:7300

初始界面如下,不吹牛皮的说,这个页面确实好看。

注册账户后进入首页

我们新创建一个项目,填入相关信息,选择上传文件按,上传我们上面的yml文件。

后续如果想要添加这个项目的api可以点击右上角设置导入。现在可以对这个接口api的 /base/city 进行预览,编辑和删除等操作。这里新建接口,左边填入数据,设置请求地址为 city ,请求方式为 post ,填下描述。确认。

1
2
3
4
5
6
7
8
9
10
11
12
{
"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

首先官网上提供了非常基础的脚手架,如果我们使用官网的脚手架需要自己写很多代码比如登陆界面、主界面菜单等内容。

  1. 下载vue代码:https://panjiachen.gitee.io/vue-element-admin-site/zh/

    解压后文件夹中下载依赖并运行,确认其能够正常运行。

1
2
npm install
npm run dev
  1. 在Easy-mock中新建接口 /gather/gather 的GET请求,填下以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
"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"
}]
}
  1. 修改config文件下的 dev.env.js 中的BASE_API为你的服务器API
1
2
3
4
5
6
7
8
9
'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',
})
  1. 我们尝试修改一个表格来展示数据。找到路径 src\views\table\index.vue ,然后填入如下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<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>
  1. 找到路径 src\api\table.js ,然后填入如下内容
1
2
3
4
5
6
7
8
9
import request from "@/utils/request"
export default {
getList(){
return request({
url:'/gather/gather',
method:'get'
})
}
}
  1. 重新运行项目,浏览器访问控制台打印的地址,找到相应的菜单就能看到结果了。我们不断刷新能够看到显示的数据是不同的,显然,这比之前的数据更加真实,能够模拟真实数据,进行数据填充。

尾言

到此文章结束。这里主要介绍了如何在腾讯云中搭建自己的EasyMock并且在Element-UI中使用它来为我们提供更为真实的数据。以上RestFul、Swagger等皆为铺垫,对接口信息有一个基本的认识和使用。

如果您喜欢这篇文章,请点赞、评论、收藏,您的支持将是我前进的动力。