后台主界面搭建

Menu.vueindex.vueMenuLogo.vueMenu.vue动态生成侧边栏的菜单新建组件导入组件MenuItem也可以加个首页动态获取数据格式此时展示不出来二级菜单的第二级main.ts全局引入效果新建文件Header.vuecollaspe.vueUserInfo.vuebredcum.vue侧边栏收缩这里涉及到两个组件Menu.vueCollaspe.vue可以通过isColla

季布，

482人浏览 · 2022-10-17 22:28:35

季布， · 2022-10-17 22:28:35 发布

index.html

在这里插入图片描述

index.ts

在这里插入图片描述

导航栏

在这里插入图片描述

Menu.vue


<template>
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>基础数据</span>
      </template>

      <el-menu-item index="1-1">院系管理</el-menu-item>
      <el-menu-item index="1-2">专业管理</el-menu-item>

      <el-menu-item index="1-3">教师管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>学生管理</span>
      </template>

      <el-menu-item index="2-1">学生信息</el-menu-item>
      <el-menu-item index="2-2">学生成绩</el-menu-item>
      <el-menu-item index="2-3">学生照片</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>学生管理</span>
      </template>

      <el-menu-item index="3-1">登录账号</el-menu-item>
      <el-menu-item index="3-2">用户角色</el-menu-item>
      <el-menu-item index="3-3">菜单管理</el-menu-item>
      <el-menu-item index="3-4">权限信息</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
</script>


<style scoped>

.el-menu-item{
    
    display: block;
    text-align: center;
}
</style>

index.vue


<script lang='ts' setup>
// 引入header 和menu组件
import HeaderVue from "./header/Header.vue";
import MenuVue from "./menu/Menu.vue";
</script>


<template>
  <el-container class="layout">
    <el-aside width="200px" class="aside"><MenuVue></MenuVue></el-aside>
    <el-container>
      <el-header class="header"><HeaderVue> </HeaderVue></el-header>
      <el-main class="main">Main</el-main>
    </el-container>
  </el-container>
</template>


<style scoped>
.layout {
  height: 100%;
}
.aside {
  background-color: aliceblue;
}
.header {
  background-color: aqua;
}
.main {
  background-color: blanchedalmond;
}
</style>

在这里插入图片描述

添加侧边栏Logo部分

在这里插入图片描述

MenuLogo.vue



<script>

</script>

<template>
    <div class="logo">

        <!-- 图片-->
    <img src="../../assets/logo_main.png" alt="Logo">
    <span class="title">学生信息管理</span>
    </div>
</template>

<style scoped>
.logo{
    background-color: #2b2f3a;
    height: 50px;
    border:none;
    line-height: 50px;
    display: flex;
    align-items: center;
    padding-left: 15px;
    color: #fff;
}
.logo img{
    width: 32px;
    height: 32px;
    margin-right: 12px;
}
.logo span{
    font-weight: 600;
    line-height: 50px;
    font-size: 16px;
}
</style>

Menu.vue


<script lang='ts' setup>
// 导入组件
import MenuLogoVue from './MenuLogo.vue'

</script>

<template>
<!--Logo区域-->
<MenuLogoVue class="layout-logo"></MenuLogoVue>


<!-- 侧边栏导航-->
  <el-menu
    active-text-color="#ffd04b"
    background-color="#545c64"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
  >
    <el-sub-menu index="1">
      <template #title>
        <el-icon><location /></el-icon>
        <span>基础数据</span>
      </template>

      <el-menu-item index="1-1">院系管理</el-menu-item>
      <el-menu-item index="1-2">专业管理</el-menu-item>

      <el-menu-item index="1-3">教师管理</el-menu-item>
    </el-sub-menu>
    <el-sub-menu index="2">
      <template #title>
        <el-icon><location /></el-icon>
        <span>学生管理</span>
      </template>

      <el-menu-item index="2-1">学生信息</el-menu-item>
      <el-menu-item index="2-2">学生成绩</el-menu-item>
      <el-menu-item index="2-3">学生照片</el-menu-item>
    </el-sub-menu>

    <el-sub-menu index="3">
      <template #title>
        <el-icon><location /></el-icon>
        <span>学生管理</span>
      </template>

      <el-menu-item index="3-1">登录账号</el-menu-item>
      <el-menu-item index="3-2">用户角色</el-menu-item>
      <el-menu-item index="3-3">菜单管理</el-menu-item>
      <el-menu-item index="3-4">权限信息</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>

<script>
</script>


<style scoped>
.el-menu-item {
  display: block;
  text-align: center;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 230px;
  min-height: 400px;
}

.el-menu {
  border-right: none;
}

.el-menu-item {
  color: #f4f4f5 !important;
}

:deep(.el-sub-menu .el-sub-menu__title) {
  color: #f4f4f5 !important;
}
/* .el-submenu .is-active .el-submenu__title {
  border-bottom-color: #1890ff;
} */
:deep(.el-menu .el-menu-item) {
  color: #bfcbd9;
}

/* 菜单点中文字的颜色 */
:deep(.el-menu-item.is-active) {
  color: #409eff !important;
}
/* 当前打开菜单的所有子菜单颜色 */
:deep(.is-opened .el-menu-item) {
  background-color: #1f2d3d !important;
}
/* 鼠标移动菜单的颜色 */
:deep(.el-menu-item:hover) {
  background-color: #001528 !important;
}

/* Logo CSS部分的动画 */
@keyframes logoAnimation {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1);
  }
  100% {
    transform: scale(1);
  }
}

.layout-logo {
  animation: logoAnimation 1s ease-out;
}
</style>

动态生成侧边栏的菜单
新建组件
在这里插入图片描述
导入组件

MenuItem

<script lang='ts' setup>
</script>



<template>
<el-menu-item index="0"><span>首页</span></el-menu-item>
  <el-sub-menu index="1">
    <template #title>
      <el-icon><location /></el-icon>
      <span>基础数据</span>
    </template>

    <el-menu-item index="1-1">院系管理</el-menu-item>
    <el-menu-item index="1-2">专业管理</el-menu-item>

    <el-menu-item index="1-3">教师管理</el-menu-item>
  </el-sub-menu>
  <el-sub-menu index="2">
    <template #title>
      <el-icon><location /></el-icon>
      <span>学生管理</span>
    </template>

    <el-menu-item index="2-1">学生信息</el-menu-item>
    <el-menu-item index="2-2">学生成绩</el-menu-item>
    <el-menu-item index="2-3">学生照片</el-menu-item>
  </el-sub-menu>

  <el-sub-menu index="3">
    <template #title>
      <el-icon><location /></el-icon>
      <span>学生管理</span>
    </template>

    <el-menu-item index="3-1">登录账号</el-menu-item>
    <el-menu-item index="3-2">用户角色</el-menu-item>
    <el-menu-item index="3-3">菜单管理</el-menu-item>
    <el-menu-item index="3-4">权限信息</el-menu-item>
  </el-sub-menu>
</template>

<style scoped>
.el-menu-item {
    display: block;
    text-align: center;
    padding-right: 80px;
}
</style>

在这里插入图片描述

也可以加个首页
在这里插入图片描述

在这里插入图片描述

动态获取数据格式
在这里插入图片描述

<script lang='ts' setup>
// 导入基本的模块
import {reactive} from 'vue';

// 初始化数据
let menuList = reactive([
     {
    path: "/",
    meta: {
      title: "首页",
      icon: "HomeFilled",
    },
  },
  {
    path: "/baisc",
    meta: {
      title: "基础数据",
      icon: "Setting",
    },
    children: [
      {
        path: "/basic/faculty",
        meta: {
          title: "院系信息",
          icon: "Ship",
        },
      },
      {
        path: "/basic/major",
        meta: {
          title: "专业信息",
          icon: "ShoppingBag",
        },
      },
      {
        path: "/basic/teacher",
        meta: {
          title: "教师信息",
          icon: "ShoppingCartFull",
        },
      },
    ],
  },

  {
    path: "/student",
    meta: {
      title: "学生管理",
      icon: "UserFilled",
    },
    children: [
      {
        path: "/student/info",
        meta: {
          title: "学生信息",
          icon: "VideoCameraFilled",
        },
      },
      {
        path: "/student/exam",
        meta: {
          title: "考试信息",
          icon: "OfficeBuilding",
        },
      },
      {
        path: "/student/image",
        meta: {
          title: "学生照片",
          icon: "TakeawayBox",
        },
      },
    ],
  },
  {
    path: "/user",
    meta: {
      title: "用户角色",
      icon: "Ticket",
    },
    children: [
      {
        path: "/user/account",
        meta: {
          title: "登录账号",
          icon: "Coordinate",
        },
      },
      {
        path: "/user/roles",
        meta: {
          title: "角色信息",
          icon: "CreditCard",
        },
      },
      {
        path: "/user/menu",
        meta: {
          title: "菜单管理",
          icon: "DeleteLocation",
        },
      },
      {
        path: "/user/permission",
        meta: {
          title: "权限管理",
          icon: "Goods",
        },
      },
    ],
  },

])
</script>


<template>

    <template v-for="menu in menuList"> 
        <el-sub-menu v-if="menu.children && menu.children.length>0" :index="menu.path" :key="menu.path">
            <template #title>
                <span>{{menu.meta.title}}</span>
            </template>
        </el-sub-menu>

        <el-menu-item v-else :index="menu.path" :key="menu.path">
            <span>{{menu.meta.title}}</span>
        </el-menu-item>

    </template>

</template>

<style scoped>
.el-menu-item {
    display: block;
    text-align: center;
    padding-right: 80px;
}
</style>



<!--
<el-menu-item index="0"><span>首页</span></el-menu-item>
  <el-sub-menu index="1">
    <template #title>
      <el-icon><location /></el-icon>
      <span>基础数据</span>
    </template>

    <el-menu-item index="1-1">院系管理</el-menu-item>
    <el-menu-item index="1-2">专业管理</el-menu-item>

    <el-menu-item index="1-3">教师管理</el-menu-item>
  </el-sub-menu>
  <el-sub-menu index="2">
    <template #title>
      <el-icon><location /></el-icon>
      <span>学生管理</span>
    </template>

    <el-menu-item index="2-1">学生信息</el-menu-item>
    <el-menu-item index="2-2">学生成绩</el-menu-item>
    <el-menu-item index="2-3">学生照片</el-menu-item>
  </el-sub-menu>

  <el-sub-menu index="3">
    <template #title>
      <el-icon><location /></el-icon>
      <span>学生管理</span>
    </template>

    <el-menu-item index="3-1">登录账号</el-menu-item>
    <el-menu-item index="3-2">用户角色</el-menu-item>
    <el-menu-item index="3-3">菜单管理</el-menu-item>
    <el-menu-item index="3-4">权限信息</el-menu-item>
  </el-sub-menu> 
  
  -->

此时展示不出来二级菜单的第二级
在这里插入图片描述


<template>

    <template v-for="menu in menuList"> 
        <el-sub-menu v-if="menu.children && menu.children.length>0" :index="menu.path" :key="menu.path">
            <template #title>
                <span style="padding-left:40px">{{menu.meta.title}}</span>
            </template>

            <!-- 展示二级菜单的第二层 -->
            <template v-for="child in menu.children">
                    <el-menu-item :index="child.path" >  
                        <span>{{child.meta.title}}</span>
                    </el-menu-item>
                </template>

        </el-sub-menu>

        <el-menu-item v-else :index="menu.path" :key="menu.path">
            <span>{{menu.meta.title}}</span>
        </el-menu-item>

    </template>
</template>

在这里插入图片描述

为菜单加上图标

npm install @element-plus/icons-vue

main.ts全局引入

import * as Icons from '@element-plus/icons-vue' // 导入所有的icon的图标

//遍历所有的icon 把每个icon图标以组件的方式加载到app中
Object.keys(Icons).forEach((key) => {
    app.component(key, Icons[key])
})

在这里插入图片描述

<script lang='ts' setup>
// 导入基本的模块
import { reactive } from "vue";

// 初始化数据
let menuList = reactive([
  {
    path: "/",
    meta: {
      title: "首页",
      icon: "HomeFilled",
    },
  },
  {
    path: "/baisc",
    meta: {
      title: "基础数据",
      icon: "Setting",
    },
    children: [
      {
        path: "/basic/faculty",
        meta: {
          title: "院系信息",
          icon: "Ship",
        },
      },
      {
        path: "/basic/major",
        meta: {
          title: "专业信息",
          icon: "ShoppingBag",
        },
      },
      {
        path: "/basic/teacher",
        meta: {
          title: "教师信息",
          icon: "ShoppingCartFull",
        },
      },
    ],
  },

  {
    path: "/student",
    meta: {
      title: "学生管理",
      icon: "UserFilled",
    },
    children: [
      {
        path: "/student/info",
        meta: {
          title: "学生信息",
          icon: "VideoCameraFilled",
        },
      },
      {
        path: "/student/exam",
        meta: {
          title: "考试信息",
          icon: "OfficeBuilding",
        },
      },
      {
        path: "/student/image",
        meta: {
          title: "学生照片",
          icon: "TakeawayBox",
        },
      },
    ],
  },
  {
    path: "/user",
    meta: {
      title: "用户角色",
      icon: "Ticket",
    },
    children: [
      {
        path: "/user/account",
        meta: {
          title: "登录账号",
          icon: "Coordinate",
        },
      },
      {
        path: "/user/roles",
        meta: {
          title: "角色信息",
          icon: "CreditCard",
        },
      },
      {
        path: "/user/menu",
        meta: {
          title: "菜单管理",
          icon: "DeleteLocation",
        },
      },
      {
        path: "/user/permission",
        meta: {
          title: "权限管理",
          icon: "Goods",
        },
      },
    ],
  },
]);
</script>


<template>
  <template v-for="menu in menuList">
    <el-sub-menu
      v-if="menu.children && menu.children.length > 0"
      :index="menu.path"
      :key="menu.path"
    >
      <template #title style="padding-left: 40px">
        <el-icon>
          <component class="icon" :is="menu.meta.icon"> </component>
        </el-icon>
        <span >{{ menu.meta.title }}</span>
      </template>

      <!-- 展示二级菜单的第二层 -->
      <template v-for="child in menu.children">
        <el-menu-item :index="child.path">
          <el-icon>
            <component class="icon" :is="child.meta.icon"> </component>
          </el-icon>

          <span>{{ child.meta.title }}</span>
        </el-menu-item>
      </template>
    </el-sub-menu>
    <!-- 否则是一级菜单,直接新建 el-menu-item -->
    <el-menu-item v-else :index="menu.path" :key="menu.path">
      <el-icon>
        <component class="icon" :is="menu.meta.icon"> </component>
      </el-icon>

      <span>{{ menu.meta.title }}</span>
    </el-menu-item>
  </template>
</template>

<style scoped>
.el-menu-item {
  display: block;
  text-align: center;
  padding-right: 80px;
}
</style>

效果
在这里插入图片描述

header区域基本布局

在这里插入图片描述

新建文件
在这里插入图片描述

Header.vue


<script lang="ts" setup>

// 导入vue组件
import CollapeVue from "./Collaspe.vue"
import BredCumVue from './BredCum.vue'
 import UserInfoVue from "./UserInfo.vue"

</script>

<template>
 <div style="display: flex; align-items: center">
    <CollapeVue></CollapeVue>
    <BredCumVue></BredCumVue>
  </div>
  <UserInfoVue></UserInfoVue>
</template>

<style scoped>

</style>

collaspe.vue

<script lang="ts" setup>

</script>

<template>
    <!-- 使用全局图标 -->
    <el-icon>
        <component class="icons" is="Fold"></component>
    </el-icon>
    
</template>

<style scoped>
.el-icon{
    font-size: 22px;
}

</style>

UserInfo.vue

<script lang="ts" setup>
</script>

<template>
  <el-dropdown>
    <span class="el-dropdown-link">
      <el-icon style="marigin-right: 10px"><UserFilled /></el-icon>
      <span>李璇</span>
      <el-icon class="el-icon--right" style="marigin-left: 10px">
        <arrow-down />
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item>用户信息</el-dropdown-item>
        <el-dropdown-item>更改密码</el-dropdown-item>
        <el-dropdown-item>安全退出</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
</style>

在这里插入图片描述

bredcum.vue

<script lang="ts" setup>

</script>

<template>

  <el-breadcrumb separator="/">
    <el-breadcrumb-item >首页</el-breadcrumb-item>
    <el-breadcrumb-item>基础数据</el-breadcrumb-item>
    <el-breadcrumb-item>院系管理</el-breadcrumb-item>
  </el-breadcrumb>
</template>

<style scoped>

</style>

侧边栏收缩

这里涉及到两个组件Menu.vue Collaspe.vue
可以通过isCollapse true或false进行控制

在这里插入图片描述

父子组件传参
在这里插入图片描述

header.vue 父组件
在这里插入图片描述
UserInfo.vue 子组件

通俗的说就是一个共享的库，只要把数据放进去，其它的组件就是从里面拿
在这里插入图片描述

在这里插入图片描述

我们这边用的是兄弟组件
在这里插入图片描述

安装vuex

npm install vuex@next --save

新建文件
在这里插入图片描述
index.ts

// 导入vuex模块
import { changeGlobalNodesTarget } from "element-plus/es/utils";
import { createStore } from "vuex";

// 定义存储数据的结构 ---实体类
interface MyState{
    collapse:boolean,  //控制侧边栏的收缩
}

//创建一个store对象
export const store = createStore<MyState>({
    // state  存储了具体的值
    state:{
        collapse:false
    },
    // mutations  修改state中值的函数
    mutations:{
        // 修改collapse的值
        setCollapse(state:MyState,collapse:boolean){
            state.collapse=collapse
        }
    },
    // getter  获取state值中的函数
    getters:{
        getCollapse(state:MyState){
            return state.collapse
        }
    }
})

// 暴露
export default store

main.js中全局引用

import store from './store' //导入创建的store对象

//应用
const app = createApp(App)// 使用vue导入的createApp函数创建app.vue组件,并放置到index.html的id=app的div中
app.use(ElemetPlus)
app.use(router)
app.use(store)
app.mount('#app')

Menu.vue

// 导入vue
import {ref,computed} from "vue"
// 导入usestore的方法
import {useStore} from 'vuex'
// 获取当前vuex中的store对象
const store = useStore()

//获取store->state中的collapse的值
const isCollapse = computed(()=>{
  return store.getters['getCollapse']
})


<template>
<!--Logo区域-->
<MenuLogoVue v-if="!isCollapse" class="layout-logo"></MenuLogoVue>


<!-- 侧边栏导航-->
  <el-menu
    active-text-color="#ffd04b"
    background-color="#304156"
    class="el-menu-vertical-demo"
    default-active="2"
    text-color="#fff"
    :collapse='isCollapse'
  >

  </el-menu>
</template>

Collaspe.vue

<script lang="ts" setup>
import {ref,computed} from "vue"
// 导入图标
import {Fold,Expand} from "@element-plus/icons-vue"
// 导入vue组件
import Components from "../../layout/Index.vue"

// 导入useStore
import {useStore} from 'vuex'
// 获取store对象
const store = useStore()
// 获取collapse值
const isCollapse = computed(()=>{
    return store.getters['getCollapse']
})


</script>

<template>
    <!-- 使用全局图标 -->
    <el-icon>
        <component class="icons" :is="isCollapse ? Expand : Fold" ></component>
    </el-icon>
    
</template>

<style scoped>
.el-icon{
    font-size: 22px;
}

</style>

完整代码

<script lang="ts" setup>


import {ref,computed} from "vue"
// 导入图标
import {Fold,Expand} from "@element-plus/icons-vue"
// 导入vue组件
import Components from "../../layout/Index.vue"

// 导入useStore
import {useStore} from 'vuex'
// 获取store对象
const store = useStore()

// 定义一个响应式的变量
const localCollapse = ref(false)

// 获取collapse值
const isCollapse = computed(()=>{
    // 赋值localCollapse
    localCollapse.value = store.getters["getCollapse"]
    return store.getters['getCollapse']
})

// 定义函数实现修改
const changeCollapse=()=>{
    // 更改localCollapse的值 取反
    localCollapse.value =! localCollapse.value;
    // 修改store-->state中的collapse
    store.commit("setCollapse",localCollapse.value)
}

</script>

<template>
    <!-- 使用全局图标 -->
    <el-icon>
        <component class="icons" :is="isCollapse ? Expand : Fold" @click="changeCollapse"></component>
    </el-icon>
    
</template>

<style scoped>
.el-icon{
    font-size: 22px;
}

</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^