您的位置: 首页  >  文章  >  学习RESTful架构前端笔记

学习RESTful架构前端笔记

分类: 文章 • 2024-11-15 14:09:33

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

学习RESTful架构前端笔记

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即可看到文档页面学习RESTful架构前端笔记
  6. 我们将编写好的yml文件也拷贝至nginx的html目录，这样我们就可以加载我们的swagger文档了学习RESTful架构前端笔记

2.Mock.js

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

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

2.1Mock.js的安装

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

学习RESTful架构前端笔记

2.2快速入门

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

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

新建demo1.js 代码如下

执行node demo1命令

学习RESTful架构前端笔记

我们在本例中产生了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 输出用户名和密码，如果不存在会自动注册。
注意：请牢记密码，系统没有找回密码功能！
学习RESTful架构前端笔记

3.1.2创建项目

主界面点击右下角+号

学习RESTful架构前端笔记

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

学习RESTful架构前端笔记

3.2.1接口操作

点击进去 创建接口

学习RESTful架构前端笔记

点击“创建接口” ,左侧区域输出mock数据，右侧定义Method 、 Url 、描述等信息。
学习RESTful架构前端笔记

点击创建

学习RESTful架构前端笔记

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

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
    学习RESTful架构前端笔记

 

相关推荐