moco入门到实践，手把手搭建一套全面的moco本地服务

最新推荐文章于 2023-04-23 15:26:01 发布

置顶善良的大铁牛

最新推荐文章于 2023-04-23 15:26:01 发布

阅读量3.3k

点赞数 5

分类专栏：前端技术总结文章标签：前端 moco 前后端分离

本文链接：https://blog.csdn.net/qq_41829492/article/details/88093147

版权

前端技术总结专栏收录该内容

4 篇文章 0 订阅

订阅专栏

10分钟拿下Moco框架

前言
开始使用
快速搭架本地moco服务器
结语

前言

前后端分离的项目，然而在开发前期我的工作是根据接口文档搭建一套moco本地服务。原本并没有接触过，通过查阅资料整理出一套完整moco使用思路，也应用到了我的开发中。

读前建议：本文引用其他大佬的文章请仔细阅读。我只讲解如何应用

开始使用

#下载安装
使用moco非常容易，更不需要我们写后台代码，很方便前端工程师。下载和使用，请移步 ⇒ https://blog.csdn.net/lt326030434/article/details/80339397

# 模拟各种http请求
例如get请求、post请求、带参请求、带cookie请求，并且还可以约定请求header、文件操作等。下面是我发现的最全面的一篇moco的请求约定文章，很详细的介绍了moco约定各种请求的写法，移步到此学习 ⇒ https://www.cnblogs.com/hanschen-coder/p/6528829.html

# 全局的概念和应用

掌握了moco的使用和模拟各种请求，大家就会领略到基础的写法存在文件庞大、代码重复及难以维护等问题，由此我们引出moco全局的概念。

# 使用全局的思想编写moco

## 编写全局settings.json
文件过长就是因为我们把moco模拟的所有请求都写在了一个文件中。所以我们可以根据接口功能的不同，将其按模块划分，最终使用一个全局文件将各个模块引入。
例如我们moco系统的登录功能，那就在全局配置文件中这么写（同一般定义moco相似）：

[
  {
    "response": {
      "headers": {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Max-Age": "3600",
        "Access-Control-Allow-Headers": "*",
        "Access-Control-Allow-Credentials": "true",
        "Content-Type": "text/html;charset=utf-8"
      },
      "latency": {
        "duration": 1,
        "unit": "second"
      }
    },
    "file_root": "api/sys/login",
    "include": "login.json"
  }
]

参数	解释
`header中的代码`	跨域
`latency`	模拟延迟，`duration`表持续时长；`unit` 为单位
`file_root`	要引入的文件目录
`include`	具体要引入的文件，是file_root文件夹下的文件（可以用*匹配）

这种写法挺易懂的，很像我们把css写成外部文件，容易管理还可以复用。

## 实现全局request（如带token访问的需求）
全局的，request配置让我们能省掉许多相同的参数、url，看文本段即可体会我的意思了。
在这里插入图片描述
如果不使用全局这么写，我们原来的接口得这么写： /sys/login， /sys/exit
如果不使用全局，原来访问每个接口都得定义：ucode、token 参数

而在全局文件的 request 定义URL "uri":"/sys"后：
· 被引用文件中所有的moco再声明URL就没必要全拼;
· 参数也仅仅只在全局文件定义一次，即可应用到全部的子文件中
在这里插入图片描述
到这里，就可以搭建一套思路十分清楚的moco了！

## 使用 json文件完成请求和相应
一次请求返回个百千条数据很常见。所以我们可以把返回数据封装成json文件来引用，也方便我们重复使用。

{
    "description":"查全部",
    "request":{
      "uri":"/findAll",
      "forms":{
        "gender": "1"
      }
    },
    "response":{         
      "json":{                                
        "msg" : "查询成功",
        "code" : 0,      // ~~~~~~~~~~模拟一段注释~~~~~~~~~
        "data" : [ {     //要返回的数据有可能很庞大，成千上万条，
          "id" : 1,		 //如果写在 response中，文件非常长
          "title" : "阿三" //维护很不方便，眼花缭乱！！！
        }, {
          "id" : 2,
          "title" : "汪汪汪"
        }, {
          "id" : 3,
          "title" : "热热热"
        } ]
      }
    }
  }

没有优化前，response中长长的数据非常占屏幕，这只是3条数据，要是100条，那疯了。

优化之后，我们的相应数据抽离为json文件：

{
    "description":"查全部",
    "request":{
      "uri":"/findAll",
      "forms":{
        "gender": "1"
      }
    },
    "response":{
      "file":"result_file/findAll.json"
    }
  }

提示：在这里填个坑，我这response引用file使用的是相对路径，这因为我们在全局配置里定义了file_root！否则必须使用绝对路径目标该文件
在这里插入图片描述
当然request请求参数也可以封装成json文件：

快速搭架本地moco服务器

moco执行流程图解

在这里插入图片描述
moco是从上到下的执行顺序：
也就是说，当请求进入，moco会从主配置文件开始从上往下一行行执行，一行行的匹配url，根据这一点我们可以写一个全局请求处理，例如：拦截所有get请求、处理所有无匹配的请求

自定义请求拦截

拦截操作一定要放在配置文件开头，这样能够做到get请求第一时间被拦截，并做处理：
在这里插入图片描述

全局异常处理

异常处理的原理：就是根据moco从上到下的执行顺序。那么从上开始执行，最终执行到最后一个moco还没有匹配到 Url ，百分之百moco会抛400异常，也就是我们开发中的404，没有找到对应资源。
这就意味着我们异常处理的moco一定配置在全局文件的末尾，当没有匹配到URL的时候，做收尾工作，给前台来个少女般温柔提示

在这里插入图片描述

主配置文件示意图

在这里插入图片描述
OK，moco这个框架理解全局概念，便掌握。

结语

本文引用：
https://blog.csdn.net/lt326030434/article/details/80339397
https://www.cnblogs.com/hanschen-coder/p/6528829.html
https://blog.csdn.net/java_green_hand0909/article/details/78740765
文章希望大家多多指点