Web前端开发简介
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了
请大家 点击这里,登录官网下载安装