RESTful API/DOClever/Mock

RESTful API

什么是REST

特点

RESTful API定义

常见接口测试工具

DOClever中Mock数据开发使用

下载

http://www.doclever.cn/controller/download/download.htmlhttps://github.com/sx1989827/DOClever

新建文件夹

vi docker-compose.yml

version: "2"
services:DOClever:image: lw96/docleverrestart: alwayscontainer_name: "DOClever"ports:- 20080:10000volumes:- /src/doclever/file:/root/DOClever/data/file- /src/doclever/img:/root/DOClever/data/img- /src/doclever/tmp:/root/DOClever/data/tmpenvironment:- DB_HOST=mongodb://mongo:27017/DOClever- PORT=10000links:- mongo:mongomongo:image: mongo:latestrestart: alwayscontainer_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);