一、程序入口

（一）入口页面 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 sidebarbreadcrumb: 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-viewname: '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 supportscrollBehavior: () => ({ 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"><divv-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。

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

【金融项目】尚融宝项目（三）
5.管理平台前端搭建 5.1.搭建管理平台前端程序 5.1.1.vue-element-admin vue-element-admin是基于element-ui 的一套后台管理系统集成方案. GitH ...
金融项目学习——尚融宝
尚融宝欢迎关注公众号一.项目简介尚融宝是一个网络借贷信息中介服务平台,为个人投资者.个人融资用户和小微企业提供专业的线上信贷及出借撮合服务. 行业案例:人人贷 https://www.renre ...
【金融项目】尚融宝项目（一）
1.尚融宝项目简介 1.1.前言尚融宝项目是一个网络借贷信息中介服务平台,为个人投资者.个人融资用户和小微企业提供专业的线上信贷及出借撮合服务. 行业案例:人人贷 https://www.renre ...
尚融宝01-项目简介
目录一.项目简介 (一).项目名称 (二).项目介绍 (三).项目架构 (四).业务流程总结二.信用贷款平台的类别 (一).银行系 (二).国资系 (三).民营系三.业务流程 (一).投资人 ( ...
【金融项目】尚融宝项目（六）
11.访问令牌 11.1.单点登录 11.1.1.用户身份认证 11.1.1.1.单一服务器模式一般过程如下: 用户向服务器发送用户名和密码. 验证服务器后,相关数据(如用户名,用户角色等)将保存在 ...
微服务项目：尚融宝（1）（项目介绍）
从今天开始做一个全栈项目,巩固学完的springcloud,复习之前学过的ssm mp redis MQ等知识点,拿下我的第二个项目 .技术栈中未掌握部署,计划到项目后期部署的时候,再自学一波放弃幻 ...
【金融项目】尚融宝项目（四）
6.Alibaba EasyExcel 6.1.EasyExcel简介 6.1.1.Excel导入导出的应用场景 6.1.1.1.数据导入减轻录入工作量 6.1.1.2.数据导出统计信息归档 6. ...
【金融项目】尚融宝项目（九）
18.账户绑定 18.1.需求介绍 18.1.1.运行汇付宝 1.数据库 hfb.sql 2.程序 hfb 3.数据库配置 application-dev.yml 中修改数据库配置 4.启动程序端口 ...
【金融项目】尚融宝项目（十四）
27.放款 27.1.需求介绍 27.1.1.平台放款 1.需求描述标的募资时间到,平台会操作放款或撤标,如果达到放款条件则操作放款说明:撤标过程与放款过程一致,处理业务相对简单,只是将出借金额返 ...

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

一、程序入口

（一）入口页面 index.html

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

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

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

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

最新文章

热门文章

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

一、程序入口

（一）入口页面 index.html

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

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

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

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

最新文章

热门文章

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