vue中使用mockjs简单返回数据、包括get,post请求

 1、安装

    npm install mockjs

2、在src文件下

    创建mock文件夹

        在mock文件夹下创建json文件 并在json文件夹下创建indexjson

        在mock文件下创建mockjs文件

3、在mianjs文件中引用mockjs        

    import "/mock/mockjs";

    mockjs文件中的内容

    ```

    import Mock from 'mockjs'

    Mocksetup({

         timeout: 500 //设置一个延迟时间虚拟服务器响应效果

     })

//格式： Mockmock( url, post/get , 返回的数据)； Mockmock('/getList', 'get', require('/json/indexjson'))

// 通过Mockmock函数模拟post请求

Mockmock('/api/addgoods', 'post', function (option) {

 // 这里的option是请求的相关参数

var $name=JSONparse(optionbody)name;

if($name){

    return Mockmock({

        status: 200,

        message: '提交成功！！！'

    })

}else{

    return Mockmock({

        status: 400,

        message: '未提交参数'

    })

}

})

  ```

indexjson文件中的内容

```

{

   "retcode": "0000",

  "retmsg": "成功",

  "data": [

    {

      "tabId": 1,

      "tabShowName": "推荐",

      "tabName": "recommend"

    },

    {

      "tabId": 2,

      "tabShowName": "7×24",

      "tabName": "7x24"

    },

    {

      "tabId": 3,

      "tabShowName": "观点",

      "tabName": "opinion"

    }

  ]

```    

3、发送请求并获取数据此处用的是axios

    方式一：发送get请求

    ```

    this$axiosget('/getList')then((res)=>{

        consolelog(res)

    })

    ```

    方式二：发送post请求

    ```

      var  data={

        name:"张三"

      }

  this$axiospost("/api/addgoods",data)then(res=>{

        consolelog(res,"MOCK __ POST")

  })

    ```

4、附上官网链接

  >

axiosget('/static/testjson')then(res => {

// 使用ajax请求数据获取到users（数组）,所以thisusers是数组

thisusers= resdatauser

})

}

如果你想获取每个user的start可以使用for循环,当然在vue模板渲染里使用的是v-for例如:

<li v-for="user in users">satrt:<span>{{userstart}}</span></li>

如果只是想在js里面单独获取某个user的start可以直接在数组中取一下，例如

// 获取第一个用户的start

var start1 = thisusers[0]start

// 获取第二个用户的address

var address2 = thisusers[1]address

组件中，使用axios获取到数据后怎么赋给到data中的数据，响应式地更改视图

<script type="text/javascript">

import Vue from 'vue';

import VueResource from 'vue-resource';

Vueuse(VueResource);

export default {

data(){

return {

newslist:[]

}

},

created (){

this$emit('viewIn',"购彩资讯");

this$>

首先：React本身没有独有的获取数据的方式。实际上，就React而言，它甚至不知道有服务器画面的存在。

React只是简单地渲染组件，单独从两个地方获取数据：props 和 state。

因此，为了使用服务器的数据，你需要在你的组件（component）的props或state里拿到数据。

你可以将这个过程与服务和数据模型复杂化，就像你所希望的那样，但最终只是组件渲染props和state。

选择一个>

1、使用axios进行>

整个的流程是在组件的created中提交dispatch，然后通过action调用一个封装好的axios然后再触发mutation来提交状态改变state中的数据，然后在组件的计算属性中获取state的数据并渲染在页面上

从官方给出的渲染方案能看出，后端只是在页面硬塞了数据及数据状态进去，就效果而论渲染的工作还是前端负责，所以其他后端也能做到。具体看例子写script标签到页面那段vue的服务端渲染，目前发现下面两个包可以实现nodejs向其他服务器请求数据。我现在用的是axios，因为我看到axios同时支持nodejs和浏览器。

以上就是关于vue中使用mockjs简单返回数据、包括get,post请求全部的内容，包括:vue中使用mockjs简单返回数据、包括get,post请求、解决Vue axios post请求,后台获取不到数据的问题方法、vue工程里怎么使用axios接收一个json的数组，并使用该数组的某个元素等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！