前端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、为什么需要在请求的时候传入参数
后台在查询数据库的时候需要条件查询
参考文档
前端html页面如何结合后端,前端开发与后台交互机制相关推荐
- 前端如何高效的与后端协作开发
转载 1.前后端分离 前端与后端的分离,能使前端的开发脱离后端的开发模式,拥有更大的自由度,以此便可做前端工程化.组件化.单页面应用等. 可以参考:前后端分离.web与static服务器分离(http ...
- 【转】Vue.js入门教程(一)从静态页面到前后端分离开发
第一章:基础知识 我能看懂吗? 只要你现在能用html+css+js制作一个静态页面,相信我,你100%可以读懂这篇文章. 本文尤其适合那些想要了解前后端分离开发技术,或者刚刚脱离传统MVC开发模式的 ...
- 后端系统开发之白名单机制
前言 后端系统中经常会听到"某某白名单"的名字,为什么要有白名单呢?使用白名单机制有什么好处? 在大型后端系统中,白名单机制是必不可少的 概念 白名单的概念与"黑名单&q ...
- 08-HR-权限管理模块(给员工分配角色,权限点管理页面开发,给角色分配权限,前端权限-页面访问权(路由),前端权限-按钮操作权)
权限管理模块 RBAC的权限设计思想 采用方案: RBAC的权限模型,RBAC(Role-Based Access control) ,也就是基于角色的权限分配解决方案 权限控制目标:不同的用户登录系 ...
- 前端该不该转后端 .前端的路不知道怎么走,
我,Scott,一家创业公司的 CTO. 从业 6 年却很少写文章,近一年来接触了几十个刚毕业的前端新人,也面试了 100 多个前端工程师和 Nodejs 工程师,对于前端发展的这个职业算是有些感触吧 ...
- 后端开发者开发前端必会的工具(一):样式调试篇
又来为大家分享干货了,今天主要是分享一点关于后端工程师开发前端比较苦恼的一个问题<如何去调试前端?>,我相信这是所有后端开发者比较困惑的,如果有这个困惑的,记得关注"程序员晓晓& ...
- gulp+PC前端静态页面项目开发
前言: 现在单页面很流行,但是在 PC 端多页面还是常态,所以构建静态页面的工具还有用武之地 gulp构建前言: 如今我们开发web网页的方式主要有几种,使用vue-cli.create-react- ...
- 【单页面博客从前端到后端】基于 DVA+ANTD 搭建博客前后台界面
在上篇文章我们已经搭建好了基础的开发环境,接下来会介绍如何引入 DVA 和 ANTD ,以及在引入过程中需要注意的问题.这里只会详细的书写部分组件,其他的组件都是大同小异.你可以在 github仓库 ...
- 014-Axios Ajax:前后端分离概述,发送json类型的参数,前后端分离开发:在线接口文档,前端工程化、Element、nginx
第一节 Ajax概述 1.概述 概念: Asynchronous JavaScript And XML,异步的JavaScript和XML. 作用: 数据交换:通过Ajax可以给服务器发送请求,并获取 ...
最新文章
- 【经典课程】李宏毅机器学习2020版正式上线!!!
- 配置tomcat虚拟主机
- pytorch多标签分类交叉熵loss
- 随机数计算html,随机数的产生方法 电脑随机数产生的计算具体方法
- 单曲循环 翻译_有没有那么一首歌是你的单曲循环?
- lvs dr模式安装
- Android Monkey压力测试
- 一 MVC - HtmlHelper
- PHP Cookbook读书笔记 – 第16章互联网服务
- [SDOI2005]动物园 匹配
- Asp.net源码上周更新目录(5.12-5.18)
- Unity常用工具类
- P1955 [NOI2015]程序自动分析
- 【easyui】之DataGrid数据显示
- [生存志] 第57节 孔子微言春秋大义
- python np arange_python – 为什么np.arccos(1.0)在np.arange的情况下给出nan?
- 【安卓开发 身份录入系统 APP】
- ubuntu16.04,zed7020,sdsoc,xfOpenCV,arm-linux,OpenCV3.4.1
- mysql 处理emij表情_判断是否emij表情
- UNIX环境高级编程 - UNIX基础知识