vue-cli-project

• 👨‍💻‍已构建配置好的vuejs全家桶项目，统一管理后端接口 | 获取数据 | 请求数据，已包含vue-router，vuex，api，axios. webpack, 储存用vue-ls, 异步async/await, css sass. 下载即使用项目开发。
• 喜欢或对你有帮助的话请点star✨✨，Thanks.

A Vue.js project

Vue cli3.x

基于 Vue-cli3 搭建的前端开发项目模板，已在 vue.config.js 文件中配置好 webpack，仅供参考，开箱即用，欢迎大家围观指教！https://github.com/liangfengbo/vue-cli3-template

使用

# 安装服务
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文件夹 主要放后端提供的接口，如

importfetchfrom'./fetch';exportdefault{// 获取医生列表list(params){returnfetch.get('/doctor/list',params)},// 获取医生详情信息detail(id){returnfetch.post('/doctor/detail/'+id);},}

fetch.js 文件是封装axios请求，以及请求处理，和http状态码的等处理

importUtilfrom'../libs/util'importqsfrom'qs'importVuefrom'vue'Util.ajax.defaults.headers.common={'X-Requested-With': 'XMLHttpRequest'};Util.ajax.interceptors.request.use(config=>{/** * 在这里做loading ... * @type {string} */// 获取tokenconfig.headers.common['Authorization']='Bearer '+Vue.ls.get("web-token");returnconfig},error=>{returnPromise.reject(error)});Util.ajax.interceptors.response.use(response=>{/** * 在这里做loading 关闭 */// 如果后端有新的token则重新缓存letnewToken=response.headers['new-token'];if(newToken){Vue.ls.set("web-token",newToken);}returnresponse;},error=>{letresponse=error.response;if(response.status==401){// 处理401错误}elseif(response.status==403){// 处理403错误}elseif(response.status==412){// 处理412错误}elseif(response.status==413){// 处理413权限不足}returnPromise.reject(response)});exportdefault{post(url,data){returnUtil.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){returnUtil.ajax({method: 'get',url: url,
params,})},delete(url,params){returnUtil.ajax({method: 'delete',url: url,
params
})},put(url,data){returnUtil.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.jsimportdoctorfrom'../../api/doctor'import*astypesfrom'../mutation-types'conststate={// 医生列表doctorList: [],// 医生详情信息doctorDetail: null,};constmutations={// 设置医生列表[types.SET_DOCTOR_LIST](state,data){state.doctorList=data},// 设置医生详情信息[types.SET_DOCTOR_DETAIL](state,data){state.doctorDetail=data},};constactions={/** * 获取医生顾问列表 * @param state * @param commit * @param params * @returns {Promise<void>} */asyncgetDoctorList({state, commit},params){letret=awaitdoctor.list(params);commit(types.SET_DOCTOR_LIST,ret.data.data);},/** * 获取医生详情信息 * @param state * @param commit * @param id 医生ID * @returns {Promise<void>} */asyncgetDoctorDetail({state, commit},id){letret=awaitdoctor.detail(id);commit(types.SET_DOCTOR_DETAIL,ret.data.data);}};exportdefault{
state,
actions,
mutations
}

在页面里需要执行引入：

import{mapActions,mapState}from'vuex'

代码可以具体看文件的代码

└──doctor├──detail.vue└──list.vue<script>import{mapActions, mapState}from'vuex'exportdefault{components: {},data(){return{}},computed: {
...mapState({doctorList: state=>state.doctor.doctorList,})},asynccreated(){// 医生类型letparams={type: 'EXP'};// 获取医生列表awaitthis.getDoctorList(params);},methods: {
...mapActions([// 获取医生列表'getDoctorList']),// 路由跳转方法routeLink(link){this.$router.push({path: link});},}}</script>

核心就是把API数据和页面分离，细分把接口，请求API数据方法放在vuex做处理，在页面映射vuex的mapActions提供的接口方法获取数据，做统一管理项目。喜欢或对你有帮助的话请点star✨✨，Thanks.