drf+xadmin+react+dva+react-native+sentry+nginx 搭建前后端分离的博客完整平台

[10086XIAOZHANG]

前言: 经过差不多半年的开发,搭建从前端到服务器,实现了前后端分离的一个集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聚合博客

6.2工作展望

从此次实现的功能来看，还存在一些可改进的地方。比如，扩大使用运用情感化设计理念设计页面，对“CP聚合博客平台界面”进行再优化，让用户在使用CP社团平台的同时也能同时让视觉得到一种美的享受。管理CP聚合博客平台，收集用户习惯，从用户浏览量、点击量、下载量等数据中进行数据分析，提供更多的好的博客文章给用户，并从博客文章动态推荐、社团新闻，通过筛选和排序，得到几条博客新闻，为用户进行个性化推荐，例如使用协同过滤、热文推荐和用户聚类，有效提升转化率，新闻推荐数量增加，并使推荐比例上涨。优化获取有效数据的正则表达式，提高数据检索速度，提高用户体验。完善CP聚合博客公众号，和使用BootStrap对页面进行栅格系统（布局），是网站跨平台使用。日后在工作之余，我将会对这些不足之处逐一进行优化，相信能学到更多有用的知识。