软开项目记录：文物数据库

demo:antidb.chainpray.top

概要

跟着老师做的一个项目，目的是实现银元的知识图谱构建，鉴伪（AI听泉是吧）和估值

本来算是是软开一个外包项目，老师说好算法已经搞定了，过去做做web和app展示就行了；结果项目组第一次过去面谈的时候发现怎么打算让我们做算法TAT。更离谱的是我刚好被别人拉进一个组，结果刚好承接的是这个项目的算法，乐，前端做算法，我？

踩坑

说是记录本质上是踩坑

首先拿到首页的原型，直接甩给v0，优化了几轮交互基本没问题，fork下来是Nextjs，结果直接零帧起手，踩坑踩麻了

1. React默认开启严格模式，也就是大部分组件和功能会触发两次，直接导致我每次浏览一个物品会出现两条历史，而且时间戳可能一样导致next报错id重复（我使用物品pid+时间戳=id TAT），最后去next.config.js设置reactStrictMode: false,解决
2. 默认npm run build不会生成静态文件，因为nextjs是全栈框架，存在后端api。若是纯前端需要导出在next.config.js加上...(process.env.NODE_ENV === 'production' && {output: 'export'  }),加环境变量的判断是因为output和rewrite属性冲突了，而dev环境一般需要转发api到后端
3. 网页要使用摄像头权限必须使用https访问才行，但银元原始数据是http访问的，而且对应站点没有开启https，所以在构建数据库的时候将图片上传cloudinary，存储cloudinary的https链接
4. 打包apk可以使用HbuilderX的5+APP，使用前端工程build后的静态资源；但是Nextjs导出存在一个问题是它使用的是'/'绝对路径而不是'./'相对路径，导致本地打开无法正常加载，解决方法有二
   • 打开out/index.html文件，将所有script和css标签中所有src='/'的引入改成src='./'
   • 在不报错的情况下可以在next.config.js中加上assetPrefix: '.'实现使用相对路径；这里assetPrefix本来是用来配置子页面的，比如项目produc环境中部署在localhost/test/下，assetPrefix可以配置为/test，这里卡个bug可以写'.'
5. node服务端开启https要配置ssl证书，还挺麻烦的，如果用的是宝塔面板的话可以使用nginxd的反向代理自动配置，具体操作是：
   • 首先将一个新的二级域名解析到服务器ip
   • 到宝塔中选择反向代理，将新域名代理到你服务的端口上（写localhost就行了，这样不用配置防火墙开放端口，只需要开放http的80和https的443）
   • 设置到SSL那一栏选择Let's Encrypt自动配置就可以了
   • url代理要设置的话注意服务没有使用绝对路径，原因见上第4点

记录

正二八经记录下上周的开发流程，实际上主要内容3天就写完了，后面linux部署又是系统版本不够缺C++库装不了node18，又是python装不了opencv，又是部署后http没法用摄像头，又是转https后图片是http因为混合内容没法加载......反正这些乱七八糟的导致部署部署了三天TAT

• 10.11
  • 爬虫大体完成
  • 页面设计大体完成
  • 二维码识别完成
• 10.12
  • 接收图片，获取条形码，爬取官网图片的代码实现
  • uniapp能够拍照，向nodejs发送图片并拿到响应
• 10.13
  • 写了新的nodejs构建sqlite数据库，6级结构存储文物信息
  • 后端nodejs基本逻辑实现
  • 前端使用v0+cursor快速构建nextjs项目，实现数据检索+拍照+用户功能+浏览历史+收藏夹功能
  • 48h大体完工
• 10.15
  • 云端部署完成，绑定域名并启用https，前端http请求使用后端proxy路由代理避免混合内容异常
  • 拍照识别的upload路由实现返回SSE流，实现识别进度条功能
• 10.16
  • 优化图片使用cloudinary存储和加速，不同组件使用不同大小的图片（cloudinary提供），优化用户访问速度
• 10.17
  • 优化页面栈跳转逻辑，优化浏览器history和返回功能
• 10.18
  • 尝试安卓apk打包，成功