Express 框架核心特性:
- 可以设置中间件来响应 HTTP 请求。
- 定义了路由表用于执行不同的 HTTP 请求动作。
- 可以通过向模板传递参数来动态渲染 HTML 页面。
express保留了Node原生的功能,添加了一些方法增强原有的功能
安装 Express
-
npm install express --save
几个重要的模块是需要与 express 框架一起安装的
body-parser - node.js 中间件,用于处理 JSON, Raw, Text 和 URL 编码的数据。
cookie-parser - 这就是一个解析Cookie的工具。通过req.cookies可以取到传过来的cookie,并把它们转成对象。
multer - node.js 中间件,用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据
请求和响应
- Express 应用使用回调函数的参数: request 和 response 对象来处理请求和响应的数据。
app.get('/', function (req, res) { // -- })
req.path:获取请求路径
req.query:获取URL的查询参数串
req.route:获取当前匹配的路由
res.append():追加指定HTTP头
res.send():传送HTTP响应
res.cookie(name,value [,option]):设置Cookie
opition: domain / expires / httpOnly / maxAge / path / secure / signed
res.clearCookie():清除Cookie
res.send():传送HTTP响应
路由
-
路由路由决定了由谁(指定脚本)去响应客户端请求通过路由提取出请求的URL以及GET/POST参数。
使用express中的路由访问子页面必须使用use请求
var server=express(); server.listen(8080); server.use('/', require('./route/web.js')()); server.use('/admin/', require('./route/admin.js')());
require()访问route/admin.js文件,返回路由的页面。
const express=require('express'); module.exports=function (){ var router=express.Router(); router.get('/login', (req, res)=>{ res.render('admin/login.ejs', {}); }); router.get('/', (req, res)=>{ res.render('admin/index.ejs', {}); }); router.get('/bannerInserOrUpdate',(req,res)=>{ res.render('admin/bannerInserOrUpdate.ejs') }); return router; };
Get请求
- 表单中通过 GET 方法提交两个参数,我们可以使用 server.js 文件内的
process_get
路由器来处理输入
//index.html <form class="" action="/getinfo" method="get"> 用户: <input type="text" name="user" value=""><br> 密码: <input type="text" name="password" value=""><br> <input type="submit" name="" value="提交"> </form>
// server.js
const express=require("express");
var server= express(); server.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }); server.get('/process_get ',function(req,res){ var response = { user:req.query.user, password:req.query.password }; console.log(response); res.write(JSON.stringify(response)); res.end(); }); server.listen(8080);
Post请求
- 通过 POST 方法提交两个参数,我们可以使用 server.js 文件内的 process_post 路由器来处理输入
<!----index.js---> <form class="" action="/process_post" method="post"> 用户: <input type="text" name="user" value=""><br> 密码: <input type="text" name="password" value=""><br> <input type="submit" name="" value="提交"> </form>
server.js文件
const express=require("express"); const bodyParser=require("body-parser"); // 创建 application/x-www-form-urlencoded 编码解析 var server= express(); server.get('/index.html', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }); var urlencodedParser = bodyParser.urlencoded({ extended: false }) server.post('/process_post',urlencodedParser,function(req,res){ response = { user:req.body.user, password:req.body.password }; res.writeHead(200,{'Content-Type':'text/html;charset=utf-8'});//设置response编码为utf-8 console.log(response); res.write(JSON.stringify(response)); res.end(); }); server.listen(8080);
静态文件
- Express 提供了内置的中间件 express.static 来设置静态文件如:图片, CSS, JavaScript 等。
- 你可以使用 express.static 中间件来设置静态文件路径。例如,如果你将图片, CSS, JavaScript 文件放在 public 目录下
server.use(static('./static/'))
上传文件
html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>文件上传</title> </head> <body> <h3>文件上传:</h3> <form action="/upload" method="post" enctype="multipart/form-data"> <input type="file" name="imageFile" /> <br /> <input type="submit" value="上传文件" /> </form> </body> </html>
server,js页面
var fs = require('fs'); var express = require('express'); var multer = require('multer'); var upload = multer({dest: 'uploads/'}); var app= express(); // 单域单文件上传:input[file]的 multiple != "multiple" app.post('/upload', upload.single('imageFile'), function(req, res, next) { // req.file 是 前端表单name=="imageFile" 的文件信息(不是数组) fs.rename(req.file.path, "upload/" + req.file.originalname, function(err) { if (err) { throw err; } console.log('上传成功!'); }) res.writeHead(200, { "Access-Control-Allow-Origin": "*" }); res.end(JSON.stringify(req.file)+JSON.stringify(req.body)); }) app.get('/index', function (req, res) { res.sendFile( __dirname + "/" + "index.html" ); }); app.listen(8080);