目录
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>