演示DEMO地址

技术栈：gin+gorm+mysql+jwt+redis+grpc+pytorch+vue3+vite+tailwind

前言

一方面为了完成毕设(毕设大概率是造前人的轮子了)，一方面也是毕设导师要求用WP了，那纯兴趣使然了。
这个项目的开发很是缓慢，因为今年大部分时间在考研，而且前后端技术栈有很多空白，如果类似bangumi这样的网站，数据库的知识也不能缺乏。我coding效率一般，好在有chatgpt的强力支持，bangmui的网站api是开放的，但我可能没精力实现全部功能。我的目标其实是一个纯粹的个人打分网站(去社交化，但提供社交软件导入)

随着对web开发的认知逐步完善，我决定大改需求，原来的目标推翻重做，造轮子实在比较蠢。

我是bangumi网站的用户，兴趣之余也想利用本人能力仿制一个功能类似的项目，添加个人认为有必要的其他功能，使用不同于bangumi站点的设计框架，设计一个可以给用户类似使用需求的web应用。

-----时间线总览-----

  • 确认了需求和使用什么前后端的框架,今天从0搭建了vue+elementui框架 [2023/9/30]
  • 使用vite+vue3+elements-plus开发前端，之前vue-cil太多是基于vue2的，要做就做新的
    [2023/10/10]
  • 没时间搞，今天想了一下看，把需求推翻重做，不是以仿bangumi的web应用为目标，bangui有自己正在开发的react应用，多劳无益，还不如去fork。现在摸清楚了bangumi的api怎么调用，数据怎么get，post，做完一个完成的自助数据查询网站也不错了。没多余精力搞前端，u3d还在水深火热之中
    [2023/11/16]
  • 决定使用vue3+go的前后端框架，完成了对用户和条目信息的get和分析。
    [2023/11/16]

  • 花了两天，做了界面，用weave的界面做了一定的参考，可以想象，css是复杂精密的，界面制作是个细活，还是挺难上手的。完成了功能

    • 查询用户，用户页面，用户页面进行用户收藏查询(一次显示8个，有下一页按钮)
    • 导航，页脚，侧边栏设计
    • 时间线，关于，以及重点的文档页面，通过调用github的api获取仓库的README.md文件
    • 查询条目

    [2023/11/27]

  • 实现了前后端基本交互，完善了登陆和注册功能，线上连接了mysql和redis
    [2024/1/4]
  • 终极完善了登录注册功能，使用了中间件鉴权，jwt的方式，给两种登录方式各设置了不同的token。
    [2024/2]
  • 实现了收藏的大部分功能，推荐算法的执行部分使用python编写，部署为一个微服务，通过grpc的方式调用。
    [2024/3]

bangumi开源项目，相关链接：
bangumi API
bangmui 用户授权机制

自助数据检索功能

  • [x] 在login页面，输入用户名，返回用户相关信息
  • [x] 输入相关条目，返回需要的条目信息

原型设计

参考bangumi各种辅助工具的UI逻辑，但是界面设计可以更现代化一点，可能会花费很多时间，会经济的考虑设计样式。
项目参考：weave

前端

个人作全栈开发，用vue这种较为轻量的前端开发框架。目前决定使用vue3+element-plus做前端。
框架搭建：下载node.js，配置环境。创建第一个vue单页应用。根据elementUI的官方步骤，搭建框架

今天发现之前是基于vue2的，用的是vue官方vue-cli脚手架，现在更推荐使用vite，仅支持vue3，遂改之。
elementui也更新为element-plus仅用于支持vue3。vite不用全局安装，较为轻量。有了以前摸索的基础，下载了路由组件和element-plus，迅速就搭建好了空项目。

花了一下午搞清楚了bangumi的API是怎么在vite中用axios的get和post请求调用的，记录了。输入用户名或者各种搜索条件可以获取到相应的数据了，下一步做一个数据爬取，然后完善功能吧。

前端基本首页做完了，现在就是功能逻辑了，用户的功能也大差不大了，项目准备build发布一次，后续开发一下检索的功能，并开发后端和数据库，进行数据处理。

基本完善了99%的页面设计。

后端

后端用golang编写，使用GIN的框架。
Restful API，使用gorm接入mysql，接入redis。

目前实现了一个基本的登陆和注册功能，并把用户数据存放到数据库。处理前端POST的数据进行登陆和注册验证。
使用jwt，构造鉴权中间件，分组路由实现。

数据库中目前只有一个用户表。同时新建了条目表和用户收藏表，用于建立两表之间的联系。
添加了tag表，gorm中用many2many的方式和条目表构建一个关系，同时用于对用户标签化，便于进行推荐算法。

使用grpc服务和python后端通信。由于神经网络算法的代码过于依赖python，我将其微服务化，可以使得该代码给多个项目使用。通过定义protoc文件，生成protoc文件，编写grpc客户端和服务端代码，算法后端已经成熟的运行了。

总结

vue基本官方文档就能解决90%的问题，构建后大小也很惊人， 只有几MB。
其实完成了这个，vue的使用倒没有熟练多少，更多是了解了很多前端技术栈的知识，刚起步的时候，连vue和vite是什么都分不清，还一直以为我用的是vite框架呢🤣(导致项目名字也叫digbgm_vite了，笑)

走完从开发到生产环境部署的全流程，实践一遍可以学到很多以为简单但并没那么简单的事情。比如api的调用跨域(需要nginx使用反代理，把指定的地址反代到跨域的地址)，刷新404问题，都是典中典，新手是这样的

前端最大的问题，我觉得是配css，这是最折磨的，特别我还有一点强迫，还好我也不是主营前端，css凑合吧…
现在我觉得说不定用tailwind会好一点。。。😥

后端的搭建基于我对go的逐渐熟练以后，在有了go的相关基础和gin的一定使用经验后，我快速搭建了该项目的后端，并进行了线上部署。go打包后为linux可执行文件，上线是很快的，一键部署。在使用配置文件启动项目后，也更加了灵活。