微服务和VUE入门教程(5)：前后端交互

微服务和VUE(5)：前后端交互1.了解什么是跨域当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。跨源资源共享 Cross-Origin Resource Sharing (CORS) 是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReu

hdubigben

3467人浏览 · 2020-08-12 15:02:29

hdubigben · 2020-08-12 15:02:29 发布

微服务和VUE入门教程(5)：前后端交互

1.了解什么是跨域

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。

跨源资源共享 Cross-Origin Resource Sharing (CORS) 是一个新的 W3C 标准，它新增的一组HTTP首部字段，允许服务端其声明哪些源站有权限访问哪些资源。换言之，它允许浏览器向声明了 CORS 的跨域服务器，发出 XMLHttpReuest 请求，从而克服 Ajax 只能同源使用的限制。

另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。

前后端分离开发必然涉及到跨域的问题，后端的IP，端口断然跟前端不同，先了解一下。

正向代理和反向代理

先说正向代理，

举个俗俗的例子，我缺钱，C有钱，但C不直接借给我，我就去找B，让B去帮我借钱。B就是我的代理。

所谓正向代理就是顺着请求的方向进行的代理，即代理服务器是由你配置为你服务，去请求目标服务器地址。

再说反向代理，

反向代理就是我缺钱，我去找一个网贷平台，提交资料后，网贷平台直接将钱打给我。但是我不知道，也不用关注网贷平台的钱从哪里来。网贷平台内部他们可能从哪一个财主那里融的钱。对我而言网贷平台和他们的金主是一起的。

同样通过上面我们例子可以看到，此时的代理服务和后面的目标是一个系统的（网贷平台和金主）。他们是对外提供服务的，所以称为反向代理，代理的是后的人。

我们前端要用到的是反向代理，接下来会仔细说明。

2.前端相关配置

2.1 反向代理

寻找main.js文件，如下图：

在这里插入图片描述

打开，输入下面这几行代码，完成反向代理的配置，其中8803是后端网关zuul的端口。

// 设置反向代理，前端请求默认发送到 http://localhost:8802/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8803/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios

在这里插入图片描述

2.2 跨域支持

在config/index.js找到proxyTable,修改为以下代码：

   proxyTable: {
      '/api': {
        target: 'http://localhost:8803',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },

2.3登录验证页面

找到我们以前写的登录界面

在这里插入图片描述

这里@click="login"是指点击“登录’'按钮，触发login方法，因此我们需要编写login方法。
在这里插入图片描述

在data()下面新建methods:{},在这里面编写login方法，后端接口为“/user/login”。

3.后端接口编写

我们开始编写后端的接口“/user/login”。

3.1.修改my-user中的controller文件

打开my-user中的controller文件，输入以下代码；

    @RequestMapping(value = "/login", method = RequestMethod.POST)
    public JSONObject login(@RequestBody JSONObject jsonObject){
        String userName = jsonObject.getString("userName");
        String password = jsonObject.getString("password");
        //获取用户名，并打印
        System.out.println(userName);
        System.out.println(password);
        JSONObject result = new JSONObject();
        //若正确返回200，若错误返回400
        if(userName.equals("xiaoming")&& password.equals("123456")){
            result.put("state",200);
        }else{
            result.put("state",400);
        }
        return  result;
    }

3.2 引入相关依赖

根据restful接口规范，我们要求传进来的是JSON对象，传出的也是JSON对象。因此我们在父工程的pom文件中引入JSON的依赖：

            <!--json-->
            <dependency>
                <groupId>com.alibaba</groupId>
                <artifactId>fastjson</artifactId>
                <version>1.2.51</version>
            </dependency>

my-user的pom文件中输入：

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>fastjson</artifactId>
        </dependency>

这样为了是子模块中依赖文件的版本都是统一的，也是为了方便修改各个依赖文件的版本。

4.验证

重启my-user微服务，打开前端登录页面： http://localhost:8080/#/login

输入：xiaoming，123456

IDEA控制台输出，说明前端数据已经传入后端：

在这里插入图片描述

浏览器控制台输出，说明后端数据也可以传到前端：
在这里插入图片描述

当然，如果输出用户名和密码，返回400
在这里插入图片描述

5.总结

因为设计到跨域问题，后端controller文件在类名前面一点要加上@CrossOrigin注解

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^