Web App 1|学习笔记

本文涉及的产品
全局流量管理 GTM,标准版 1个月
云解析 DNS,旗舰版 1个月
云原生数据库 PolarDB MySQL 版,通用型 2核8GB 50GB
简介: 快速学习Web App 1

开发者学堂课程【高校精品课-上海交通大学 -互联网应用开发技术:Web App 1】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/76/detail/15737


Web App 1


内容介绍:

一、什么是WEB应用

二、web和互联网关系

三、web应用程序生命周期

四、静态网站

五、Web1.0

六、Web2.0

七、MVC Pattern

八、MVC  &  Ajax

九、Full-stack JavaScript & REST API

十、HTML 5+ CSS3

十一、Apache HTTP Server

 

一、什么是WEB应用

这里画了一张图,看起来很简单的,有浏览器,各种各样的客户端一般来说是基于浏览器的,就是浏览器上网,浏览器会发送HTTP的请求给外部服务器,比如tomcat,domatic服务器,或者阿帕奇,如要跑一个PHP的应用可能会用到阿帕奇,然后web服务器在接收到HPB请求之后可以解析里面的内容,发送给后面的应用服务器,通常来说都在web服务器里进行处理。比如在tomcat里,程序在处理它请求里的内容可能会去访问数据库,然后生成一些用户想要的信息返回给他。

图片1.png

 

二、web和互联网关系

这门课,原来就叫做web应用,现在改名互联网应用, web和互联网是什么关系?互联网就是Internet,它更倾向于是一个物理上的名词,它指的是物理上连接的一张网。

1.Web是以物理的这张互联网为基础的。要以web的通信协议来进行通信的,这样的一种逻辑上的网络,web通信协议最常用的就是HTTP这个协议,当然还有别的,也都非常熟悉的比如FTP,比如简单邮件传输协议SMTP等等,


2. 理解协议

相当于互联网就是高速公路,而web的协议是指必须要用集装箱卡车去运送货物,当然在高速公路上不一定非要用集装箱卡车运,也可以用小皮卡其他的任何的车辆,这些车就叫不同的协议,使用web的这一组协议在互联网上跑时,把这种逻辑上的互联网就叫做web协议。所以开发web应用的时候一定要注意,使用的是web协议,常用的就是HTTP,在HTTP里面用到的就是html、 css、 javascript,这些就都是这门课里面要用到的东西,

web应用程序类型

基于web协议去开发web应用。开发的web应用通常会分成两种,(1)、一种就是给人看,在浏览器里看到的HTML,还有HXHTML、XML等等,它的目的是呈现性。开发的很多带界面的网站是让终端用户通过浏览器或者是通过移动终端在手机上去产生的页面,目的是要把信息呈现给用户。

(2)面向服务的外部应用有一类它并不是给人看的,它是给其他程序去用的,而其他程序只是走了web的协议来通信。

web的协议好处。web的协议的跨域的能力比较强。也就是说从家里去访问地球一边,比如美国的某一个网站,只要没有被住都可以访问到,但是如果使用其他的协议未必有这么强的跨越的能力,比如分布式对象用的远程方法调用就没有这样的跨越能力。所以,大家看中了外部协议的这种访问的能力强,它可以穿越防火墙,突破一些限制。

于是两个协议或者说程序通信,采用web的协议来通信,这时候,这种程序,不是给人看的,是程序和程序之间互相交互的。所以这一类的应用,叫它面向服务的外部应用。

图片2.png

web应用程序类型工作方式

这一门课里面主要讲的是第一类。第二类到最后会涉及一些,不管怎样,如果开发了一个web应用,是客户端可以是浏览器也可以是其他的程序,都要走外部协议,发送HTTP的请求给服到你这边,应用里面就会有像http serverlet 这样的东西去接收请求。接收到之后,通过访问数据库还是访问其他的系统,查获用户想要的信息,把它组装成静态的页面,再通过http serverlet response 发回给客户端。无论是这两种类型里的哪一种,都是这样的工作的方式,大家就是在用web的协议(通常指的是HTTP 的协议),在做程序之间的通信。

 

三、web应用程序生命周期

1.web应用程序

(1)、web组件

web应用里面就包含了一些web的构件,像 serverlet ,比如开发spring的框架,spring框架里面的controller实际上就是对 serverlet 的一个包装,他们的共同的作用就是在响应接收客户端发送过来的HTTP请求。然后做出响应,返回给用户想看到的页面。

2)、还有一些静态的资源,比如说画的一些静态的HTML页面,上面嵌的一些图,还有重叠样式表,都是应用的一部分,当然还有一些javascript一些组件,也就是一些脚本,

3)、还有一些其他的,或者是依赖到的类。


2.web容器

在例子里面,已经有一些像react或者是其他的一些例子,把整个工程打开去看,里面的内容就包含了这些东西,要注意的是,如果写了web的构件,像serverlet会考虑这样一个问题,它的作用就是接收HTTP的请求,然后serverlet去访问数据库或者是服务器上的其他的文件系统里的数据,serverlet去执行一些操作,得到了一些数据,去生成一个要返回客户端的页面,在这个过程当中,可能要访问数据库,可能会访问文件系统,还有可能数据库和文件系统都要访问。于是在上面还有一些其他的复杂的处理,比如事务处理,消息处理等等,这时候会碰上一个问题,代码怎么写,要把这个页面返回给客户端,或者说要做一个在线的电子书城,写这些逻辑就是跟数据库怎么建立连接,怎么去访问他的逻辑,会比你从建立好连接以后,从数据库里把书的数据拿出来要复杂的多,所以于是Contact 这样的用服务器,就会把这些和业务无关的事情都给做掉,写的外部控件拿过来之后,Contact服务器在外边容器里面给写的包进去。

简单的说就像web components是一个战士,web container 是他的外骨骼,那实际上很多事情都靠外骨骼给做,web components只要专注于自己要做的事情,比如怎么去指挥,告诉外骨骼你想干什么,剩下的搬运,移动,这些都要外骨骼去做。

所以所谓的外部容器,就是提供了很多的服务,这些服务是对外部容器做外部构件做支撑,也就是开发的外部的构件做支撑的,让它的功能完备,很多从技术上来说非常困难的事情就由外部的容器来做,你就只关注自己的业务逻辑就可以了,这是外部应用的一非常重要的特点。

图片3.png


3.web应用程序与Java区别

web在开发外部应用的时候,和开发一个单机版的直接能跑的Java应用是不一样的。

开发一个单机版的Java应用,只要写好类,它依赖的类库,直接用Java虚拟机里面有一个main函数就可以去跑。

但是在web应用里面,有很多的功能是Contact做掉,包括如何去连接数据库,如何做事务处理等。至于它的原理部分,会在数据库的课里面讲。

总的来说,实际上一个web在运行过程当中有大量的功能并不是自己去写的,都是靠component来生成的,其实只是创建了Web构把它部署到component里,所谓部署到component里,就是把它放到component指定的目录之后,component的外部服务器就会给这个外部控件去生成一个专用的容器,工作就可以执行了,就是说每一个人去配一个外骨骼,就可以在电脑上打仗了。


4.创建、部署和执行web程序应用过程

在执行外部应用的时候,实际上是要把整个component跑起来,也就是外骨骼加上web要一起动作的一个过程。

1)、写出开发web组件代码。首先要先把web控件要写出来,

2)开发Web应用程序部署描述符。在部署到这个外部容器里面的时候,可能会产生一些部署描述符,所谓部署描述符的意思配一个外骨骼的时候,每个人的尺寸不一样,或者说要定制一些特有的功能。这时候你就会告诉他,希望要一个什么样的功能的一个外壳,这就叫一个部署描述符。也就是说,当把应用部署到外部应用里的时候,就要告诉type这样的外部服务器想做一些什么样的定制或者是功能。

比如这个web构件,兼听什么样的url,这是一个最简单的一个过程。

3) 、编译Web应用程序组件和组件引用的帮助器类。然后把这些东西放到一起去编译,现在不能生成一个可执行的东西,只能生成一个要能部署在应用服务器里的东西,比如说像component把整个工程压成一个war包,war包就会进入到部署到component指定的目录里去,

4) 将应用程序打包到可部署单元中。所以打包这个应用成一个部署单元,就是war包,

5) 将应用程序部署到Web容器中。把它扔到服务器里面。

6) 访问引用Web应用程序的URL。最后整个component外部服务器跑起来之后,通过url去访问,也就是在浏览器里面输入我们的地址,就能访问到这个应用。

 

四、静态网站

1.都是静态网站

Web 应用演化的历史。最简单的Web 应用在服务器端只有静态网页,要强调的Web 服务器实际上是软件不是指一台物理的服务器,它是一种服务器软件,比如说阿卡其,比如component,Oracle官网店叫Oracle,还有glass fish,还有像g box这样的应用服务器,当然g box现在换名字,叫wild fly,名字听起来比较奇怪,一个野生的苍蝇,这些都是web服务器,Web服务器共同的作用就是接收HTT的请求,产生响应,把响应发送回浏览器,在静态网页的阶段,所有的内容全是静态。

图片4.png

静态的意思是所有的内容,对不同的用户来说,看到的都是一样的,服务器这端不会根据用户发送的请求产生不同的页面。如果张三和李四来访问这个页面,服务器返回的是一样的一个页面。不会有任何的差异,所以这里的动态是指的不会根据用户的身份的不同,或者说用户发送过来的请求里面的参数不同,去产生不同的页面,不管是谁看到的都是一个页面,并不是指这个页面不能动,在这个页面里可以有像JS这样的脚本,可以有一些交互,这样的页面只要对于所有的用户来说看到的内容一样,这就是一个静态网页。

举个例子,放在这个cover上的例子里,有一个引用的一本书上的例子,它能够列出一些书的信息,有包括书名、作者、语言、发表的年代和这个销量,这个例子实际上看到的很像是最终做的电子书城的一部分,在这个例子里面,它可以按照每一个字段去排序。也可以直接进行编辑,还可以搜索,那么看起来它好像有一些动态的东西,但实际上这只是在前端做的一些交互,

图片5.png

看后台的页面就会发现,无论是页面还是页面里绑定进去的JS,数据是写死的。没有和后台做任何的交互,换句话说,对于所有的人看到页面没有任何的差异。这就是在静态网页的这个年代里面,大家看到的互联网的一个形态,

图片6.png

它的好处是网站的速度会非常快,原因是所有的网页都是静态的,不需要根据用户的请求的不同去产生不同的效果,所以可以把所有的页面预先全部生成好放到服务器上,这时候当用户要求看这个页面的时候,就把这个页面取出来,返回客户端,因为所有的页面都一样,所以在这个外部服务器这端,虽然所有的页面它肯定存在硬盘上,但是因为所有人看到的页面是一样的。所以它可以开一个很大的缓存,从硬盘上把页面读入到内存里,然后直接从内存里产生结果给给客户端。

它的缺点很明显,就是跟用户实际上没有任何交互,换句话说,其实根本就不在乎用户是谁,所有的人看到的都是一样的,那所以它的应用非常受限,对于像新闻网站一样的这一类门户网站,它非常实用,所以技术是螺旋上升了,有很多网页强调要走静态网页的路子,像新闻网站一般都是这种,因为所有人看到新闻都一样,所以没有必要去动态生成新闻,所谓动态就是要根据用户的请求,服务器的cpu要去处理这个请求。要去抓取数据,动态形成页面显然很浪费时间。

 

五、Web1.0

1.动态页面

静态网页的优点是快,缺点是它不能跟用户有任何交互,所以应用会比较受限。于是就希望web一定要是动态。所谓动态的不是指像在页面前端去做搜索,做编辑些其实是靠JS脚本来实现的,它实际上的那些效果本身是在浏览器里去执行的。

当页面从服务器上拿下来的时候,其实所有人看到都一样,没有一个产生任何新的东西,所以那不叫动态。真正的动态要根据用户的请求去产生一些动态,产生新页面,比如说用户在这个请求里面书店的这个销售数据想看一月份。显然这个页面没有一开始就生成好,如果要生成的话,并不知道有人要看一月的还是二月的,再比如人家看不是一个月的要看两个月的,最好的方式就是不是预先生成好按每个月统计完的数据,或者每两个月、每三个月统计完的数据,而是在请求里面去解析用户的时间范围。然后到本地存储的这个数据里面去读取数据动态,生成一张页面返回给客户端,动态生成这张页面,仍然是HTML的页面,只是它里面的内容不是预先就生成好的,而是要根据用户的请求,通过你的程序去读取本地存储的数据去产生的。这就是所谓的动态页面。

图片7.png


2.动态页面缺点

在动态页面最先出现的一个叫做CGI,叫common getaway inter interface就是公共网关接口,这种程序的一个缺点是它是开一个单独的进程去跑它的计算量,它占的用的计算资源会比较多。另外一点就是在访问数据的时候,没有对数据做任何的特殊的要求,数据可以存在文件系统里,一个文本文件也可以存在其他指定格式的文件里,也就是说,没有对后端的数据存储做过任何的格式上的要求。所以CPI程序本身也就没有标准化,各写各的,所以标准化程度低的东西,互相之间的交互和可替代性就会比较差。


3.用ASP.NET/JSP开发web动态应用程序

(1)、数据存储的和读取规范化

一个数据,要放到某一种数据库里,现在最常用是关系型数据库,它在存储像表格一样的数据,这也是数据库原理,里面主要涉及到的内容,关系型数据库就将数据存储的和读取规范化,一旦数据的存储规范了,服务器端的程序也可以规范一下,于是微软就提了asp dynamic,sun公司,当时还没有被收购,提的比如jsp solid,把服务器端的构建也标准化一下,标准化的目的就是让构件构件之间基于相同的标准开发,未来可以互相通信的话就比较容易。所以要做的事情是把后端标准化,出现了数据的存储的标准化,以及服务器端构建的标准化。

图片8.png

(2)、传统的网站客户端服务器交互模式。要注意的是,前端页面里仍然是在静态页面里面看到的HTML、CSS就是页面的内容和它的样式表。另外还有一些javascript就是脚本,刚刚例子里面,通过脚本在页面上去编辑表格。去对它排序进行搜索,但是不管怎么操作,Javascript的作用主要还是在前端的一些简单的动作,并不会直接产生对后端的调用,最后端的调用是在JSP的页面里面写了一些代码,这些代码在服务器端编译之后产生一个类,红线是server端和clone端的分界线,JSP实际上是在Web服务器里的一个概念,它会编译成一个类,会产生Java调用,跟后台的其他的构进行交互。在这个年代里面,会看到所谓的web1.0,是靠在后端服务器里面的这种web构,来解析前端发送过来的请求里面的参数,然后通过对后台的其他的服务的调用产生静态的页面返回客户端,就是产生HR的页面,返回客户端,在这个阶段,所有的请求还是服务器端的构在进行通信处理的。

图片9.png

一个网站里面不可能只有一个页面,有很多很多页面,于是web服务器就把这些JSP的页面放进去。JSP的页面编译成server的类之后,在响应前端的HTML里面,就有个超链接,一点,它发送出来请求就给了JSP发送到了服务器端,其端JSP在进行处理。

图片10.png

 

六、Web2.0

Ajax在2005年带来了一个新世界

Web1.0显得很累,如果所有的请求发送到服务器端之后,由服务器端处理,然后产生页面,返回客户端,按照正常的流程去进行处理。会碰上这样一个问题,就是当发送一个请求,在等待响应的时候,页面要刷新一下,也就说页面突然会变成白的,给带来的用户体验就不是很好,尤其是在等待页面回来去刷新过程当中,比如网络上延迟非常大,那么刷白的一刹那,在刷白的过程当中,用户会等很久,就有可能会造成用户体验非常差。

1.Ajax局部刷新

于是大家会想到能不能让页面不刷。就是前端已经有Ajax脚本了,在之前只是拿它来做一些前端的一些效果,比如排序搜索,但是Ajax能做的事情很多,能不能Ajax发一个请求过来,然后在得到响应之前页面是不动的,拿到响应之后,由Ajax脚本去把页面的一部分给刷掉。如果要是用这种方式,那么带来的好处就是用户的体验会非常好,当他点击页面上的某一个链接,或者是点击某一个按钮的时候,这个页面是不刷新的。是靠他发出去请求之后回过来,然后他的脚本把页面里一些东西剃掉,其他地方不刷新。这就是所谓的阿贾克斯,也就是Ajax的通信的一个扩展。

图片11.png


2.出现Ajax技术原因

客户端处理的事情就变多了,有了一些Ajax的脚本在这里,在这个年代里面会出现Ajax这种技术原因是,浏览器一般都跑在个人的PC上面,PC机的性能在大幅度的提升,在客户端只跑一个浏览器,只负责去解析HTML页面的时候,就会显得它计算资源非常的浪费。所以把数据一部分的功能推到PC端来,就是客户端的PC机,因为PC机现在计算能力很强,尽量去利用它,就把一份代码推到了客户端去执行,这样服务器端的压力就会变轻,所以在这个年代,在PC机盛行,在笔记本和桌面机的性能大幅提高的年代就出现了阿贾克斯,它本质的想法就是要把一些代码推到客户端去执行,不要在后端执行,进一步降低后端的压力。


3.单页申请Single Page Application

所以现在看到仍然是下图的一个结构,

图片12.png

客户端、服务器端,但是服务器端的和客户端的交互方式跟前面有了一个很显著的不同。

现在Ajax不是只在前端做一些动态的效果,而是真的要发送请求出来异步的发送请求,然后Ajax请求,得到响应之后去刷新页面。如果走到极端,那就是说整个页面所有的请求全部是通过Ajax去发,回来之后只刷新页面的一个局部,这时候,就可以开发出一个只有一个网页的应用,整个应用就在一个页面上,只是动态的、不断的去刷新这个页面的一部分内容,就是到了web2.0的年代。

 

七、MVC Pattern

应用MVC模式提高可维护性

1.代码复用程度提高。

服务器端的构件里面代码出来可维护性要好,将来的可演化性要好。怎么做?程序设计C加加里面,可以从语言里面去考虑为什么要定义常量和变量,无非是因为在其他地方会用到,为什么要定义函数,也是因为这一段代码会频繁的被使用。为什么要定义一个类?因为要从类里面实例化就多个对象,实际上多个对象在共享这一个类的代码,也就是说这一部分代码也要复用。把代码复用程度提高是工程的第一个概念。


2.第二个概念就是希望偶,要把程序写成两个类而不是一个类。

根本的原因是想这两个类互相的功能,每一个类专注做一件事,所以一个系统要进行划分的时候,要不断的抽象,不断的让他们互相之间职责单一,设计出来不同的类,原因就是一方面要复用代码,一方面要让系统的可维护性提高,


3.MVC的架构。

后台的代码虽然是有了JSP,asp donet的一些规范,只是说后端的代码应该怎么去写,并没有说应该一个应用里面是一个JSP还是多个JSP,那这时候该怎么办?于是从可谓互性的角度,就提出来应该做MVC的架构。

Mac架构是什么意思?首先有一个比较复杂的网站,上面有很多的链接,这些链接可能是一些超链接发出来的,按钮的点击发出来的,这些请求来了之后,希望有页面的跳转,或者说这些请求是发给哪一些后台的外部空间处理,按照职责单一的原则,把后台代码也可能划分成多个JSP或者servlet,超链接来后,应该交给哪一个去处理?就会有一个controller的东西,只管页面跳转的逻辑。请求来了之后应该发到哪,而model beans ,只管给一个参数,一个请求之后让干什么就去做什么,至于从哪来的并不关心,他处理完以后里面就会有一些数据,View是最终呈现给用户去看的,就是将来要返回客户端去看的,View 会从他想要的model里面去把数据取出来,组装成页面返给客户端。对于一个model来说,今天可以处理来自用户要求查询。比如库存量的请求,明天他可能还可以去查询别的,总的来说,就是希望controller和model之间结,modelView 之间结偶。

图片13.png

就是当用户的一个请求来的时候,不要固定死一定是谁来处理。举一个例子,比如说往数据库里面去插入一条订单的信。去插入一条订单的信息的服务器端构建,但是有两个不同的实现,一个实现是a实现,另外一个是往B里写。那么当用户提交了一个订单来的时候,到底用哪一个好?a和B只是负责往数据库里写订单。并不应该关心这是哪个请求来的,于是controller来控制,在这个页面上有这样的一个按钮,一旦点击就发给a。后来因为业务量不断扩展,会发现a不够存,要存到B里,于是同样是按一个按钮,就controller可以换一下逻辑,换B,在这个过程当中,可以看到页面不需要做任何修改,A和B也不需要做任何修改,只需要去修改一下controller的逻辑。model所谓执行业务逻业务逻辑的这一个构建就和页面之间的按钮或者链接之间的关系就结。同样的道理,返回一个订单已经被接收的一个页面,可能会列出订单的信息。这个数据到底是从a去抓回来的,还是从B去抓回来的,就取决于View跟model之间就结偶,View既可以从a里面抓,也可以从B里面抓,这三者就所谓的MBC,互相之间就我结偶的,一旦结偶,互相之间就可以彼此的独立的去演化,可以是a,也可以是B,甚至将来再开发一个C。把它分存到文存这个分布式文件系统里,无论是controller还是view都没有和具体的某一个model绑定,这样的系统可演化性就会非常的好,那所以追求在后台一定要用MVC这个架构,

图片14.png

 

八、MVC  &  Ajax

1.在前端检索到的数据组装页面

客户端的处理能力还是没有用全,客户端发一个阿贾克斯请求过来。然后在服务器端,返回给它一个页面,它只要把这个页面里面,比如是一个大页面分了区域,拿HTML把这一个区域给它替换掉就可以,其实做的事情比较有限。

图片15.png

既然加Ajax可以在前端去操作,更直接一点,不要一个页面去替换,而是只一个数据。至于浏览器想怎么去展示这个页面,完全取决于浏览器。比如想以chart方式去描展示页面,比如订单信息,我就一条一条的订单信息,也可以是一张饼图去表示,是a用户买的书,B用户买的书,C用户买的书,也可以是条状图去表示三个用户的买的书跟订单的总量,无论是表还是图,还是饼图、直方图,其实他们背后的数据都是一样的。

图片16.png

为什么会把呈现数据的逻辑放到浏览器里去做?浏览器前端可以按照它自己的方式去呈现页面里面的内容,它只需要达到这个数据就可以。基于这样的一个考虑,前端页面的组装这件事情就交给just keep的脚本去做,前后台之间只传纯数据,服务器之间一端就不存在view ,view是展示给用户看的东西,只把数据拿过去,让客户端的浏览器去做数据呈现。所以这个阶段里做了一个更激进的一个动作,把更多的代码推到了浏览器端去执行。服务器端压力就降低了,而客户端执行的事情就更多了。

对网络占用来说,传一个完整的页面,和只传页面里边想展示的数据相比,显然只传数据,它要传的数据量要少的多,所以这时候对网络的带宽的占用也更低,这种方式就被大家所接受,前提是首先客户端这一端计算能力要比较强,其次要让Ajax能用,也就是说有很多浏览器可以把Ajax禁掉,但是一旦禁掉它,这些功能就不能用了,于是演化到了这个程度,服务器这端其实已经没有view了,因为整个给页面呈现出来的效果是靠客户端的浏览器里的加script脚本来实现。

 

2.前端的MVC

浏览器里代码越来越复杂,同样是为了追求代码的可维护性,于是有人提出来,即便在浏览器里加速的脚本也要分成MVC这样的架构,view是呈现给用户看的东西。controller这个控制器就是页面跳转逻辑,例子:从loading的页面跳到book的页面书的列表的页面,里面有一些路由,还有model真正在处理前端的逻辑的东西。

图片17.png

所以这时候前端也就会有了MVC架构,这就是一个演化的过程。

后端就变得很轻薄,前端出现了Mac ,Mac view 就是像那些template,然后model就是从后端发送过来的数据,以及一些简单的处理逻辑,比如说,把发过来数据做一些加工,做一些计算平均数,里面最大数据小数这样逻辑。然后controller就是讲一些数据跟哪些temptate进行绑定,所以前端也出现了MVC的架构,

图片18.png

 

九、Full-stack JavaScript & REST API

1.Node.js

前后端可以都用javascript,这就是node. jS框架做的事情,前端和后端全部是justscript。

图片19.png

javascript的问题是什么,Javascript是一个解释型的语言,它的性能可能会比较差,相比编译型的语言来说可能要差。Java是一个编译型的语言,但是它编译成子解码,是一种中间状态,要想跨平台,不能编译成目标机器码,靠Java虚拟机把解集成机器码来执行的,它的性能相对于javascript来说稍微好一点,所以JS是前后站全用javascript的一种框架,这是个极端的做法。因为前端都有大量的javascript脚本,大量的工作都由它做,后端的工作越来越少,可以考虑整个用javascript去把后端给它替换掉,

图片20.png


2.MongoDB-JSON

前端必须要有MVC的架构,一定要框架来做支撑,自己写的太麻烦,所以就会有像Google 、Google的angelular,Facebook的react,像view,这些框架常用的一些框架,在后端,也碰到一个问题,就是在关系型数据库里面,数据量非常的大。导致存储的时候碰上了一些困难,也就是说关于数据库的数据量超过这个两千万之后,它的检索效率会非常的低。举一个例子,在讲数据结构和算法的时候,写数据库里的索引。当这个比加数的的高度比较高的时候,显然它的效率就会降低的非常快。有没有比它更快的东西?一方面是数据量大的问题造成的,要考虑更快的能支撑更大的数据量存储的数据库。另外一方面,就是很简单的这个电子书城这个系统里面跑了一个表格。

图片21.png

里面有书名、作者、发布、出版年代,还有销量等等,但其实也还有一些其他的数据,比如说书的封面,再比如这本书会配一个video,做书评,也可能是音频。就是有一些评论评论音轨,或者是一些视频的东西,做这个书的宣传,这些东西在关系型数据库里面是不容易存进去的。所以,就出现了像mongo DB这种no SQL的数据库。

它主要应对的是在数据量大以及数据并非结构化数据,也就是用二维表格的数据的时候,怎么去存储数据的一个问题,因为互联网的速度越来越快,存储这些像图片、音频、视频并且在线播放已经不成问题了,所以要换一种思路,于是后台就出现了像以mongo DB 为代表的no SQL 的数据库,系统进一步演化到了这一步。

以上是从技术的层次来说。还有另外一个维度当初当访问的数据量,访问的客户数多的时候,一台服务器扛不住的时候该怎么办?那这个问题留到大三的企业级应用系统体系架构课里面去讨论,当并发用户数非常多的时候,在这学期的课里面,是在讲用户的并发数,不是考虑的范围的情况下,怎么把网站给它搭建出来。

 

十、HTML 5+ CSS3

在HTTP这个协议之下,用的最多的是HTML和CSS,这是构成整个外围用的一个骨架,那HTML现在是五,这个版本还是CSS是三,

图片22.png


 

十一、Apache HTTP Server

web应用开发好之后,需要一个web服务器在后端,web服务器最简单的就是阿帕奇的应用服务器,它是http server,专门来接收请求,然后在后端去处理在,在它的应用服务器里面可以放一些,就像PHP的程序或者其他的一些程序来跑,

图片23.png

Java的应用是不行的,必须要用tomcat,安装好之后可以去试一试,这里专门讲它其实是想告诉大家,虽然上课用tomcat,但不要认为tomcat是唯一的一个选择,其实还有很多很多其他的选择,那顺便讲一下应用服务器,装了一个intelligence这是必须要装的一个开发环境,然后装了一个tomcat,把压缩包给它下载下来之后直接解压。

图片24.png

当在跑一个应用的时候,可以去指定,比如说动态的版本。就是有客户端,有服务器端的服务器端在配的时候就会在机器上,可以去直接选定它的目录在哪里,然后刚才压缩的目录选进去就可以,然后在每个应用里就要跑部署,当前我要开发应用,就可以跑了,然后装一个Mexico,其他东西一概没装,怎么去理解静态页面和动态页面,就是后端,跑起来以后,在跑前端,前端一开始。data是空的,然后点get books,可以看到这是后端的控制台,确实到数据库里面去抓,这个数据抓回来以后在前端去显示,这就告诉你,其实页面的内容是和后台有一次交互去产生的,

图片25.png

当然现在交互比较简单,它只发一个固定的get book链接,也可以在里面带参数,这样的话,不同的人看到的页面就不是一样的,会有一些差异,这就是所谓的动态和静态的一个区别。

相关实践学习
使用PolarDB和ECS搭建门户网站
本场景主要介绍基于PolarDB和ECS实现搭建门户网站。
阿里云数据库产品家族及特性
阿里云智能数据库产品团队一直致力于不断健全产品体系,提升产品性能,打磨产品功能,从而帮助客户实现更加极致的弹性能力、具备更强的扩展能力、并利用云设施进一步降低企业成本。以云原生+分布式为核心技术抓手,打造以自研的在线事务型(OLTP)数据库Polar DB和在线分析型(OLAP)数据库Analytic DB为代表的新一代企业级云原生数据库产品体系, 结合NoSQL数据库、数据库生态工具、云原生智能化数据库管控平台,为阿里巴巴经济体以及各个行业的企业客户和开发者提供从公共云到混合云再到私有云的完整解决方案,提供基于云基础设施进行数据从处理、到存储、再到计算与分析的一体化解决方案。本节课带你了解阿里云数据库产品家族及特性。
相关文章
|
4月前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
174 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
4月前
|
XML 前端开发 JavaScript
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
这篇文章是React的学习笔记,覆盖了从React的基础用法到高级特性,包括组件化、状态管理、生命周期、虚拟DOM等主题,适合React初学者参考。
135 0
react学习笔记一:入门级小白到脚手架(create-react-app)开发项目
|
3月前
【Azure App Service】PowerShell脚本批量添加IP地址到Web App允许访问IP列表中
Web App取消公网访问后,只允许特定IP能访问Web App。需要写一下段PowerShell脚本,批量添加IP到Web App的允许访问IP列表里!
|
4月前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
57 0
|
4月前
|
监控 安全 Apache
构建安全的URL重定向策略:确保从Web到App平滑过渡的最佳实践
【10月更文挑战第2天】URL重定向是Web开发中常见的操作,它允许服务器根据请求的URL将用户重定向到另一个URL。然而,如果重定向过程没有得到妥善处理,可能会导致安全漏洞,如开放重定向攻击。因此,确保重定向过程的安全性至关重要。
252 0
|
6月前
|
关系型数据库 MySQL Linux
【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
【Azure 应用服务】在创建Web App Service的时候,选Linux系统后无法使用Mysql in App
|
6月前
|
Shell PHP Windows
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
【Azure App Service】Web Job 报错 UNC paths are not supported. Defaulting to Windows directory.
|
6月前
|
Linux 应用服务中间件 网络安全
【Azure 应用服务】查看App Service for Linux上部署PHP 7.4 和 8.0时,所使用的WEB服务器是什么?
【Azure 应用服务】查看App Service for Linux上部署PHP 7.4 和 8.0时,所使用的WEB服务器是什么?
|
6月前
【Azure 应用服务】通过 Web.config 开启 dotnet 应用的 stdoutLog 日志,查看App Service 产生500错误的原因
【Azure 应用服务】通过 Web.config 开启 dotnet 应用的 stdoutLog 日志,查看App Service 产生500错误的原因
|
6月前
|
Linux Python
【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https
【Azure 应用服务】Azure App Service For Linux 上实现 Python Flask Web Socket 项目 Http/Https

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
  • 2
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 3
    微信小程序 app.json 配置文件解析与应用
  • 4
    【Azure App Service】基于Linux创建的App Service是否可以主动升级内置的Nginx版本呢?
  • 5
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 6
    【Azure Function】Function App出现System.IO.FileNotFoundException异常
  • 7
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
  • 8
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 10
    阿里云APP备案流程图以及备案所需材料整理,跟着教程一步步操作