基于nuxt和iview搭建OM后台管理系统实践(1)

时间 2019-12-04

标签基于 nuxt iview 搭建后台管理系统实践繁體版

原文原文链接

目录结构

这是《基于nuxt和iview搭建OM后台管理系统实践》这一个系列文章的目录，大体思路以下：html

简要介绍OM后台管理系统，以及开发环境
自行开发的公共组件，[富文本quill[已完成]](http://23jt.net/kun/?post=8)、地图、上传组件的封装过程
项目上线流程，自动化打包（Jenkins）
项目总结，总结开发过程当中的坑点，避免之后再掉坑

项目背景

清明节后回到武汉，在周例会上，项目经理提出要开发一个我们app的后台管理系统（OM系统），预估两周时间开发完并上线，而且要实现先后端分离，最终在通过短暂的技术选型和苦逼开发后终于延后几天并上线了。写下这篇文章记录一下开发（踩坑）过程。前端

项目模块分布

由于是公司的项目，后台模块分布的图片只存在于个人有道云笔记，后续会根据这些模块封装一些公共组件出来。vue

技术实现

左侧和顶部导航：使用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组件ios

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...
~~vue-element-admin http://panjiachen.github.io/v...~~
基于echarts的和vue封装的图表组件v-charts https://v-charts.js.org/#/
《nuxt 踩坑之 -- Vuex状态树的模块方式使用》https://blog.csdn.net/github_...