What mock. js does.

  • Generate data based on data templates.
  • Generate data based on HTML templates.
  • Intercept and simulate Ajax requests.

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

First, the first reference in the page:

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://mockjs.com/dist/mock.js"></script>Copy the code

Define the DIV:

<div>
    <h1 id="mockjs">mockjs</h1>
</div>Copy the code

The JS code is as follows:

<script type="text/javascript">

    // Call the mock method to simulate the data
    Mock.mock(
        'http://mockjs', {
            "userName" : '@name'.// Simulate the name
            "age|1-100":100.// Simulation age (1-100)
            "color"    : "@color".// Simulate color values
            "date"     : "@date('yyyy-MM-dd')".// Simulation time
            "url"      : "@url()".Url / / simulation
            "content"  : "@cparagraph()" // Simulate text});/ / ajax requests
    $("#mockjs").click(function(){
        $.ajax({
            url        : "http://mockjs".// The requested URL
            dataType   : "json".// The return format is JSON
            async      : true.// Whether the request is asynchronous, the default is asynchronous, which is an important ajax feature
            data       : {},    / / parameter values
            type       : "GET".// Request mode
            beforeSend : function() {
                // Pre-request processing
            },
            success: function(req) {
                // The request is processed if it succeeds
                console.log(req);
            },
            complete: function() {
                // Request completion processing
            },
            error: function() {
                // Request error processing}}); });</script>Copy the code

The operation effect picture is as follows:






rendering





As you can see from the above renderings, the data is different each time.

To learn more about Mock commands, see mockjs.com/ on mock.js

This is merely a primer.

In order to system management and use more convenient, we can understand 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 collaboration efficiency. Our slogan: Improve efficiency, go home for dinner!

The official address: rap.taobao.org/org/index.d…

Thanks ~

Author: PHP backend developer

Free technical consulting services (their own knowledge).

Follow the wechat public account, leave a message, see the message will be timely reply.



IT small circles