本文主要簡單分享以下四點
本文主要目的為以下三點
- 希望能夠幫到一些人
- 希望能夠得到一些建議
- 奉上一個使用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: 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/
效果圖示：整容前 整容后
結語
感覺文章東西太多，什么都沒講清楚，不過，重要的是思路嘛，具體實現可以看框架代碼~
如果文中有錯誤，歡迎指出。
如果有更好的實現方式，也希望有大佬指點一二。