vue devserver post失败_用Spring Boot+Vue做微人事项目第三天

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

​