从0到1开发测试平台（十二）首页面home的编写
从0到1开发测试平台（十二）首页面home的编写
周辰晨
发布于 2020-09-03 16:07:37
发布于 2020-09-03 16:07:37
前言
后端和前端的基础架构都已经搭建完成，为了相对容易理解，上手快，小白也能上手，而且本身就是公司内部系统，也没太大必要做的很完美，所以在我们初版系统的架构里很多东西都简化了，比如注册中心，网关代理，配置中心,负载均衡，授权认证，用户权限控制到页面按钮，消息队列，缓存，elk等都未引入我们初版系统的架构里。如果有时间后面会讲下JmeterEngine相关api的使用、android原生应用mvp及mvvc架构搭建及React-native构建android项目。
我们这篇文章就是关于home页面的编写实现，对于home页面比较主要的两个组件就是container和menu了，其中container较为简单，menu一般要配合后台的权限校验来决定展示的内容，由于我们没做权限控制功能，menu菜单显示直接写死了，所以也不复杂了。
| 在components目录下新建Home组件
<template>
<div>
Home
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>| 在router/index.js文件中新增路由规则
import Home from '../components/Home.vue'
{
path: '/home',
component: Home
},| 路由导航守卫控制访问权限
如果我们没有进行登录，直接访问home也能正常访问，在实际项目里是不允许的，未登录访问home需要指定跳转到登录页面
router.beforeEach((to, from, next) => {
if (to.path === '/login') return next()
//获取token
const tokenStr = window.sessionStorage.getItem('token')
if (!tokenStr) return next('/login')
next()
})| 首页增加退出功能
<el-button type="info" @click="logout">退出</el-button>methods:{
logout(){
window.sessionStorage.clear()
this.$router.push("/login")
}
}| 引入Container布局容器
import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main } from 'element-ui'
Vue.use(Container)
Vue.use(Header)
Vue.use(Aside)
Vue.use(Main)| 引入左边导航菜单
(1)导入菜单相关组件
import { Button,Form,FormItem,Input,Message,Container,Header,Aside,Main,Menu, Submenu,MenuItem } from 'element-ui'
Vue.use(Menu)
Vue.use(Submenu)
Vue.use(MenuItem)(2)实现菜单相关代码
<el-container>
<el-aside width="200px">
<el-menu background-color="#333744" text-color="#fff" active-text-color="#ffd04b">
<el-submenu index="1">
<template slot="title">
<i class="el-icon-location"></i>
<span>性能测试</span>
</template>
<el-menu-item index="1-1">
<template slot="title">
<i class="el-icon-location"></i>
<span>用例管理</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>
</el-aside>
<el-main>Main</el-main>
</el-container>
</el-container>| 实现首页路由重定向
(1)新建组件Welcome.vue
<template>
<div>
<h3>Welcome</h3>
</div>
</template>(2)导入组件Welcome
import Welcome from '../components/Welcom.vue'
{
path: '/home',
component: Home,
redirect: '/welcome',
children:[{path:'/welcome',component:Welcome}]
}(3)Home.vue放置路由占位符
<el-main>
<router-view>
</router-view>
</el-main>| 左侧菜单改为路由链接
(1)el-menu设置router为true
<el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF" :collapse="isCollapse" :collapse-transition="false" router>(2)el-menu-item index属性设置路由地址
<el-menu :default-active="activeNav" background-color="#333744" text-color="#fff" active-text-color="#409EFF" :collapse="isCollapse" :collapse-transition="false" :unique-opened="true" router>
<el-submenu index="1">
<template slot="title">
<i class="el-icon-menu"></i>
<span>性能测试</span>
</template>
<el-menu-item index="/performanceTestCaseManage">
<template slot="title">
<i class="el-icon-menu"></i>
<span>用例管理</span>
</template>
</el-menu-item>
<el-menu-item index="/performanceScriptManage">
<template slot="title">
<i class="el-icon-menu"></i>
<span>脚本及文件管理</span>
</template>
</el-menu-item>
<el-menu-item index="/performanceTestReportManage">
<template slot="title">
<i class="el-icon-menu"></i>
<span>测试报告管理</span>
</template>
</el-menu-item>
<el-menu-item index="/performanceDistributedNodeManage">
<template slot="title">
<i class="el-icon-menu"></i>
<span>分布式节点管理</span>
</template>
</el-menu-item>
<el-menu-item index="/pressureTestScenarioManage">
<template slot="title">
<i class="el-icon-menu"></i>
<span>压测场景管理</span>
</template>
</el-menu-item>
<el-menu-item index="/testMonitor">
<template slot="title">
<i class="el-icon-menu"></i>
<span>测试监控</span>
</template>
</el-menu-item>
</el-submenu>
</el-menu>本文参与 腾讯云自媒体分享计划，分享自微信公众号。
原始发表：2020-08-30，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读