Express学习笔记与记录

长孙高远

2023-12-01

Express安装

官方文档：https://www.expressjs.com.cn/starter/installing.html

第一步全局安装Express脚手架

npm install -g express-generator

第二步进入一个空的文件夹

$ express -h

  Usage: express [options] [dir]

  Options:

    -h, --help          输出使用方法
        --version       输出版本号
    -e, --ejs           添加对 ejs 模板引擎的支持
        --hbs           添加对 handlebars 模板引擎的支持
        --pug           添加对 pug 模板引擎的支持
    -H, --hogan         添加对 hogan.js 模板引擎的支持
        --no-view       创建不带视图引擎的项目
    -v, --view <engine> 添加对视图引擎（view） <engine> 的支持 (ejs|hbs|hjs|jade|pug|twig|vash) （默认是 jade 模板引擎）
    -c, --css <engine>  添加样式表引擎 <engine> 的支持 (less|stylus|compass|sass) （默认是普通的 css 文件）
        --git           添加 .gitignore
    -f, --force         强制在非空目录下创建

直接使用ejs模版

express -e

再将所有依赖进行安装

npm install

Express路由

1.字符串的路由模式

app.get('/',(req,res) => {
    res.send("这是首页")
})

2.类字符串的正则模式

app.get('/ab?cd',(req,res) => {
    res.send("这是abcd/acd")
})

其他：

/ab+cd => abcd/abbcd/abbbcd

/ab*cd

3.正则表达式路径

app.get(/a/,(req,res) => {
    res.send("/a/")
})

4.动态路由

app.get('/news/:cataoryid/:newsid',(req,res) => {
    res.send("新闻id页面" + req.params.newsid)
})

5.路线处理程序

实现函数之间的层层传递

app.get('/',(req,res,next) => {
    let a = "1111"
    next()
},
(req,res,next) => {
    res.send("这是首页" )
})

ejs常用语法

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <% for(var i = 0;i < 10;i ++){ %>
      <% =i %>
    <% } %>
    <h1><%= title %></h1>
  </body>
</html>

<% title %>,里面写入的是js语法
<%= title %>,里面是服务端发送给ejs模版转义后的变量，输出为原html
<%- title %>,里面也是服务端发送给ejs模版后的变量，不过他不会把html输出来

GET提交

通过get提交的数据，可以通过

req.query

拿到数据

POST提交

app.use(express.urlencoded())

//然后通过
req.body//拿到数据

允许前端跨域请求中间件

let api = express.Router()
api.use(function(req,res,next) {
    res.append('Access-Control-Allow-Origin',"*")
    res.append('Access-Control-Allow-Content-Type',"*")
})

cookie

1.安装

npm install cookie-parser --save

2.引入

const cookieParser = require("cookie-parser")

3.设置中间层

app.use(cookieParser())

4.设置cookie

res.cookie("name","zhangsan",{maxAge: 90000,httpOnly: true})

//res.cookie(名称,值,{配置信息})有效期默认为一个会话

5.参数说明

1.domain:域名
name=value:键值对
Expires:过期时间
maxAge:最大失效时间
secure:当secure为true时，cookie在http中是无效，在https中才有效
path:表示在哪个路由下可以访问到cookie
singed:表示是否签名（加密）cookie,设为true会对这个cookie签名

6.查看加密的cookie

req.signedCookies
//{login: "true"}

7.加密原理解析

router.get('/secret',(req,res) => {
    let password = '123456'
    let sf = crypto.createHash('md5')//使用加密算法
    sf.update(passworld)//将passworld转为二进制
    let content = sf.digest('hex')//二进制以字符串形式显示
    res.send(content)
})

8.自定义加密代码

function setSecretCookie(str,secretStr) {
    secretCookie[secretStr] = str
}
function getSecretCookie(secretStr) {
    return secretCookie[secretStr]
}
function jiami(str) {
    let password = str
    password = password + 'll'
    let sf = crypto.createHash('md5')
    sf.update(passworld)
    let content = sf.digest('hex')
    res.send(content)
}

session

session保存在服务器中，当客户端访问服务器时，服务器会生成一个session对象

1.安装、引入、设置

npm install express-session --save
const session = require('express-session')
session(options)

2.常用配置

app.use(session({
    secret: "keyboard cat",//密盐
    resave: false,//是否强制保存
    saveUninitialized: true,
    cookie: ('name','value',{maxAge: 22222,secure: false})
}))

//设置session
app.use('/login',(req,res) => {
    req.session.userInfo = "zhansan"
})

//获取
req.session.userinfo

//销毁
req.session.destory(() => {
    
})

multer中间件

multer可以实现文件的上传

npm install multer --save

var multer = require('multer')
var upload = multer({dest: "./public/upload"})

文件上传实现代码

//处理上传的post请求
//upload.array("imgfile",5)上传多个文件
// router.post('/',upload.array('imgfile',5),(req,res,next) => {
//     req.files.forEach((ele,index) => {

//     })
// })
router.post('/',upload.single('imgfile'),(req,res) => {
    console.log(req.file)
    //重命名文件名
    let oldPath = req.file.destination + "/" + req.file.filename
    let newPath = req.file.destination + "/" + req.file.filename + req.file.originalname
    let imgUrl = "/upload/" + req.file.filename + req.file.originalname
    fs.rename(oldPath,newPath,() => {
        console.log("文件上传成功")
    })
    res.send("<h1>上传成功</h1><img src= " + imgUrl + " >")
})

ajax实现文件的上传

    <h1>ajax上传文件</h1>
    <form action="/imgUpload" method="post" enctype="multipart/form-data">
        <input type="file" name="imgfile" id="imgInput">
        <div id="sBtn">上传</div>
    </form>
    <div>
        <h3>预览图片</h3>
        <img id="yulan" src="">
    </div>

    <script src="/javascripts/jquery-3.6.0.min.js"></script>
    <script>
        let formDataObj = new FormData();
        $('#imgInput').change(function(e) {
            let file = this.files[0]
            //预览图片
            //创建预览图片地址
            let httpUrl = window.webkitURL.createObjectURL(file)
            $("#yulan").attr("src",httpUrl)
            //创建formData对象，将文件追加到formData对象里
            formDataObj.append("imgfile",file)
        })
        $('#sBtn').click(function() {
            $.ajax({
                url: "/imgUpload",
                method: "POST",
                data: formDataObj,
                processData: false,
                contentType: false
            }).then((res) => {
                console.log(res)
                $('body').append("<h1>上传成功</h1><img src= " + res.imgUrl + " >")
            })
        })
    </script>