已配置好的vue全家桶項目router,vuex,api,axios,vue-ls,async
阿新 • • 發佈:2018-05-25
vuejsgithub 地址: https://github.com/liangfengbo/vue-cli-project 點擊進入
vue-cli-project
- 已構建配置好的vuejs全家桶項目,統一管理後端接口 | 獲取數據 | 請求數據,已包含vue-router,vuex,api,axios. webpack, 儲存用vue-ls, 異步async/await, css less. 下載即使用項目開發。
- 喜歡或對你有幫助的話請點star??,Thanks.
A Vue.js project
使用
# 安裝服務
npm install
# 啟動服務
npm run dev
說明
src架構
├── App.vue
├── api
│ ├── doctor.js
│ └── fetch.js
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── libs
│ └── util.js
├── main.js
├── router
│ └── index.js
├── store
│ ├── index.js
│ ├── modules
│ └── mutation-types.js
└── views
└── doctor
處理數據頁面這2大塊,把數據和頁面分離,在vuex裏面做請求數據,頁面只需要做調用數據。
請求接口這塊再細分,接口和請求接口分開,我使用了最新的async/await函數做數據請求
api文件夾 主要放後端提供的接口,如
import fetch from ‘./fetch‘;
export default {
// 獲取醫生列表
list(params) {
return fetch.get(‘/doctor/list‘, params)
},
// 獲取醫生詳情信息
detail(id) {
return fetch.post(‘/doctor/detail/‘ + id);
},
}
fetch.js 文件是封裝axios請求,以及請求處理,和http狀態碼的等處理
import Util from ‘../libs/util‘
import qs from ‘qs‘
import Vue from ‘vue‘
Util.ajax.defaults.headers.common = {
‘X-Requested-With‘: ‘XMLHttpRequest‘
};
Util.ajax.interceptors.request.use(config => {
/**
* 在這裏做loading ...
* @type {string}
*/
// 獲取token
config.headers.common[‘Authorization‘] = ‘Bearer ‘ + Vue.ls.get("web-token");
return config
}, error => {
return Promise.reject(error)
});
Util.ajax.interceptors.response.use(response => {
/**
* 在這裏做loading 關閉
*/
// 如果後端有新的token則重新緩存
let newToken = response.headers[‘new-token‘];
if (newToken) {
Vue.ls.set("web-token", newToken);
}
return response;
}, error => {
let response = error.response;
if (response.status == 401) {
// 處理401錯誤
} else if (response.status == 403) {
// 處理403錯誤
} else if (response.status == 412) {
// 處理412錯誤
} else if (response.status == 413) {
// 處理413權限不足
}
return Promise.reject(response)
});
export default {
post(url, data) {
return Util.ajax({
method: ‘post‘,
url: url,
data: qs.stringify(data),
timeout: 30000,
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded; charset=UTF-8‘
}
})
},
get(url, params) {
return Util.ajax({
method: ‘get‘,
url: url,
params,
})
},
delete(url, params) {
return Util.ajax({
method: ‘delete‘,
url: url,
params
})
},
put(url, data) {
return Util.ajax({
method: ‘put‘,
url: url,
data: qs.stringify(data),
timeout: 30000,
headers: {
‘Content-Type‘: ‘application/x-www-form-urlencoded; charset=UTF-8‘
}
})
}
}
在vuex裏面做請求,比如請求醫生列表,用async/await,拿到數據存進store數據裏面
├── index.js
├── modules
│ └── doctor.js
└── mutation-types.js
import doctor from ‘../../api/doctor‘
import * as types from ‘../mutation-types‘
const state = {
// 醫生列表
doctorList: [],
// 醫生詳情信息
doctorDetail: null,
};
const mutations = {
// 設置醫生列表
[types.SET_DOCTOR_LIST](state, data) {
state.doctorList = data
},
// 設置醫生詳情信息
[types.SET_DOCTOR_DETAIL](state, data) {
state.doctorDetail = data
},
};
const actions = {
/**
* 獲取醫生顧問列表
* @param state
* @param commit
* @param params
* @returns {Promise<void>}
*/
async getDoctorList({state, commit}, params) {
let ret = await doctor.list(params);
commit(types.SET_DOCTOR_LIST, ret.data.data);
},
/**
* 獲取醫生詳情信息
* @param state
* @param commit
* @param id 醫生ID
* @returns {Promise<void>}
*/
async getDoctorDetail({state, commit}, id) {
let ret = await doctor.detail(id);
commit(types.SET_DOCTOR_DETAIL, ret.data.data);
}
};
export default {
state,
actions,
mutations
}
在頁面裏需要執行引入:
import {mapActions, mapState} from ‘vuex‘
代碼可以具體看文件的代碼
└── doctor
├── detail.vue
└── list.vue
<script>
import {mapActions, mapState} from ‘vuex‘
export default {
components: {},
data() {
return {}
},
computed: {
...mapState({
doctorList: state => state.doctor.doctorList,
})
},
async created() {
// 醫生類型
let params = {type: ‘EXP‘};
// 獲取醫生列表
await this.getDoctorList(params);
},
methods: {
...mapActions([
// 獲取醫生列表
‘getDoctorList‘
]),
// 路由跳轉方法
routeLink(link) {
this.$router.push({path: link});
},
}
}
</script>
核心就是把數據和頁面分離,細分把接口,請求數據用vuex做處理,在頁面獲取數據都做統一管理項目。可以具體看項目裏面的代碼。
github 地址: https://github.com/liangfengbo/vue-cli-project 點擊進入
已配置好的vue全家桶項目router,vuex,api,axios,vue-ls,async