NodeJs Express框架

express ejs cookie

是封装好的npm包

1.简介及使用

1.1 安装

必须先有 npm 然后 npm init 创建好包后 在安装express

2.路由

将信息从端点传递到客户端

由源 传递到目的地叫做路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const express=require('express');
const app=express();
app.get('/',(request,response)=>{
//send 方法是express 封装的一个响应的方法 会自动设置响应字符集
response.send('路由页面');
})

app.get('/admin',(requert,response)=>{
response.send('后台页面');
})

app.get('/login',(requert,response)=>{
response.send('登录页面页面');
})
app.listen(80,function(){
console.log('cg');
} )

//post请求
app.post('/login',(request,response)={
 app.response('post 请求提交成功');  
})

//all 方法 不管是什么请求都能正常的响应
app.all('/login',(request,response)={
 app.response('all');  
})


//express.query 方法

html 表单部分

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
       
      //from 表单是可以在
<form action="http://127.0.0.1/login" method="post">

<input type="rext" name="username"/><br />
<input type="rext" name="password"/><br />
<input type="submit" value="提交"/>
</form>
</body>
</html>

2.1内网渗透

2.2 express query 方法

query 返回的是一个 集成了请求信息的对象(请求方法,请求的url http协议的版本 请求头信息等等)

1
2
3
4
5
6
7
8
9
10
11
12
const express=require('express');
const app=express();
app.get('/index',(request,response)=>{
   //输出请求信息对象
console.log(request.query);
   //输入请求信息对象的text的值
console.log(request.query.text);
response.send('index 界面')
})
app.listen(80,function(){
console.log('cg');
} )
  • request.rarans.id

    获取url中路径的参数

    1
    2
    3
    4
    5
    6
    //url中需要我们填写占位符 

    app.get('/:id.index',(request,response)=>{
       let id=request.params.id;
    response.send(`${id}`)
    })
  • request.get()

    获取请求头中指定的key对应的value

2.3 响应的设置

response.statusCode=404; 响应状态字符串

response.statusMessage=’dddddd’;响应状态字符串

response.setHeader(‘ddd’,’one’);响应头

response.write(‘dddd’);响应体

设置响应体以后就不能设置响应头了

2.4 静态资源服务

  • 配置网站的根目录

    **网站的根目录一般存放的是 html css js 视频和音频 图片等 这种不经常改变的一些东西,对于内容要频繁变化的 会设置路由规则 **

    如果客户端对服务端发送请求的话 首先会到根目录下寻找与之对应的文件 如果在网站的根目录没有找到与之匹配的文件的话 就会根据路由规则 从路由里面寻找,如果路由和根目录都同时存在某个文件的话 会优先使用根目录的文件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    //app.use(express.static(__dirname+'/public'));
    //这个是配置网站根目录的语句是不可以变的


    const express=require('express');
    const app=express();

    app.use(express.static(__dirname+'/public'));

    app.get('/index',(request,response)=>{
       //输出请求信息对象
    console.log(request.query);
       //输入请求信息对象的text的值
    console.log(request.query.text);
    response.send('index 界面')
    })
    app.listen(80,function(){
    console.log('cg');
    } )


    //如果客户端发送请求找文件的话 首先会从public 根目录下面找 ,找不到在根据路由规则接着寻找

2.5 中间件

把需要重复做的事情,写成一个函数,哪里需要哪里搬

一般分为路由中间件和全局中间件

先声明中间件 在要使用的地方调用就可以了

中间件的使用设置

1,安装

2,在代码中引用中间件

3,app.use 或者再 路由中进行制定设置

4,可选(在指定的语法中使用指定的语法操作)

不会就看文档

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
// 中间件就是 函数
const express = require('express');
const moment = require('moment');
const fs = require('fs');

const app = express();

//1. 声明一个中间件函数 next 是一个函数类型的值,   console.log('记录');
let record = function(request, response, next){
   //获取时间 Date getFulleYear getMonth getDate  
   let time = moment().format('YYYY-MM-DD HH:mm:ss');
   //获取路径
   const path = request.url;
   //拼接要写入的字符串
   let str = `[${time}] ${path}\r\n`;
   //写入文件
   fs.writeFileSync('./access.log', str, {flag: 'a'});
   //调用 next 函数
   next();
}

//一. 路由中间件 检测用户
let checkUser = function(request, response, next){
   //获取 admin url参数
   let isAdmin = request.query.admin;
   //判断
   if(isAdmin === '1'){
       //满足条件
       next();
  }else{
       //跳转登录页面
       response.redirect('/login');
  }
}


//2. 使用中间件 中间件的配置 (全局中间件)
app.use(record)

//路由
// 将用户的请求 记录在文件中 access.log   [2020-10-26 10:10:10] /
app.get('/', (request, response) => {
   response.send('中间件');
});

//路由规则 127.0.0.1/admin?admin=1
//二 添加函数至第二个参数
app.get('/admin', checkUser, (request, response) => {
   response.send('后台首页')
});
//         ?admin=1
app.get('/setting', checkUser, (request, response) => {
   response.send('后台设置');
});

app.get('/shuju', checkUser, (request, response) => {
   response.send('后台数据页面');
});

app.get('/home', (request, response) => {
   response.send('前端首页');
})

app.get('/cart', (request, response) => {
   response.send('购物车');
});

app.get('/login', (request, response) => {
   response.send('登录页面');
});



app.listen(80);

2.6 时间处理插件(moment)http://momentjs.cn/ 官网地址

通过npm来安装

1
2
3
const moment=require('moment');
let time=moment().format('YYYY-MM-DD HH:mm:ss');
console.log(time);

2.7静态资源服务中间件

短时间内不会变更的资源 叫静态资源

内容和时长会发生改变的 叫动态资源(首页 列表 等等)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const express=require('express');
const app=express();

//静态资源中间件
// 返回结果是一个函数

//第一个中间件--路由中间件   -------------------------
app.use(express.static('./public'))


//第二个中间件 ---请求体参数的获取-----------------
app.get('/',(request,response)=>{
response.send('初始界面');
})
app.listen(80,function(){
console.log("80端口监听中");
} )

2.8 路由器

把一些路由的代码 进行单独的抽离 放在一个单独的文件里面进行管理

  • **被单独管理的路由代码 **

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    //1. 引入 express 包
    const express = require('express');
    //2. 创建路由器对象 router 是一个微型的 app 对象
    const router = express.Router()

    //3. 修改路由
    router.get('/home', (request, response) => {
    response.send('home 页面');
    });

    router.get('/home.html', (request, response) => {
    response.send('<h1>home.html</h1>')
    })

    router.get('/videos', (request, response) => {
    //数据处理 读取数据库 读取文件
    response.send('电影列表页');
    });

    router.get('/x/cover/:id.html', (request, response) => {
    //获取id
    let id = request.params.id;
    //获取 电影的信息 JSON
    // 与 HTML 结构拼接 形成最终的 HTML (响应体)
    });
    //4. 暴露router对象
    module.exports = router;
    • 需要引入路由的文件
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // 安装 express
    // 引入 express 包
    const express = require('express');
    // 创建应用对象
    const app = express();
    //
    const router = require('./routes/router');
    const adminRouter = require('./routes/admin');

    //配置网站的根目录
    // app.use(express.static(__dirname+ '/public'));
    //设置
    app.use(router);
    app.use(adminRouter);

    //1. 创建一个 routes 文件夹
    //2. 创建单独的文件 router.js
    //3. 修改 router.js 中代码(四步)
    //4. 主文件中引入 router.js
    //5. app.use 设置中间件

    // 监听端口 启动服务
    app.listen(80, () => {
    console.log('服务已经启动.. 端口 80 监听中....');
    });

3.ejs

**是一个模板引擎 **

作用:实现用户的界面与数据相分离 对前端来讲 就是为了分离html页面和数据的

  • 安装

    1
    yarn add ejs
  • 引入ejs

    1
    const ejs=require('ejs');
  • 调用方法

    ejs.render(‘字符串’,数据对象)

    1
    2
    3
    4
    5
    6
    let str='<h1><%=name%></h1>';

    //-----------------ejs 只认知<h1><%=name%> 这种语法

    const data={name='张三'};
    const result=ejs.render(str,data);

    js操作前端数据

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    // ejs 模板引擎 一种技术 并不是 JS 独有的
    //1. 安装 ejs
    //2. 引入 ejs
    const ejs = require('ejs');
    const fs = require('fs');

    //3. 调用方法
    /**
    * str 要编译的字符串
    * data 数据对象
    */
    // 一. 变量的拼接
    let str = fs.readFileSync('./dome.html').toString();
    let data = {
    msg: '为荣耀而生,为荣誉而死',
    title: 'H5200826'
    };
    const result = ejs.render(str, data);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>
    </head>
    <body>
    <h1><%= tiele %></h1> /前端界面一定要写ejs可以识别的这一行
    </body>
    </html>

    数据的遍历

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    const ejs = require('ejs');
    const fs = require('fs');
    // let str = `
    // <ul>
    // <% for(let i=0;i<songs.length;i++){ %>
    // <li><%= songs[i] %></li>
    // <% } %>
    // </ul>
    // `
    let str = fs.readFileSync('./歌曲列表.html').toString();

    let data = {
    songs: [
    '甜蜜蜜',
    '笨小孩',
    '常回家看看',
    '难忘今宵',
    '好运来'
    ]
    };
    let result = ejs.render(str, data);
    console.log(result);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌曲列表</title>
    <style>
    body{
    background:#ace;
    }
    </style>
    </head>
    <body>
    <h2>歌曲列表</h2>
    <ul>
    <% for(let i=0;i<songs.length;i++){ %>
    <li><%= songs[i] %></li>
    <% } %>
    </ul>
    </body>
    </html>

    服务器端

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    const ejs = require('ejs');
    const fs = require('fs');
    const express=require('express');
    const app=express();
    // let str = `
    // <ul>
    // <% for(let i=0;i<songs.length;i++){ %>
    // <li><%= songs[i] %></li>
    // <% } %>
    // </ul>
    // `


    app.get('/gequ',(request,response)=>{
    let str = fs.readFileSync('./歌曲列表.html').toString();

    let data = {
    songs: [
    '甜蜜蜜',
    '笨小孩',
    '常回家看看',
    '难忘今宵',
    '好运来'
    ]
    };
    let result=ejs.render(str,data);
    response.send(result);
    })
    app.listen(80,()=>{
    console.log('80端口监听中-----------');
    })
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>歌曲列表</title>
    <style>
    body{
    background:#ace;
    }
    </style>
    </head>
    <body>
    <h2>歌曲列表</h2>
    <ul>
    <% for(let i=0;i<songs.length;i++){ %>
    <li><%= songs[i] %></li>
    <% } %>
    </ul>
    </body>
    </html>

4.会话控制cookie

http只会响应每一个请求 但是无法判断请求是谁发出的,这次来了下次就不认识了 无法识别客户端

cookie 本质是存在于浏览器端的一个文本,每次向服务器发送请求的时候都会附带cookie,cookief附带在http请求的请求头中,是键值对的结构。

  • 浏览器查看cookie的内容

    cookie 虽然存在浏览器端,但是存在安全风险,所以不能直接查看

    发送cookie的时候只会发送当前域名下的的cookie

  • cookie不能直接查看的原因

    **cookie 是可以说是用户的一个标识 如果被其他的应用程序或者人拿到你的cookie 就可以肆无忌惮的向服务器发送请,你的账户就可能被操作,造成你个人的损失 **

  • cookie是怎么来的

    cookie是由服务器响应回来的,在响应报完的响应头返回回来的。 浏览器会对响应报文做解析保存到浏览器。

  • 域名与顶级域名
    巴拉巴拉.com 是顶级域名
    www.巴拉巴拉.con 是二级域名
  • set-cookie 中的path 是设置cookie中生效的路径的

    如果生效的路径是 /inde 那么 他在其他的地方的响应都是无效的

    但是在绝大多数的情况下 cookie 的路径都是 ‘/‘

  • cookie 是具有时效性的

    带有时效性的cookie 关闭浏览器不会销毁此cookie 但是时间到了 就会自动销毁

    不带时效性的cookie 不关闭浏览器它就一直存在 但是关闭浏览器就自动销毁了

4.1cookie 的使用

npm 里面找cookie -parser 然后三步走 安装 声明 调用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
// cookie-parser 
//1. 安装 cookie-parser
//2. 引入 cookie-parser
var cookieParser = require('cookie-parser');

//安装 express
//引入 express 包
const express = require('express');
//创建应用对象
const app = express();
//3. 设置中间件 cookie 方法中间件内部添加的
app.use(cookieParser());
//路由的设置
app.get('/', (request, response) => {
//设置响应
response.end('Hello Express');
});
//设置 cookie
app.get('/set-cookie', (request, response) => {
//4. 设置 cookie
response.cookie('email','xiaohigh@163.com');
//设置带有时效性的 cookie 单位是毫秒
response.cookie('name','xiaohigh', {maxAge: 1*60*1000});
response.send('cookie的设置');
});
//获取 cookie
app.get('/get-cookie', (request, response) => {
//读取 cookie
console.log(request.cookies);//这里有 s 一定要注意
response.send('cookie 的读取');
});

//清空 cookie
app.get('/clear-cookie', (request, response) => {
response.clearCookie('email');
response.send('cookie 的清除');
})

//监听端口 启动服务
app.listen(80, () => {
console.log('服务已经启动.. 端口 80 监听中....');
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
session
session是什么
Session 是一个对象,存储特定用户会话所需的属性及配置信息。Session是保存在服务器端的数据.(保存介质, 文件、数据库、内存)
session运作流程
我们可以在服务器中为每一次会话创建一个对象,然后每个对象都设置一个唯一的id,并将该id以cookie的形式发送给浏览器,然后将会话中产生的数据统一保存到这个对象中,这样我们就可以将用户的数据全都保存到服务器中,而不需要保存到客户端,客户端只需要保存一个id即可。
session的使用
1)下载安装
npm i express-session --save
2)引入模块
var session = require("express-session");
3)设置为中间件
app.use(session({
name: 'id22', //设置cookie的name,默认值是:connect.sid
secret: 'atguigu', //参与加密的字符串(又称签名)
saveUninitialized: false, //是否为每次请求都设置一个cookie用来存储session的id
resave: true ,//是否在每次请求时重新保存session
cookie: {
httpOnly: true, // 开启后前端无法通过 JS 操作
maxAge: 1000*30 // 这一条 是控制 sessionID 的过期时间的!!!
}
}));
cookie 和 session的区别
1)存在的位置:
cookie 存在于客户端
session 存在于服务器端,一个session域对象为一个用户浏览器服务
2)安全性:
cookie是以明文的方式存放在客户端的,安全性较低,可以通过一个加密算法进行加密后存放
session存放于服务器中,所以安全性较好
3)网络传输量:
cookie会传递消息给服务器
session本身存放于服务器,但是通过cookie传递id,会有少量的传送流量
4)大小:
cookie 保存的数据不能超过4K,很多浏览器都限制一个站点最多保存50个cookie
session 保存数据理论上没有任何限制

session的使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
const express = require('express');
//1. 安装 express-session
//2. 引入 模块
const session = require('express-session');
const app = express();
//3. 设置中间件
app.use(session({
secret: 'keyboard cat',
resave: false,
saveUninitialized: true,
}));

//设置 session, 一般是用户在登录成功之后 会设置 session
app.get('/set-session', (request, response) => {
request.session.name = 'xiaohigh';
request.session.email = '1231231@qq.com';
response.send('登录成功');
});

//读取 session 检测用户是否登录 会用到session的读取
app.get('/get-session', (request, response) => {
//读取session
//用户名
console.log('当前登录的用户为' + request.session.name);
console.log('当前登录的邮箱为' + request.session.email);
response.send('个人中心');
});

//session 的销毁
app.get('/destroy-session', (request, response) => {
//销毁session的方法
request.session.destroy(function(){
console.log('销毁成功');
response.send('安全退出登录');
});
});


app.get('/', (request, response) => {
response.end('Hello Express');
});
app.listen(80, () => {
console.log('服务已经启动.. 端口 80 监听中....');
});