python drf+xadmin+react+dva+react-native+sentry+nginx 搭建先後端分離的博客完整平臺

前言: 通過差很少半年的開發,搭建從前端到服務器,實現了先後端分離的一個集PC端、移動端的多端應用,實屬不易,今天得空,好好寫篇文章,記錄這些天的成果.同時也作個分享.

演示網站地址: http://www.jimck.cn:8080

摘要

隨着多媒體信息化進程的日新月益的變化，手機、電腦等多媒體的普及，人們時時刻刻都跟信息化設備打交道,因而萌生了一個想法,打算弄個我的博客網站,集成新聞資訊,同時能夠經過移動APP去結合使用,方便快速查看我的博客以及相關我的資訊。

本系統後端是基於Django REST framework 開發,使用xadmin定製後臺管理系統,使用Sentry集中化日誌管理,上線到服務器中經過nginx的虛擬主機
端口轉發、靜態文件代理,同時也開發基於react native支持android和ios雙平臺的APP,苦於囊中羞澀,Ios沒法上架到store,最終開發了箇中小型在線的CP聚合博客服務平臺，並以此爲基點，打算運用社交網絡技術對博客平臺添加博客交友功能，造成一個以博客分享服務爲基礎的博客社交平臺，爲搭建具備可擴展性、多維度的博客平臺系統提供一我的性化的解決方案。本文主要研究的相關內容及主要成果以下：

（1）django綜合運用,其中包括settings配置、 url配置、 view編碼、 model設計、 modelform表單驗證、
templates模板、 django經常使用內置函數，以及通用的django開發庫。

（2）xadmin 搭建後臺管理系統，並根據用戶權限定製後臺功能，讓後臺管理更人性化。

（3）結合Sentry搭建了一個集中式日誌管理系統。它具有如下優勢：多項目，多用戶,界面友好,能夠配置異常出發規則，例如發送郵件(但因爲目前阿里雲服務器25端口沒法開通,這郵件服務功能沒法使用)。

(4) 基於React Native支持Android和iOS雙平臺,支持訂閱 50多種編程語言;
支持添加/刪除編程語言，並支持自定義它們的排序;
支持收藏喜歡的項目;支持多種顏色主題自由切換;支持搜索,並自持自定義訂閱關鍵字;支持分享,輕鬆將本身喜歡的項目分享給好友;網站支持markdown，筆記記錄方式編寫我的博客，同時可經過app去查看我的最新博客和最熱博客資訊；

(5) 在Docker中運行Node.js的Web應用,鏈接Mongo數據庫進行相關數據操做,提供Web API接口供APP調用

(6) 經過Github 版本控制管理項目

(7) 經過Github 版本控制管理項目

(8) 在Linux服務器中配置Nginx，實現反向代理

關鍵詞：React;React-Native;CP聚合博客;Docker;Koa2;Mangodb;博客生態圈;網站;Nginx;Github

項目地址:

前端: https://github.com/10086XIAOZHANG/CP-WEB-SOURCE-PlATFORM
後端: https://github.com/10086XIAOZHANG/CpWebSourcePlatform
移動端:https://github.com/10086XIAOZHANG/CpBlogApp

1.1 開發背景

隨着信息化時代的到來，計算機和網絡的使用日漸普及，管理信息化也成了必然的趨勢。因而想開發一款我的博客網站,打算記錄本身的日誌、以及博客文章、同時也提升本身的編程能力.

1.2 開發目的

人們對互動和管理的要求變得愈來愈高，固然，對網站的功能性需求也會愈來愈高。在浩瀚的網站中裏甄選出一款適合本身的網站平臺進行管理社團着實不是一件簡單的事情。由於數以萬計的各種網站給了咱們更多的選擇，但有時也由於功能過於繁瑣或過於簡單使人無所適從。

如今市面上的相似社團類網站也有很多，可是大多數網站功能形式和網站樣式都已經設定好，用戶只可以被動地去接受。所以，現在急需一個完備的我的博客平臺來爲本身提供便捷的服務，本網站平臺可實現博客編寫、博客發佈、瀏覽新聞資訊。

1.3 開發工具簡介

「CP聚合博客」在開發階段過程當中運用到的工具備以下：

1.MySQL （數據庫系統）

MySQL能夠組織管理任何數據。能夠將結構化、半結構化和非結構化文檔的數據直接存儲到數據庫中。能夠對數據進行查詢、搜索、同步、報告和分析之類的操做[1]，管理了數據信息。Sql
MySQL是一個具有徹底Web支持的數據庫產品，對數據進行復雜操做時，可使用數據庫存儲過程對數據化操做進行封裝，重複使用，挺高數據處理效率[1]。

2.PyCharm

PyCharm擁有通常IDE具有的功能，好比調試、語法高亮、Project管理、代碼跳轉、智能提示、自動完成、單元測試、版本控制另外，PyCharm還提供了一些很好的功能用於Django開發,結合了一些經常使用版本控制插件,很容易進行版本管理和開發.

3.WebStorm

使用Webstorm 很容易集成 Git、集成 Eslint,Webstorm很友好地提示報錯，能夠及時的改過來。註釋能夠嵌套註釋,能夠自動保存,很好地一款前端開發工具.

1.4 相關技術知識

1.4.1. 數據庫系統

數據庫系統是由數據庫和數據庫管理系統兩部分組成。其中數據庫是用來存儲數據所用的空間，這個空間中能夠存儲大量的信息，信息能夠是不一樣類型，信息每每以二進制的形式進行存儲。數據庫也能夠將數據庫當作一個存儲數據的容器，實際上數據庫是由不少的文件組成的，同時這些文件也存儲了大量數據信息。一個數據庫系統一般包括多個數據庫，而每一個數據庫又包含了必定量以必定格式存儲的數據集合。由最基本的元素組合成一筆數據叫記錄（Record），由相同性質的記錄組合在一塊兒叫表（Table），相關的表結合一塊兒叫作數據庫（Database），處理數據的創建、查詢、更新等工做的程序就叫作數據庫管理系統（Database
Management
System，DBMS）。數據庫管理系統是用來管理數據庫的軟件，同時也須要經過它進行數據庫的維護和管理。

第2章 可行性分析

2.1 技術可行性

隨着前端技術的不斷髮展，前端框架的日益豐富，Html頁面內容形式也日趨多樣化，所以有利於Html網頁的開發。

用戶密碼及其重要數據在數據庫中的存儲應以密文的形式進行存儲，這可使用存儲前加密，使用前解密的方式進行數據的加工[11]。

阿里雲的服務器在前沿的高性能計算也有較好的支持。近年來，騰訊推出了高性能異構計算基礎設施，也能快速地在阿里雲服務器上搭建服務器實現網站的線上部署。

2.2 經濟可行性

隨着HTML5的不斷普及，其中網站佔了絕大部分市場。2015 年
9月份，據網易科技報道，中國的瀏覽網頁的用戶量已達 60
億。由此可看出現在的網站功能實現性價比廣泛較高，網站與安卓內嵌系統受到了極多用戶的好評，這樣使得網站應用開發有着廣闊的發展前景.

2.3 推廣可行性

開發這個CP聚合博客平臺，會從用戶的角度去考慮這個產品，會對項目作一個準確的定位。在經營這個項目時，會對網站邊推廣邊思考CP聚合博客平臺和別的社團網站有什麼不一樣之處進而對本身的CP聚合博客平臺的內容進行改進等，在推廣方面會放在微信公衆平臺和將網站進行搜索引擎收錄。

第3章 系統分析

3.1 系統功能結構設計

本網站存在普通用戶和社團用戶，具備【首頁】、【登陸/註冊】、【博客】等模塊.同時APP支持訂閱 50 多種編程語言;支持添加/刪除編程語言，並支持自定義它們的排序;支持收藏喜歡的項目;支持多種顏色主題自由切換;支持搜索,並自持自定義訂閱關鍵字;支持分享,輕鬆將本身喜歡的項目分享給好友;網站支持markdown，隨手記多種方式編寫我的博客，同時可經過app去查看我的最新博客和最熱博客資訊；

本CP社團平臺中的社團成員用戶中社團團支書用戶負責新加入的社團成員進行審批，所以增長了一個社團部門管理和審批通道，社團團支書用戶具備的模塊詳細請見圖3.3：

同時網站也集成了一些新聞API,經過相關新聞資訊.

第4章 數據庫設計

本系統數據庫名爲
CpWebSourcePlatform，其中使用到的表有：博客文章表，文章類別表，報名信息表，輪播文章信息表，短信驗證碼錶，用戶留言表，用戶評論表等等。採用
My Sql輕量量級數據庫
具備使用方即可伸縮性好與相關軟件集成程度高等優勢，可跨越從運Ubuntu
的大型多處理器的服務器等多種平臺使用。

4.1 數據庫結構概念設計

數據庫概念設計是使用E-R模型和視圖集成設計法進行設計的。它的設計
過程是：首先設計局部應用，再進行局部視圖設計，而後進行視圖集成獲得概念模型（全局E-R圖）。

4.2 系統表間關係

博客系統主要核心是與用戶打交道，用戶成爲衆多表中關係的核心紐帶，沒有用戶就沒有博客,而博客也一樣扮演者重要角色,其中也包括了博客評價、博客文章類別等等關聯.

第5章 模塊設計與實現

「CP聚合博客平臺」主要模塊有【網站主頁】模塊、【登陸/註冊】模塊、【新聞資訊】模塊、【Github項目】
模塊、【APP下載頁】模塊、【博客】模塊、【我的中心】模塊、【個人信息】模塊和【CP圈】模塊等等，其的設計與實現以下介紹：

5.1 【網站主頁】模塊

網站主頁的佈局：列出所須要的欄目及內容。其中包括導航欄還有一些新聞資訊。該模塊對應的界面如圖5.1所示：

圖5.1 【網站主頁】模塊部分界面圖

5.2 【登陸】模塊

登陸模塊主要包括網站用戶根據註冊而後完成登陸，同時支持第三方平臺登陸。模塊對應的界面如圖5.2所示：

圖5.2 【登陸】模塊界面圖

當用戶未進行登陸，想嘗試進入用戶登陸後的頁面，就會跳轉到用戶登陸的界面，用戶登陸界面如圖5.3所示：

圖5.3 【登陸】模塊界面圖

5.3 【註冊】模塊

註冊模塊包含用戶輸入的手機號碼（未註冊過）、以及密碼，和短信驗證碼進行用戶註冊，註冊模塊對應的界面圖如圖5.4所示：

圖5.4 【註冊】模塊界面圖

5.4 【博客】模塊

在博客模塊中,主要包括了本身的主頁,博客列表,歸檔管理、博客編寫等等.如圖5.5所示:

圖5.5 【博客】模塊部分界面圖

5.5 【APP應用】模塊

在APP下載模塊中,能夠下載對應app.如圖5.6所示:

圖5.6 【APP下載頁】模塊部分界面圖

APP的界面以下圖所示.如圖5.七、圖5.8 所示:

圖5.7 【APP下載頁】模塊部分界面圖

---

圖5.8 【APP下載頁】模塊部分界面圖

5.4 【後臺管理】模塊

後臺管理界面以下圖所示.如圖5.9 所示:

圖5.9 【後臺管理】模塊部分界面圖

5.6 【日誌管理】模塊

Sentry 日誌管理界面以下圖所示.如圖5.10 所示:

圖5.10 【日誌管理】模塊部分界面圖

第6章 總結和展望

6.1 本文總結

最後附上網站地址CP聚合博客

6.2工做展望

今後次實現的功能來看，還存在一些可改進的地方。好比，擴大使用運用情感化設計理念設計頁面，對「CP聚合博客平臺界面」進行再優化，讓用戶在使用CP社團平臺的同時也能同時讓視以爲到一種美的享受。管理CP聚合博客平臺，收集用戶習慣，從用戶瀏覽量、點擊量、下載量等數據中進行數據分析，提供更多的好的博客文章給用戶，並從博客文章動態推薦、社團新聞，經過篩選和排序，獲得幾條博客新聞，爲用戶進行個性化推薦，例如使用協同過濾、熱文推薦和用戶聚類，有效提高轉化率，新聞推薦數量增長，並使推薦比例上漲。優化獲取有效數據的正則表達式，提升數據檢索速度，提升用戶體驗。完善CP聚合博客公衆號，和使用BootStrap對頁面進行柵格系統（佈局），是網站跨平臺使用。往後在工做之餘，我將會對這些不足之處逐一進行優化，相信能學到更多有用的知識。