Shulou(Shulou.com)06/02 Report--

This article focuses on "how to use mock.js to make front-end development independent of the back-end", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to use mock.js to make front-end development independent of back-end.

Functions implemented by Mock.js

Generate data based on the data template.

Generate data based on HTML templates.

Intercepts and simulates Ajax requests.

This article only demonstrates the use of mock.js to simulate and intercept Ajax requests.

First of all, the page refers to:

Define DIV:

Mockjs

The JS code is as follows:

/ / call the mock method to simulate the data Mock.mock ('http://mockjs', {"userName":' @ name', / / Simulation name "age | 1-100": 100, / / Simulation age (1-100) "color": "@ color" / / simulated color value "date": "@ date ('yyyy-MM-dd')", / / simulated time "url": "@ url ()", / / simulated url "content": "@ cparagraph ()" / / simulated text}) / / ajax request $("# mockjs") .click (function () {$.ajax ({url: "http://mockjs", / / the url address of the request dataType:" json ", / / the return format is json async: true. / / whether the request is asynchronous. The default is asynchronous. This is also an important feature of ajax: data: {}, / / Parameter value type: "GET", / / request method beforeSend: function () {/ / pre-request processing} Success: function (req) {/ / process console.log (req) when the request is successful }, complete: function () {/ / request completed processing}, error: function () {/ / request error handling}});})

The running effect is as follows:

From the above effect picture, you can see that the data is different each time.

To learn more about Mock commands, check out the Mock.js website: http://mockjs.com/

The above is just throwing a brick to attract jade.

For better system management and ease of use, you can learn about Ali RAP.

RAP is a visual interface management tool by analyzing the interface structure, dynamically generating simulation data, verifying the correctness of the real interface, around the interface definition, through a series of automation tools to improve our cooperation efficiency. Our slogan: improve efficiency, go home for dinner!

Official address: http://rap.taobao.org/org/index.do

At this point, I believe you have a deeper understanding of "how to use mock.js to make front-end development independent of the back-end". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.