基於nuxt和iview搭建後臺管理系統實踐(1)

願愛無憂dk_發表於2018-06-06
UXView

封面圖，使用創客貼製作

專案背景

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

專案模組分佈

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

iview-admin參考

技術實現

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

<script>
// import MyFooter from '~/components/Footer.vue'
import leftNav from '~/components/leftNav.vue';
import topNav from '~/components/topNav.vue';

export default {
  components: {
    leftNav,
    topNav
  }
}
</script>

<style>
</style>
複製程式碼
// 檔案 pages/index.vue
<script>
  export default {
    layout: "nav",//此處引用layout的nav佈局檔案
  }
</script>
複製程式碼
  • 選單高亮程式碼實現
//檔案 components/left-nav.vue
goto(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.js
import 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 works
if (process.server) {
  // options.baseURL = `http://${process.env.HOST || 'localhost'}:${process.env.PORT || 3000}`
  axios.defaults.baseURL = `http://${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;
複製程式碼
  • 有資料請求的頁面
<script>
import axios from "~plugins/axios";
export default {
    methods:{
        loadData(){
            axios.get(urls.api, { params: this.param })
            .then(res => {
            //請求成功回撥
                
            })
            .catch(error => {
            //請求失敗
                
       });
    }
}
</script>
複製程式碼

主要技術棧

vue、nuxt、iview、axios、vuex、v-charts、proxy、nginx
複製程式碼

參考文件

以下列了一些開發過程中所用到的文件和ui元件

  • nuxt官方文件 https://zh.nuxtjs.org/guide

  • vue官方文件 https://cn.vuejs.org/index.html

  • vuex文件 https://vuex.vuejs.org/zh-cn/

  • element-admin http://lit.ipyro.cn/#/dashboard

  • 基於vue的前端ui元件庫iview https://www.iviewui.com/

  • 基於iview的後臺管理系統iview-admin https://iview.github.io/iview-admin/#/home

  • vue-element-admin http://panjiachen.github.io/vue-element-admin/#/dashboard

  • 基於echarts的和vue封裝的圖表元件v-charts https://v-charts.js.org/#/

  • 《nuxt 踩坑之 -- Vuex狀態樹的模組方式使用》https://blog.csdn.net/github_38847071/article/details/78851209

相關文章