vue+vux-ui+axios+mock搭建一個簡單vue框架

来源:https://www.cnblogs.com/start-ming/archive/2018/12/07/10081987.html
-Advertisement-
Play Games

1.首先感謝同事 2.之前一直在做angularjs的項目,目前vue火熱,所以自己搭建了一個的vue框架,在此作為記錄 vue+vux-ui這裡就不介紹了,有很多博客都寫的很詳細了。 下麵簡單記錄下axios 和 mock 1.axios <1> 安裝axios <2> 使用axios 1.因為有 ...


1.首先感謝同事

2.之前一直在做angularjs的項目,目前vue火熱,所以自己搭建了一個的vue框架,在此作為記錄

 

vue+vux-ui這裡就不介紹了,有很多博客都寫的很詳細了。

下麵簡單記錄下axios 和 mock

1.axios

<1>  安裝axios

npm install axios

 

<2>  使用axios

   1.因為有時候項目需要稍微封裝一下axios,所以我這裡並沒有直接像官網那裡在入口main.js直接引入axios

   2.按照官網的要求,我在src目錄下新建了一個文件axios,然後新建了兩個js文件

         1.axios.post.form.js

         2.axios.post.json.js

 這裡記錄第個axios.post.form.js文件:

        1.首先引入axios

  
import axios from 'axios'

 



2.自定義配置新建一個 axios 實例
  
const axiosPostForm = axios.create({
       baseURL: "", // api的base_url
       timeout: 5000, // request timeout
       headers: {
        'Content-Type': 'application/json'
       }
   })

  


3.創建請求過濾器
 axiosPostForm.interceptors.request.use(
    config => {
        //根據實際項目修改攔截器
        console.log(config);
        config.data = config.data||{}
        return config;
    },
    error =>{
        return Promise.reject(error);
    });
   4.創建響應過濾器
axiosPostForm.interceptors.response.use(
    response => {
        console.log(response);
        return response.data
    },
    error => {
        return Promise.reject(error);
    })

  



5.返回封裝之後的axiosPostForm  
export default axiosPostForm

  


下麵是完整的這個JS文件

  
import axios from 'axios'

const axiosPostForm = axios.create({
    baseURL: "", // api的base_url
    timeout: 5000, // request timeout
    headers: {
        'Content-Type': 'application/json'
    }
})

axiosPostForm.interceptors.request.use(
    config => {
        //根據實際項目修改攔截器
        console.log(config);
        config.data = config.data||{}
        return config;
    },
    error =>{
        return Promise.reject(error);
    });

axiosPostForm.interceptors.response.use(
    response => {
        console.log(response);
        return response.data
    },
    error => {
        return Promise.reject(error);
    })
export default axiosPostForm

  

<3> 接下來需要在入口main.js中引入該封裝之後的axiosPostForm,以便全局使用
//引入axios
import axiosPostForm from './axios/axios.post.form'

 

//在vue的原型鏈上增加axiosPostForm
Vue.prototype.$axiosPostForm =  axiosPostForm;

  <4>在你的應用組建就可以直接使用封裝之後的$axiosPostForm了,一下代碼:

    

 this.$axiosPostForm({

     method: 'post',
     url:"/userInfo",   //這裡是你的後端地址,如果沒有,請看下麵引入mock擋板數據
     data: {
         id: '100001',
         name: 'xxxxxx'
         }
 }).then(function (res) {
     console.log(res)
 })
  以上,一個完整的axios服務已經完成,下麵引入mock擋板


2.mockjs

<1> 安裝mockjs

 npm install mockjs
<2> 在src文件新建mock文件夾
1.在mock文件夾目錄下,新建兩個文件,一個index.js,一個usermock.js
2.首先先在usermock.js,新建擋板數據,並暴露出來,代碼如下:
  
export default {
      getUserInfo:()=>{
         return {
            code:"0",
            message:"訪問成功",
            data:[{
                id:1,
                licNumber:'陝A79898',
                color:1,
                buyTime:'2017-04-01'
            },
                {
                    id:2,
                    licNumber:'陝A2222',
                    color:1,
                    buyTime:'2017-04-01'
                },
                {
                    id:3,
                    licNumber:'陝A3333',
                    color:1,
                    buyTime:'2017-04-01'
                }]
        }
     }
  }

  

<3> 在mock文件夾下的index.js中引入mock和上面寫的usermock.js,代碼如下
   import Mock from 'mockjs';
   import userInfo from "./usermock"

   Mock.mock("/userInfo",'post',userInfo.getUserInfo());
   export default Mock

  

<4>在入口文件main.js裡面加入對Mock的控制(是否使用mock擋板)
  
const mock = true;
  if(mock){
    require("./mock");
  }

  



<5> 以上,在你的應用組建就可以直接使用

  
this.$axiosPostForm({
      method: 'post',
      url:"/userInfo",
      data: {
          id: '100001',
          name: 'xxxxxx'
          }
  }).then(function (res) {
      console.log(res)
  })

    over,以上是本次記錄!!!








      

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今日目標 使用CSS完成網站首頁的優化 使用CSS完成網站註冊頁面的優化 使用JS完成簡單的數據校驗 使用JS完成圖片輪播效果 教學目標: - 瞭解CSS的概念 - 瞭解CSS的引入方式 - 瞭解CSS的基本用法和常用的選擇器 - 瞭解CSS的盒子模型,懸浮和定位 - 瞭解JS的概念 - 掌握JS的 ...
  • **今日任務** 網站信息頁面案例 網站圖片信息頁面案例 網站友情鏈接頁面案例 網站首頁案例 網站註冊頁面案例 網站後臺頁面案例 教學導航 - 瞭解什麼是標記語言 - 瞭解HTML主要特性,主要變化以及發展趨勢 - 瞭解HTML的結構標簽 - 掌握HTML的主要標簽(字體,圖片,列表,鏈接,表單等標 ...
  • 調用 ...
  • 簡單工廠模式,屬於創建型模式,它提供了一種創建對象的最佳方式。在工廠模式中,我們創建對象時不會對客戶端暴露創建邏輯,而是通過一個統一的介面來指向新創建的對象。 介紹 在現實生活中,當我們去 4S 店購車時,我們不用考慮汽車的各個部件是如何生產的,而就可以提走一輛愛車。同樣的,在軟體開發過程中,當我們 ...
  • 為了能在以後的工作學習中少寫 BUG ,我覺得還是有必要認真複習一下所有的設計模式, 為了後續系列博客做技術儲備, 杠精 請出門右拐點擊 關閉 按鈕即可。需要說明一點的是,設計模式與語言無關,所以還請各位萌新不要陷入語言妄想症。 前言 關於什麼是設計模式,這裡簡單描述描述一下: 所謂設計模式,是指軟 ...
  • 前言 Java多線程分類中寫了21篇多線程的文章,21篇文章的內容很多,個人認為,學習,內容越多、越雜的知識,越需要進行深刻的總結,這樣才能記憶深刻,將知識變成自己的。這篇文章主要是對多線程的問題進行總結的,因此羅列了40個多線程的問題。 這些多線程的問題,有些來源於各大網站、有些來源於自己的思考。 ...
  • 給定數據利用神經網路演算法模型進行計算,利用FP、BP演算法,求得模型最優值。 神經網路初步學習使用。 ...
  • //接受數據請求public function client($pz){ //參數1是:網路協議, //AF_INET: IPv4 網路協議。TCP 和 UDP 都可使用此協議。一般都用這個,你懂的。 //AF_INET6: IPv6 網路協議。TCP 和 UDP 都可使用此協議。 //AF_UNI ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...