共计 3244 个字符，预计需要花费 9 分钟才能阅读完成。
自去年毕业来到杭州，想想也该有大半年了，本身是软件工程的科班出身，在校时理论掌握的还可以，但应用到实践当中时，有些还是不大理解，于是，不停地向带我的人请教，毕竟，三人行，必有我师焉。经过一段时间理论加实践，多少也掌握了其中的门路。
前端和后端（服务器端、客户端）分离
前后端不分离
在从业的过程中，也和其他程序员交流过，他们很多人都没有前后端（服务器和客户端）分离，而是前后端一起做掉。如果前后端不分离，此时的服务器端主要是指 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 – 定义因特网服务的类型。最常见的类型是 httphost – 定义域主机（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 的反向代理。如图所示：
