VUE全家桶项目实战-- 3.根界面和路由的配置,登录界面设计
一.App.vue 根界面的配置
<template>
<div id="app">
<!-- 路由占位符,这里设置这个就可以了 -->
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
二.在components 路径下创建login.vue
<template>
<div>
<div>
<!-- 表单区域
ref:表单
rules:校验
model:绑定对象
ref 和model 对应的对象名最好一样,之前设置不一样,出现一些莫名的问题
label-width: 表单中leael 对应的宽度
-->
<el-form
ref="user"
:rules="rules"
:model="user"
label-width="80px"
>
<el-form-item label="用户名:" prop="username">
<el-input v-model="user.username"></el-input>
</el-form-item>
<!-- prop:校验时绑定的字段
@keyup.native.enter:回车时触发的事件
-->
<el-form-item label="密码:" prop="password">
<el-input v-model="user.password" type="password" @keyup.native.enter="login"></el-input>
</el-form-item>
<el-form-item class="btn">
<el-button @click="loginRest">重置</el-button>
<el-button type="success" @click="login">登录</el-button>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
export default {
data() {
return {
user: {
username: "",
password: ""
},
// 校验
rules: {
// 校验字段
username: [
/* required: 是否在字符前加红
message:校验不通过,提示的文字
trigger:失去焦点时触发
min:该字段最小长度
max:该字段最大长度
*/
{ required: true, message: "请输入用户名", trigger: "blur" },
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
],
password: [
{ required: true, message: "请输入密码", trigger: "blur" },
{ min: 3, max: 10, message: "长度在 3 到 10 个字符", trigger: "blur" }
]
}
};
},
methods: {
// 对表单对象进行重置
loginRest() {
this.user = {
username: "",
password: ""
};
},
login() {
// 对表单进行预验证验证
this.$refs.user.validate(valid => {
if (!valid) return;
/*axios的post请求方法,拼接的是main.js 中的配置的地址
, 后面传的参数,后台接口直接用对象接收,
等价于 {'username':this.user.username,'password':'this.user.password'}
*/
this.$http.post("/login/login", this.user).then(res => {
//返回的对象
const body = res.data;
if (body.code === 0) {
this.$message.success("登录成功");
// 将返回的token存储在sessionStorage
// window.sessionStorage.setItem(
// "token",
// "dgfjahsddffggjdfgasfjksadhfkjdhsak"
// );
//校验成功,路由跳转到/home
this.$router.push("/home");
}else{
this.loginRest();
this.$message.error(body.msg);
}
});
});
}
}
};
</script>
三.配置路由router
打开router路径下index.js
import Vue from 'vue'
import Router from 'vue-router'
//导入Login 组件
import Login from '../components/Login.vue'
Vue.use(Router)
const router = new Router({
routes: [
// 路由重定向,访问 / 跳转到登录组件
// 访问路径为http://localhost:8080/
{path:'/',redirect:'/login'},
//访问/login
{path:"/login",component: Login},
]
})
export default router
四.后端跨域配置
@Configuration
public class CorsConfig implements WebMvcConfigurer {
static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
.maxAge(3600);
}
}