#学习资料：

https://blog.csdn.net/m0_74451345/article/details/157024056?fromshare=blogdetail&sharetype=blogdetail&sharerId=157024056&sharerefer=PC&sharesource=tyty0214&sharefrom=from_link

---

#前置条件：

##环境搭建

1.已安装VScode，Git，DevEco Studio，Java17，Android Studio这些软件。

##多终端工程创建运行
##注册AtomGit账号

可参考​​​​​​https://bxming.blog.csdn.net/article/details/156203132

https://blog.csdn.net/tyty0214/article/details/157311564?fromshare=blogdetail&sharetype=blogdetail&sharerId=157311564&sharerefer=PC&sharesource=tyty0214&sharefrom=from_link

https://blog.csdn.net/tyty0214/article/details/157379995

---

#具体流程：

##一、配置本地后端 API

需要先下载node.js

出现下面的内容即为安装成功

###1. 初始化后端项目

1. 创建项目目录并进入：

   bash

   mkdir mushroom-local-api && cd mushroom-local-api
   

2. 初始化 Node.js 项目：

   bash

   npm init -y
   

3. 安装 Express 框架：

   bash

   npm install express
   

安装好后文件夹内会出现以下三个

###2. 配置静态资源与接口

1. 在项目根目录创建 public/images 文件夹，放入所有蘑菇图片。
2. 创建 server.js 并写入完整代码：

   javascript

   const express = require('express');
   const app = express();
   const PORT = 5000;
   
   // 配置静态资源托管
   app.use('/images', express.static(__dirname + '/public/images'));
   
   // 蘑菇数据
   const mushroomData = [
     {
       "name": "美味牛肝菌",
       "imageUrl": "/images/meiweiniuganjun.jpeg",
       "edibility": "可食用",
       "location": "欧洲、北美、中国西南高山针叶林"
     },
     {
       "name": "松茸",
       "imageUrl": "/images/songrong.jpg",
       "edibility": "可食用",
       "location": "中国东北、西南，日本，朝鲜"
     },
     {
       "name": "死亡帽",
       "imageUrl": "/images/siwangmao.jpeg",
       "edibility": "剧毒",
       "location": "欧洲、北美、西亚"
     },
     {
       "name": "鸡枞菌",
       "imageUrl": "/images/jisongjun.png",
       "edibility": "可食用",
       "location": "中国西南、华南，东南亚"
     },
     {
       "name": "毒蝇伞",
       "imageUrl": "/images/duyingsan.png",
       "edibility": "有毒",
       "location": "北半球温带、寒温带"
     },
     {
       "name": "香菇",
       "imageUrl": "/images/xianggu.jpg",
       "edibility": "可食用",
       "location": "全球广泛人工栽培"
     }
   ];
   
   // 蘑菇列表接口
   app.get('/api/mushrooms', (req, res) => {
     res.status(200).json(mushroomData);
   });
   
   // 启动服务
   app.listen(PORT, () => {
     console.log(`本地蘑菇接口已启动：http://localhost:${PORT}/api/mushrooms`);
     console.log(`测试图片访问：http://localhost:${PORT}/images/meiweiniuganjun.jpeg`);
   });
   

###3. 启动并验证后端

1. 启动后端服务：保持这个页面不要关闭

   bash

   node server.js
   

2. 在电脑浏览器访问：
   • 接口验证：http://localhost:5000/api/mushrooms
   • 图片验证：http://localhost:5000/images/meiweiniuganjun.jpeg

---

##二、Flutter 前端开发

###1. 初始化 Flutter 项目

1. 创建 Flutter 项目：

   bash

   flutter create my_cross_platform_app && cd my_cross_platform_app
   

2. 添加 Dio 依赖到 pubspec.yaml：

   yaml

   dependencies:
     dio: ^5.4.0
   

3. 安装依赖：

   bash

   flutter pub get
   

###2. 实现数据模型与网络请求

1. 创建 lib/model/mushroom_model.dart：

   dart

   class MushroomModel {
     final int? id;
     final String name;
     final String imageUrl;
     final String edibility;
     final String location;
   
     const MushroomModel({
       this.id,
       required this.name,
       required this.imageUrl,
       required this.edibility,
       required this.location,
     });
   
     factory MushroomModel.fromJson(Map<String, dynamic> json) {
       return MushroomModel(
         id: json['id'] as int?,
         name: json['name'] as String,
         imageUrl: json['imageUrl'] as String,
         edibility: json['edibility'] as String,
         location: json['location'] as String,
       );
     }
   }
   

2. 创建 lib/utils/mushroom_dio_util.dart：

   dart

   import 'package:dio/dio.dart';
   import '../model/mushroom_model.dart';
   
   class MushroomDioUtil {
     static final Dio _dio = Dio(BaseOptions(
       baseUrl: 'http://192.168.71.105:5000/api',
       connectTimeout: const Duration(seconds: 5),
       receiveTimeout: const Duration(seconds: 5),
     ));
   
     static Future<List<MushroomModel>> getMushrooms() async {
       try {
         final response = await _dio.get('/mushrooms');
         final List<dynamic> data = response.data;
         return data.map((json) => MushroomModel.fromJson(json)).toList();
       } catch (e) {
         throw Exception('获取蘑菇数据失败: $e');
       }
     }
   }
   

###3. 实现蘑菇列表页面

创建 lib/pages/mushroom_list_page.dart：

dart

import 'package:flutter/material.dart';
import '../model/mushroom_model.dart';
import '../utils/mushroom_dio_util.dart';

class MushroomListPage extends StatefulWidget {
  const MushroomListPage({super.key});

  @override
  State<MushroomListPage> createState() => _MushroomListPageState();
}

class _MushroomListPageState extends State<MushroomListPage> {
  late Future<List<MushroomModel>> _mushroomsFuture;

  @override
  void initState() {
    super.initState();
    _mushroomsFuture = MushroomDioUtil.getMushrooms();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('蘑菇列表')),
      body: FutureBuilder<List<MushroomModel>>(
        future: _mushroomsFuture,
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            return ListView.builder(
              itemCount: snapshot.data!.length,
              itemBuilder: (context, index) {
                final mushroom = snapshot.data![index];
                return ListTile(
                  leading: Image.network(
                    'http://192.168.71.105:5000${mushroom.imageUrl}',
                    width: 60,
                    height: 60,
                    fit: BoxFit.cover,
                  ),
                  title: Text(mushroom.name),
                  subtitle: Text('可食用性: ${mushroom.edibility}'),
                );
              },
            );
          } else if (snapshot.hasError) {
            return Center(child: Text('加载失败: ${snapshot.error}'));
          }
          return const Center(child: CircularProgressIndicator());
        },
      ),
    );
  }
}

###4. 配置主入口

修改 lib/main.dart：

dart

import 'package:flutter/material.dart';
import 'pages/mushroom_list_page.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '蘑菇列表',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const MushroomListPage(),
    );
  }
}

---

##三、鸿蒙虚拟机验证

1. 确保电脑与虚拟机在同一局域网，获取电脑局域网 IP（如 192.168.71.105）。
2. 在虚拟机浏览器验证：
   • 接口：http://192.168.71.105:5000/api/mushrooms
   • 图片：http://192.168.71.105:5000/images/meiweiniuganjun.jpeg
3. 在 DevEco Studio 中运行 Flutter 应用到鸿蒙虚拟机，验证列表与图片加载正常。

##四，提交至AtomGit仓库

需要注意所处分支，若处在错误分支则无法提交成功。

下面是解决方法

可登录平台查看提交的信息

---

#DAY3总结：

##主要任务：

##完成

###1. 后端服务（ mushroom-local-api ）
 
- ✅ 已在  public/images  目录下存放所有蘑菇图片
- ✅ 已配置  express.static  托管静态资源，通过  /images/xxx  可访问图片
- ✅ 已实现  /api/mushrooms  接口，返回包含本地图片路径的 JSON 数据
- ✅ 已验证接口和图片可通过电脑局域网 IP访问
 
###2. Flutter 前端
 
- ✅  mushroom_dio_util.dart  已配置正确的  baseUrl 
- ✅  mushroom_list_page.dart  已拼接完整图片 URL
- ✅  MushroomModel  已修复空值问题， id  字段设为可空且构造函数改为可选参数
- ✅ 已验证应用在鸿蒙虚拟机中可正常加载数据和图片
 
###3. 运行须知
 
1. 启动后端：进入  mushroom-local-api  目录，运行  node server.js 
2. 启动前端：在 DevEco Studio 中运行 Flutter 应用到鸿蒙虚拟机
3. 网络依赖：确保电脑与鸿蒙虚拟机处于同一局域网

##欢迎加入开源鸿蒙跨平台社区

https://openharmonycrossplatform.csdn.net