菜鸟前端 cursor 全栈开发 app 的踩坑分享（四、配置后端Firebase，前后端闭环）
一、Firebase新建项目
1. 控制台新建项目
2. 项目内新建应用
这一步是为了获取真实配置，放在FirebaseOptions文件中我目前用Chrome 浏览器运行 Flutter 项目，所以先新建web端
3. 新建数据库
- 新建库，数据库位置选择相近的地理位置就可以
- 修改数据库规则
以测试模式开始
为了数据安全，数据库的规则只能写入数据，但无法加载和展示已添加的记录，为了在测试阶段能正常读，临时修改规则为允许所有读写（仅用于测试，上线前务必改回）
rules_version ='2';service cloud.firestore { match /databases/{database}/documents { match /{document=**}{ allow read, write: iftrue;}}}
二、配置Firebase并关联项目
在上一章已经完成了 Flutter 前端项目的搭建，现在要把「后端逻辑」整合到项目中，同时关联 Firebase 控制台的项目，核心思路是：Flutter 项目中集成 Firebase SDK → 编写后端逻辑（Firebase 云函数 / 数据库操作）→ 统一管理在 Cursor 中。
1. 安装 Firebase CLI（本地操作 Firebase 的工具）
- 终端执行以下命令安装
Firebase CLI（需先安装Node.js，若未安装先执行winget install OpenJS.NodeJS）
npminstall -g firebase-tools 验证安装：执行 firebase --version，能显示版本号即成功。
2. 登录 Firebase
如果你也科学上网，登录前的两个步骤非常重要：
- 在终端中设置临时环境变量，让 Firebase CLI 正确走代理：
sethttp_proxy=http://127.0.0.1:18081 sethttps_proxy=http://127.0.0.1:18081 setNODE_TLS_REJECT_UNAUTHORIZED=018081的位置填入本机端口
- 终端执行新登录命令：
正常这里执行firebase login，但开启代理后，本地回调链路被代理阻断，所以更改命令：firebase login --no-localhost 把code码复制到终端，搞定
在弹出的谷歌窗口中登录cli，复制终端中的链接在谷歌打开
3. 关联项目这个步骤要尽快做，授权超时需要重新登陆
- 登录后，在 Flutter 项目根目录执行命令
Flutter项目根目录不仅能放前端代码，也能作为Firebase后端代码的管理日录，这是Firebase推荐的「前后端代码一体化管理」方式
firebase init 选择要初始化的功能：按空格选中Firestore（数据库）、Functions（云函数，后端代码）、Hosting（可选，部署用）；
选择Firebase项目：找到并选中MyLearningApp（控制台新建的项目）；
其他选项：全部选默认（按回车即可），无需自定义。
4. 关联授权Git仓库
- 授权仓库
- push代码到远端仓库
# 1. 初始化本地 Git 仓库（如果还没初始化）git init # 2. 关联新的 GitHub 远程仓库（替换成你复制的新仓库地址）git remote add origin https://github.com/M233333223/my-learning-app.git # 3. 把 Firebase 初始化生成的所有文件加入暂存区gitadd.# 4. 提交文件（备注信息可自定义）git commit -m "Initial commit: Flutter + Firebase configuration"#5. 创建主分支git checkout -b main # 6. 推送代码到新仓库的 main 分支（第一次推送加 -u 关联分支）git push -u origin main - 验证部署效果，终端运行
flutter build web --release firebase deploy 三、在 Cursor 中创建 Firebase 后端代码
1. 编写 Firestore 数据库操作
- 打开 pubspec.yaml，在 dependencies 中添加：
dependencies:flutter:sdk: flutter dio: ^5.4.3+1 firebase_core: ^3.4.1 # Firebase 核心依赖（必须）cloud_firestore: ^5.3.1 # Firestore 数据库依赖- 执行命令安装依赖
flutter pub get - 初始化
Firebase并编写数据库操作代码
在 lib/ 下新建 utils/firebase_service.dart（后端逻辑工具类），粘贴以下代码：
此处的options中配置需要回到第一步中，复制控制台中的真实数据替换到代码中
import'package:firebase_core/firebase_core.dart';import'package:cloud_firestore/cloud_firestore.dart';import'package:flutter/foundation.dart';// 初始化 Firebase（App 启动时调用）Future<void>initFirebase()async{try{awaitFirebase.initializeApp(// 若本地未自动生成配置文件，需从 Firebase 控制台复制你的配置 options:constFirebaseOptions( apiKey:"你的 API Key",// 从 Firebase 控制台 → 项目设置 → 通用 → Web 应用获取 authDomain:"mylearningapp.firebaseapp.com",// 替换为你的项目域名 projectId:"mylearningapp",// 替换为你的项目 ID（控制台项目设置中看） storageBucket:"mylearningapp.appspot.com", messagingSenderId:"你的 Sender ID", appId:"你的 App ID",),);if(kDebugMode){print("Firebase 初始化成功！关联项目：MyLearningApp");}}catch(e){if(kDebugMode){print("Firebase 初始化失败：$e");}}}// Firestore 数据库操作示例（增删改查）classFirestoreService{// 1. 添加数据（比如保存学习记录）Future<void>addLearningRecord(String title,String content)async{try{awaitFirebaseFirestore.instance .collection("learning_records")// 集合名（类似数据库表名）.add({"title": title,"content": content,"create_time":Timestamp.now(),// 时间戳});if(kDebugMode){print("学习记录添加成功！");}}catch(e){if(kDebugMode){print("添加失败：$e");}}}// 2. 获取所有学习记录Stream<QuerySnapshot>getLearningRecords(){returnFirebaseFirestore.instance .collection("learning_records").orderBy("create_time", descending:true).snapshots();// 实时监听数据变化}// 3. 删除学习记录Future<void>deleteLearningRecord(String docId)async{try{awaitFirebaseFirestore.instance .collection("learning_records").doc(docId).delete();if(kDebugMode){print("记录删除成功！");}}catch(e){if(kDebugMode){print("删除失败：$e");}}}}四、demo页面测试接口
1. 写一个简易页面
- 修改
lib/main.dart文件
import'package:flutter/material.dart';import'package:cloud_firestore/cloud_firestore.dart';import'utils/firebase_service.dart';voidmain()async{WidgetsFlutterBinding.ensureInitialized();awaitinitFirebase();// 初始化 Firebase（已替换真实配置）runApp(constMyApp());}classMyAppextendsStatelessWidget{constMyApp({super.key});@overrideWidgetbuild(BuildContext context){returnMaterialApp( title:'MyLearningApp', theme:ThemeData(primarySwatch:Colors.blue), home:constLearningRecordPage(),// 跳转到测试页面);}}// 测试页面：包含添加/展示学习记录的功能classLearningRecordPageextendsStatefulWidget{constLearningRecordPage({super.key});@overrideState<LearningRecordPage>createState()=>_LearningRecordPageState();}class _LearningRecordPageState extendsState<LearningRecordPage>{finalFirestoreService _firestoreService =FirestoreService();finalTextEditingController _titleController =TextEditingController();finalTextEditingController _contentController =TextEditingController();// 点击按钮添加学习记录void_addRecord(){String title = _titleController.text.trim();String content = _contentController.text.trim();if(title.isNotEmpty){ _firestoreService.addLearningRecord(title, content);// 清空输入框 _titleController.clear(); _contentController.clear();// 提示添加成功ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('学习记录添加成功！')),);}else{ScaffoldMessenger.of(context).showSnackBar(constSnackBar(content:Text('标题不能为空！')),);}}@overrideWidgetbuild(BuildContext context){returnScaffold( appBar:AppBar(title:constText('MyLearningApp 测试')), body:Padding( padding:constEdgeInsets.all(16.0), child:Column( children:[// 输入框：填写学习记录标题和内容TextField( controller: _titleController, decoration:constInputDecoration( labelText:'学习记录标题', hintText:'比如：Flutter 集成 Firebase', border:OutlineInputBorder(),),),constSizedBox(height:10),TextField( controller: _contentController, maxLines:3, decoration:constInputDecoration( labelText:'学习记录内容', hintText:'比如：完成了 Firebase 初始化', border:OutlineInputBorder(),),),constSizedBox(height:20),// 添加记录按钮ElevatedButton( onPressed: _addRecord, child:constText('添加学习记录'), style:ElevatedButton.styleFrom( minimumSize:constSize(double.infinity,50),),),constSizedBox(height:20),constText('已添加的学习记录：', style:TextStyle(fontSize:16, fontWeight:FontWeight.bold)),constSizedBox(height:10),// 实时展示数据库中的学习记录Expanded( child:StreamBuilder<QuerySnapshot>( stream: _firestoreService.getLearningRecords(),// 监听数据库变化 builder:(context, snapshot){// 处理加载/错误状态if(snapshot.connectionState ==ConnectionState.waiting){returnconstCenter(child:CircularProgressIndicator());}if(snapshot.hasError){returnCenter(child:Text('加载失败：${snapshot.error}'));}// 获取数据列表final records = snapshot.data?.docs ??[];if(records.isEmpty){returnconstCenter(child:Text('暂无学习记录，点击按钮添加吧！'));}// 展示记录列表returnListView.builder( itemCount: records.length, itemBuilder:(context, index){var record = records[index];Map<String,dynamic> data = record.data()asMap<String,dynamic>;returnListTile( title:Text(data['title']??'无标题'), subtitle:Column( crossAxisAlignment:CrossAxisAlignment.start, children:[Text(data['content']??'无内容'),Text('添加时间：${(data['create_time'] as Timestamp).toDate().toString()}', style:constTextStyle(fontSize:12, color:Colors.grey),),],), trailing:IconButton( icon:constIcon(Icons.delete, color:Colors.red), onPressed:(){// 删除记录 _firestoreService.deleteLearningRecord(record.id);},),);},);},),),],),),);}}- 运行项目
flutter run -d chrome 页面功能正常，接口跑通
Firebase控制台可以看到操作数据，撒花~~
不用手动启动服务，不用手动建库建表，对于一个新手来说，这一刻才体会到Firebase太香了
