step4配置路由和接口服务

路由配置和接口服务

路由

• 首先 pubspec.yaml文件引入相关依赖

    # get-状态管理
    get: ^4.3.8
    # dio-网络请求
    dio: ^4.0.0
    # shared_preferences-本地存储
    shared_preferences: ^2.0.6
  

• 新建文件

  

• 上传代码到github

  cd path/to/your/flutter/project # 进入到您的Flutter项目目录
  git init # 初始化Git仓库
  git add . # 添加所有文件到Git（添加.gitignore来忽略不需要的文件）创建项目时默认会有
  git commit -m "Initial commit" # 提交您的文件
  git branch -M main # 将分支重命名为main
  git remote add origin https://github.com/6Yolo6/FlutterEnglishHub.git # 连接到GitHub仓库
  git push -u origin main # 推送到GitHub
  
  

• 在lib-router-router.dart如下代码

  import 'package:get/get.dart';
  import 'package:flutter_english_hub/sidebar/home_screen.dart';
  import 'package:flutter_english_hub/introduction_animation/introduction_animation_screen.dart';
  import 'package:flutter_english_hub/login/login.dart';
  import 'package:flutter_english_hub/router/router_guard.dart';
  
  class Routes {
    static const INTRODUCTION = '/introduction';
    static const HOME = '/home';
    static const LOGIN = '/login';
  
    static final routes = [
      GetPage(
        // 介绍动画页面
        name: INTRODUCTION,
        page: () => IntroductionAnimationScreen(),
      ),
      GetPage(
        // 首页
        name: HOME,
        page: () => const MyHomePage(),
        // 路由守卫
        middlewares: [RouteAuthMiddleware()],
      ),
      GetPage(
        // 登录页
        name: LOGIN,
        page: () => Login(),
      ),
    ];
  }
  

• lib-router-router_guard.dart下添加路由守卫
  （移除，改为使用dio的拦截器，见下下方）

  import 'package:get/get.dart';
  import 'package:flutter_english_hub/router/router.dart';
  import 'package:flutter_english_hub/service/storage_service.dart';
  import 'package:flutter/material.dart';
  
  // 通过GetMiddleware实现路由守卫
  class RouteAuthMiddleware extends GetMiddleware {
    @override
    RouteSettings? redirect(String? route) {
      // 通过Get.find<StorageService>()获取StorageService实例
      final storageService = Get.find<StorageService>();
      if (storageService.getToken() == null) {
        // 如果token为null，重定向到登录页
        return RouteSettings(name: Routes.LOGIN);
      }
      // 否则，允许继续访问目标页
      return null;
    }
  }
  

接口服务

• 在api_service.dart文件下配置基本api和请求拦截器

• 接着在main.dart中引入route

  // 引入router
  import 'package:flutter_english_hub/router/router.dart';
  
  return GetMaterialApp(
        title: 'English Hub',
        // 隐藏调试横幅
        debugShowCheckedModeBanner: false,
        theme: ThemeData(
          textTheme: AppTheme.textTheme,
          // 设置应用的平台为android
          platform: TargetPlatform.android,
          // colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          // useMaterial3: true,
        ),
        home: HomeNavigation(),
        // 初始路由
        // initialRoute: storageService.getToken() == null ? Routes.INTRODUCTION : Routes.HOME,
        // 路由表
        getPages: Routes.routes,
      );
  

Token() == null ? Routes.INTRODUCTION : Routes.HOME,
// 路由表
getPages: Routes.routes,
);