前端学习(2455):layout处理

# 二、Layout 处理## 创建首页组件并配置路由1、创建 `src/views/home/index.vue````html
<template><div class="home-container">首页</div>
</template><script>
export default {name: 'HomeIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less"></style>```2、然后在路由表中<img src="assets/image-20200421172340709.png" alt="image-20200421172340709" style="zoom:50%;" />3、登录成功,跳转到首页测试## 创建 Layout 组件并配置路由1、创建 `src/views/layout/index.vue````html
<template><div class="layout-container"><div>顶部导航栏</div><div>侧边导航栏</div><!-- 子路由出口 --><router-view /></div>
</template><script>
export default {name: 'LayoutIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less"></style>
```2、配置 layout 路由<img src="assets/image-20200421172555035.png" alt="image-20200421172555035" style="zoom:50%;" />3、最后测试## 使用 Container 布局容器 搭建页面结构> 参考文档:[Container 布局容器](https://element.eleme.cn/#/zh-CN/component/container)```html
<template><el-container class="layout-container"><el-asideclass="aside"width="200px">Aside</el-aside><el-container><el-header class="header">Header</el-header><el-main class="main"><!-- 子路由出口 --><router-view /></el-main></el-container></el-container>
</template><script>
export default {name: 'LayoutIndex',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less">
.layout-container {position: fixed;left: 0;right: 0;top: 0;bottom: 0;
}.aside {background-color: #d3dce6;
}.header {background-color: #b3c0d1;
}.main {background-color: #e9eef3;
}
</style>
```## 处理侧边栏导航菜单1、创建 `src/views/layout/components/aside.vue````html
<template><!--el-menu-item 的 index 不能重复,确保唯一即可--><el-menuclass="nav-menu"default-active="/"background-color="#002033"text-color="#fff"active-text-color="#ffd04b"router><el-menu-item index="/"><i class="el-icon-s-home"></i><span slot="title">首页</span></el-menu-item><el-menu-item index="/article"><i class="el-icon-document"></i><span slot="title">内容管理</span></el-menu-item><el-menu-item index="/image"><i class="iconfont iconimage"></i><span slot="title">素材管理</span></el-menu-item><el-menu-item index="/publish"><i class="iconfont iconpublish"></i><span slot="title">发布文章</span></el-menu-item><el-menu-item index="/comment"><i class="iconfont iconcomment"></i><span slot="title">评论管理</span></el-menu-item><el-menu-item index="/fans"><i class="el-icon-setting"></i><span slot="title">粉丝管理</span></el-menu-item><el-menu-item index="/settings"><i class="el-icon-setting"></i><span slot="title">个人设置</span></el-menu-item></el-menu>
</template><script>
export default {name: 'AppAside',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less">
.nav-menu {.iconfont {margin-right: 10px;padding-left: 5px;}
}
</style>```2、在 layout 中加载使用侧边栏导航菜单组件<img src="assets/image-20200421173310913.png" alt="image-20200421173310913" style="zoom:50%;" />## 处理页面顶栏1、创建 `src/views/layout/components/header.vue` 组件```html
<template><div class="header-container"><div><i class="el-icon-s-fold"></i><span>江苏传智播客科技教育有限公司</span></div><el-dropdown><div class="avatar-wrap"><img class="avatar" src="http://toutiao.meiduo.site/FrvifflobfNNRM9V_ZBTI2ZaTH4n" alt=""><span>用户昵称</span><i class="el-icon-arrow-down el-icon--right"></i></div><el-dropdown-menu slot="dropdown"><el-dropdown-item>设置</el-dropdown-item><el-dropdown-item>退出</el-dropdown-item></el-dropdown-menu></el-dropdown></div>
</template><script>
export default {name: 'AppHeader',components: {},props: {},data () {return {}},computed: {},watch: {},created () {},mounted () {},methods: {}
}
</script><style scoped lang="less">
.header-container {width: 100%;height: 100%;display: flex;justify-content: space-between;align-items: center;border-bottom: 1px solid #ccc;.avatar-wrap {display: flex;align-items: center;.avatar {width: 30px;height: 30px;border-radius: 50%;margin-right: 10px;}}
}
</style>```2、然后在 layout 中加载使用<img src="assets/image-20200421174653839.png" alt="image-20200421174653839" style="zoom:50%;" />## 在顶栏中展示当前登录用户1、在 `api/user.js` 中封装请求方法```js
// 获取用户信息
export const getUserProfile = () => {return request({method: 'GET',url: '/mp/v1_0/user/profile',// 后端要求把需要授权的用户身份放到请求头中// axios 可以通过 headers 选项设置请求头headers: {// 属性名和值都得看接口的要求// 属性名:Authorization,接口要求的// 属性值:Bearer空格token数据Authorization: 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJleHAiOjE2MTg5MDkxMjYsInVzZXJfaWQiOjEsInJlZnJlc2giOmZhbHNlLCJ2ZXJpZmllZCI6dHJ1ZX0.EdKErKDqMc3snkYxqt02jSa8t9G44002yWKY3CMOMJg'}})
}
```2、在 header 组件中请求获取数据<img src="assets/image-20200421174841178.png" alt="image-20200421174841178" style="zoom:50%;" />3、把请求到的数据绑定到模板中<img src="assets/image-20200421175004383.png" alt="image-20200421175004383" style="zoom:50%;" />## Token 处理1、在登录成功以后将用户信息存储到本地存储<img src="assets/image-20200422120805576.png" alt="image-20200422120805576" style="zoom:50%;" />> 注意:代码是不折行的
>
> 本地存储只能存字符串,如果需要存储数组或者对象数据,则转为 JSON 格式字符串2、然后在请求的时候获取本地存储中的 user 数据使用 token<img src="assets/image-20200422120925785.png" alt="image-20200422120925785" style="zoom:50%;" />## 使用拦截器统一设置用户 Token> axios 拦截器官方示例:https://github.com/axios/axios#interceptors在 request 请求模块中添加如下代码:```js
// 请求拦截器
request.interceptors.request.use(// 任何所有请求会经过这里// config 是当前请求相关的配置信息对象// config 是可以修改的function (config) {const user = JSON.parse(window.localStorage.getItem('user'))// 如果有登录用户信息,则统一设置 tokenif (user) {config.headers.Authorization = `Bearer ${user.token}`}// 然后我们就可以在允许请求出去之前定制统一业务功能处理// 例如:统一的设置 token// 当这里 return config 之后请求在会真正的发出去return config},// 请求失败,会经过这里function (error) {return Promise.reject(error)}
)
```## 处理侧边菜单的展开/收起状态1、在 layout 组件中声明数据用来控制侧边导航菜单的展开收起状态<img src="assets/image-20200422121315411.png" alt="image-20200422121315411" style="zoom:50%;" />2、在 layout 组件中处理图标的点击状态<img src="assets/image-20200422121352145.png" alt="image-20200422121352145" style="zoom:50%;" />3、将 layout 组件中的 `isCollapse` 传递给侧边栏组件<img src="assets/image-20200422121446475.png" alt="image-20200422121446475" style="zoom:50%;" />> 别忘了把 el-aside 的 width 设置为 auto4、在 aside 组件中声明接收 props 数据并绑定到导航菜单组件中<img src="assets/image-20200422121540402.png" alt="image-20200422121540402" style="zoom:50%;" />## 控制页面访问权限在我们的项目中,除了登录页面,其它所有页面都需要具有登录状态才能访问。也就是说我们要给这些需要登录才能访问的页面进行统一控制。通常的做法就是利用[路由的导航守卫]([https://router.vuejs.org/zh/guide/advanced/navigation-guards.html)来统一处理。所谓的路由拦截器就是一个公共的页面访问门卫,说白了就是所有的页面访问都要经过这里,我们可以在这里执行一共公共的操作,例如校验是否具有登录状态。> 提示:官方文档叫导航守卫,都是一个意思。具体做法就是在 `src/router/index.js` 中:```js
// 路由导航守卫:说白了所有页面的导航都会经过这里
// 守卫页面的导航的
// to:要去的路由信息
// from:来自哪里的路由信息
// next:放行方法
router.beforeEach((to, from, next) => {// 如果要访问的页面不是 /login,校验登录状态// 如果没有登录,则跳转到登录页面// 如果登录了,则允许通过// 允许通过// next()const user = JSON.parse(window.localStorage.getItem('user'))// 校验非登录页面的登录状态if (to.path !== '/login') {if (user) {// 已登录,允许通过next()} else {// 没有登录,跳转到登录页面next('/login')}} else {// 登录页面,正常允许通过next()}
})
```> 关于路由导航守卫更详细的用户请参考官方文档:[https://router.vuejs.org/zh/guide/advanced/navigation-guards.html## 结合导航守卫实现页面切换顶部进度条- [nprogress](https://github.com/rstacruz/nprogress)
- 路由前置钩子
- 路由后置钩子1、安装 nprogress```bash
# yarn add nprogress
npm i nprogress
```> 注意:项目中不要乱用包管理工具,要从一而终,不要一会儿这个,一会儿那个的。否则的话会导致一些包被莫名删除。
>
> 提示:如果想要从一个包管理工具切换到另一个包管理工具:
>
> 1、手动删除 node_modules
>
> 2、执行 `npm install` 或者 `yarn install` 或者 `cnpm install` 把所有依赖项重新安装一遍
>
> 3、之后固定使用 npm、yarn、cnpm 来装包
>
> 注意:cnpm 就不建议使用了。2、在 `main.js` 中引入 `nprogress.css` 样式文件```js
// 加载 nprogress 中的指定的样式文件
// 注意:加载第三方包中的具体文件不需要写具体路径,直接写包名即可
// 总结就是:"包名/具体文件路径"
import "nprogress/nprogress.css";
```3、在路由的全局前置守卫中,开启进度条```js
...
+ import NProgress from 'nprogress'router.beforeEach((to, from, next) => {// 开启顶部导航进度条特效
+  NProgress.start()// 停止导航// 我们可以在一些特殊情况下,停留在当前页面,中断当前导航// next(false)// next()// 1. 如果访问的是登录页面,则直接放行if (to.path === '/login') {next()// 停止代码往后执行return}// 2. 非登录页面,校验登录状态// 2.1 获取用户 tokenconst token = window.localStorage.getItem('user-token')// 2.2 判断是否有 token,有就通过if (token) {// 导航通过,放行,访问哪里就往哪里走next()} else {// 2.3 没有,就跳转到登录页next('/login') // 跳转到指定路由}
})
```4、在路由的全局后置钩子中,关闭进度条特效```js
router.afterEach((to, from) => {// 结束顶部的导航进度条NProgress.done();
});
```最后,回到浏览器中测试访问。## 用户退出1、给退出按钮注册点击事件<img src="assets/image-20200422172829358.png" alt="image-20200422172829358" style="zoom:50%;" />> 注意:并不是所有的组件在注册事件的时候需要使用 `.native` 修饰符,例如 el-button 组件注册点击事件就不需要,这主要是因为该组件内部处理了。
>
> 什么时候使用 `.native`?首先肯定是在组件上注册事件可能会用到,如果普通方式注册不上,这个时候加 `.native` 修饰符。
>
> 例如你给一个组件注册一个 `input` 事件,如果直接 `@input` 注册无效,那就试一下 `@input.native`。2、处理函数如下```js
onLogout () {this.$confirm('确认退出吗?', '退出提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {// 把用户的登录状态清除window.localStorage.removeItem('user')// 跳转到登录页面this.$router.push('/login')}).catch(() => {this.$message({type: 'info',message: '已取消退出'})})
}
```最后,回到浏览器测试。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/416579.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

文件查找_tar_ext34_swap

查找文件&#xff1a;查找文件有很多种方法&#xff0c;我们先来说 which 命令&#xff08;可执行命令&#xff09;快速查找 作用&#xff1a;查找命令的绝对路径 which会在PATH变量所对应的目录里找&#xff0c;找到了就把绝对路径显示出来. PATH变量可以使用echo $PATH查看 …

idea社区版开发tomcat web(jsp)程序

需要安装tomcat插件 file——settings——plugins—— marketplace中搜索tomcat&#xff0c;找到第一个smart tomcat&#xff0c;点击右侧install安装 创建项目File -> new ->maven 进入到maven中&#xff0c;勾选“Create from archetype”&#xff0c;图片如下&#xf…

前端学习(2456):文章列表

# 四、文章列表模块## 创建组件并配置路由1、创建 src/views/article/index.vuehtml <template><div class"article-container">内容管理</div> </template><script> export default {name: ArticleIndex,components: {},props: {},da…

centos7 sonatype nexus3(支持maven、nuget、docker等)私服搭建

下载 https://help.sonatype.com/repomanager2/download/download-archives—repository-manager-oss https://www.sonatype.com/products/repository-oss-download https://download.sonatype.com/nexus/3/latest-unix.tar.gz 都下载不了&#xff0c;应该是被防火墙屏蔽了&a…

iOS AppStore 申请加急审核

1、在iTunes Connect 上面提交审核后&#xff0c;点击下面链接申请加急审核 链接&#xff1a;https://developer.apple.com/appstore/contact/appreviewteam/index.html 2、进去默认是:"request an expedited app review" 即&#xff1a;“申请加急审核” 3、填写联系…

前端学习(2457):文章发布

# 五、文章发布## 创建组件并配置路由1、创建 src/views/publish/index.vue 组件html <template><div class"publish-container">发布文章</div> </template><script> export default {name: PublishIndex,components: {},props: {},d…

maven打包将依赖打包到target目录中

pom.xml的build/plugins节添加 <plugin><groupId>org.apache.maven.plugins</groupId><artifactId>maven-dependency-plugin</artifactId><executions><execution><id>copy-dependencies</id><phase>package<…

Angular1.63 绑定数据与继承

html 部分 <body ng-app"myapp"> <div ng-controller"asd"> <p><span ng-bind"firstName"></span></p> </div> <div ng-controller"qwe"> <p><span ng-bind"firstName…

前端学习(2458):素材管理

# 六、素材管理## 创建组件并配置路由1、创建 src/views/image/index.vuehtml <template><div class"image-container">素材管理</div> </template><script> export default {name: ImageIndex,components: {},props: {},data () {ret…

vuex中getters的参数

实际使用代码&#xff0c;将高阶函数变成正常函数&#xff0c;在第一个return位置打断点 const getters {getReadOnly: function(state, parameter, { App }) {return (row, prop) > {const shareUserID App.fileInfo.shareUserID;return getReadOnly(row, prop, shareUs…

Deepgreen数据库日志清理脚本

原文链接 数据库时间久了&#xff0c;难免会产生很多日志&#xff0c;Deepgreen的日志与Greenplum一样&#xff0c;都存在pg_log文件夹下&#xff0c;我们可以使用以下脚本&#xff0c;配合Linux定时任务&#xff0c;保存固定日期的日志即可&#xff1a; #!/bin/bash # filenam…

前端学习(2458):评论模块

# 七、评论模块## 评论列表### 创建组件并配置路由1、创建 src/views/comment/index.vue 并写入html <template><div>评论管理</div> </template><script>export default {// 组件的 name 最好起名为两个单词&#xff0c;尽量少用一个单词// 为什…

转载:python引用DLL文件的方法

python引用DLL文件的方法转载于:https://www.cnblogs.com/Regle/p/7003261.html

前端学习(2460):粉丝管理

# 九、粉丝管理## Web 图形开发介绍- MDN 参考链接&#xff1a;https://developer.mozilla.org/zh-CN/docs/Web/Guide/Graphics### 2D 图像&#xff1a;Canvas- [ECharts](https://echarts.apache.org/)### 2D 图像&#xff1a;SVG- [D3.js](https://d3js.org/)### 3D 图像&…

前端学习(2461):打包发布

# 十、打包发布## 构建打包在发布上线之前&#xff0c;我们需要执行构建打包&#xff0c;将 .less、.vue、.js 等相关资源进行编译打包&#xff0c;转换成浏览器可以直接识别运行的普通 css、js、html。bash # yarn run build 或者 yarn build npm run build VueCLI 会把打包结…

网路爬虫 来源

网络爬虫&#xff08;又被称为网页蜘蛛&#xff0c;网络机器人&#xff0c;在FOAF社区中间&#xff0c;更经常的称为网页追逐者&#xff09;&#xff0c;是一种按照一定的规则&#xff0c;自动地抓取万维网信息的程序或者脚本。另外一些不常使用的名字还有蚂蚁、自动索引、模拟…

前端学习(2462):打包优化

# 十一、打包优化> 学习打包优化前需要了解 webpack。所谓的优化主要涉及到两方面&#xff1a;- 构建速度的优化 - 构建质量的优化大多数 Vue 项目是基于 VueCLI 搭建的&#xff0c;而 VueCLI 的底层建筑是 webpack。webpack 是现在主流的功能强大的模块化打包工具&#xff…

火星探险问题

此题oj上无spj&#xff0c;无法提交 【问题分析】 最大费用最大流问题。 【建模方法】 把网格中每个位置拆分成网络中两个节点<i.a>,<i.b>&#xff0c;建立附加源S汇T。 1、对于每个顶点i&#xff0c;j为i东边或南边相邻的一个节点&#xff0c;连接节点<i.b>…

对BOM的总结

参考&#xff1a;JavaScript半知半解 TG著 BOM对象 Window对象是客户端JavaScript程序的全局对象。 Window对象使得JavaScript与浏览器进行交互。 所有的JavaScript全局对象&#xff0c;函数以及变量均自动成为window对象的属性和方法。 Document对象也是window对象的成员。 Wi…