前言

  上次说到使用AI开发图片管理系统，通过nestjs开发后端服务，使用小程序端访问相关接口。通过这段时间断断续续的更新，差不多算是做完了简单的小程序端、后台管理系统，并且通过vercel部署已经都能正常使用了。

后端

  后端主要是用了nestjs+mongodb+minio的方案，通过将图片上传至minIO进行持久化存储，几乎全部是通过Cursor开发的，上次说到使用Trae后来用着用着就用不了了所以花了点钱在Cursor上，效果也还可以，虽然过程中会有些问题他傻傻的解决不了，因为我本身也有开发经验遇到的问题也能基本解决所以问题不大。整体来说Cursor确实还是挺好用的，就是有时候创建文件比较慢或者会出异常，需要慢慢进行调试。

🔐 用户认证与权限管理
  • 用户注册/登录: 支持用户名、邮箱、手机号多种登录方式
  • JWT 认证: 基于 JWT 的无状态认证机制
  • 角色权限系统: 细粒度的 RBAC 权限控制
  • 密码管理: 支持密码重置、修改等功能
🖼️ 图片管理
  • 图片上传: 支持单文件/批量上传，自动图片处理
  • 图片存储: 基于 MinIO 的对象存储方案
  • 图片处理: 自动生成缩略图、水印、格式转换
  • 元数据管理: 提取和存储图片 EXIF 信息
  • 图片标签: 灵活的标签系统，支持批量操作
🏷️ 标签管理
  • 标签 CRUD: 完整的标签增删改查功能
  • 标签搜索: 支持模糊搜索和分页查询
  • 标签统计: 标签使用频率统计
📊 数据统计
  • 图片统计: 上传量、存储量等关键指标
  • 用户统计: 用户活跃度、注册趋势等
  • 系统监控: 性能指标和运行状态

image-asmt.png

后台页面

  后台页面主要使用了umijs，脚手架自动安装使用了antd pro的UI框架，通过不断调试才做出来的，整体效果也中规中矩吧，做的时候结合后端服务慢慢调试，问题基本不大。

image-c7yo.png

image-rl1n.png

image-muf7.png

image-ebyv.png

image-sivr.png

前端

  前端页面的话主要就是一个展示的功能，使用了Vite+React开发，支持瀑布流和网格布局，加上文件上传功能以及使用图片查看的组件，功能也比较简单，使用AI几乎一天就能做出来，效果也还不错，就是细节上调试起来比较费神。

image.png

image-svox.png

image-euzt.png

小程序端

  小程序端的话主要有三个页面

图片列表
  • 瀑布流: 瀑布流展示效果，图片底部展示EXIF基本信息
  • 模糊搜索: 支持调用搜索接口，模糊搜索
  • 标签搜索: 支持根据图片标签进行搜索
  • 放大查看: 支持放大查看，长按保存
  • 详情查看: 支持查看图片详细参数信息
  • 点赞: 支持对图片点赞
边框设置
  • 边框设置: 支持设置透明、黑色、白色三种边框
  • 信息展示: 支持控制元数据的隐藏与显示
  • logo设置: 支持对图片进行logo设置，包括颜色、大小、不同logo
  • 字体设置: 支持字体大小、字体颜色设置
  • 布局排列: 支持元数据信息网格布局、左右布局、上下布局
  • 导出功能: 本来要做设置好边框以后导出的，但是因为小程序不支持html2canvas导致导出的效果一直很差，还没完成
关于页面
  • 展示作者信息: 接口获取，后台管理系统可更改

7e1b11bdddb57912890d45624afea386.png

ddc9a7d2d54feea7921340316dd90eb2.png

393a8a75b106696d62183dbcaa1f9435.png

2d0d5b5ccb92498dccecc04b6975d04d.png

08ca73a7e1ef5d77fce87a4856072187.png

服务部署

  服务部署的话，本来是准备部署在自己的服务器，但是每次上传都太麻烦了，所以就直接部署在vercel上，只要代码一提交就自动部署，相对来说比较方便

nestjs项目部署

  • 在项目根目录中创建vercel.json，内容如下
{
    "version": 2,
    "name": "xxx-server",
    "builds": [
        {
            "src": "dist/main.js",
            "use": "@vercel/node",
            "config": {
                "maxDuration": 30
            }
        }
    ],
    "routes": [
        {
            "src": "/(.*)",
            "dest": "dist/main.js",
            "methods": [
                "GET",
                "POST",
                "PUT",
                "DELETE",
                "PATCH",
                "OPTIONS"
            ]
        }
    ]
}
  • 在vercel新建项目，导入项目

image-06uq.png

  • 关联好项目以后，需要设置一下环境变量，因为使用的是.env，所以需要在vercel中导入一下

image-vtjs.png

  • 导入后，开始部署即可，部署完成以后绑定自己的域名就可以访问了
  • 也可以本地直接npm run build以后，使用vercel --force --prod命令直接部署

后台管理系统与前端部署

  • 后台的话主要使用了umijs，所以在部署的时候选择umijs

image-jvvo.png

  • 同样在本地创建vercel.json，因为后台的接口访问要转发到上面部署的服务端，所以内容应该如下，/api/v1是我的请求的前缀，这个根据项目实际情况调整即可，destination配置的地址就是上面部署的服务端地址，并配置跨域设置。通过这个配置文件部署后，所有/api/v1的接口都会被转发到对应的服务端，相当于nginx的反向代理。
{
  "rewrites": [
    {
      "source": "/api/v1/:path*",
      "destination": "https://xxx.xx/api/v1/:path*"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [{ "key": "Access-Control-Allow-Origin", "value": "*" }]
    }
  ]
}
  • 前端的话也是一样，因为访问的接口都是一致的，vercel.json内容与上面一致，因为我是用的vite+react，所以选择部署框架直接使用vite即可，其他都保持默认。

image-fqzr.png

小程序发布

  • 小程序在项目创建后使用微信开发者工具打开，项目开发在Cursor中做预览在微信开发者工具中看

image-rb1i.png

  • 开发完成以后先上传体验版

image-viuu.png

  • 上传以后登陆微信公众平台-小程序，在开发管理-服务域名添加相关服务域名，并且域名要支持https不然无法访问

image-icez.png

  • 配置好以后，在版本管理中提交审核，提交后等待审核成功，审核通过后即可发布

image-kevs.png

总结

  这样整个流程就完成了，从开发到部署，再到小程序发布，基本上都比较顺利，虽然遇到一些问题但是Cursor基本上都可以解决。本来想白嫖Cursor，但是没忍住，氪了那么一点点金，提升了不少效率。