通过Element开发主页导航页面——Vue项目实战(二)

一、Home页面

Container 布局容器

title制作

<template>
    <div>
<!--        Contriner布局容器-->
        <el-container>
            <el-header class="homeHeader">
                <div class="title">宏信本供应链管理系统</div>
                <el-dropdown class="userInfo" @command="commandHandler">
  <span class="el-dropdown-link">
    {{user.name}}<i><img :src="user.userface" alt=""></i>
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <!--                        command:点击事件-->
                        <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>
                        <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">Aside</el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>

    export default {
        name: "Home",
        data() {
            return {
                //获取用户信息
                user: JSON.parse(window.sessionStorage.getItem("user"))
            }
        },
        methods:{
            commandHandler(cmd) {
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest('/logout');
                        //    清空登录数据
                        window.sessionStorage.removeItem("user")
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        }
    }
</script>

<style scoped>

    .homeHeader {
        background-color: #049eff;
        display: flex;
        /*竖直居中*/
        align-items: center;
        justify-content: space-between;
        padding: 0px 15px;
        box-sizing: border-box;
    }

    .title {
        font-size: 30px;
        font-family: 华文行楷;
        color: #ffffff;
    }
    .homeHeader .userInfo {
        cursor: pointer;
    }
    .el-dropdown-link img{
        width: 48px;
        height: 48px;
        border-radius: 24px;
        margin-left: 8px;
    }
    .el-dropdown-link{
        /*文字居中*/
        display: flex;
        align-items: center;
    }
</style>

登录跳转Home页

//保存用户的数据
window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
//页面跳转
//$router: 获取你当前vue对象中的对象(在main.js中)
//replace：不能点击home按钮(即返回上一页)
this.$router.replace('/home')

导航栏菜单制作

二、导航栏加载

后端返回数据格式

{
	"status": 200,
	"msg": null,
	"obj": [{
		"deleted": 0,
		"id": 2,
		"url": "/",
		"path": "/home",
		"component": "Home",
		"name": "员工资料",
		"iconCls": "fa fa-user-circle-o",
		"parentId": 1,
		"children": [{
			"deleted": 0,
			"id": 7,
			"url": null,
			"path": "/emp/basic",
			"component": "EmpBasic",
			"name": "基本资料",
			"iconCls": null,
			"parentId": 2,
			"children": null
		}]
	}]
}

前端菜单格式化

import {getRequest} from "./api";
import router from "@/router";

/**
 * 菜单格式化
 * @param router
 * @param store
 */
export const initMenu=(router,store)=> {
    //有请求数据
    if (store.state.routes.length > 0) {
        return;
    }

    getRequest("/system/config/menu").then(data=> {
        //请求到数据
        if (data.obj) {
            console.log(data.obj);
            let fmtRoutes = formatRoutes(data.obj);
            router.addRoutes(fmtRoutes);
            //初始化utils/index.js中的state.routes:[]
            store.commit('initRoutes',fmtRoutes);
            store.dispatch('connect');
        }
    })
}

export const formatRoutes=(routes)=> {
    //返回的数据
    let fmRoutes = [];
    routes.forEach(router=> {
        //批量的变量定义，赋值给router
        let {
            path,
            component,
            name,
            meta,
            iconCls,
            children
        } = router;
        //存在且为数组
        if (children && children instanceof Array) {
            children = formatRoutes(children);
        }
        let fmRouter = {
            path:path,
            name:name,
            iconCls:iconCls,
            meta:meta,
            children:children,
            //动态加载component
            component(resolve) {
                if (component.startsWith('Home')) {
                    //动态导入包(router中的index.js)
                    require(['../views/' + component + '.vue'],resolve);
                }else if (component.startsWith('Sys')) {
                    require(['../views/sys/' + component + '.vue'],resolve);
                }
            }
        }
        fmRoutes.push(fmRouter);
    })
    return fmRoutes;
}

Home菜单数据展示修改

<el-container>
                <el-aside width="200px">
                    <!-- <el-menu @select="menuClick">-->
                    <!-- unique-opened:同一时间打开一个菜单项-->
                    <el-menu router unique-opened>
                        <!--  $router.options.routes:获取index.js中的routes数组  -->
                        <!--  <el-submenu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden" :key="index">-->
                        <!--  routes指 script中的computed的routes-->
                        <el-submenu :index="index+''" v-for="(item,index) in routes" v-if="!item.hidden" :key="index">
                            <template slot="title">
                                <i style="color: #409eff;margin-right: 5px" :class="item.iconCls"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item :index="child.path" v-for="(child,indexj) in item.children" :key="indexj">{{child.name}}</el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>


<script>
    export default {
        computed: {
            routes() {
                //store/index.js中
                //console.log(this.$store.state.routes)
                return this.$store.state.routes;
            }
        }
    }
</script>

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

Vue.use(Vuex)

export default new Vuex.Store({
    //声明的变量
    state:{
        //路由数组，从服务器上加载下来的菜单项
        routes:[]
    },
    mutations:{
        initRoutes(state,data) {
            state.routes = data;
        }
    },
    actions:{

    }
})

跳转空页面创建

添加面包屑

<!--                    面包屑：图标分隔符-->
                    <el-breadcrumb separator-class="el-icon-arrow-right" v-if="this.$router.currentRoute.path != '/home'">
                        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>{{this.$router.currentRoute.name}}</el-breadcrumb-item>
                    </el-breadcrumb>
                    <div class="homeWelcome" v-if="this.$router.currentRoute.path == '/home'">
                        欢迎来到宏信本供应链管理系统！
                    </div>
                    <router-view/>

注：能力有限，还请谅解，争取早日能够写出有质量的文章！

我是皮蛋布丁，一位爱吃皮蛋的热爱运动的废铁程序猿。

感谢各位大佬光临寒舍~