看片點擊進入→https://www.2022cma.com

已包含vue-router，vuex，api，axios. webpack, 儲存用vue-ls, 異步async/await, css less. 下載即使用項目開發。
喜歡或對你有幫助的話
src架構

├── App.vue
├── api
│ ├── doctor.js
│ └── fetch.js
├── assets
│ └── logo.png
├── components
│ └── HelloWorld.vue
├── libs
│ └── util.js

請求接口這塊再細分，接口和請求接口分開，我使用了最新的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);
},
}
1
2
3

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‘
  }
})

}
}

95
96
97
98
99
100
101
102
在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 = {
// 設置醫生列表
(state, data) {
state.doctorList = data
},
// 設置醫生詳情信息
(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‘
1
代碼可以具體看文件的代碼

└── 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>

2022cm最新視頻app下載地址