技术文章 | Technical articles

web全栈开发_node源码笔记

一、NodeJS简单复习

NodeJS是模块化开发的,有许多内置模块。HTTP模块用于搭建服务器。FS模块用于操作文件和文件夹。URL模块用于URL字符串和URL对象的转换。QueryStrings模块用于解析URL上的query

1.1 HTTP模块

1.2 FS模块

读取文件

fs.readFile(path, callback)

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

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

该回调函数有两个参数

err: 读取过程中可能出现的异常。 如果没有异常,errnull。如果有,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: 状态对象

isDirectory方法 返回布尔值 如果是文件夹 则为true 否则 为false

以上所有方法,都有一个xxxSync方法

例如:  readFile() 是一个异步方法 readFileSync是同步方法

readdir() 是一个异步方法 readdirSync是同步方法

unlink()是一个异步方法 unlinkSync……

有返回值的异步方法,通过回调函数的参数接受返回内容

有返回值的同步方法,通过变量接受返回内容

readFile(xxx, function(err, data) {

   data是读取到的文件的内容

})

var data = readFileSync(xxx);

data是读取到的文件内容

1.3 移除非空目录

// 定义函数

function del(path) {

console.log("进入" + path)

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

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

// 读取path文件夹

var arr = fs.readdirSync(path);

// 循环

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 }

 

二、Express

2.1 简介

Express是一个后端第三方模块

主要用于搭建服务器。

图片1.png 2.2 安装

npm: 包管理系统 所有上传了的模块都可以放在npm

下载:express

图片2.png

下载完成:

图片3.png

2.3 搭建服务器 

// 引入express

var express = require("express");

// 搭建服务器

var app = express();

// 监听服务器

app.listen(3000);

注:express没有对原生的属性和方法做任何的修改 只是对它增加了内容

 

2.4 路由

普通路由:

app.verbs(pathName, callback);

pathName: 是一个url中的pathName部分

callback: 是对应的处理函数

req: 请求对象

res: 响应对象

next: 放行函数

verbs的类型: get postputdelete

app.get:

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

})

app.post:

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

   

})

 

路由对象:

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

使用:

var route = express.Router();

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

  

})

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

})

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

app.use(route)

 

2.5 路由的配置写法

1 纯字符串

// 普通字符串

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

  console.log("a");

})

2 伪正则表达式

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

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

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

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

})

 

3 正则表达式

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

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

})

4 特殊url

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

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

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

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

// aaa:a => aaa123

// bbb:b => bbb234

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

// bbb => bbb b => 234

// ab组成一个对象 挂载req身上作为params属性存在

10  console.log(req.params)

11 })

 

2.6 静态中间件

假如,每一个路由都要配置,那么静态文件怎么办?难道要一个一个的写配置吗?

答:使用静态中间件

var express = require("express");

var app = express();

// 使用静态中间件

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

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

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

10 app.listen(3000);

此时,static目录下的任何文件都可以直接被访问到了

 

 

2.7 获取get请求数据

expressurl提前解析了,其中,query部分被格式化成一个对象挂载在req身上作为query存在。

前端提交的url:

http://localhost:3000/login?username=张三

后端得到的req.query:

{username: "张三"}

 

2.8 获取post请求数据

get 不同,post可能携带的数据比较多,于是express就将单独处理post请求的部分,提取出去,做成了一个插件。

插件名称: body-parser

下载方式: npm install body-parser

图片4.png

使用:

引入:  var body_parser = require("body-parser");

配置:  app.use(body_parser.urlencoded({extended: false}));

此时,可以在任何的post路由下,使用req.body获取提交上来的数据。

 

2.9 模板

express配合的模板常用的有两个: jade ejs

其中,jade模板需要使用空格缩进。与我们之前的underscore中的模板以及我们自定义的模板差别较大。

ejs,差别较小。我们选择ejs

下载ejs:

npm install ejs

完成:

图片5.png

使用: 在使用的时候不需要引入。因为express已经帮我们引入了。

默认文件夹: views

渲染模板:

res.render("login.ejs", {

username: username,

children: [

 {

  username: "王二小"

 },

 {

  username: "王小二"

 },

10   {

11    username: "张三"

12   }

13  ]

14 })

render方法

第一个参数是被渲染的模板的路径 默认从views下寻找

第二个参数是渲染该模板所需要的字典对象

 

三、Cookie

3.1 从登录开始

假设有一台路由器,手机连接到该路由器,就是“登录”状态。手机断开连接就是非登录状态。

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

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

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

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

这个标记就叫做cookie

存储在浏览器端。

 

登录之前:

图片6.png

登录之后:

图片7.png

 

访问其他页面:

图片8.png

 

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带到服务器上,服务器可以根据idsession中查询得到本次连接的用户是谁。

 

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

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

需要借助 express-session 模块

下载:

npm install express-session

配置:

// 引入express-session

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

// 配置session

app.use(session({

secret: "dsoifjewaoifjoiewajfoiewajfoijewafoijewaoifjewao",

resave: false,

saveUninitialized: false

}))

使用: 在任何路由下,使用req.session.xxx 读取信息  使用req.session.xxx= 设置信息


关注微信公众号“icketang”,获取最新前端资讯,学习资料

B站搜索“爱创课堂专业前端培训” 免费观看前端视频以及项目实战

学习咨询、更多前端学习资料 请添加微信“haomei0452”

上一篇文章: web前端_Ajax源码笔记
下一篇文章: 微信小程序开发实战教程

最新发布 | 这里有最新的文章查看更多>>

爱创推荐 | 这里有推荐的文章查看更多>>