클래스의 전체 스택 웹 프런트 엔드 개발 _node 원 노트 [아쇼카]

A는 간단한 검토 NodeJS
많은 내장 모듈과 모듈 개발이다 NodeJS를. HTTP 서버는 건물에 대한 의미한다. FS는 파일과 폴더를 조작하는 것을 의미한다. URL은 URL 문자열과 URL 오브젝트 수단을 변환. 의 URL에 쿼리를 구문 분석의 QueryStrings 모듈.

1.1 HTTP 모듈

1.2 FS 모듈

读取文件

fs.readFile(path, callback)

path: 被读取的文件地址  是一个路径 该路径属于后端路径

callback: 读取完成之后的回调函数  

该回调函数有两个参数

err: 读取过程中可能出现的异常。 如果没有异常，err是null。如果有，err是异常对象。

data: 是一个buffer数据，表示被读取到的文件信息。

创建文件/追加文件内容

fs.appendFile(path, data, callback);

path: 被创建/追加的文件所在地 是一个后端路径

data: 被创建/追加的文件内容

callback: 执行完毕之后执行的回调函数

该回调函数有一个参数

err: 创建/追加过程中可能出现的异常

删除文件  

fs.unlink(path, callback);

path: 被移除的文件的地址 是一个后端路径

callback: 移除过程中可能会出现的异常

创建文件夹   

fs.mkdir(path, callback);

path: 被创建出来的文件夹 （只创建最后一层）

callback: 创建过程完成之后的回调函数

err: 创建过程中可能出现的异常

移除文件夹

fs.rmdir(path, callback);

path: 被移除的文件夹的路径 （只能移除空的文件夹）

callback: 移除过程之后回调函数

err: 移除过程中可能出现的异常

读取文件夹

fs.readdir(path, callback);

path: 被读取的文件夹路径

callback: 读取之后执行的回调函数

err: 读取过程中可能出现的异常

arr: 读取成功之后，目标文件夹内每一个文件和文件夹的名称的数组

判定目标状态

fs.stat(path, callback);

path: 被判定的目标路径

callback: 判定完成的回调函数

err: 判定过程中可能出现的异常

stat: 状态对象

폴더가 그렇지 않은 경우는 false 인 경우 isDirectory 메소드는 true의 부울 값을 반환

상기 방법 모두는 방법이있다 xxxSync

예를 들어 : ReadFile을 ()는 비동기 방식의 동기 방법 readFileSync

readdir은 ()는 비동기 방식의 동기 방법 readdirSync

() 해제하는 비동기 방식 unlinkSync이다 ......

비동기 방법 콜백 함수 수락 리턴 값은, 파라미터의 내용을 반환했다

동기화 방법은 콘텐츠 수신 변수에 의해 반환 된 결과 값을 갖는다

ReadFile을 (XXX, 함수 (ERR 데이터) {

컨텐츠 데이터는 파일에 읽기

})

VAR 데이터 = readFileSync (XXX);

데이터는 파일의 내용으로 읽기

1.3 移除非空目录
1 // 定义函数

2 function del(path) {

3  console.log("进入" + path)

4  // path指的是一个目录的路径

5  // 当前del函数 用于删除非空目录 非空目录内部也有可能存在非空目录 所以又要调用del 也就是自己调用自己

6  // 读取path文件夹

7  var arr = fs.readdirSync(path);

8  // 循环

9  for(var i = 0; i < arr.length; i++) {

10   var stat = fs.statSync(path + "/" + arr[i]);

11   if(stat.isDirectory()) {

12    del(path + "/" + arr[i]);

13   } else {

14    console.log("删除文件" + path + "/" + arr[i])

15    fs.unlinkSync(path + "/" + arr[i])

16   }

17  }

18  console.log("删除" + path)

19  // 把path本身也删掉

20  fs.rmdirSync(path)

21 }

두 익스프레스
2.1 소개
Express는 백 엔드 타사 모듈입니다

주로 서버를 구축하는 데 사용됩니다.

2.2 설치

NPM : 모든 업로드 모듈 패키지 관리 시스템은 NPM에 배치 할 수 있습니다

다운로드 : 표현

다운로드가 완료된 것입니다 :

2.3 빌드 서버

1 // 引入express

2 var express = require("express");

3 // 搭建服务器

4 var app = express();

5 // 监听服务器

6 app.listen(3000);

참고 : 표현이 네이티브 프로퍼티와 메소드를 변경하지 않았기 내용을 추가

2.4 라우팅

普通路由：

app.verbs(pathName, callback);

pathName: 是一个url中的pathName部分

callback: 是对应的处理函数

req: 请求对象

res: 响应对象

next: 放行函数

verbs的类型： get 、 post、 put、 delete

app.get:

1 app.get("/index.html", function(req, res, next) {

2 

3 })

app.post:

1 app.post("/regist", function() {

2    

3 })

路由对象：

express内置了一个路由对象构造函数 express.Router

使用:

1 var route = express.Router();

2 route.get("xxx", function(req, res, next) {

3   

4 })

5 route.get("xxxx", function(req, res, next) {

6 })

7 // 使用该路由对象  当使用之后，路由对象身上所有的配置将生效。

8 app.use(route)

2.5 라우팅 구성의 표현

1 纯字符串

1 // 普通字符串

2 app.get("/a", function(req, res) {

3   console.log("a");

4 })

2 伪正则表达式

1 app.get("/a?", function(req, res) {

2  // ?在正则表达式中 表示可以有一个 可以没有

3  // 当前路由匹配的是 / 或者 /a

4  console.log("伪正则表达式")

5 })

3 正则表达式

1 app.get(/^\/\w+$/, function(req, res) {

2  console.log("正则表达式")

3 })

4 特殊url

1 app.get("/aaa:a/bbb:b", function(req, res) {

2  // 假如 用户使用的url是 /aaa123/bbb234

3  // 那么 当前的路由会将aaa123 和 bbb234分别获取到  

4  // 然后与当前的表达式匹配

5  // aaa:a => aaa123

6  // bbb:b => bbb234

7  // 其中从冒号开始分割 aaa => aaa   a => 123

8  // bbb => bbb b => 234

9  // 将a和b组成一个对象 挂载req身上作为params属性存在

10  console.log(req.params)

11 })

2.6 정적 미들웨어
각 경로를 구성해야하는 경우, 정적 파일은 어떻게 할까? 당신은 하나 개의 쓰기 구성을 원하십니까?

A : 정적 미들웨어의 사용

1 var express = require("express");

2 

3 var app = express();

4 

5 // 使用静态中间件

6 // 静态中间件是express的唯一内置中间件

7 app.use(express.static("./static"))

8 // 在访问./static文件夹下的文件时，不需要在url上写static这一层

9 

10 app.listen(3000);

이 시점에서, 디렉토리의 모든 정적 파일에 직접 액세스 할 수 있습니다

2.7 요청 데이터를 가져 오기
쿼리 부분이 REQ 쿼리가 존재 마운트 객체로 몸으로 포맷되고, 사전에 해결 URL을 표현한다.

프런트 엔드 URL 제출 :

1 개 에 http : // localhost를 : 3000 / 로그인 사용자 이름 =张三

req.query의 백 엔드를 가져 오기 :

1 {사용자 이름 : "산"}

2.8 포스트 인수 요청 데이터
와 더 많은 데이터를 운반 할 수있다 다른 게시물을 얻을, 그것은 다음 플러그를 만들기 위해 밖으로 추출, 분리 후 요청 처리 부분을 표현하는 것입니다.

플러그인 이름 : 몸 파서

다운로드하는 방법 : NPM 몸 파서를 설치

사용

1 引入 : VAR의 body_parser = ( '신체 파서 ") 요구;

2 配置 : app.use (({확장 : FALSE body_parser.urlencoded}));

이 때, 포스트 req.body 제출 된 데이터를 획득하여, 임의의 경로 일 수있다.

2.9 템플릿
과 일반적으로 사용되는 명시와 템플릿이 있습니다 : 옥 및 EJS

어떤, 옥 템플릿 들여 공간의 사용을 필요로한다. 템플릿 차이는 우리의 사용자 정의 대형뿐만 아니라 이전 템플릿을 강조한다.

EJS 차이는 작다. 우리는 EJS를 선택했다.

EJS 다운로드 :

1 NPM EJS 설치

완료 :

사용하면 사용의 필요성이 소개. 명시 도움이 있기 때문에 우리는 소개했다.

기본 폴더 :보기

渲染模板：

1 res.render("login.ejs", {

2  username: username,

3  children: [

4   {

5    username: "王二小"

6   },

7   {

8    username: "王小二"

9   },

10   {

11    username: "张三"

12   }

13  ]

14 })

방법을 렌더링

첫 번째 매개 변수는 경로가 전망보고에서 기본 템플릿으로 렌더링 할 수있다

두번째 매개 변수는 필요한 사전 객체 렌더링 템플릿 인

세, 쿠키
등록 개시에서 3.1
, 라우터가 가정 라우터에 전화를 연결, 그것은 "로그인"상태입니다. 전화를 분리하는 것은 비 기록이다.

如果对应到网站上，因为HTTP协议的无状态。导致没有办法保持住连接。从理论上来说，是无法实现登录。

所以，有人想了一个办法。

HTTP第一次登录， 在响应头中设置一个标记。该标记上有一些信息。将用户的姓名和密码设置在该标记上返回给前端。

当浏览器接受到本次响应，查看到该标记，于是就把数据存储起来。之后每一次发往该服务器的请求都会携带该数据。

这个标记就叫做cookie。

存储在浏览器端。

登录之前：

登录之后：

访问其他页面：

3.2 设置cookie
任何服务器都可以设置cookie，不仅仅是node服务器。

如果是原生node服务器，那么请使用res.setHeader来设置cookie

如果是express服务器，那么请使用 res.cookie();

res.cookie(key,value, options)

key: cookie的键名

value: cookie的键值

options: 对当前cookie的配置对象

domain: 表示主域 默认是服务器的域名

expires: 表示过期日期 默认没有 也就是关闭页面即过期

maxAge: 表示过期毫秒值  值默认为0 也就是关闭页面即过期

path: 表示在哪个路径下生效 默认是/ 也就是全路径下都生效

httpOnly: 表示只能服务器设置cookie

 res.cookie("username", username);

四、 Session
cookie已经可以保持登录状态了。但是使用的方式有缺陷。

明文传递敏感信息。这是不可取的。

所以又有了session。

第一次用户登录的时候，将信息传递给后台，服务器将数据存入session，并返回一个随机id。将该id放入响应头中（其实就是放入cookie中），返回给前端。

当浏览器接受到cookie，存储数据。

以后浏览器每一次登录的时候都会把id带到服务器上，服务器可以根据id去session中查询得到本次连接的用户是谁。

同样的任何服务器都可以设置session。

express帮助我们简化了这个过程。

需要借助 express-session 模块

下载：

1 npm install express-session

配置:

1 // 引入express-session

2 var session = require("express-session");

3 // 配置session

4 app.use(session({

5 비밀 "dsoifjewaoifjoiewajfoiewajfoijewafoijewaoifjewao"

6 다시 저장 : 거짓,

7 saveUninitialized : 거짓

8}))

사용 : 모든 경로 정보가 req.session.xxx를 사용하여 정보를 설정 req.session.xxx를 사용하여 읽기 =

있는 공개 문제 없다 "icketang", 최신 정보에 대한 프론트 엔드, 학습 자료

"아쇼카 교실 교육 전문 프런트 엔드"프런트 엔드 B 전쟁 검색 무료 동영상 및 프로젝트 전투를보고