动态Web应用开发:前端 / 后端 / 数据库

更多
2018年12月21日 10点40分 作者:叶飞 修改

动态页面

最初的网页真的就是服务器上的一个个.html文件。但很快,随着互联网的蓬勃发展,人们发现了这样做的问题(@想一想@:是什么?),能不能让普通用户也能方便的参与互联网内容的贡献呢?

大概在2000年前后,三大主流动态网站技术横空出世!在未加“遮掩”的情况下,可以通过网址中的文件名后缀判断网站使用的技术:

  • .php => PHP
  • .jsp => Java Web, 
  • .asp => ASP

所有的Web开发技术都后缀一个“P”,比如:ASP、JSP、PHP,为什么?Page(页面)的意思,S代表Server,所以他们都是在服务器(Server)端生成Html页面(Pages) ,然后将整个页面发送给前端。

注意:这种Page不是真的有一个真实的、静态的文件存在,而是动态生成的,所以被称之为动态页面;动态页面也不是“页面上有动态效果”的意思,页面要懂,得靠前面讲的JavaScript

演示:sample.17bang.ren的源代码


流程梳理

动态页面开始,才需要编程……

和静态页面不同,浏览器发起的请求(request)达到服务器之后,其中的Web应用会和数据库连接:

  • 存储(更改/删除)某些数据,比如注册时用户输入的名称和密码
  • 获取某些数据,比如文章的标题正文……,然后将其组成为HTML页面返回

从这张图可以看出,真实开发中,你可以被分配做:

  • 前端:因为你学了HTML+CSS+Javascript;
  • 后端:因为你学了C#,了解Http协议等Web开发常用知识;
  • DBA:因为你学了SQL……


Web服务器

既可以指物理的计算机,也可以指计算机上的一个专门的程序,或者安装了这种程序的服务器

专门响应HTTP请求,提供网上信息浏览服务(来源:百度百科

  • IIS:ASP.NET & ASP & PHP
  • apache:PHP
  • tomcat:JavaWeb
  • Nginx:严格来说,它不是web服务器而是一个

反向代理服务器

不使用代理:服务器 <-> 浏览器 直接交互,直接知道对方的IP地址。

正向代理和反向代理的区别在于:究竟谁对谁暴露?

  • 正向:国内访问google,我(客户端)知道目的地,但服务器不知道请求的发起
  • 反向:你以为你访问的是google,实际只是google的一个代理

为什么要这么一个反向代理?主要是集群、负载均衡,将请求(动态)均匀的分配到不同的Web服务器

PS:通常配合Keepalived使用,避免nginx单点崩溃


AJAX诞生

Web2.0时代来临之后,除非发布,我们需要更多的功能,比如:点个赞……

根据我们目前掌握的知识,就只能在赞上设置一个链接,点击后重新向服务器发送一个请求,然后根据服务器的响应重新加载整个页面。

这样会带来两个问题:

  • 性能损耗:只改动一小块内容,加载了整个页面
  • 用户体验:频繁的刷新页面

@想一想@:还有哪些类似的功能?发布评论、检查用户名是否重复、换一批关键字……

JavaScript可以“局部”的改变页面的DOM元素,但如果改动所需要的数据必须从服务器端获取,怎么办呢?

Asynchronous Javascript And XML

  • 异步:不刷新页面,不阻碍其他语句执行
  • Javascript:操作语言
  • XMLHttpRequest:核心对象,在IE5中首次引入 (JSON => XML)

Ajax诞生于微软(Outlook Web Access),成名于Google(suggest/map/……)。遥想当年,Google提示和Google地图惊艳全场!

可以说,没有Ajax,就没有JavaScript的今天!(干掉了一系列的Rich Internet Application竞争对手:flash/Silverlight……,造就了今天的“大前端”)

JQuery

Ajax在当时,是一门非常“高级(复杂)”的技术。

让Ajax成为“大路货”,让所有开发人员都用得起的是JQuery类库,它如此流行,以至于有些程序员会将Ajax和JQuery混为一谈!

PS:JQuery的另外一个作用是解决了浏览器之间的兼容性、DOM元素的获取问题……

在这个阶段(真正的前后端分离之前),JQuery就是巅峰之作无冕之王!

但JQuery(JavaScript)在这个时候,还是只起一个“辅助”的、操作部分DOM元素的作用,主体的HTML页面仍然有动态页面技术实现……


前后端分离

人的欲望是无止境的。

最开始Ajax只是一个用于提高网站性能的、锦上添花的小技巧,即:

  • 整个网站还是由一个一个的页面组成
  • 页面的大部分(主体)内容还是服务器端生成的HTML内容
  • 页面的局部内容由Ajax更新

但能不能更进一步呢?比如:页头/页脚,每一个页面都是相同的,但每次请求一个页面,其中都包含着内容完全相同的页头页脚,这是不是一种性能浪费呢?

PPT演示:哪怕使用Ajax也无法减小带宽耗用

大家开始尝试一种新的架构方案:

  1. 整个网站就一个静态的HTML页面
  2. 但根据用户的操作,页面可以通过Ajax加载不同的内容,呈现不同的效果
  3. 更进一步,前端只要服务器传送数据(非HTML格式),然后根据数据自行“组装”生成HTML页面内容

大家尤其要注意第3条,这其实才是真正的前后端分离,或者说前后端分离能够得到普及应用的最大原因,因为:

随着Mobile设备的普及,大量的项目既要有一个桌面版的网页,又要有一个手机APP,原生的手机APP(非HTML套壳的)是不能解析呈现HTML内容的。

为了重用,不如干脆后端就只提供格式化的数据(比如JSON/XML),怎么处理这些数据,完全由前端(浏览器,或者APP)负责。


利弊分析

好处除了上文所述,还有一个更现实的好处:

人员配置更方便:前端开发人员只需要学前端,后端开发人员只需要学后端,降低人力资源成本(IT行业总体还是非常缺人的,培训班速成,O(∩_∩)O哈哈~)

但也不要忽视它的问题:

  1. SEO:目前的搜索引擎不能抓取由JavaScript获得的数据,获取之后也无法用URI定位
    PS:APP形成了一个个的“信息孤岛”,阻碍了互联网开放分享的精神
  2. 开发过程中前后端“扯皮”:前端等后端,后端等前端,前后端一起等API……
  3. 只学前/后端,不利于同学们对项目整体的把握(尤其是培训,本来时间就紧,还要包装奖励,(逃.jpg……)
    PS:理解同学们急迫的心情,但如果有条件,建议还是学全栈


RESTful

和前后端分离一起,经常被提到的一个名词就是Restful(Representational State Transfer),(懵.jpg

其实RESTful是一种设计架构风格,类似于家装服饰:北欧风/日式/韩版……

主要特点:

  • 通过HTTP(注意HTTP协议的无状态State)请求获取资源(URI)
  • 通过定义HTTP请求中的方法(method)表示(仅仅是语义上的,没有强制性,就好比HTML5的语义标签一样)服务端资源的操作(状态转化State Transfer):
    • GET:获取
    • POST:新建
    • PUT:更新
    • DELETE:删除
    个人意见:在某些特定情形下,区分GET/POST就已经有些“迷茫”了,再添加PUT和DELETE,概念进一步混淆
  • 数据的传递形式包括:JSON/XML/HTML片段 (表现层Representation)

RESTful不仅仅适用于B/S架构:随着前后端分离,区分B/S和C/S架构没有意义了


Web开发模式

以下内容,对小白而言略有抽象,既可以作为预习,也可以作为复习。

没有模式

HTML标签和和(验证、跳转、运算、if...else等等的)逻辑代码都全部直接写在(.jsp/.php/.asp)页面上。

演示:jsp页面代码

Page-Model

这是飞哥自己取的名字(毕竟在那个年代,也没有谁想到过“模式”),其特点是:请求直接到达页面(Page),但表现和逻辑相分离:

  • (.jsp/.php/.asp)页面上只有和呈现相关的简单逻辑,比如:循环的展现列表内容,哪部分内容显示哪部分不显示……
  • 复杂的逻辑,比如:验证、运算、连接数据库等,由页面相应的、单独的类/对象处理

演示:JSP+JavaBean 或 ASP.NET WebForm/RazorPages

MVC

在Page-Model的基础上,将Model进一步拆分:

  • Model:模型,只作为数据容器(Data Transfer Object)使用
  • Controller:负责逻辑预算。

另外一个区别:请求不再直接到达Page,而是Controller,所有这时候Controller居于中心地位,而不是页面,页面也被称之为View(视图)。

但从url到controller,比如:/Code/261需要由CodeController处理,这中间一般都需要一个转换/映射,这个工作被称之为:route(路由)或者dispatch(分发)

演示:SpringMVC(Java)和ASP.NET MVC(C#)

MVVM

Model View ViewModel,其实就是用ViewModel替代了Controller。

ViewModel相比Controller最大的不同,就是能够在View和Model之间自动同步更新!即:

  • 如果Model发生了改变,自动更新View;
  • 如果View上Model绑定的元素发生了变化,自动的更新Model

在传统的B/S架构中,这其实是很难实现的,因为View在客户端浏览器上,Model在服务器端,相距过于遥远。直到Ajax问世,前后端分离……

所以是前端框架,比如:vue.js、react.js等采用了这种模式。

其他

组件(component)化:把页面切分成一个一个的组件(部分),甚至页面本身,也可以看做一个组件。

组件必然就有一个从无到有,再从有到无的过程,这个过程就被称之为组件的生命周期(life-cycle)

管道(pipeline)中间件(middleware:将HTTP请求从到达到服务器,到响应生成的整个过程想象成穿越一个管道,管道中可以预置/自定义配置一个一个的中间件。

开发人员可以:

  • 使用组件,实现最大限度的重用;
  • 利用生命周期中暴露的“可插拔事件/方法”等为组件添加逻辑,更进一步的重用组件。比如,在组件初始化(init)的时候自定义的获取数据,在组件销毁时自动更新数据。
  • 在管道中自定义引入/自定义添加中间件,控制框架对HTTP请求的处理,比如:在请求到达时新开一个数据库连接打开事务,在请求结束时自动的关闭数据库连接,提交事务。


作业























Web以外

除了做网站还能干啥?多了去了!

基本上啥都可以做

  • windows桌面开发:WinForm/WPF
  • APP:Xamarin,跨平台(Android/iOS)的APP开发框架
  • 游戏:页游(H5和Js)/桌游(unity)
  • 人工智能和大数据
  • 物联工控
  • ……

但实际上,你的第一份工作究竟是什么,现在是无法预知的。飞哥在培训班学的还是Java呢!

通过这个培训,最理想的结果,不是教会了你多少知识,而是形成了你“自学开发”的能力——这才是最重要的最根本的:做程序员,自学能力是核心竞争力。因为技术的进步和迭代实在是太快太快了,不可能出来一门新技术,你就要上个培训班,那你挣的那点工资,还不够培训费呢!^_^


源栈培训 程序员 编程 IT培训
赞: 184 踩: 0

打赏
已收到打赏的 帮帮币

你的 打赏 非常重要!
为了保证文章的质量,每一篇文章的发布,都已经消耗了作者 1 枚 帮帮币
没有“帮帮币”,作者无法发布新的文章。

全系列阅读
评论 / 6
2020年05月06日 15点06分 --- 第 6 楼 --- hacvk

精选
我先了解一下
2019年01月05日 01点30分 --- 第 5 楼 --- aipu

精选
过年不方便,等我学会了去重庆就找这里落地找工作,哈哈
2019年01月05日 01点29分 --- 第 4 楼 --- aipu

精选
电脑装机工来了
2018年12月24日 12点57分 --- 第 3 楼 --- 28zhu

精选
果断赞扬
2018年12月22日 08点27分 --- 第 2 楼 --- dajatpyu

精选
飞哥加油
2019年01月05日 10点35分 --- 第 1 楼 --- 推荐 叶飞

--- 回复: ---

现在报名,节后报道,有折扣优惠哟!

编程基础


项目管理相关

需求发布、开发规划、部署、测试,源代码版本管理(git)等……

逸闻史话

认识计算机

编程语言

数据结构和算法

Web开发基础

全部
关键字



帮助

反馈