If you say you know how to Mock, use it!! 🔥 🔥

☀ ️ preface

• Hello, everyone, I’m Xiao Lu. Some time ago, a front-end friend joined the company. In order to make my resume better, I wrote that “I am skilled in using Mock debugging interface in the front-end, simulating interface data, reducing joint debugging problems and greatly improving development efficiency”.
• However, I was pointed out that the project development progress was slow in the meeting after I joined the company.
• Product Manager: Why is the project so slow?
• Back end: I have been working hard to write the interface, part of the interface I have given the front-end interface documentation 😅.
• Front end: my page has written the back-end interface has not written well, my front end page greatly depends on the back-end interface, I have no way to carry out data debugging 🥺.
• “Roared the front end leader: I thought you said you could use itMock? You pour use 😫!

• The above is based on real events

🤷♂️ what went wrong

• I was confused when this friend came to me, you know? Yeah, I thought you said you knew how to use itMockWhy not 🤨?
• Later I learned that he had said skilledMockWrite one for each interface in the front endjsonTo correspond to the interface call.
• This is not only time-consuming but also easy to write wrong, no wonder will be ridiculed for slow development efficiency.
• “Well, young Lugo, is there any way I can do this quickly and locallyMockDebug? 🤤”
• Of course there is. Listen to me, but before I do that, let me tell you a little bit about the new studentsMockWhat is?

What is ❓Mock

• As shown in the figure above, this is a process we have to go through in development.
• In a common development environment, when we get a requirement, we usually develop both the front and back ends simultaneously.
• What? You say can a requirement wait for the back-end to complete the development of the front-end docking, this is impossible 🙅, unless the company is your home.
• But in fact, many times the front-end ability of friends, the speed of writing pages are particularly fast, shua shua very fast ah several static pages all finished, the rest is the interface.
• That’s where the data comes incoding, we need to rely on the returned interface data for some complex logic processing, but in the interface at the same time, it is inevitable to encounter the interface document description is not clear, such as parameter name is wrong, whether to fill in is not marked out, all kinds of small problems let people’s scalp tingling exposed.
• You want to know in the development of the road is not just your own a person in the busy, if everything ran to ask the back end: “you are not writing wrong”, “which is a must fill ah”, delay is everyone’s time, but also to the back end colleagues to create a “hello food” feeling 🤯.
• Learn to use what works best for youMockThe method of data is very important,MockIt translates tosimulationAs the name suggestsApi MockThat’s analog interface data.
• To put it more plainly, it is a technology that can obtain the same simulated data as the agreed data structure of the back-end when the back-end data does not come out, so as to avoid the lag of the back-end interface affecting our normal development.

👨💻 what do others do

• If you say your company’s interface back end will write you good false data false interface for you to debug, then I strongly suggest you ask him to eat more roast leg of lamb 🍖, after all, this backend is few and far between, if there is, it must be a good brother with your life.
• After collecting the status quo of some front-end friends, we often use the following method, I will not talk about how to use in detail, to give you a brief description of the advantages and disadvantages, I summarize a most convenient for youMockMethods of data.

Local analog data

• In the project according to the data returned by the interface for simulationjsonRequest to local when requestedjsonFile for data processing.
• Advantages:
  • There are no advantages.
• Disadvantages:
  • I mean, it was pretty simpleMockData issues, but only for projects with only a few interfaces. Once the number of interfaces increases, each interface needs to write a set of return parameters. Don’t you hate it? I hate it anyway.
  • Hacking into front-end code, a qualified front-end team does not allow any unnecessary code, comments, let alone this muchjsonFile.
  • When the interface is calledurlNeed to change to localjsonAddress, wait until the end of the development is completed also need to replace according to the actual situation, the earth people know that a project interface is countless, so not only a waste of a lot of time is also prone to error, I use this time to drink a milk tea 🍵 is not sweet.

Interface Management platform

• The most representative would beyapiI believe that most front-end developers are here to take the backend students interface documents to develop. Of course you can do it insideMockOf the data.
• Advantages:
  • No need to invade our front-end code, when adjusting the interface only need to replace the backend students setMockInterfaces will do.
  • Interface documentationMockIntegration, backend students modify the document will also be modifiedMockInterface.
• Disadvantages:
  • So dependent on the back end that most of the back ends I know don’t even want to write about itMokcThe data is called by the front end.
  • Increase backend development time, not only to ensureMockThe availability of data should also consider the progress of the whole project development, so you can drink a few cups of milk tea with this time.
  • Most companies don’t offer itspecialService, project cost gradually increased.

Request interception returns false data

• Data interception refers to through simulationHttpThe request intercepts the real request of the corresponding matched interface and returns simulated data.
• Mock. Js is probably the most representative one. You can check out the official website for details on how to use it.
• Advantages:
  • Interception can be done without modifying existing codeAjaxRequest, and returns simulated response data.
  • Let the front end siege team develop independently of the back end.
  • Random parameters can be used to simulate the scene, no longer need to return data by hand.
• Disadvantages:
  • It is not suitable for projects with large scale, multi-team collaboration, and rapidly changing requirements.
  • Installation and configuration required, yes I listed this as a disadvantage, as a front-end that saves itself more time is a good front-end (I’m too lazy).

🌋 what should be used?

• Some friends may say: “Ah little Lu Ge you this said, all the schemes have denied time, then you said a lonely ah, in the end what should be used?”
• Don’t worry, I’m going to introduce you to oneAPI MockThe artifact:Apifox!!!!!!!!! 🔥 🔥

• I believe that most people have heard of this magic software, if you have not heard, you must be surfing the Internet 🏄♀️ less, ha ha ha just kidding,ApifoxI didn’t know that until recently, but it smells so good.
• Anyway, what do you do with this software? Is it expensive? I tell you: have a hand to go 🙋, this time I say with everybody hisMockFunctions, other functions can goApifoxThe official website to check oh ~

Importing interface documents

• First of all, you canApifoxWrite interface documentation in it, if you haven’t done it beforeApifoxIt doesn’t matter to document the interface.
• Whatever your previous interface document wasswaggerorPostmanYou can import themApifox.

To obtainMockdata

• Let’s use a simple example to demonstrate how to use itMockFunction.
• First open the previously defined interface document, then you will see four pagestab, respectively,The document,Modify the document,runandSenior Mock.

• inThe documentYou can see the basic information of the interface, including but not limited to the basic information of the interface, request parameters, sample values, return values, and return examples.

• inModify the documentYou can adjust and modify the previously defined interface, and even generate sample values randomly.

• But that’s not what we’re doing this timeAPI MockI mean, there’s only one thing we really need to focus on, and that’s inrunHow do we getMockData 👌.
  • Open run page
  • Switching the Mock environment
  • Click on the run

• Yes you read that right, that’s it, isn’t it super easy!! 🤙 you can call thisMockInterface into your project to call the interface can be returned according to the interface document simulation data, so the most basicMockAnd you’re done.

smartMockThe rules

• We can see in the modification document that not every parameter is setMockRules? Then why would it automatically randomly generateMockData?
• That’s because inApifoxSmart built-in rules are enabled by defaultZero configurationCan beMockVery human data.
• Sweet, really too sweet, for me this kind of lazy person is simply a savior ✌️.

customMockThe rules

• “Hey, Lugo, can he customize itMockRules, because our data is a little bit special.
• Of course, you can see my picture above is actually customized a simpleMockRule, I want the argument to bestatusIs only simulated0with1Theta is the state zeroclosedandnormal

• We can create as many as you wantMockRules to make a custom.

• We want to use the default rules for the most part, while we want to use the specified ones for individual parametersMockRules we can use inModify the documentPage select the correspondingMockThe rules.

• So far, this timeAPI MockShare here oh ~ aboutApifoxThere are a lot of powerful features, and the theme isMockI will not elaborate ~ if interested partners can goApifoxCheck out the official website

👋 is at the end

• First of all, thank you very much to see here, this article will be shared here, if there is a need to suggest direct collection oh ~
• As a front-end developer, learnMockIs the most basic thing, not only can improve the development efficiency but also can control the interface information in their own hands.
• You have to stop asking yourself why is this so hard? You need to ask yourself why you can’t, if you haven’t found a way.
• If you feel this article is helpful to your words as well 🍉🍉 attention + likes + favorites + comments + forwarding 🍉🍉 support yo ~~ 🍉 your support is the biggest power OF my update.
• If you want to discuss with me and learn more about the front end you can join meFront-end communication learning group, we talk about the world ~~~

🌅 past wonderful

What about 2021 for the man who couldn’t find a job a year ago?

Be sure to accept these 10+ loading effects to make your project shine ⭐

I brought you 10 “science and technology feeling full” visual data screen ⚡, collection is equal to learn ~

Product Manager: Can you get the word cloud moving?