Flutter模板引擎插件angel3_jael的使用

Angel 3框架提供了对Jael 3模板引擎的支持，通过angel3_jael插件可以方便地在你的Flutter应用中集成Jael模板引擎。以下是如何安装和使用这个插件的详细说明和示例代码。

安装

在你的pubspec.yaml文件中添加angel3_jael依赖：

dependencies:
  angel3_jael: ^8.0.0

使用

配置Angel以使用Jael模板引擎非常简单，只需要调用app.configure方法即可：

import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_jael/angel3_jael.dart';
import 'package:file/file.dart';

AngelConfigurer myPlugin(FileSystem fileSystem) {
    return (Angel app) async {
        // Connect Jael to your server...
        await app.configure(
        jael(fileSystem.directory('views')),
      );
    };
}

配置选项

package:angel3_jael默认支持缓存视图和压缩HTML输出以提高性能。在开发环境中，你可能希望禁用这些功能：

jael(viewsDirectory, cacheViews: false, minified: false);

请注意，该包使用的是package:file而不是dart:io。

基本示例

以下是一个基本的服务器设置示例，它可以渲染存储在名为views目录中的Jael模板：

import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_jael/angel3_jael.dart';
import 'package:file/local.dart';
import 'package:logging/logger.dart';

void main() async {
  var app = Angel();
  var fileSystem = const LocalFileSystem();

  await app.configure(
    jael(fileSystem.directory('views')),
  );

  // 渲染views/index.jael的内容
  app.get('/', (req, res) => res.render('index', {'title': 'ESKETTIT'}));

  app.use(() => throw AngelHttpException.notFound());

  app.logger = Logger('angel')
    ..onRecord.listen((rec) {
      print(rec);
      if (rec.error != null) print(rec.error);
      if (rec.stackTrace != null) print(rec.stackTrace);
    });

  var server = await app.startServer(null, 3000);
  print('Listening at http://${server.address.address}:${server.port}');
}

性能优化

对于处理大量初始请求的情况，考虑使用jaelTemplatePreload来预加载所有JAEL模板到外部缓存：

var templateDir = fileSystem.directory('views');

// 预加载JAEL视图模板到缓存
var viewCache = <String, Document>{};
jaelTemplatePreload(templateDir, viewCache);

// 将缓存注入到JAEL渲染器
await app.configure(
  jael(fileSystem.directory('views'), cache: viewCache),
);

示例代码

以下是完整的示例代码，展示如何使用angel3_jael插件创建一个简单的Web服务器：

import 'dart:convert';
import 'package:angel3_framework/angel3_framework.dart';
import 'package:angel3_framework/http.dart';
import 'package:angel3_jael/angel3_jael.dart';
import 'package:file/local.dart';
import 'package:logging/logger.dart';

main() async {
  var app = Angel();
  var http = AngelHttp(app);
  var fileSystem = const LocalFileSystem();

  await app.configure(
    jael(fileSystem.directory('views')),
  );

  app.get(
      '/',
      (req, res) =>
          res.render('index', {'title': 'Sample App', 'message': null}));

  app.post('/', (req, res) async {
    var body = await req.parseBody().then((_) => req.bodyAsMap);
    print('Body: $body');
    var msg = body['message'] ?? '<unknown>';
    return await res.render('index', {
      'title': 'Form Submission',
      'message': msg,
      'json_message': json.encode(msg),
    });
  });

  app.fallback((req, res) => throw AngelHttpException.notFound());

  app.logger = Logger('angel')
    ..onRecord.listen((rec) {
      print(rec);
      if (rec.error != null) print(rec.error);
      if (rec.stackTrace != null) print(rec.stackTrace);
    });

  var server = await http.startServer('127.0.0.1', 3000);
  print('Listening at http://${server.address.address}:${server.port}');
}

通过以上步骤和示例代码，你可以轻松在Flutter项目中集成并使用angel3_jael插件来管理模板渲染。