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

导读

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

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

• 先后端不分离

在从业的过程当中，也和其余程序员交流过，他们不少人都没有先后端（服务器和客户端）分离，而是先后端一块儿作掉。若是先后端不分离，此时的服务器端主要是指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>
                <artifactId>tomcat7-maven-plugin</artifactId>
                <version>2.2</version>
                <configuration>
                    <port>58081</port>
                    <path>/</path>
                    <uriEncoding>UTF-8</uriEncoding>
                    <finalName>zfounder-custmom-member-portal</finalName>
                    <server>tomcat7</server>
                </configuration>
            </plugin>
        </plugins>
    </build>

在真实的项目中，通常会有测试服和正式服，测试服是咱们用户的测试数据库和测试服务器，正式服咱们用到的是正式数据库和正式服务器，有人说，这样输简直是废话。可是，咱们测试数据库和正式数据库是不同的，于是，若是都写在同一个配置文件中，修改势必麻烦。于是，咱们能够在打包时，会有测试包和正式包，这里就涉及到maven的profile的配置文件（是在pom中配置，用来激活配置文件的）：

<profiles>
        <profile>
            <id>dev</id>
            <activation>
                <activeByDefault>true</activeByDefault>
            </activation>
            <build>
                <filters>
                    <filter>../../platform-dev.properties</filter>
                </filters>
            </build>
        </profile>
        <profile>
            <id>prd</id>
            <build>
                <filters>
                    <filter>../../platform-prd.properties</filter>
                </filters>
            </build>
        </profile>
    </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以下所示

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的反向代理。如图所示：