vue3-admin商品管理后台项目(后台布局layout布局开发一)

今天继续进行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">
                        
  • 6
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mzldustu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值