Mockjs+vue Use of small notes

Source: Internet
Author: User

The sole purpose of using MOCKJS is to quickly complete the front-end project, and the front end does not need to wait for the backend data, use mock, to simulate it ~

It can intercept AJAX requests and simulate the return of the data you need. This is the real front-end separation.

Okay, here's the beginning of the actual combat.

Install first

NPM Install MOCKJS--save-dev

New Data.js (Analog data)

Import Mock from ' mockjs '= mock.mock ({   "data|0-3": [    "Zhejiang A12222",  ]}); Export {Data}

New Mock.js introduces data and intercepts requests

Import Mock from ' Mockjs'./data/data '; Mock.mock ('/do ', ' post ', data);

Build Api.js Package Axios Request

Import Axios from ' Axios 'Import Vue from' Vue 'axios.defaults.headers= {"Content-type": "application/x-www-form-urlencoded"}functionfetch (URL, params) {return NewPromise (Resolve, reject) ={axios.post (URL, params). Then (response={Resolve (Response.data); })      .Catch(Error) ={reject (Error); })})} Exportdefault{getplate (URL, params) {returnfetch (URL, params); },}

And then call in the Vue component.

Api.getplate ('/do ', content)                      = {                       allplate = Res.data;})

Note the request address in the build should be the same as the address in mock.js.

You can also look at the Axios-mock-adapter, talk about Axios and Vue combination, should be better use a little.

Mockjs+vue Use of small notes

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.