主页面搭建--简单理解步骤4_我叫LiLi的博客-程序员信息网_主页面

技术标签: vue  

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

一:前台

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就清除掉,

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/m0_61464384/article/details/123927634

智能推荐

3D游戏编程与设计-游戏的本质hw1_zhangxy389的博客-程序员信息网

游戏的本质游戏的分类游戏热点游戏的分类游戏的分类标准很多,以下主要以六个标准进行分类游戏载体:游戏除指代电子游戏之外,还可以指代诸如棋类、运动以及沙壶球这类基于现实的游戏。游戏方式:游戏地区游戏内容游戏平台:以游戏平台区分,电子游戏可分为街机游戏(使用大型游戏机进行游玩的游戏)、电脑游戏(使用PC和其他运算计算机进行游玩的游戏)、主机游戏(利用家庭用游戏主机进行游玩的游戏,如Xbox和Switch)、移动端游戏(使用掌上游戏机或手机等移动游戏设备进行游玩的游戏)游戏玩家人数游戏热点

复选框checkbox之全选、多选、反选_暖风阵阵的博客-程序员信息网

复选框checkbox之全选、多选、反选如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入如何插入一段漂亮的代码片// An highlighted blockvar foo = 'bar';生成一个适合你的列表项目项目项目项目1项目2项目3 计划任务 完成任

mmap函数详解_ydt_lwj的博客-程序员信息网

mmap可以把磁盘文件的一部分直接映射到内存,这样文件中的位置直接就有对应的内存地址,对文件的读写可以直接用指针来做而不需要read/write函数。#include void *mmap(void *addr, size_t len, int prot, int flag, int filedes, off_t off); int munmap(void *addr, size_t

在Win7下去掉快捷方式箭头的简便手动操作_MrKnight的博客-程序员信息网_win7去除快捷方式箭头

一直都觉得在Win7下快捷方式上的箭头看着很别扭,并且也知道网上很多方法,主要是两类,一是:修改注册表;二是:使用美化工具(估计也是修改注册表)。作为一个科班出身的伪程序员,就想使用一个比较靠谱比较简便的方法,无后患,一刀见血,于是跑去网上搜索,最后发现了以下批处理代码:去掉快捷方式箭头的批处理 DeleteArrow.batreg add "HKEY_LOCAL_MACHIN

linux整行剪切_linux 的复制/剪切命令用法_冲浪普拉斯的博客-程序员信息网

复制/拷贝:cp 文件名 路径 cphello.csv ./python/ml:把当前目录的hello.csv拷贝到当前目的python文件夹里的ml文件夹里cp 源文件名 新文件名 cp hello.txt world.txt:复制并改名,并存放在当前目录下cp file1 file2复制一个文件cp dir/* .复制一个目录下的所有文件到当前工作目录cp ...

阿里巴巴Java开发手册实战:Java命名规范_托尼Lee的博客-程序员信息网

阿里巴巴Java开发手册实战:100篇实例详解~~~~~~~~~~~~~~~~~~~~~~~~~~~~Java方法等命名规范

随便推点

Flutter学习笔记-IOS心型图标的颜色和大小_yyxgs的博客-程序员信息网

import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatelessWidget { Widget build(BuildContext context) { return MaterialApp ( title: 'flutter Demo'.

Multi-Model多模数据库引擎设计与实现_欧晨eli的博客-程序员信息网_多模数据库

如今,随着业务“互联网化”和“智能化”的发展以及架构“微服务”和“云化”的发展,应用系统对数据的存储管理提出了新的标准和要求,数据的多样性成为了数据库平台面临的一大挑战,数据库领域也催生了一种新的主流方向。数据库多模Multi-Model是指同一个数据库支持多个存储引擎,可以同时满足应用程序对于结构化、半结构化、非结构化数据的统一管理需求。数据库云化需求催生Multi-Model多模企业使用云数据库对接的应用越来越多,需求多种多样,传统的做法是在dbPaaS里面提供十几个不同的数据库产品.

刷脸考勤来势汹汹 各大企业争当尝鲜者_xiao10120620的博客-程序员信息网

大到全球500强,小到创业工作室,普遍需要签到考勤。需求的膨胀促进发展提速,近些年来,考勤方式不断推陈出新,上了好几个台阶。经历了手写签到、卡片签到、指纹签到,如今,考勤方式也随着人工智能的进步逐渐向刷脸签到发展。许多大型企业,机关、事业单位甚至在两三年前就已经用上刷脸签到,可想而知,当下刷脸签到的市场会有多广阔。人脸识别究竟有什么吸引力,引得各大企业争当尝鲜者呢?这大概与它的便捷性和高...

2n皇后问题状压dp_「已注销」的博客-程序员信息网

蓝桥杯2n皇后问题分析:该题与给定状态下的n皇后问题相似,只不过在搜索时要用两层循环。在第一层循环里放置其中一种颜色的皇后,在第二层的循环中放置另一种颜色的皇后。#include <bits/stdc++.h>using namespace std;int upper,ans,n;int a[10];void dfs(int i,int col,int...

Spring boot项目mvn命令行启动应用,解决target/demo-1.0-SNAPSHOT.jar中没有主清单属性问题_byzf的博客-程序员信息网

Spring boot项目mvn命令行启动应用,解决-SNAPSHOT.jar中没有主清单属性问题文章目录Spring boot项目mvn命令行启动应用,解决-SNAPSHOT.jar中没有主清单属性问题一、什么是maven二、使用三、附录一、什么是mavenApache Maven是一个软件项目管理和理解工具。基于项目对象模型(POM)的概念,Maven可以从中心信息块管理项目的构建、报告和文档。软件下载地址:https://maven.apache.org/download.cgi二、使用

推荐文章

热门文章

相关标签