RESTful API

什么是REST

特点

RESTful API定义

常见接口测试工具

DOClever中Mock数据开发使用

下载

http://www.doclever.cn/controller/download/download.html

https://github.com/sx1989827/DOClever

新建文件夹

vi docker-compose.yml

version: "2"
services:
  DOClever:
    image: lw96/doclever
    restart: always
    container_name: "DOClever"
    ports:
    - 20080:10000
    volumes:
    - /src/doclever/file:/root/DOClever/data/file
    - /src/doclever/img:/root/DOClever/data/img
    - /src/doclever/tmp:/root/DOClever/data/tmp
    environment:
    - DB_HOST=mongodb://mongo:27017/DOClever
    - PORT=10000
    links:
    - mongo:mongo

  mongo:
    image: mongo:latest
    restart: always
    container_name: "mongodb"
    volumes:
    - /src/doclever/db:/data/db

docker-compose up -d

docker ps

或者

docker ps | grep doclever

firewall-cmd --state

查看防火墙开启状态

firewall-cmd --list-state

firewall-cmd --add-port=端口号/tcp --zone=public --permanet

 firewall-cmd --add-port=20080/tcp --zone=public --permanet

firewall-cmd --reload

让其生效

firewall-cmd --list-all

验证

http://xxx.xxx.xxx.xxx:xxxx/html/web/controller/index/index.html

登录

管理总后台方式登录
默认账号密码都是DOClever

退出总账号注册

test
123456

创建接口

运行后接口返回

使用Mock接口

右键另存为.net.js

运行代码

postman测试

修改接口返回

修改之后保存不做任何操作

接口状态开发完成

自动切换到真实地址

Mock.js

gitHub地址
文档

npm i -D mockjs

npm i -D mockjs

配置服务器

import Mock from "mockjs";
import banners from "./rbanners.json";
import floors from "./rfloors.json";

// 一旦运行就会拦截Get请求，请求地址/mock/banners
// 并最后参数作为响应结果响应~
Mock.mock("/mock/banners", "get", {
  code: 200,
  "data|4": banners,
});

Mock.mock("/mock/floors", "get", {
  code: 200,
  "data|3-5": floors,
});

banners.json

[
  {
    "id|+1": 1,
    "imgUrl": "@image('720x455', '@color')"
  }
]

拦截器

import axios from "axios";
// 进度条
import NProgress from "nprogress";
import "nprogress/nprogress.css";
// 提示框
import { Message } from "element-ui";

const instence = axios.create({
  baseURL: "/mock",
});

instence.interceptors.request.use((config) => {
  NProgress.start();
  return config;
});

// 响应拦截器
instence.interceptors.response.use(
  (response) => {
    NProgress.done();
    if (response.data.code === 200) {
      return response.data.data;
    }
    Message.error(response.data.message);
    return Promise.reject(response.data.message);
  },
  (err) => {
    NProgress.done();
    Message.error(err);
    return Promise.reject(err);
  }
);

export default instence;

数据由vuex管理

…

node环境

// 使用 Mock
var Mock = require("mockjs");

Mock.Random.title();
Mock.Random.cname();
Mock.Random.color();
Mock.Random.image();

var data = Mock.mock({
   // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  "list|1-10": [
    {
      // 属性 id 是一个自增数，起始值为 1，每次增 1
      "id|+1": 1,
    },
  ], 
     title: "@title(4)",
     "cnname|10": ["@cname"],
     "subTitle|3-10": ["@title(1,3)"],
  "imgList|4": ["@image('200x100', '@color', '#FFF', 'png', '@cname')"],
});

// 输出结果
console.log(data);

// 使用 Mock
var Mock = require("mockjs");

Mock.Random.ctitle();
Mock.Random.color();
Mock.Random.cname();
Mock.Random.image();

var data = Mock.mock({
  // // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
  // 'list|5': [{
  //     // 属性 id 是一个自增数，起始值为 1，每次增 1
  //     'id|+1': 1
  // }]

  // @ctitle(4) 随机中文标题, 长度4位
  title: "@ctitle(4)",
  // "subTitle|3-10" 属性subTitle的值为数组，长度为3-10位
  // @ctitle(1,4) 随机中文标题, 长度1-4位
  "subTitle|3-10": ["@ctitle(1,4)"],
  // "caroucelList|4" 属性caroucelList的值为数组，长度为4位
  "caroucelList|4": [
    // "@image(大小, 背景色, 字体色, 图片格式, 图片内容)" 随机图片
    "@image('200x100', '@color', '#FFF', 'png', '@cname')",
  ],
});
// 输出结果
console.log(data);