Web前端开发简介

请点击这里，边看视频，边学习教程

教程说明

本教程面向 0基础 的朋友， 一步步的教大家做 web前端（网站前端）开发。

注意，本教程不是手册，所以我不会罗列各种html条目、css属性等等， 而是重点讲解知识点的灵活使用。

要查询手册条目，可以点击这里访问 MDN官网

web应用技术

当今的互联网时代，大家经常使用 电脑、手机、平板 上面的应用，进行购物、刷新闻，娱乐，学习。

这些丰富多彩的应用，背后的软件系统 大都是基于web技术开发的。

这些系统，体系结构 最简单的划分，如下图所示

这些系统，体系结构上 可以分为 ： 客户端 和 服务端 。

比如，手机打开微信，微信App 就是客户端， 腾讯公司的微信服务程序（运行在腾讯的机房里面）就是服务端。

再比如，电脑打开淘宝， 浏览器里面运行的淘宝网页 就是客户端， 而 阿里巴巴的 淘宝服务程序（运行在阿里的机房里面）就是服务端。

也有人喜欢把 客户端 称之为 前端 ，服务端称之为 后端 。

那么 开发 客户端（前端）的工程师 就会被称之为 客户端（前端）工程师 ，

开发 服务端（后端）的工程师 就会被称之为 服务端（后端）工程师。

如果一个工程师，同时可以做前端和后端的开发，通常可以称之为 web系统 全栈 工程师。

客户端和服务端 之间 是需要 进行数据信息的交流的。

当你登录淘宝 想查看自己的购买记录， 你的购买记录存储在阿里的服务器上， 所以浏览器就需要从阿里的服务器上获取你的购买记录。

那么作为 客户端 的 浏览器或者手机 是怎么获取 购买记录信息 的呢？

通常 是使用 HTTP网络协议 ，通过网络传送数据信息。

客户端通过HTTP协议发送请求信息给服务端，并从服务端接收响应信息。

本教程讲解的前端开发是 浏览器前端 ， 也就是 web前端。 不涉及 手机前端 的开发。

下面我们就 分别来看看 前端开发 和 后端开发 大体是做什么。

web前端开发

Web 前端开发的重点是 ： 提供用户界面给 用户进行观看和操作。

还是看前面的示意图

web前端 开发的网页内容 主要包含 3个 部分：HTML、CSS、JavaScript

• HTML

  决定网页显示具体内容

比如 显示哪些文字、图片、视频、链接等等

• CSS

  CSS 文档控制界面的显示样式和效果，比如字体、大小、前景色、背景色、间距、一些动画效果等等，

一句话：就是让你的界面更好看

• JavaScript

  现在的网页不仅仅是个展示静态信息的界面，它可以是一个应用程序（App），实现很多动态的功能。

  比如 ：点击打开这个网页，翻动到最下面 网页里面的程序 可以给小孩起名字

  网页App 使用的编程语言是 JavaScript ，简称 js ，js代码包含在网页中。

  js代码 由浏览器执行，决定网页的逻辑处理。

  比如 上面的网页里面的 js程序就完成了随机组合汉字，给小孩起名字。

再比如 js代码 可以动态从服务端获取数据， 动态更新网页HTML的对应部分的内容。

js编程 通常是前端开发中 技术难度最大的部分，也是我们这套教程的重点。

大前端

web 前端开发技术其实不仅仅局限在浏览器网页中，目前已经广泛应用在桌面本地前端（比如使用Electorn框架）， 手机前端（比如使用ReactNative框架）

可以是说，web 前端开发技术 已经是 一种通用的大前端技术。

web后端开发

刚才说了前端开发的工作，那么后端开发主要做什么？

后端开发 的主要工作就是 数据管理。

通常 包括数据的

• 存储方式， 也就是存储在哪里

• 存储操作，包括 增加、删除、修改、查询

这听起来简单，其实有的业务流程非常复杂 （想想淘宝购物），有时一个购买操作，要涉及到很多逻辑处理。

而且，如果用户量非常大，比如 百万级以上 的客户同时访问， 就需要精心的设计架构，优化业务逻辑处理代码，做好服务分布式、集群式的处理大量的用户请求。

通常，后端的开发涉及到：

• 静态文件存储

  前端开发人员开发出来的 HTML CSS JS 代码文件（还有其它的图片、视频等资源文件），放在哪里呢？

  当然都是放在 网站服务器上。

  通常一个比较大型的网站， 静态文件往往会使用单独的服务器专门提供服务。

一部分特别消耗带宽的数据（比如视频、图片）会使用专门的的云服务（比如阿里云的OSS 和 CDN 服务）。

这些文件存储通常是 后端开发人员考虑的。

当然也有少数的前后端分工比较彻底的团队，前端自己负责前端代码的部属。

• API 接口设计， 就是 定义 前端和后端交互接口规范。

  设计具体的API请求和响应消息的具体内容。

  这个通常应该是架构师设计的， 但是往往这工作经常会落到后端工程师头上。实际上 很多公司里面，系统架构师 也会做后端开发的工作。

• 业务数据存储

  处了前面说的静态问文件存储，一个业务网站通常还需要存储动态的业务数据。

  比如一个购物网站，需要存储：用户信息、用户订购信息、物流信息等等。

  这些动态数据的存储，选择什么样的数据库（包括 关系型和非关系型的数据库） 才能高效灵活的实现业务，都是后端开发要重点考虑的。

• 数据库表结构设计， 要能合理、高效的存储业务数据，这样才能 高效查询、修改各种关联性的数据。

• 为了提高性能， 需要决定使用怎样的 缓存服务 和 异步任务服务

• 还有 其它种种特殊的考虑，比如 要熟悉目前日益流行的云存储技术，将有的数据，如图片，视频等 合理存储在云端

• 有的系统还需要有 大数据分析的需求 要后端高效实现。

开发工具准备

浏览器：Edge/Chrome

我们学习前端开发，开发出来 HTML CSS JS 代码文件， 是在浏览器中运行的展示的。

那么我们选择什么浏览器呢？

当然是大家用的最多的浏览器。 当前主流浏览器是 Edge/Chrome/Safri

我们课程主要使用 Edge 和 Chrome。

前者是Windows系统自带的，后者可以点击这里登录官网，下载安装

IDE: VSCODE

既然要开发代码文件，当然需要一个集成开发环境（IDE） 软件

推荐 VSCode， 可以说是 当前 前端开发 最主流的IDE了

请大家 点击这里，登录官网下载安装