Web前端开发概述

文章目录

前言
一、web开发简史（了解即可）
二、基于前后端分离的Web开发（了解即可）
- 1.从提供内容到提供服务的转变
- 2.从“单一网站”到“多终端应用”
三、Vue.js与MVVM模式（重点）
四、Vue.js开发中常用的工具
1.Chrome浏览器-开发者工具

2. VS code文本编译器

3.命令行控制台

五、安装Vue.js

1.打开开发者工具方法
2.安装Vue.js步骤
3.VS code文本编译器
4.使用

总结

前言

随着互联网技术的快速发展，Web 前端开发逐渐成为各种软件开发的基础，除了原来的网站开发，后来的移动应用开发、混合开发以及小程序开发等，都可以通过 Web 前端开发再配相关技术加以实现。

一、web开发简史

1.早期阶段

早期的 Web开可以认为仅仅是“内容开发”。1995年以前，可以称为互联网的早期，此时，HTML 语言已经产生，但页面内容是手动编写的。后来逐渐开始发展出动态生成内容的机制，称为CGI(common gateway interface通用网关接口)程序，CGI程序能够在服务器上配合数据库等机制，动态产生 HTML 页面，然后返回到客户端。

这个阶段的特点是：开发复杂，功能简单，没有前端与后端的划分。

2..服务器端模板时代

1995-2005年期间的服务器端模板时代，以 ASP/JSP/PHP等技术为代表，特征正如它们名字中的第三个字母P所代表的含义一样——Page。Web开发的主要特征是针对每个页面进行开发，前端非常简单，业务逻辑代码直接嵌人 HTML 中，没有明确的前后端之分，所有工作都由程序开发人员完成，数据、逻辑和用户界面紧密耦合在一起。在这个阶段，产生了一些相对简单的前端工作，例如设计师在把页面设计图交给开发工程师后，需要做一些简单的切图和图像处理工作，但还谈不上“开发”工作。

3.服务器端 MVC 时代

2006-2015 年期间的“服务器端MVC时代”代表性的技术包括 Java SSH、ASPNET MVC、 Rut on Rails 等各种框架。
到了后端MVC时代，出现了各种基于MVC(model-view-controler，模型视图控制器)模式的)端框架，每种语言都会出现一种或多种MVC框架。这时正式产生了“前端开发”这个概念，前站开发的主流技术是以 CSS+DIV 进行页面布局以及一定的交互性功能的开发。后端开发的技术特征是逻辑、模型、视图的分离。在这个阶段，前后端都产生了巨大的变化。例如前端的 css、jQuery，后端的 Java SSH以及连接前后端的AJAX等技术获得了爆发式增长。
这个阶段的特点是：业务逻辑分层，开始从服务器端向浏览器端转移，“前端”层越来越厚。在这一阶段，前后端仍然结合比较紧密，这与后面的“前后端分离”的开发方式有着明显的区别。

4.前后端分离时代
从2012 年开始，前后端分离开始出现，2014 和 2015 年是 JavaScript 技术大爆发的两年,此后 Web开发全面进入前后端分离时代。Vue.js 最初也诞生于 2014 年。

从2016 年左右开始，前后端分离的开发模式逐渐成为主流。从“服务器端 MVC 时代”到“前后端分离时代”，是一次巨大的变革。具体来说，在实际的项目开发中，前端开发的工作占比越来越大。
前端的变革，主要表现为jQuery 被 Vue.js、Reao act 等新的前端框架代替，而后端的变革，则以“API 化”为特征，后端聚焦于业务逻辑本身，不再或较个少关心UI(用户界面)表现，关心的内容变为如何通过 API提供数据服务、提高性能、实现自动化的测试、持续部署、开发自运维(DevOps)等。

！！！不想看这么多文字的朋友可以看下面大致时间线的简图。(●'◡'●)

二、基于前后端分离的Web开发

1.从提供内容到提供服务的转变

传统互联网时代过后，我们进入了“移动互联网”时代。在移动互联网时代，应用的最本质特征是从提供内容到提供服务的转变。具体来说，传统互联网有以下三个特点。

使用场景固定且局限。
“内容”为主。
“服务”局限于特定领域。

回顾传统互联网，我们能想到的服务仅仅有新闻、邮箱、博客、论坛、软件下载、即时通信等。而与传统互联网相比，移动互联网有以下三个特点。

使用场景触达社会的每个角落。
更多事物被连接到云端。
提供海量“服务”。

在移动互联网时代，用户能够使用的服务大大增加，出现了大量新的服务，如短视频、慕课教育、移动支付、流媒体、直播、社交网络、播客、共享单车等。因此，在技术上又有以下三点新的要求：

客户端需求复杂化，大量应用开始流行，对用户体验的期望提高。
客户端渲染成为'刚需”。
客户端程序不得不具备完整的生命周期、分层架构和技术栈。

2.从“单一网站”到“多终端应用”

由于移动设备的普及，原来简单的“单一网站”架构，逐渐演变为“多终端”形态，包括PC（个人计算机)、手机、平板电脑等，从而产生以下几个特点。

服务器端通过 API输出数据，剥离“视图”。
Web 客户端变成独立开发和部署的程序，不再是服务器端 Web 程序中的“前端”层。
每个客户端都倾向于拥有专为自己量身打造、可被自己掌控的 API 网站。因此，在移动互联网时代，终端形态变得多样化，一个应用往往需要适配不同的终端形态。
桌面应用:传统的 Windows 应用、Mac 应用。
移动应用:iOS 应用、安卓应用。
Web 应用:通过浏览器访问的应用。
·超级应用:以微信小程序为代表的超级应用，已经成为新的应用程序平台。

前面介绍了Web前端开发的一些基本背景和发展历程，下面介绍Vue.js的一些基础背景和MVVM模式。

三、Vue.js与MVVM模式（重点）

Vue官网：Vue.js - 渐进式 JavaScript 框架 | Vue.jsVue.js - 渐进式的 JavaScript 框架https://cn.vuejs.org/

1.Vue.js

（1）背景

Vue.js诞生于2014年。

（2）Vue.js是什么？

是一套套针对前后端分离开发模式的、用于构建用户界面的渐进式框架。

(3)Vue.js的介绍

它关注视图层逻辑，采用自底向上、增量开发的设计方式。

Vue.js的目标是通过尽可能简单的操作实现响应的数据绑定和组合的视图组件。

它不仅容易上手，而且非常容易与其他库或已有项目进行整合。

（4）特性

作为目前世界上非常流行的3个前端框架之一的 Vue.js，具有以下特性：

轻量级。相比 AngularJS 和 ReactJS 而言，Vue.js 是一个更轻量级的前端库:不但文件容量非常小，而且没有其他的依赖。
数据绑定。Vue.js 最主要的特点就是双向的数据绑定。在传统的 Web 项目中，将数据在视图中展示出来后，如果需要再次修改视图，就需要通过获取 DOM 的方法来进行修改，只有这样才能维持数据和视图的一致。而 Vue.js 是一个响应式的数据绑定系统，在建立绑定后，DOM 将和Vue 实例对象中的数据保持同步，因而无须手动获取 DOM 的值并同步到 JS 中。
指令。在视图模板中，可以使用“指令”方便地控制响应式数据与模板 MOM 元素的表现方式。
组件化管理。Vue.js 提供了非常方便且高效的组件管理与组织方式。
插件化开发。Vue.js 保持了轻量级的内核，核心库与路由、状态管理、AJAX 等功能分离，可通过加载对应的插件来实现相应的功能。
完整的工具链。Vuejs 提供了完整的工具链，包括项目脚手架以及集成的工程化工具，可以
盖项目创建、开发、调试、构建的全流程。

2.M V VM————是一个软件架构设计模式

（1）程序的两个部分的介绍

所有的图形化应用程序,无论是Windows应用程序、手机App还是用浏览器呈现的 Web应用，总体来说，都可以把程序粗略地分为两部分：

用户界面部分（用户可以直接看到的部分）
内部逻辑部分（用户不能看到的部分）。

例如，“计算器”就是十分常见的一个应用，无论是手机还是台式计算机，都有这个应用。这个应用实际上就可以分为两部分:

一部分是计算机的用户界面，包括按钮和显示运算结果的“显示屏”，这些是用户可以直接看到的部分;
另一部分则是核心的计算逻辑，即用户通过按钮输入一些算式后具体计算出结果的部分，这部分功能用户并不能直接看到，但可通过运算结果感知到。

在软件开发领领人们很早就意识到，应该将业务逻辑与UI逻辑分离开，这也符合软件工程里著名的“关注点分离”则。

通常，图形化应用程序的用户界面称为“视图”(View)，用来解决用户输入输出的问题;而为了解决内部的核心业务逻辑，则需要面对数据执行相应的操作，操作的数据对象通常被称为“模型” (Model)。

众多的开发框架所要解决的问题就是如何将以上二者联系起来。
事实上，存在多种不同的理念来解决视图与模型的连接问题。不同的理念产生了不同的“模式”。例如：

“模型-视图-控制器”(MVC)模式

“模型-视图-表达”(MVP)模式
“模型-视图-视图模型”(MVVM：Model-View-ViewModel)模式等。

它们都是很常见的模式，并不能简单地说哪个更好。

Vue.js 则是比较典型的基于 MVVM模式的前端框架，尽管它并没有严格遵循 MVVM 模式的所有规则。

（2）3个核心部分

Model(模型):由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。
View(视图):即用户界面。
ViewModel(视图模型):用于链接匹配模型（Model）和视图（View）的专用模型。

（3）Vue.js 的两点核心思想

数据的双向绑定。View 和 Model 之间不直接沟通，而是通过 ViewModel 这个桥梁进行交互。通过ViewModel 这个桥梁，可实现View和Model之间的自动双向同步。当用户操作View时，ViewModel会感知到View的变化，然后通知 Model 发生同步改变;反之，当Model发生改变时，ViewModel也能感知到 Model 的变化，从而使 View 做出相应更新。
使用“声明式”的编程理念。“声明式”(declarative)是程序设计领域的一个术语，与之相对的是“命令式”(imperative )。

命令式编程倾向于明确地命令计算机去做一件事。

声明式编程倾向于告诉计算机想要的是什么，并由计算机自己决定如何去做。

四、Vue.js开发中常用的工具

1.Chrome浏览器-开发者工具

2.命令行控制台

五、安装Vue.js

1. 打开开发者工具方法:

2.安装Vue.js步骤：

第二张图的小图标表示成功安装。

3. VS code文本编译器

4.使用

总结

以上就是今天要讲的内容，本文仅仅简单介绍了Web前端开发的一些基本背景和发展历以及Vue.js的一些了解。

温馨提示：学习Vue.js所需的前置知识是HTML、CSS3和JavaScript这三种基础语言。

web应用开发实战(1)

Web前端开发概述

文章目录

前言

一、web开发简史

1.早期阶段

这个阶段的特点是：开发复杂，功能简单，没有前端与后端的划分。

2..服务器端模板时代

3.服务器端 MVC 时代

4.前后端分离时代从2012 年开始，前后端分离开始出现，2014 和 2015 年是 JavaScript 技术大爆发的两年,此后 Web开发全面进入前后端分离时代。Vue.js 最初也诞生于 2014 年。

二、基于前后端分离的Web开发

1.从提供内容到提供服务的转变

传统互联网时代过后，我们进入了“移动互联网”时代。在移动互联网时代，应用的最本质特征是从提供内容到提供服务的转变。具体来说，传统互联网有以下三个特点。

使用场景固定且局限。

“内容”为主。

“服务”局限于特定领域。

回顾传统互联网，我们能想到的服务仅仅有新闻、邮箱、博客、论坛、软件下载、即时通信等。而与传统互联网相比，移动互联网有以下三个特点。

使用场景触达社会的每个角落。

更多事物被连接到云端。

提供海量“服务”。

在移动互联网时代，用户能够使用的服务大大增加，出现了大量新的服务，如短视频、慕课教育、移动支付、流媒体、直播、社交网络、播客、共享单车等。因此，在技术上又有以下三点新的要求：

客户端需求复杂化，大量应用开始流行，对用户体验的期望提高。

客户端渲染成为'刚需”。

客户端程序不得不具备完整的生命周期、分层架构和技术栈。

2.从“单一网站”到“多终端应用”

由于移动设备的普及，原来简单的“单一网站”架构，逐渐演变为“多终端”形态，包括PC（个人计算机)、手机、平板电脑等，从而产生以下几个特点。

服务器端通过 API输出数据，剥离“视图”。

Web 客户端变成独立开发和部署的程序，不再是服务器端 Web 程序中的“前端”层。

每个客户端都倾向于拥有专为自己量身打造、可被自己掌控的 API 网站。因此，在移动互联网时代，终端形态变得多样化，一个应用往往需要适配不同的终端形态。

桌面应用:传统的 Windows 应用、Mac 应用。

移动应用:iOS 应用、安卓应用。

Web 应用:通过浏览器访问的应用。

·超级应用:以微信小程序为代表的超级应用，已经成为新的应用程序平台。

前面介绍了Web前端开发的一些基本背景和发展历程，下面介绍Vue.js的一些基础背景和MVVM模式。

三、Vue.js与MVVM模式（重点）

1.Vue.js

（1）背景

Vue.js诞生于2014年。

（2）Vue.js是什么？

是一套套针对前后端分离开发模式的、用于构建用户界面的渐进式框架。

(3)Vue.js的介绍

它关注视图层逻辑，采用自底向上、增量开发的设计方式。

Vue.js的目标是通过尽可能简单的操作实现响应的数据绑定和组合的视图组件。

它不仅容易上手，而且非常容易与其他库或已有项目进行整合。

（4）特性

作为目前世界上非常流行的3个前端框架之一的 Vue.js，具有以下特性：

轻量级。相比 AngularJS 和 ReactJS 而言，Vue.js 是一个更轻量级的前端库:不但文件容量非常小，而且没有其他的依赖。

指令。在视图模板中，可以使用“指令”方便地控制响应式数据与模板 MOM 元素的表现方式。

组件化管理。Vue.js 提供了非常方便且高效的组件管理与组织方式。

插件化开发。Vue.js 保持了轻量级的内核，核心库与路由、状态管理、AJAX 等功能分离，可通过加载对应的插件来实现相应的功能。

完整的工具链。Vuejs 提供了完整的工具链，包括项目脚手架以及集成的工程化工具，可以

盖项目创建、开发、调试、构建的全流程。

2.M V VM————是一个软件架构设计模式

（1）程序的两个部分的介绍

所有的图形化应用程序,无论是Windows应用程序、手机App还是用浏览器呈现的 Web应用，总体来说，都可以把程序粗略地分为两部分：

用户界面部分（用户可以直接看到的部分）

内部逻辑部分（用户不能看到的部分）。

例如，“计算器”就是十分常见的一个应用，无论是手机还是台式计算机，都有这个应用。这个应用实际上就可以分为两部分:

一部分是计算机的用户界面，包括按钮和显示运算结果的“显示屏”，这些是用户可以直接看到的部分;

另一部分则是核心的计算逻辑，即用户通过按钮输入一些算式后具体计算出结果的部分，这部分功能用户并不能直接看到，但可通过运算结果感知到。

在软件开发领领人们很早就意识到，应该将业务逻辑与UI逻辑分离开，这也符合软件工程里著名的“关注点分离”则。

通常，图形化应用程序的用户界面称为“视图”(View)，用来解决用户输入输出的问题;而为了解决内部的核心业务逻辑，则需要面对数据执行相应的操作，操作的数据对象通常被称为“模型” (Model)。

众多的开发框架所要解决的问题就是如何将以上二者联系起来。 事实上，存在多种不同的理念来解决视图与模型的连接问题。不同的理念产生了不同的“模式”。例如：

“模型-视图-控制器”(MVC)模式

“模型-视图-表达”(MVP)模式

“模型-视图-视图模型”(MVVM：Model-View-ViewModel)模式等。

它们都是很常见的模式，并不能简单地说哪个更好。

Vue.js 则是比较典型的基于 MVVM模式的前端框架，尽管它并没有严格遵循 MVVM 模式的所有规则。

（2）3个核心部分

Model(模型):由核心的业务逻辑产生的数据对象，例如从数据库取出并做特定处理后得到的数据。

View(视图):即用户界面。

ViewModel(视图模型):用于链接匹配模型（Model）和视图（View）的专用模型。

（3）Vue.js 的两点核心思想

使用“声明式”的编程理念。“声明式”(declarative)是程序设计领域的一个术语，与之相对的是“命令式”(imperative )。

命令式编程倾向于明确地命令计算机去做一件事。

声明式编程倾向于告诉计算机想要的是什么，并由计算机自己决定如何去做。

四、Vue.js开发中常用的工具

1.Chrome浏览器-开发者工具

2.命令行控制台

五、安装Vue.js

4.前后端分离时代
从2012 年开始，前后端分离开始出现，2014 和 2015 年是 JavaScript 技术大爆发的两年,此后 Web开发全面进入前后端分离时代。Vue.js 最初也诞生于 2014 年。

众多的开发框架所要解决的问题就是如何将以上二者联系起来。
事实上，存在多种不同的理念来解决视图与模型的连接问题。不同的理念产生了不同的“模式”。例如：