【利用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
定义了要连接的数据库类型。host
和port
定义了数据库的主机名和端口号。database
定义了要连接的数据库名称。username
和password
定义了连接数据库的用户名和密码。
操作数据库
一般情况下,我们会在控制器中操作数据库。以下是一个示例,以获取用户列表为例:
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,值为 testuser
;this.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