ISSN 1009-3044 Vol.16, No.9, March . 2020 第16 卷第9 期 (2020 年3 月) ComputerKnowledgeandTechnology电脑知识与技术 xsjl@dnzs.net.cn //www.dnzs.net.cn +86-551-65690963 65690964 ComputerKnowledgeandTechnology电脑知识与技术 E-mail http Tel ： ： ： 基于Node.js 多人博客系统的设计与实现 李嘉明 （华南理工大学广州学院 计算机工程学院，广东 广州 ） 510800 Node.js Koa.js+sequlize+mysql single page application SPA 摘要：基于 栈为 （ 平台，开发一套风格简约、性能优异的多人博客系统。前端技术栈为 ，后端技术 ，富文本编辑器采用与 完成，是典型的 ）。功能模块包括用户、文章、分类搜索三大模块，用户分为访客、博主、管理员，不同身份的用户 ，路由的切换由 深度集成的 Vue mavon-editor Vue.js+vue-router+iView vue-router 对文章具有不同的操作权限，分类搜索模块有助于用户精准地查询感兴趣的文章，节省用户搜索知识的时间。 mavon-editor Koa.js Vue.js Node.js TP311 A 1009-3044(2020)09-0071-02 文献标识码： ； ； ； 关键词： 中图分类号： 文章编号： SPA ； ；分类 开放科学（资源服务）标识码（ ）： OSID （ DOI:10.14004/j.cnki.ckt.2020.1013 Design and Implementation of Multi Person Blog System Based on Node.js LI Jia-ming Guangzhou College of South China University of Technology, Guangzhou 510800, China Abstract: Based on node.js platform, a set of multi person blog system with simple style and excellent performance is developed. The front-end technology stack is Vue.js + vue- router + iView, and the back-end technology stack is koa.js + sequlize + mysql. The rich text editor uses the mavon-editor which is deeply integrated with Vue. The route switching is completed by vue-router, which is a typical SPA. The function module includes three modules: user, article and classified search. Users are divided into visi⁃ tors, bloggers and administrators. Users with different identities have different operation rights to articles. The classified search module helps users to accurately query interested articles and save time for searching knowledge. Key words: node.js; vue.js; koa.js; mavon-editor; SPA; classification ） 1 背景 [2] [7] [1] 随着知识经济时代的到来，知识已经日渐成为个人、企业、 。互联网烦琐冗余的知识碎片难免令人 国家发展的核心力量 感到晕眩和焦虑 ，这是对知识缺乏筛选造成的，缺乏一个快捷 方便的工具，去收集整理某领域实用的知识或经验。同时，一 部分人渴望能有一个平台记录、分享学习或工作中的知识 ，博 客系统应运而生。然而，国内外众多博客系统较为臃肿，充斥 着许多与文章主题无关的元素。人们对功能和效率的追求逐 [8] ，为用户打造简约、高性 渐提高，对网络博客的文章也是如此 能的博客系统具有重要意义。本文基于 开发了一套风 格简约的多人博客系统，旨在为用户提供精简记录、分享知识 的平台，并且通过细粒度的标签分类和关键字搜索，用户能够 快速、精准地获取到感兴趣的知识，节省用户的时间。 2 技术选型 2.1 Node.js Node.js Chrome V8 Node.js 境，被设计用来构建可伸缩的网络应用程序。 驱动、非阻塞 运行时环 使用事件 模型而得以轻量和高效，非常适合在分布式设 JavaScript Node.js 是一个基于 引擎的 I/O Node package manag⁃ npm Node.js er Node.js ）是 npm 的包管理器，解决了 备上运行数据密集型的实时应用。 （ 平台上代码部署的诸 命令可以方便地下载、安装、卸载、升级、查询 应用，还能统一前 Node.js Web 多问题，通过 第三方软件包。在 后端开发的编程语言，减少开发者的学习成本。 平台上开发 Ja⁃ 2.2 Vue.jsVue.js vascript vue ，简称 ，是一套专注于构建用户界面的渐进式 vue [6] 。 vue web 框架，具有高性能、灵活性强的特点 vue DOM DOM 遵循渐进增 量的设计原则，使其可以方便地集成到现有的项目中，这一特 性使得 既可以快速构建出较小的原型，也可以构建出复杂 的核心功能之一，响应式的数据系 的大型 应用。作为 引擎，自动、高效更新用户界面， 统，能通过轻量式的虚拟 避免以往命令式操作 所带来的弊端，简化前端开发的流 程和开发效率，同时大大提高了系统后期的可维护性。 2.3 Koa.js web web 后台框架选用 平台的下一代 开发框架，致力于成为一个更小、更富有表现力、更健壮的 应用，可以避免烦琐的回调函数嵌 框架。使用 Koa.js Koa.js web Node.js 是基于 koa 编写 ， 套，并极大地提升错误处理的效率。 收稿日期：2020-02-05 作者简介：李嘉明（1993—），男，广东梅州人，助教，硕士，主要研究方向为物联网、软件工程。 本栏目责任编辑：谢媛媛 软件设计开发 71 

ComputerKnowledgeandTechnology电脑知识与技术 第16 卷第9 期 (2020 年3 月) 3 系统设计 3 3 1 2 3 大功能模块。 本系统含有用户、文章、分类搜索等 ）用户模块：访问本系统的用户具有 种身份，分别是访 客、博主、管理员。其中，访客是指没有在该系统注册过的用 户，访客进入系统后，对网站内的文章仅有浏览权限，能够正常 使用分类搜索功能检索文章。博主是指使用注册过的账号登 录本系统，注册账号时需要输入用户名、密码以及有效的邮箱， 三者均为必填项，博主除了能浏览所有文章之外，还具备新增 文章、对文章进行点赞的功能。管理员具有最高权限，除了具 备博主的所有功能外，还能发出公告、对分类标签进行管理。 ）文章模块：文章模块主要用于对执行文章的增删改查操 作，一篇文章所具有的属性有 、标题、标题、作者、简介、封面、 内容、浏览数、点赞数、分类标签。其中封面指的是显示在主页 文章列表中的图片，用于增强文章吸引力，浏览数和点赞数用 于甄别文章质量的高低，同一用户对同一篇文章只能点赞一 次，访客不具备点赞功能，分类标签是给文章指定一个类别。 新增文章时，文章作者自动成为博主的用户名，无法更改，文章 标题、简介、内容是必填项，分类标签是必选项，均不能为空。 博主只能对自己发表的文章进行修改和删除，而不能修改或删 除其他博主的文章。 id ）分类搜索模块：分类搜索模块可进一步拆分为分类标签 子模块和关键字搜索子模块。其中，分类标签子模块是将文章 分门别类的一个指标，在每篇文章生成时，都需要选定有且仅 有一个的分类标签，用于将这篇文章归属到某个领域，方便对 该领域感兴趣的用户可以快速查询到相关的文章。关键字搜 索子模块是在搜索框中输入文章的关键字，后端获取到该关键 字后，在数据库中执行模糊查询，标题含有相应关键字的文章 会从数据库中取出，然后将这些文章渲染到首页的文章列表。 分类标签和关键字搜索两个子模块可同时生效，即同时满足两 个条件的文章才会呈现在用户面前，因此提供了一种更精确的 搜索方法，为用户查找节省时间。 4 核心模块实现 4.1 富文本编辑器 Office Word Vue 富文本编辑器（ mavon-editor mavon-editor ）是一种可内嵌于浏览器， 的编辑功 所见即所得的文本编辑器，提供了类似于 语法，也能轻松地在网页中编辑自 能，用户不需要掌握 富文本编辑 己的文章。本系统选用基于 后，界面主体分为左右两部分，左边是支 器，引入 持 语法书写的文本内容，右边是对应生成的网页上 展示的内容，用户能实时预览书写的内容在网页上实际展现的 效果。通过在 ”，实 组件中的数据变量双向绑定，将该变量通过 现文章内容与 mavon-editor vue markdown v-model 标签中添加 vue 指令“ 的 Rich Text Editor HTML ma⁃ axios von-editor $imgAdd mavon-editor 存入数据库，实现文章内容的永久存储。除此之外， $imgAdd 还内嵌有许多实用的事件方法，比如点击工具栏中 ”方法，开发者通过重写 ”方法实现文章内图片的上传。图片上传成功后，由 会记录图片在文章中的位置信息，开发者只需 ，无需操心如何将图片放置在文章 会在插入图片的位置自动生成图片 的上传图片时，会自动触发“ “ 于 专注于获取正确的图片 对应的地方， 等信息。 的 url mavon-editor url 72 软件设计开发 4.2 路由模块 Web url http http 路由就是根据不同的 应用，页面的切换是通过向后端发送 地址展示不同的内容或页面。传 请求，后端 统的 请求后跳转到新的页面，此过程会刷新浏览器页 路由处理 面，造成重复请求不同页面中相同的静态资源的现象，在用户 并发量大或是网络延迟大的场合，用户体验差。而在 应用 中，页面的切换是通过前端路由来实现，渲染新页面的动态数 据由前端向后端发送 请求获得，此过程并不会刷新浏览器 页面。这也是单页应用的核心：更新视图而不重新请求页面， 加载页面时只更新某个指定的容器中的内容。在 应用中， 用户所有的操作都是在同一个页面中完成，共享资源只需要请 求一次即可，用户体验较好。 SPA SPA ajax vue-router vue.js （ 在 是与 ，减少 API URL 脚手架生成的 http vue vue-router SPA HTML5 vue-cli4 router/index.js Application Programming Interface 深度集成的路由插件，用于设定访问 路径，并将路径和组件映射起来。传统的页面应用，是使用超 应用中， 链接来实现页面的切换和跳转的，而 负责路径的切换，也就是组件的切换。结合 中新增的 ），可以实现在不刷新页 请求，提高用户体 面的情况下，动态改变页面的 项目，路由的配置在 验。对于使用 中完成，指定不同路径所对应的组 根目录下的 件，实现全局路由的跳转配置。可在每一项中添加 属性， 用于保存每个路径携带的额外信息，比如切换到该路径时是否 需要校验用户权限、将浏览器标题为 中指定的字符串等。 此外，还能通过路由钩子函数 在跳转到对应页面之 前进行拦截，判断当前用户是否可以访问该页面，如果权限不 够，则不展示该路径的内容，并重新定位到另一页面，提示用户 无访问权限。 4.3 对象关系映射 meta beforeEach meta Object-Relational Mapping 型数据库的表结构映射到对象上，是对 读写 护的 ）框架，其作用在于把关系 语句的封装，通过 对象的方式操作数据库，优雅地生成安全、可维 功能强大的异步 等多 、 后端数据库的存储接口，避免 PostgreSQL nodejs MySQL, SQLite Sequelize 框架，同时支持 MSSQL 是一款基于 ORM 代码。 、 SQL Node.js （ ORM JavaScript SQL 语句，提高了开发效率。 SQL 种数据库，非常适合作为 直接操作烦琐的 5 结束语 Node.js SPA 本文主要从相关技术、系统设计、核心模块实现这三个方 平台多人博客系统的开发设计 面，详细地阐述了基于 工作。本系统是典型的 ，当页面切换时，浏览器无须刷新 页面请求相同的静态资源，大大提升了用户体验，为用户提供 了快速便捷的归纳、整理知识的工具，同时也为不同的用户架 起了分享知识、经验的桥梁。 参考文献： . [1] , 2011. , , [2] App [J]. . [3] , [J]. , [4] . , 2019(42): 61, 63. , 2017, 16(9): 126-129. 基于知识共享协议的数字作品分享平台设计 黄宜修 江大学 柳艳 以某 钱磊 与实现 柳志强 陕粉丽 电脑知识与技术 . , 2017, 13(13): 69-70. 软件公司知识分享系统的设计与实现 知识分享平台盈利模式研究—— 马毓联 为例 宁少淳 的聊天系统的设计与实现 等 营销界 NodeJS 软件导刊 [D]. 马禹晨 [J]. 基于 杭州 浙 : , （下转第75页） 本栏目责任编辑：谢媛媛 

第16 卷第9 期 (2020 年3 月) ComputerKnowledgeandTechnology电脑知识与技术 算机软件的升级管理工作，科学合理的研发管理体系能够确保 计算机现代化软件工程系统高效运转，需要贯穿于整个软件开 发过程中，由设计到市场推广应用都需要做好合理安排。 5 小结 总而言之，在现代化发展过程中是以信息技术，网络技术， 计算机技术作为推动力的，也是与人们日常生活，社会经济发 展具有紧密联系，在当前新形式背景下只有实现技术产品创 新，才能够确保社会实现可持续性发展。在本研究中，通过对 目前国内计算机软件工程技术发展进行深入研究，针对其存在 （上接第67页） 4 结束语 基于 Unity3D 技术的综合布线虚拟仿真实验系统具有开放 性、灵活性、可靠性和模块化的特点。综合布线虚拟仿真实验 系统使学生逼真地体验真实的实训场景，不存在任何安全隐 患，学生也可反复练习，有效地降低了实训成本。 参考文献: [1] . 李乃振 综合布线系统的现状与发展趋势 无线通信技 [J]. （上接第72页） [5] [6] [7] , [J]. . , 单玉刚 何锡浩 和实现 吕英华 渐进式 技术与软件工程 罗路腾 王贵鑫 基于 nodejs . JavaScript , 2019(22): 39-40. . Springboot 框架 基于 电脑知识与技术 Vue.js , 2019, 15(36): 198-200. 的校园智能视频监控系统设计 [J]. 的全家桶应用 电子 的博客网站的设计与实现 计算机软件工程的现代化技术研究 建筑工程技 浅谈计算机科学与技术的现代化运用 电子制作 [J]. [J]. , ,2017(3). 的问题提出了有效的解决措施。 参考文献: [1] . 徐泽昊 . [2] 术与设计 任书淼 [3] . 2017(2):39-40. [J]. 辛宇骁 ,2019,303(3):36. 信息系统工程 电子信息工程现代化技术存在的问题及对策研究 【通联编辑：唐一东】 , 2014, 23(1): 52-55. [J]. . . 术 刘振海 研究 田明山 识与技术 , 2017(13): 49-50. 基于虚拟现实技术的网络综合布线实验室设计与 江苏科技信息 综合布线虚拟仿真实验室的研究与设计 , 2016(11): 239-240. 电脑知 [J]. 【通联编辑：谢媛媛】 [J]. 科学技术创新 . Node.JS , [J]. , 2016. , 邹竞莹 大学 王璐 研究与实现 崔保磊 , 2019(33): 64-66. [D]. : 博客系统的设计与实现 哈尔滨 黑龙江 , . 等 潘红霞 信息技术与信息化 基于 Vue.js , 2019(11): 168-170. 的在线设计开放平台 【通联编辑：谢媛媛】 [2] [3] [8] [9] 本栏目责任编辑：谢媛媛 软件设计开发 75