前言
后端和前端的基础架构都已经搭建完成，为了相对容易理解，上手快，小白也能上手，而且本身就是公司内部系统，也没太大必要做的很完美，所以在我们初版系统的架构里很多东西都简化了，比如注册中心，网关代理，配置中心,负载均衡，授权认证，用户权限控制到页面按钮，消息队列，缓存，elk等都未引入我们初版系统的架构里。如果有时间后面会讲下JmeterEngine相关api的使用、android原生应用mvp及mvvc架构搭建及React-native构建android项目。
我们这篇文章就是关于home页面的编写实现，对于home页面比较主要的两个组件就是container和menu了，其中container较为简单，menu一般要配合后台的权限校验来决定展示的内容，由于我们没做权限控制功能，menu菜单显示直接写死了，所以也不复杂了。
| 在components目录下新建Home组件
| 在router/index.js文件中新增路由规则
| 路由导航守卫控制访问权限
如果我们没有进行登录，直接访问home也能正常访问，在实际项目里是不允许的，未登录访问home需要指定跳转到登录页面
| 首页增加退出功能
| 引入Container布局容器
| 引入左边导航菜单
(1)导入菜单相关组件
(2)实现菜单相关代码
| 实现首页路由重定向
(1)新建组件Welcome.vue
(2)导入组件Welcome
(3)Home.vue放置路由占位符
| 左侧菜单改为路由链接
(1)el-menu设置router为true
(2)el-menu-item index属性设置路由地址
从0到1开发测试平台（十一）前端登录页面的编写及与后端登录接口的交互
从0到1开发测试平台（八）后端服务添加lombok第三方类库
从0到1开发测试平台（七）后端服务添加swagger第三方类库
从0到1开发测试平台（五）RESTful API接口设计标准及规范
从0到1开发测试平台（四）Controller+Service +Dao三层的功能划分
从0到1开发测试平台（三）利用vue cli创建前端vue项目
本文分享自微信公众号 - 软件测试架构师俱乐部（gh_03227f9a322f）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。