文章管理平台PC端（个人中心+侧面菜单）

在之前我们实现了注册登录功能，接下来就是管理平台侧面菜单栏以及平台首页的实现。

在实现功能之前，还是需要先整理一下实现的思路。

个人中心：目标（将用户信息存储到vuex中）

实现步骤：1、定义一个接口方法，用于请求用户信息

2、使用接口方法+actions获取用户的基本信息

3、在全局前置守卫, 做判断, 有token但是无userInfo信息, 才发请求拿用户信息

4、渲染用户信息

定义接口方法：

// 获取个人信息
export const userInfo = () => request({url: '/my/userinfo'
//没有添加请求拦截的时候，需要在这里带上请求头信息，如果在请求拦截里统一封装了请求头这里就不需要再次书写了// headers: {//   Authorization: store.state.token// }
})

使用接口方法：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import { userInfo } from '@/api/index'
Vue.use(Vuex)export default new Vuex.Store({state: {// 保存token字符串token: '',// 保存用户信息userInfo: {}// 保存菜单信息// menu: {}},getters: {// 定义并导出用户名和昵称nickname: state => state.userInfo.nickname,username: state => state.userInfo.username,user_pic: state => state.userInfo.user_pic},mutations: {// 存储token的方法updateToken (state, val) {state.token = val}},actions: {// 定义初始化用户基本信息的action函数async initUserInfo (store) {const { data: res } = await userInfo()if (res.code === 0) {store.commit('updateUserInfo', res.data)}}},modules: {},plugins: [createPersistedState()]
})
// vuex-persistedstate 对vuex内的数据进行持久化存储

全局前置守卫：

// 路由白名单
const whiteList = ['/login', 'register']
// 路由前置守卫
// next()如果强制切换路由，会再次走路由守卫再次匹配路由表
router.beforeEach((to, from, next) => {const token = store.state.token// 有token代表登录了if (token) {if (!store.state.userInfo.username) {// 有token在请求信息store.dispatch('initUserInfo')}next()} else {// 未登录，跳转到登录页if (whiteList.includes(to.path)) {next()} else {next('/login')}}
})

渲染用户信息：

<div class="user-box"><!-- 有头像信息就展示，没有就选择默认 --><img :src="user_pic" alt="" v-if="user_pic" class="img"><img class="img" src="https://img0.baidu.com/it/u=2880518663,495982857&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt="" v-else><span>欢迎{{nickname || username }}</span><!-- 直接用的方法{{$store.state.userInfo.nickname}} {{$store.getters.nickname}}--></div>

实现效果：

侧面菜单栏：1、样式布局

2、封装接口请求方法

3、调用接口，铺设数据

样式布局：

 <el-aside width="200px"><!-- 侧边栏导航菜单 --><!-- // 获取路径，相应的菜单栏高亮 --><el-menu:default-active="$route.path"class="el-menu-vertical-demo"background-color="#23262e"text-color="#fff"active-text-color="#409eff"routerunique-opened></el-menu></el-aside>

封装接口请求：

// 获取侧边栏数据
export const asideData = () => request({url: '/my/menus'
})

调用接口请求并铺设数据：

调用接口：

async  getMenu () {const { data: res } = await asideData()console.log(res)// 保存菜单this.menu = res.data}

保存接口请求的菜单数据：

data () {return {menu: []}}

铺设数据：

 <!-- 需要用template包裹 --><template v-for="item in menu"><el-menu-item :index="item.indexPath" v-if="!item.children" :key="item.indexPath"><i :class="item.icon"></i>{{item.title}}</el-menu-item><el-submenu :index="item.indexPath" v-else :key="item.indexPath"><template slot="title"><i :class="item.icon"></i><span>{{item.title}}</span></template><el-menu-item :index="item1.indexPath" v-for="item1 in item.children" :key="item1.indexPath"><i :class="item1.icon"></i>{{item1.title}}</el-menu-item></el-submenu></template>

实现效果：

文章管理平台PC端（个人中心+侧面菜单）相关推荐

文章管理平台PC端（文章分类）
今天实现的功能是文章分类和文章列表. 文章分类主要实现的是能够渲染分类列表,然后可以添加.删除.修改分类信息. 实现步骤:1.根据接口请求的数据将文章分类情况渲染在表格中 2.点击添加文章按钮,弹出添 ...
企业办公oa系统医药OA办公后台管理会议管理用户管理物料管理活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权限管理
作品介绍:企业办公oa系统&医药OA办公后台管理&会议管理&用户管理&物料管理&活动管理/Axure医药内部管理平台/web端后台管理系统原型/医药OA系统/权 ...
POLYV管理平台如何修改播放器右键菜单（右键版权修改）教程
POLYV管理平台如何修改播放器右键菜单(右键版权修改) 视频播放器可以在管理平台中自己定义右键菜单,最多可以定义显示5行信息,可以更好的让播放器与公司品牌保持一致性. 播放器设置右键菜单: 播放器页 ...
微信开放平台PC端扫码登录
最近公司给我安排一个微信登录的功能,需求是这样的: 1.登录授权点击二维码图标后,登录界面切换为如下样式(二维码),微信扫描二维码并授权,即可成功登录: 若当前账号未绑定微信账号,扫描后提示& ...
Dubbo-Admin管理平台和Zookeeper注册中心的搭建（转）
林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubb ...
《Delphi传奇》研究系列文章1：服务端控制中心（服务器网关启动器）
提示:所有的研究心得直接写在源码注释中,对照源码看注释即可学习了解传奇的流程架构.<Delphi传奇>全部源码获取可加入Delphi开发局QQ群:32422310 <Delphi传奇 ...
Qt编写物联网管理平台46-云端数据同步
一.前言在上一篇文章说的采集数据转发的基础上,针对方案一还做了云端数据同步功能,满足各式各样的用户需求.云端数据库同步,相当于把本地采集到的数据实时存储到云端,至于这些记录到了云端后什么用途,客户端 ...
Dubbo学习总结（3）——Dubbo-Admin管理平台和Zookeeper注册中心的搭建
ZooKeeper是一个分布式的,开放源码的分布式应用程序协调服务,是Google的Chubby一个开源的实现,是Hadoop和Hbase的重要组件.它是一个为分布式应用提供一致性服务的软件,提供的功 ...
PHP语言：微信开放平台PC端扫码登录
需求: 微信扫码时每次需要弹窗确认效果. 微信开放平台 :创建网站应用,绑定公众号,用于打通公众号用户数据. 注意域名填写规范,不带协议.eg:www.xxx-test.com 页面嵌套扫码登录二维码 ...

文章管理平台PC端（个人中心+侧面菜单）

文章管理平台PC端（个人中心+侧面菜单）相关推荐

最新文章

热门文章