node.js (token 文件上传 后端渲染 jade ejs)

token

思想

在服务端不需要存储用户的登录记录，全部发给客户端有客户端自己存(cookie,local)

1、客户端使用用户名跟密码请求登录
2、服务端收到请求，去验证用户名与密码
3、验证成功后，服务端会签发一个 Token（加了密的字符串），再把这个 Token 发送给客户端
4、客户端收到 Token 以后可以把它存储起来，比如放在 Cookie 里或者 Local Storage 里
5、客户端每次向服务端请求资源的时候需要带着服务端签发的 Token
6、服务端收到请求，然后去验证客户端请求里面带着的 Token，如果验证成功，就向客户端返回请求的数据

具体实现代码如下

let express = require("express")
let app = express()
let bodyParser = require("body-parser")

//引入jsonwebtoken模块
let jwt = require("jsonwebtoken")

app.listen(3000,()=>console.log("3000端口正在监听中..."))

app.use(bodyParser())

//请求登录，服务端生成token令牌
app.get("/api/login",(req,res)=>{
    //1.获取username,password 进行数据库的验证
    //2.生成token令牌
    let token = jwt.sign({
        username:req.query.username
    },"nz1906",{
        expiresIn:60 //过期时间，按照秒算
    })
    // console.log(token)
    //3. 将token和库信息返回给前端
    res.send({
        err:0,
        msg:"用户登录成功了..",
        data:"库数据",
        token
    })
})

//校验token
app.get("/api/user",(req,res)=>{
    //1.获取客户端传递来的token
    let token = req.query.token || req.body.token || req.headers.token;
    //2.校验token 
    jwt.verify(token,"nz1906",(err,decode)=>{
        // console.log("err",err) //null就代表没有报错
        console.log("decode",decode) 
        if(err){ //一旦报错了，说明用户信息校验失败
            res.send({ 
                err:1,
                msg:"当前登录失败，token失效了！"
            })
        }else{ //校验成功
            //3.数据返回给前端
            res.send({
                err:0,
                msg:"成功！",
                data:"库数据"
            })
        }
    })
})

token的删除是由客户端 负责删除

文件上传

• path内置模块

API

• 磁盘路径解析

path.parse("c:\\wamp\\xx.png") string -> object
返回结果如下：
{
root:"c:\\",盘符
dir:"c:\\wamp", 目录
base:"xx.png", 文件名
ext:".png",  扩展名
name:"xx" 文件。不含扩展名
}

• 片段合并(join)

path.join('磁盘路径1',"磁盘路径2","磁盘路径3")

__dirname 魔术变量 返回当前文件所在的磁盘路径

• 片段合并resolve

path.resolve("磁盘路径1","磁盘路径n")

合并磁盘片段,从右到左找到根目录,从左到右拼接,若没有找到根目录，就以当前文件所在目录为根目录

• multer中间件

multer接受form-data编码数据 所有要求前端携带时注意一下 如：

let multer = require("multer")

let objMulter = multer({dest:'./upload'})//指定保存到服务端的位置
//安装中间件
app.use(objMulter.any())//允许上传什么类型文件 any代表任何类型

//中间件扩展了req请求体req.files
app.get("/api/reg",(req,res)=>{
	req.files ///返回一个对象 数据如下
})

fieldname: 表单name名
originalname: 上传的文件名
encoding： 编码方式
mimetype: 文件类型
buffer: 文件本身
size：尺寸
destination: 保存路径
filename： 保存后的文件名 不含后缀
path： 保存磁盘路径+保存后的文件名 不含后缀

具体代码操作如下

const express = require("express")

const fs = require("fs")

const path = require("path")

const multer = require("multer")

const app = express()

app.listen(3000,()=>{
    console.log("正在监听3000端口")
})
//静态资源托管 客户端可以通过地址直接访问文件
app.use(express.static("./public"))

//实例化 nulter
 let objMulter = multer({
     dest:'./public/upload'
 })

//使用中间件 来增添req.files的功能 

//  app.use(objMulter.image())//表示只能上传 图片
 app.use(objMulter.any()) //表示能上传任意类型的文件

 app.get("/api/reg",(req,res) => {
     console.log(req.files)
     console.log(req.files[0].path)//图片上传后在服务端的位置 及名字 
    //上传到服务端的文件没有后缀名 不能正常使用 
    //通过下面操作给文件添加后缀名
     let  oldFile = req.files[0].path 
     //利用path获取文件的后缀名 然后进行拼接 
     let newFile = req.files[0].path + path.parse(req.files[0].originalname).ext
     fs.renameSync(oldFile,newFile) //更改文件名字
     res.send({ //图片地址返回给客户端
         err:0,
         url:"http://localhost:3000/upload/"+req.files[0].filename + path.parse(req.files[0].originalname).ext
     })

 })

后端渲染

通常前端根据后端返回的json数据,然后来生成html被称为前端渲染 而后端渲染是把后端json和html结合渲染好后返回到浏览器 没前端什么事情

下面介绍两种后端渲染页面的方法

• jade

1.要新建一个jade文件 在里面编写 html
2.新建一个js文件 在文件中引入jade第三方模块
3.再用jade.renderFile(“jad的文件地址”) 引入jade文件
4.然后返回给浏览器
具体操作代码如下 e

//index.jade  (在views/jade文件夹下)
html
    head
    body
        div
            ul
                li
                    a(href="http://baidu.com")百度
        div 
            h1 #{data}

//jade.js  (与vives文件夹同级)
const express = require("express")

const jade = require("jade")

const app = express() 

app.listen(3000,()=>{
    console.log("3000端口正在监听")
})

app.get("/",(req,res)=>{
    // jade.renderFileFile("jade文件地址",[数据])
    let html = jade.renderFile("./views/jade/index.jade",{
        pretty:true,data:"你好"
    })
    res.send(html)
})

• ejs

const ejs = require("ejs")
ejs.renderFile("ejs模板文件",{数据},(err,data)=>{})
//err 错误 返回null 代表没有错误 
//data 渲染后的字符\流
//ejs模板 表示后缀名为ejs的html文件 

• ejs模板文件语法

ejs 结构就是html
输出: <%= 数据名|属性名|变量名 + 表达式 %>
语句： <% 语句 %> 需要被<% %> 包裹
非转义输出: <%- 数据名|变量名 + 表达式 %>
载入公共：<%- include(’./hd.ejs’,{数据}) %>