腾讯云搭建Easy-Mock对接Element-UI提供数据支持

本文目标

了解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即可看到文档页面

image

Mock.js

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试，根据数据模板生成模拟数据模拟 Ajax 请求，生成并返回模拟数据基于 HTML 模板生成模拟数据。

Mock.js具有以下特点：

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

安装

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，查看运行结果。可以看出与上面写死的效果是一样的。

image

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

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，查看运行结果，生成了不同的数据结果。这样就会更加真实的来模拟后端给我们发送的数据。

image

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) 安装

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

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

image

注册账户后进入首页

image

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

image
image

后续如果想要添加这个项目的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 。请求结果下图

image

ElementUI对接Easy-mock

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

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

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

   npm install
   npm run dev
  1. 在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"
        }]
    }
  1. 修改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',
      })
  1. 我们尝试修改一个表格来展示数据。找到路径 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>
  1. 找到路径 src\api\table.js ，然后填入如下内容
   import request from "@/utils/request"
   export default {
       getList(){
           return request({
               url:'/gather/gather',
               method:'get'
           })
       }
   }
  1. 重新运行项目，浏览器访问控制台打印的地址，找到相应的菜单就能看到结果了。我们不断刷新能够看到显示的数据是不同的，显然，这比之前的数据更加真实，能够模拟真实数据，进行数据填充。
image

尾言

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

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

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 159,117评论 4赞 362
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 67,328评论 1赞 293
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 108,839评论 0赞 243
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 44,007评论 0赞 206
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 52,384评论 3赞 287
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 40,629评论 1赞 219
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 31,880评论 2赞 313
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 30,593评论 0赞 198
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 34,313评论 1赞 243
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,575评论 2赞 246
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,066评论 1赞 260
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 28,392评论 2赞 253
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 33,052评论 3赞 236
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,082评论 0赞 8
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,844评论 0赞 195
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 35,662评论 2赞 274
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 35,575评论 2赞 270