At work, our front-end workflow generally starts from the negotiation of THE Api document between the front and back ends, and then makes mock data against the Api document, and then develops the mock data. After the development of the back end, we change the BaseURL of the Api data and switch to the formal Api for joint adjustment. The following

This article introduces a tool (or method), to optimize this workflow, is also my usual work is using the method, as my own notes, also share with you ~

The idea is that developers fill out the required documentation in an API tool, export swagger.json configuration file, import the configuration file into Easy-Mock, and use the tool to automatically generate js files for the front-end API for invocation.

The tools used in this article: sosoApi, easy-mock, Swagger, easy-mock-api-template, axios

If you are interested, you can join the wechat group at the end of the article and discuss with us

1. Use the Api management platform to export swagger.json file

Generally speaking, these tools can generate swagger. Json Api. We can use it to directly generate a beautiful visual Api document. You can also use it as a configuration file to import into other tools, such as easy-mock;

For example, in sosoApi, you can export as swagger document (swagger.json) :

We first export a swagger. Json backup;

2. Use swagger. Json to import easy-mock

Easy-mock is a lightweight and simple platform. Although it does not have the grouping function of THE Api, it is enough to deal with small applications and personal applications. Easy Mock’s official website is used by many people directly in the development environment, which is often overwhelmed. This problem can be solved by local deployment. Refer to the Local installation and deployment of Easy Mock on Windows.

We import swagger. Json file exported from Api management platform when creating project:

The Api we just configured in the Api platform is then synchronized to our easy-mock configuration, such as the sosoApi sample project export resulting in:

Now you can use it to mock your data

The easy-mock Project panel will have a Project ID above it, which you will use later;

3. Use easy-mock-cli to generate JS apis

With easy Mock, we will write the front-end API file. The general API tool is axios, which provides a wrapper:

// utils/fetch.js
import axios from 'axios'
 
const service = axios.create({
  baseURL: 'https://easy-mock.com/project/5bf6a23c92b5d9334494e884'.timeout: 5000
})
 
// Request interceptor
service.interceptors.request.use( config= >{... }, err => {... })// Respone interceptor
service.interceptors.response.use( res= >{... }, err => {... })export default service
Copy the code

We can use easy-mock-cli to generate the API file. If we don’t want to use the original template, we can use the template “easy-mock-api-template”. The resulting API file looks like this:

// api/index.js
import fetch from 'utils/fetch';
 
/* Active query */
const activityQuery = ({ activityDate }) = > fetch({
  method: 'get'.url: '/activity/query'.params: { activityDate }
});
 
/** activity save */
const activitySave = (a)= > fetch({
  method: 'post'.url: '/activity/save'
});
 
/** Activity submission */
const activitySubmit = ({ activityId, content }) = > fetch({
  method: 'post'.url: '/activity/submit'.data: { activityId, content }
});
 
export {
  activityQuery,   // Active query
  activitySave,    // Save the activity
  activitySubmit   // Activity submission
};
Copy the code

Then in the file you can:

import * as Api from 'api/index.js';
 
/ / call
Api.activitySubmit({ activityId: 2 })
    .then(...)
Copy the code

A brief introduction to configuration files. For more complex configurations, refer to the original documentation.

//.easy-mock.js configuration file
 
{
  host: 'http://localhost:8080/'.// For the source of easy-mock, do not write it if there is no local deployment. For local deployment, fill in the local service address
  output: ".. /".// Generate the base directory for the API
  template: ".. /".// Specify a template, in this case a locally written template
  projects: [                           // There can be multiple template sources
    {
      "id": "Id of the Easy Mock project you want to create".// The Project ID I just wrote down
      "name": "api"                         // The file name in the generated output directory}}]Copy the code

then

npm run create-api
Copy the code

You can then generate an API /index.js file in the root directory

Online posts are mostly different in depth, even some inconsistent, the following article is a summary of the learning process, if you find mistakes, welcome to comment out ~

Reference:

  1. Automatically generate AXIos API access code with Swagger. json – simple book
  2. Easy-mock-cli/README.md

Recommended reading:

  1. Windows native installation deploys Easy Mock – Nuggets

PS: Welcome to pay attention to my official account [front-end afternoon tea], come on together

In addition, you can join the “front-end afternoon tea Exchange Group” wechat group, long press to identify the following TWO-DIMENSIONAL code to add my friend, remarks add group, I pull you into the group ~