参考链接：https://github.com/datawhalechina/fun-rec/blob/master/docs/

一、前端基础

1.1 Web前端

Web前端网页主要由文字、图像和超链接等元素构成。除了这些元素，网页中还可以包含音频、视频以及Flash等。

1.1.1 什么是Web？

Web（World Wide Web）即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
Web前端主要是通HTML，CSSJS，ajax，DOM等前端技术，实现网站在客服端的正确显示及交互功能。

1.1.2 Web 标准构成

主要由结构（Structure）、表现（Presentation）和行为（Behavior）三个方面构成。
结构标准：结构用于对网页元素进行整理和分类，对于网页来说是最重要的一部分 。可以通过语义分析对其划分结构，具有了结构的内容，将更容易阅读。
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS 。目的是让网页展现出灵活多样的显示效果。
行为标准：行为是指网页模型的定义及交互的编写 。让用户对网页进行操作，网页可以做出响应性的变化。
总的来说，Web标准有三层结构，分别是结构（HTML）、表现（CSS）和行为（JS），结构类似人的身体， 表现类似人的着装， 行为类似人的行为动作，理想状态下，他们三层都是独立的， 放到不同的文件里面。

HTML (Hyper Text Markup Language)

• HTML指的是超文本标记语言，是用来描述网页的一种语言。
• HTML 不是一种编程语言，而是一种标记语言 (markup language)。
• 标记语言是一套标记标签 (markup tag)。

CSS（Cascading Style Sheets）

• 通常称为CSS样式表或层叠样式表（级联样式表）。
• 主要用于设置 HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
• 以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

JS(JavaScript)

• JS 是 Web 的编程语言，是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言。同时也是一种广泛用于客户端Web开发的脚本语言，常常用来给HTML网页添加动态效果，从而实现人机交互的网页
• 脚本语言不需要编译，在运行过程中由 js 解释器(js引擎)逐行来进行解释并执行。

1.2 Vue简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue的生命周期
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这样用户在不同阶段可以添加自己的代码。

1.3 基于Vue的移动端H5项目

HTML5是第五代HTML的标准，H5是基于 HTML5 实现的，是当前互联网前端开发的主流语言。H5页面与普通web页面相比，最大的区别在于HTML5页面可以与不同大小的移动设备相匹配，支持市场上不同浏览器的兼容。
H5页面有以下特点：

• 具有移动端自适应能力，H5页面会根据不同的手机屏幕尺寸进行适配，以达到不同屏幕的最佳显示效果。
• 支持多媒体功能，支持背景音乐，视频播放等多种多媒体功能。
• 页面素材预加载，为了保证整个页面的播放流畅，H5页面都搭配预加载功能，即用户点击之前就完成了页面的加载，保证阅读流畅性。
• 支持滑动翻页，每个页面内容单独成页。
• 使用滚动侦测特效，即滑动页面的同时，大量文字或图片会自动加载出来，造成一种动态美感。

随着移动互联网的发展，智能手机、平板等移动终端设备的普及，用户在移动端浏览的时间越来越长，H5页面传播渠道广，流量大，传播效率高，传播成本低的优势，同时H5页面制作搭配页面滑动、简单的文字、动态的图片动画以及妙趣横生的音乐及视频，给浏览者带来深刻的浏览体验。

二、flask简介及基础

Flask是一个轻量级的可定制框架，使用Python语言编写，较其他同类型框架更为灵活、轻便、安全且容易上手。它可以很好地结合MVC模式进行开发，开发人员分工合作，小型团队在短时间内就可以完成功能丰富的中小型网站或Web服务的实现。
Flask是目前十分流行的web框架，采用Python编程语言来实现相关功能。Flask框架的主要特征是核心构成比较简单，但具有很强的扩展性和兼容性，程序员可以使用Python语言快速实现一个网站或Web服务。一般情况下，它不会指定数据库和模板引擎等对象，用户可以根据需要自己选择各种数据库。

2.1 路由

在Flask中，路由是指用户请求的URL与视图函数之间的映射。Flask通过利用路由表将URL映射到对应的视图函数，根据视图函数的执行结果返回给WSGI服务器。路由表的内容是由开发者进行填充，主要有一下两个方式。

• route装饰器：使用Flask应用实例的route装饰器将一个URL规则绑定到 一个视图函数上。
• add_url_rule() ：该方法直接会在路由表中注册映射关系。其实route装饰器内部也是通过调用add_url_rule()方法实现的路由注册。

2.2 请求，响应及会话

对于一个完整的HTTP请求，包括了来自客户端的请求对象(Request)，服务器端的响应对象(Respose)和会话对象(Session)等。在Flask框架中，这些对象不仅可以在请求函数中使用，同时也可以在模板中使用。
请求对象 request
在Flask包中，可以直接引入request对象，其中包含Form，args ，Cookies ，files 等属性。Form 是一个字典对象，包含表单当中所有参数及其值的键和值对；args 是解析查询字符串的内容，它是问号（？）之后的URL的一部分，当使用get请求时，通过URL传递参数时可以通过args属性获取；Cookies 是用来保存Cookie名称和值的字典对象；files 属性和上传文件有关的数据。
响应对象 response
如果视图函数想向前端返回数据，必须是Response的对象, 主要将返回数据的几种方式：

• 视图函数 return 多个值；
• 通过直接创建Response对象，配置其参数；
• 使用make_response 函数可以传递三个参数 第一个是一个字符串，第二个传状态码，第三个传请求头。

2.3 重定向与错误处理

重定向
当一个请求过来后可能还需要在请求另一个视图函数才能达到目的，那么就可以调用redirect(location, code=302, Response=None)函数指定重定向页面。
错误处理
当请求或服务器出现错误的时候，可以使用 errorhandler() 装饰器。

2.4 SQLAlchemy

SQLAlchemy 是一个功能强大的Python ORM 工具包，为应用程序开发人员提供了SQL的全部功能和和ORM操作。其中ORM（Object Relation Mapping)指的是将对象参数映射到底层RDBMS表结构的技术，ORM API提供了执行CRUD操作的方法，不需要程序员编写原始SQL语句。

三、前后端交互

3.1 用户注册登录

为了能够对用户进行千人千面的推荐，因此需要每个使用该系统的人都需要明确先进行注册登入，为每个用户生成唯一的用户id，根据用户的历史行为，实现对用户进行个性化推荐的效果。
** 注册部分**
注册部分主要是记录用户的一些基础属性，并将用户的注册信息写入msyql表当中。
登录部分
用户登陆部分，前端通过将输入的账号密码通过POST请求传给 /recsys/login，通过UserAction().user_is_exist()方法查询数据库中的用户名或者密码是否存在，其中1表示账号密码正确，2表示密码错误，0表示用户不存在。

3.2 推荐页列表

image.png

该部分的主要逻辑是前端通过请求 "/recsys/rec_list" 接口，后端通过前端传递过来的用户姓名，从数据库中获取用户id，再根据用户id去推荐服务(recsys_server)中获取到推荐列表。

3.3 热门推荐页

热门推荐页部分，前端通过请求'/recsys/hot_list'接口，通过传递用户姓名和当前页号来获取热门新闻列表。主要的逻辑和获取推荐页相同，区别在于热门新闻信息主要是通过推荐服务(recsys_server)中的get_hot_list()方法来获取到热门新闻推荐列表。

3.4 新闻详情页

image.png

该部分主要包含一些新闻的详细信息，其中还有两个按钮，用于收集用户的显性反馈，用户可以根据自己对该文章的喜好程度进行喜欢和收藏的反馈内容。

如果用户对该新闻之前点击过喜欢或收藏，再次点击该新闻应该在喜欢或收藏按钮应该是点亮状态，因此还需要根据mysql中再次查询用户与该新闻是否存在记录，并将结果返回给前端，将其进行点亮展示。可以采用likes和collections这两个字段，通过True，False来判断用户对该文章之前是否点击过喜欢或收藏。

3.5 用户的行为

用户在看新闻时主要会留下三种用户行为：一是阅读，即用户在点击一篇新闻的详细页时，用户产生的行为；二是喜欢，在新闻详情页下面会存在喜欢按钮，用户可以通过点击按钮触发系统记录该行为；三是收藏，和喜欢行为同理，需要通过用户主动的方式来触发。

因此在用户点进一篇新闻的详情页时候，前端会发送一个请求，并给后端传递一个json格式数据；在点击喜欢或收藏按钮的时候产生一个请求，并发送json数据；通过前端的传递的数据，后端对应的接口可以通过传递的参数对用户行为进行记录。

四、总结

本章节通过介绍前端和后端的交互，让我明白了整个推荐系统的运行模式，同时了解遇到什么样的问题应该找哪一块才能得到解决。