|
|
51CTO旗下网站
|
|
移动端

内网穿透与反向代理,浅谈前后台分离

自去年毕业来到杭州,想想也该有大半年了。本身是软件工程的科班出身,在校时理论掌握的还可以。但应用到实践当中去,有些还是不大理解,于是,不停地向带我的人请教,毕竟,三人行,必有我师焉。经过一段时间理论加实践,多少也掌握了其中的门路。

作者:念兮来源:segmentfault|2019-04-22 14:44

 导读

自去年毕业来到杭州,想想也该有大半年了。本身是软件工程的科班出身,在校时理论掌握的还可以。但应用到实践当中去,有些还是不大理解,于是,不停地向带我的人请教,毕竟,三人行,必有我师焉。经过一段时间理论加实践,多少也掌握了其中的门路。

前后端分离(服务器端、客户端分离)

  • 前后端不分离

在从业的过程中,也和其他程序员交流过,他们很多人都没有前后端(服务器和客户端)分离,而是前后端一起做掉。如果前后端不分离,此时的服务器端主要是指java代码,客户端主要是指jsp,通过spring MVC 将数据封装到ResponseBody中,再返回给jSP。JSP拿到数据,渲染页面。这里 不需要考虑端口号的问题。比如:

  1. /** 
  2.      * Created By zby on 16:03 2019/3/5 
  3.      */ 
  4.     @RequestMapping(value = "/", method = RequestMethod.GET) 
  5.     @ResponseBody 
  6.     public Result fun() { 
  7.  
  8.         return null
  9.     } 
  • 前后端分离

当然,前后端分离时,后端还是以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,便于本地测试,路径为根路径,如以下代码:

  1. <build> 
  2.        <defaultGoal>install</defaultGoal> 
  3.        //maven生成的war生成的名字 
  4.        <finalName>cloudCodeSaleManager</finalName>  
  5.  
  6.        <resources> 
  7.            <resource> 
  8.                <directory>src/main/resources</directory> 
  9.                <filtering>true</filtering> 
  10.            </resource> 
  11.        </resources> 
  12.        <plugins> 
  13.            <plugin> 
  14.                <groupId>org.apache.tomcat.maven</groupId> 
  15.                <artifactId>tomcat7-maven-plugin</artifactId> 
  16.                <version>2.2</version> 
  17.                <configuration> 
  18.                    <port>58081</port> 
  19.                    <path>/</path> 
  20.                    <uriEncoding>UTF-8</uriEncoding> 
  21.                    <finalName>zfounder-custmom-member-portal</finalName> 
  22.                    <server>tomcat7</server> 
  23.                </configuration> 
  24.            </plugin> 
  25.        </plugins> 
  26.    </build> 

在真实的项目中,一般会有测试服和正式服,测试服是我们用户的测试数据库和测试服务器,正式服我们用到的是正式数据库和正式服务器,有人说,这样输简直是废话。但是,我们测试数据库和正式数据库是不一样的,因而,如果都写在同一个配置文件中,修改势必麻烦。因而,我们可以在打包时,会有测试包和正式包,这里就涉及到maven的profile的配置文件(是在pom中配置,用来激活配置文件的):

  1. <profiles> 
  2.         <profile> 
  3.             <id>dev</id> 
  4.             <activation> 
  5.                 <activeByDefault>true</activeByDefault> 
  6.             </activation> 
  7.             <build> 
  8.                 <filters> 
  9.                     <filter>../../platform-dev.properties</filter> 
  10.                 </filters> 
  11.             </build> 
  12.         </profile> 
  13.         <profile> 
  14.             <id>prd</id> 
  15.             <build> 
  16.                 <filters> 
  17.                     <filter>../../platform-prd.properties</filter> 
  18.                 </filters> 
  19.             </build> 
  20.         </profile> 
  21.     </profiles> 

我们Tomcat启动后,访问后端接口(url)的格式如下:

scheme://host.domain:port/path/filename

scheme - 定义因特网服务的类型。最常见的类型是 http

host - 定义域主机(http 的默认主机是 www)

domain - 定义因特网域名,比如 runoob.com

:port - 定义主机上的端口号(http 的默认端口号是 80)

path - 定义服务器上的路径(如果省略,则文档必须位于网站的根目录中)。

filename - 定义文档/资源的名称

当然,如果没有域名的话,我们想要访问本地,也可以是这样的:

http://ip:port/path/filename

这里的ip涉及到内网和本机地址。

内网也就是局域网,一般以192.168..打头。本机地址是:127.0.0.1。

它们两个有什么区别呢?

假设访问我的server_path如下所示

  1. constant = { 
  2.     dev: { 
  3.         **server_path: "http://127.0.0.1:58081/",** 
  4.         imgPre: "http://web.cs.wentonghuishou.com/"
  5.         commonParams: {} 
  6.     }, 
  7. _env = "dev"
  8. 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的反向代理。如图所示:

【编辑推荐】

  1. 详解Nginx主要应用场景/反向代理/负载均衡/动静分离/HTTP服务器
  2. Nginx反向代理服务器、负载均衡服务器和正向代理
  3. Nginx——正向代理和反向代理的区别
  4. Nginx反向代理转发Apache配置 之 Cookie去哪儿了?
  5. 实践 | Nginx动静分离与负载均衡的实现
【责任编辑:武晓燕 TEL:(010)68476606】


点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

16招轻松掌握PPT技巧

16招轻松掌握PPT技巧

GET职场加薪技能
共16章 | 晒书包

333人订阅学习

20个局域网建设改造案例

20个局域网建设改造案例

网络搭建技巧
共20章 | 捷哥CCIE

654人订阅学习

WOT2019全球人工智能技术峰会

WOT2019全球人工智能技术峰会

通用技术、应用领域、企业赋能三大章节,13大技术专场,60+国内外一线人工智能精英大咖站台,分享人工智能的平台工具、算法模型、语音视觉等技术主题,助力人工智能落地。
共50章 | WOT峰会

0人订阅学习

读 书 +更多

Web服务安全

Web服务技术是最近几年迅速兴起的一种应用集成技术,而安全问题是影响该技术广泛应用的一个关键因素。这个问题已成为最近几年来国内外研究...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客