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

前言

前面的文章已经把后台登录接口准备完毕，接下来就是前端页面的编写以及前后端交互了，这里前后端交互我们用的是axios。axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。既然底层仍然是ajax通过异步请求与后台交互，就自然会遇到跨域的问题，这篇文章后面也会提及如何解决跨域问题。

解决跨域问题主要是有两个方向

• 通过修改nginx配置

• 通过修改继承WebMvcConfigurerAdapter重写 addCorsMappings方法

这里我们选择第二种，接下来就详细描述下前端登录功能的实现.

| 在components目录下新建Login组件

<template>    <div>        登录组件    div>template><script>    export default {    }script><style lang="less" scoped>style>

| 在router/index.js路由文件里导入Login组件

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

| 在路由文件router/index.js文件的routes数组里增加登录路由

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

| 在app.vue根组件中增加路由占位符

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

| 打开地址http://localhost:8080/#/login便能成功访问到我们增加的Login组件了

| 在router/index.js路由文件的routes数组里 增加默认路由(这样访问地址/就会自动跳转到Login组件)

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

| 在cmd窗口使用vue-ui命令，在打开的项目管理页面里面点击依赖安装less-loader和less开发依赖库,安装完成之后需要重启项目

| 在assets目录下新建css目录，然后在css目录新建global.css文件

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

| 在main.js文件里导入global.css

import './assets/css/global.css'

| 在plugins/element.js文件里按需导入element ui组件

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,el-button,el-input等组件的用法可以打开element-ui官网查看用法,官网文档地址https://element.eleme.cn/#/zh-CN/component/installation)

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

| 由于密码的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

"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"关联验证规则

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

| 通过el-form添加ref="loginFormRef"并且通过this.$refs来获取当前表单对象

| 重置表单数据

(1)在methods添加resetLoginForm方法

(2)通过表单的resetFields方法来重置表单数据(包括表单验证结果)

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

(3)为重置按钮绑定resetLoginForm

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

| 登录组件的预验证

(1)在methods里面添加login方法

(2)调用表单的validate方法来预验证表单数据

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

(3)为登录按钮绑定login方法

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

| 请求后端login接口

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

| 配置弹窗提示,在element.js文件中导入element ui的Message组件然后在组件里就可以通过this.$message调用弹窗方法弹出提示框

import { Button,Form,FormItem,Input,Message} from 'element-ui'Vue.prototype.$message = Message

经过以上配置我们点击登录按钮，结果发现前端接口报错了

是不是一脸懵逼，403是个什么鬼，我们点开console终于发现了问题所在

提示跨域访问不被允许，接下来我们配置跨域访问

| 配置跨域访问

我们需要在后端增加跨域允许配置

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;@Configurationpublic class CorsConfig extends WebMvcConfigurerAdapter {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                .allowedOrigins("*")                .allowCredentials(true)                .allowedMethods("GET", "POST", "DELETE", "PUT")                .maxAge(3600);    }}

配置好跨域允许之后，我们再次点击登录按钮，看到后端接口调用成功并返回用户信息

| 完善login方法

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("登录成功");                });            }

| 登录成功之后的token保存到sessionStorage中

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

| 保存好token之后跳转到首页

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

从0到1开发测试平台(十)后端增加登录token返回

从0到1开发测试平台(九)后端对接口response的封装

从0到1开发测试平台(八)后端服务添加lombok第三方类库

从0到1开发测试平台(七)后端服务添加swagger第三方类库

从0到1开发测试平台(六)增加登录接口

从0到1开发测试平台(五)RESTful API接口设计标准及规范

从0到1开发测试平台(四)Controller+Service +Dao三层的功能划分

从0到1开发测试平台(三)利用vue cli创建前端vue项目

从0到1开发测试平台(二)springboot搭建常见问题

带你用java从0到1开发测试平台