vue使用mock.js模拟数据

一、安装
1、安装 mock axios
npm install mockjs axios --save
2、安装axios-mock-adapter
axios-mock-adapter 是axios与mock配置器,简单来说就是把二者结合在一起的工具
npm install axios-mock-adapter --save-dev

二、使用mock
1、在src目录下,创建mock文件夹,在下面再创建data文件夹,创建数据文件,比如user.js,用于模拟生成用户信息数据,初始化我们需要的数据,这里举例初始化用户信息数据

//user.js
import Mock from ‘mockjs‘; // 导入mockjs 模块
let Users = []; // 定义我们需要的数据,后面导出
const COUNT = [1, 2, 3, 4, 5]; // 定义我们需要数量,即生成几条模拟数据
for (let i = 1; i <= COUNT.length; i++) {
  Users.push(Mock.mock({ // 根据数据模板生成模拟数据。
    id: Mock.Random.guid(), // 随机id
    title: Mock.Random.first(), // 随机标题
        name:Mock.Random.cname(),  //随机中文名
        addr: Mock.mock(‘@county(true)‘),  //随机地址
    ‘age|18-60‘: 1,  //随机年龄
    birth: Mock.Random.date(),  //随机生日
    sex: Mock.Random.integer(0, 1)  //随机性别
    isDelete: false, //是否删除
    locked: Mock.Random.boolean(), // 随机锁定
    record: COUNT.map(() => { // ×××单项列表的数据
      return {
        text: Mock.Random.cparagraph(2), // 随机内容
        isDelete: false, //是否删除
        checked: Mock.Random.boolean()  //是否完成
      };
    })
  }));
}
export { // 导出用户数据
  Users
};

2、创建mock,js
核心文件,它的作用就是模拟ajax请求的接口,生成并返回模拟数据.

import axios from ‘axios‘;
import MockAdapter from ‘axios-mock-adapter‘;
import Mock from ‘mockjs‘;
import { Users } from ‘./data/user.js‘; // 导入Users数据
export default {
  /**
   * mock start
   */
  start() { // 初始化函数
    let mock = new MockAdapter(axios); // 创建 MockAdapter 实例

        //获取用户列表
    mock.onGet(‘/user/list‘).reply(config => { //  config 指 前台传过来的值  网址自己随意定义,访问时要和这个网址一致就可以,这个‘/user/list‘,就是get请求时的url地址
      let {name} = config.params;
      let mockUsers = Users.filter(user => {
        if (name && user.name.indexOf(name) == -1) return false;
        return true;
      });
      return new Promise((resolve, reject) => {  //响应请求,返回数据给前台
        setTimeout(() => {
          resolve([200, {
            users: mockUsers
          }]);
        }, 1000);
      });
    });

    mock.onGet(‘/todo/list‘).reply(config => { //  config 指 前台传过来的值
      let mockTodo = Todos.map(tode => { // 重组 Todos数组,变成我们想要的数据
        return {
          id: tode.id,
          title: tode.title,
          count: tode.record.filter((data) => {
            if (data.checked === false) return true;
            return false;
          }).length, // 过滤到record里面 ‘checked’ 为true的数据,因为它们已经被完成了
          locked: tode.locked,
          isDelete: tode.isDelete
        };
      }).filter(tode => {
        if (tode.isDelete === true) return false; // 过滤掉 ‘isDelete’为true,因为已经被删除了。
        return true;
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200, {
            todos: mockTodo // 返回状态为200,并且返回todos数据
          }]);
        }, 200);
      });
    });
        // 新增一条todo
    mock.onPost(‘/todo/addTodo‘).reply(config => {
      Todos.push({
        id: Mock.Random.guid(),
        title: ‘newList‘,
        isDelete: false,
        locked: false,
        record: []
      });
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve([200]);
        }, 200);
      });
    });
  }
};

3、导出 mock
新建src/mock/index.js,并且复制以下代码,这里的index作用在于方便其他文件引入。

import mock from ‘./mock‘;
export default mock; // 导入同级下mock.js的内容,并且导出

4、引入 mock
打开 src/main.js,并且复制以下代码,这里的作用就是全局加载mock,执行初始化函数函数,这样的本地我们设定的接口,就可以在全局调用了。

import Mock from ‘./mock‘; // 引入mock模块
Mock.start(); //并且执行初始化函数

5、封装api函数

  • 新建 src/api/api.js
  • 我们把所有需要调用的接口,全部写到一个文件里面,封装成一个一个的函数,需要使用的时候我们直接调用这个函数即可,这里写的话,逻辑就比较清晰,接口需要改动的时候也能快速定位,维护成本就降低了。
  • 复制下面代码到 src/api/api.js
    import axios from ‘axios‘; //导入axios模块
    export const getTodoList = params => { //封装一个函数,名为getTodoList
    return axios.get(`/todo/list`, { // 请求路径 ‘/todo/list’
    params: params
    });
    };
    export const addTodo = params => {
    return axios.post(`/todo/addTodo`, params).then(res => res.data);
    };

    6、调用接口

  • vue生命周期
  • created()函数,一般是实例创建完成,但是dom还没有开始渲染时候执行,如果我们想在页面渲染之前就请求数据,那么我们就把ajax放在里面。
  • 绑定class
  • 复制以下代码到 src/components/menus.vue
    <template>
    <!--绑定点击事件goList),并且判断当todoId 时候 item.id时,文字高亮度-->
    <div class="list-todos">
    <!-- 绑定class,当items循环中的id等于我们设置的选中todoId时候,就会加上active这个calss,这样样式就会发生变化。-->
    <a @click="goList(item.id)" class="list-todo list activeListClass" :class="{‘active‘: item.id === todoId}" v-for="item in items">
      <span class="icon-lock" v-if="item.locked"></span>
      <span class="count-list" v-if="item.count > 0">{{item.count}}</span>
      {{item.title}}
    </a>
    <a class=" link-list-new" @click="addTodoList">
      <span class="icon-plus">
      </span>
      新增
    </a>
    </div>
    <template/>
    <script>
    import { getTodoList, addTodo } from ‘../api/api‘; // 引入我们 封装好的两个接口函数。
    export default {
    data() {
    return {
      items: [], // 菜单数据
      todoId: ‘‘ // 默认选中id
    };
    },
    created() { // 调用请求菜单列表数据的接口
    getTodoList({}).then(res => {
      const TODOS = res.data.todos; // 数据都会返回在res.data里面。
      this.items = TODOS; // 我的把菜单数据赋值给定义的this.items
      this.todoId = TODOS[0].id; // 把菜单数据的默认的第一个对象的id赋值给默认选中的id
    });
    },
    methods: {
    goList(id) { // 点击菜单时候,替换选中id
      this.todoId = id;
    },
    addTodoList() { // 点击新增按钮时候
    // 调用新增菜单的接口,在接口调用成功在请求数据
      addTodo({}).then(data => {
        getTodoList({}).then(res => {
          const TODOS = res.data.todos;
          this.todoId = TODOS[TODOS.length - 1].id;
          this.items = TODOS;
        });
      });
    }
    }
    };
    </script>

原文地址:https://blog.51cto.com/9161018/2356559

时间: 2024-11-09 00:39:18

vue使用mock.js模拟数据的相关文章

mock.js模拟数据

一.mock解决的问题 开发时,后端还没完成数据输出,前端只好写静态模拟数据.数据太长了,将数据写在js文件里,完成后挨个改url.某些逻辑复杂的代码,加入或去除模拟数据时得小心翼翼.想要尽可能还原真实的数据,要么编写更多代码,要么手动修改模拟数据.特殊的格式,例如IP,随机数,图片,地址,需要去收集 二.mock优点 1.前后端分离 让前端工程师独立于后端进行开发. 2.增加测试的真实性 通过随机数据,模拟各种场景. 3.开发无侵入 不需要修改既有代码,就可以拦截Ajax请求,返回模拟的响应数

前后端分离——前端项目使用Mock.js 模拟数据

一.简单介绍一下Mock.js 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富支持生成随机的文本.数字.布尔值.日期.邮箱.链接.图片.颜色等.(详情见官网) 拦截 Ajax 请求不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据.安全又便捷 文章会用到的API(也是Mock经常使用的API): Mock.mock(url, type, data) 参数名 参数需求 参数描述 例子 url 可选: URL 字符串或 URL 正则 拦截请求的地址 /mock ty

axios + mock.js模拟数据实现前后端分离开发的实例代码

首先就是必须安装axios和mock.js npm install axios npm install mockjs 1. 然后在文档src中新建一个mock.js文件,如图 2. 在main.js中全局引入axios插件和mock.js文件如图 3. 在组件中用axios获取mock.js文件 4. 在mock.js mockjs的用法可以到官网了解:http://mockjs.com(小生初学mock.js有不当之处请指出) 原文地址:https://www.cnblogs.com/mei1

vue中使用axios(异步请求)和mock.js 模拟虚假数据

一.使用axios 1.安装 npm install --save axios 2.引用 import Axios from 'axios' Vue.prototype.Axios = Axios 二.使用mock 1.安装 npm install --save mockjs 2.创建mock目录 3.创建mock.js 4.引用 import mockData from './mock/mock' 5.使用 this.Axios.post('/getNewsList/').then(funct

使用mock.js模拟AG.BG.MG.BBIN真人接口平台架设出租数据

一.安装 1.安装 mock axiosnpm install mockjs axios --save,AG.BG.MG.BBIN真人接口平台架设出租[企鹅21717-93408]2.安装axios-mock-adapteraxios-mock-adapter 是axios与mock配置器,简单来说就是把二者结合在一起的工具npm install axios-mock-adapter --save-dev 二.使用mock1.在src目录下,创建mock文件夹,在下面再创建data文件夹,创建数

vue项目中使用模拟数据 MOCK

1. 安装mock http://mockjs.com/ npm install mock 2. 新建mock.js文件存储 模拟数据的方法 3.  模拟一个list数据 import Mock from 'mockjs' Mock.mock('/meun', /post|get/i, { // /post|get/i 匹配post和get模式 也可以用'post'或'get' // 属性 list 的值是一个数组,其中含有 1 到 10 个元素 'list|1-10': [{ // 属性 id

vue中用mock制造模拟接口(本文主要解决坑),一定要看完哦

最近新入职一家公司,后端造接口速度很慢,想来想去还是搞一套模拟接口,来满足开发需求,有人会问,我造一个死数据不就可以了吗?或者说,后端数据结构都没出来,字段我怎么定? 问这个问题的人不奇怪,我之前也有这种疑问,mock造出来的数据是动态的.前端完全可以自己造数据结构,后端根据这个做一个模型就可以了,谁叫他们慢,字段嘛,实在要修改,他们确实不好改,前端改改就完事了;下面我将跟大家说说最近玩vue+mockjs的心得, vue的项目搭建我就不多说了,有自己用vue-cli创建的,也有直接用webpa

fiddler-10-结合 Mock.js 伪接口数据进行测试(下)

前言 你会mock吗?第三方支付接口怎么测?数据只有一条,测不到前端的分页功能? 常见的 Mock 方式: 将模拟数据直接写在代码里 利用 JavaScript 拦截请求 利用 Charles. Fiddler 等代理工具拦截请求 本篇利用 fiddler 拦截,当您学会使用 fiddler 拦截 + Mock.js 后你会认识到它的强大的原因之一,不扯了直接开始吧. 一.生成多条数据进行测试 1.fiddler 抓包将接口返回数据拿下. 2.粘贴至 mock.js 创建接口,点击一下[格式化]

使用 mock.js 让前端开发与后端独立

直接上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <scrip