【vue】vue +element 搭建項目，mock模擬數據（純乾貨）

 1.安裝mockjs依賴

(c)npm install mockjs --save-dev

 

2.安裝axios(Ajax)

(c)npm install --save axios

 

3.項目目錄

 

4.設計到的相關文件

fetch.js(封裝axios)

import Qs from 'qs';
import axios from 'axios';
// 建立axios實例
const service = axios.create({
    baseURL: process.env.BASE_API, // api的base_url
    timeout: 5000,                  // 請求超時時間
    withCredentials: true,   //跨域
    transformRequest: [function (data) {
        data = Qs.stringify(data);
        return data
    }],
});

// request攔截器
service.interceptors.request.use(config => {
    config.headers['Accept'] = 'text/plain';
    config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
    const defaultParams = {
        version: process.env.VERSION,
        platform: 'pcweb',
    };
    if (config.method == 'post') {
        config.data = {
            ...defaultParams,
            ...config.data
        }
    } else if (config.method == 'get') {
        config.params = {
            ...defaultParams,
            ...config.params
        }
    }
    return config;
}, error => {
    console.log(error); // for debug
    Promise.reject(error);
})

// respone攔截器
service.interceptors.response.use(
    response => {//其餘一些（登錄過時等）請自行添加
        return response;
    },
    error => {
        return Promise.reject(error);
    });

export default service;

api/skill/index.js（接口定義）

import fetch from '@/utils/fetch';

export function departmentList(params) {
    return fetch({
        url: '/skill/list',
        method: 'get',
        params: params || {}
    });
}

mock/news.js（模擬數據）

import Mock from 'mockjs';
// 獲取 mock.Random 對象
const Random = Mock.Random;
// mock一組數據
const produceNewsData = function () {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的圖片'), // Random.dataImage( size, text ) 生成一段隨機的 Base64 圖片編碼
            author_name: Random.cname(), // Random.cname() 隨機生成一個常見的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默認爲yyyy-MM-dd；Random.time() 返回一個隨機的時間字符串
        }
        articles.push(newArticleObject)
    }

    return {
        articles: articles
    }
}
export default {
    getexamUploder: () => produceNewsData(),
};

在main.js

import '@/mock/index.js';  // 使用mockjs模擬

mock/index.js

import Mock from 'mockjs';
import treeAPI from './news';

Mock.mock(/\/skill\/list/, 'get', treeAPI.getexamUploder);
export default Mock;

view/skill/tree.vue

import { departmentList } from '@/api/skill/index';//引入接口
getList(){
    let data = {
        pid: 0,
    }
    departmentList(data).then(response => {//接口調用
        console.log(response.data);
    });
},

5.效果圖：

 

 

 

 

 

 

相關資料：

• http://www.javashuo.com/article/p-umlqixur-dy.html
• http://mockjs.com/
• http://mockjs.com/examples.html

 

做者：smile.轉角

QQ：493177502