分享我在 vue 項目中關於 api 請求的一些實現及項目框架

本文主要簡單分享如下四點

• 如何使用 axios
• 如何隔離配置
• 如何模擬數據
• 分享本身的項目框架

本文主要目的爲如下三點

• 但願可以幫到一些人
• 但願可以獲得一些建議
• 奉上一個使用Vue的模板框架

我只是把我以爲有用的東西分享出來罷了

使用 axios 請求接口

Axios 是一個基於 promise 的 HTTP 庫，能夠用在瀏覽器和 node.js 中。

安裝 axios

npm install axios --save

建立 axios 實例 (api/fetch.js)

axios 默認提交格式爲：application/json
可以使用 qs 模塊(須要安裝)轉換後提交格式爲 application/x-www-form-urlencoded
經過設置 transformRequest 屬性 data => qs.stringify(data) 能夠正常表單形式提交

import axios from 'axios'

const instance = axios.create({
  baseURL: 'apiBaseUrl', // api的base_url
  timeout: 10000 // 請求超時時間
  // transformRequest: data => qs.stringify(data) //
})
// request攔截器
instance.interceptors.request.use(
  e => {
    e.params = e.params || {}
    e.headers = e.headers || {}
    //set 默認值
    return e
  },
  error => ({ status: 0, msg: error.message })
)
// respone攔截器
instance.interceptors.response.use(
  response => {
    const resp = response.data
    if (response.status === 200) {
      return resp
    }
    return resp
  },
  error => {
    console.log('err' + error) // for debug
    return Promise.reject(error)
  }
)
export default instance

使用封裝的fetch.js

在 api 文件中新建接口模塊並使用 axios 實例(api/fetch.js)
src/api/api_test.js

import request from '@/utils/fetch'

export function test(data) {
  return request({
    url: '/test',
    method: 'post',
    data: data
  })
}

使用的時候，可經過引入 api/模塊.js 調用方法，也能夠經過安裝插件的形式將 api 接口擴展到 vue 實例中，使其能夠更方便的在項目中使用

以 test 模塊爲例建立一個$api 擴展

src/api/index.js

import * as api_test from './test'

const apiObj = {
  api_test
}

const install = function(Vue) {
  if (install.installed) return
  install.installed = true
  Object.defineProperties(Vue.prototype, {
    $api: {
      get() {
        return apiObj
      }
    }
  })
}
export default {
  install
}

在 main.js 安裝 $api 擴展:

import api from './api'
Vue.use(api)

在項目中調用：this.$api.api_test.test().then(resp=>{...}).catch(()=>{...})
在後端項目中我二次封裝了下拉框，經過參數接收Function，傳遞$api.api_test.test省了能夠少寫不少代碼。

關於開發環境和生成環境的配置讀取

看到不少中作法，分享下我在項目中使怎麼作的。

目前項目中的作法是在config文件夾中根據環境新建不一樣的配置，而後經過index.js暴露對應環境的配置。

目錄結構及index.js

config
        - _development.js
        - _production.js
        - _testing.js

config/index.js

module.exports = require('./_' + process.env.NODE_ENV).default

實際項目中的目錄結構以下所示

關於在項目中使用 mock

看到好多項目把mock混在項目中使用，就感受很難受，因此想辦法獨立出來了，功能不強大，只是足夠用在一些小Demo上，簡單模擬一下數據就可讓咱們的Demo不用擔憂api接口失效致使vue項目跑不起來的問題。

下面是個人解決方案

express-mockjs 的使用

express-mockjs 是大佬結合 express+mock-lite 構建的一個 api 服務中間件，用它能夠快速的幫助咱們在本地搭建一個 mock 服務器

相關資料：

• express-mockjs
• mock-lite

安裝 express-mockjs: npm install express-mockjs --save-dev

安裝 nodemon 到項目 以監聽 mock 代碼修改

安裝 nodemon: npm install nodemon --save-dev

新建 mock-server/index.js 編寫啓動服務器代碼

var path = require('path')
var express = require('express')
var mockjs = require('express-mockjs')

var app = express()

// 自定義路徑 前綴： '/api'
var config = {
  port: 3000
}
//以/api爲前綴，尋找api目錄下的全部接口
app.use('/api', mockjs(path.join(__dirname, 'api')))

// 獲取port參數 可經過 --port自 定義啓動端口
var args = process.argv
for (let i = 0; i < args.length; i++) {
  if (args[i] === '--port' && i < args.length - 1 && args[i + 1] > 0) {
    config.port = args[i + 1]
    break
  }
}

console.log('mock-server[mockjs-lite]:http://localhost:' + config.port)
// console.log('mockjs-lite定義：http://mockjs-lite.js.org/docs/examples.html')
app.listen(config.port)

編寫接口文件

在 mock-server 文件夾建立 api 文件夾，並按照 expess-mockjs 的文檔編寫 json/js
json

/**
 * Interface function description
 *
 * @url /api-access-path
 */

{
  "code": 0,
  "result|5": [
    {
      "uid|+1": 1,
      "name": "@name",
      "email": "@email"
    }
  ]
}

js

/**
 * home page links
 *
 * @url /home-links
 *
 * Here you can write a detailed description
 * of the parameters of the information.
 */

module.exports = {
  code: function() {
    // simulation error code, 1/10 probability of error code 1.
    return Math.random() < 0.1 ? 1 : 0
  },
  'list|5-10': [{ title: '@title', link: '@url' }]
}

運行 mock 服務器

在項目的 package.json 中添加 mock 命令並運行：npm run mock

"scripts": {
    //...
    "mock": "nodemon --watch mock-server node mock-server/index.js --port 6543"
  },

目錄結構

開發環境根據上面的配置運行起來沒問題了，可是若是本身的小Demo發佈後要怎麼才能使用呢？個人方法是將js文件生成json而後打包到dist目錄
若是有興趣能夠參考mock-server/build.js

分享本身的項目框架

奉上一個以上實現都有的模板框架(UI使用Element-UI,爲了好看),倉庫中docs中有一些獨立的一些說明有興趣能夠查看。

項目地址：https://github.com/yimogit/me-admin-template
預覽地址：https://vue-admin.yimo.link/
效果圖示：整容前 整容後

結語

感受文章東西太多，什麼都沒講清楚，不過，重要的是思路嘛，具體實現能夠看框架代碼~

若是文中有錯誤，歡迎指出。 若是有更好的實現方式，也但願有大佬指點一二。