vue+axios+mock.js環境搭建

在先後端分離開發模式下，前端項目一般在項目構建初期須要使用假數據以及相應的http請求來進行輔助開發，例如在後端接口還沒開發好下，咱們能夠模擬http請求以及數據來進行前端的axios封裝,接口設計，對http狀態碼處理等。前端模擬數據的方法有許多種，假如你熟悉node.js以及express框架，你能夠快速地構建一個後端服務器來進行輔助開發，我本人也比較喜歡這種方式，這種方法在我往後的文章將會有介紹。若是你不熟悉node也不要緊，我將一步一步教你如何在前端vue項目中使用mock.js來構建一個模擬假數據環境。

1 ,安裝mock.js

npm install mockjs --save

2,安裝axios

npm install axios --save

3新建一個文件夾mock 下面有一個文件mock.js,mock.js做用主要用來生成假數據以及提供了一個服務器，有了這個服務器咱們經過定義api來訪問mock.js生成的數據
mock.js內容

const Mock = require('mockjs');
const Random = Mock.Random;
//造新聞列表數據
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
    }
};

上述mock.js內容主要是引入mock模塊，而後生成100條新聞列表數據.對於mock生成數據的一些規則就省略了，讀者能夠本身去mock官網瞭解一些經常使用的生成規則。例如Random.csentence(5, 30)表明的含義。
這裏再演示幾個生成數據的方法

//生成100個用戶登入信息
const produceUserInfo=function(){
    let Users=[];
    let type=['遊客','會員','管理員'];
    for(let i=0;i<100;i++){
      let obj=Mock.mock({
        userId:i+1,
        userName:Random.cname(),
        userEmail:Random.email(),
        'userType|+1':type
      })
      Users.push(obj);
    }
};

//生成一篇文章詳情
const articleDetail=function(){
  let obj={};
  obj.author_name=Random.cname();
  obj.title=Random.csentence(5, 30);
  obj.publish_date=Random.date();
  obj.content=Random.paragraph(100);
  obj.view=Random.integer(0, 10000);
  obj.source='今日頭條'

  return{
    data:obj
  }

}

//生成類型列表數據
const getlist=function(){
  let arr=[]
  for(let i=0;i<100;i++){
      let obj={};
      obj.id=i+1;
      obj.title=Random.csentence(5, 30);
      obj.date=Random.date();
      arr.push(obj);
  }
  return {
    data:arr
  }
}
const adminInfo=[
  {
    name:'admin',
    password:'admin',
    email:'4399@qq.com'
  },{
    name:'test',
    password:'test',
    email:'1341313944@qq.com'
  },{
    name:'admin',
    password:'abc123',
    email:'112360@qq.com'
  },{

  }

]

以上定義了生成數據的規則了，如今咱們定義訪問這些數據的接口
接下來在mock.js定義如下路由

Mock.mock('/view/aa', 'post', produceNewsData);
Mock.mock('/view/bb', 'post', produceUserInfo);
Mock.mock('/view/detail','post',articleDetail);
Mock.mock('/view/list','post',getlist);

上述代碼意思是當你使用post方法訪問/view/aa時，服務器會返回produceNewsData,訪問/view/bb時返回 produceUserInfo
咱們還能夠處理請求

//用戶名密碼驗證
Mock.mock('/view/login','post',function(req){
  let obj={};
  if(req.body){
   let name= req.body.split('&')[0];
   let password=req.body.split('&')[1];
   adminInfo.forEach(item=>{
    if(item.name===name||item.name===item.email){
      if(item.password===password){
          obj.name=item.name;
      }
    }
   })
   return obj;
  }
})

至此一個模擬假數據服務器搭建完成！接下來使用axios封裝http請求 新建文件夾api 下面新建一個文件api.js

api.js

import vue from 'vue'
import axios from 'axios'

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'
 
// 請求攔截器
axios.interceptors.request.use(function(config) {
    return config;
  }, function(error) {
    return Promise.reject(error);
  })
  // 響應攔截器
axios.interceptors.response.use(function(response) {
  return response;
}, function(error) {
  return Promise.reject(error);
})
 
// 封裝axios的post請求
export function fetch(url, params) {
  return new Promise((resolve, reject) => {
    axios.post(url, params)
      .then(response => {
        resolve(response.data);
      })
      .catch((error) => {
        reject(error);
      })
  })
}
 
export default {
  get_news(url, params) {
    return fetch(url, params);
  }
}

上面代碼主要使用axios封裝了http post的請求，對於其餘例如get請求和axios相關介紹讀者能夠參考個人上一篇博客。文件最後將get_news方法暴露出去給具體請求調用便可

具體頁面調用：

import api from '@/api/api.js';//引入
//使用
api.get_news('/view/detail', 'type=top&key=123456').then((res)=>{
   //處理返回
})