vue-后台布局搭建

举报
林太白 发表于 2025/01/27 18:53:15 2025/01/27
【摘要】 vue后台布局搭建

后台布局搭建

搭建完了注册登录以后,接下来我们就可以进入我们的主页面搭建我们的后台布局了

1、搭建页面

☞ src=> pages => admin.vue 存放我们的后台主页部分

<template>
    <div>后台主页</div>
</template>

2、配置路由

☞ 配置好我们的路由,就可以访问我们的后台主页了

router => index.ts 里面配置路由

{
    path: "/", // 默认路由 home页面
    name: '/',
    component: () => import('@/pages/admin.vue'),
},

刷新以后,这个时候我们已经可以看到我们的后台主页

3、搭建主体框架

<template>
    <div>
    <div class="contbox">
     <div class="leftaside lnavboxshadow">
        <div class="llogo">
          LOGO
        </div>
        <div class="lnavbody">
        </div>
     </div>
     <div class="rightaside">
         <div class="rnavheader bboxshadow">
         </div>
         <div class="rnavbody lboxshadow">
              <router-view></router-view>
          </div>
     </div>
    </div>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
</script>

搭建好主体框架以后,我们就可以去配置我们的侧边栏和头部了

4、引入侧边栏和头部

侧边栏 => layout => leftAside => index.vue

头部 => layout => topNav => index.vue

然后放进去我们的主页

<template>
    <div class="pageadmin backbaige">
     <div class="page-aside-left lnavboxshadow">
        <div class="page-aside-logo">
          LOGO
        </div>
        <div class="page-aside-menu">
           <leftAside></leftAside>
        </div>
     </div>
     <div class="page-aside-right">
         <div class="page-main-head bboxshadow">
            <topNav></topNav> 
         </div>
          <el-header style="background: #fff;">头部</el-header>
         <div class="page-main-body lboxshadow" style="height: calc(100% - 180px);">
              <router-view>
                  显示页面
              </router-view>
          </div>
          <el-footer style="background: #fff;">底部</el-footer>
     </div>
    </div>
</template>

最后效果就是这样子的

5、顶部栏开发

顶部layout=> topNav => index.vue

☞ 添加一个退出登录

<template>
	<div>
        <el-button type="primary" style="margin: 20px 0px;float: right;" @click="handleLoginOut">退出登录</el-button>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import {useRouter} from 'vue-router'
import { getToken, setToken, removeToken } from '@/utils/auth'
const userStore = useUserStore()
const router=useRouter();
const handleLoginOut=()=>{
    console.log('退出登录');
    removeToken();
    location.href = '/login';
}
</script>
<style type="text/css">
</style>

☞ 简单封装顶部栏

<template>
	<div class="pagetopNav">
        <div>
            <div class="tag" style="line-height: 40px;margin: 10px 0px">{{'当前登录用户:'+userStore.name}}</div>
        </div>
        <div class="avatar-container">
            <el-dropdown @command="handleCommand" class="right-menu-item hover-effect" trigger="click">
              <div class="avatar-wrapper">
                <img :src="userStore.avatar" class="avatar-user" />
              </div>
              <template #dropdown>
                <el-dropdown-menu>
                  <router-link to="/profile">
                    <el-dropdown-item>个人中心</el-dropdown-item>
                  </router-link>
                  <el-dropdown-item>
                    <span @click="handleLoginOut">退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
         </div>
         <div></div>
	</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import {useRouter} from 'vue-router'
import useUserStore from '@/store/modules/user'
import { getToken, setToken, removeToken } from '@/utils/auth'

import { ElMessageBox } from 'element-plus'

const userStore = useUserStore()
const router=useRouter();
const handleLoginOut=()=>{
  ElMessageBox.confirm('确定注销并退出系统吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    console.log('退出登录');
    userStore.logOut().then(() => {
      location.href = '/login';
    })
  }).catch(() => { });
}

onMounted(async () => {
  useUserStore().getInfo().then(() => {
  }).catch(err => {})
});


</script>
<style type="text/css">

.pagetopNav{
 line-height: 60px;
 display: flex;justify-content: flex-end;gap:20px;
}
.avatar-wrapper{
    padding: 10px;
}
.avatar-user {
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: 10px;
}
</style>

最后的效果

【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。