• 图纸下载
  • 专业文献
  • 行业资料
  • 教育专区
  • 应用文书
  • 生活休闲
  • 杂文文章
  • 范文大全
  • 作文大全
  • 达达文库
  • 文档下载
  • 音乐视听
  • 创业致富
  • 体裁范文
  • 当前位置: 达达文档网 > 创业致富 > 正文

    基于Node.js多人博客系统的设计与实现

    时间:2020-10-30 15:10:41 来源:达达文档网 本文已影响 达达文档网手机站

    摘要:基于Node.js平台,开发一套风格简约、性能优异的多人博客系统。前端技术栈为Vue.j s+vue-router+iView,后端技术栈为Koa.js+sequlize+mysql,富文本编辑器采用与Vue深度集成的mavon-editor,路由的切换由vue-router完成,是典型的SPA( single page application)。功能模块包括用户、文章、分类搜索三大模块,用户分为访客、博主、管理员,不同身份的用户对文章具有不同的操作权限,分类搜索模块有助于用户精准地查询感兴趣的文章,节省用户搜索知识的时间。

    关键词:Node.js;Vue.js;Koa.js;mavon-editor;SPA;分类

    中图分类号:TP311 文献标识码:A

    文章编号:1009-3044(2020)09-0071-02

    1 背景

    随着知识经济时代的到来,知识已经日渐成为个人、企业、国家发展的核心力量[1]。互联网烦琐冗余的知识碎片难免令人感到晕眩和焦虑[2],这是对知识缺乏筛选造成的,缺乏一个快捷方便的工具,去收集整理某领域实用的知识或经验。同时,一部分人渴望能有一个平台记录、分享学习或工作中的知识[7],博客系统应运而生。然而,国内外众多博客系统较为臃肿,充斥着许多与文章主题无关的元素。人们对功能和效率的追求逐渐提高,对网络博客的文章也是如此[8],为用户打造简约、高性能的博客系统具有重要意义。本文基于Node.js开发了一套风格简约的多人博客系统,旨在为用户提供精简记录、分享知识的平台,并且通过细粒度的标签分类和关键字搜索,用户能够快速、精准地获取到感兴趣的知识,节省用户的时间。

    2 技术选型

    2.1 Node.js

    Node.js是一个基于Chrome V8引擎的JavaScript运行时环境,被设计用来构建可伸缩的网络应用程序。Node.js使用事件驱动、非阻塞1/0模型而得以轻量和高效,非常适合在分布式设备上运行数据密集型的实时应用。npm (Node package manag-er)是Node.js的包管理器,解决了Node.js平台上代码部署的诸多问题,通过npm命令可以方便地下载、安装、卸载、升级、查询第三方软件包。在Node.js平台上开发Web应用,还能统一前后端开发的编程语言,减少开发者的学习成本。

    2.2 Vue.js

    Vue.js,简称vue,是一套专注于构建用户界面的渐进式Ja-vascript框架,具有高性能、灵活性强的特点[6]。vue遵循渐进增量的设计原则,使其可以方便地集成到现有的项目中,这一特性使得vue既可以快速构建出較小的原型,也可以构建出复杂的大型web应用。作为vue的核心功能之一,响应式的数据系统,能通过轻量式的虚拟DOM引擎,自动、高效更新用户界面,避免以往命令式操作DOM所带来的弊端,简化前端开发的流程和开发效率,同时大大提高了系统后期的可维护性。

    2.3 Koa.js

    后台框架选用Koa.js,Koa.js是基于Node.js平台的下一代web开发框架,致力于成为一个更小、更富有表现力、更健壮的web框架。使用koa编写web应用,可以避免烦琐的回调函数嵌套,并极大地提升错误处理的效率。

    3 系统设计

    本系统含有用户、文章、分类搜索等3大功能模块。

    1)用户模块:访问本系统的用户具有3种身份,分别是访客、博主、管理员。其中,访客是指没有在该系统注册过的用户,访客进入系统后,对网站内的文章仅有浏览权限,能够正常使用分类搜索功能检索文章。博主是指使用注册过的账号登录本系统,注册账号时需要输入用户名、密码以及有效的邮箱,三者均为必填项,博主除了能浏览所有文章之外,还具备新增文章、对文章进行点赞的功能。管理员具有最高权限,除了具备博主的所有功能外,还能发出公告、对分类标签进行管理。

    2)文章模块:文章模块主要用于对执行文章的增删改查操作,一篇文章所具有的属性有id、标题、标题、作者、简介、封面、内容、浏览数、点赞数、分类标签。其中封面指的是显示在主页文章列表中的图片,用于增强文章吸引力,浏览数和点赞数用于甄别文章质量的高低,同一用户对同一篇文章只能点赞一次,访客不具备点赞功能,分类标签是给文章指定一个类别。新增文章时,文章作者自动成为博主的用户名,无法更改,文章标题、简介、内容是必填项,分类标签是必选项,均不能为空。博主只能对自己发表的文章进行修改和删除,而不能修改或删除其他博主的文章。

    3)分类搜索模块:分类搜索模块可进一步拆分为分类标签子模块和关键字搜索子模块。其中,分类标签子模块是将文章分门别类的一个指标,在每篇文章生成时,都需要选定有且仅有一个的分类标签,用于将这篇文章归属到某个领域,方便对该领域感兴趣的用户可以快速查询到相关的文章。关键字搜索子模块是在搜索框中输入文章的关键字,后端获取到该关键字后,在数据库中执行模糊查询,标题含有相应关键字的文章会从数据库中取出,然后将这些文章渲染到首页的文章列表。分类标签和关键字搜索两个子模块可同时生效,即同时满足两个条件的文章才会呈现在用户面前,因此提供了一种更精确的搜索方法,为用户查找节省时间。

    4 核心模块实现

    4.1 富文本编辑器

    富文本编辑器(Rich Text Editor)是一种可内嵌于浏览器,所见即所得的文本编辑器,提供了类似于Office Word的编辑功能,用户不需要掌握HTML语法,也能轻松地在网页中编辑自己的文章。本系统选用基于Vue的mavon-editor富文本编辑器,引入mavon-editor后,界面主体分为左右两部分,左边是支持markdown语法书写的文本内容,右边是对应生成的网页上展示的内容,用户能实时预览书写的内容在网页上实际展现的效果。通过在mavon-editor标签中添加vue指令“v-model”,实现文章内容与vue组件中的数据变量双向绑定,将该变量通过axios存人数据库,实现文章内容的永久存储。除此之外,ma-von-editor还内嵌有许多实用的事件方法,比如点击工具栏中的上传图片时,会自动触发“$imgAdd”方法,开发者通过重写“$imgAdd”方法实现文章内图片的上传。图片上传成功后,由于mavon-editor会记录图片在文章中的位置信息,开发者只需专注于获取正确的图片url,无需操心如何将图片放置在文章对应的地方,mavon-editor会在插入图片的位置自动生成图片的url等信息。

    4.2 路由模块

    路由就是根据不同的url地址展示不同的内容或页面。传统的Web应用,页面的切换是通过向后端发送http请求,后端路由处理http请求后跳转到新的页面,此过程会刷新浏览器页面,造成重复请求不同页面中相同的静态资源的现象,在用户并发量大或是网络延迟大的场合,用户体验差。而在SPA应用中,页面的切换是通过前端路由来实现,渲染新页面的动态数据由前端向后端发送aJax请求获得,此过程并不会刷新浏览器页面。这也是单页应用的核心:更新视图而不重新请求页面,加载页面时只更新某个指定的容器中的内容。在SPA应用中,用户所有的操作都是在同一个页面中完成,共享资源只需要请求一次即可,用户体验较好。

    vue-router是与vue.js深度集成的路由插件,用于设定访问路径,并将路径和组件映射起来。传统的页面应用,是使用超链接来实现页面的切换和跳转的,而vue-router在SPA应用中,负责路径的切换,也就是组件的切换。结合HTML5中新增的API(Application Programming Interface),可以实现在不刷新页面的情况下,动态改变页面的URL,减少http请求,提高用户体验。对于使用vue-cli4脚手架生成的vue项目,路由的配置在根目录下的router/index.js中完成,指定不同路径所对应的组件,实现全局路由的跳转配置。可在每一项中添加meta属性,用于保存每个路径携带的额外信息,比如切换到该路径时是否需要校验用户权限、将浏览器标题为meta中指定的字符串等。此外,还能通过路由钩子函数beforeEach在跳转到对应页面之前进行拦截,判断当前用户是否可以访问该页面,如果权限不够,则不展示该路径的内容,并重新定位到另一页面,提示用户无访问权限。

    4.3 对象关系映射

    ORM( Object-Relational Mapping)框架,其作用在于把關系型数据库的表结构映射到对象上,是对soL语句的封装,通过读写JavaScript对象的方式操作数据库,优雅地生成安全、可维护的soL代码。Sequelize是一款基于Node.js功能强大的异步ORM框架,同时支持PostgreSQL、MySQL,SQLite、MssoL等多种数据库,非常适合作为nodejs后端数据库的存储接口,避免直接操作烦琐的SQL语句,提高了开发效率。

    5 结束语

    本文主要从相关技术、系统设计、核心模块实现这三个方面,详细地阐述了基于Node.js平台多人博客系统的开发设计工作。本系统是典型的SPA,当页面切换时,浏览器无须刷新页面请求相同的静态资源,大大提升了用户体验,为用户提供了快速便捷的归纳、整理知识的工具,同时也为不同的用户架起了分享知识、经验的桥梁。

    参考文献:

    [1]黄宜修.软件公司知识分享系统的设计与实现[D].杭州:浙江大学,2011.

    [2]柳艳,马毓联,马禹晨,等,知识分享平台盈利模式研究——以某App为例【Jl.营销界,2019(42):
    61,63.

    [3]钱磊,宁少淳.基于知识共享协议的数字作品分享平台设计与实现【Jl.软件导刊,2017,16(9):
    126-129.

    [4]柳志强,陕粉丽.基于NodejS的聊天系统的设计与实现[Jl.电脑知识与技术,2017,13(13):
    69-70.

    [5]何锡浩,单玉刚.基于nodejs的校园智能视频监控系统设计和实现[J].电脑知识与技术,2019,15(36):
    198-200.

    [6]吕英华.渐进式JavaScript框架Vue.js的全家桶应用[J].电子技术与软件工程,2019(22):
    39-40.

    [7]罗路腾,王贵鑫.基于Springboot的博客网站的设计与实现[J].科学技术创新,2019(33):
    64-66.

    [8]邹竞莹.Node.JS博客系统的设计与实现[D].哈尔滨:黑龙江大学,2016.

    [9]王璐,崔保磊,潘红霞,等.基于Vue.js的在线设计开放平台研究与实现[J].信息技术与信息化,2019(11):
    168-170.

    【通联编辑:谢媛媛】

    作者简介:李嘉明(1993-),男,广东梅州人,助教,硕士,主要研究方向为物联网、软件工程。

    相关热词搜索: 设计 系统 博客

    • 生活居家
    • 情感人生
    • 社会财经
    • 文化
    • 职场
    • 教育
    • 电脑上网