7.登录页面跳转

登录页面的跳转

methods:{
            submitLogin(){
                this.$refs.loginForm.validate((valid) => {
                    if(valid){
                        this.postKeyValueRequest('/doLogin',this.loginForm).then(resp=>{
                            //resp：从服务端拿到的数据  用户的数据要保存到哪里？ 保存在sessionStorage  打开就没了
                            if(resp){
                                //不能直接写resp.obj,这是一个js对象，我们要把它转成字符串。
                                window.sessionStorage.setItem("user",JSON.stringify(resp.obj));
                                //页面跳转  replace：替换  用push的话，可以使用后退按钮回到登录页，用replace不可以回到登录页
                                this.$router.replace('/home') //replace替换 push压入
                            }
                        }) //then里面的参数就是服务器返回的参数
                    }else{
                        this.$message.error('请输入所有字段')
                        return false;
                    }
                })
            }
        }

把登录的用户名和密码保存到sessionStorage里面，然后进行跳转，使用this.$router.replace('/home')进行页面跳转到home页，我们并没有home页，所有要重新写一个home页

<template>
    <div>欢迎来到home</div>
</template>

<script>
    export default {
        name: "Home"
    }
</script>

<style scoped>

</style>

加上路由

在浏览器的登录页输入正确的用户名和密码之后，点击登录，就直接跳到了home页

前端请求方法的封装

在api.js文件里面把其他的请求方法封装一下，想要引入这些封装好的登录方法直接在methods方法里面使用this.方法就行。

//请求方法的封装
export const postRequest=(url,params)=>{
    return axios({
        method:'post',
        url:`${base}${url}`,
        data:params
    })
}
export const putRequest=(url,params)=>{
    return axios({
        method:'put',
        url:`${base}${url}`,
        data:params
    })
}
export const getRequest=(url,params)=>{
    return axios({
        method:'get',
        url:`${base}${url}`,
        data:params
    })
}
export const deleteRequest=(url,params)=>{
    return axios({
        method:'delete',
        url:`${base}${url}`,
        data:params
    })
}

在main.js中制作插件

import {postKeyValueRequest} from "./utils/api";
import {putRequest} from "./utils/api";
import {postRequest} from "./utils/api";
import {deleteRequest} from "./utils/api";
import {getRequest} from "./utils/api";

Vue.prototype.postKeyValueRequest = postKeyValueRequest;
Vue.prototype.postRequest = postRequest;
Vue.prototype.putRequest = putRequest;
Vue.prototype.deleteRequest = deleteRequest;
Vue.prototype.getRequest = getRequest;