npm install express --save
下面嵌入本质上是你可以创建的最简单的 Express 应用。 它是一个单文件应用 —如果你使用 Express 生成器,你会得到什么,它为具有大量 JavaScript 文件、Jade 模板和用于各种目的的子目录的完整应用创建脚手架。
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening on port ${port}`)
})
Hello World!
:app.get('/', (req, res) => {
res.send('Hello World!')
})
/
)上的 POST 请求,应用的主页: app.post('/', (req, res) => {
res.send('Got a POST request')
})
/user
路由的 PUT 请求:app.put('/user', (req, res) => {
res.send('Got a PUT request at /user')
})
// http://localhost:5000/index?username=jack&pwd=123
console.log(req.protocol); // 协议
console.log(req.baseUrl); // 基础路径
console.log(req.headers); // 头信息
console.log(req.hostname); // 主机名
console.log(req.httpVersion); // 协议版本
console.log(req.ip); // ip
console.log(req.method); // 请求方式
console.log(req.params); // 参数
console.log(req.path); // 路径信息 /index
console.log(req.query); // 参数 { username: 'jack', pwd: '123' }
console.log(req.url); // url /index?username=jack&pwd=123
是对原生响应对象的一个二次包装
常用的方法:
send() 等价于write和end的复合体 默认为添加头信息(根据发送内容的不同,自动添加对应的头信息)
header() 添加头信息
download() 下载
json({}) 发送json格式文件
jsonp() jsonp格式接口
sendFile() 发送文件
sendStatus 状态码
如何判断是否跨域:
Access to XMLHttpRequest at 'http://localhost:5000/' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
当出现以上代码时,就是跨域。
浏览器安全策略: 同源策略 客户端和服务器端同源才可以互相访问
服务器URL: http://22.144.89.90:5000/userinfo/login?username=jack&pwd=3423#main
客户端: file:///E:/%E9%83%91%E5%B7%9E20230816/day11/code/client/index.html
同源即:协议、域名、端口完全一致
解决跨域:
1.服务器允许
2.jsonp 利用script标签src属性
3.服务器代理 (Node服务器代理、Ngnix反向代理....)
例:
const app = require('express')();
const request = require("request");
// 1.服务器允许
app.get("/", (req, res) => {
res.header("Access-Control-Allow-Origin", "*");//允许所有源访问
res.send({
code: 200,
msg: "成功",
data: [10, 200, 300, 1000]
});
});
// 2.jsonp 利用script标签src属性
app.get("/index", (req, res) => {
res.jsonp({
code: 200,
msg: "jsonp成功"
});
});
// 3.服务器代理 (Node服务器代理、Ngnix反向代理....)
app.get("/news", (req, res) => {
// 目标服务器的地址
// 获取请求响应的参数
let { url, key } = req.query;
// 请求头 application/x-www-form-urlencoded
let cType = req.headers['content-type'];
// 服务器允许
res.header("Access-Control-Allow-Origin", "*"); // 允许所有源访问
// 向聚合服务器发送请求
const options = {
url,
method: "GET", // GET|POST
headers: {
"Content-Type": cType
},
// GET 传递此参数
qs: {
key: key, // 在个人中心->我的数据,接口名称上方查看
}
};
request(options, function (error, response, body) {
if (!error && response.statusCode == 200) {
res.send(body); // 请求成功,输出响应内容
// 具体返回示例值,参考返回参数说明、json返回示例
} else {
console.log("请求异常");
}
});
});
app.listen(5000, () => {
console.log('启动服务器....');
});
中间件:middleware
中间件是Express的两大核心之一 (路由、中间件)
中间件就是一个中间流程。目的是为了处理公共的逻辑、业务
注意 : 1.一定要在路由前注册中间件
2.next()函数不要忘
3.next()函数之后不要再去书写代码
4.连续调用多个中间件时,共享req.res
1.按照功能分类:
1)自定义中间件
2).内置中间件
express.static() 静态资源中间件
express.json() 解析post方式提交的json格式的数据:application / json
express.urlencoded() 解析post方式提交的urlencoded格式的数据: x - www - form - urlencoded格式数据
3)第三方中间件
2.按照级别分类:
1) app级别的中间件
2)router级别的中间件
中间件就是函数(中间件函数)
function(request, response, next) {
next( );是一个函数
}
1)自定义中间件
// 调用postData函数,会得到一个函数
let postData = function () {
return function (req, res, next) {
let arr = [];
req.on('data', chunk => {
arr.push(chunk);
});
req.on("end", () => {
req.body = Buffer.concat(arr).toString();
next();
});
};
};
// 自定义中间件 ---->取出post参数
app.use(postData());
内置中间件
let express = require("express");
let app = express();
app.use(express.static(path.join(__dirname, "public"))); // 指定public目录为静态资源目录
// urlencoded中间件 是用来 接收 post请求的请求头 设置为 content-type:application/x-www-form-urlencoded 提交过来的数据 是 查询字符串
// 中间件中 传入的实参对象 就是用来 选择 使用什么工具 来格式化查询字符串的 如果值为true 表示使用express 自带的 qs工具 进行格式化(不推荐) 如果值为false 表示使用node的querystring来格式化(推荐)
app.use(express.urlencoded({extended:false}));
// json中间件 是用来 接收 post请求头 设置为 content-type:application/json
// 提交过来的数据 是 json格式的对象 可以直接使用 不需要格式化 所以不传参
app.use(express.json())
// 再之后 我们就可以直接获取到 post提交的数据了 通过 req形参的body属性来获取
app.post("/index",(req,res)=>{
console.log(req.body);
})
app.listen(3000)
使用第三方中间件向 Express 应用添加功能。
安装所需功能的 Node.js 模块,然后在应用级别或路由级别将其加载到你的应用中。
svg-captcha 验证码
let svgCaptcha = require('svg-captcha');
let captcha = svgCaptcha.create({
API
size: 4 // 验证码字符个数
ignoreChars: '0o1i' // 忽略字符
noise: 1 // 干扰线
color: true // 字符是否有颜色
background: '#cc9966' // 背景颜色
});
console.log(captcha.text); // 文本验证码(数字)
res.send(captcha.data); // 将svg格式的图片响应给前端
serve-favicon 小图标
app.use(serveFav(path.join(__dirname, "assets", "favicon.ico")));
cors 解决跨域所有问题
const cors = require('cors');
app.use(cors());
formidable 文件上传
const formidable = require('formidable');
//文件上传
app.post("/upload", (req, res) => {
const fd = formidable({
// 配置项
uploadDir: path.join(__dirname, "temp"), // 存到哪个文件夹内
filename: "img", // 文件夹名称
// encoding:""// 编码
// uploadDir:"",//上传文件保存目录
//filename:""
})
//解析文件----接收文件
fd.parse(req, function (err, fields, files) {
// 上传失败就不往下走了
if (err) {
res.send("上传失败");
return;
};
// fields 字段 { usernmae: '李四' }
// files 文件信息
// 上传成功处理
// 1.取原文件的后缀名 xx.jpg---> .jpg
let extName = path.extname(files.myfile.originalFilename);
// 2.生成一个新的文件
let oldPath = files.myfile.filepath; // 旧路径
let newPath = oldPath + extName;
// 把组合成的新文件写入要存的文件夹
fs.renameSync(oldPath, newPath);
res.send("上传成功");
})
});
express中的Router作用就是为了方便我们更好的根据路由去分模块。避免将所有路由都写在入口文件中。可以根据网站需要去划分很多的路由模块,然后使用express.router()导出,导入到入口函数页面。更方便简洁的管理每一个模块,不会与其他路由模块所冲突。
const app = require('express')();
// 导入每个页面
const cateRouter = require("./category"); // 导入cate路由模块
// 输入指定模块名称才能进入指定模块
app.use('/cate', cateRouter) // 分类
app.get('/', (req, res) => {
res.send("index")
})
app.listen(8080, () => {
console.log('running.........');
});
// /cate/
const cate = require("express").Router();
cate.get('/', (req, res) => {
res.send('欢迎来到cate模块');
});
cate.get("/firstcate", (req, res) => {
res.send("一级分类");
});
cate.get("/catesec", (req, res) => {
res.send("二级分类");
});
cate.get("/catethird", (req, res) => {
res.send("三级分类");
});
// 导出
module.exports = cate;
Cookie 使用res 是客户端(浏览器)存储数据的一种机制,键值对结构,可以存储身份信息,
也是可以存储关键的信息,都是程序员自定义,
const cookieParser=require("cookie-parser");
// 使用普通cookie-parser
app.use(cookieParser());
// 使用秘钥cookie-parser
app.use(cookieParser("shanghai"));
// 验证码
router.get('/code', (req, res) => {
let captcha = svgCaptcha.create();
console.log(captcha.text);
// 使用普通cookie保存信息
res.cookie("xx", '9.9');
res.cookie("jdb", '3.9');
// 使用加密cookie保存信息
res.cookie("xx",'9.9',{
signed:true
});
res.cookie("jdb",'3.9',{
signed:true
});
res.type("svg");
res.send(captcha.data);
});
router.get('/login', (req, res) => {
// 取出普通cookie
console.log(req.cookies);
// 取出加密的cookie
console.log(req.signedCookies);
res.send('ok');
});
Session 使用req Session是服务器存储数据的一种机制,键值对结构的,
主要用来存储身份相关的信息。
const session = require("express-session");
// 配置session
app.use(session({
resave: false, // 若session没有被修改,是否强制重新存储
saveUninitialized: true, // 未初始化,是否存储
secret: "xiaoxuesheng", // 加密秘钥
}));
// 将验证码保存在session中
req.session.xx = captcha.text; //会将对应session-id以cookie的形式发送给客户端
ejs是Express的一种模板引擎,还有很多模板引擎,例如:Jade、Pug等,原理都大差不差,只需要掌握一种即可。
// 指定页面路径 pages目录是页面目录
app.set('views', path.join(__dirname, 'pages'));
// 指定模板引擎
app.set("view engine", "ejs");//设置ejs为默认的模板引擎
// index 页面
app.get('/index', (req, res) => {
// 渲染页面
// 第一个参数:渲染的页面的名称(不需要后缀)
res.render("index");
});
ejs模板引擎的语法:
1)声明 <% %>
2)输出语法 <%= %>
3)分支语法
<% if(){ %>
<% } %>
4)循环语句
<% for(){%>
<% } %>
1.首先进行全局安装
npm install express-generator -g
2.然后安装express
express --view=模板引擎 项目名
3.项目目录分析
bin
--bin/www 入口文件
public 静态资源文件
---javascript js文件
---stylesheet css文件
---images img文件
routes 路由文件目录
---index.js index路由模块
---users.js users路由模块
views 模板页面目录
---index.ejs index模板页面
...
app.js 逻辑文件(入口文件)
package.lock.json 记录了包依赖信息
package.json 包描述文件
以上就是对Express的一些认识和了解,Express是Nodejs的顶级框架,在市面上是很流行的主流技术,熟悉掌握node也能很轻松的找到一份工作,希望同学们能够认真学习,多实践,多敲代码,才能更快的熟记于心。