[JavaScript知识库]Mock模拟数据，并发起getpost请求（保姆级教程，一定能成功)

第一步，创建一个脚手架项目。

vue  create  mockdemo

创建完成，在控制台安装mockjs，和axios

npm i mockjs
npm i axios

安装完成之后，重点来了，先在src文件夹下创建一个mock文件夹，然后在mock文件夹中创建一个index.js文件。

目录大概就是这么个目录，

index.js文件种应该写什么？

首先，你得知道，mock数据的规则，这个具体的可以到官网上学习（http://mockjs.com/）。

其次，mock了两个简单的数据。来上代码：

import Mock from "mockjs";
var { userdata } = Mock.mock({
    'userdata|10': [
        {
            name: "@cname()",
            IDcard: "@id()",
            address: "@city(true)"
        }
    ]
})
Mock.mock('/user/userInfo', 'get', () => {
    return {
        code: 200,
        message: '查询用户信息成功',
        data: userdata
    }

})

var { newList } = Mock.mock({
    'newList|20-30': [
        {
            id: "@increment(1)",
            title: '@ctitle',
            updat: '@date(yyyy-MM-dd hh:mm:ss)',
            info: '@cparagraph(5,10)',
            small: "@dataImage(300x200,电影图片)"
        }
    ]

})
Mock.mock('/api/movie', 'get', () => {
    return {
        status: 200,
        message: '获取电影列表成功！',
        total: newList.length,
        data: newList

    }
})

mock完数据，怎么使用呢？

<template>
<div>
  <!-- <div v-for="(item,index) in userInfo" :key="index">{{item.info}}</div> -->
  <div >{{userInfo}}</div>
</div>
</template>

<script>
import axios from "axios"; // 引入axios
import '@/mock/index' // 引入mock数据

export default {
  name: "",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {},
    };                                                                
  },
  computed: {},
  methods: {
    getUserInfo() {
      // axios({method:'get',url:"/api/movie"}).then((res) => {
      // console.log(res);
      // this.userInfo = res.data.data
      // });
      axios({method:'get',url:"/user/userInfo"}).then((res) => {
        console.log(res);
        this.userInfo = res.data.data
      });
    },
  },

  created() {
    this.getUserInfo()
  },
  mounted() {},
};
</script>
<style scoped>
</style>

运行起来就成功啦