用Spring Boot+Vue做微人事项目第五天

用Spring Boot Vue做微人事项目第五天

强烈推介IDEA2020.2破解激活，IntelliJ IDEA 注册码，2020.2 IDEA 激活码

用Spring Boot Vue做微人事项目系列目录

前两天做了微人事登录的前端页面和后端接口，第三个则实现了前后端接口的对接，输入正确的用户名和密码之后，成功的跳转到home页。第四天做了Home页的Title制作和下拉菜单，下拉菜单有三个选项，个人中心、设置和注销登录，还做了注销登录，点击注销登录会出现提示：“此操作将注销登录，是否继续”，点是就重新跳转到登录页面，现在我们要做的是左边的导航菜单

左边导航菜单制作

Element UI框架里面有NavMenu 导航菜单，有顶栏、侧栏和折叠的导航菜单，我们这次要用的是侧栏

 把侧栏的<el-menu>标签里面的代码拷贝到<el-aside>标签里面，显示效果如下   左侧导航栏的效果代码

代码语言：javascript复制

 <el-container>
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <template slot="title">分组一</template>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                            <el-menu-item-group title="分组2">
                                <el-menu-item index="1-3">选项3</el-menu-item>
                            </el-menu-item-group>
                            <el-submenu index="1-4">
                                <template slot="title">选项4</template>
                                <el-menu-item index="1-4-1">选项1</el-menu-item>
                            </el-submenu>
                        </el-submenu>
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">导航二</span>
                        </el-menu-item>
                        <el-menu-item index="3" disabled>
                            <i class="el-icon-document"></i>
                            <span slot="title">导航三</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">导航四</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>

 我们只需要一个一级导航，两个二级导航，所以需要删掉一些代码，删掉后的代码和效果如下：

代码语言：javascript复制

<el-container>
                <el-aside width="200px">
                    <el-menu>
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>Main</el-main>
</el-container>

 这两个选项点击是可以跳转到其他页面的，为了测试一个现在views文件夹里面新建两个vue组件，Test1.vue和Test2.vue，新建的vue组件不能直接跳转，还需要在router文件中的index.js文件里面导入才可以用

 导航栏的点击事件

在<el-menu>标签里面添加 @select="menuClick" ，然后再到methods方法里面去进行处理

代码语言：javascript复制

 <el-aside width="200px">
                    <el-menu @select="menuClick">
                        <el-submenu index="1">
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>导航一</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item index="1-1">选项1</el-menu-item>
                                <el-menu-item index="1-2">选项2</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
</el-aside>

代码语言：javascript复制

 methods: {
            menuClick(index,indexPath){
                console.log(index);
                console.log(indexPath);
            },
            commandHandler(cmd) {  //该方法有一个参数，cmd
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout"); //使用封装好的getRequest方法，参数写注销登录的地址
                        window.sessionStorage.removeItem("user")
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        }

控制台输出效果如下：

完善meunClick方法

代码语言：javascript复制

 methods: {
            menuClick(index){
                this.$router.push(index)
            },
}

 完善该menuClick方法之后，浏览器效果如下：点击选项1,就直接跳转到test1的单独页面，选项2也是

这时有人会说直接把App.vue里面的<router-view/>复制粘贴到Home.vue页面的template模板的<el-main>标签里面就行了

代码语言：javascript复制

 <el-main>
       <router-view/>
</el-main>

但是运行的效果还是会跳转到单独的test1和test2页面，其实解决方法也很容易

代码语言：javascript复制

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login
  },
  {
    path: '/home',
    name: 'Home',
    component: Home
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: '/test1',
        name: 'Test1',
        component: Test1
      },
      {
        path: '/test2',
        name: 'Test2',
        component: Test2
      }
    ]
  }

还没完，还有一点小问题，新增一个页面要修改router.vue，还需要继续添加选项，这就有点麻烦

要把index.js里面的routers地址数组动态的渲染到左边的导航栏里面去

①在<el-submenu标签里面使用v-for进行遍历所有的routers地址，然后再使用v-if判断遍历后的带有hidden属性的地址需不需要隐藏起来

②在<el-menu-item-group>标签里面用v-for进行遍历所有的子地址

代码语言：javascript复制

<el-submenu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden" :key="index">   <!--这个遍历拿到的是index.js里面的routers地址数组 -->
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{
  {item.name}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item :index="child.path" v-for="(child,index) in item.children" :key="index">{
  {child.name}}</el-menu-item>
                            </el-menu-item-group>
</el-submenu>

Element UI导航栏也可以不需要使用@select="menuClick" 点击方法，可以直接加上一个router属性即可，效果同前面一样的。

下面是详细的Home.vue代码和index.js的代码

代码语言：javascript复制

<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <div class="title">微人事</div>
                <el-dropdown class="userInfo" @command="commandHandler">  <!--@command="commandHandler" 点击菜单项触发的事件回调-->
                    <span class="el-dropdown-link">
    {
  {user.name}}<i><img :src="user.userface" alt=""></i>    <!--i标签表示目标-->
  </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item command="userInfo">个人中心</el-dropdown-item>
                        <el-dropdown-item command="setting">设置</el-dropdown-item>   <!--disabled:禁用的    divided:有分隔线-->
                        <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <el-menu @select="menuClick" router>
                        <el-submenu index="1" v-for="(item,index) in this.$router.options.routes" v-if="!item.hidden" :key="index">   <!--这个遍历拿到的是index.js里面的routers地址数组 -->
                            <template slot="title">
                                <i class="el-icon-location"></i>
                                <span>{
  {item.name}}</span>
                            </template>
                            <el-menu-item-group>
                                <el-menu-item :index="child.path" v-for="(child,index) in item.children" :key="index">{
  {child.name}}</el-menu-item>
                            </el-menu-item-group>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Home",
        data() {
            return {
                user: JSON.parse(window.sessionStorage.getItem("user"))  //这样得到的数据是字符串，要用JSON.parse方法吧字符串转换成json数据

            }
        },
        methods: {
            // menuClick(index){
            //     this.$router.push(index)
            // },
            commandHandler(cmd) {  //该方法有一个参数，cmd
                if (cmd == 'logout') {
                    this.$confirm('此操作将注销登录, 是否继续?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        this.getRequest("/logout"); //使用封装好的getRequest方法，参数写注销登录的地址
                        window.sessionStorage.removeItem("user")
                        this.$router.replace("/");
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消操作'
                        });
                    });
                }
            }
        }
    }
</script>

<style>
    .homeHeader {
        background-color: #409eff;
        display: flex;
        align-items: center; /*竖轴上居中*/
        justify-content: space-between; /*空白的地方在中间*/
        padding: 0 15px;
        box-sizing: border-box;
    }

    .title {
        font-size: 30px;
        font-family: 华文行楷;
        color: #ffffff;
    }

    .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>

代码语言：javascript复制

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login.vue'
import Home from '../views/Home.vue'
import Test1 from '../views/Test1.vue'
import Test2 from '../views/Test2.vue'


Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Login',
    component: Login,
      hidden:true  //做个标记，然后在Home.vue里面进行判断
  },
  {
    path: '/home',
    name: 'Home',
    component: Home,
      hidden: true
  },
  {
    path: '/home',
    name: '导航一',
    component: Home,
    children:[
      {
        path: '/test1',
        name: '选项1',
        component: Test1
      },
      {
        path: '/test2',
        name: '选项2',
        component: Test2
      }
    ]
  }




]

const router = new VueRouter({
  routes
})

export default router

                                                     觉得文章对自己有用，想要继续学下去的可以

ide javascript 编程算法 elementui

0 人点赞