zoukankan      html  css  js  c++  java
  • vue项目mock数据

    在vue项目中 mock.js 的使用

    1. 安装:
      npm install mockjs --save-dev

    2. 在main.js 同目录创建 mock.js

    3. 在main.js 中引入
      require("./mock")


    //mock.js

    const Mock = require('mockjs')
    const Random = Mock.Random;
    
    //当post或get请求到/api/data 路由时Mock会拦截请求并返回下面的数据
    Mock.mock("/api/data",(req,res)=>{
        console.log(req,res);
        let list = [];
        for(let i = 0;i<20;i++){
            let listObj = {
                tite:Random.ctitle(4,10),
                company: Random.csentence(5, 10),
                attention_degree: Random.integer(100, 9999),//返回一个随机的整数。
                photo: Random.image('114x83', '#00405d', '#FFF', 'Mock.js')
            }
            list.push(listObj);
        }
        return {
            data: list
        }
    })
    
    

    // 使用 //home.vue

    methods: {
        getList(){
          axios({
            method:'post',
            url: "/api/data",
          }).then(res=>{
            this.list = res.data.data;
            console.log("结果",res.data.data);
          })
        }
      }
    
    
    
  • 相关阅读:
    单词统计
    团队项目介绍--“益青春APP”
    团队项目 NABCD介绍
    兰猪耳
    薄雪万年草
    佛甲草
    针叶天蓝绣球
    白芨
    萱草
    吉祥草
  • 原文地址:https://www.cnblogs.com/kgwei520blog/p/14847443.html
Copyright © 2011-2022 走看看