前端html页面如何结合后端,前端开发与后台交互机制

传统开发模式：

一般传统上的开发协作模式有两种：

一种是前端先写一个静态页面，写好后，让后端去套模板。静态页面可以本地开发，也无需考虑业务逻辑只需要实现View即可。不足是还需要后端套模板，这些前端代码后端需要浏览一遍，以免出错。

另一种协作模式是，前端直接去写模板，这样做的问题在于，前端编写过程中很依赖与后端环境，如果当后端没写完的情况下，前端几乎没法干活。

从传统到前后端分离：

前后端分离意味着，前后端之间使用 JSON 来交流，两个开发团队之间使用 API 作为契约进行交互。从此，后台选用的技术栈不影响前台。当后台开发人员选择 Java 的时候，我可以不用 JSP 来编写前端页面，继续使用我的 React 又或者 Angular。而我使用 React 时，也不影响后台使用某一个框架。安卓和IOS app也可以使用 JSON 来和后端交流。

前后端分离的核心：后台提供数据，前端负责显示

整体流程

一个用户打开一个网页，到看到一个网页，经历了什么流程？

前端接收用户请求---》前端请求服务器---》后端接收前端请求---》后端找到负责处理的程序---》后端处理程序找到要传输给用户的前端页面---》后端将该前端页面留出位置---》后端到数据库取数据---》后端把数据放在前端留出来的位置上---》结合成真正用户看到的html文件---》传输给前端---》用户看到界面。

1、前端请求数据URL由谁来写

在开发中，URL主要是由后台来写好给前端。

若后台在查询数据，需要借助查询条件才能查询到前端需要的数据时，这时后台会要求前端提供相关的查询参数(即URL请求的参数)。

2、接口文档主要由谁来写

接口文档主要由后台设计和修改。

后台直接跟数据打交道，最清楚数据库里有什么数据，能返回什么数据。

前端只是数据的被动接受者，只是接口文档的使用者。

使用过程中，发现返回的数据部队，则跟后台商量，由后台修改。

切记：前端不能随意更改接口文档，除非取得后台同意。

3、前端与后台交互的数据格式

主要是JSON，XML现在用的不多

4、前端与后台的交互原理

关注点：接口地址、前端请求的参数、后端返回的参数。

调一下接口，看一下返回的数据。

5、前端请求参数的形式

GET和POST两种方式

GET从指定的服务器中获取数据，POST提交数据给指定的服务器处理

6、前端应该告知后台那些有效信息，后台才能返回前端想要的数据

先将要展示的页面内容进行模块划分，将模块的内容提取出来，以及方便前端的一些标志值等，将所有想要的内容和逻辑告知后端

后端从数据库里面去查询相应的数据表以获得相应的内容或者图片地址信息

URL中的参数主要是根据后台需要，若后台需要一个参数作为查询的辅助条件，前端在URL数据请求时就传递参数

7、前端如何把页面信息有效传达给后台，以及后台如何获取到这些数据

所有前端请求的URL后面的参数都是辅助后台数据查询的

若不需要参数，那后台就会直接给个URL给前端

8、前端应该如何回拒一些本不属于自己做的一些功能需求或任务

前端负责把数据展示在页面上

清晰的认识自己需要做的需求和任务

9、当前端在调用数据接口时，发现有些数据不是我们想要的，那么前端应该怎么办

把请求的URL和返回的数据以及在页面的展示的情况给后台看【后台查询数据、取数据、封装数据方面等蛮难处理的】

10、为什么需要在请求的时候传入参数

后台在查询数据库的时候需要条件查询

参考文档