Task04：前后端基础及交互

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
                |
                \---js
                        mui.js
                        mui.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. 交互图示