前端技术栈合集--最小学习路径（1）

HTML

CSS

https://www.w3.org/TR/CSS2/ - specification 规范
https://caniuse.com - 检查浏览器对CSS属性的支持
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference - Mozilla公司的文档
https://csstriggers.com - 检查渲染时触发的属性
https://css-tricks.com - 门户网站有很多有用的技巧和文章

Node.js & Express

npm init
npm install --save express
node -v
v14.11.0
npm -v
6.14.8

image.png

Node是用于在浏览器外部执行代码的，Javascript运行环境；传统上，JavaScript代码总是在某些Web浏览器中执行，因为这就是JavaScript最开始的起源或者只是让浏览器网页更加动态化。
随着时间的推移，人们意识到他们希望在其他地方使用JavaScript，比如在网络浏览器之外，这是node JS项目的起源。

Express是在Node环境中运行的库，是使处理HttpTraffic更容易的帮助程序。

Javascript

image.png

image.png

image.png

This app object right here is used to set up configuration that will listen for incoming requests that are being routed to the express side of the app from the node side and then route those requests on to different route handlers.
这个app对象用于设置配置，用于监听从node端路由到应用的express端请求的传入请求，然后将这些请求路由到不同的路由处理程序。

image.png

So all these different route handlers that we're going to be creating over time will be all associated or somehow registered with this app object right here.

我们将创建的所有这些不同的路由处理程序都会关联或注册到这个app对象。

image.png

create a root handler and associated with a given route.

### CommonJS modules | Node.js v16.9.0 Documentation

###JavaScript modules 模块

image.png

image.png

image.png

Heroku

https://www.heroku.com/

image.png

image.png

每当Heroku运行我们的应用程序时，它都能够注入所谓的环境变量。

image.png

It says look at the underlying environment and see if they have declared a port for us to use.
它说，看看底层环境，看看他们是否为我们声明了一个端口。

heroku -v
heroku login
heroku create
代码更新
git add .
git commit -m "comment"
git push heroku master

Google Oauth -- SSO

image.png

passport.js

image.png

image.png

不同的provider，不同的passport strategy

1. 转到谷歌项目仪表板:

https://console.cloud.google.com

2. 点击“创建项目”按钮

   
   
   step1.png

step2-1.png

step2-2.png

step2-3.png

step3-1.png

step3-2.png

step3-3.png

wire up passport and Google strategy:

image.png

passport.png

google-auth.png

So, hey, passport, when you load me up, if anyone attempts to authenticate and say, authenticate with the string of Google, use me.
这个是在strategy内部说明的：hi, passport, 当你加载我（googlestrategy）的时候，如果有用户试图认证，并且用“google”这个字符串认证的时候，那就用我这个googlestrategy.

nodemon 自动重启包

项目结构

image.png

HTTP是无状态的；介于服务器和浏览器之间的Ajax请求是HTTP请求，HTTP请求是无状态的；

http stateless.png

cookie.png

cookie-based authentication

What that means is that when we get some initial request to our server, like our Express API, we are going to say, hey, please let me in.
When the browser sees this response come back and it sees in the header of the request, it sees this like set cookie thing. The browser is going to automatically strip off this token.
It's going to store it into the browsers memory, and then the browser is going to automatically append that cookie with any followup request being sent to the server.
当浏览器看到这个响应返回并在请求的头中看到时，它会看到类似于set cookie的东西。浏览器将自动提取出此令牌。它将把它存储到浏览器内存中，然后浏览器将自动附加cookie，并向服务器发送任何后续请求

sign off

image.png

说白了，就是谷歌认证之后拿到用户的profile信息，里面包含一个google id，去查数据库，如果数据库里能查到这个id，就返回cookie,如果不存在这条数据，插入到数据库之后再返回cookie.

REACT应用程序将通过交换包含JSON数据小片段的HTTP请求与我们的Express API进行通信。

mongodb

install mongoose.js

image.png

这是Mongo, Mongo在内部将记录存储到不同的集合collectioins中，每个不同的集合，在我们的数据库中，可以有很多不同的记录records，我们可以有很多不同的集合。在每一个合集中，每个record都可以有它们自己的属性

users collection.png

比如第一个用户有“height”属性，但是第二个就没有；这与传统数据库(如SQL类型数据库或关系数据库)形成了直接对比，在传统数据库中，每条记录都必须具有完全相同的属性。

image.png

以下是安装MongoDB帐户和Atlas集群的步骤，以完成我们的项目:

1. 去https://www.mongodb.com/cloud/atlas，点击“免费开始”按钮(或者直接登录如果你已经有帐户)
2. 创建MongoDB用户帐户
   3.创建帐户后，系统会提示您创建第一个集群。
   保留所有免费层选项- AWS，北美:N.弗吉尼亚等。

3. 在这个页面向下滚动，以命名您的应用程序:

   
   
   image.png

image.png

image.png

如果mongo连不上：

image.png

userful links

www.draw.io