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

原创

已于 2022-10-21 19:31:31 修改 · 4.6k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端 #css

于 2022-10-20 23:28:09 首次发布

本文档详细记录了使用Vue3和Element Plus开发商品管理后台项目的layout布局开发过程，包括container布局、header、menu和tag导航的创建，以及刷新、全屏、修改密码等功能的实现。此外，还介绍了如何封装通用弹框表单组件和使用Composition API简化代码。

今天继续进行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">
                        <arrow-down /