SAFE-Dojo项目实战教程：构建全栈F应用指南

前言：项目概述与环境搭建

SAFE-Dojo是一个基于F#的全栈应用开发实践项目，采用了SAFE技术栈（Saturn、Azure、Fable、Elmish）。该项目展示了如何构建一个包含前后端交互的完整Web应用，特别适合想要学习F#全栈开发的开发者。

初始运行步骤

1. 确保已安装.NET SDK和Node.js运行环境
2. 在项目根目录执行dotnet tool restore命令还原工具依赖
3. 运行dotnet run启动应用，首次运行会自动下载NPM依赖并编译前后端代码
4. 访问http://localhost:8080查看运行效果
5. 在搜索框中输入英国邮编EC2A 4NE并提交，即可看到位置信息和相关数据

开发体验优化

项目集成了两个强大的开发时功能：

1. dotnet watch：自动检测服务端文件变更并重新编译，无需手动重启服务。例如修改DataAccess.fs中的Town值后，保存文件即可立即看到变更效果。

2. 热模块替换(HMR)：前端支持实时更新，修改src/Client/Index.fs中的文本内容后，浏览器会自动刷新而保持应用状态不变。

第一部分：添加API端点

本部分将指导您如何在后端添加新的犯罪统计端点，理解Fable Remoting的路由定义机制。

操作步骤

1. 打开src/Server/Api.fs文件，定位到dojoApi记录定义处
2. 观察现有的GetDistance端点绑定方式，注意函数名称和getDistanceFromLondon的签名
3. 将GetCrimes端点从返回空数组改为绑定getCrimeReport函数
4. 在浏览器中测试邮编搜索功能，确认犯罪统计图表已正常显示

技术要点

• Fable Remoting使用记录类型定义API契约
• 前后端共享相同的API接口定义
• 前端通过dojoApi代理调用后端接口

第二部分：共享验证逻辑

本部分展示如何将后端验证代码复用到前端，体现F#代码共享的优势。

实现步骤

1. 在src/Client/Index.fs中找到处理邮编变更的PostcodeChanged消息处理器
2. 使用Validation.isValidPostcode函数添加验证逻辑
3. 根据验证结果更新模型中的ValidationError字段
4. 测试输入无效邮编时的UI反馈

技术价值

• 同一验证逻辑可同时在服务端和客户端执行
• 减少代码重复，提高一致性
• Fable编译器自动将F#代码转换为JavaScript

第三部分：集成地图组件

本部分将指导您添加地图组件，展示Elmish架构中视图与模型的交互方式。

实现步骤

1. 在view函数中添加mapWidget调用
2. 为地图设置中心点坐标(map.center属性)
3. 调整缩放级别至15
4. 使用makeMarker辅助函数添加位置标记

技术要点

• Elmish视图函数声明式描述UI
• 属性(Props)控制React组件行为
• 不可变模型确保UI一致性

第四部分：实现天气功能

本部分完整演示全栈功能开发流程，从后端API到前端展示。

开发流程

1. 在Api.fs中实现getWeather函数
2. 在IDojoAPI接口中添加GetWeather端点定义
3. 更新前端Report类型包含天气数据
4. 在getResponse中调用新端点
5. 在view中添加weatherWidget调用
6. 扩展天气组件显示温度信息

架构理解

• 前后端通过共享类型定义保持一致性
• 异步工作流处理网络请求
• 类型安全的数据传输

第五部分：扩展练习 - 添加清除按钮

作为自主练习，建议尝试：

1. 在UI中添加清除按钮
2. 定义新的消息类型处理清除操作
3. 在update函数中实现状态重置逻辑
4. 在view函数中添加按钮元素和事件处理

这个练习将帮助您巩固对Elmish架构的理解，特别是消息传递和状态管理机制。

通过本教程，您已经掌握了使用SAFE技术栈开发全栈F#应用的核心技能，包括API设计、代码共享、UI组件集成等关键概念。这些知识将为您构建更复杂的应用奠定坚实基础。