@
- 0.代码版本
- 1. 前端部分
- 1.1 主要文件
- 1.2 主要组件
- 1.2.1 signUp.vue
- 1.2.2 signIn.vue
- 1.2.3 recLists.vue
- 1.2.4 hotLists.vue
- 1.2.5 NewsInfo.vue
- 1.2.6 Myself.vue
- 2. 后端部分
- 2.1 主要文件
- 2.2 主要组件
- 2.2.1 register()
- 2.2.2 login()
- 2.2.3 rec_list()
- 2.2.4 hot_list()
- 2.2.5 news_detail()
- 2.2.6 actions()
- 3. 交互图示
0.代码版本
该专栏的博客当中涉及的所有代码，均为组队学习期间的版本，大概在2021年12月12日左右，某一个可能的参考版本链接如下：
https://github.com/datawhalechina/fun-rec/tree/9bcfafaae339c443cc7911b9070bf52adef9e994
1. 前端部分
1.1 主要文件
PS D:\Project\fun-rec\codes\news_recsys\news_rec_web> tree /f /a
卷 Data 的文件夹 PATH 列表
卷序列号为 7876-8A9C
D:.
\---Vue-newsinfo| .babelrc| ES6转码的配置文件|| package-lock.json| 锁定安装时的包的版本号| 保证大家的依赖能一致|| package.json| 依赖包的配置文件| 配置前端项目运行脚本|| README.md| 说明文件|| vue.config.js| vue项目的配置文件|| webpack.config.js| webpack的配置文件| 用于打包整个项目|\---src| App.vue| 根组件|| index.html| 项目主页面|| main.js| 主脚本文件| 用于定义全局变量| 同时可以引入插件|| router.js| 路由脚本文件| 配置url链接与页面组件的映射|| store.js| 管理用户的各种状态|+---api| newVue.js| 不太清楚是什么作用| 只有两行代码的import| 结合下面的文件，感觉没用|| Vue╕№╨┬░ц ╧ю─┐║═api╜╙┐┌╦╡├ў╬─╡╡ги╧ю─┐╓╨╦∙╙╨╡─╜╙┐┌╬─╡╡╥╘┤╦╬к╫╝гй-╫ю╨┬.docx| 一个word文档，好像是某个库的各个API描述，但是看起来与本项目无关|+---assets| | logo.png| | vue的logo文件| || +---css| | index.less| | 不知道是什么，感觉没用| || | sign.css| | 用户登录注册页面的装饰| || | tab.css| | vant顶部导航装饰| | 但是没有在本项目使用| || | test.css| | 顶部导航栏装饰| | 就是推荐和热门两个tab| || \---js| cookie.js| 定义cookie的相关操作|+---components| bottomBar.vue| 底部组件，就是我的和新闻两个tab|| common.vue| 存放全局变量|| hotLists.vue| 热门页|| Myself.vue| 个人中心|| NewsInfo.vue| 新闻详情页|| recLists.vue| 推荐页|| signIn.vue| 登录页面|| signUp.vue| 注册页面| +---images| datawhale.png| DataWhale头像|| dw.png| DataWhale二维码|\---lib\---mui\--饿了么的Mint UI库\-但是没有在本项目使用\+---css| icons-extra.css| mui.css| mui.min.css|+---fonts| mui-icons-extra.ttf| mui.ttf|\---jsmui.jsmui.min.js
1.2 主要组件
1.2.1 signUp.vue
1.2.2 signIn.vue
1.2.3 recLists.vue
1.2.4 hotLists.vue
1.2.5 NewsInfo.vue
1.2.6 Myself.vue
2. 后端部分
2.1 主要文件
从前后端交互的角度来讲，主要的只有server.py这个文件在直接处理请求
2.2 主要组件
2.2.1 register()
@app.route('/recsys/register', methods=["POST"])
接收前端传来的注册请求及用户信息
首先要查重，使用UserAction().user_is_exist()来检查用户名
重复则返回，不重复则从雪花算法获取一个独特的uid
然后依次检查用户信息的合法性，不合法返回错误
合法则用UserAction().save_user()存入MySQL
2.2.2 login()
@app.route('/recsys/login', methods=["POST"])
接收前端传来的登录请求及登录信息
用UserAction().user_is_exist来检查用户名和密码
成功则返回200状态，否则就返回其他状态
2.2.3 rec_list()
@app.route('/recsys/rec_list', methods=["GET"])
接收前端传来的获取推荐的请求及其对应参数
用recsys_server.get_cold_start_rec_list_v2()获得推荐结果
也就是OnlineServer().get_cold_start_rec_list_v2()函数
2.2.4 hot_list()
@app.route('/recsys/hot_list', methods=["GET"])
接收前端传来的获取热门的请求及其对应参数
用recsys_server.get_hot_list_v2()获得热门列表
也就是OnlineServer().get_hot_list_v2()函数
2.2.5 news_detail()
@app.route('/recsys/news_detail', methods=["GET"])
接收前端传来的获取新闻的请求及其对应参数
用recsys_server.get_news_detail()获得新闻内容
也就是OnlineServer().get_news_detail()函数
同时，需要检查该用户是否对该文章点赞和收藏
也就是UserAction().get_likes_counts_by_user(user_id,news_id)
和UserAction().get_coll_counts_by_user(user_id,news_id)
2.2.6 actions()
@app.route('/recsys/action', methods=["POST"])
接收前端传来的用户行为请求及其对应参数
如果是like和collection，那就要检查状态
已经有过，这次就是取消，删除对应的记录
是UserAction().del_likes_by_user(userid,newsid)
和UserAction().del_coll_by_user(userid,newsid)
还没有过，这次就是记录，新增对应的记录
是UserAction().save_one_action(userlikes)
和UserAction().save_one_action(usercollections)
不管状态检查的结果如何，日志都是照常记录的
也就是 LogController().save_one_log(logitem)
3. 交互图示
