background

  • inFront end separationIn the early stage of project development, front-end projects often need to mock some data for the project to use in order to make the project parallel and shorten the development cycle. It is now common and reasonable to build your own mock service platform directly using third-party platforms or projects based on open source, or to hardcode your data directly in your project based on requirements. The former has heavy external dependence, while the latter has high cost and low reusability of hard-coded data when switching real interfaces. For these two reasons, I recommend a lightweight, dependency free, simple and flexible VScode mock plug-inProject making.

Method of use

  • Install the Amock Server plug-in*: search in vscode plug-in search windowamockThen press the load.

  • Configure the AMock service: The plugin will automatically create a default when you open your project.amockThe folder and./amock/setting.jsonFile in current workpace.Setting.jsonIs a service configuration item that can be set as required.
  • Configure the AMock unit: you can.amockAdded Amock configuration in the folder. The Amock cell configuration file name must follow this rule (otherwise the configuration will not be detected when starting the service)*.amock.js.

  • Start the AMock serviceGo to the bottom of VS Code’s Explorer and click the AMock TAB, then click the Start Services button to start. When the Amock Output console starts successfully, it is ready to use. Can be directly in theThe front-end engineeringTo use or use.The browser or postmanAnd other interface testing tools.

  • Reload the Amock service: When you modify or save settings.json or *.amock.js file. Click on the AMock TAB at the bottom of VS Code’s ExploeroverloadingButton to make the change take effect

Configuration instructions

  • settgin.json:

    {
    name:"servername",
    port:3000 // default port 3000
}
Copy the code

  • *.amock.js: The configuration content is in the following format

        amock(unit| unit[], options?)
Copy the code

    Amock sample (unit)

    Sample amock (unit [], the options)

    Amock unit attribute description

    prop type desc required
    path string Request path true
    method string Supported by ‘all’,’delete’,’get’,’put’,’post’. The default ‘all’ false
    response object There is no default value returned in response to interceptor configuration true
    filter function You can configure this method if you need to respond with different return values based on different parameters false 
    amock({
    path:"/hello",
    response:{
        code:1,
        msg:"success",
        data:{
            hello: "amock"
        }
    },
    filter:function(request,response){
        returnresponse; }})Copy the code

  • Amock ununit. path: Amock service based on Express 4. The path property supports all configuration modes supported by Express.4 Path.

  • Amock unit.filter: The filter method is the linker before the response value is returned. The request argument to this method contains all express.4-Request properties that Express4 supports.

  • Options: You can set a uniform response value format or URL prefix through the options configuration item.

options prop examples

prop type desc required
fileNameAsPathPerfix boolean When this value is true, the filename is used as a default prefix for interface requests. The default false false
urlPrefix string A more flexible way to set prefixes false
commonResHandler object Set the general format, the response value in uint will be included below the corresponding value of handle false

commonResHandler prop examples

prop type desc required
handle string This property must be set if configured using a generic response, and the value of this property will contain the response value of the unit true
* any Other properties can be set arbitrarily false

feedback

  • When using the plug-in, you can submit issues to the GitHub Repo or send an email to [email protected].