【利用AI让知识体系化】入门Express框架(二)

简介: 【利用AI让知识体系化】入门Express框架

【利用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对象创建一个上传请求,再通过XMLHttpRequestfetch 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

相关文章
|
2天前
|
人工智能 移动开发 小程序
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
15 2
|
2天前
|
人工智能 小程序 前端开发
uniapp框架——初始化vue3项目(搭建ai项目第一步)
uniapp框架——初始化vue3项目(搭建ai项目第一步)
15 1
|
5天前
|
人工智能 决策智能 C++
【AI Agent系列】【阿里AgentScope框架】5. Pipeline模块的组合使用及Pipeline模块总结
【AI Agent系列】【阿里AgentScope框架】5. Pipeline模块的组合使用及Pipeline模块总结
22 1
|
5天前
|
人工智能 搜索推荐 决策智能
【AI Agent系列】【阿里AgentScope框架】1. 深入源码:详细解读AgentScope中的智能体定义以及模型配置的流程
【AI Agent系列】【阿里AgentScope框架】1. 深入源码:详细解读AgentScope中的智能体定义以及模型配置的流程
38 0
|
5天前
|
存储 人工智能 开发框架
【AI Agent系列】【阿里AgentScope框架】0. 快速上手:AgentScope框架简介与你的第一个AgentScope程序
【AI Agent系列】【阿里AgentScope框架】0. 快速上手:AgentScope框架简介与你的第一个AgentScope程序
64 0
|
机器学习/深度学习 人工智能 算法
做底层 AI 框架和做上层 AI 应用,哪个对自己的学术水平(或综合能力)促进更大?
左手“底层AI框架”,右手“上层AI应用”,如何选择? 对于做AI相关工作的人来说,具体选择做哪个方向,可能是需要深深纠结的一个问题。 知乎上就用户提出了此问题,引起了不小的关注和讨论: 新智元获得了解浚源和微调两位用户的授权,将他们对此问题的深度解析做了整理,与读者共享。
1609 0
|
机器学习/深度学习 人工智能 自然语言处理
搜狗翻宝Pro机再次开挂,智能翻译硬件成中国人工智能的新风口
第五届世界互联网大会正在如火如荼的举行。
搜狗翻宝Pro机再次开挂,智能翻译硬件成中国人工智能的新风口
|
机器学习/深度学习 人工智能 自然语言处理
与世界同行 2017中国人工智能大会有感
与世界同行 2017中国人工智能大会有感
1543 0
与世界同行 2017中国人工智能大会有感
|
人工智能 自动驾驶
2019年上半年收集到的中国人工智能发展详情文章
2019年上半年收集到的中国人工智能发展详情文章
|
人工智能 芯片
中国人工智能计划,我来说几句
中国人工智能计划,我来说几句