论文总字数：18630字

目 录

1.绪论 1

1.1 选题的背景与意义 1

1.1.1 选题背景 1

1.1.2 选题意义 1

1.2 相关技术简介 2

1.2.1 编程语言基础 2

1.2.2 后端概述与架构 3

1.2.3开发环境 5

1.2.4 数据库 5

1.2.5 虚拟DOM 6

1.2.6 Swift 6

1.2.7 JSON传输格式 7

1.3开发环境和运行平台 7

2.软件分析和设计 8

2.1 系统分析 8

2.1.1 架构和设计模式分析 8

2.1.2 可行性分析 9

2.1.3 需求分析 9

2.2软件功能模块设计 10

3 数据结构设计 12

3.1 存储结构 12

3.1.1文章的存储结构 12

3.1.2 博客信息的存储结构 13

3.1.3 评论的存储结构 13

3.1.4 管理员用户的存储结构 14

3.2数据库表设计 14

4.框架的完整实现 16

4.1基础环境依赖 16

4.2 端口侦听和服务器搭建 17

4.3 路由和网络请求的处理 18

4.4 数据库的连接和请求封装 18

4.5 主题切换功能的实现 18

4.6 IM机器人自动化的实现 18

4.7 各模块的具体实现 19

4.7.1 博客信息模块 19

4.7.2 文章模块 20

4.7.3 markdown解析器的实现 22

4.7.4评论模块的实现 24

4.7.5 管理系统 25

4.8 动态部署和静态部署的实现 26

5.系统测试 26

结束语 27

参考文献 28

致谢 30

响应式博客框架的设计与实现

王志龙

摘要：随着互联网媒体的迅速发展，博客作为新的媒体平台迅速兴起。但目前搭建一个符合博主需求的自定义的博客过程非常冗长复杂，成为了这种新媒体发展的一大阻碍。本框架预期给希望搭建博客的博主一个易于在服务端创建博客程序的功能。框架基于B/S架构，代码逻辑遵循MVC模式，基于NodeJS和Express服务器框架开发，对富文本解析做了良好的支持。界面设计遵循响应式原则，适配各种大小的屏幕。博主可根据服务器环境完成动态或者静态配置，自定义主题进行二次开发，访客可浏览博客信息，博文列表及详情，发表评论。经测试，此框架配置灵活，适合博主快速搭建理想的博客平台。

关键词：博客；NodeJS；响应式；富文本

Design and Implementation of Responsive Blog Framework

Zhilong Wang

School of Computer and Software, NUIST, Nanjing, 210044, China

Abstract: With the rapid Internet media development, Blog rises quickly as a new media platform. But now it is very long and complicated to build a custom blog that meets the needs of bloggers, which has become a major obstacle to the development of this new media. This framework is expected to provide function that everyone can create blog program easily on server side for thoses who want to build a blog site. This framework based on B/S, and its code logic conform to MVC protocol, and it is using NodeJS and Express, it also supports rich text well.The user interface conforms to responsive principle and adapted various screen sizes. Each blogger can configure his blog program dynamicly or using static resourses according to his server environment, he can also use custom themes or develop based on this framework. Visitors can visit info, post list, post detail and give their comments. After testing, this framework has flexible configuration, so it is suitable for bloggers to create their ideal blog platform.

Keywords: Blog; NodeJS; Responsive; Rich Text;

1.绪论

1.1 选题的背景与意义

1.1.1 选题背景

近年来计算机技术发展迅速，尤其是互联网技术和相关企业兴起得十分快，博客开始成为互联网内容方向流行的新宠。博客作为一个内容的载体可以传播各种新的思想，新的讯息，表达博主的思想，彰显人格魅力，又可以作为一个内容的提供商，协助人们创造社会价值。更重要的是，博客打破了传统媒体的限制，做到了自由，博客可以聚集有相同兴趣爱好的人一起交流，碰撞思想，擦出灵感的火花。

根据互联网的数据，2012年仅中国博客和个人空间的用户数量就已经达到了3.7亿人^[1] ,经过近几年移动互联网的蓬勃发展，其具体数字已经难以想象。更早时候，在2004年美国总统大选中，博客就已经作为一种新媒体的形式存在，很大程度上影响了舆论的走向。并且在2007年美国学者的一项调查中显示^[2]，博客以0.87的公信力指数超越了门户网站的0.79.

中国当前的互联网环境处于一个变革的时期，各种互联网媒体处于寻求发展机遇的状态，因此造成了互联网信息一团混乱的现状，博客这种在国外已经取得很高成就的新媒体势必将取得发展的优势。据第37次中国网络发展状况数据统计^[3]，2016年初中国网民数量达到6.88亿。如此庞大的群体，人们获取的信息正确性不容忽视，博客应当在中国互联网发展中扮演重要角色。

1.1.2 选题意义

近年来计算机技术发展迅速，很多国外博客框架开始变得十分流行，而且其完善程度、质量在各个方面领先国内很多。甚至有一些企业借此形成了独特的商业模式，比如Wordpress，发展至今已经占据了博客框架份额的一半以上。而一些后起之秀，借用新技术的发展也在不停地追赶。比如Hugo, Hexo, Octpress, Ghost之类。这些框架凭借差异化的体验和与众不同的技术栈，也在此潮流中分得了一杯羹。

国外网络环境较好，后端服务相对完善，一个新博客框架的诞生到发展需要考虑的环境影响因素比较少，这些更促进了国外技术氛围的发展。而且开发者可以选用的云服务比较多，有可以完全自定义的VPS如AWS, Heroku, DidgitalOcean，也有非常集成的虚拟环境。除此之外个人信用系统很完善，网站无需备案，无需众多的接入流程。所以跑一遍搭建流程只是考验理解能力的事情，甚至，个人的博客成为衡量一个互联网从业者能力的标准。

反观国内计算机技术及互联网的发展相对较晚一点，博客的流行虽然不是这几年的事情，但是发展的程度也不高，很多人还在用十分集成的社交博客环境。国内优秀的博客框架作品有不少，但皆因相对较差的网络环境（如运营商劫持流量、非独立IP、众多的网络病毒等），十分繁琐的建站流程（从域名申请到备案成功需要半个月的时间），比较复杂的技术栈（需要搭建者精通的专业知识），限制因素比较多而没能发展起来。大多数技术从业者的博客仍借助于一些企业级的附属博客产品搭建，虽然比较统一，但是体验却差强人意。然而，更多的人发现国外的框架到国内更是水土不服，他们不会考虑国内高昂的主机成本，不会考虑域名的限制，不会考虑主机工具无法很好地集成，这些更加地提高了个人博客的搭建门槛。目前这种相对恶劣的情况亟待解决。

为了弥补中国传统博客框架的不足，设计开发一套响应式的博客框架是十分有意义的。本系统希望能够帮助每一个需要自己博客的人快速的搭建，随意发布，不再受国内相对差的网络环境的影响。并且提供相对完善的机制，在移动端也能获得比较好的浏览体验。最后，对于专业人士，还能基于本框架二次开发，添加各种各样个性的功能，以满足各种人群的需求。

1.2 相关技术简介

1.2.1 编程语言基础

NodeJS是以JavaScript为基础的一个向后端扩展的语言框架。相比JavaScript沙盒式的运行环境，NodeJS的能力要强大得多。它将一个Chrome V8的解释引擎引入到运行时中，C/C 作为基础的系统接口扩展，将JavaScript的能力扩展到了系统层面。此外，NodeJS官方提供了一个包管理器，目前NodeJS社区的开放源代码的第三方框架多达百万个，所以NodeJS是构建便捷工具的首选。

EJS模板引擎是一个以HTML5/CSS3 为基础，JavaScript为扩展的工具。它能够让前端页面在原有的基础上获得动态渲染的能力，更好地填充数据，不必每次去查询DOM结构，以提高其性能。

1.2.2 后端概述与架构

Express是一个简洁而灵活的NodeJS框架，它由IBM的一个技术团队研发建立。它具有很多其他Web框架不具有的特性：可以设置中间件来响应HTTP请求，定义路由表来执行不同的HTTP请求，向模板传递参数来渲染前端页面。

Express是一个B/S架构的服务端运行程序。它主要负责处理Browser端提交的HTTP请求，返回适合的内容形式，从而达到浏览的目的。B/S架构的整体模型结构图如图1-1所示。

图1-1 B/S结构图

Express的核心设计模式仍然遵循了MVC的设计模式。MVC作为最流行的设计形式很好的把业务逻辑、数据和界面代码进行分离组织。Model负责处理Express中数据的逻辑部分，负责在数据仓库中存取数据。视图是用来展示数据的界面部分，控制器可以处理用户操作产生的交互和逻辑，并且最终将数据传递给模型。MVC模型结构如图1-2所示。

图1-2 MVC结构图

设计模式只能很好的阐释局部代码的解决策略，为了更好地搭建整个框架，我们需要去了解整个Web应用的框架方案。将各种设计模式组合起来去设计一个更好的解决方案，做出一个更好的软件架构以解决问题。在软件概念模式中，“层”是一个很重要的概念，它是一系列处理相关事务的功能的集合。Express整体框架分为以下几层：操作系统层、核心服务层、网络层、解释层、视图层。其结构如图1-3 所示。

图1-3 Express架构图

系统层位于最下层，它是Unix操作系统的核心，包括了系统内核，它直接与硬件打交道，一般的开发不需要接触到这一层，但当遇到一些需要进行系统扩展的需求时，我们需要去了解系统层。

剩余内容已隐藏，请支付后下载全文，论文总字数：18630字

相关图片展示：