node系列--【express生成器安装及第三方中间件安装】

一、express生成器安装

第一次使用需要全局安装：

安装： npm i express-generator -g

安装完成后 ： express -h 查看常用命令

创建步骤：

1）express --view=ejs sa02

​ --view=ejs 将ejs指定为默认的模板引擎

​ sa02 指新创建的项目文件夹，不能是中文或关键词

2）cd sa02 进入当前项目

3） npm i 安装package.json配置中的依赖，全部安装所有包

4） 拷贝nodemon.json 到当前的项目下面

5） 修改 package.json, 添加一行代码：

  "scripts": {
    "start": "node ./bin/www",
    "dev":"nodemon ./bin/www"
  },

​ 以后启动项目，执行 npm run dev 即可

6） 找到 ./bin/www 文件 ，28行添加回调函数：

server.listen(port,()=>{

 console.log("http://127.0.0.1:3000");

});

二、 第三方中间件

2.1 热更新 nodemon

​ 作用，监听代码的改动，当代码改变之后，自动重启（自动重新执行程序）

​ 1) npm init -y

​ 2) npm i express

​ 3) npm i nodemon -g (全局安装，只需要安装一次，可以在任何项目中调用)

​ 4）创建一个nodemon.json 的配置文件，内容：

{
  "restartable": "rs",
  "ignore": [".git", ".svn", "node_modules /**/ node_modules"],
  "verbose": true,
  "execMap": {"js": "node --harmony"},
  "watch": [],
  "env": {"NODE_ENV": "development"
  },
  "ext": "js json"
}

​ 将 nodemon.json 拷贝到项目的根目录下

​ 最后，启动项目 nodemon index.js

注意，如果出现报错，可按照以下方法处理：

https://blog.csdn.net/larpland/article/details/101349586

2.2 表单数据解析 formidable

​ 作用:可以将用户的表单数据处理为对象，特别是有上传控件时，方便开发者调用。

​ 安装： npm i formidable

​ 配置使用：

​ 首先引入该模块

let formidable = require("formidable");

​ 然后在路由的处理函数中使用：

app.post("/baoming",(request,response)=>{
  // 配置
  const form = formidable({ multiples: true });
  // 设置上传文件的存放目录
  form.uploadDir = "./upload";
  // 解析表单中的数据
  form.parse(request,(err,fields,files)=>{
    // fields 是普通的表单控件的name和value组成键值对的对象
    let {username,userage} = fields;
    // files 是上传控件的name和上传文件信息组成的对象
    let photoPath = files.photo.path;
    
    response.writeHead(200, { 'content-type': 'application/json' });
    response.end(JSON.stringify({ fields, files }, null, 2));
  })

​ fields 和 files 内容如下：

  "fields": {
    "username": "李四",
    "userage": "19"
  },
  "files": {
    "photo": {
      "size": 25046,
      "path": "upload\\upload_3d005dab15156ca61b66be947a366720",
      "name": "3016253704_23.jpg",
      "type": "image/jpeg",
      "mtime": "2021-04-20T07:06:56.940Z"
    }
  }

更名操作，将上传的文件加上后缀名。更名完成后，将用户的数据拼为josn，写入到文件中。

    // 更名
    let oldPath = files.photo.path;
    let orgiName = files.photo.name; //原始文件名
    let extName = path.extname(orgiName); //获取扩展名 .jpg
    let newPath = oldPath + extName;
    // 更名函数，参数1是要更名的文件路径。参数2是更名后的文件路径
    fs.rename(oldPath,newPath,(err)=>{
      if(!err){
        let obj = {username,userage,userphoto:newPath};
        fs.writeFile("./data/"+username+".txt", JSON.stringify(obj), (err)=>{
          response.send("报名成功");
        })
      }
    })

查看报名列表 /list

app.get("/list",(request,response)=>{
  let files = fs.readdirSync("./data");
  let str = "<style>table,th,td{border:1px solid #000;}</style><table><tr><th>姓名</th><th>性别</th><th>照片</th></tr>"
  for( let item of files){
    let data = fs.readFileSync("./data/"+item);
    let obj = JSON.parse(data.toString()) 
    str += `<tr><td>${obj.username}</td><td>${obj.userage}</td><td><img src="${obj.userphoto}" width=100 height=60></td></tr>`;
  }
  str += "</table>";
  response.send( str )
})

响应图片请求，显示图片

app.get("/upload/:imgURL",(request,response)=>{
  let imgURL = request.params.imgURL;
  fs.readFile("./upload/"+imgURL, (err,data)=>{
    response.send( data )
  })
})

2.3 cookie 管理 cookie-parser中间件

​ 负责设置客户端的cookie，获取浏览器端的cookie。cookie作用：客户端存储技术，用于存储用户的登录状态、用户的账号、头像、兴趣爱好、交易记录。

安装： npm i cookie-parser

1. npm init -y

2. npm i express

3. 拷贝一个nodemon.json

4. npm i cookie-parser

5. 创建一个入口文件 index.js

2.3.1 普通cookie

配置cookie-parser中间件：

let cookieParser = require("cookie-parser");
// 配置cookie-parser中间件,必须要放在路由代码之前
app.use( cookieParser() )

cookie添加：

// 语法： response.cookie("名称","值")
response.cookie("username","jack"); //添加一个cookie作为登录凭证

cookie读取：

// 用户每次发送请求，浏览器就自动会将cookie 附加在请求对象上
// 读取cookie: request.cookies.名称 或  request.cookies[名称]
  if( !request.cookies["username"] ){
    // 没有cookie,提示去登录
    response.send("请登录后访问，<a href='/login'>登录</a>")
  }else{
    response.send("欢迎"+ request.cookies["username"] +"访问首页")
  }

2.3.2 加密cookie (签名cookie)

添加cookie时的选项：

domain：cookie在什么域名下有效，类型为String,。默认为网站域名

expires: cookie过期时间，类型为Date。如果没有设置或者设置为0，那么该cookie只在这个这个session（会话）有效，即关闭浏览器后，这个cookie会被浏览器删除。

maxAge: 实现expires的功能，设置cookie过期的时间，类型为String，指明从现在开始，多少毫秒以后，cookie到期。

path: cookie在什么路径下有效，默认为'/'表示整个网站目录下有效，类型为String

secure：只能被HTTPS使用，类型Boolean，默认为false

httpOnly: 只能被web服务器访问，类型Boolean。即浏览器端不能访问使用cookie，可以防止XSS（跨站脚本攻击）攻击。

signed:使用签名，类型Boolean，默认为false。express会使用req.secret来完成签名

使用签名cookie步骤：

1） 添加cookie时，增加 {signed:true}

response.cookie("username","jack",{maxage:1000*60*60*24,signed:true});

2）配置cookie中间件时，添加一个签名字符串。

// 配置cookie-parser中间件;如果要使用签名cookie，则添加一个签名字符串
app.use( cookieParser("offnc.com") )

3） 读取cookie时，使用 request.signedCookies.名称 或者 request.signedCookies["名称"]

request.signedCookies["username"]

3.4 session 管理

安装： npm i express-session

作用：一种基于后端的临时存储数据的技术。存储在服务器上缓存中。

配置文件说明：

secret 一个 String 类型的字符串，作为服务器端生成 session 的签名

name 返回客户端的 key 的名称，默认为 connect.sid,也可以自己设置

resave 强制保存 session 即使它并没有变化,。默认为 true。建议设置成 false。

saveUninitialized 强制将未初始化的 session 存储。当新建了一个 session 且未设定属性或值时，它就处于未初始化状态。在设定一个 cookie 前，这对于登陆验证，减轻服务端存储压力，权限控制是有帮助的。(默 认:true)。建议手动添加

cookie 设置返回到前端 key 的属性，默认值为{ path: ‘/’, httpOnly: true, secure: false, maxAge: null }

rolling 在每次请求时强行设置 cookie，这将重置 cookie 过期时间(默认:false)

配置项：

// 配置session
let options = {
  secret:"offcn.com",
  resave:false,
  saveUninitialized:true,
  cookie:{ httpOnly: true, secure: false, maxAge: null }
}
app.use( session(options) );

添加：request.session.username = "jack" 或 request.session["username"] = "jack"

  request.session.sex = "男";
  request.session.age = 20;

读取： request.session.username 或 request.session["username"]

    if( request.session.sex == "男" ){
      response.send("欢迎"+ request.signedCookies["username"] +"先生访问首页")
    }else{
      response.send("欢迎"+ request.signedCookies["username"] +"女士访问首页")
    }

​ 总结：

​ session、cookie 都可以在页面之间共享信息，形式上都是键值对（key-value）,只能保存字符串类型（json可以字符串化）。

​ 不同之处：cookie 存在客户端（浏览器的临时文件夹中）。session存在服务端的缓存中。

3.5 svg-captcha 图形码验证

​ 作用：随机生成字符串，然后将字符串转为svg格式的图像，添加一些干扰线条。将图像发送给客户端

安装： npm i svg-captcha

​ 配置：

let captcha = require("svg-captcha");

​ 然后在路由的处理函数中的代码：

router.get("/yzm",(request,response)=>{
  // svg-captcha的配置项：
  let option = {　　    　  
    size: 4,  //验证码长度
    width: 100,
    height: 60,
    background: "#f4f3f2",
    noise: 4,//干扰线条数
    fontSize: 42,
    ignoreChars: '0o1i',   //验证码字符中排除'0o1i'
    color: true // 验证码的字符是否有颜色，默认没有，如果设定了背景，则默认有           
  }
  let svg = captcha.create(option);
  console.log( svg);
  response.type("svg");
  request.session.yzm = svg.text;
  // 将svg对象中的text属性保存为一个session，将对象的data部分发送到浏览器，让用户填写验证码。当表单提交后，获取用户填写的验证码和session中的字符串进行对比。如果不一致就提示用户验证码错误。
  response.send( svg.data )
})

前端页面添加标签

<img src="/yzm" alt=""><br/>