0. 介绍

课程简介：
这个课程是由芬兰的赫尔辛基大学计算机科学系推出的，
主要是介绍如何使用JavaScript开发现代Web应用程序。课程的重点是使用ReactJS构建单页面应用程序（SPA），并使用由Node.js构建REST API。该课程还包含介绍GraphQL的部分，这是REST API的现代替代方案。还包括测试、配置和环境管理，以及使用 MongoDB 来存储应用的数据

课程地址：https://fullstackopen.com/zh/

1. 开始之前的准备工作

属于a.基础知识部分的before you start

1.1 windows下安装nodejs

推荐使用Chrome浏览器，因为它为网页开发提供了最好的开发工具。另一个替代品是 Firefox 的开发版，它提供了同样的功能特性。
有些东西需要提交到github，所以需要安装git同时保证会基础的使用
一个支持web开发的文本编辑器，推荐Visual Studio Code
要安装node.js，同时会附带安装好 npm(Node package manager)
- 如果是windows直接下载一个.msi格式的 Windows Installer就好了，下载后的文件名类似：node-v14.16.0-x64.msi。双击安装过程中可以看到（安装了node.js以及npm包管理器，在线文档的快捷方式，同时添加到系统path中）：
  此外，这里还有一个复选框，都安上吧，免得以后缺啥还要补。
  
  这里注意：
  勾选这个chocolatey之后，安装的时候会显示powershell，类似：
  
  反正就是会自动安装一堆东西，不用管，让它安着就好。
  最后提示：Type ENTER to exit（不是按enter键，而是输入ENTER这个单词）

1.2 macos安装nodejs

https://nodejs.org/en/
下载双击，一路下去就对了

安装过程中可以看到以下提示信息：

This package has installed:• Node.js v14.16.0 to /usr/local/bin/node•    npm v6.14.11 to /usr/local/bin/npm
Make sure that /usr/local/bin is in your $PATH.

在命令行中输入node -v，可以看到版本信息，证明安装成功，由于不熟悉mac的系统路径，所以看了一下。

参考：MAC 设置环境变量PATH 和查看PATH

在文件夹这种显示状态下，按下command+shif+. 显示/关闭隐藏文件夹，可以找到etc文件夹，

然后就可以找到paths这个文件了，直接双击会默认用文本编辑器打开，就可以看到：

或者可以直接在命令行里输入：vim /etc/paths
确定安装好了，over

1.3 npm与npx的区别

由于现在还没有使用过，只是大概知道作用，所以就是收集一些网站，以后填坑。

阮一峰：npx 使用教程
知乎话题：npm 和 npx 有什么区别？

2. Web 应用的基础设施

2.1 谷歌开发工具

Web 开发第一规则: 始终在浏览器上打开你的开发者控制台。

在Network这个tab中，有两个重要的选项要注意：

Disable cache，禁用缓存（这样在进行页面调试的时候，就不会因为缓存导致新的页面刷新不出来）
Chrome是要求开着调试工具，才能保证Disable cache。修改代码之后，刷新页面没有更新，看有没有禁止缓存，不要犯这种低级错误。【引自：Chrome调试时，勾选【Network】Disable cache禁止缓存】
保存日志（Preserve log）选项也很有用: 它能够在重新加载页面时保存应用所打出日志。（网上大部分的说法是记录页面跳转后，所有的抓包记录，保留请求日志，可以看到跳转前的请求）

2.2 http get

对于每个资源，点击第一个tab，即Headers会显示更多关于本次请求的细节。
General中给的内容：

说明了浏览器使用 GET 方法向地址 https://studies.cs.helsinki.fi/exampleapp/ 发送了一个请求，并且请求成功，因为服务器响应的状态码为 200。

常见状态码说明：HTTP Status Code 304 状态码的详细讲解

此外，浏览器的请求（request）和服务器的响应（response）也有Headers头信息。
国内一般称为请求头和响应头，可以参考：

简书文章-前端必备HTTP技能之HTTP请求头响应头中常用字段详解

以 https://studies.cs.helsinki.fi/exampleapp/ 这个网站为例

其中，响应头（Response Headers）会告诉我们一些信息，比如：

content length：响应的大小(以字节为单位) 和 Date：响应的具体时间（我打开这个网页没有，但是其他网页基本都有）
Content-Type说明：响应是utf-8 格式的文本文件，其内容已用 HTML 格式化。通过这种方式，浏览器知道响应是一个常规的 html 页面，并将它“像一个网页”一样渲染到浏览器中。

Response 标签页展示了响应数据，这是一个常规的 html 页面。 body部分决定了其渲染在屏幕上的页面结构。

页面包含一个 div 元素，该元素又包含一个标题、一个指向 notes 页面的链接，以及一个 img 标签，并显示了创建 note 的数量。

由于有一个 img 标签，浏览器会执行第二个 http 请求，从服务器获取图像 kuba.png。请求的详情如下:

这个请求是给地址 https://studies.cs.helsinki.fi/exampleapp/kuva.png 发送的，它的类型是 HTTP GET。响应头部分说明，响应大小为 89350 字节，其Content-type为 image/png，即png 图像。 浏览器根据这些信息将图像正确地渲染到屏幕上。

在浏览器上打开页面 https://studies.cs.helsinki.fi/exampleapp/所产生的整个调用链条如下:

首先，浏览器向服务器发出 HTTP GET 请求(第一个请求)，以获取页面的 HTML 代码。
Html 中的 img 标签提示浏览器还要去获取图像 kuba.png（第二个请求）。浏览器将 HTML 页面和图像渲染到屏幕上。

HTML 页面其实在从服务器获取图像之前就已经开始渲染了。（在国内，服务器响应慢，完全可以看到页面其他部分以及渲染完毕，然后图像才慢慢渲染出来这一过程）

2.3 传统的web应用

Traditional web applications

上面给的示例网页的运作方式与传统的 web 应用类似。
当进入一个页面时，浏览器会从服务器获取 HTML 文档的详细页面结构，以及文本内容。服务器以某种方式生成了这个文档。这个文档可能是保存在服务器目录中的静态文本文件，也可能是服务器根据应用的代码动态构建的 HTML 文档，比如，数据可能是来自数据库的。
示例应用的 HTML 代码是动态的，因为它包含已创建 Note 的数量信息。

在传统的 web 应用中，浏览器是个“憨憨”。它只会从服务器获取 HTML 数据，所有应用的逻辑都在服务器上处理。

2.4 在浏览器上运行应用逻辑

Running application logic on the browser

保持控制台打开状态。单击

全栈公开课（深入浅出现代Web编程）学习——Part0-Web 应用的基础设施相关推荐

HTML4基本编译原理,Stanford公开课《编译原理》学习笔记(1~4课)
课程里涉及到的内容讲的还是很清楚的,但个别地方有点脱节,任何看不懂卡住的地方,请自行查阅经典著作<Compilers--priciples, Techniques and Tools>(也 ...
WEB编程学习之Eclipse编译JSP
前言继续学Java WEB编程,学到了动态界面,用到了JSP,查了资料发现,原来JSP也能用Eclipse搞,整起本文原创,创作不易,转载请注明!!! 本文链接个人博客:https://rong ...
java web 编程技术 pdf_Java WEB编程技术.pdf
您所在位置:网站首页 > 海量文档 &nbsp>&nbsp计算机&nbsp>&nbspJava Java WEB编程技术.pdf289页本文档一共被 ...
web全栈开发项目搭建整体思路和学习路线
web全栈开发全栈开发技术介绍: 全栈技术指可以完整整个项目搭建的有效集合. 包括:网站的设计,web前端开发,web后端开发,数据库设计,接口和组件,移动端开发,产品设计,系统架构,产品的理念和用 ...
PPT课件免费下载！国家精品公开课：《Python编程入门》
课程介绍来自北京理工大学的Python编程入门课,被评为国家精品公开课! 这是本课程第13次开课,课程累计学习者已经超过277万!课程经过百万学习者检验,更专业.更丰富.更高质量! 课程设置了微信群 ...
WEB编程学习之配置阿里云+宝塔+WordPress
前言最近学习web编程,学习服务器,总想实践搞一搞,决定搞一个个人博客网玩一玩,写一些随笔和学习笔记,正好最近买了阿里云服务器和域名,总不能浪费.网页的搭建,其实不仅仅可以用宝塔+wordpress ...
Stanford公开课《编译原理》学习笔记（2）递归下降法
[摘要] javascript实现递归下降语法解析示例代码托管在:http://www.github.com/dashnowords/blogs B站地址:[编译原理] Stanford公开课:[S ...
【Vue全家桶+SSR+Koa2全栈开发】项目搭建过程整合学习目录（持续更新中）
写在开头大家好,这里是lionLoveVue,基础知识决定了编程思维,学如逆水行舟,不进则退.金三银四,为了面试也还在慢慢积累知识,Github上面可以直接查看所有前端知识点梳理,github传送门 ...
WEB编程学习之Windows安装运行Tomcat
前言本博客主要记录在学习web编程中,在Windows10系统下,安装运行Tomcat服务器,以及所遇到的常见问题以及解决方案. 本文原创,创作不易,转载请注明!!! 本文链接个人博客:https ...

全栈公开课（深入浅出现代Web编程）学习——Part0-Web 应用的基础设施