当前位置：首页 > news >正文

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

news 2025/7/31 16:17:20

开发流程

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

准备工作：

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。

查看全文

http://www.lryc.cn/news/605348.html