文件上传
思想
前端表单->后端接收到文件本身->保存到服务器上->给数据库记录文件一些信息->库返回给nodejs相关信息->nodejs返回给前端
前端: <input type=file enctype=“multipart/form-data” name=“fieldname”
上传方法
app.use(objMulter.image()) //允许上传图片类型
app.use(objMulter.any()) //允许上传什么类型的文件，any代表允许任何类型实现
结合Postman软件发送接口，就成功把图片上传
最后就可以把地址返回给客户端
res.send({
err:0,
url:"http://localhost:3000/upload/" + req.files[0].filename +path.parse(req.files[0].originalname).ext
})整体代码如下：
const express = require("express")
const app = express()
const path = require("path") //引入path模块
const fs =require("fs")
app.listen(3000,()=>console.log("正在监听。。。"))
// 静态资源托管
// 如果用户想在浏览器上直接访问图片或者html页面，需要做一个静态服务器
app.use(express.static("./public"))
// 文件上传 前端上传一张图片，后端需要把图片存入upload文件夹里面
// 1.引入multer中间件
const multer = require("multer")
// 2.实例化multer
let objMulter = multer({dest:'./public/upload'});//data：指定保存位置
// 3.安装中间件
// app.use(objMulter.image()) 允许上传图片类型
app.use(objMulter.any()) //允许上传什么类型的文件，any代表允许任何类型
app.post("/api/reg",(req,res)=>{
// console.log(req.files);
// 4.fs.renameSync("改前"，"改后")
let oldFile = req.files[0].path //更改前的名字
let newFile = req.files[0].path+path.parse(req.files[0].originalname).ext //更改后的名字
fs.renameSync(oldFile,newFile)
//5.把磁盘路径转为网络路径入库操作
// 6.可以把地址返回给客户端
res.send({
err:0,
url:"http://localhost:3000/upload/" + req.files[0].filename +path.parse(req.files[0].originalname).ext
})
})fieldname: 表单name名
originalname: 上传的文件名
encoding： 编码方式
mimetype: 文件类型
buffer: 文件本身
size：尺寸
destination: 保存路径
filename： 保存后的文件名 不含后缀
path： 保存磁盘路径+保存后的文件名 不含后缀
multer->文件名会随机->fs模块改名->path系统模块解析磁盘路径后端：multer 接受 form-data编码数据
path系统模块
const path = require("path") //引入path模块更改上传文件名字
app.post("/api/reg",(req,res)=>{
// console.log(req.files);
// 4.fs.renameSync("改前"，"改后")
let oldFile = req.files[0].path //更改前的名字
let newFile = req.files[0].path+path.parse(req.files[0].originalname).ext //更改后的名字
fs.renameSync(oldFile,newFile)
res.end()
})效果：
改前：
改后：
操作系统磁盘路径
编码
windows： c:\\user\\admin\\a.jpg
mac: ~/desktop/1901
UI呈现
windows: c:\user\admin mac: ~/desktop/1901
API
磁盘路径解析 parse
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'，'磁盘路径n')__dirname 魔术变量 返回当前文件所在的磁盘路径
片段合并 resolve
path.resolve('磁盘路径1','磁盘路径n')合并磁盘片段,右到左找根，左到右拼接，没有找到根，以当前文件路径为根
multer中间件
插件安装
npm i express multer -S
multer 接受 form-data编码数据,所有要求前端携带时注意一下，如：<input type=file enctype="multipart/form-data" name="fieldname",
使用
//1 引入
let multer = require('multer');
//2 实例化
let objMulter = multer({ dest: './upload' }); //dest: 指定 保存位置（存到服务器)
//安装中间件，
app.use(objMulter.any()); //允许上传什么类型文件,any 代表任何类型中间件扩展了req请求体 req.files
app.get('/reg',(req,res)=>{
req.files
})后端渲染
通常根据后端返回的json数据，然后来生成html被称为前端渲染，而后端渲染是后端把json与html结合渲染好后返回到浏览器，没前端什么事了
思路
- 用户 - > 地址栏(http[s]请求) -> web服务器（收到) - > nodejs处理请求(返回静态、动态)->请求数据库服务(返回结果)->nodejs(接收)->node渲染页面->浏览器（接收页面，完成最终渲染)
模板引擎
无论前后谁来渲染页面，都会用到模板引擎，前端渲染页面实际上是操作dom，后端渲染页面是把数据和html字符拼接后丢给浏览器
引擎 | 前端 | 后端 |
angularJs | √ | × |
vue/mustach | √ | √ |
react | √ | √ |
angularTs/mustach | √ | √ |
jade/pug | × | √ |
ejs | × | √ |
jquery + art-template | √ | × |
handlerbars | √ | × |
jade
原理：fs抓取前端静态页面 + jade + 数据 -> 返回send(data) -> 浏览器
特点：侵入式，强依赖
使用
let jade = require('jade')
let html = jade.renderFile('jade模板文件'，{数据}，{pretty:true}); //返回字符jade模板文件语法
父子要缩进
属性： 标签(key=value,key2=value)
内容: 标签 内容
使用方法演示如下：
ejs
原理：fs抓取前端静态页面 + ejs + 数据 -> 返回send(data) -> 浏览器
特点：非侵入式，温和，弱依赖
使用
let ejs = require('ejs')
ejs.renderFile('ejs模板文件',{要合并到html数据},回调(err,data))err：错误，null代表没有错误
data: 渲染后的字符|流
ejs模板 ： 后缀名为ejs的html文件
ejs模板文件语法
- ejs 结构就是html
- 输出: <%= 数据名|属性名|变量名 + 表达式 %>
- 语句： <% 语句 %> 需要被<% %> 包裹
- 非转义输出: <%- 数据名|变量名 + 表达式 %>
- 载入公共：<%- include(’./hd.ejs’,{数据}) %>
ejq演示代码如下：
