尚融宝13-后台管理系统前端架构梳理

目录

一、程序入口

（一）入口页面 index.html

（二） 入口js脚本：src/main.js

（三）顶层组件：src/App.vue

（四）路由：src/router/index.js 

一、程序入口

（一）入口页面 index.html

查看源代码

这正是srb-admin/public/index.html

 我们进入积分等级列表，查看源代码会发现仍然是index.html中的代码

 那么它是怎么实现页面的不同加载的呢？答案：通过脚本

（二） 入口js脚本：src/main.js

上面的脚本中的路径/static/js/app.js我们在文件目录中找不到，因为它是根据我们的vue文件、html文件、js文件等动态生成的，真正的文件是src/main.js

查看代码我们发现其导入了很多模块，就像我们后端创建springboot项目，使用某些功能需要导入对于的starter一样，即导入依赖

 这里挂载element-ui可以像我们前面做例子那样直接使用<script src="https://unpkg.com/element-ui/lib/index.js"></script>导入，但是这样只能使用简单的template定义

而无法使用vue文件式的template定义 

创建Vue对象，指定渲染的是入口index.html中id为app的div

（三）顶层组件：src/App.vue

 既然创建的Vue对象将我们的app组件进行渲染，我们就去看一下App.vue

（四）路由：src/router/index.js 

有一个router-view路由出口，是进行模板template展示的 ，在router/index.js中定义了大量的路由，当我们访问对应path就会跳到对应的组件同时显示到id为app的div中

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

/* Layout */
import Layout from '@/layout'

/**
 * Note: sub-menu only appear when route children.length >= 1
 * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 *
 * hidden: true                   if set true, item will not show in the sidebar(default is false)
 * alwaysShow: true               if set true, will always show the root menu
 *                                if not set alwaysShow, when item has more than one children route,
 *                                it will becomes nested mode, otherwise not show the root menu
 * redirect: noRedirect           if set noRedirect will no redirect in the breadcrumb
 * name:'router-name'             the name is used by <keep-alive> (must set!!!)
 * meta : {
    roles: ['admin','editor']    control the page roles (you can set multiple roles)
    title: 'title'               the name show in sidebar and breadcrumb (recommend set)
    icon: 'svg-name'/'el-icon-x' the icon show in the sidebar
    breadcrumb: false            if set false, the item will hidden in breadcrumb(default is true)
    activeMenu: '/example/list'  if set path, the sidebar will highlight the path you set
  }
 */

/**
 * constantRoutes
 * a base page that does not have permission requirements
 * all roles can be accessed
 */
export const constantRoutes = [
  // 路由列表
  {
    //
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
  },

  {
    path: '/404',
    component: () => import('@/views/404'),
    hidden: true,
  },

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        name: 'Dashboard',
        component: () => import('@/views/dashboard/index'),
        meta: { title: '首页', icon: 'dashboard' },
      },
    ],
  },

  {
    path: '/core/integral-grade',
    component: Layout,
    redirect: '/core/integral-grade/list',
    name: 'coreIntegralGrade',
    meta: { title: '积分等级管理', icon: 'el-icon-s-marketing' },
    //false(默认):当父节点下只有一个子节点时，不显示父节点，直接显示子节点
    //true:任何时候都显示父节点和子节点
    alwaysShow: true,
    children: [
      {
        path: 'list',
        name: 'coreIntegralGradeList', // 每个路由的name不能相同
        component: () => import('@/views/core/integral-grade/list'), // 指向的template模板
        meta: { title: '积分等级列表' }, // 定义导航的标题
      },
      {
        path: 'create',
        name: 'coreIntegralGradeCreate',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '新增积分等级' },
      },
      {
        path: 'edit/:id', // :id表示一个占位符，表示这一部分url会是任何一个id，是动态的
        name: 'coreIntegralGradeEdit',
        component: () => import('@/views/core/integral-grade/form'),
        meta: { title: '编辑积分等级' },
        hidden: true,
      },
    ],
  },

  {
    path: '/core',
    component: Layout,
    redirect: '/core/dict/list',
    name: 'coreDict',
    meta: { title: '系统设置', icon: 'el-icon-setting' },
    alwaysShow: true,
    children: [
      {
        path: 'dict/list',
        name: '数据字典',
        component: () => import('@/views/core/dict/list'),
        meta: { title: '数据字典' },
      },
    ],
  },

  {
    path: '/example',
    component: Layout,
    redirect: '/example/table',
    name: 'Example',
    meta: { title: '例子', icon: 'el-icon-s-help' },
    children: [
      {
        path: 'table',
        name: 'Table',
        component: () => import('@/views/table/index'),
        meta: { title: '表格', icon: 'table' },
      },
      {
        path: 'tree',
        name: 'Tree',
        component: () => import('@/views/tree/index'),
        meta: { title: '树', icon: 'tree' },
      },
    ],
  },

  {
    path: '/form',
    component: Layout,
    children: [
      {
        path: 'index',
        name: 'Form',
        component: () => import('@/views/form/index'),
        meta: { title: '表单', icon: 'form' },
      },
    ],
  },
]

/**
 * asyncRoutes
 * the routes that need to be dynamically loaded based on user roles
 */
export const asyncRoutes = [
  {
    path: '/nested',
    component: Layout,
    redirect: '/nested/menu1',
    name: 'Nested',
    meta: {
      title: 'Nested',
      icon: 'nested',
    },
    children: [
      {
        path: 'menu1',
        component: () => import('@/views/nested/menu1/index'), // Parent router-view
        name: 'Menu1',
        meta: { title: 'Menu1' },
        children: [
          {
            path: 'menu1-1',
            component: () => import('@/views/nested/menu1/menu1-1'),
            name: 'Menu1-1',
            meta: { title: 'Menu1-1' },
          },
          {
            path: 'menu1-2',
            component: () => import('@/views/nested/menu1/menu1-2'),
            name: 'Menu1-2',
            meta: { title: 'Menu1-2' },
            children: [
              {
                path: 'menu1-2-1',
                component: () =>
                  import('@/views/nested/menu1/menu1-2/menu1-2-1'),
                name: 'Menu1-2-1',
                meta: { title: 'Menu1-2-1' },
              },
              {
                path: 'menu1-2-2',
                component: () =>
                  import('@/views/nested/menu1/menu1-2/menu1-2-2'),
                name: 'Menu1-2-2',
                meta: { title: 'Menu1-2-2' },
              },
            ],
          },
          {
            path: 'menu1-3',
            component: () => import('@/views/nested/menu1/menu1-3'),
            name: 'Menu1-3',
            meta: { title: 'Menu1-3' },
          },
        ],
      },
      {
        path: 'menu2',
        component: () => import('@/views/nested/menu2/index'),
        meta: { title: 'menu2' },
      },
    ],
  },

  {
    path: 'external-link',
    component: Layout,
    children: [
      {
        path: 'https://panjiachen.github.io/vue-element-admin-site/#/',
        meta: { title: 'External Link', icon: 'link' },
      },
    ],
  },

  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true },
]

const createRouter = () =>
  new Router({
    // mode: 'history', // require service support
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRoutes,
  })

const router = createRouter()

// Detail see: https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

 以下面为例, 当我们访问http://localhost:9528/login，会找到/views/login/index.vue页面进行展示

  // 路由列表
  {
    //
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true,
  },

梳理到这里，我们可以知道最外层组件是App，在App中嵌套了其他组件，当我们访问不同页面，App中的组件会变换，比如我们在登录页面，App下是login组件

那么这些 侧边栏、导航栏和主页面是如何组成的呢？

 查看src/layout/index.vue我们可以发现是在这里组装起来的

<template>
  <div :class="classObj" class="app-wrapper">
    <div
      v-if="device === 'mobile' && sidebar.opened"
      class="drawer-bg"
      @click="handleClickOutside"
    />
    <!--侧边栏-->
    <sidebar class="sidebar-container" />
    <!-- <Sidebar/> 同理 -->
    <div class="main-container">
      <div :class="{ 'fixed-header': fixedHeader }">
        <!--导航栏-->
        <navbar />
        <!-- <Navbar />  实际上是这样写，直接使用组件，但是小写也支持，所以写成上一行的写法 -->
      </div>
      <!--主内容区-->
      <app-main />
      <!-- <AppMain/> 同理 -->
    </div>
  </div>
</template>

<script>
// 导入子组件
import { Navbar, Sidebar, AppMain } from './components'
import ResizeMixin from './mixin/ResizeHandler'

export default {
  name: 'Layout',
  components: {
    //注册子组件
    Navbar,
    Sidebar,
    AppMain,
  },
  mixins: [ResizeMixin],
  computed: {
    sidebar() {
      return this.$store.state.app.sidebar
    },
    device() {
      return this.$store.state.app.device
    },
    fixedHeader() {
      return this.$store.state.settings.fixedHeader
    },
    classObj() {
      return {
        hideSidebar: !this.sidebar.opened,
        openSidebar: this.sidebar.opened,
        withoutAnimation: this.sidebar.withoutAnimation,
        mobile: this.device === 'mobile',
      }
    },
  },
  methods: {
    handleClickOutside() {
      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
    },
  },
}
</script>

<style lang="scss" scoped>
@import '~@/styles/mixin.scss';
@import '~@/styles/variables.scss';

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;
  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}
.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$sideBarWidth});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.mobile .fixed-header {
  width: 100%;
}
</style>

总结：App组件下面有layout组件、layout组件下有Sidebar、Navbar、AppMain组件

 Appmain是怎么实现内容的变换的，又是一个子路由 

 总结：入口index.html中有一个id为app的div，App.vue里导入需要的模块，创建一个根组件App，App中有一个路由出口，根据router/index.html中定义的路由进行跳转。在主页面也就是layout/index.html中将侧边栏Sidebar，导航栏Navbar和主内容区AppMain结合，这三个也是组件，AppMain中有子路由出口，对应router中index.html中的children。文章来源地址https://www.toymoban.com/news/detail-410754.html

到了这里，关于尚融宝13-后台管理系统前端架构梳理的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！