已配置好的vue全家桶項(xiàng)目router,vuex,api,axios,vue-ls,async

github 地址： https://github.com/liangfengbo/vue-cli-project 點(diǎn)擊進(jìn)入

vue-cli-project

  • 已構(gòu)建配置好的vuejs全家桶項(xiàng)目，統(tǒng)一管理后端接口 | 獲取數(shù)據(jù) | 請(qǐng)求數(shù)據(jù)，已包含vue-router，vuex，api，axios. webpack, 儲(chǔ)存用vue-ls, 異步async/await, css less. 下載即使用項(xiàng)目開發(fā)。
  • 喜歡或?qū)δ阌袔椭脑捳?qǐng)點(diǎn)star??，Thanks.

    A Vue.js project

    東山網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),東山網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為東山超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)營銷網(wǎng)站建設(shè)要多少錢，請(qǐng)找那個(gè)售后服務(wù)好的東山做網(wǎng)站的公司定做！

使用

# 安裝服務(wù)
npm install

# 啟動(dòng)服務(wù)
npm run dev

說明

src架構(gòu)
├── 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

處理數(shù)據(jù)頁面這2大塊，把數(shù)據(jù)和頁面分離，在vuex里面做請(qǐng)求數(shù)據(jù)，頁面只需要做調(diào)用數(shù)據(jù)。

請(qǐng)求接口這塊再細(xì)分，接口和請(qǐng)求接口分開，我使用了最新的async/await函數(shù)做數(shù)據(jù)請(qǐng)求

api文件夾 主要放后端提供的接口，如
import fetch from './fetch';

export default {
  // 獲取醫(yī)生列表
  list(params) {
    return fetch.get('/doctor/list', params)
  },

  // 獲取醫(yī)生詳情信息
  detail(id) {
    return fetch.post('/doctor/detail/' + id);
  },
}
fetch.js 文件是封裝axios請(qǐng)求，以及請(qǐng)求處理，和http狀態(tài)碼的等處理
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 關(guān)閉
   */

    // 如果后端有新的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錯(cuò)誤

  } else if (response.status == 403) {
    // 處理403錯(cuò)誤

  } else if (response.status == 412) {
    // 處理412錯(cuò)誤

  } else if (response.status == 413) {
    // 處理413權(quán)限不足

  }

  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里面做請(qǐng)求，比如請(qǐng)求醫(yī)生列表，用async/await，拿到數(shù)據(jù)存進(jìn)store數(shù)據(jù)里面
├── index.js
├── modules
│   └── doctor.js
└── mutation-types.js

import doctor from '../../api/doctor'
import * as types from '../mutation-types'

const state = {
  // 醫(yī)生列表
  doctorList: [],
  // 醫(yī)生詳情信息
  doctorDetail: null,
};

const mutations = {
  // 設(shè)置醫(yī)生列表
  [types.SET_DOCTOR_LIST](state, data) {
    state.doctorList = data
  },
  // 設(shè)置醫(yī)生詳情信息
  [types.SET_DOCTOR_DETAIL](state, data) {
    state.doctorDetail = data
  },
};

const actions = {

  /**
   * 獲取醫(yī)生顧問列表
   * @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);
  },

  /**
   * 獲取醫(yī)生詳情信息
   * @param state
   * @param commit
   * @param id 醫(yī)生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
}
在頁面里需要執(zhí)行引入：
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() {
      // 醫(yī)生類型
      let params = {type: 'EXP'};
      // 獲取醫(yī)生列表
      await this.getDoctorList(params);
    },
    methods: {
      ...mapActions([
        // 獲取醫(yī)生列表
        'getDoctorList'
      ]),

      // 路由跳轉(zhuǎn)方法
      routeLink(link) {
        this.$router.push({path: link});
      },
    }
  }
</script>
核心就是把數(shù)據(jù)和頁面分離，細(xì)分把接口，請(qǐng)求數(shù)據(jù)用vuex做處理，在頁面獲取數(shù)據(jù)都做統(tǒng)一管理項(xiàng)目。可以具體看項(xiàng)目里面的代碼。

github 地址： https://github.com/liangfengbo/vue-cli-project 點(diǎn)擊進(jìn)入

網(wǎng)站題目：已配置好的vue全家桶項(xiàng)目router,vuex,api,axios,vue-ls,async
URL鏈接：http://muchs.cn/article46/jiooeg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供ChatGPT、定制網(wǎng)站、靜態(tài)網(wǎng)站、網(wǎng)站維護(hù)、品牌網(wǎng)站建設(shè)、用戶體驗(yàn)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)

成都定制網(wǎng)站網(wǎng)頁設(shè)計(jì)