006-云E办首页页面

一、封装请求
二、首页页面
- 1、获取菜单接口数据
- 2、导航守卫
- 3、菜单图标
三、标题
- 1、获取用户信息
- 2、面包屑效果

一、封装请求

后端的登录接口是返回一个token，我们除了登录接口外每一次请求都要在请求头里携带这个token方便后端校验，因此我们需要对请求进行拦截。

utils 目录下的api.js

//请求拦截器
axios.interceptors.request.use(config=>{//如果存在token，请求携带这个tokenif (window.sessionStorage.getItem('tokenStr')){config.headers['Authorization'] = window.sessionStorage.getItem('tokenStr');}return config;
},error => {console.log(error);
})

修改登录请求 Login.vue


submitLogin() {this.$refs.loginForm.validate((valid) => {if (valid) {this.loading = true;this.postRequest('/login', this.loginForm).then(resp => {this.loading = false;if (resp) {//存储用户tokenconst tokenStr = resp.obj.tokenHead + resp.obj.token;window.sessionStorage.setItem('tokenStr', tokenStr);//页面跳转let path = this.$route.query.redirect;this.$router.replace((path == '/' || path == undefined) ? '/home' : path);}})} else {this.$message.error('请输入所有字段！');return false;}});}

二、首页页面

1、获取菜单接口数据

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

安装Vuex
npm install vuex --save

配置Vuex
在 src 目录下创建一个名为 store 的目录并新建一个名为 index.js 文件用来配置 Vuex

state ：全局state对象,用于保存所有组件的公共数据
getters ：监听state值的最新状态（计算属性）
mutations ：唯一可以改变state值的方法(同步执行)
actions ：异步执行mutations方法

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {routes: []},mutations: {initRoutes(state, data) {state.routes = data;}},actions: {},modules: {}
})
export default store;

修改 main.js 增加刚才配置的 store/index.js

import store from './store'new Vue({ router, store, render: h => h(App)
}).$mount('#app')

封装菜单请求工具类

后端接口返回的数据中 component 的值为String，我们需要将其转换为前端所需的对象并且我们需要将数据放入到路由的配置里。所以我们需要封装菜单请求工具类实现我们的需求。

utils 目录下新建 menus.js

export const initMenu = (router, store) => {if (store.state.routes.length > 0) {return;}getRequest('/system/cfg/menu').then(data => {if (data) {//格式化Routerlet fmtRoutes = formatRoutes(data);//添加到routerrouter.addRoutes(fmtRoutes);//将数据存入vuexstore.commit('initRoutes', fmtRoutes);//连接WebSocketstore.dispatch('connect');}})
}
---path,
component,name,iconCls,children,

2、导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中：全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。我们可以通过观察 $route 对象来应对这些变化，或使用 beforeRouteUpdate 的组件内守卫。

我们可以使用 router.beforeEach 注册一个全局前置守卫
当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。

每个守卫方法接收三个参数：
to: Route: 即将要进入的目标路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

main.js

import {initMenu} from "./utils/menu";
router.beforeEach((to, from, next)=>{
if (to.path=='/'){next()
} else {initMenu(router,store); next();
} })

Home.vue

<el-aside width="200px"><el-menu router unique-opened><el-submenu :index="index+''"v-for="(item,index) in routes" :key="index"v-if="!item.hidden"><template slot="title"><i :class="item.iconCls" style="color: #1accff;margin-right: 5px"></i><span>{{item.name}}</span></template><el-menu-item :index="children.path"v-for="(children,indexj) in item.children" :key="indexj">{{children.name}}</el-menu-item></el-submenu></el-menu>
</el-aside>

测试

3、菜单图标

我们使用了Font Awesome的图标做为菜单图标，使用前先安装Font Awesome
npm install font-awesome
导入Font Awesome (main.js)

import 'font-awesome/css/font-awesome.min.css'
<i style="color: #1accff;margin-right: 5px" :class="item.iconCls"></i>

三、标题

1、获取用户信息

之前登录时只是获取用户token，并没有获取用户信息进行展示。我们可以在全局前置守卫时获取用户信息并存储在SessionStorage 中方便使用

router.beforeEach((to, from, next) => {if (window.sessionStorage.getItem('tokenStr')) {initMenu(router, store);if (!window.sessionStorage.getItem('user')) {//判断用户信息是否存在return getRequest('/admin/info').then(resp => {if (resp) {//存入用户信息window.sessionStorage.setItem('user', JSON.stringify(resp));store.commit('INIT_ADMIN', resp);next();}})             }next(); //如果没有登录想进入某个页面，则调到登录界面} else {if (to.path == '/') {next();} else {next('/?redirect=' + to.path);// /? 问号才是传参。}}
})

在首页展示：用ElemenUI

<el-dropdown class="userInfo" @command="commandHandler"><span class="el-dropdown-link">{{user.name}}<i><img :src="user.userFace"></i></span><el-dropdown-menu slot="dropdown"><el-dropdown-item command="userinfo">个人中心</el-dropdown-item><el-dropdown-item command="setting">设置</el-dropdown-item><el-dropdown-item command="logout">注销登录</el-dropdown-item></el-dropdown-menu>        </el-dropdown>
----------------------------------------------------------------------
<script>export default {name: 'Home',data(){return{user: JSON.parse(window.sessionStorage.getItem('user'))}},computed: {routes() {return this.$store.state.routes;}},methods: {goChat() {this.$router.push('/chat');},commandHandler(command) {if (command == 'logout') {this.$confirm('此操作将注销登录, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//注销登录this.postRequest('/logout');//清空用户信息window.sessionStorage.removeItem('tokenStr');window.sessionStorage.removeItem('user');//清空菜单this.$store.commit('initRoutes', []);//跳转到登录页this.$router.replace('/')}).catch(() => {this.$message({type: 'info',message: '已取消操作'});});}if (command == 'userinfo') {this.$router.push('/userinfo');}}}}

2、面包屑效果

home.vue

<el-main><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'">欢迎来到云E办系统！</div><router-view class="homeRouterView"/>
</el-main>

006-云E办首页页面相关推荐

vue项目云e办——登录页面（一）
云e办文章目录云e办视频学习地址前端目标效果登录页面代码视频学习地址云e办视频学习地址前端目标表单可以校验是否为空,如果为空,点击登录时弹出错误提示框. 效果登录页面代码登录页 ...
B站云E办Springboot+vue——前端项目完整版（含源码）
一.项目简介项目背景:受疫情的影响,许多企业由线上办公转为线下办公.随着线上办公的人数的增多,线上办公的优点逐步凸显:通过实现工作流程的自动化.节省企业办公费用.实现绿色办公,同时提升办公效率. 项 ...
002云E办项目之登录模块
如果你没有看第一篇文章,建议你去看一下文章链接好好看每一步你可以知道什么是逆向工程你可以在这里好好学习一下登录模块由于本的sql语句放在001云E办项目创建一. 逆向工程(创建AutoGe ...
云e办（后端）——员工管理
云e办(后端)--员工管理员工表: 关联表:外键id 1.员工表:名族类型是int,所以说是通过id找到民族表[t_nation] 2.政治面貌类型是int,通过id找到政治面貌表t_politic ...
云e办前端学习笔记（十一）员工基本资料管理
前言本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...
记账APP：小哈记账4——记账首页页面的制作（1）
项目介绍: 小哈记账是一款用于记账APP,基于Android Studio开发工具,采用Java语言进行开发,同时使用litepal和阿里云数据库进行数据的增删查改,以图标的形式在App的界面上显示. ...
云e办学习笔记（三）SpringSecurity学习（一）
前言本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...
【JavaScript】小兔鲜登录页面（3）小兔鲜首页页面
小兔鲜首页页面需求: 从登录页面跳转过来之后,自动显示用户名如果点击退出,则不显示用户名步骤: 最好写个渲染函数,因为一会的退出,还需要用到 ①:如果本地存储有记录的用户名,读取本地存储数据 ...
云e办学习笔记（十五）Redis学习以及相关部署
前言本系列博客基于B站的云e办管理系统,前端和后端我都自己敲了一遍,这里做一个学习记录.云e办的原始视频链接如下:https://www.bilibili.com/video/BV1Ai4y1P7T ...

006-云E办首页页面

006-云E办首页页面

一、封装请求

二、首页页面

1、获取菜单接口数据

2、导航守卫

3、菜单图标

三、标题

1、获取用户信息

2、面包屑效果

006-云E办首页页面相关推荐

最新文章

热门文章