The introduction

Today, let’s talk about Mock. With the development of the Internet, the development mode of separating the front and back ends has emerged in the past two years, and Mock has also come to the table from behind the scenes, making more people know that the traditional development mode of Mock is mostly limited to the back end.

Mock has been a commonplace topic, and there are many online searches. All predecessors have spoken well of it, but today I will only talk about it — easy-mock.

Why suddenly to talk about it, this is it’s a long story, said in the profile, focus on sharing work encountered in the pit, but this time is not my pit, is derived from the QQ group of friends (# if you want to know the story, and I will, then I have to speak out for you, welcome to leave a message oh #), please see below:

I’m Su Nan, the chief pit filling officer, sharing with my heart to make a warm siege lion. Male Z: honeyBadger8, Group: 912594095

What is the Mock

What is a Mock??MockIn fact, before the existence of real data, that is, the replacement of the debugging period, is a virtual existence, using words it is a spare tire, such as girls long good-looking, chasing her more people, but not very satisfied but also do not refuse, in their favorite little brother before the emergence, has been hanging you 😂!

How to Mock data?

  • Don’t tell menewAn oh, object will donew, the spare tirenewDon’t come out 🤫;
  • Method 1: The lowest way to write Mock data in code, JSON file;
  • Method two: useCharles 、FiddlerAnd other proxy tools to map urls to local files;
  • Mock Server (mockJS) is a bit troublesome and needs to restart the service after each change.nodemonCan solve, but open more things, computer card out of the sky, maintenance is troublesome;
  • 4. Standard companies have already integrated a mock data architecture.
  • The key to the:easy-mockAn onlineMockPlatform, good work and sexy is your best choice for a spare.
  • Of course excellent you may have many other ways, welcome to add.
// Mock basic usage examples
import Mock from "mockjs";
Mock.mock({
    "code": 0."message": "Request successful"."data|20": [{
        "name": "@cname".//cname in Chinese, name in English
        "userId": "@id"."lastDate": "@datetime"
    }]// Column exchange by Chief Pit Filling Officer, Su Nan: 912594095, Official Z: honeyBadger8
})

Copy the code

What is easy-mock and what can it bring us?

  • Easy Mock is a persistent service that visualizes and quickly generates Mock data,
  • Easy Mock supports basedSwaggerCreate projects to save time manually creating interfaces;
  • To put it simply: Easy Mock is a service for creating mocks online that saves you the trouble of making fun of yourselfconfiguration,The installation,The service,maintenance,Mock data for multiplayer collaboration is not interoperableAnd so on a series of tedious operations, it can not give you all you want in 1 second of time, call to, easy to go the best 2018The spare tireNo one, do not have to worry about any liability oh.
  • There’s more to discover…

Simple to understand – Brief introduction

  • Just like people long again good-looking, after understanding to understand, a thing is also how, who uses who knows;
  • Easy Mock supportTeam collaborationOr it can be a personal project,
  • The following takes individual projects as an example. There is no difference between collaboration with multiple people, but there is less member invitation.

Mock syntax Review

  • @ip -> randomly output an IP;
  • @id -> Random output of 18 characters, no arguments;
  • “Array | 1-10” – > 1-10 random output the length of the array, also can is directly fixed length;
  • “Object | 2” – > output a two key value object,
  • “@image()” returns a placeholder URL, supportedsize.background.foreground.format.text;
  • Wait, I won’t go through them all here.

Simple to understand – Create an interface

  • It is written exactly like mock.js, as the code above shows in more examples
  • useEasy MockTo create an interface, look at the following figure:

Simple to understand – advanced use of Function

  • Online editing, it also supports function,
  • Isn’t it nice that we can get all the headers, that we can write the logic, write the operations as if we were writing them in JS,
  • Of course, it certainly has many limitations, such as not supportES6.
  • There is one thing to notefunctionI want to write outMockObject, cannot be direct@....
  • Take a look at an example:
object describe
Mock The Mock object
_req.url Get the request URL
_req.method Get request method
_req.params Gets the URL parameter object
_req.querystring Gets the query parameter string (in the URL? The following part), does not include?
_req.query The query parameter string is parsed and returned as an object, or an empty object if there is no query parameter numeric string
_req.body When a post request is x-www-form-urlencoded, we can get the request’s parameter object
. _req. Cookies, IP, host, etc.,I'm just a code moveAnd more detailedPlease see here 
// Simple simulated login, according to the user passed parameters, return different logical data
{
  defaultName:function({_req}){
    return _req.query.name;
  },
  code: function({_req}){
    return this.defaultName ? 0 : -97;
  },
  message: function({_req}) {
    return this.defaultName ? "Login successful" : "Parameter error";
  },
  data: function({_req,Mock}){
    return this.defaultName ? {
      token: Mock.mock("@guid()"),
      userId: Mock.mock("@id(5)"),
      cname: Mock.mock("@cname()"),
      name: Mock.mock("@name()"),
      avatar: Mock.mock("@image(200x100, #FF6600)"),
      other:"@IT· Flathead Alliance - Chief Pit Filler Su Nan takes you on easy Mock data"
    }:{}
  }// Column exchange by Chief Pit Filling Officer, Su Nan: 912594095, Official Z: honeyBadger8
}


Copy the code

Simple to Understand – online debugging

  • Even the best engineers have to test their code, and no one can say that their code is badBug.
  • Easy MockIt really knows you, it’s ready for you, the interface is written, it’s ready for you to test,
  • Don’t you think it’s awesome? If you write your mock data locally, you’ll need to restart the service, write parameters manually, and perhaps the entire test page,
  • Know that you are desperate to know the specific debugging mode:
  • Can’t you see it? The online debugging link has been prepared for you, supporting POST, GET, PUT and other ways, because GIF loading is relatively large, not a demonstration

The end:

All good things come to an end, and it’s time to say goodbye. That’s what Sunan brought to you today. Have you got it? Easy Mock has more powerful points to do it yourself, # share with your heart to make a warm siege lion #, hope today’s share can bring you some growth, if you think it is good, remember to like oh, and follow the public Z number below even better, every week for you to tweet the latest share 👇👇.

Share with heart grow together, do have temperature siege lion.

Author: Su Nan – Chief Pit filling officer

Link: blog.csdn.net/weixin_4325…

Communication group: 912594095, Public H: honeyBadger8

This article is original, all copyright belongs to the author. Commercial reprint please contact @IT· Flathead brother alliance for authorization, non-commercial reprint please indicate the original link and source.