​

As a front-end, in addition to writing business code in the daily development process, front-end and back-end joint adjustment is an important part. But this is often the most tedious and tiring part of development. Everyone wants to leave work early, but improving the efficiency of the joint investigation is not a purely technical issue, but a matter of having a good workflow.

Tips: it only takes 1 minute to read the introduction and about 5 minutes for dry goods.

Previously: Personal experienceexcerpts

Code: 403 Kicked me

At that time, the company was switching the technology stack of the mid-stage system and migrating business modules in half a sprint cycle. After the verification of each business module goes online, the corresponding part of the classic car will be removed and the employees will be informed to work based on the new mid-platform system. At that time coincided with the expansion of database and sub-database sub-table, interface flow occasionally fault for daily development added trouble. In this context, I was responsible for the migration of the feedback and suggestion module, that is, the presentation of a lot of types, status to Tag, Progress and statistical data visualization PieChart.

I used Antd Protable and AntV smartly, combined with Swagger document, defined various columns in 2 hours and entered them in the console with high expectations

yarn dev
Copy the code

Log in to the system, select subsystems, and enter the page. The page is fine, the console has no red color, and the only drawback is that there are less than 10 data items. Unable to verify paging and PieChart. At this point, I sat opposite my backend brother said, DEV data is low, you go to UAT.

In order to allow the product manager to see the acceptance of various data display.

​

Some operation, embarrassing things appeared, successfully entered the system but was kicked out when clicking the page.

​

For a moment, my head buzzed. Consider one of the following possibilities: Cross-domain | background role permission not configured | request path error | request method error | authentication failure

Quotes from the back end:

  1. “I can do it. Can you try again?”
  2. “Did your Token expire?”
  3. “You put theRaw requestSent to me. “”
  4. “Can you send me your account number?”

And finally, it turns out that the back end guy hasn’t pushed up the corresponding branch yet.

Swagger’s got me fooled

  1. Document integer, actual string.
  2. The 0 | 1 | 2 represents the state. The 2 is removed at some time and 0 | 1 is left, but in business logic, 0 represents 1 and 1 represents 2.
  3. For years, it was the unspoken rule. Database data has long been mixed with logos but no notes, confusing newcomers.
  4. Inconsistent/not implemented yet 的 Interface path/data structure, according to the document to write good parsing code found that the structure is wrong or missing fields. In short, various document errors/document expiration.

According to the conservation of complexity, is there a better solution? Preferably a mouse-point level.

Work efficiency version of the answer

“Never trust parameters passed from the front end” and “never trust interfaces from the back end” are both worn-out, as are the ARMS alerts that keep the mind on edge at times.

Instead of the unpredictable, can we start with the controllable? Ensuring consistency and timeliness of documents, for example, may not be a problem, but I believe that programmers who have worked for many years are human beings who know everything.

But we are programmers! We use other people’s tools!

Why Apifox

A good product should be intuitive to the user, and will definitely win the user’s favor when the user thinks about whether there is a function (not a common business scenario) that happens to be provided. Apifox is a great tool for improving performance.

Apifox is an integrated collaboration platform for API documentation, API debugging, API Mock and API automated testing. Save every minute of r&d team!Copy the code

Start with a brief description of the development process using Apifox

  1. Design of the interfaceMock services with zero configuration 。
  2. Front-end developers can build on this Mock service.
  3. The back end implements this interface.

Best of all, the interface changes synchronously within the project, and the interface documentation is automatically generated, with no code intrusion at all. That means developers won’t have to deal with the frustration I had. At this point, the naive desire of a Mock interface within a project that can be successfully requested and guaranteed to synchronize documents and data structures has been satisfied. Any late changes are easy and efficient, just a click of the mouse.

In a horizontal comparison to Postman, common features and usage habits remain the same, and many innovations have been made to improve developer productivity.

1. Interface support “Use case Management”

Usually an interface will have multiple case use cases, such as correct use case parameters error use case data null use case different data state use case. Use cases of these different states are defined when defining the interface, and run directly when debugging the interface, which is very efficient.

2. “Data Model” definition and reference

Data models can be defined independently, directly referenced in interface definitions, and referred to each other. The same data structure, only need to define once can be used in multiple places; You only need to modify one place and update multiple places in real time to avoid inconsistency.

3, “automatic verification” data structure during debugging

When using the Apifox debugging interface, the system automatically verifies whether the returned data structure is correct according to the definition in the interface documentation. There is no need to visually identify the data structure, and no need to write the assertion script manually. Very efficient!

​

Apifox automatically validates data structures

4. “Visualize” setting assertions

Set the assertion:

​

Apifox sets assertions

After running, see the result of the assertion:

​

5. “Visualize” setting extraction variables

​

6, support database operations

​

7. “Zero configuration” Mock out very human data

Here’s how Apifox and other tools mock out data with zero configuration:

​

Apifox Mock data results compared to similar tools

As you can see, the Apifox zero-configuration Mock is very close to the real data, and front-end development can use it directly without having to write Mock rules manually.

How does Apifox do thatHigh efficiency,Zero configurationGenerate very user-friendly mock data

  1. Apifox automatically generates mock rules based on the data structure and data type in the interface definition.
  2. Apifox has a built-in smart Mock rule library that intelligently optimizes automatically generated mock rules based on field names and field data types. For example, the name contains a stringimagethestringType field, automatically mock out an image address URL; Contain stringtimethestringType field, automatically mock out a time string; Contain stringcitythestringType field that automatically mocks out a city name.
  3. Apifox can automatically recognize fields such as picture, profile picture, username, mobile phone number, URL, date, time, timestamp, email, province, city, address, IP and so on according to built-in rules to Mock out very human data.
  4. In addition to built-in mock rules, users can also customize a library of rules to meet various personalized requirements. Support the use ofRegular expression,The wildcardTo match the field name custom mock rule.

8. Generate online interface documentation

Apifox projects can “share” API documents online, which can be set to public or password-accessible, making it easy to collaborate with external teams.

Experience the address

9. Automatic code generation

According to the interface model definition, Automatically generate business code (Model, Controller, unit test code, etc.) and interface request code in various languages/frameworks (TypeScript, Java, Go, Swift, ObjectiveC, Kotlin, Dart, C++, C#, Rust, etc.). Apifox supports automatic code generation for 130 languages and frameworks.

More importantly, you can customize code templates to generate code that conforms to your team’s architectural specifications for a variety of individual needs.

10. Import and export

  1. Supports exportOpenApi (Swagger),Markdown,HtmlData format, as can be exportedOpenApiFormat data, so you can take advantage of OpenApi’s (Swagger) rich ecosystem of tools to do all sorts of interface related things.
  2. Support for importingOpenApi (Swagger),Postman,HAR,RAML,RAP2,YApi,Eolinker,NEI,DOClever,ApiPost 、Apizza 、ShowDoc,API Blueprint,I/O Docs,WADL,Google DiscoveryAnd other data formats, convenient old project migration.

Close to you

By default, Apifox provides a sample project to play with when you log in for the first time

When I saw the API Hub, I knew how handy it would be for future development projects to call third-party apis.

Write in the last

Limited space to introduce more, I hope interested partners can go to the official website of Apifox to experience personally, familiar with your VUE style

A smart programmer must know how to improve the efficiency of development, so as to ensure that the output of spare time to work and technical progress!

With you!

​