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);
    }
}