Well-configured Vue family Bucket Project Router,vuex,api,axios,vue-ls,async

GitHub Address: Https://github.com/liangfengbo/vue-cli-project Click to enter Vue-cli-project

• Built-in Vuejs family bucket project, unified management back-end Interface | Get Data | Request data, already contains Vue-router,vuex,api,axios. Webpack, storage with Vue-ls, async async/await, CSS less. Download is the use of project development.
• If you like or if you are helpful, please star??,thanks.

  A Vue.js Project

Use

# 安装服务npm install# 启动服务npm run dev

Description SRC Schema

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

Processing data page This 2 chunks, separates the data and the page, makes the request data in the Vuex, the page only needs to make the call data.

Request interface This piece subdivision, interface and request interface separate, I used the latest async/await function to do data request

The API folder is primarily a backend-provided interface, such as

import fetch from ‘./fetch‘;export default {  // 获取医生列表  list(params) {    return fetch.get(‘/doctor/list‘, params)  },  // 获取医生详情信息  detail(id) {    return fetch.post(‘/doctor/detail/‘ + id);  },}

Fetch.js files are encapsulated Axios requests, as well as request processing, and HTTP status code processing

Import Util from '. /libs/util ' Import qs from ' qs ' import vue from ' vue ' Util.ajax.defaults.headers.common = {' X-requested-with ': ' Xmlhttpreq Uest '}; Util.ajax.interceptors.request.use (config = {/** * here do loading ... * @type {string} *///Get token Config.hea  ders.common[' Authorization ' = ' Bearer ' + Vue.ls.get ("Web-token"); return config}, error = {return Promise.reject (Error)}); Util.ajax.interceptors.response.use (response = {/** * here do loading off *///If the backend has a new token then re-cache 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) {//handle 401 Error} else if (Response.Status = = 403) {//Handle 403 Error} else if (Response.statu s = = 412) {//handle 412 Error} else if (Response.Status = = 413) {//Processing 413 Insufficient permissions} return Promise.reject (response)}); Expo   RT 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 (Ur      L, 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 '}}}}

Make a request in Vuex, such as requesting a doctor's list, using async/await to get the data into the store data

├──index.js├──modules│└──doctor.js└──mutation-types.jsimport doctor from '. /.. /api/doctor ' Import * as types from '.  /mutation-types ' const STATE = {//Doctor list doctorlist: [],//doctor details Doctordetail:null,};const mutations = {//Set up Doctor list [Types. Set_doctor_list] (state, data) {state.doctorlist = data},//Set doctor details [types.   Set_doctor_detail] (state, data) {state.doctordetail = data},};const actions = {/** * Get a list of Doctor advisors * @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); },/** * get doctor details * @param state * @param commit * @param ID Doctor 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}

In the page you need to do the introduction:

import {mapActions, mapState} from ‘vuex‘

Code can see the code of the file in detail

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

The core is to separate the data and the page, subdivide the interface, request data with Vuex to do the processing, the page to obtain data are unified management project. You can see the code in the project in detail. GitHub Address: Https://github.com/liangfengbo/vue-cli-project Click to enter

Well-configured Vue family Bucket Project Router,vuex,api,axios,vue-ls,async