Express——结合multer上传图片、EJS

简介: Express——结合multer上传图片、EJS

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"

加密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
    })
}))


相关文章
|
JavaScript
Express+Vue2+Element-ui上传图片操作
Express+Vue2+Element-ui上传图片操作
100 0
|
3月前
|
前端开发
node+express+ multer 实现文件上传入门
node+express+ multer 实现文件上传入门
|
存储 XML 缓存
|
JavaScript vr&ar 开发者
ejs模板引擎使用(独立使用,没有集成 express)|学习笔记
快速学习 ejs 模板引擎使用(独立使用,没有集成 express)
166 0
ejs模板引擎使用(独立使用,没有集成 express)|学习笔记
|
Web App开发 JavaScript 前端开发
Nodejs进阶:基于express+multer的文件上传
图片上传是web开发中经常用到的功能,本文开篇主要讲解如何基于express+multer轻松实现单图、多图上传。接着,讲解如何获取上传图片的信息、对图片保存的目录、文件名等进行个性化定制。后续章节会对图片上传的技术细节进行深入挖掘。欢迎加入Express前端交流群(197339705)。
7777 2
|
NoSQL 前端开发 JavaScript
从零开始搭建Node.js, Express, Ejs, Mongodb服务器
第1部分 – 15分钟安装 如果你真的是从零开始学,那就花点时间先把环境搭建起来吧。这不难,我用的是Win8,所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的。 第1步 – 安装Node.JS 这很容易,进入Node.js官方网站,点击绿色的大Install按钮,它会自动检测你的系统并给你一个正确的安装文件的下载。(如果没有
3306 0
|
JavaScript 前端开发 API
node+express上传图片到七牛
本人微信公众号:前端修炼之路,欢迎关注 最近做项目的时候有一个上传图片的需求,由于没有后端的配合,所以决定自己来搭个服务器,实现上传图片功能。
2556 0
|
JavaScript Linux 前端开发
express与ejs,ejs在Linux上面的路径问题
1、学习使用ejs模板(这个是ejs.js) var express = require('express'); var app = express(); app.set("view engine","ejs"); app.
1048 0