前言: 經過差不多半年的開發,搭建從前端到服務器,實現了前后端分離的一個集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.7、圖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聚合博客