參考鏈接：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 推薦頁列表
該部分的主要邏輯是前端通過請求 "/recsys/rec_list" 接口，后端通過前端傳遞過來的用戶姓名，從數據庫中獲取用戶id，再根據用戶id去推薦服務(recsys_server)中獲取到推薦列表。
3.3 熱門推薦頁
熱門推薦頁部分，前端通過請求'/recsys/hot_list'接口，通過傳遞用戶姓名和當前頁號來獲取熱門新聞列表。主要的邏輯和獲取推薦頁相同，區別在于熱門新聞信息主要是通過推薦服務(recsys_server)中的get_hot_list()方法來獲取到熱門新聞推薦列表。
3.4 新聞詳情頁
該部分主要包含一些新聞的詳細信息，其中還有兩個按鈕，用于收集用戶的顯性反饋，用戶可以根據自己對該文章的喜好程度進行喜歡和收藏的反饋內容。
如果用戶對該新聞之前點擊過喜歡或收藏，再次點擊該新聞應該在喜歡或收藏按鈕應該是點亮狀態，因此還需要根據mysql中再次查詢用戶與該新聞是否存在記錄，并將結果返回給前端，將其進行點亮展示?？梢圆捎胠ikes和collections這兩個字段，通過True，False來判斷用戶對該文章之前是否點擊過喜歡或收藏。
3.5 用戶的行為
用戶在看新聞時主要會留下三種用戶行為：一是閱讀，即用戶在點擊一篇新聞的詳細頁時，用戶產生的行為；二是喜歡，在新聞詳情頁下面會存在喜歡按鈕，用戶可以通過點擊按鈕觸發系統記錄該行為；三是收藏，和喜歡行為同理，需要通過用戶主動的方式來觸發。
因此在用戶點進一篇新聞的詳情頁時候，前端會發送一個請求，并給后端傳遞一個json格式數據；在點擊喜歡或收藏按鈕的時候產生一個請求，并發送json數據；通過前端的傳遞的數據，后端對應的接口可以通過傳遞的參數對用戶行為進行記錄。
四、總結
本章節通過介紹前端和后端的交互，讓我明白了整個推薦系統的運行模式，同時了解遇到什么樣的問題應該找哪一塊才能得到解決。
