本文目标
了解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 | 详细解释操作的行为。GFM语法可用于富文本表示。 |
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 -v
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
yum方式安装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等皆为铺垫,对接口信息有一个基本的认识和使用。
如果您喜欢这篇文章,请点赞、评论、收藏,您的支持将是我前进的动力。