已配置好的vue全家桶項目router,vuex,api,axios,vue-ls,async

標籤：vuejs

github 地址： 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.jsimport 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