【利用AI让知识体系化】入门Egg框架(含实战)(二)

简介: 【利用AI让知识体系化】入门Egg框架(含实战)

【利用AI让知识体系化】入门Egg框架(含实战)(一)https://developer.aliyun.com/article/1426068


3.2 模板渲染和视图

在 Egg.js 应用中,模板渲染和视图也是实现页面展示和用户交互的重要组成部分。

模板渲染

Egg.js 默认使用模板引擎 nunjucks,支持多种模板文件格式,如 .html.nunjucks.nj 等。

在 Egg.js 中,可以通过 app.view.use('nunjucks', nunjucks) 方法启用 nunjucks 模板引擎,然后使用 this.ctx.render() 方法渲染模板文件。通常,模板文件的根目录是 /app/view,渲染的文件名不需要后缀,例如:

// 启用模板引擎
const nunjucks = require('nunjucks');
module.exports = app => {
  app.view.use('nunjucks', nunjucks.configure('app/view', {
    autoescape: true
  }));
};
// 控制器中渲染模板文件
class HomeController extends Controller {
  async index() {
    const { ctx } = this;
    await ctx.render('index', { data: 'hello world' });
  }
}

在上述代码中,模板文件的根目录是 app/view,渲染的文件名是 index。在控制器中,使用 this.ctx.render() 方法渲染模板文件,并传入需要注入的数据对象。

视图

在 Egg.js 应用中,视图的实现方式和其他框架类似。视图通常是由模板引擎根据模板文件渲染生成,可以通过模板引擎向视图中注入数据来实现动态页面展示和用户交互的效果。

与模板引擎相关的视图文件通常位于 /app/view 目录下,可以根据需要自行组织子目录。在控制器中,通过 this.ctx.render() 方法渲染视图,并通过第二个参数传入要注入的数据对象。

在 Egg.js 应用中,可以使用多种模板引擎,根据需要进行选择和配置。同时,视图的实现方式也可以和其他框架一样,通过 HTML、CSS 和 JavaScript 等前端技术实现视图的效果。

3.3 静态资源和文件上传

在 Egg.js 应用中,静态资源和文件上传也是实现页面展示和用户交互的重要组成部分。

静态资源

在 Egg.js 应用中,可以使用 egg-static 插件提供静态资源服务。在项目中安装 egg-static 插件:

npm i egg-static --save

安装完毕之后,在应用的 config/config.default.js 里面配置静态文件存放路径:

exports.static = {
  prefix: '/public/',
  dir: path.join(appInfo.baseDir, 'app/public'),
};

在上述代码中,prefix 是访问静态资源的 URI 的前缀,dir 是静态资源存放的目录,根据实际需求进行配置。

之后使用以下代码启用中间件,在路由之前处理静态资源的请求:

// config/config.default.js
module.exports = app => {
  app.config.coreMiddleware.unshift('static');
};

文件上传

在 Egg.js 应用中,可以使用 egg-multipart 插件实现文件上传。安装 egg-multipart 插件:

npm i egg-multipart --save

安装完毕之后,在应用的 config/plugin.js 文件中启用插件,并定义插件的配置:

exports.multipart = {
  mode: 'file',
  fileSize: '10mb',
  whitelist: [
    '.jpeg',
    '.jpg',
    '.png',
    '.gif',
    '.bmp',
    '.txt',
    '.doc',
    '.docx',
    '.zip',
    '.rar',
    '.gzip',
  ],
};

在控制器中,可以通过 this.ctx.request.files 获取上传的文件:

async upload() {
  const { ctx } = this;
  const file = ctx.request.files[0];
  const { name, path } = file;
  // 处理上传的文件
  ...
  ctx.body = { name, path };
}

上传的文件会被存储在 Egg.js 应用的临时文件夹中,使用 this.ctx.request.files 获取上传的文件路径,可以对文件进行后续的处理或保存。结果被序列化为一个对象,包含文件的名称、路径和大小等信息。

以上是 Egg.js 中处理静态资源和文件上传的常用方法,可以根据实际需求进行定制和配置

3.4 数据库连接和操作

在 Egg.js 应用中,可以使用 egg-sequelize 插件连接和操作 MySQL、PostgreSQL、SQLite 和 MSSQL 等关系型数据库。

连接数据库

在 Egg.js 应用中,可以在 config/config.default.js 中配置数据库连接信息:

const Sequelize = require('sequelize');
exports.sequelize = {
  dialect: 'mysql',
  host: 'localhost',
  port: 3306,
  database: 'testdb',
  username: 'testuser',
  password: 'testpass',
  define: {
    timestamps: true,
    paranoid: true,
    underscored: true,
    freezeTableName: true,
  },
  timezone: '+08:00',
  dialectOptions: {
    dateStrings: true,
    typeCast: true,
  },
  pool: {
    max: 5,
    min: 0,
    idle: 10000,
  },
};

在以上示例中,定义了连接MySQL测试数据库的相关信息,通过 exports.sequelize 属性导出。其中,

  • dialect 定义了要连接的数据库类型。
  • hostport 定义了数据库的主机名和端口号。
  • database 定义了要连接的数据库名称。
  • usernamepassword 定义了连接数据库的用户名和密码。

操作数据库

一般情况下,我们会在控制器中操作数据库。以下是一个示例,以获取用户列表为例:

class UserController extends Controller {
  async index() {
    const { ctx } = this;
    const users = await ctx.model.User.findAll();
    ctx.body = users;
  }
}

使用 ctx.model.xxx 可以访问模型对象。在数据库查询时,通常会使用 await 关键字,待查询结束后获取返回的结果即可。

除此以外,还有很多其他的操作数据库的方法,可根据需求进行探索和使用。

需要注意的是,不同数据库的连接方式、查询方式等可能会有所不同,具体的实现方式需参考具体数据库的文档,并结合 Egg.js 的使用方式进行实现。

3.5 Cookie 和 Session

在 Egg.js 应用中,Cookie 和 Session 是管理 HTTP 请求和响应的重要组成部分。

Cookie

Cookie 是一种用于存储小量数据的机制。在 Egg.js 应用中,可以通过 this.cookies.set() 方法设置 Cookie,通过 this.cookies.get() 方法获取 Cookie。例如:

// 设置 cookie
this.cookies.set('username', 'testuser');
// 获取 cookie
const username = this.cookies.get('username');

在以上示例中,this.cookies.set() 方法设置了一个名为 username 的 Cookie,值为 testuserthis.cookies.get() 方法获取名为 username 的 Cookie 的值,并将其保存在 username 变量中。

除了设置和获取 Cookie 之外,还可以通过设置 Cookie 的属性修改其有效期、域和路径等信息。例如:

this.cookies.set('username', 'testuser', {
  maxAge: 3600 * 1000, // 1 hour
  httpOnly: true,
});

在以上示例中,maxAge 属性设置 Cookie 的失效时间,单位为毫秒;httpOnly 属性设置 Cookie 是否仅允许服务器访问,防止 XSS 攻击。

Session

Session 是一种在客户端和服务器端之间存储用户数据的机制。在 Egg.js 应用中,可以使用 egg-session 插件实现 session 管理。首先,在应用中安装 egg-session 插件:

npm i egg-session --save

配置及启用 session:

// config/config.default.js
exports.session = {
  key: 'SESSION_ID',
  maxAge: 86400000,
  httpOnly: true,
  encrypt: true,
};
// app.js
app.use(session(app));

在以上示例中,exports.session 配置了 Session 的名称、有效期、是否仅允许服务器访问和是否需要加密传输。在 app.js 文件中启用了 session 中间件。

在路由中使用 Session:

await ctx.session.set('username', 'testuser');
const username = await ctx.session.get('username');

在以上示例中,使用 ctx.session.set() 方法设置 Session 的值,使用 ctx.session.get() 方法获取 Session 的值。

需要注意的是,Session 的数据量较大时、过于频繁的操作 Session 都会对应用性能产生影响,因此在使用时应当权衡利弊,根据实际需求合理配置和使用。


【利用AI让知识体系化】入门Egg框架(含实战)(三)https://developer.aliyun.com/article/1426070

相关文章
|
1天前
|
人工智能 移动开发 小程序
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
uniapp框架——vue3+uniFilePicker+fastapi实现文件上传(搭建ai项目第二步)
12 2
|
1天前
|
人工智能 小程序 前端开发
uniapp框架——初始化vue3项目(搭建ai项目第一步)
uniapp框架——初始化vue3项目(搭建ai项目第一步)
11 1
|
4天前
|
人工智能 决策智能 C++
【AI Agent系列】【阿里AgentScope框架】5. Pipeline模块的组合使用及Pipeline模块总结
【AI Agent系列】【阿里AgentScope框架】5. Pipeline模块的组合使用及Pipeline模块总结
18 1
|
4天前
|
人工智能 搜索推荐 决策智能
【AI Agent系列】【阿里AgentScope框架】1. 深入源码:详细解读AgentScope中的智能体定义以及模型配置的流程
【AI Agent系列】【阿里AgentScope框架】1. 深入源码:详细解读AgentScope中的智能体定义以及模型配置的流程
35 0
|
4天前
|
存储 人工智能 开发框架
【AI Agent系列】【阿里AgentScope框架】0. 快速上手:AgentScope框架简介与你的第一个AgentScope程序
【AI Agent系列】【阿里AgentScope框架】0. 快速上手:AgentScope框架简介与你的第一个AgentScope程序
26 0
|
机器学习/深度学习 人工智能 自然语言处理
搜狗翻宝Pro机再次开挂,智能翻译硬件成中国人工智能的新风口
第五届世界互联网大会正在如火如荼的举行。
搜狗翻宝Pro机再次开挂,智能翻译硬件成中国人工智能的新风口
|
机器学习/深度学习 人工智能 自然语言处理
与世界同行 2017中国人工智能大会有感
与世界同行 2017中国人工智能大会有感
1543 0
与世界同行 2017中国人工智能大会有感
|
人工智能 自动驾驶
2019年上半年收集到的中国人工智能发展详情文章
2019年上半年收集到的中国人工智能发展详情文章
|
人工智能 芯片
中国人工智能计划,我来说几句
中国人工智能计划,我来说几句
|
机器学习/深度学习 人工智能 自然语言处理
2022 年中国人工智能行业发展现状与市场规模分析 市场规模超 3000 亿元
人工智能产业是智能产业发展的核心,是其他智能科技产品发展的基础,近年来,中国人工智能产业在政策与技术双重驱动下呈现高速增长态势。
1566 0
2022 年中国人工智能行业发展现状与市场规模分析 市场规模超 3000 亿元