内网穿透与反向代理,浅谈前后台分离
来源:SegmentFault
时间:2023-01-17 11:40:20 325浏览 收藏
本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的,希望这篇《内网穿透与反向代理,浅谈前后台分离》对你有很大帮助!欢迎收藏,分享给更多的需要的朋友学习~
导读
自去年毕业来到杭州,想想也该有大半年了。本身是软件工程的科班出身,在校时理论掌握的还可以。但应用到实践当中去,有些还是不大理解,于是,不停地向带我的人请教,毕竟,三人行,必有我师焉。经过一段时间理论加实践,多少也掌握了其中的门路。
前后端分离(服务器端、客户端分离)
- 前后端不分离
在从业的过程中,也和其他程序员交流过,他们很多人都没有前后端(服务器和客户端)分离,而是前后端一起做掉。如果前后端不分离,此时的服务器端主要是指java代码,客户端主要是指jsp,通过spring MVC 将数据封装到ResponseBody中,再返回给jSP。JSP拿到数据,渲染页面。这里 不需要考虑端口号的问题。比如:
/** * Created By zby on 16:03 2019/3/5 */ @RequestMapping(value = "/", method = RequestMethod.GET) @ResponseBody public Result fun() { return null; }
- 前后端分离
当然,前后端分离时,后端还是以java代码为主,前端就变化多端了。
. 后端
java通过springMVC的Rest模式的Controller层,接收前端页面传来的接口和参数,经过一系列的入参校验,调用事务层(也就是service层)这里主要是hibernate(mybatis)的事务层,实现数据库的事务操作。再调用*dao(data Access object)层实现事务的原子性操作,即将瞬时态的java对象转化为持久状态的数据库对象。层层深入,层层返回,将通过Result回传给前端。
. 前端
前端主要用h5进行页面布局,CSS3实现页面的美化。JavaScript配合jQuery调用后端的接口,传递参数和获取后端回传的数据。通过vue.js实现回传的数据的双向绑定。还可能涉及到其他框架,比如页面布局的bootstrap,数据table方式展示的jqgrid等等。
前后端分离,如何实现数据交互
我们将写好的java代码部署在服务器上,比如Tomcat、Jboss主流服务器。这里以Tomcat来讲解,我们将项目部署在Tomcat的上,具体如何部署Tomcat,可以参考这篇教程,Tomcat8权威指南。我们现在一般在maven中以插件的方式配置Tomcat,便于本地测试,路径为根路径,如以下代码:
install //maven生成的war生成的名字cloudCodeSaleManager src/main/resources true org.apache.tomcat.maven http://ip:port/path/filename这里的ip涉及到内网和本机地址。
内网也就是局域网,一般以192.168..打头。本机地址是:127.0.0.1。它们两个有什么区别呢?
假设访问我的server_path如下所示constant = { dev: { **server_path: "http://127.0.0.1:58081/",** imgPre: "http://web.cs.wentonghuishou.com/", commonParams: {} }, } _env = "dev"; window.constant = constant[_env];我做后端Java的,开启了Tomcat。我的同事是做前端的,他用上面的server_path访问我,也就是说,想通过我本机ip请求我的接口,是没办法访问我后端的接口。因为,这是我本机的ip,只有我个人才能访问。因而,我自己是可以访问的。如图所示:
如果他把server_path改成了server_path: "http://192.168.40.177:58081/",,那么,他想通过局域网访问我的接口,这是可以访问我的。因为,我们同处在这个局域网下的。如图所示:
外网如何访问,也就是,内网穿透
假如,我和我的同事,不在同一局域网,但他,想访问我后端的接口,这时该怎么办?应该是需要摆脱网域限制,能够访问我的内网,也就是访问的本机。这时,就出现了,内网穿透的软件,比如ngrok,小米球等。
小米球可以实现内网穿透,他是怎么实现内网穿透,主要是通过域名的反向代理,这也就是所谓的反向代理。其实,反向代理没那么高大上,不要被它吓到了。当然,这里需要输入端口号,这里前端的hbuilder的端口号,也就是8020端口号。为什么需要端口号,端口号能够确定本机唯一的进程。比如mysql的3306端口号,Tomcat的80端口号等。为什么是前端的端口号,因为我们首先访问的是页面,页面通过server_path来访问后端接口,这里我们不需要考虑这方面的。
小米球的配置如下,这里是免费版的:
当我们,在浏览器的地址栏输入http://zby.ngrok.xiaomiqiu.cn...,你会发现,它能访问到我的前端页面,并调用了我后端的接口,这就实现了ip的反向代理。域名解析也是同样的道理,利用了ip的反向代理。如图所示:今天关于《内网穿透与反向代理,浅谈前后台分离》的内容介绍就到此结束,如果有什么疑问或者建议,可以在golang学习网公众号下多多回复交流;文中若有不正之处,也希望回复留言以告知!
-
499 收藏
-
244 收藏
-
235 收藏
-
157 收藏
-
101 收藏
-
475 收藏
-
266 收藏
-
273 收藏
-
283 收藏
-
210 收藏
-
371 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 542次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 507次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 497次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 484次学习