前端不同服务器之间的通信_前端系列课程（1）-初识前端（三部曲）

前端开发是创建 web 网站页面或 app 等前端页面，并呈现给用户的过程。它是由网页制作演变而来，通过使用 HTML、CSS、JS 及衍生出来的各种技术、框架和解决方案，来实现互联网产品的用户界面交互。

[ 互联网演变 ] web1.0(内容)— web2.0(基于 ajax)— web3.0(基于 html5)

网页制作是 1.0 时代的产物，早期网站都是静态内容，以图片和文字为主，用户使用网站的行为以浏览为主。

随着互联网技术的发展和 HTML5、CSS3 的应用，现代网页更加美观，交互效果显著、功能更加强大；

移动互联网带来了大量高性能移动终端设备和快速的无线网络，H5、Nodejs 广泛应用，各类框架类库层次不穷。

了解：web 相关概念

前端开发是 web 开发的一个分支，一个合格的前端开发人员，在熟悉前端协作流程之前，需充分了解 web 相关概念：

[1] 网站：什么是网站呢？ { 网络基础概念(URL)？！ }

可以在浏览器上通过一个地址直接访问使用；由一系列页面组成(html、css、js ...，所有的这些文件被称为资源)；

用于提供一种或多种特定服务的一系列具有相关性的网页组合的整体，如博客、电商、在线教育等。

[2] web 系统：部署在服务器(即，提供计算服务的设备)上，用于为提出不同需求的 web 客户端提供服务的系统。

[ 请求 - 响应过程？！(Http 协议？！) ] 不同的 web 客户端，根据不同的需求发送请求到服务器上部署的 web 系统之上，web 系统根据需求返回相应的结果，最后，通过 web 客户端展现给用户。

请输入图片描述

熟悉：网站开发协作流程

正常情况下，开发一个动态网站应用程序，大概分为以下几个阶段：

1. 需求分析：产品经理分析应用程序需要实现哪些功能、应对哪些业务，形成产品需求文档(“讲故事”)；

2. 交互原型：产品经理根据需求分析的结果规划应用程序的原型，可以理解为“打草稿”；

3. UI 设计：UI 设计师将“草稿”转化为设计稿，并提供相应的产物(设计稿、静态网页)；

4. 技术(框架)选型：根据业务场景选择对应的技术栈(前端、后端 & 数据库)； // 考虑因素：人、业务

5. 数据库设计：根据需求和原型，分析有哪些类型的数据需要存储，从而得到所需的数据库的基本结构；

6. 项目架构设计 — 俗称“搭框架”：

主要操作是制定项目约束规范、创建基本的项目结构、编写基础的公共模块代码和组织代码；

7. 迭代开发：开发者的日常，基于项目架构(条条框框)完成各项业务功能；

8. 集中测试：将所有功能模块整合在一起，集中测试业务功能是否有 bug、是否满足需求；

9. 部署上线：从开发环境向生产环境转换，也就是说，把应用程序部署到服务器上。

在拿到交互稿或视觉稿后，前端工程师要能够灵活的应用前端知识技能，完成相应的功能。在实际的企业环境中，不只是有前端开发工程师，更多的场景和项目是通过团队中多人(不同角色)协作完成的。

[ 角色定义与技术栈概览？！ ] So，作为前端开发工程师如何与团队中其他角色进行协作呢？

请输入图片描述

具备：web 应用开发能力

有了明确的目标之后，需要规划具体的业务方案，学习特定的技能，完成各项功能，解决各种过程中出现的问题。

在以下的专注学习过程中，我们很少关心它们在整体中是什么角色、起到什么作用。

一、网页开发技术(硬性)

(1)HTML _ 页面内容结构(GUI)

(2)CSS _ 页面外观样式(GUI)

(3)JS _ 脚本编程(用于调用浏览器提供的各种 API(网页交互、界面功能))

(4)jQuery _ 便捷手段，不是必须的

二、编程思想 / 编程能力 — 解决问题的思路(软性)

我要做什么(我要得到什么)— 我目前有什么 — 我能拿到什么

以上，就可以独立完成网页开发了。具体的实现是：一个个网页，还可以给页面加上一些动态的交互。

但是，距离完成一个网站还需要：网页开发 — 网站开发 — 应用开发(一个完整的 web 网站，还需要学什么呢？)。

1、搭建 web 服务器(提供网站服务的机器)

2、Http(浏览器与服务器之间的通讯协议)

3、Ajax(浏览器与服务器之间的数据交互方式)

4、服务端开发(动态网页技术)

5、数据库操作(服务端存储数据的方式)...