什么是web
web(World Wide Web)也称为万维网,是一个基于HTML和Http的大型的分布式信息系统,是建立在Internet上的一种网络服务。
- web前端:针对浏览器的开发,代码在浏览器运行
- web后端:针对服务器的开发,代码在服务器运行
发展历程
1994年底,w3c组织成立,正式开启web1.0时代。目的在于使全球的科学家能够利用Internet交流自己的工作文档。
web1.0早期,网页为静态的,内容是写死的;到后来随着PHP、JSP等动态页面技术出现,页面内容可以动态的改变。
这个时期,前后端不分离,前后端开发是一体的,前端代码是后端代码的一部分。
- 后端收到浏览器的请求
- 生成静态页面
- 发送到浏览器
那时的网站开发,采用的是后端 MVC 模式。
- Model(模型层):提供/保存数据
- Controller(控制层):数据处理,实现业务逻辑
- View(视图层):展示数据,提供用户界面
前端只是后端 MVC 的 V。
那时的前端工程师,实际上是模板工程师,负责编写页面模板。
后端代码读取模板,替换变量,渲染出页面。
典型的PHP模板
<html>
<head><title>Car {{ $car->id }}</title></head>
<body>
<h1>Car {{ $car->id }}</h1>
<ul>
<li>Make: {{ $car->make }}</li>
<li>Model: {{ $car->model }}</li>
<li>Produced on: {{ $car->produced_on }}</li>
</ul>
</body>
</html>
web1.0的网页以内容展示为主,用户只是网站内容的浏览者,交互性差,网站内容是由少数编辑人员(或站长)定制的,比如各门户网站。
Ajax 技术诞生,改变了一切。促进了web2.0的诞生
- 2004年:Gmail
- 2005年:Google 地图
前端不再是后端的模板,可以独立得到各种数据。从这个时候开始,前端变得复杂了,对前端工程师的要求越来越高。
前端通过 Ajax 得到数据,因此也有了处理数据的需求。
前端代码变得也需要保存数据、处理数据、生成视图,这导致了前端 MVC 框架的诞生。
- Model:管理数据
- View:数据的展现
前端 Controller 与后端不同。
- 不需要,也不应该处理业务逻辑
- 只需要处理 UI 逻辑,响应用户的一举一动
所以,前端 Controller 相对比较简单。
另一些框架提出 MVVM 模式,用 View Model 代替 Controller。
- Model
- View
- View-Model:简化的 Controller,唯一作用就是为 View 提供处理好的数据,不含其他逻辑。
本质:view 绑定 view-model,视图与数据模型强耦合。数据的变化实时反映在 view 上,不需要手动处理。
<div id="journal">
<input type="text" v-model="message">
<div>{{message}}</div>
</div>
JS 代码
var journal = new Vue({
el: '#journal',
data: {
message: 'Your first entry'
}
});
自此前端可以做到:
- 读写数据
- 切换视图
- 用户交互
这意味着,网页其实是一个应用程序。
2010年后,前端工程师从开发页面,变成了开发“前端应用”(跑在浏览器里面的应用程序)。
web2.0特点:
1、用户参与。用户既是网站内容的浏览者也是网站内容的制造者。与web1.0网站单向信息发布的模式不同,web2.0网站的内容通常是用户发布的,使得用户既是网站内容的浏览者也是网站内容的制造者,这也就意味着web2.0网站为用户提供了更多参与的机会
2、web2.0更加注重交互性。不仅用户在发布内容过程中实现与网络服务器之间交互,而且,也实现了同一网站不同用户之间的交互,以及不同网站之间信息的交互。
3、web2.0网站与web1.0没有绝对的界限。web2.0技术可以成为web1.0网站的工具,一些在web2.0概念之前诞生的网站本身也具有web2.0特性