今天继续进行vue3-admin商品管理后台项目开发的后台布局layout布局开发。
首先布局使用的是element plus里的container布局容器里推荐的布局方式
用于布局的容器组件,方便快速搭建页面的基本结构:
<el-container>:外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。
在src文件夹下创建layout文件夹,并且在该文件夹下创建admin.vue
,然后再layout文件夹下创建components文件夹,在该文件夹下面创建FHeader.vue(头部),FMenu.vue(侧边栏),FTagList.vue(标签导航栏部分)
编辑admin.vue
<template>
<el-container>
<el-header>
<f-header/>
</el-header>
<el-container>
<el-aside>
<f-menu/>
</el-aside>
<el-main>
<f-tag-list/>
<router-view></router-view>
</el-main>
</el-container>
</el-container>
</template>
<!-- <el-container>:外层容器。 当子元素中包含 <el-header> 或 <el-footer> 时,全部子元素会垂直上下排列, 否则会水平左右排列。
<el-header>:顶栏容器。
<el-aside>:侧边栏容器。
<el-main>:主要区域容器。
<el-footer>:底栏容器。 -->
<script setup>
import FHeader from './components/FHeader.vue'
import FMenu from './components/FMenu.vue'
import FTagList from './components/FTagList.vue'
</script>
主要是对页面的结构进行分块
然后分别编辑FHeader.vue(头部),FMenu.vue(侧边栏),FTagList.vue(标签导航栏部分),加上
<!-- 头部部分 -->
<template>
<div>
头部部分
</div>
</template>
以此类推都是这样
然后编辑router文件夹下面的index.js
import {
createRouter, createWebHashHistory } from 'vue-router'
import Index from '~/pages/index.vue'
import Login from '~/pages/login.vue'
import NotFound from '~/pages/404.vue'
// 引入主布局
import Admin from "~/layouts/admin.vue"
const routes = [{
// 根路由
path:"/",
component:Admin,
// 子路由
children:[{
path:"/",
component:Index,
meta:{
title:"后台首页"
}
}]
},{
// 登录路由
path:"/login",
component:Login,
meta:{
title:"登录页"
}
},{
//404路由 将匹配所有内容并将其放在 `$route.params.pathMatch` 下
path: '/:pathMatch(.*)*',
name: 'NotFound',
component: NotFound
}]
const router = createRouter({
history:createWebHashHistory(),
routes
})
export default router
主要是改了根路由那一部分。
这样之后再运行项目登录到主页,就会发现,分块成功了
这样我们的初步目的就达到了。
然后我们继续进行公共头部开发-样式布局:
这里直接上写好的代码了,注释很清楚:按钮以及下拉框什么的都是从element plus里面取下来的
<!-- 头部部分 -->
<template>
<div class="f-header">
<span class="logo">
<!-- logo图标 -->
<!-- mr-1就是margin-right:0.25rem -->
<el-icon class="mr-1"><ElemeFilled /></el-icon>
mzldustu商城
</span>
<!-- 折叠图标 -->
<el-icon class="icon-btn"><Fold /></el-icon>
<!-- 刷新图标 -->
<el-icon class="icon-btn"><Refresh /></el-icon>
<!-- 等价于margin-left = auto,flex布局,垂直居中-->
<div class="ml-auto flex justify-center">
<!-- 全屏图标 -->
<el-icon class="icon-btn"><FullScreen /></el-icon>
<el-dropdown class="dropdown">
<!-- flex布局,垂直居中 字体颜色 -->
<span class="flex items-center text-light-50">
<!-- 获取用户头像 头像的右外边距-->
<el-avatar class="mr-2" :size="50" :src="$store.state.user.avatar" />
<!-- 获取用户username -->
{
{
$store.state.user.username }}
<el-icon class="el-icon--right">
<arrow-down />
</el-icon>
</span>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item>修改密码</el-dropdown-item>
<el-dropdown-item>退出登录</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
</div>
</div>
</template>
<script>
</script>
<style>
.f-header {
/* flex布局,垂直居中,背景颜色,字体亮度,fixed,top:0 left:0 right:0 */
@apply flex items-center bg-indigo-700 text-light-50 fixed top-0 left-0 right-0;
height: 64px;
}
.logo {
width: 250px;
/* flex布局,垂直水平居中,字体大小xl,字体稍微瘦一点*/
@apply flex justify-center items-center text-xl font-thin;
}
/* 按钮 */
.icon-btn {
/* flex布局 水平居中 垂直居中 */
@apply flex justify-center items-center;
width: 42px;
height: 64px;
cursor: pointer;
}
/* 鼠标覆盖到按钮颜色变浅 */
.icon-btn:hover{
@apply bg-indigo-600;
}
/* 下拉菜单 */
.f-header .dropdown {
height: 64px;
cursor: pointer;
/* flex布局,垂直水平居中 左右距离 */
@apply flex justify-center items-center mx-5;
}
</style>
然后我们继续来写刷新和全屏:
首先给那两个按钮增加一个提示,就是鼠标移上去的时候会显示这是什么功能
代码实现:
<!-- 刷新图标以及它的鼠标触碰提示 -->
<el-tooltip effect="dark" content="刷新" placement="bottom">
<!-- 刷新图标 -->
<el-icon class="icon-btn" @click="handleRefresh"><Refresh /></el-icon>
</el-tooltip>
全屏功能也以此类推
然后做方法功能,另外,退出登录功能也可以迁移过来了,将之前写退出登陆的所有逻辑复制过来,然后利用element下拉栏里面的@command功能绑定方法即可。
然后刷新功能就很简单:
// 刷新方法
const handleRefresh = ()=> location.reload()
全屏功能的话,是使用vueuse里面的一个useFullscreen功能:
// 获取全屏功能里面一些方法
//是否全屏,切换
const {
isFullscreen, toggle } = useFullscreen()
然后直接在刷新图标写上它里面提供的toggle方法即可
<!-- 全屏图标 -->
<el-icon class="icon-btn" @click="toggle"><FullScreen /></el-icon>
然后此时就可以实现刷新和全屏功能了
然后我们来实现修改密码的功能:
先去看修改密码的接口,然后使用element 的抽屉组件。
先在manager.js里面写上接口方法:
// 修改密码
export function updatePassword(data){
return axios.post("/admin/updatepassword",data)
}
直接上代码了,主要是引用的login页面的表单,不过修改成了输入旧密码,输入新密码和确认密码,修改成功后退出登录然后重新登录,如果你浏览器里的token失效了,你进行一些操作的话,会直接给你退出让你先登录。
这里直接放上代码:
<!-- 头部部分 -->
<template>
<div class="f-header">
<span class="logo">
<!-- logo图标 -->
<!-- mr-1就是margin-right:0.25rem -->
<el-icon class="mr-1">
<ElemeFilled />
</el-icon>
mzldustu商城
</span>
<!-- 折叠图标 -->
<el-icon class="icon-btn">
<Fold />
</el-icon>
<!-- 刷新图标以及它的鼠标触碰提示 -->
<el-tooltip effect="dark" content="刷新" placement="bottom">
<!-- 刷新图标 -->
<el-icon class="icon-btn" @click="handleRefresh">
<Refresh />
</el-icon>
</el-tooltip>
<!-- 等价于margin-left = auto,flex布局,垂直居中-->
<div class="ml-auto flex justify-center">
<!-- 全屏图标以及它的鼠标触碰提示 -->
<el-tooltip effect="dark" content="全屏" placement="bottom">
<!-- 全屏图标 -->
<el-icon class="icon-btn" @click="toggle">
<FullScreen />
</el-icon>
</el-tooltip>
<!-- @command是element里面下拉框能触发事件回调的指令 -->
<el-dropdown class="dropdown" @command="handleCommand">
<!-- flex布局,垂直居中 字体颜色 -->
<span class="flex items-center text-light-50">
<!-- 获取用户头像 头像的右外边距-->
<el-avatar class="mr-2" :size="50" :src="$store.state.user.avatar" />
<!-- 获取用户username -->
{
{
$store.state.user.username }}
<el-icon class="el-icon--right">