Flutter路由管理插件shelf_routing的使用

Flutter路由管理插件shelf_routing的使用

Shelf Routing 是一个用于Dart Web应用程序的路由管理插件。通过组合请求处理器，Shelf使得构建Web应用变得简单。shelf_routing 包提供了Shelf的请求路由器。该包允许从代码中的注解生成 shelf_router.Router。

为了使用此包，你需要将其作为开发依赖项，并且与 build_runner 包一起使用。同时，你也需要将 shelf 和 shelf_routing 作为依赖项。

dependencies:
  shelf: ^0.7.5
  shelf_router: ^0.7.0+1
dev_dependencies:
  shelf_router_generator: ^0.7.0+1
  build_runner: ^1.3.1

一旦你的代码已经按照下面的示例进行了注解，你可以通过运行 pub run build_runner build 来生成对应的部分。

示例

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart';
import 'package:shelf_router/shelf_router.dart';
import 'package:shelf_routing/shelf_routing.dart';

// 生成的部分，通过 'pub run build_runner build'
import 'example.routers.dart';

// 生成的部分，通过 'pub run build_runner build'
part 'example.g.dart';

class User {
  final int id;
  final String name;

  const User({
    required this.id,
    required this.name,
  });

  factory User.fromJson(Map<String, dynamic> map) => User(id: map['id'], name: map['name']);
  Map<String, dynamic> toJson() => {'id': id, 'name': name};
}

[@Routable](/user/Routable)(prefix: '/users')
class UserController {
  // 使用 'example.g.dart' 中定义的生成函数创建路由器。
  static Router get router => _$userControllerRouter;

  final DatabaseConnection connection;

  UserController(this.connection);

  // 处理 GET /users 请求
  [@Route](/user/Route).get('/')
  Future<List<dynamic>> listUsers(Request request, {String? query}) async {
    return ['user1'];
  }

  // 处理 GET /users/:userId 请求
  [@Route](/user/Route).get('/<userId>')
  Future<Response> fetchUser(Request request, int userId) async {
    if (userId == 1) {
      return Response.ok('user1');
    }
    return Response.notFound('no such user');
  }

  // 处理 POST /users 请求
  [@Route](/user/Route).post('/')
  Future<JsonResponse<User>> createUser(Request request, User user) async {
    if (user.name.isEmpty) {
      return JsonResponse.badRequest(body: 'Missing name field');
    }
    return JsonResponse.ok(user);
  }
}

// 使用 'example.g.dart' 中定义的生成函数创建路由器。
[@GenerateRouterFor](/user/GenerateRouterFor)([UserController])
Router get apiRouter => _$apiRouter;

void main() async {
  // 在创建服务实例之前可以设置上下文、数据库连接、缓存连接等。
  final connection = await DatabaseConnection.connect('localhost:1234');

  // 定义一个注入控制器的方法。
  // 可以使用 get_it 包。
  T get<T extends Object>(Request request) {
    return UserController(connection) as T;
  }

  // 使用路由器处理请求，注意路由器也可以被挂载。
  final handler = const Pipeline().addMiddleware(getterMiddleware(get)).addHandler(apiRouter);
  await serve(handler, 'localhost', 8080);
}

更多关于Flutter路由管理插件shelf_routing的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter路由管理插件shelf_routing的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter应用中，路由管理是一个核心功能，它允许你在不同的页面（或称为屏幕、视图）之间进行导航。虽然shelf_routing这个名称听起来像是与Flutter路由管理相关的插件，但实际上在Flutter社区中，更常见和广泛使用的路由管理插件是flutter_navigator或flutter_router，以及Flutter自带的路由管理功能。

shelf实际上是一个Dart HTTP服务器框架，与Flutter客户端开发没有直接关系。因此，假设你是指Flutter中的路由管理，并且希望看到一个使用Flutter自带路由管理功能的代码案例，以下是一个简单的示例：

Flutter 自带路由管理示例

首先，确保你的Flutter项目已经设置好，并且你已经在pubspec.yaml文件中添加了任何必要的依赖项（虽然在这个例子中我们不需要额外的依赖项）。

1. 定义路由

在你的Flutter应用的入口文件（通常是main.dart）中，定义你的路由表：

import 'package:flutter/material.dart';
import 'first_screen.dart';
import 'second_screen.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/',
      routes: {
        '/': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
    );
  }
}

2. 创建屏幕（页面）

接下来，创建你的第一个屏幕（first_screen.dart）：

import 'package:flutter/material.dart';

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/second');
          },
          child: Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

然后，创建你的第二个屏幕（second_screen.dart）：

import 'package:flutter/material.dart';

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Screen'),
      ),
      body: Center(
        child: Text('Welcome to the Second Screen!'),
      ),
    );
  }
}

3. 运行应用

现在，你可以运行你的Flutter应用。当你点击第一个屏幕上的按钮时，应用将导航到第二个屏幕。

这个示例展示了如何使用Flutter自带的路由管理功能来在不同的屏幕之间进行导航。如果你确实是在寻找一个名为shelf_routing的特定插件，并且它确实存在（尽管在Flutter社区中并不常见），你可能需要查阅该插件的官方文档或GitHub仓库来获取正确的使用方法和代码示例。然而，在大多数情况下，Flutter自带的路由管理功能已经足够强大和灵活，可以满足大多数应用的需求。

回到顶部