企业官网建设流程全解析

响应式网站怎么做无缝轮播图,企业网站建设策划书,wordpress framework,海北公司网站建设——一套“先快后准”的数据策略#xff1a;Memory → DB → Network → 回写目标#xff1a;页面打开秒出数据#xff08;缓存/数据库#xff09;#xff0c;后台再拉取网络数据更新#xff1b;弱网/离线也能用#xff1b;Repository 对上层只暴露干净的领域模型#…——一套“先快后准”的数据策略Memory → DB → Network → 回写目标页面打开秒出数据缓存/数据库后台再拉取网络数据更新弱网/离线也能用Repository 对上层只暴露干净的领域模型不让 UI 知道缓存细节。1为什么缓存/数据库要放在 RepositoryRepository 的职责是对业务提供“数据真相”。它应该屏蔽数据来自哪里网络Dio / REST本地SQLite/Isar/Hive/SharedPreferences内存Map/LRU组合策略先缓存后网络、过期刷新、离线兜底UI/State 层只关心“我需要 profile 数据”“我刷新一下”“我加载更多”。2推荐目录结构可复用data/ remote/ api_client.dart profile_api.dart local/ db.dart profile_dao.dart entities/ profile_entity.dart repository/ profile_repository.dart domain/ models/ profile.dart mappers/ profile_mapper.dartEntity数据库结构字段可能更偏存储Model业务模型给 UI/UseCase 用MapperEntity ↔ Model 的转换Repository组合 Network DB Cache 策略3策略选型Cache-Aside Stale-While-Revalidate最常用你想要的“无缝”体验最常用就是这套先读缓存/DB快→ 立即返回给 UI同时/随后拉Network准成功后回写 DB/Cache并通知 UI 更新这就是经典的Cache-aside缓存旁路SWR过期可用 后台刷新4核心接口Repository 对外暴露什么强烈建议 Repository 对外提供两种能力A. 一次性读取适合简单页面FutureProfile getProfile({bool forceRefresh false});B. 流式订阅推荐DB 作为单一事实来源StreamProfile watchProfile();Futurevoid refreshProfile();如果你想“秒出 自动刷新后 UI 自动更新”选B会更爽。5实现方案 1DB 为单一事实源推荐中大型项目思路UI 只订阅 DBRepository 负责刷新并回写 DB。5.1 Domain Model业务模型class Profile { final String id; final String name; final String avatar; Profile({required this.id, required this.name, required this.avatar}); }5.2 DB Entity存储结构class ProfileEntity { final String id; final String name; final String avatar; final int updatedAtMs; ProfileEntity({ required this.id, required this.name, required this.avatar, required this.updatedAtMs, }); }5.3 MapperEntity ↔ Modelclass ProfileMapper { static Profile toModel(ProfileEntity e) Profile(id: e.id, name: e.name, avatar: e.avatar); static ProfileEntity toEntity(Profile m) ProfileEntity( id: m.id, name: m.name, avatar: m.avatar, updatedAtMs: DateTime.now().millisecondsSinceEpoch, ); }5.4 DAO你用 Drift/Isar/Hive 都行这里只给接口abstract class ProfileDao { StreamProfileEntity? watch(); FutureProfileEntity? get(); Futurevoid upsert(ProfileEntity entity); Futurevoid clear(); }5.5 Remote APIabstract class ProfileApi { FutureProfile fetchProfile(); }5.6 Repository重点策略实现class ProfileRepository { final ProfileApi api; final ProfileDao dao; ProfileRepository({required this.api, required this.dao}); StreamProfile? watchProfile() { return dao.watch().map((e) e null ? null : ProfileMapper.toModel(e)); } Futurevoid refreshProfile() async { final profile await api.fetchProfile(); await dao.upsert(ProfileMapper.toEntity(profile)); } FutureProfile? getCachedProfile() async { final e await dao.get(); return e null ? null : ProfileMapper.toModel(e); } }UI 用法页面订阅watchProfile()页面下拉刷新调用refreshProfile()弱网下仍有 DB 数据兜底6实现方案 2一次性读取 TTL适合小中型项目如果你暂时不想用 Stream或 DB 不支持 watch用 TTL 也很常见6.1 定义缓存策略内存缓存秒开DB 缓存离线兜底TTL比如 10 分钟过期class CachePolicy { final Duration ttl; CachePolicy(this.ttl); bool isExpired(int updatedAtMs) { final age DateTime.now().millisecondsSinceEpoch - updatedAtMs; return age ttl.inMilliseconds; } }6.2 Repository先快后准class ProfileRepository2 { final ProfileApi api; final ProfileDao dao; final CachePolicy policy; ProfileRepository2({required this.api, required this.dao, required this.policy}); FutureProfile getProfile({bool forceRefresh false}) async { final cached await dao.get(); if (!forceRefresh cached ! null !policy.isExpired(cached.updatedAtMs)) { // 未过期直接用本地 return ProfileMapper.toModel(cached); } try { // 过期/强刷走网络 final remote await api.fetchProfile(); await dao.upsert(ProfileMapper.toEntity(remote)); return remote; } catch (_) { // 网络失败兜底用旧缓存只要有 if (cached ! null) return ProfileMapper.toModel(cached); rethrow; } } }这就是“过期刷新 失败回退”。7如何“无缝接入 401 自动刷新 Token”Repository 不需要知道 token 刷新逻辑。你只要保证 Dio 层有AuthInterceptor 注入 tokenRefreshInterceptor / QueueRefreshInterceptor 处理 401Repository 仍旧只是final profile await api.fetchProfile();登录过期refresh 失败由全局onAuthExpired统一处理即可。8工程建议你最容易踩的 4 个坑UI 直接读 DB 直接调 API会绕过 Repository逻辑散落没有 MapperEntity/Model 混用后期字段调整会痛苦缓存失效策略缺失要么永远旧要么永远打网写入时机不统一建议所有网络成功的数据都回写 DBDB 成事实源9你该怎么选给你一句话想要“秒开 自动更新 离线可用” ✅方案 1DB 单一事实源 watch项目小、只想快速落地 ✅方案 2TTL 失败回退