前面的文章已经把后台登录接口准备完毕，接下来就是前端页面的编写以及前后端交互了，这里前后端交互我们用的是 axios。axios 是通过 promise 实现对 ajax 技术的一种封装，就像 jQuery 实现 ajax 封装一样。既然底层仍然是 ajax 通过异步请求与后台交互，就自然会遇到跨域的问题，这篇文章后面也会提及如何解决跨域问题。
解决跨域问题主要是有两个方向
通过修改 nginx 配置
通过修改继承 WebMvcConfigurerAdapter 重写 addCorsMappings 方法
这里我们选择第二种，接下来就详细描述下前端登录功能的实现.
(1).新建 Login.vue
<template>
<div>
登录组件
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
(2).在 router/index.js 路由文件里导入 Login 组件
import Login from '../components/Login.vue'
(3).在路由文件 router/index.js 文件的 routes 数组里增加登录路由
{
path: '/login',
component: Login
}
(4).在 app.vue 根组件中增加路由占位符
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
(5).打开地址http://localhost:8080/#/loginLogin 组件了便能成功访问到我们增加的
{
path: '/',
redirect: '/login'
}
vue ui命令，在打开的项目管理页面里面点击依赖安装 less-loader 和 less 开发依赖库,安装完成之后需要重启项目html,body,#app{
height: 100%;
margin: 0;
padding: 0;
}
在 main.js 文件里导入 global.css
import './assets/css/global.css'
import Vue from 'vue'
import { Button,Form,FormItem,Input } from 'element-ui'
Vue.use(Button)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
(1).修改文件./components/Login.vue
<el-form ref="loginFormRef" label-width="0px" class="login_form">
<!--用户名-->
<el-form-item>
<el-input prefix-icon="iconfont icon-user"></el-input>
</el-form-item>
<!--密码-->
<el-form-item>
<el-input prefix-icon="iconfont icon-3702mima"></el-input>
</el-form-item>
<!--按钮区域-->
<el-form-item class="btns">
<el-button type="primary">登录</el-button>
<el-button type="info">重置</el-button>
</el-form-item>
</el-form>
(2).由于密码的 Input 框是密文所以密码对应的 input 框要加 type="password"属性
<el-input prefix-icon="iconfont icon-3702mima" type="password"></el-input>
(1) 在 data 添加绑定数据
data(){
return {
loginForm:{
username: '',
password: ''
}
};
}
(2) form 表单加上:model="loginForm"绑定 loginForm
<el-form :model="loginForm" label-width="0px" class="login_form">
(3) 用户名输入框加上 v-model="loginForm.username"绑定 loginForm.username
<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>
(4) 密码输入框加上 v-model="loginForm.password"绑定 loginForm.password
<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>
(1) data 里添加表单验证规则
data(){
return {
loginForm:{
username: '',
password: ''
},
loginFormRules:{
username: [
{ required: true, message: '请输入登录名称', trigger: 'blur' },
{ min: 3, max: 11, message: '长度在 3 到 11 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入登录密码', trigger: 'blur' },
{ min: 6, max: 15, message: '长度在 6 到 16 个字符', trigger: 'blur' }
]
}
};
},
(2) form 添加:rules="loginFormRules"关联验证规则
<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">
(3) 用户名 input 框通过 el-form-item 添加 prop="username"来关联 username 验证规则
<el-form-item prop="username">
(4) 密码 input 框通过 el-form-item 添加 prop="password"来关联 password 验证规则
<el-form-item prop="password">
重置表单数据
(1) 在 methods 添加 resetLoginForm 方法
(2) 通过表单的 resetFields 方法来重置表单数据 (包括表单验证结果)
methods:{
resetLoginForm(){
this.$refs.loginFormRef.resetFields();
}
}
(3) 为重置按钮绑定 resetLoginForm
<el-button type="info" @click="resetLoginForm">重置</el-button>
(1) 在 methods 里面添加 login 方法
(2) 调用表单的 validate 方法来预验证表单数据
login(){
this.$refs.loginFormRef.validate((valid)=>{
if (!valid) return;
});
}
(3) 为登录按钮绑定 login 方法
<el-button type="primary" @click="login">登录</el-button>
(1).在 main.js 文件里导入 axios
import axios from 'axios'
Vue.prototype.$http = axios
(2).在 main.js 里设置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8082/api/v1/'
(3) 在 Login 组件的 login 方法里发起网络请求调用后台登录接口
const{data:res} = await this.$http.post("login",this.loginForm);
import { Button,Form,FormItem,Input,Message} from 'element-ui'
Vue.prototype.$message = Message
经过以上配置我们点击登录按钮，结果发现前端接口报错了
是不是一脸懵逼，403 是个什么鬼！
我们点开 console 终于发现了问题所在：提示跨域访问不被允许，接下来我们配置跨域访问
我们需要在后端增加跨域允许配置
package com.syy.testPlatform.config;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOriginPatterns("*")
.allowCredentials(true)
.allowedMethods("GET", "POST", "DELETE", "PUT")
.maxAge(3600);
}
}
配置好跨域允许之后，我们再次点击登录按钮，看到后端接口调用成功并返回用户信息
login(){
this.$refs.loginFormRef.validate(async valid=>{
// this.$message.success("登录成功")
if (!valid) return;
const{data:res} = await this.$http.post("user/login",this.loginForm);
if (!res.success) return this.$message.error(res.message);
this.$message.success("登录成功");
});
}
(1) 登录成功之后的 token 保存到 sessionStorage 中
window.sessionStorage.setItem("token",res.data.token);
(2) 保存好 token 之后跳转到首页
this.$router.push("/home");
后端和前端的基础架构都已经搭建完成，为了相对容易理解，上手快，小白也能上手，而且本身就是公司内部系统，也没太大必要做的很完美，所以在我们初版系统的架构里很多东西都简化了，比如注册中心，网关代理，配置中心,负载均衡，授权认证，用户权限控制到页面按钮，消息队列，缓存，elk 等都未引入我们初版系统的架构里。如果有时间后面会讲下 JmeterEngine 相关 api 的使用、android 原生应用 mvp 及 mvvc 架构搭建及 React-native 构建 android 项目。
我们这篇文章就是关于 home 页面的编写实现，对于 home 页面比较主要的两个组件就是 container 和 menu 了，其中 container 较为简单，menu 一般要配合后台的权限校验来决定展示的内容，由于我们没做权限控制功能，menu 菜单显示直接写死了，所以也不复杂了。
<template>
<div>
Home
</div>
</template>
<script>
export default {
}
</script>
<style lang="less" scoped>
</style>
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")
}
}
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/Welcome.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>