本文介绍了如何使用Express结合multer模块处理图片上传，包括文件存储和命名策略。同时，讲解了EJS模板引擎的基本语法和应用场景。此外，还涵盖了Express中间件的next函数作用、全局中间件、错误处理中间件以及cookie和session的配置与使用。
文章目录
npx express-generator
老版本运行如下代码:
npm install -g express-generator
express
终端切换到创建文件夹的目录
express --view-ejs express10
创建了文件 express10
Express 结合 multer 上传图片
npm install --save multer
const multer = require('multer') //上传图片文件
封装一个函数
const path = require('path')
const sd = require('silly-datetime')
const mkdirp = require('mkdirp')
const multer = require('multer') //上传图片文件
const { mkdir } = require('fs')
let tools = {
multer() {
const storage = multer.diskStorage({
destination: async (req, file, cb) => {
//获取当前日期
const day = sd.format(new Date(), 'YYYY-MM-DD');
//按照日期生成图片存储目录
let dir = path.join(__dirname, '../public/upload', day)
await mkdirp(dir) //mkdirp 是异步方法
cb(null, dir) //上传之前目录必须存在
},
// 修改上传后的文件名
filename: function (req, file, cb) {
//1. 获取后缀名
let extname = path.extname(file.originalname)
//2. 根据时间生成后缀名
const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9)
cb(null, file.fieldname + '-' + uniqueSuffix + extname)
}
})
const upload = multer({ storage: storage })
return upload
},
md5() {
}
}
module.exports = tools
// 调用时:
let cpUpload = tools.multer().fields([{ name: 'pic1', maxCount: 1 }, { name: 'pic2', maxCount: 8 }])
router.post('/doLogin',cpUpload, (req, res) => {
res.send({
body: req.body,
file: req.files
})
})
EJS
语法
app.get("/article", (req, res) => {
const userinfo = {
username: '张三',
age: 20
}
const article = "<h2>解析并输出js标签<h2>"
const list = [111,222,333,444,]
res.render("news", {
userinfo: userinfo,
article: article,
flag:true,
score:70,
list:list
})
})
<h1>我是一个EJS模板引擎----新闻页面</h1>
<p><%=userinfo.username%>------<%=userinfo.age%></p>
<p><%-article%></p>
<h1>条件判断</h1>
<%if(flag == true) {%>
<strong>flag=true</strong>
<%}%>
<%if(score >= 60){%>
<p>及格</p>
<%}else{%>
<p>不及格</p>
<%}%>
<h1>循环遍历</h1>
<%for(let i =0; i<list.length; i++){%>
<li><%=list[i]%></li>
<%}%>
<%- include('footer.html') %>
修改模板文件的后缀名为 .html
const ejs = require('ejs')
// 注册html模板引擎
app.engine("html", ejs.__express)
//静态文件托管
app.set("view engine", "html")
ctrl + w + f
配置静态web目录
app.use(express.static("static"))
//app.use('/static', express.static('public')) 指定了一个挂载方式
中间件
next函数的作用
next 函数是实现多个中间件连续调用的关键, 他表示把流转关系转交给下一个中间件或路由.
全局生效的中间件
客户端发起的任何请求, 到达服务端后,都会触发的中间件,叫做全局生效的中间件
应用级中间件
用于权限判断
app.use((req, res, next) => {
console.log(new Date);
next()
})
错误处理中间件
app.use((req, res, next) => {
res.status(404).send("404")
next()
})
内置中间件
//配置静态web目录 内置中间件
app.use(express.static("static"))
第三方中间件
//配置第三方中间件,解析body
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())
cookie
npm i cookie-parser
// 1.引入
const cookieParser = require('cookie-parser')
// 2.配置
app.use(cookieParser("jhuk"))
//3.设置cookie
app.get("/", (req,res) => {
// 设置cookie
// 如果cookie没有过期的,关闭浏览器重新打开,cookie不会销毁
res.cookie("username", "zhangsan", {maxAge: 1000*60*60, signed:true})
res.send("你好 express")
})
//4.获取cookie
app.get("/news", (req, res) => { //post: 增加数据
// 获取cookie
let username = req.cookies.username
console.log(username);
res.send('注册页面--- ' + username)
})
cookie参数
cookie(name:string, val: string, option: CookieOptions): this;
option参数
maxAge?: number | undefined; //过期时间(毫秒数)
signed?: boolean | undefined; //是否加密
expires?: Date | undefined; //也是加密(用的较少)
httpOnly?: boolean | undefined; //默认为false,为true时只能在后台访问cookie,不能在javascript中访问
path?: string | undefined; //设置cookie访问的目录
//res.cookie("username", "zhangsan", {maxAge: 1000*60*60,path:"/news",})
domain?: string | undefined; //多域共享一cookie
//多个域名共享cookie, aaa.itying.com bbb.itying.com 配置:domain:".itying.com"
secure?: boolean | undefined; //true:cookie在http中无效,https中有效
encode?: ((val: string) => string) | undefined; //加密
sameSite?: boolean | 'lax' | 'strict' | 'none' | undefined;
加密cookie
//1.配置中间件,传入加密的参数
app.use(cookieParser("jhuk")) //参数随便写
//2.设置加密
res.cookie("username", "zhangsan", {maxAge: 1000*60*60,signed:true})
//3.获取加密
req.signedCookies 获取加密cookie
Session
session 是另一种记录客户状态的机制, 不同的是Cookie保存在客户端浏览器中,而session保存在服务器端
session相比cookie更安全一点,由于session保存在服务器上,所以当访问量增多的时候,会比较占用服务器的性能.单个Cookie保存的数据大小不能超过4k,很多浏览器都限制一个站点最多保存20个cookie,Session没有这方面的限制.Session是基于Cookie 进行工作的.
npm i express-session
// 引入
const session = require('express-session')
app.set('trust proxy', 1) // trust first proxy
// 配置session中间件
app.use(session({
secret: 'keyboard cat', ///服务端生成session的签名
resave: false, //默认设置 强制保存 session 即使它并没有变化
saveUninitialized: true, //默认设置 强制将未初始化的 session 存储
name: "itying", //sessin对应cookie的名称
roolling: true,
//在每次请求时,强行设置cookie,这将重置 cookie 过期时间(默认: false)
cookie: {
maxAge:1000*60,
secure: false //true 表示只有https协议才能访问cookie
...
}
}))
//设置session
req.session.username = "张三"
//获取session req.session.username
if(req.session.username) {
res.send(req.session.username+"-已登录")
}else{
res.send('没有登录')
}
//销毁session
req.session.destroy({})
//重新设置cookie的过期时间
req.session.cookie.maxAge=0
负载均衡配置Session, 把Session保存在数据库里面
npm i connect-mongo --save
const session = require('express-session')
const MongoStore = require('connect-mongo')(session)
app.use(session({
secret: 'keyboard cat', ///服务端生成session的签名
resave: false, //默认设置 强制保存 session 即使它并没有变化
saveUninitialized: true, //默认设置 强制将未初始化的 session 存储
name: "itying", //sessin对应cookie的名称
roolling: true,
//在每次请求时,强行设置cookie,这将重置 cookie 过期时间(默认: false)
cookie: {
maxAge:1000*60,
secure: false //true 表示只有https协议才能访问cookie
} ,
//=======重点看这里!!!-=================
store: MongoStore.create({
url:'mongodb:127.0.0.1:27017/menu',
touchAfter: 24 * 3600, //不管发出多少请求, 在24小时内只更新一次session, 除非你改变了 session
})
}))
扫一扫
378
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
