从0到1开发测试平台（十一）前端登录页面的编写及与后端登录接口的交互

<template>
    <div>
        登录组件
    </div>
</template>

<script>
    export default {

    }
</script>

<style lang="less" scoped>
</style>

import Login from '../components/Login.vue'

{
    path: '/login',
    component: Login
  }

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

{
    path: '/',
    redirect: '/login'
  }

html,body,#app{
    height: 100%;
    margin: 0;
    padding: 0;
}

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)

 <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>

<el-input prefix-icon="iconfont icon-3702mima" type="password"></el-input>

data(){
            return {
                loginForm:{
                    username: '',
                    password: ''
                }
            };
        }

<el-form :model="loginForm" label-width="0px" class="login_form">

<el-input v-model="loginForm.username" prefix-icon="iconfont icon-user"></el-input>

<el-input v-model="loginForm.password" prefix-icon="iconfont icon-3702mima" type="password"></el-input>

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' }
                    ]
                }
            };
        },

<el-form ref="loginFormRef" :model="loginForm" :rules="loginFormRules" label-width="0px" class="login_form">

<el-form-item prop="username">

<el-form-item prop="password">

methods:{
            resetLoginForm(){
                this.$refs.loginFormRef.resetFields();
            }
        }

<el-button type="info" @click="resetLoginForm">重置</el-button>

login(){
                this.$refs.loginFormRef.validate((valid)=>{
                    if (!valid) return;
                });
            }

<el-button type="primary" @click="login">登录</el-button>

import axios from 'axios'
Vue.prototype.$http = axios

axios.defaults.baseURL = 'http://127.0.0.1:8082/api/v1/'

const{data:res} = await this.$http.post("login",this.loginForm);

import { Button,Form,FormItem,Input,Message} from 'element-ui'

Vue.prototype.$message = Message

package com.mingdeng.community.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("/**")
                .allowedOrigins("*")
                .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("登录成功");
                });
            }

window.sessionStorage.setItem("token",res.data.token);

this.$router.push("/home");