Knoten-Middleware-Express-Framework

Front-End-Express-Installation

• Methode 1: Verwenden Sie das von Express bereitgestellte Gerüst, um das Gerüst einer Anwendung direkt zu erstellen

1. Installieren Sie Scaffolding npm install -g Express-Generator
2. Projekt Express Express-Demo erstellen
3. Installieren Sie die Abhängigkeiten von npm install
4. Starten Sie den Projektknoten bin/www

• Methode 2: Erstellen Sie Ihre eigene Express-Anwendungsstruktur von Grund auf;

1. Initialisieren Sie das Projekt npm init
2. Installieren Sie Express NPM i Express

1. Grundlegende Verwendung

1. Importieren–>Erstellen–>Anhören
2. Verwenden Sie Referenzdokumentation

const express = require('express');
//  * 创建express服务器
const app=express()
//  * 启动服务器 ，监听端口

app.listen(8000,()=>{
    
    
	console.log('启动express 服务器')
})

// 请求
app.post('/login',(req,res)=>{
    
    
     res.end('登录成功')
})

app.get('/home',(req,res)=>{
    
    
    res.end('home 列表模块')
})

2. Middleware

• Das Wesentliche der Middleware ist eine an express übergebene Rückruffunktion.
• Diese Rückruffunktion akzeptiert drei Parameter:
  • Anforderungsobjekt (Anforderungsobjekt);
  • Antwortobjekt (Antwortobjekt);
  • nächste Funktion (eine in Express definierte Funktion zum Ausführen der nächsten Middleware);
    重要: Der Ausführungsprozess der Middleware führt nur die erste passende Middleware aus. Bitte prüfen Sie, ob sie später ausgeführt wird.next

app.post('/login', (req, res, next) => {
    
    
    // 中间件中的req与res可以进行修改
    res.aaa = '添加aaa并修改res'
    // 2. JSON结束
    // res.json({message:'登录成功',code:200})
    // res.end('登录成功')
    // 3. next 匹配执行下一个中间件
    next()
})

• 注意点: Wenn die aktuelle Middleware-Funktion den Anfrage-Antwort-Zyklus nicht beendet, muss next() aufgerufen werden. Dadurch wird die Steuerung an die nächste Middleware-Funktion übergeben, andernfalls wird die Anfrage angehalten.
  

const express = require('express');
//  * 创建express服务器
const app = express()
//  * 启动服务器 ，监听端口

app.listen(8000, () => {
    
    
    console.log('启动express 服务器')
})

// 请求
app.post('/login', (req, res, next) => {
    
    
    // 中间件中的req与res可以进行修改
    res.aaa = '添加aaa并修改res'
    // 2. JSON结束
    // res.json({message:'登录成功',code:200})
    // res.end('登录成功')
    // 3. next 匹配执行下一个中间件
    next()
})

app.use((req,res,next)=>{
    
    
    console.log('执行下一个中间件next');
})

app.get('/home', (req, res) => {
    
    
    res.end('home 列表模块')
})

2.1 Middleware-Anwendung

• Express bietet hauptsächlich zwei Methoden:
  • app/router.use；
  • app/router.methods；

app.use

app.use((req,res,next)=>{
    
    
    console.log('执行下一个中间件next');
})

app.methods

app.get('/home', (req, res) => {
    
    
    res.end('home 列表模块')
})

3. So registrieren Sie Middleware

3.1 Registrierung allgemeiner Middleware

• use注册Die Middleware kann unabhängig vom Pfad oder der Anforderung abgeglichen werden.
• Gleichzeitig next()wird während des Matching-Prozesses nur die erste Middleware ausgeführt.

// 1. use注册的中间件不管什么路径或者请求都可以匹配的上
// 2. 同时在匹配的过程中如何不 next(), 只会执行第一个中间件
app.use((req,res,next)=>{
    
    
    console.log('执行下一个中间件next');
    next()
})

app.use(()=>{
    
    
    console.log('执行第二个中间件')
})

3.2 Pfadanpassungs-Middleware

-Die Path-Matching-Middleware begrenzt nur den Pfad und zeigt die Anforderungsmethode nicht an.

// 这里的路径匹配中间件只是对路径做限制并没有请求方式做显示
// 不管method如何都可以匹配 
app.use('/home',(req,res,next)=>{
    
    
	console.log('路径匹配中间件')
})

3.3 Methoden- und Pfadanpassung

• Grammatik:app.method(path,middleware)
• Passende Middleware stimmt nur mit der ersten Middleware überein, die die Anforderungen erfüllt. Ob die nächste Middleware ausgeführt wird, hängt davon ab, ob next aufgerufen wird.

// app.method(path,middleware)
app.get('/home',(req,res,next)=>{
    
    
	console.log('路径以及方法匹配');
	res.end('匹配成功')
})

// 注册多个中间件
app.get('/home', (req, res, next) => {
    
    
	console.log('路径以及方法匹配');
	res.end('匹配成功')
	// 中间的匹配只会匹配第一个符合要求的中间件 ， 关于下一个中间件是否执行看有没有调用next
}, (req, res, next)=>{
    
    
   console.log('关于这个中间件的执行需要看上一个中间件是否有next');
})

3.4 Fall-Middleware-Matching- und Ausführungsmethode

• Gewöhnliches direktes Schreiben

app.post('/login', (req, res, next) => {
    
    
	req.on('data', data => {
    
    
		let userInfo = data.toString()
		const user = JSON.parse(userInfo)
		if (user.username === 'admin' && user.password===123456) {
    
    
			res.end('登录成功')
		}else{
    
    
			res.end('账号或者密码错误')
		}
	})

})

//  注册信息
app.post('/register', (req, res, next) => {
    
    
	// res.end('注册成功')
	// 注册要查询数据库，看是否存在用户名
   if (true) {
    
    
		 req.on('data', data => {
    
    
			 let userInfo = data.toString()
			 const user = JSON.parse(userInfo)
			 if (user.username === 'admin' && user.password === 123456) {
    
    
				 res.end('注册成功')
			 } else {
    
    
				 res.end('账号或者密码错误')
			 }
		 })
	 }

})

• **Optimierung JSON解析，放到body后next()**

// 1. JSON解析，放到body
app.use((req, res, next) => {
    
    
	if (req.headers['content-type'] === 'application/json') {
    
    
		req.on('data', data => {
    
    
			const jsonInfo = JSON.parse(data.toString())
			req.body = jsonInfo
		})
		req.on('end', () => {
    
    
			next()
		})
	}
})

// 账号密码
app.post('/login', (req, res, next) => {
    
    
  console.log(req.body);
	res.end('登录成功')
})
//  注册信息
app.post('/register', (req, res, next) => {
    
    
	console.log(req.body);
})

4. Analyse der Middleware-Anforderungsdaten

• expressEs gibt einige integrierte Middleware, die uns beim Vervollständigen der Anforderungsanalyse hilft.

4.1 Analysieren Sie die Anforderungskörper-Middleware

app.use((req, res, next) => {
    
    
	if (req.headers['content-type'] === 'application/json') {
    
    
		req.on('data', data => {
    
    
			const jsonInfo = JSON.parse(data.toString())
			req.body = jsonInfo
		})
		req.on('end', () => {
    
    
			next()
		})
	}
	next()
})
// 账号密码
app.post('/login', (req, res, next) => {
    
    
  console.log(req.body);
	res.end('登录成功')
})

• im obigen Code verwendet JSON.parse对data数据进行解析, aberexpress中提供了 json可以直接进行解析

app.use(express.json())
// 账号密码
app.post('/login', (req, res, next) => {
    
    
  console.log(req.body);
	res.end('登录成功')
})

4.2 URL-codierte Analyse

• Beim Parsen verwendet der Client urlencodedübergebene Parameter, die Sie dann verwenden müssenexpress.urlencoded()
  

app.use(express.urlencoded())  // 解析客户端利用urlencoded传参
// 解决 body - parser deprecated undefined extended: provide extended option 05urlencoded警告
app.use(express.urlencoded({
    
     extended: true }))
app.post('/login', (req, res, next) => {
    
    
	console.log(req.body);
	res.end('登录成功')
})

5. Middleware von Drittanbietern

5.1 Morgan-Protokollierung

const express = require('express');
const morgan = require('morgan');
const fs = require('fs');
const app = express()
// cnpm i morgan  安装
// 第三方中间件 合并日志
const writerLog=fs.createWriteStream('./log.txt')
// 日志写入
app.use(morgan('combined', {
    
     stream: writerLog }))
app.post('/login', (req, res, next) => {
    
    
	console.log(req.body);
	res.end('登录成功')
})

5.2 Multi-Datei-Upload

1. Installierennpm i multer --save
2. MulterBehandeln Sie nur multipart/form-dataFormulardaten jeglicher Art.
3. MulterEs befindet sich in express 的 request 对象里添加一个 body 对象(enthält die Textfeldinformationen des Formulars) und im fileoder filesObjekt (eine einzelne Datei wird durch req.fileAbrufen erhalten, mehrere Dateien werden durch req.filesAbrufen erhalten, die Datei oder das Dateiobjekt enthält die vom Objektformular hochgeladenen Dateiinformationen).
4. 注意点Der Wert von upload.single entspricht dem Wert im Frontend-Namen, gleichzeitig form-datamuss der Wert des Schlüssels gleich bleiben.

const multer = require('multer');
// 对上传的文件名字重起
const upload = multer({
    
    
	storage: multer.diskStorage({
    
    
		//  文件名称， 
		// destination 是用来确定上传的文件应该存储在哪个文件夹中
		// destination 是一个函数，必须创建这个文件夹
		destination(require, file, callback) {
    
    
			callback(null, 'uploads/')
		},
		filename(require, file, callback) {
    
    
			// originalname是文件上传时的名字，可以根据它获取后缀
			callback(null, Date.now() + '_' + file.originalname)
		}
	})
})
app.post('/upload', upload.single("file"), (req, res, next) => {
    
    
	console.log(req.file);  // 文件信息
	res.end('文件上传成功')
})

• Mehrere Dateien hochladen, akzeptiert ein Array
• while at multer实例.array(fielname[,maxCount])- Empfangen eines bis fielname命名的文件数组;maxCount——限制上传的最大数量，这些文件的信息保存在req.files里面

app.post('/upload', upload.array("file"), (req, res, next) => {
    
    
	console.log(req.files);  // 文件信息
	res.end('文件上传成功')
})

Referenzanalyse

• Speicher-Speicher-Engine und Fehlerbehandlung
• Front-End- und Back-End-Upload-Fälle

Analysieren Sie gewöhnliche Daten in Formulardaten

const formData=  multer()
app.post('/login',formData.any(), (req, res, next) => {
    
    
	console.log(req.body);  
	res.end('登录成功')
})

6. Parameteranalyse, Parameter und Abfrage

• Die Abfrage wird hauptsächlich für Paging verwendet

app.post('/list', (req, res, next) => {
    
    
	// http://localhost:8000/list?offset=10&page=20解析
	console.log(req.query);   // { offset: '10', page: '20' }
	res.end('登录成功')
})

• params wird hauptsächlich zum Übergeben von IDs verwendet

app.post('/user/:id', (req, res, next) => {
    
    
	// http://localhost:8000/user/1100
	
	const id = req.params.id
	res.end(`获取用户${
      
      id}`)
})

7. Antwortdaten

• end方式: Ähnlich wie bei der Methode „response.end“ in http ist die Verwendung konsistent
• json方法: Viele Typen können an die JSON-Methode übergeben werden: Objekt, Array, String, Boolescher Wert, Zahl, Null usw., und sie werden in das JSON-Format konvertiert und zurückgegeben.
• status方法: Wird zum Festlegen des Statuscodes verwendet; 注意ist eine Funktion
• Weitere Referenzen zum Antwortinhalt

app.get('/login', (req, res, next) => {
    
    
	// 1. 方法一 end
	// res.end(`响应数据---登录成功`)
	//  2. JSON数据响应
	// res.json({
    
    
	// 	code: 0, message: '欢迎回来', data: [{
    
    
	// 		name: "admin",
	// 		avator:'www.http.ccc.jpg'
	// 	}]
	// })

	//  3. status 方法,设置http状态码
	res.status(201)
	res.json(
		{
    
    
			code: 0, message: '欢迎回来', data: [{
    
    
				name: "admin",
				avator: 'www.http.ccc.jpg'
			}]
		}
	)
})

8. Routenführung

• express.Routerum einen Routenhandler zu erstellen

useRouter.js

const express = require('express');
const userRouter = express.Router()
userRouter.get('/', (req, res, next) => {
    
    
	res.json(
		{
    
    
			code: 0, message: 'success', data: [{
    
    
				name: "admin",
				password:'123456'
			}, {
    
    
					name: "admin",
					password: '123456'
				}]
		}
	)
})
userRouter.get('/:id',(req, res, next) => {
    
    
	const id=req.params.id
	res.end(id)
})
userRouter.post('/', (req, res, next) => {
    
    
})
userRouter.delete('/:id', (req, res, next) => {
    
    
})
userRouter.patch('/:id', (req, res, next) => {
    
    

})

module.exports=userRouter

index.js

const userRouter = require('./router/userRouters.js');
app.use('/users', userRouter)

Referenzartikel : Spezifische Verwendung von Routing in Projekten

9. Statische Ressourcen

1. express 内置static() 静态资源Machen Sie den Ordner direkt zu einer statischen Ressource

app.use(express.static('./uploads')) 

10 Fehlerbehandlung

• Die normale Fehlerbehandlung erfordert die Verwendung von Front-End-Daten für die Beurteilungsverarbeitung.
• Allerdings schreibt jede Schnittstelle eine Beurteilung oder gibt dieselbe Fehlermeldung und denselben Statuscode zurück, was zu Redundanz im Code führt.

app.post('/login', (req, res, next) => {
    
    
	const {
    
     username, password } = req.body
	if (username !== 'admin' || password !== 123456) {
    
    

		res.json({
    
    
			code: 1002,
			message: '账号密码错误'
		})
	} else {
    
    
		console.log('xx')
		res.json({
    
    
			code: 200,
			message: '登录成功'
		})
	}
})

• Einfache Kapselung und einheitliche Verarbeitung

// 中间件处理错误信息
app.post('/login', (req, res, next) => {
    
    
	if (username !== 'admin' || password !== 123456) {
    
    
		next(1002)
	}
	else {
    
    
		next()
	}
})
app.use((errCode, req, res, next) => {
    
    
	const code = errCode
	let message = ''
	switch (code) {
    
    
		case 1001:
			message = '未知的错误'
			break
		case 1002:
			message = '账号或密码错误'
		default:
			message = '登录成功'
	}
	res.json({
    
    
		code: errCode,
		message,
	})
})