(c)npm install mockjs --save-devhtml
(c)npm install --save axiosvue
fetch.js(封裝axios)ios
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(接口定義)web
import fetch from '@/utils/fetch'; export function departmentList(params) { return fetch({ url: '/skill/list', method: 'get', params: params || {} }); }
mock/news.js(模擬數據)npm
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.jsaxios
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.vueapi
import { departmentList } from '@/api/skill/index';//引入接口 getList(){ let data = { pid: 0, } departmentList(data).then(response => {//接口調用 console.log(response.data); }); },
做者:smile.轉角跨域
QQ:493177502app