【vibe coding系列】0行代码编写,使用Go+Vue3+Flutter从0到1开发小绿书(三)

72 阅读10分钟

flutter开发APP

使用Android Studio创建一个项目

flutter项目主题色#57be6a, 搭建一个flutter的架构,要求实现引入dio,先只请求/health, 验证网络请求能成功,然后引入组件化的代码封装,风格使用微信app的tabbar,有一个登录页面,做假登录,tabbar分别是小绿书 通讯录 发现 我,需要增加一个theme文件夹做全局主题管理

我现在想做模仿微信的聊天工具,先帮我实现第一步,移动端的用户表 然后移动端登录 注册 添加好友的功能,先不用实现对话功能,我感觉用户表是不是应该单独隔离,和admin的用户分开

登录方式设置为邮箱 但是不需要验证,邮箱作为唯一的账号,然后添加好友需要对方确认,完成这个需求,添加Swagger注释到新接口,可补齐 swagger 注解。

我手动执行了go run main.go 无问题 总结一下这个的用户注册,添加以及获取好友,查看好友资料的文档给我

根据这篇文档,先实现flutter的用户注册以及登录的需求,移除health的请求,我已经验证可以网络访问了

没问题了 我的tab实现退出功能和个人资料展示, 然后在通讯录tab的右上角 添加一个添加好友的按钮,按照这个app_user.md文档继续完成添加好友功能

搞定

继续完成

通讯录展示好友列表(GET /api/v1/app/friends)

持久化 token(shared_preferences),App 重启保持登录

待处理好友请求列表、接受/拒绝(接口 6-8)

完美~ 下一步 开始对话功能

刚刚我已经完成了好友添加功能了,现在帮我实现私聊功能的后端服务,必须是即时通讯服务

我执行go run main.go 无报错 给我一个使用这个即时通讯的文档

根据这两个文档,实现通讯录的tab,点击好友的卡片,然后跳转到新页面,展示好友资料,下方有一个发起发消息按钮,跳到聊天新页面然后开始对话,模仿微信的页面布局

点击发消息 然后跳转页面卡死了

[ERROR:flutter/runtime/dart_vm_initializer.cc(40)] Unhandled Exception: WebSocketException: Connection to 'http://172.20.121.96:8090/api/v1/app/chat/ws#' was not upgraded to websocket, HTTP status code: 401

综合go的代码 修复这个bug 可以同时改flutter和go

搞定

增加会话列表需求,最近对话的人,可以直接在第一个tab页面显示,然后第一个tab页面的会话列表,点进去直接就是聊天对话

美化目前的app,按照微信的ui样式来,如果需要创建自己的UI组件请建立文件夹封装

后续更新中~

这里需要先使用docker安装minio,用于文件管理,先不做赘述,有问题去问豆包如何安装

minio:

endpoint: localhost:9000

access-key: oSWL19QTSnBj5lQGLPV3

secret-key: fZeyQqEo9J1iZm0SVCVtF9wGpN6OFe0ciA099HOc

这是我minio的配置,帮我实现一个minio的后端的接口对接,先实现创建/删除Buckets, 文件上传/删除的功能

根据后端的minio的接口对接,在前端新建一个页面,并实现minio的基础的功能

我想给init/main.go的权限初始化加上这个minio的菜单 叫文件管理 帮我写一个初始化的脚本

http://192.168.64.1:8090/api/v1/storage/buckets/1111/objects上传文件报错 {

"code": 400,

"message": "mime not allowed"

}

现在可以做移动端的图片上传和发图片 发动态功能了,在此之前,先要修复预览的文件映射

问了内置的gpt5关于minio的方案后,手动安装mc,配置minio的文件映射,http://127.0.0.1:9000/avatar/1.png 完成这个的映射,因为minio的图片都是有效期的访问,且属于加密的数据,手动配置开放的桶以及保留非公共桶

新增一个逻辑 我需要app上传图片和更新头像 可能app端也需要做一个允许上传文件的接口权限控制

更新app的用户表,需要增加一个头像字段,性别字段,以及更新资料的接口,头像更新的方式是先上传头像,然后拿到路径后,这个路径作为资料更新的头像一起更新即可

flutterclient 新增一个个人资料更新的页面 头像 性别 修改密码

点击编辑资料页面报错

======== Exception caught by widgets library =======================================================

The following assertion was thrown building EditProfilePage(dirty, state: _EditProfilePageState#11360):

There should be exactly one item with [DropdownButton]'s value: .

Either zero or 2 or more [DropdownMenuItem]s were detected with the same value

'package:flutter/src/material/dropdown.dart':

Failed assertion: line 1732 pos 10: 'items == null ||

items.isEmpty ||

value == null ||

items.where((DropdownMenuItem item) => item.value == value).length == 1'

The relevant error-causing widget was:

EditProfilePage EditProfilePage:file:///Users/yusenlin/Avalon/saber/github/alice/client_flutter/lib/features/home/home_tabs.dart:640:44

When the exception was thrown, this was the stack:

#2 new DropdownButtonFormField (package:flutter/src/material/dropdown.dart:1732:10)

点击头像编辑的icon 没有反应

点击从相册选取没有反应 是不是需要添加权限

选择完图片后 点击保存提示 保存失败Unsupported operation: MultipartFile is only supported where dartio is available,选择的图片也没法在头像看到

现在开始修复安卓app可以联网以及访问图片的bug

安卓登录失败 I/flutter (23209): uri: http://localhost:8090/api/v1/app/login

I/flutter (23209): DioException [connection error]: The connection errored: Connection refused This indicates an error which most likely cannot be solved by the library.

I/flutter (23209): Error: SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = localhost, port = 45786

I/flutter (23209):

数据库现在的头像存的是http://127.0.0.1:9000/app-avatars/avatar-1-1755756652.jpg 改成存 /app-avatars/avatar-1-1755756652.jpg 然后下发的时候 拼接base-url

搞定

下一步开始做私密朋友圈以及开放式的朋友圈功能

继续实现朋友圈动态的功能,按照步骤先实现动态列表的api,发送动态,动态列表(我的动态, 他人查看朋友圈动态(可以让所有人都看到动态),动态支持最多9张图),先实现后端接口,图片逻辑参考头像上传的接口

缺少了一个删除动态的功能吧

成发表动态的api的代码接口文档给我

删除 列表 都要出一个接口 最后生成一个md文件给我

根据这个文档 生成flutter app的动态发布和列表功能

接入真实图片上传,如果没有 你需要更新后端的代码

我没看到发布按钮

参考头像的逻辑 修复照片没有在安卓显示成功的bug ,我需要你拼接base-url 而不是现在的逻辑

这个朋友圈开发是前后端一起写 一次对话框写完的 可以看到右下角的文件是go和dart一起存在,这也是同一个项目开发的便捷之处

通讯录增加一个刷新功能

个人信息卡片增加一个查看朋友圈的入口

优化flutter的代码 首先我觉得接口需要封装吧 然后tabbar是不是可以抽出来成为不同的子文件

优化登录页面的样式 背景希望是多色弥散叠加高斯模糊的效果,多色弥散的背景可以动起来,输入框和登录按钮居中 不需要导航栏了

希望改成浅色背景的风格的 目前你做的是暗黑主题

优化前后端的代码,会话列表支持头像,然后未读的状态也有bug,目前不会消失

增加需求 会话列表能不能也实时更新 目前发了消息后 会话列表需要手动刷新

給朋友圈动态增加点赞和评论功能,同时更新前端和后端代码

很牛,超长的上下文,一次性写好了,11个文件

修复发表动态的时候 web不支持图片的bug 但是app都没问题 Assertion failed: file:///Users/yusenlin/development/flutter/packages/flutter/lib/src/widgets/image.dart:520:10

!kIsWeb

"Image.file is not supported on Flutter Web. Consider using either Image.asset or Image.network instead." 但是更新个人头像那里,是没问题的

优化发消息的代码 点击输入框左侧的+ 可以弹出聊天表情选择页面 希望把这个选择器封装成一个组件 因为后续的评论 也会用到 你的数据库里有表情包的库吗 需要我提供吗

增加一个需求 除了发送文本消息 支持发送图片消息 支持链接 新增这两个类型的消息发送 图片是本地图片

可以 发送成功了 flutter: access-control-allow-credentials: true

flutter: access-control-allow-headers: Content-Type, Content-Length, Accept-Encoding, X-CSRF-Token, Authorization, accept, origin, Cache-Control, X-Requested-With

flutter: access-control-allow-origin: *

flutter: date: Mon, 25 Aug 2025 04:51:54 GMT

flutter: access-control-allow-methods: POST, OPTIONS, GET, PUT, DELETE

flutter: content-length: 178

flutter: content-type: application/json; charset=utf-8

flutter: Response Text:

flutter: {"code":200,"message":"success","data":{"path":"/app-chat-images/chat-1-1756097514574093000.jpg","url":"http://192.168.64.1:9000/app-chat-images/chat-1-1756097514574093000.jpg"}} flutter: 但是没看到

支持发送视频,希望视频是点击才能播放的,这个发送视频后续也会需要支持发动态的时候支持视频

优化聊天对话列表

1 展示双方头像,如果后端没下发需要更新一下后端接口

2 发送消息的组件 改成 输入框 表情包 然后是+号 点击加号 底部弹出视频 图片 链接三个选项 移除发送按钮 使用者键盘自带的发送

3 点击头像 进入这个人的朋友圈

希望进来的时候 自动显示最下面的消息 也就是最新的消息 现在还要滚动一下

优化会话列表的显示,如果最近一条消息是图片 视频 或者链接 那么就直接显示 [图片] [视频] [链接] 不要展示http的原始url

会话列表的首页的右上角移除刷新按钮 因为已经支持下拉刷新了 然后改成+ 点击后 展示浮窗 第一个菜单叫发起群聊 第二个菜单叫添加朋友 先实现发起群聊的需求,点击后进入发起群聊的新页面,要么选择好友,最少2个人,发起群聊,然后也支持搜索加入群聊,你还需要同时更新后端接口以便支持这个需求,创建人可以设置群聊的头像,更改群聊名称,可以结合抖音的群聊或者tg的群聊,来实现这个功能

没问题了 继续实现 扩展会话列表返回群项(type=group) 调整 ChatPage 支持 group_id

富化群消息(附带 sender 基本信息)

WebSocket 群广播过滤仅群成员

群未读统计(需要成员阅读游标表)

会话列表合并排序(当前群会话未按消息时间排序混排在末尾)

前端尚未展示群消息 sender 昵称/头像,需要在 ChatPage 渲染 group_message 时使用返回的 sender。

前端未调用群已读上报接口;后端也尚未提供显式 MarkReadGroup API(只提供了内部 CountUnread/UpdateLastRead)。 继续完成

A. 在 GroupMessages 接口中富化群历史消息 sender 信息(解决历史头像缺失最终问题)。

没问题了 继续添加成员管理功能

[GIN-debug] POST /api/v1/app/chat/groups/:group_id/members:remove --> alice/api/handler/chat.(*GroupHandler).RemoveMember-fm (5 handlers) panic: ':remove' in new path '/api/v1/app/chat/groups/:group_id/members:remove' conflicts with existing wildcard ':add' in existing prefix '/api/v1/app/chat/groups/:group_id/members:add' goroutine 1 [running]: 后端报错

更新结束,代码已经提交 累计对话用时大概11个小时左右

用了额度大概是80%的额度 240次耗费(实际对话远低于240次)

我的微信:yusenlin1122 欢迎交流