后台管理系统-前端3

于 2022-04-14 21:33:56 发布
阅读量206 收藏
点赞数
分类专栏： vue 后台管理项目 文章标签： vue 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_59658944/article/details/124163661
版权

参考样式：
在这里插入图片描述
编写内容分为：侧栏抽屉、中间页和顶部个人信息。

分析：
在这里插入图片描述

使用的框架是element-ui里面的第五个（ps，想要什么样式自己到组件官网找https://element.eleme.cn/#/zh-CN/component/container）：
在这里插入图片描述

框架代码：

<el-container>
  <el-aside width="200px">Aside</el-aside>
  <el-container>
    <el-header>Header</el-header>
    <el-main>Main</el-main>
  </el-container>
</el-container>

1.顶部个人信息编写

1.个人中心以及退出

在这里插入图片描述
这些是都是写在src/views/Home.vue文件下的

  <strong>Vue后台管理系统</strong>

                <div class="head-avatar">
                    <!--                    头像-->
                    <meta name="referrer" content="no-referrer" />
                    <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>
                    <!--                        下拉菜单-->
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        {{userInfo.username}}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <router-link :to="{name:'UserCenter'}">个人中心</router-link>
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <!--                    链接-->
                    <el-link href="链接地址，自己找需要的放">个人网站</el-link>
                    <el-link href="链接地址，自己找需要的放" target="_blank">博客</el-link>
                </div>
            </el-header>

2.退出

下面是退出的js代码

//退出登录的请求的方法
            loginOut(){
                    //清除信息
                    localStorage.clear();
                    sessionStorage.clear();
                    //清除登录时的状态信息，避免再次登录,这是在store里面定义的方法
                    this.$store.commit("reSetState")
                    //跳到登录页面
                    this.$router.replace('/login')
            }

需要在/store/index.js文件下好reSetState的方法：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)


export default new Vuex.Store({
  state: {
    //状态存储,不能直接操作
    token:''
  },
  mutations: {

    //设置token状态的方法
    SET_TOKEN:(state,token)=>{
      state.token = token;
      localStorage.setItem("token",token)
    },
    //清除信息的方法
    reSetState:(state=>{
      state.token='';
    })
  },
  actions: {
  },
  modules: {
  }
})

3.综合代码

整个Home.vue的文件的代码参考：

<template>
    <el-container>
        <!--        侧边栏-->
        <el-aside width="200px">
            <!--            导航菜单栏-->
            <SideMenu></SideMenu>
        </el-aside>
        <el-container>
            <el-header>
                <strong>Vue后台管理系统</strong>

                <div class="head-avatar">
                    <!--                    头像-->
                    <meta name="referrer" content="no-referrer" />
                    <el-avatar size="medium" :src="userInfo.avatar"></el-avatar>
                    <!--                        下拉菜单-->
                    <el-dropdown>
                      <span class="el-dropdown-link">
                        {{userInfo.username}}}<i class="el-icon-arrow-down el-icon--right"></i>
                      </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>
                                <router-link :to="{name:'UserCenter'}">个人中心</router-link>
                            </el-dropdown-item>
                            <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>

                    <!--                    链接-->
                    <el-link href="https://space.bilibili.com/381369965?spm_id_from=333.1007.0.0" target="_blank">个人网站</el-link>
                    <el-link href="https://blog.youkuaiyun.com/qq_59658944?spm=1000.2115.3001.5343" target="_blank">博客</el-link>
                </div>
            </el-header>
            <el-main>
<!--                index子页的内容-->
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
    import SideMenu from "./inc/SideMenu";

    export default {
        name: "Home",
        components:{
            SideMenu,
        },
        data(){
            return{
                //用户的信息
                userInfo:{
                    id:"", //用户的id
                    username:"",//用户名
                    avatar:"",//头像信息
                }
            }
        },
        created() {
            //调用方法获取数据
            this.getUserInfo();
        },
        methods:{
            //获取用户信息
            getUserInfo(){
                this.$axios.get("/sys/userInfo").then(res=>{
                    console.log(res)
                    //用户信息传递到前端userInfo
                    this.userInfo =res.data.data;
                })
            },
            //退出登录的请求
            loginOut(){
                    //清除信息
                    localStorage.clear();
                    sessionStorage.clear();
                    //清除登录时的状态信息，避免再次登录,这是在store里面定义的方法
                    this.$store.commit("reSetState")
                    //跳到登录页面
                    this.$router.replace('/login')
            }
        },
    }
</script>

<style scoped>
    /*    框架页面的样式*/
    .el-container{
        padding: 0;
        margin: 0;
        height: 100vh;
    }
    /*头像、链接的样式*/
    .head-avatar{
        float: right;
        /*宽度*/
        width: 210px;
        display: flex;
        justify-content: space-around;
        /*上下居中*/
        align-items: center;
    }
    /*触发鼠标变成手势的样式*/
    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    /* !*菜单*!
     .el-menu-vertical-demo{
         height: 100vh;
     }*/
    /*    组件的样式代码*/
    .el-header{
        /*header的背景颜色*/
        background-color: #0aa3a4;
        color: #333;
        text-align: center;
        line-height: 60px;
    }

    /*导航栏设置*/
    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        line-height: 200px;
    }

    /*主页中间内容显示*/
    .el-main {
        background-color: #E9EEF3;
        text-align: center;
    }

    .el-dropdown-link {
        cursor: pointer;
        color: #409EFF;
    }
    .el-icon-arrow-down {
        font-size: 12px;
    }
/*    去掉连接道下划线*/
    a{
        text-decoration: none;
    }
</style>

2.侧栏抽屉编写

侧栏抽象是主页抽取出来写在SideMenu.vue中的，
在Home中引用这个组件显示在侧栏中。
Home.vue中侧栏的代码位置：

 <el-aside width="200px">
            <!--            导航菜单栏-->
            <SideMenu></SideMenu>
        </el-aside>

需要导入SideMenu到Home的组件中（基础知识不用解释了吧）

import SideMenu from "./inc/SideMenu";

    export default {
        name: "Home",
        components:{
            SideMenu,
        },
    }

SideMenu.vue代码

<template>
    <el-menu
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
    >
        <router-link to="/index">
            <el-menu-item index="Index">
                <template slot="title">
                    <i class="el-icon-s-home"></i>
                    <span slot="title">首页</span>
                </template>
            </el-menu-item>
        </router-link>

        <el-submenu index="1">
            <template slot="title">
                <i class="el-icon-s-operation"></i>
                <span>系统管理</span>
            </template>

            <router-link to="/sys/users">
            <el-menu-item index="1-1">
                <template slot="title">
                    <i class="el-icon-s-custom"></i>
                    <span slot="title">用户管理</span>
                </template>
            </el-menu-item>
            </router-link>

            <router-link to="/sys/roles">
            <el-menu-item index="1-2">
                <template slot="title">
                    <i class="el-icon-rank"></i>
                    <span slot="title">角色管理</span>
                </template>
            </el-menu-item>
            </router-link>

            <router-link to="/sys/menus">
            <el-menu-item index="1-3">
                <template slot="title">
                    <i class="el-icon-menu"></i>
                    <span slot="title">菜单管理</span>
                </template>
            </el-menu-item>
            </router-link>
        </el-submenu>
        <el-submenu index="2">
            <template slot="title">
                <i class="el-icon-s-tools"></i>
                <span>系统工具</span>
            </template>
            <el-menu-item index="2-2">
                <template slot="title">
                    <i class="el-icon-s-order"></i>
                    <span slot="title">数字字典</span>
                </template>
            </el-menu-item>
        </el-submenu>
    </el-menu>
</template>

<script>
    export default {
        name: "SideMenu"
    }
</script>

<style scoped>

    /*菜单*/
    .el-menu-vertical-demo{
        height: 100vh;
    }
</style>

改进方式：因为需要根据不同的用户显示不同的侧栏抽屉导航的菜单，有两种实现方法：
1.使用动态绑定，不同的角色绑定需要的路由。
2.使用读取菜单权限绑定，这种需要使用数据库实现绑定。

1.动态路由绑定

3.内容页面显示

侧栏这里分为三个三个功能：角色管理、菜单管理、用户管理。都属于根路径下的的子路由。分别对应了三个vue组件：Role.vue、Menu.vue、User.vue

/router/index.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Index from "../views/Index";
import Menu from "../views/sys/Menu";
import Role from "../views/sys/Role";
import User from "../views/sys/User"
import UserCenter from "../views/sys/UserCenter";

Vue.use(VueRouter)

const routes = [
  {
    //主页，Home
    path: '/',
    name: 'Home',
    component: Home,
    children:[
      {
        //内容页面index
        path: '/index',
        name: 'Index',
        component: Index
      },
      {
        //user角色管理页面
        path: '/sys/users',
        name: 'User',
        component: User
      },{
        //菜单管理
        path: '/sys/menus',
        name: 'Menu',
        component: Menu
      },{
        //内容页面index
        path: '/sys/roles',
        name: 'Role',
        component: Role
      },{
        path: '/userCenter',
        name: 'UserCenter',
        component:UserCenter
      },
    ]
  },//个人中心

  {
    //登录页面路由
    path: '/login',
    name: 'Login',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值