【利用AI让知识体系化】入门Express框架(一)https://developer.aliyun.com/article/1426061
2. 路由模块化
当我们的应用程序变得比较大时,所有的路由定义可能会变得混乱和不易维护。因此,我们可以使用路由模块化来改善这种情况。
首先,在routes目录下创建一个专门用于存放路由的文件,例如users.js。接着,我们在users.js文件中定义路由,如下所示:
const express = require('express'); const router = express.Router(); router.get('/', function(req, res) { res.send('Get all users'); }); router.post('/', function(req, res) { res.send('Create a user'); }); module.exports = router;
在上面的例子中,我们定义了两个路由,一个是GET方法的路由"/“,另一个是POST方法的路由”/",最后使用module.exports导出路由模块。
接着,在应用程序中,我们可以使用app.use()来向Express应用程序注册该路由模块,如下所示:
const usersRouter = require('./routes/users'); app.use('/users', usersRouter);
在上面的例子中,我们首先使用require()函数导入路由模块,然后在应用程序中使用app.use()方法来注册路由模块。注意,在注册路由模块时,第一个参数"/users"代表的是路由模块的根路径。
这样,我们就成功地将路由定义模块化,并将其注册到应用程序中。
3. 异步路由
在Express应用程序中,我们还可以使用异步函数来实现异步路由。例如,下面的示例演示如何使用async/await来实现异步路由:
app.get('/async', async function(req, res) { const result = await someAsyncFunction(); res.send('Async result: ' + result); });
在上面的例子中,我们使用async
来修饰路由处理函数,然后使用await
关键字调用异步函数。当异步函数执行完毕后,我们将其返回值与字符串拼接后发送给客户端。
总的来说,路由在Express
应用程序中是非常灵活和强大的,可以帮助我们定义应用程序的功能,提高代码的可读性和可维护性。
控制器的使用
在 Express 框架中,控制器通常指的是处理特定请求的函数,它们通常被称为路由处理程序 (route handlers)。控制器是为了提高应用程序的可维护性和可读性,将具体的业务逻辑和路由操作分离开来,从而使得每个路由处理程序只需要关注其自身的业务逻辑,而不用承担额外的业务职责。通常,使用控制器可以使得代码更具有可重用性,以及更容易进行调试和测试。
下面是在 Express 中创建一个控制器的一般步骤:
1. 创建路由。在你的 Express 应用程序中创建一个路由,用于处理 HTTP 请求。
const express = require('express'); const router = express.Router();
2. 编写控制器函数。编写具体的业务逻辑,并将其封装在一个函数中。
const myController = (req, res) => { // 处理业务逻辑 res.send('Hello World!'); }
3. 将控制器函数绑定到路由。将你编写的控制器函数挂载到刚刚创建的路由中。
router.get('/myRoute', myController);
4. 在应用程序中使用该路由。将你创建的路由挂载到你的 Express 应用程序中。
const app = express(); app.use('/api', router);
这样,当你的应用程序接收到 GET /api/myRoute
的请求时,会自动调用 myController
函数来处理这个请求,并返回 'Hello World!'
给客户端。
请注意,这只是一个简单的示例。在实际使用中,你可能需要更多的控制器函数,并在应用程序中使用多个路由。此外,你可以在控制器函数中使用模型和数据库等数据操作,以执行更复杂的操作。
第四章:模板引擎
EJS模板引擎
EJS 是一种基于 JavaScript 的模板引擎,它允许你使用 JavaScript 代码在 HTML 中嵌入动态内容。
下面是在 Express 中使用 EJS 模板引擎的一般步骤:
1. 安装 EJS。从 npm 上安装 EJS 模板引擎。
npm install ejs
2. 配置 Express 应用程序。在你的 Express 应用程序中设置 EJS 作为视图引擎。
const express = require('express'); const app = express(); // 设置 EJS 视图引擎 app.set('view engine', 'ejs');
3. 创建一个 EJS 视图。在你的应用程序中创建一个 EJS 视图,用 EJS 语法编写你的 HTML 模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title><%= pageTitle %> - My App</title> </head> <body> <h1>Welcome to <%= appName %>!</h1> </body> </html>
4. 在路由控制器中使用 EJS 模板。在路由控制器中调用 res.render()
函数来使用 EJS 视图,并将需要动态替换的数据传递给视图。
app.get('/', (req, res) => { res.render('index', { pageTitle: 'Home', appName: 'My App' }); });
在这个例子中,EJS 变量 <%= pageTitle %>
和 <%= appName %>
将会被动态替换为 'Home'
和 'My App'
。最终客户端将会看到一条欢迎语句和一个页面标题。
这只是一个简单的例子。使用 EJS 模板引擎,你可以轻松地创建更复杂的视图和交互元素,例如表格、表单、按钮等等。
Pug模板引擎
Pug(以前称为Jade)是一种基于缩进的模板引擎,它使用一种简洁的、类似于 Python 的语法来描述 HTML 的结构和内容。
下面是在 Express 中使用 Pug 模板引擎的一般步骤:
1. 安装 Pug。从 npm 上安装 Pug 模板引擎。
npm install pug
2. 配置 Express 应用程序。在你的 Express 应用程序中设置 Pug 作为视图引擎。
const express = require('express'); const app = express(); // 设置 Pug 视图引擎 app.set('view engine', 'pug');
3. 创建一个 Pug 视图。在你的应用程序中创建一个 Pug 视图,用 Pug 语法编写你的 HTML 模板。
<!DOCTYPE html> html head meta(charset='UTF-8') title=pageTitle + ' - My App' body h1 Welcome to #{appName}!
4. 在路由控制器中使用 Pug 模板。在路由控制器中调用 res.render()
函数来使用 Pug 视图,并将需要动态替换的数据传递给视图。
app.get('/', (req, res) => { res.render('index', { pageTitle: 'Home', appName: 'My App' }); });
在这个例子中,Pug 变量 #{appName}
将会被动态替换为 'My App'
。最终客户端将会看到一条欢迎语句和一个页面标题。
使用 Pug 模板引擎,你可以轻松地创建更复杂的视图和交互元素,例如表格、表单、按钮等等。
Mustache模板引擎
Mustache
是一种简单、轻量的模板引擎,可以应用于多种编程语言
中。
它提供了一个非常简单的模板语言,用于将数据渲染为 HTML、XML 或纯文本
。
在 Express 中使用 Mustache 模板引擎的一般步骤为:
1. 安装 Mustache。从 npm 上安装 Mustache 模板引擎。
npm install mustache
2. 配置 Express 应用程序。在你的 Express 应用程序中设置 Mustache 作为视图引擎。
const express = require('express'); const app = express(); // 设置 Mustache 视图引擎 app.engine('mustache', require('mustache-express')()); app.set('view engine', 'mustache'); app.set('views', __dirname + '/views');
3. 创建一个 Mustache 视图。在你的应用程序中创建一个 Mustache 视图,用 Mustache 语法编写你的 HTML 模板。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>{{pageTitle}} - My App</title> </head> <body> <h1>Welcome to {{appName}}!</h1> </body> </html>
4. 在路由控制器中使用 Mustache 模板。在路由控制器中调用 res.render()
函数来使用 Mustache 视图,并将需要动态替换的数据传递给视图。
app.get('/', (req, res) => { res.render('index', { pageTitle: 'Home', appName: 'My App' }); });
在这个例子中,Mustache 变量 {{appName}}
将会被动态替换为 'My App'
。最终客户端将会看到一条欢迎语句和一个页面标题。
使用 Mustache 模板引擎,你可以轻松地创建更复杂的视图和交互元素,例如表格、表单、按钮等等。
第五章:文件上传和下载
文件上传的原理和实现
文件上传通常涉及到两个部分:客户端和服务端。
在Web应用中,我们通常使用HTTP协议进行文件传输。
客户端:用户在页面上选择要上传的文件后,浏览器会将该文件通过HTTP协议传输到服务端。通常情况下,我们会使用HTML表单来生成上传控件,然后通过JavaScript监听表单提交事件,在提交前获取文件数据并使用FormData对象创建一个上传请求,再通过XMLHttpRequest
或fetch API
将请求发送到服务端。
服务端:服务器接收到文件上传的请求后,通常会使用服务器端编程语言(如Node.js中的express框架)来处理请求,并将文件保存到服务器的指定目录中。在express框架中,可以使用multer中间件来处理文件上传的请求。multer支持多种上传方式,如多文件上传、限制文件大小等,并且提供了一些有用的API,如req.file和req.files,用于获取上传的文件数据。
下面是一个使用express和multer实现文件上传的示例代码:
// 引入multer库 const multer = require('multer'); // 创建multer实例,指定上传目录和上传方式 const upload = multer({ dest: 'uploads/' }); // 处理POST请求 app.post('/upload', upload.single('file'), (req, res) => { // req.file是上传的文件对象 console.log(req.file); res.status(200).send('上传成功'); });
在上面的代码中,我们首先引入了multer库,然后使用multer.create()
方法创建一个multer
实例,传入一个对象作为参数,其中dest
属性指定了上传文件的保存目录。
然后,在处理POST请求的回调函数中,使用upload.single()
方法指定了文件的上传方式,这里使用的是单文件上传。最后,我们通过req.file
获取上传的文件对象,将其保存到指定的目录中,并返回上传成功的消息。
【利用AI让知识体系化】入门Express框架(三)https://developer.aliyun.com/article/1426063