vue+axios+mock.js環(huán)境搭建

Chao 發(fā)布于2019-08-23 11:30 / 3549人閱讀

摘要：如果你不熟悉也沒關(guān)系，我將一步一步教你如何在前端項目中使用來構(gòu)建一個模擬假數(shù)據(jù)環(huán)境。例如代表的含義。文件最后將方法暴露出去給具體請求調(diào)用即可具體頁面調(diào)用引入使用處理返回

在前后端分離開發(fā)模式下，前端項目通常在項目構(gòu)建初期需要使用假數(shù)據(jù)以及相應(yīng)的http請求來進(jìn)行輔助開發(fā)，例如在后端接口還沒開發(fā)好下，我們可以模擬http請求以及數(shù)據(jù)來進(jìn)行前端的axios封裝,接口設(shè)計，對http狀態(tài)碼處理等。前端模擬數(shù)據(jù)的方法有許多種，假如你熟悉node.js以及express框架，你可以快速地構(gòu)建一個后端服務(wù)器來進(jìn)行輔助開發(fā)，我本人也比較喜歡這種方式，這種方法在我日后的文章將會有介紹。如果你不熟悉node也沒關(guān)系，我將一步一步教你如何在前端vue項目中使用mock.js來構(gòu)建一個模擬假數(shù)據(jù)環(huán)境。

1 ,安裝mock.js

npm install mockjs --save

2,安裝axios

npm install axios --save

3新建一個文件夾mock 下面有一個文件mock.js,mock.js作用主要用來生成假數(shù)據(jù)以及提供了一個服務(wù)器，有了這個服務(wù)器我們通過定義api來訪問mock.js生成的數(shù)據(jù)
mock.js內(nèi)容

const Mock = require("mockjs");
const Random = Mock.Random;
//造新聞列表數(shù)據(jù)
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 ) 生成一段隨機(jī)的 Base64 圖片編碼
            author_name: Random.cname(), // Random.cname() 隨機(jī)生成一個常見的中文姓名
            date: Random.date() + " " + Random.time() // Random.date()指示生成的日期字符串的格式,默認(rèn)為yyyy-MM-dd；Random.time() 返回一個隨機(jī)的時間字符串
        }
        articles.push(newArticleObject)
    }
 
    return {
        articles: articles
    }
};

上述mock.js內(nèi)容主要是引入mock模塊，然后生成100條新聞列表數(shù)據(jù).對于mock生成數(shù)據(jù)的一些規(guī)則就省略了，讀者可以自己去mock官網(wǎng)了解一些常用的生成規(guī)則。例如Random.csentence(5, 30)代表的含義。
這里再演示幾個生成數(shù)據(jù)的方法

//生成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
  }

}

//生成類型列表數(shù)據(jù)
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:"[email protected]"
  },{
    name:"test",
    password:"test",
    email:"[email protected]"
  },{
    name:"admin",
    password:"abc123",
    email:"[email protected]"
  },{

  }

]

以上定義了生成數(shù)據(jù)的規(guī)則了，現(xiàn)在我們定義訪問這些數(shù)據(jù)的接口
接下來在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);

上述代碼意思是當(dāng)你使用post方法訪問/view/aa時，服務(wù)器會返回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;
  }
})

至此一個模擬假數(shù)據(jù)服務(wù)器搭建完成！接下來使用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);
  })
  // 響應(yīng)攔截器
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相關(guān)介紹讀者可以參考我的上一篇博客。文件最后將get_news方法暴露出去給具體請求調(diào)用即可

具體頁面調(diào)用：

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

GPU云服務(wù)器云服務(wù)器 mock.js 云服務(wù)器搭建vue項目阿里云服務(wù)器搭建vue項目 axios

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/97055.html

發(fā)表評論

登陸后可評論

0條評論

Chao

男|高級講師

我要關(guān)注我要私信

TA的文章

BREW SDK 中的工具

閱讀 1471·2021-11-22 14:44
2021-11-15

閱讀 2850·2021-11-16 11:44
自動化快速上手--Python篇(1)--【變量】--每天半小時

閱讀 3218·2021-10-13 09:40
Python 小白的 PyQt5 項目實(shí)戰(zhàn)（1）安裝與環(huán)境配置

閱讀 1993·2021-10-08 10:04
數(shù)脈科技：320元/月/E3-1230v2/16GB內(nèi)存/1TB或240GB SSD硬盤/不限流量/

閱讀 2372·2021-09-24 10:28
杭漂結(jié)束（end）｜我從有贊離職啦｜結(jié)束杭漂

閱讀 2919·2021-09-06 15:02
不定元素寬高用css實(shí)現(xiàn)內(nèi)容水平和垂直都居中

閱讀 2966·2019-08-30 15:52
[note]布局：列等高，水平垂直居中，固定頁腳

閱讀 2403·2019-08-30 13:20

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue+axios+mock.js環(huán)境搭建

相關(guān)文章

vue項目接入mock&& axios 通用配置

vue-vue項目中mock.js的使用

**webpack4+vue2+axios+vue-router的多頁+單頁混合應(yīng)用框架**

vue2.0+axios+mock+axios-mock+adapter實(shí)現(xiàn)登陸

**基于vue-cli3.0構(gòu)建功能完善的移動端架子**

發(fā)表評論

0條評論

Chao

男|高級講師

TA的文章

BREW SDK 中的工具

2021-11-15

自動化快速上手--Python篇(1)--【變量】--每天半小時

Python 小白的 PyQt5 項目實(shí)戰(zhàn)（1）安裝與環(huán)境配置

數(shù)脈科技：320元/月/E3-1230v2/16GB內(nèi)存/1TB或240GB SSD硬盤/不限流量/

杭漂結(jié)束（end）｜我從有贊離職啦｜結(jié)束杭漂

不定元素寬高用css實(shí)現(xiàn)內(nèi)容水平和垂直都居中

[note]布局：列等高，水平垂直居中，固定頁腳

最新活動

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！

vue+axios+mock.js環(huán)境搭建

相關(guān)文章

發(fā)表評論

0條評論

男|高級講師

TA的文章

最新活動

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺、長期優(yōu)惠，快來選購！