目錄結構

這是《基於nuxt和iview搭建OM後臺管理系統實踐》這一個系列文章的目錄，大致思路如下：

• 自行開發的公共元件，、地圖、上傳元件的封裝過程

• 專案上線流程，自動化打包（Jenkins）

• 專案總結，總結開發過程中的坑點，避免以後再掉坑

專案背景

清明節後回到武漢，在周例會上，專案經理提出要開發一個我們們app的後臺管理系統（OM系統），預估兩週時間開發完並上線，並且要實現前後端分離，最終在經過短暫的技術選型和苦逼開發後終於延後幾天並上線了。寫下這篇文章記錄一下開發（踩坑）過程。

專案模組分佈

因為是公司的專案，後臺模組分佈的圖片只存在於我的有道雲筆記，後續會根據這些模組封裝一些公共元件出來。

iview-admin參考

技術實現

• 左側和頂部導航：使用nuxt的佈局屬性，在資料夾layouts裡新建nav.vue檔案，引入leftNav和topNav元件，使用 layout 屬性來為頁面指定使用nav佈局。導航高亮透過在leftNav裡更新menuName欄位來實現。

// 檔案 layouts/nav.vue
// import MyFooter from '~/components/Footer.vue'import leftNav from '~/components/leftNav.vue';import topNav from '~/components/topNav.vue';export default {  components: {
    leftNav,
    topNav
  }
}

// 檔案 pages/index.vue

  export default {    layout: "nav",//此處引用layout的nav佈局檔案
  }

• 選單高亮程式碼實現

//檔案 components/left-nav.vuegoto(obj) {    let path = "";    // this.$store.commit("upMenuName", obj); //更新menuName
    setStore('menuName',obj);    this.menuName = getStore('menuName');    this.$store.state.menuList.forEach(element => {
        element.list.forEach(el => {          if (el.id == obj) {
            path = el.path;
          }
        });
    });    this.$router.push(path);    // window.location = path;}

• 全域性axios配置,並對登入失效做跳轉處理

//檔案 plugins/axios.jsimport axios from 'axios';import Vue from 'vue';import * as utils from '../lib/utils';// import {Spin,Notice}  from 'iview';// import router from ''let options = {}// The server-side needs a full url to worksif (process.server) {  // options.baseURL = `{process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
  axios.defaults.baseURL = `{process.env.HOST || 'localhost'}:${process.env.PORT || 3000}/api`}
axios.defaults.headers['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers['X-Requested-With'] = 'XMLHttpRequest';// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';axios.defaults.withCredentials = true;
axios.defaults.timeout = 5000;//請求之前axios.interceptors.request.use((config)=>{  // console.log(config)
  // Spin.show();
  return config;
});//登陸失效跳轉登入頁面axios.interceptors.response.use(  response => {    console.log('-------axiosResponse---------')    // console.log(response);
    // Spin.hide();
    return response;
  },
  error => {    console.log('-------axiosError---------');    console.log(error.response.status);    if (error.response.status) {      switch (error.response.status) {        case 401:          // if (process.server){
            utils.clearLocalStorage();            console.log(window.location)            window.location.href= '/login?url'+window.location.pathname          // }
      }
    }    // Spin.hide();
    // Notice.error({
    //   title: '溫馨提示：',
    //   desc: '網路請求失敗，請稍後再試'
    // });
    // console.log(error.response.status);
    
    return Promise.reject(error.response.data)
  }
);export default axios;

• 有資料請求的頁面

主要技術棧

vue、nuxt、iview、axios、vuex、v-charts、proxy、nginx

作者：願愛無憂dk_
連結：