优化公共逻辑代码

src/api/requestUrl.js

 */
export default function (actionName) {
  // 非生产环境 && 开启代理, 接口前缀统一使用[/proxyApi/]前缀做代理拦截!
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseURL) + actionName
  return (process.env.NODE_ENV !== 'production' && process.env.OPEN_PROXY ? '/proxyApi/' : window.SITE_CONFIG.baseUrl) + actionName
}

src/assets/scss/_base.scss

  color: #333;
  background-color: #f0f0f0;
}
:focus {
*:focus {
  outline: 0;
}
a {
.site-sidebar__menu.el-menu {
  width: 230px;
  border-right: 0;
}
.site-sidebar__menu-icon {
  margin-right: 5px;
  font-size: 18px;
  .site-sidebar__menu-icon {
    margin-right: 5px;
    font-size: 16px;
    color: inherit;
  }
}
/* site-content */
.site-content__wrapper {

src/components/sub-menu-nav/index.vue

    :data-idx="menuNav.menuId + ''"
    :index="menuNav.menuId + ''">
    <template slot="title">
      <icon-svg name="xitong" class="site-sidebar__menu-icon" :class="menuNav.icon"></icon-svg>
      <i :class="['site-sidebar__menu-icon', menuNav.icon ? menuNav.icon : 'fa fa-circle-o']"></i>
      <span>{{ menuNav.name }}</span>
    </template>
    <sub-menu-nav
    v-else
    :index="menuNav.menuId + ''"
    :data-idx="menuNav.menuId + ''"
    @click="gotoRouteByMenuNav(menuNav)">
    {{ menuNav.name }}
    @click="gotoRouteHandle(menuNav.url)">
    <i :class="['site-sidebar__menu-icon', menuNav.icon ? menuNav.icon : 'fa fa-circle-o']"></i>
    <span>{{ menuNav.name }}</span>
  </el-menu-item>
</template>
<script>
  import { getRouteNameByUrl } from '@/utils'
  import SubMenuNav from '../sub-menu-nav'
  import { getRouteNameByUrl } from '@/utils'
  export default {
    name: 'sub-menu-nav',
    props: {
      menuNav: Object
      menuNav: Object,
      required: true
    },
    components: {
      SubMenuNav
    },
    methods: {
      // 跳转到菜单导航对应路由
      gotoRouteByMenuNav (menuNav) {
        var routeName = getRouteNameByUrl(menuNav.url)
      gotoRouteHandle (url) {
        var routeName = getRouteNameByUrl(url)
        if (/\S/.test(routeName)) {
          this.$router.push({ name: routeName })
        }

src/store/getters.js

export const cartProducts = state => {
  return state.cart.added.map(({ id, quantity }) => {
    const product = state.products.all.find(p => p.id === id)
    return {
      title: product.title,
      price: product.price,
      quantity
    }
  })
}
export const siteLayoutMini = state => state.siteLayoutMini

src/store/index.js

import * as getters from './getters'
import mutations from './mutations'
import * as actions from './actions'
import home from './modules/home'
import user from './modules/user'
Vue.use(Vuex)
  sidebarCollapse: false,
  // 页面文档可视高度(随窗口改变大小)
  documentClientHeight: 0,
  // 菜单导航列表
  // 菜单导航
  menuNavList: [],
  // 内容区域tabs标签页
  contentTabs: {
    activeName: '',
    tabList: []
  },
  // 菜单导航iframe嵌套地址
  menuNavIframeUrl: '//demo.open.renren.io/renren-fast/',
  // 菜单导航类型映射表, module: vue重构(默认), iframe: iframe方式嵌套
  menuNavTypeMap: {
    'sql': 'iframe'
  }
  contentTabs: [],
  contentTabsActiveName: ''
}
export default new Vuex.Store({
  mutations,
  actions,
  modules: {
    home,
    user
  },
  strict: process.env.NODE_ENV !== 'production'

src/store/modules/home.js

const state = {
}
const getters = {
}
const actions = {
}
const mutations = {
}
export default {
  state,
  getters,
  actions,
  mutations
}

src/store/modules/user.js

import * as types from '../mutation-types'
import merge from 'lodash/merge'
const state = {
  userId: '',
  userName: ''
  id: 0,
  name: ''
}
const getters = {
}
const mutations = {
  [types.UPDATE_USER_INFO] (state, info) {
    state = merge(state, info)
  [types.UPDATE_USER_ID] (state, { id }) {
    state.id = id
  },
  [types.UPDATE_USER_NAME] (state, { name }) {
    state.name = name
  }
}

src/store/mutation-types.js

// 公共
export const SWITCH_SIDEBAR_COLLAPSE = 'SWITCH_SIDEBAR_COLLAPSE'
export const UPDATE_DOCUMENT_CLIENT_HEIGHT = 'UPDATE_DOCUMENT_CLIENT_HEIGHT'
export const UPDATE_MENU_NAV_LIST = 'UPDATE_MENU_NAV_LIST'
export const ADD_CONTENT_TAB = 'ADD_CONTENT_TAB'
export const UPDATE_CONTENT_TABS = 'UPDATE_CONTENT_TABS'
export const UPDATE_CONTENT_TABS_ACTIVE_NAME = 'UPDATE_CONTENT_TABS_ACTIVE_NAME'
export const UPDATE_USER_INFO = 'UPDATE_USER_INFO'
// 用户
export const UPDATE_USER_ID = 'UPDATE_USER_ID'
export const UPDATE_USER_NAME = 'UPDATE_USER_NAME'

src/store/mutations.js

import Vue from 'vue'
import * as types from './mutation-types'
export default {
    state.menuNavList = list
  },
  [types.ADD_CONTENT_TAB] (state, tab) {
    state.contentTabs.push(tab)
  },
  [types.UPDATE_CONTENT_TABS] (state, tabs) {
    state.contentTabs = tabs
  },
  [types.UPDATE_CONTENT_TABS_ACTIVE_NAME] (state, { name }) {
    Vue.set(state.contentTabs, 'activeName', name)
    state.contentTabsActiveName = name
  }
}

src/utils/index.js

  return JSON.parse(sessionStorage.getItem('permissions') || '[]').indexOf(key) !== -1 || false
}
/**
 * 获取路由名称, 根据url地址
 * @param {*} url
 */
export function getRouteNameByUrl (url) {
  let val = /.*\/(.*)\.html/.exec(url)
  return val && val.length >= 1 ? val[1] : ''
}
/**
 * 树形数据转换
 * @param {*} data
/**
 * 获取字符串字节长度
 * @param {*} s
 */
export function getStringLength (s) {
  return s.replace(/[\u4e00-\u9fa5\uff00-\uffff]/g, '**').length
}
/**
 * 获取路由名称, 根据url地址
 */
export function getRouteNameByUrl (url) {
  let val = /.*\/(.*)\.html/.exec(url)
  return val && val.length >= 1 ? val[1] : ''
}

src/utils/validate.js

/**
 * 邮箱
 * @param {*} s
 */
export function isEmail (s) {
  return /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
/**
 * 手机号码
 * @param {*} s
 */
export function isMobile (s) {
  return /^((\+?86)|(\(\+86\)))?(13[012356789][0-9]{8}|15[012356789][0-9]{8}|18[02356789][0-9]{8}|147[0-9]{8}|1349[0-9]{7})$/.test(s)
/**
 * 电话号码
 * @param {*} s
 */
export function isPhone (s) {
  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)

src/views/layout/content-tabs.vue

  <div class="site-content site-content--tabs">
    <el-tabs
      v-model="tabActiveName"
      :closable="$store.state.contentTabs.tabList.length > 1"
      :closable="$store.state.contentTabs.length > 1"
      @tab-click="selectedTabHandle"
      @tab-remove="removeTabHandle">
        <el-tab-pane
          v-for="item in $store.state.contentTabs.tabList"
          v-for="item in $store.state.contentTabs"
          :key="item.name"
          :label="item.title"
          :name="item.name">
          <el-card :body-style="contentViewHeight(item)">
            <iframe
              v-if="item.type === 'iframe'"
              :src="$store.state.menuNavIframeUrl + item.url"
              :src="getNestIframeUrl(item.url)"
              width="100%" height="100%" frameborder="0" scrolling="yes">
            </iframe>
            <keep-alive v-else>
    computed: {
      tabActiveName: {
        get () {
          return this.$store.state.contentTabs.activeName
          return this.$store.state.contentTabsActiveName
        },
        set (val) {
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name: val })
        height += 'px'
        return tab.type === 'iframe' ? { height } : { minHeight: height }
      },
      // 获取iframe嵌套地址
      getNestIframeUrl (url) {
        return window.SITE_CONFIG.nestIframeUrl + url
      },
      // 选中tab
      selectedTabHandle (tab) {
        tab = this.$store.state.contentTabs.tabList.filter(item => item.name === tab.name)
        tab = this.$store.state.contentTabs.filter(item => item.name === tab.name)
        if (!isEmpty(tab)) {
          this.$router.push({ name: tab[0].name })
        }
      },
      // 删除tab
      removeTabHandle (tabName) {
        var newTabList = this.$store.state.contentTabs.tabList.filter(item => item.name !== tabName)
        if (!isEmpty(newTabList)) {
          // 当前选中tab被删除
          if (this.tabActiveName === tabName) {
            this.$router.push({ name: newTabList[newTabList.length - 1].name }, () => {
              this.tabActiveName = this.$route.name
            })
          }
          this.UPDATE_CONTENT_TABS({
            activeName: this.tabActiveName,
            tabList: newTabList
        var newTabs = this.$store.state.contentTabs.filter(item => item.name !== tabName)
        // 当前选中tab被删除
        if (tabName === this.tabActiveName) {
          this.$router.push({ name: newTabs[newTabs.length - 1].name }, () => {
            this.tabActiveName = this.$route.name
          })
        }
        this.UPDATE_CONTENT_TABS(newTabs)
      },
      ...mapMutations(['UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
    }

src/views/layout/index.vue

      getUserInfo () {
        API.user.info().then(({data}) => {
          if (data && data.code === 0) {
            this.UPDATE_USER_INFO({
              userId: data.user.userId,
              userName: data.user.username
            })
            this.UPDATE_USER_ID({ id: data.user.userId })
            this.UPDATE_USER_NAME({ name: data.user.username })
          }
        })
      },
      ...mapMutations(['UPDATE_DOCUMENT_CLIENT_HEIGHT', 'UPDATE_USER_INFO'])
      ...mapMutations(['UPDATE_DOCUMENT_CLIENT_HEIGHT', 'UPDATE_USER_ID', 'UPDATE_USER_NAME'])
    }
  }
</script>

src/views/layout/sidebar.vue

<script>
  import SubMenuNav from '@/components/sub-menu-nav'
  import API from '@/api'
  import { getRouteNameByUrl } from '@/utils'
  import { mapMutations } from 'vuex'
  import { getRouteNameByUrl } from '@/utils'
  import isEmpty from 'lodash/isEmpty'
  export default {
    data () {
      $route: 'routeHandle'
    },
    created () {
      this.routeHandle(this.$route, true)
      this.getMenuNavList().then(() => {
        this.routeHandle(this.$route)
      })
    },
    methods: {
      // 路由操作
      // isInit: 页面第一次加载时, 需先获取菜单导航列表, 再进行其他操作
      routeHandle (route, isInit) {
        if (/^\/n\/.*$/.test(route.path)) {
          // tab不存在添加, 存在选中
          let tab = this.$store.state.contentTabs.tabList.filter(tab => tab.name === route.name)
          if (isEmpty(tab)) {
            if (isInit && isEmpty(this.$store.state.menuNavList)) {
              this.getMenuNavList().then(() => {
                this.addContentTab(route.name)
              })
            } else {
              this.addContentTab(route.name)
            }
          } else {
            this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name: route.name })
          }
        } else {
          if (isInit) {
            this.getMenuNavList()
          }
        }
      },
      // 添加内容tab项
      addContentTab (name) {
        let menuNav = this.getMenuNavByRouteName(name)
        this.UPDATE_CONTENT_TABS({
          activeName: name,
          tabList: this.$store.state.contentTabs.tabList.concat({
            id: menuNav.menuId,
            title: menuNav.name,
            name: name,
            type: this.$store.state.menuNavTypeMap[name] === 'iframe' ? 'iframe' : 'module',
            url: menuNav.url
          })
        })
        this.menuNavActive = menuNav.menuId + ''
      },
      // 获取菜单导航列表 / 权限
      getMenuNavList () {
        return API.menu.nav().then(({data}) => {
          }
        })
      },
      // 路由操作
      routeHandle (route) {
        if (/^\/n\/.*$/.test(route.path)) {
          var tab = this.$store.state.contentTabs.filter(item => item.name === route.name)
          // tab不存在, 先添加
          if (isEmpty(tab)) {
            var menuNav = this.getMenuNavByRouteName(route.name, this.$store.state.menuNavList)
            if (!isEmpty(menuNav)) {
              this.menuNavActive = menuNav.menuId + ''
              this.ADD_CONTENT_TAB({
                id: menuNav.menuId,
                name: route.name,
                title: menuNav.name,
                type: (window.SITE_CONFIG.nestIframeRouteNameList || []).indexOf(route.name) !== -1 ? 'iframe' : 'module',
                url: menuNav.url
              })
            }
          }
          this.UPDATE_CONTENT_TABS_ACTIVE_NAME({ name: route.name })
        }
      },
      // 获取菜单导航, 根据路由名称
      getMenuNavByRouteName (name, menuNavList = this.$store.state.menuNavList) {
      getMenuNavByRouteName (name, menuNavList) {
        for (var i = 0; i < menuNavList.length; i++) {
          if (menuNavList[i].list && menuNavList[i].list.length >= 1) {
            return this.getMenuNavByRouteName(name, menuNavList[i].list)
          }
        }
      },
      ...mapMutations(['UPDATE_MENU_NAV_LIST', 'UPDATE_CONTENT_TABS', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
      ...mapMutations(['UPDATE_MENU_NAV_LIST', 'ADD_CONTENT_TAB', 'UPDATE_CONTENT_TABS_ACTIVE_NAME'])
    }
  }
</script>

src/views/layout/topbar.vue

      <el-menu
        class="site-topbar__menu"
        mode="horizontal">
        <el-menu-item class="site-topbar__switch" index="1" @click="switchSidebarCollapse()">
        <el-menu-item class="site-topbar__switch" index="1-1" @click="switchSidebarCollapseHandle()">
          <icon-svg name="zhedie"></icon-svg>
        </el-menu-item>
      </el-menu>
      <el-menu
        class="site-topbar__menu site-topbar__menu--right"
        mode="horizontal">
        <el-menu-item class="site-topbar__avatar" index="2">
        <el-menu-item class="site-topbar__avatar" index="1-2">
          <el-dropdown placement="bottom" :hide-on-click="false">
            <span class="el-dropdown-link">
              <img src="~@/assets/img/avatar.png" :alt="$store.state.user.userName">
              {{ $store.state.user.userName }}
              <img src="~@/assets/img/avatar.png" :alt="$store.state.user.name">
              {{ $store.state.user.name }}
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="updatePasswordHandle()">修改密码</el-dropdown-item>
      </el-menu>
    </div>
    <!-- 弹窗, 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="updatePasswordDialogVisible"
      width="550px"
      :append-to-body="true">
      <el-form :model="updatePasswordForm" :rules="updatePasswordRule" ref="updatePasswordForm" label-width="80px">
        <el-form-item label="账号">
          <span>{{ $store.state.user.userName }}</span>
        </el-form-item>
        <el-form-item label="原密码" prop="password">
          <el-input type="password" v-model="updatePasswordForm.password"></el-input>
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input type="password" v-model="updatePasswordForm.newPassword"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input type="password" v-model="updatePasswordForm.confirmPassword"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="updatePasswordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="updatePasswordFormSubmit()">确定</el-button>
      </span>
    </el-dialog>
    <update-password v-if="updatePassowrdVisible" ref="updatePassowrd"></update-password>
  </header>
</template>
<script>
  import UpdatePassword from './update-password'
  import API from '@/api'
  import { mapMutations } from 'vuex'
  export default {
    data () {
      var validateConfirmPassword = (rule, value, callback) => {
        if (this.updatePasswordForm.newPassword !== value) {
          callback(new Error('确认密码与新密码不一致'))
        } else {
          callback()
        }
      }
      return {
        updatePasswordDialogVisible: false,
        updatePasswordForm: {
          password: '',
          newPassword: '',
          confirmPassword: ''
        },
        updatePasswordRule: {
          password: [
            { required: true, message: '原密码不能为空', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '新密码不能为空', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validateConfirmPassword, trigger: 'blur' }
          ]
        }
        updatePassowrdVisible: false
      }
    },
    components: {
      UpdatePassword
    },
    methods: {
      // 切换侧边栏, 水平折叠收起状态
      switchSidebarCollapse () {
      switchSidebarCollapseHandle () {
        this.SWITCH_SIDEBAR_COLLAPSE({ collapse: !this.$store.state.sidebarCollapse })
      },
      // 修改密码
      updatePasswordHandle () {
        this.updatePasswordDialogVisible = true
        this.updatePassowrdVisible = true
        this.$nextTick(() => {
          this.$refs['updatePasswordForm'].resetFields()
        })
      },
      // 修改密码, 提交
      updatePasswordFormSubmit () {
        this.$refs['updatePasswordForm'].validate((valid) => {
          if (valid) {
            var params = {
              'password': this.updatePasswordForm.password,
              'newPassword': this.updatePasswordForm.newPassword
            }
            API.user.updatePassword(params).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.updatePasswordDialogVisible = false
                    this.$nextTick(() => {
                      this.$cookie.delete('token')
                      this.$router.replace({ name: 'login' })
                    })
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
          this.$refs.updatePassowrd.init()
        })
      },
      // 退出

src/views/layout/update-password.vue

<template>
  <el-dialog
    title="修改密码"
    :visible.sync="visible"
    :append-to-body="true">
    <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="80px">
      <el-form-item label="账号">
        <span>{{ $store.state.user.name }}</span>
      </el-form-item>
      <el-form-item label="原密码" prop="password">
        <el-input type="password" v-model="dataForm.password"></el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="dataForm.newPassword"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="confirmPassword">
        <el-input type="password" v-model="dataForm.confirmPassword"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import API from '@/api'
  export default {
    data () {
      var validateConfirmPassword = (rule, value, callback) => {
        if (this.dataForm.newPassword !== value) {
          callback(new Error('确认密码与新密码不一致'))
        } else {
          callback()
        }
      }
      return {
        visible: false,
        dataForm: {
          password: '',
          newPassword: '',
          confirmPassword: ''
        },
        dataRule: {
          password: [
            { required: true, message: '原密码不能为空', trigger: 'blur' }
          ],
          newPassword: [
            { required: true, message: '新密码不能为空', trigger: 'blur' }
          ],
          confirmPassword: [
            { required: true, message: '确认密码不能为空', trigger: 'blur' },
            { validator: validateConfirmPassword, trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
      // 初始化
      init () {
        this.visible = true
        this.$nextTick(() => {
          this.$refs['dataForm'].resetFields()
        })
      },
      // 表单提交
      dataFormSubmit () {
        this.$refs['dataForm'].validate((valid) => {
          if (valid) {
            var params = {
              'password': this.dataForm.password,
              'newPassword': this.dataForm.newPassword
            }
            API.user.updatePassword(params).then(({data}) => {
              if (data && data.code === 0) {
                this.$message({
                  message: '操作成功',
                  type: 'success',
                  duration: 1500,
                  onClose: () => {
                    this.visible = false
                    this.$nextTick(() => {
                      this.$cookie.delete('token')
                      this.$router.replace({ name: 'login' })
                    })
                  }
                })
              } else {
                this.$message.error(data.msg)
              }
            })
          }
        })
      }
    }
  }
</script>

static/config/index.js

;(function () {
  window.SITE_CONFIG = {
    baseURL: 'http://demo.renren.io/renren-fast/'
    // api请求地址
    baseUrl: '//demo.renren.io/renren-fast/',
    // 嵌套iframe地址
    nestIframeUrl: '//demo.renren.io/renren-fast/',
    // 嵌套iframe路由名称列表
    nestIframeRouteNameList: ['sql']
  }
})()