github 地址: https://github.com/liangfengbo/vue-cli-project 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 https://github.com/liangfengbo/vue-cli-project 点击进入
来源: http://blog.51cto.com/13284984/2120403