主页面搭建--简单理解步骤4

登录和获取用户信息都完成了，现在要进行主页面搭建

一：前台

1：先配置一个路由，同时在component里面创建Layout.vue文件，在router文件夹里面的index.js里面配置

引入Layout组件，如果访问根目录就加载layout页面

2：在layout里面搭建页面

主页面包括头部区域，左侧区域右侧区域-----这其中分为三个子组件方便管理

同时要在总组件里面引入这三个组件进行注册使用

3：分完组件之后就应该写组件了----都在ui里面找到的

头部区域功能有个logo 和下拉菜单能够退出登录和修改密码

现在进行左侧导航

4：左侧导航要把首页和学员管理教师管理分成三个组件，进行页面切换普通组件放进compontents（他们都是路由组件所以放进views文件夹里面（在这里创建一个home文件夹里面再写一个index.vue 同理再写连个students和teachers文件夹）

同时再router.js里面引入这几个组件

5：现在引入完了就要在前端路由里面配置因为是layout的子路由所以在layout路由里面写这三个路由----路由渲染出口在Appmain里面同时访问根目录应该出现的是首页所以在layout路由配置里面重定向一下路由

6：现在进行右侧主区域-------这时候点击首页学员管理和教师管理都可以进行页面切换了

上面有个可以首页框点击可以回到首页页面；（ui里的面包屑）

在这时首页这个需要隐藏单独抽出一个组件进行判断如果是home页面就显示，不是就隐藏

----------------接下来写右上角的退出系统---------------

二：后台

1：在后台router里面搭建退出登录的接口

先接受前台传过来的数据，然后进行查询，如果错误存在就输出错误信息

如果数据查不到，返回错误信息，能够查到就成功退出

三：前台

1：写退出登录api方法

2：组件调用这个api---在退出登录里面引用调用，token获取如果退出成功本地token就清除掉，

用户也清除掉，然后回到登录页面

主页面搭建--简单理解步骤4相关推荐

理解vue ssr原理，自己搭建简单的ssr框架
理解vue ssr原理,自己搭建简单的ssr框架前言大多数Vue项目要支持SSR应该是为了SEO考虑,毕竟对于WEB应用来说,搜索引擎是一个很大的流量入口.Vue SSR现在已经比较成熟了,但是如 ...
怎样组建云计算机,如何搭建云计算平台_搭建云计算平台步骤
云计算平台简单的理解就是仓库了,给你提供存储运转的空间:比如你查询的任何网络内容都是在某一网络的平台上,大家都可以同时不同地点看到一样的东西.本文给大家介绍如何搭建云平台. 搭建云计算平台步骤规划- ...
filezilla server搭建ftp服务器步骤
1. FileZilla介绍 FileZilla是一款免费开源的FTP Server软件,分为客户端和服务器两个版本. 服务器端的FTP软件除了FileZilla Server还有Serv-U和IIS ...
android 点击事件消费,Android View事件分发和消费源码简单理解
Android View事件分发和消费源码简单理解前言: 开发过程中觉得View事件这块是特别烧脑的,看了好久,才自认为看明白.中间上网查了下singwhatiwanna粉丝的读书笔记,有种茅塞顿开 ...
.NET 搭建简单的通知服务
搭建简单的通知服务 Intro 很多情况下,我们都会遇到一些需要进行通知报警的场景,比如说服务器资源监控报警,抢到火车票后通知用户进行付款. 原来主要是用的钉钉群里的机器人来做的通知,周末看到原来做 ...
git的简单理解及基础操作命令
前端小白一枚,最近开始使用git,于是花了2天看了廖雪峰的git教程(偏实践,对于学习git的基础操作很有帮助哦),也在看<git版本控制管理>这本书(偏理论,内容完善,很不错),针对所学 ...
梯度下降法优化目标函数_如何通过3个简单的步骤区分梯度下降目标函数
梯度下降法优化目标函数 Nowadays we can learn about domains that were usually reserved for academic communities. ...
从Docker在Linux和Windows下的区别简单理解Docker的层次结构
上篇文章我们成功在Windows下安装了Docker,输出了一个简单的Hello World程序.本文中我们将利用Docker已有的云端镜像training/webapp来发布一个简单Python的W ...
对CMMI标准的简单理解
CMMI用于帮助软件企业对软件工程的整个过程进行管理和改进,从而能按时.不超预算地开发出高质量地软件. CMMI全称为"Capability Maturity Model Integrati ...

主页面搭建--简单理解步骤4

主页面搭建--简单理解步骤4相关推荐

最新文章

热门文章