Tlias 案例-整体布局（前端）

开发流程

前端开发和后端开发是一样的，都需要阅读接口文档。 

准备工作： 

 1：导入项目中准备的基础过程到 VsCode。

2：启动前端项目，访问该项目

3：熟悉一下基本的布局

<script setup>

</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- Header 区域 -->
      <el-header class="header">
        <span class="title">Tlias智能学习辅助系统</span>
        <span class="right_tool">
          <a href="">
            <el-icon><EditPen /></el-icon> 修改密码 &nbsp;&nbsp;&nbsp; |  &nbsp;&nbsp;&nbsp;
          </a>
          <a href="">
            <el-icon><SwitchButton /></el-icon> 退出登录
          </a>
        </span>
      </el-header>
      
      <el-container>
        <!-- 左侧菜单 -->
        <el-aside width="200px" class="aside">
          左侧菜单栏
        </el-aside>
        
        <el-main>
          右侧核心展示区域
        </el-main>
      </el-container>
      
    </el-container>
  </div>
</template>

<style scoped>
.header {
  background-image: linear-gradient(to right, #00547d, #007fa4, #00aaa0, #00d072, #a8eb12);
}

.title {
  color: white;
  font-size: 40px;
  font-family: 楷体;
  line-height: 60px;
  font-weight: bolder;
}

.right_tool{
  float: right;
  line-height: 60px;
}

a {
  color: white;
  text-decoration: none;
}

.aside {
  width: 220px;
  border-right: 1px solid #ccc;
  height: 730px;
}
</style>

<el - container> ：外部容器

<el - header>：顶栏容器

<el - aside>：侧边栏容器

<el - main>：主要区域容器

<el - footer>：底栏容器

左端动态菜单

我们首先实现这个菜单的基本样子

<!-- 左侧菜单栏 -->
<el-menu>
  <!-- 首页菜单 -->
  <el-menu-item index="/index">
    <el-icon><Promotion /></el-icon> 首页
  </el-menu-item>
  
  <!-- 班级管理菜单 -->
  <el-sub-menu index="/manage">
    <template #title>
      <el-icon><Menu /></el-icon> 班级学员管理
    </template>
    <el-menu-item index="/clazz">
      <el-icon><HomeFilled /></el-icon>班级管理
    </el-menu-item>
    <el-menu-item index="/stu">
      <el-icon><UserFilled /></el-icon>学员管理
    </el-menu-item>
  </el-sub-menu>
  
  <!-- 系统信息管理 -->
  <el-sub-menu index="/system">
    <template #title>
      <el-icon><Tools /></el-icon>系统信息管理
    </template>
    <el-menu-item index="/dept">
      <el-icon><HelpFilled /></el-icon>部门管理
    </el-menu-item>
    <el-menu-item index="/emp">
      <el-icon><Avatar /></el-icon>员工管理
    </el-menu-item>
  </el-sub-menu>

  <!-- 数据统计管理 -->
  <el-sub-menu index="/report">
    <template #title>
      <el-icon><Histogram /></el-icon>数据统计管理
    </template>
    <el-menu-item index="/empReport">
      <el-icon><InfoFilled /></el-icon>员工信息统计
    </el-menu-item>
    <el-menu-item index="/stuReport">
      <el-icon><Share /></el-icon>学员信息统计
    </el-menu-item>
    <el-menu-item index="/log">
      <el-icon><Document /></el-icon>日志信息统计
    </el-menu-item>
  </el-sub-menu>
</el-menu>

 然后我们实现其动态效果,（点哪就跳转到其对应的页面），我们要用到 Vue Router。

Vue Router 介绍：

Vue Router：Vue 的官方路由。为 Vue 提供富有表现力，可配置的，方便的路由。

Vue 中的路由：路径 与 组件 的对应关系。

组成：
Router 实例：路由实例，基于 createRouter 函数创建，维护了应用的路由信息。

<router - link>：路由链接组件，浏览器会解析成 <a>（超链接）。

<router - view>：动态视图组件，用来渲染与展示与路由路径对应的组件

我们如果要用这玩意的话，在创建 Vue 工程的时候记得选 Yes。 

我们接下来正式开始实现：
首先我们要完成的功能是：点击对应菜单访问对应路径，这个功能很好实现，只需要在

<el menu> 这个标签中，将 router 设置为 true 即可。

<el-menu router = "true">

具体原理，可以看一下官方给的文档

下一步我们就要展示与这个 路径 对应的 组件了。在 router/index.js 下配置

import { createRouter, createWebHistory } from 'vue-router'
import ClazzView from '../views/clazz/index.vue'
import DeptView from '../views/dept/index.vue'
import EmpView from '../views/emp/index.vue'
import IndexView from '../views/index/index.vue'
import LayoutView from '../views/layout/index.vue'
import LogView from '../views/log/index.vue'
import LoginView from '../views/login/index.vue'
import EmpReportView from '../views/report/emp/index.vue'
import stuReportView from '../views/report/stu/index.vue'
import StuView from '../views/student/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
     { path: '/index', name: 'index',component: IndexView },
     { path: '/login', name: 'login',component: LoginView },
     { path: '/log', name: 'log',component: LogView },
     { path: '/layout', name: 'layout',component: LayoutView },
     { path: '/clazz', name: 'clazz',component: ClazzView },
     { path: '/emp', name: 'emp',component: EmpView },
     { path: '/empReport', name: 'empReport',component: EmpReportView },
     { path: '/stuReport', name: 'stuReport',component: stuReportView },
     { path: '/dept', name: 'dept',component: DeptView },
     { path: '/stu', name: 'stu',component: StuView },
  ]
})

export default router

 注意这里的 name 不要重名了，不然会冲突出 bug。

最后我们要把组件展示在我们要求它展示的地方，也就是在我们要展示的地方放上我们的 路由展示组件，这里我们展示到右侧。

        <el-main>
          <!-- 右侧核心展示区域 -->
           <router-view></router-view>
        </el-main>

这里还有个 bug，就是我们的登录页面也会展示到右测的区域，因为我们在 App.vue 里把 Layout 写死了，我们这里直接用路由展示组件

<script setup>
//引入views/layout/index.vue命名为Layout
import Layout from "@/views/layout/index.vue";
</script>

<template>
  <router-view></router-view>
</template>

<style scoped>

</style>

但是这个登录界面的 bug 解决了，我们登录之后的界面又出现了 bug，我们会发现本该展示在右边的界面占领了整个界面，我们甚至连左侧的菜单都看不见了，要解决这个问题，我们需要用到一个新技术 -- 路由嵌套

import { createRouter, createWebHistory } from 'vue-router'
import ClazzView from '../views/clazz/index.vue'
import DeptView from '../views/dept/index.vue'
import EmpView from '../views/emp/index.vue'
import IndexView from '../views/index/index.vue'
import LayoutView from '../views/layout/index.vue'
import LogView from '../views/log/index.vue'
import LoginView from '../views/login/index.vue'
import EmpReportView from '../views/report/emp/index.vue'
import stuReportView from '../views/report/stu/index.vue'
import StuView from '../views/stu/index.vue'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: '',
      component: LayoutView,
      redirect: '/index', // 重定向到首页（当我路径为空的时候）
      children:[
        { path: 'index', name: 'index',component: IndexView },
        { path: 'log', name: 'log',component: LogView },
        { path: 'layout', name: 'layout',component: LayoutView },
        { path: 'clazz', name: 'clazz',component: ClazzView },
        { path: 'emp', name: 'emp',component: EmpView },
        { path: 'empReport', name: 'empReport',component: EmpReportView },
        { path: 'stuReport', name: 'stuReport',component: stuReportView },
        { path: 'dept', name: 'dept',component: DeptView },
        { path: 'stu', name: 'stu',component: StuView },
      ]
    },
    { path: '/login', name: 'login',component: LoginView },
  ]
})

export default router

代码还是比较好理解的，就是将除了 登录部分的路由和组件 都写到一个 children 集合里，这样当我们访问到 ' / ' 的时候，就会先展示我们的整体布局 LayoutView，然后会进入我们的 children 集合里展示我们访问的 path 和对应的 component。