vue+axios+mock.js環境搭建

Chao 發布于2019-08-23 11:30 / 3547人閱讀

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

在前后端分離開發模式下，前端項目通常在項目構建初期需要使用假數據以及相應的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)=>{
   //處理返回
})

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97055.html

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

摘要：前言兵馬未動糧草先行同理項目開發過程中經常會出現接口未出前端頁面已搭建完畢的情況此時為了提高前端的開發效率解放生產力我們可以按照預定的接口文檔做一些接口模擬的工作等等后端小伙伴開發完接口后我們只需要替換一個接口基地址即可初始準備這里已項目為前言兵馬未動,糧草先行; 同理,項目開發過程中經常會出現接口未出, 前端頁面已搭建完畢的情況;此時為了提高前端的開發效率,解放生產力,我們 FE...

Ilikewhite 2019-08-26 10:33 評論0 收藏0
vue-vue項目中mock.js的使用

摘要：表示需要攔截的請求類型。添加信息攔截請求，調用函數先看一下這個是什么獲取信息更改后輸入標題，點擊提交，再點擊獲取，可以看到返回了我們提交的數據，并且是對象的形式，拿到數據后就可以做進一步的操作了。 mock.js 官網地址：mockjs.com/ mockjs是用來模擬產生一些虛擬的數據，可以讓前端在后端接口還沒有開發出來時獨立開發。我們可以使用真實的url，mockjs可以攔截ajax請求...

Object 2019-05-23 17:34 評論0 收藏0
webpack4+vue2+axios+vue-router的多頁+單頁混合應用框架

摘要：適用于主要入口頁面生成多頁，子頁面和次要頁面使用單頁形式的項目。文件用來存放固定的數據，而文件可更加自由的處理并返回數據。 VUE2的單頁應用框架有人分享了，多頁應用框架也有人分享了，這里分享一個單頁+多頁的混合應用框架吧，node.js寫了一個簡單的mock服務也集成在里面，整體初現雛形，還有很多需要優化和改善的地方。。。項目結構 │ ├─build ...

whatsns 2019-08-23 11:44 評論0 收藏0
vue2.0+axios+mock+axios-mock+adapter實現登陸

摘要：做項目過程中，需要用到后臺模擬數據，在機緣巧合下發現了，在學習使用的過程中又偶遇了。做項目過程中，需要用到后臺模擬數據，在機緣巧合下發現了mock，在學習使用的過程中又偶遇了axios-mock-adapter。現在將實例展示如下：準備實例是建立在vue-cli的基礎上實現需要提前安裝的插件有：axios：npm install axio --savemockjs：npm ins...

RancherLabs 2019-08-22 18:49 評論0 收藏0
基于vue-cli3.0構建功能完善的移動端架子

摘要：對應每一個環境可能都會有所差異，比如說服務器地址接口地址地址等等。具體的值取決于應用運行的模式。會和中的選項相符，即你的應用會部署到的基礎路徑。基于vue-cli3.0構建功能完善的移動端架子，主要功能包括 webpack 打包擴展 css：sass支持、normalize.css、_mixin.scss、_variables.scss vw、rem布局跨域設置 eslint設置...

Loong_T 2019-08-23 17:05 評論0 收藏0