【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.效果图：

 

 

 

 

 

 

相关资料：

• https://www.cnblogs.com/jasonwang2y60/p/7302449.html
• http://mockjs.com/
• http://mockjs.com/examples.html

 

作者：smile.轉角

QQ：493177502