node day3

路由中间件
路由中间件创建一个路由对象
路由对象相当于小型的app
有get、post、use方法
将单独路由存在单独文件中，写好其功能请求什么的导出，然后再在默认页面导入读取

routes
  home.js
    const router = require('express').Router()

    router.get()
    router.post()
module.exports = router


// 在app.js中
const homeRouter = require('./router/home')


app.use(homeRouter)

好处：定义 路由脱离了 app 全局应用实例
分层定义 路由 提高了 代码的可维护性

静态资源中间件
允许我们 以当前服务器的绝对路径来访问静态资源（图片，文字图标，css,js等等）
app.use('/static', express.static(path.join(__dirname,'public')))
相当于服务器路由访问本地某个文件夹。路由一定要加“/”！！！

模板引擎
MVC设计模式
m model 模型层 请求数据库的函数
v vieews 视图层（html/css）
c controller 控制器 核心业务代码（路由）
ejs
npm i ejs -S

app.set("views","./views")
    //告诉服务 视图 文件 放在 views目录中
app.set("view engine","ejs")
  // 告诉应用程序 我们  模板引擎使用的是ejs

路由（渲染页面） 不在 使用 res.send 返回内容
res.render('模板名称',{
  携带参数放这里
})

ejs语法

<%=  %>
输出语法 <%=  %> 
内部
  1，里面是js环境
  2，这里面的变量 只能去找  res.render携带过来的数据
  3，输出 这里面 需要 有值  可以写表达式 不能写语句


<%  %>  在这里面可以写任意的js语句 变量还是只认识 render携带过来

<%- %> 渲染富文本

// 引入公共模块，一般是网页头部和尾部公共的
<%- include("head") -%>

multer 文件上传中间件

npm i multer -S
utils
  upload.js

    const multer  = require('multer')
    const storage = multer.diskStorage({
      destination: function (req, file, cb) {
        cb(null, 'uploads/')
        // 指定 上传的目录的 uploads目录,自动创建
      },
      filename: function (req, file, cb) {
      
        let fileArr = file.originalname.split('.')
        let extName = fileArr[fileArr.length-1]
        cb(null, file.fieldname + '-' + Date.now()+'.'+extName)
        // 指定文件上传的 文件名
      }
    })
    
    const upload = multer({ storage: storage })

    module.exports = upload


  // 在需要使用的路由中引入
  const upload = require('../utils/upload')

  router.post('/upload',upload.single('img'), (req,res)=>{

  })

缩略图
上传文件表单控件有个属性files，是一个数组保存了选择的所有文件，
原生js新加了个api ： FileReader
tips：引入iconfont是不要只放iconfont.css，要将iconfont.css中的url所指向的文件全部放进去

var file = document.querySelector('#file');
    var img = document.querySelector('#img')
    file.onchange = function(){
      // 上传文件的控件  选择 了 文件时 触发
      // 获取 选择的文件  （二进制数据）

      console.log(this.files[0]) // 这是一个数组 保存了 选中的所有的文件
      // h5新增一个api 用于读取 二进制数据流 （文件是二进制）
      const fd = new FileReader();
      fd.readAsDataURL(this.files[0]);
      fd.onload = function(){
        // 监听 fd 读取文件的状态 读取完毕时触发 将结果 放到 fd.result
        console.log(this.result)
        img.src = this.result
      }
    }

base64格式不会发出http请求，所以会增加网页性能