用Spring Boot+Vue做微人事项目第三天
前两天把微人事项目的 登录的前端页面和 后台接口都写完了,现在开始做 前后端接口的对接了,前后端接口的对接就需要用到 axios来发送我们的网络请求
把失败信息统一封装起来,不需要去各个页面去处理这个问题
在vuehr项目中创建一个api.js文件,
①.首先把下载好的axios通过`import axios from 'axios'`导入进来
②.通过import{Message} from "element-ui"把element-ui的错误信息的弹框引入进来
③.编写处理响应信息的响应拦截器,该拦截器有success和error两个回调函数,做一些判断
④.编写请求封装的方法postKeyValueRequest,该方法有url和params两个参数,url是请求路径,params是请求参数,返回axios方法,该方法和ajax异步方法类似,也有method,url和data
import
在Login.vue文件里面的script标签里面通过 import {postKeyValueRequest} from "../utils/api"进行导入;
导入了之后,再重新修改methods方法,在判断里面加上postKeyValueRequest('/doLogin',this.loginForm),这个方法就是在api.js文件中封装好的,参数是请求路径和请求参数,请求路径是服务器的路径,参数也是,然后再判断是否有服务器的数据resp,如果有的话,就把它保存到sessionStorage里面去,然后进行跳转,使用this.$router.replace('/home')进行页面跳转
methods
配置请求转发的代理对象
在vuehr项目的根目录下再新建一个vue.config.js文件
//配置请求转发的代理
然后再到浏览器登录,输入用户名和密码登录的详情页如下:
弹出了从服务端返回的信息。
在api.js文件里面把其他登录的请求方法封装一下,想要引入这些封装好的登录方法直接在methods方法里面使用this.方法就行
export
登录页面的跳转
submitLogin
把登录的用户名和密码保存到sessionStorage里面去,然后进行跳转,使用this.$router.replace('/home')进行页面跳转到home页,我们并没有home页,所以要重新写一个home页
在views文件夹里面新建一个Home.vue页面
新建的Home.vue文件里面也只有template、script和style三个模块
<
只是新建了Home.vue页面还不够,还要在router文件夹下的index.js文件里面加上
这两个才能实现真正的跳转
在浏览器的登录页输入正确的用户名和密码之后,点击登录,就直接跳到了home页