vue使用mock.js模擬數據
阿新 • • 發佈:2019-03-01
turn main 調用接口 todolist all ole npm imp 高亮 一、安裝
1、安裝 mock axios
npm install mockjs axios --save
2、安裝axios-mock-adapter
axios-mock-adapter 是axios與mock配置器,簡單來說就是把二者結合在一起的工具
npm install axios-mock-adapter --save-dev
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>
vue使用mock.js模擬數據