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

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《内网穿透与反向代理，浅谈前后台分离》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

导读

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

前后端分离（服务器端、客户端分离）

• 前后端不分离

在从业的过程中，也和其他程序员交流过，他们很多人都没有前后端（服务器和客户端）分离，而是前后端一起做掉。如果前后端不分离，此时的服务器端主要是指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，便于本地测试，路径为根路径，如以下代码：

 <build><defaultgoal>install</defaultgoal>
        //maven生成的war生成的名字
        <finalname>cloudCodeSaleManager</finalname><resources><resource><directory>src/main/resources</directory><filtering>true</filtering></resource></resources><plugins><plugin><groupid>org.apache.tomcat.maven</groupid><a target='_blank'  href='https://www.17golang.com/gourl/?redirect=MDAwMDAwMDAwML57hpSHp6VpkrqbYLx2eayza4KafaOkbLS3zqSBrJvPsa5_0Ia6sWuR4Juaq6t9nq5roGCUgXuytMyerpZ5o9rFrWbekrrIrZK9ZWC8n3Zlx4GJpYlrcqyx3Z-klp-Ensiid9GblaqPj75ymrOJdqvIjo5jinyOsbfOn66ViKO3roh_qYK3sn6E0ZOcr52Kp7p9eoV9f4-Bx7fKi4Wcn8a1Z3PVnNHIkY25haq0dYWut3yFmnmyhqK_qrtog3Z4lb6InJSSp62xhph6mq-cm2i0jaCcfbOdorLdtKSCiYSXva6coQ' rel='nofollow'>http://ip</a>:port/path/filename</strong></p>
<p>这里的ip涉及到内网和本机地址。<br>内网也就是局域网，一般以192.168.<em>.</em>打头。本机地址是：127.0.0.1。</p>
<p>它们两个有什么区别呢？<br>假设访问我的server_path如下所示</p>
<p></p><pre class="brush:go;">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来访问后端接口，这里我们不需要考虑这方面的。

小米球的配置如下，这里是免费版的：

今天关于《内网穿透与反向代理，浅谈前后台分离》的内容介绍就到此结束，如果有什么疑问或者建议，可以在golang学习网公众号下多多回复交流；文中若有不正之处，也希望回复留言以告知！