微服务和VUE入门教程(5)： 前后端交互 |
您所在的位置：网站首页 › 前端跟后端怎么连接 › 微服务和VUE入门教程(5)： 前后端交互 |
微服务和VUE入门教程(5)： 前后端交互
|
微服务和VUE入门教程(5)： 前后端交互
微服务和VUE入门教程(0): 着手搭建项目 微服务和VUE入门教程(1): 搭建前端登录界面 微服务和VUE入门教程(2): 注册中心 微服务和VUE入门教程(3): user微服务的搭建 微服务和VUE入门教程(4)：网关zuul的搭建 微服务和VUE入门教程(5)： 前后端交互 微服务和VUE入门教程(6)：连接数据库-mybatis 微服务和VUE入门教程(7):配置中心-config 微服务和VUE入门教程(8):前端主页的编写 微服务和VUE入门教程(9)： token验证-token后端生成以及前端获取 微服务和VUE入门教程(10)： token验证-前端登录拦截以及token过期提醒 微服务和VUE入门教程(11): mybatis 动态查询 微服务和VUE入门教程(12)：前端提示搜索框的实现 微服务和VUE入门教程(13)： token验证-zuul拦截与验证 微服务和VUE入门教程(14)： 热部署 微服务和VUE入门教程(15)： 课堂小知识 微服务和VUE入门教程(16)： zuul 熔断 微服务和VUE入门教程(17)： VUE 响应拦截器 微服务和VUE入门教程(18)： 前端接口模块化 微服务和VUE入门教程(19)： VUE组件化–子组件向父组件通信 微服务和VUE入门教程(20)： VUE组件化–父组件向子组件通信 微服务和VUE入门教程(21)： springboot中定时器-Schedule 微服务和VUE入门教程(22): 页面长时间未操作自动退出登录 微服务和VUE入门教程(23): 微服务之间的调用 微服务和VUE入门教程(24): 微服务之断路器 微服务和VUE入门教程(25): 微服务之Hystrix-dashboard 微服务和VUE入门教程(26): 微服务之turbine 微服务和VUE入门教程(27)：VUE前端工程打包 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
在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的依赖： com.alibaba fastjson 1.2.51my-user的pom文件中输入： com.alibaba fastjson这样为了是子模块中依赖文件的版本都是统一的，也是为了方便修改各个依赖文件的版本。 4.验证重启my-user微服务，打开前端登录页面： http://localhost:8080/#/login 输入：xiaoming，123456 IDEA控制台输出，说明前端数据已经传入后端：
浏览器控制台输出，说明后端数据也可以传到前端： 当然，如果输出用户名和密码，返回400 因为设计到跨域问题，后端controller文件在类名前面一点要加上@CrossOrigin注解 |
【本文地址】