一.什么是前端

在网上，我也去找了一些观点，其实都是应用层面的，什么使用一个地址，回车以后就能拿到 .html文件等等

说的也没问题，前端简单点说呢，就是负责展示和美化的页面，大部分在网上我们所看到的就是页面，它是显示，我们每个人都是可视的

前后端是怎么交互的呢？（Jvav版）-LMLPHP

比如上面的淘宝网页面，它都是前端展示出来的，

我们可以清清楚楚的看到有些什么东西，有些什么颜色

它的描述语言就有：

HTML，CSS，JavaScript，Objectvie C，Vue，等等

二.什么是后端

后端的就是负责逻辑处理的，

我们可以从上面的淘宝网图片推出有很多后端的东西

比如图片，文字等等，内容都是后端交给前端来展示的，前端更多的都是展示的框架，那些内容如何展示，就是前端的

而后端是逻辑处理，比如前端传来用户请求，需要计算一些等式，后端就计算，然后传回给前端反馈用户，没有人会使用HTML去计算 1 + 1 =？多少吧

后端还要负责页面的调度，我们在使用淘宝网的时候，你有经常使用地址栏去挑选商品吗？都是页面自己在换来换去的，这些都是后端在调度，你每一次点击，都是后端在做反馈

后端还会负责数据库端的连接，因为数据库中存储着大量的数据，文字，图片，视频等等，需要后端去连接以后给加载出来

后端常用的描述语言：

Java，JavaScript，PHP，C#等等

三.前后端的关系

前后端是怎么交互的呢？（Jvav版）-LMLPHP

如上图，我们前后端的关系就是如上所示

前端的网站，APP，小程序等等展示的内容的应用，我们就举例网站的展示，客户需要计算一个 1+ 1这个等式的值是多少，那么它在当前页面填写了以后，点击提交按钮

这时表单就会以请求的方式，去请求 action 属性后面的地址，这个地址很重要，是后端处理的驱动程序，也叫接口API，一定不能写错，通过这个接口API，处理器会在它的注册文件里去找对应的地址，匹配上了以后就调用这个API的Java处理逻辑

我们 1+ 1等式就会以参数的形式去到这个接口API，经过Java的处理逻辑，然后又它的处理逻辑打包参数返回给前端，此时前端可以通过EL表达式等等，来取到这些参数

这些操作就是前端和后端的一次关联

代码实现操作（部分逻辑展示）：

我们先些一个页面：

前后端是怎么交互的呢？（Jvav版）-LMLPHP

做了一个简单的表单，计算两数字的加法计算，一旦点击开始计算按钮，就会把数据提交给后端

当然是通过地址映射去找后端的，我们使用的是表单，所以action属性后面就是映射的地址，

我们来看看表单的地址写的是什么：

<div id="di1">
    <form action="${pageContext.request.contextPath}/Index/addNumber" method="post">
        <input type="text" name="num1" placeholder="请输入数字">
        <br>
        <br>
        +
        <br>
        <br>
        <input type="text" name="num2" placeholder="请输入数字">
        <br>
        <br>
        <input type="submit" value="开始计算">
        <br>
        <span id="sp1">${answer}</span>
    </form>
</div>

action="${pageContext.request.contextPath}/Index/addNumber"

可以看到action属性后面紧跟的一串字符串，他就是我们要去xml文件匹配的地址，也可以叫接口API，如果你不是Java程序员，可以不用关注${pageContext.request.contextPath}，它的意思就是当前项目的绝对路径的意思，

后面的 /Index/addNumber 才是重点，不管你是那个语言的编程人员都应该知道这串字符串的意思，就是请求地址，这串字符串才是要去后端配置的xml文件中匹配的，

现在我们就假设提交的是 1+ 1，然后点击开始计算，那么紧跟着，它便要去后端找到xml文件，看API接口映射到那个Java.class文件的，交由Java.class文件处理

前后端是怎么交互的呢？（Jvav版）-LMLPHP

如上图：

xml文件中，有一项和我们的请求API是一摸一样的，那就是 url-pattern 项，它就是地址映射，通过这一项就可以确定处理的class文件在哪里

有个东西出现了两次，细心的小伙伴一定看到了，那就是 servlet-name 这对标记是成对出现的，一个表示Java的class文件路径，一个表示接口API

所以通过servlet - name 就可以找到 servlet - class 这一项，我们可以看到它的位置是 top.lostyou.service.addNumber

top.lostyou是我们的项目名称

service是我的项目包名，表示是服务层，用来专门处理请求的

addNumber就是我们的Java代码，也就是要找的class文件

上面描述的操作就是前后端的连接最重要的一环 - - - - - - 地址映射，做完这一步就好办了

找到了对应的class文件，就可以开始处理请求了，还记得我们的请求吗，传进来两个参数 1 和 1，对它们进行加法计算

前后端是怎么交互的呢？（Jvav版）-LMLPHP

这就是我们的Java处理逻辑，request 来获取前端带过来的参数，num1 和 num2 然后一段简单加法计算代码，相信程序猿都应该看的懂，

然后看到一句话：req.getSession().setAttribute("answer","答案是："+sum);

这就是参数封装，我们把一段字符串封装到一个新建对象 answer中，把计算的结果封装在里面

在通过 resp.sendRedirect("/test.jsp"); 这句代码实现的是重定向到那个页面，肯定是重定向到原页面展示数据啊

上面的描述就是一次前端和后端连接和响应，来看看最后的成品效果吧：

前后端是怎么交互的呢？（Jvav版）-LMLPHP

前端传参给后端的方式：

前端传参给后端的方式一般有两种，post和get

两种传参的区别在于：post是不把参数显示在地址栏，而get传参是吧参数显示在地址栏

先看看post方式的地址栏：

http://localhost:8080/test.jsp

就是一个很简单的路径，其它的什么都看不出来，可以得知，其实他是十分安全的，对于使用者而言，不知道地址栏做了些什么，也不需要它们知道

然后就是get方式的地址啦：

http://localhost:8080/test.jsp?num1=1&num2=1#

get方式相对来说就不是很安全了，因为它的参数我们一眼就看完了，有哪些，是多少，都很清楚的可以看到

最后补充一下 a 标签的跳转，它的跳转方式是也是get，它在地址栏的信息就是我们a标签自己填的那些信息

a标签的填写：

<a href="/test.jsp?num1=1&num2=2">a标签</a>

a标签在地址栏的显示：

http://localhost:8080/test.jsp?num1=1&num2=2

以地址栏的展示来看，其实前端提交数据给后端无非两种，一种是显示传输参数，一种隐式传输参数，

再者有肯能会用到的ResultFul风格传参，它注重的是参数，而不是展示，它的传参风格很独特，后面我可以去深入讲一下

静态页面：

相信大家初学计算机就应该知道静态页面和动态页面，它们二者的区别就是有没有交互性，

像常考的题就是有视频，动画，语音等等动态效果的页面是不是动态页面啊，肯定不是

今天的学习，我们就应该知道什么是动态页面了，那就是有没有后端反馈的页面，

静态页面它就是一个普通的前端，没有后端给它实时处理反馈，而动态页面就是标准的前后端一起，有反馈的页面

四.疑问

上述的例子，计算1+1=？，难道前端自己不可做吗？或者说，所有的逻辑计算，前端都不能做吗？

其实大部分后端做的事情，前端都可以做，并且实现起来也很简单，

就比如那个 1+1=？的例子，我们使用前端来实现一遍：

这里我使用的是js实现

<script>
    function fun1() {
        let n1 = $('#num1').val();
        let n2 = $('#num2').val();
        let sum =0;
        sum = parseInt(n1)+parseInt(n2);
        $('#sp1').text(sum);
    }
</script>

相信大家一定不陌生js的代码，它也是前端三要素的一种，即网页的行为，还有HTML，即网页的骨架，CSS即网页的美化

使用js来处理的逻辑是：

用jQuery指向id选择器，然后拿到文本框的内容，也就是1和1

然后简单的计算，

再通过选择器选择到要展示答案的一行，通过text关键字写入节点，依旧可以算出答案

前后端是怎么交互的呢？（Jvav版）-LMLPHP

结果如上图：

答案也没有问题，回到我们的疑问，既然后端可以做的事情，为什么还要分前后端呢？不能写到一起吗？

这就要涉及到互联网发展伴随着的服务开发

Java的开发发展中有几个代表性的时代：model one ，model two ，微服务时代

model one时代：

在model one时代，我们页面和处理逻辑是写在一起的，不管是什么语言描述，都是一个功能的所有代码都写在一起，无什么前后端之分

这样的开发方式高效，并且难度低，实用性高，自己写的功能知道要写那些页面，怎么处理页面上的需求，以及数据怎么展示，

并且那个时代，互联网的美化刚需不高，无非就是对数据进行增删改查，对代码逻辑都不需要过高的要求

就比如Java的jsp，它就是html和Java代码一起写的，

我们可以来简单看看是怎么写的：

前后端是怎么交互的呢？（Jvav版）-LMLPHP

如上图：

前面就是简单的HTML语言

注意点在 <% %>之间，那里面写的是Java代码，这就是我们说的model one时代，前端后端是写在一起的，我还可以在Java代码后面写HTML代码，

也可以把Java代码写在最前面，都是可以的，这种代码风格就是完全嵌套在一起，这只是一个简单加法实现，你要想，要是实现一个应用功能，代码量右如何呢？

后面，随着互联网的发展，网络平台越来越大，框架体系也越来越多，一个单文件下的代码量也越来越多，逻辑复杂，伴随的即使排错十分麻烦

我们的开发人员就开始着手于model two时代了

model two时代：

model two时代可以说就是我们现在正在经历的时代，也是使用最多的，

它就是大名鼎鼎的前后端分离，典型代表就是MVC框架

前后端是怎么交互的呢？（Jvav版）-LMLPHP

如上图，就是我们前后端分离的框架

其中

view：视图层，依旧负责数据展示，还有递交请求，请求全部递交到controller层，它来负责到底谁来处理这个请求，这个就是前端

controller和model统称为后端

controller：它就不用多描述了吧，就是负责请求转发的

model：也可以叫服务层，专门用来处理前端的请求的，处理完成后交给controller，由他进行参数回显

从上面看，是不是感觉MVC框架已经很合理了，但是现在，当下最流行的又变成了微服务了

微服务：

实现微服务的框架大家应该都知道，Java实现微服务框架包括：Spring Boot 和 vue

微服务的思想指的是把原来的model层继续拆分，

以前是面向请求，一个请求可能跨越多个服务，是一连串的服务

现在微服务是面向服务编程，以一个服务为单位来处理

前后端是怎么交互的呢？（Jvav版）-LMLPHP

如上图：

这是国外的大佬级人物Martin Fowler和James Lewis，他们两个最早系统的讲解了什么是微服务

从图片也可看出来，以前的服务是按部分扎堆存在的，而现在微服务阶段，不同的服务都是分开的

详细内容可以参考：

https://martinfowler.com/articles/microservices.html

Martin Fowler和James Lewis的原文地址

总结：

为什么现在不用前后端写在一起的框架了？

逻辑复杂，维护不便
互联网的发展，对不同的请求处理规范变化
前端的工程化，系统化是趋势
模块化的开发，便于后期维护

一句话总结：就是为了适应技术和业务发展的需求

~java小白~

前后端是怎么交互的呢？（Jvav版）

一.什么是前端

二.什么是后端

三.前后端的关系

代码实现操作（部分逻辑展示）：

前端传参给后端的方式：

静态页面：

四.疑问

model one时代：

model two时代：

微服务：

总结：