基于Java的技术交流网站的设计与实现.docx
《基于Java的技术交流网站的设计与实现.docx》由会员分享，可在线阅读，更多相关《基于Java的技术交流网站的设计与实现.docx（19页珍藏版）》请在冰豆网上搜索。
基于Java的技术交流网站的设计与实现
基于Java的技术交流网站的设计与实现
摘要：
二十一世纪互联网飞速发展、Web技术也在各种领域应用广泛，现代社会对IT开发者的需求也更大。
Web产品的功能也愈发复杂、对相关技术人员的要求也越来越高，而技术人员在开发过程中难免会遇到各色棘手的问题，所以面向开发人员的技术交流网站应运而生。
由此决定使用Vue.js这个MVVM框架以及基于Vue.js的各种技术开发一个提供给互联网开发者的技术交流平台，和行业的Web开发者共同并肩交流学习。
该在线技术交流网站主要功能是用户可以浏览技术类文章，发表文章并对文章进行分类，对文章进行评论，以及对自己发表的文章的查找删除操作等。
技术交流网站的出现，使得开发者可以随时随地分享优质的技术内容，获取最新的行业资讯与IT技术干货。
关键词：
技术交流；论坛；Vue.js
Abstract:
Withtherapiddevelopmentoftheinternetandthewideapplicationofwebtechnologies,thedemandforinternetdevelopershasbecomelargerandlarger.Thefunctionsofwebproductsarealsobecomingincreasinglycomplicated,whichisaskingformoreskilledtechnicians.Butitisimpossiblefortechnicianstoavoidthedifficultiestheywillfaceintheprocessofdevelopment.Therefore,awebsitefortechnicianstocommunicatetechnologicalissueswitheachotherwasborn.Therefore,wedecidedtodevelopamoderntechnologicalcommunicationplatformunderMVVMframeworkslikeVue.jstocommunicate,study,andprogresstogetherwithotherrelatedwebdevelopers.Themainfunctionofthisonlinetechnologicalcommunicationplatformisenablinguserstobrowsertechnologicalarticles,publisharticlesanddistributethem,commentarticles,andresearchanddeletewhatusershasbeenpublished.Thepresenceoftechnologicalcommunicationwebsitesmakesitpossiblefordeveloperstosharesuperiortechnologies,acquirethelatestnewsandITtechnologydrygoods.
Keywords:
InternetDevelopers;BBS;Vue.js
摘要Ⅰ
AbstractⅠ
目录Ⅱ
1概述
1.1研究背景
在二十一世纪，各式各样的论坛如雨后春笋般的涌现，并且迅速的发展。
人们生活的方方面面都有与之相对应的论坛，在互联网的这个大背景下，每个人都可以在网上找到自己感兴趣的乌托邦，进而有相似爱好的人越来越多，这个圈子就变成了我们所说的——论坛。
并且各种功能网站也很喜欢开发自己的BBS，以此作为媒介促进网友之间的交流互动，增加在网站上的活跃度，网站的热度也会越来越高，内容也会越来越丰富。
对于论坛，根据其专业性可分为以下两个类：
（1）专题类——此类论坛相当于是综合类论坛的缩影，这种专注于一个领域的论坛，更能吸引更多有相同兴趣爱好，志同道合的人来分享交流。
这种专题类论坛对信息的分类整合和搜索的引擎查找是十分有益的。
并且专题性论坛在教学学术科研等领域有不可忽视的作用。
比如在有关于：
女性护肤品、各种动漫交流、体育赛事、开发者技术交流这样的专题性论坛里，我们可以在有关键字的区域快速的找到我们想要的相关信息。
而在专题类论坛里进行检索，更是缩小了用户的查找范围。
（2）综合类——综合范畴的论坛包含了更多的信息，更广泛，可以吸引大多数网民访问网站。
但是由于鱼与熊掌不可兼得，广便难于精，因此，这类论坛往往有无法完成所有细节和面面俱到的弊端。
虽然一般来说大型的网站有很高的活跃度以及雄厚的背景支撑，可以把网站的各个部分做得面面俱到，但是对于初创型、小规模的科技型公司，亦或者是个人记录型的博客网站，就会倾向于选择专题性的论坛，并把它做到小而美。
同时，论坛也有如下的几点特点：
（1）人气足——由于论坛与生俱来的交互能力，可以将互不熟悉的人的感情联络起来，尽管论坛只是个用于沟通、获取信息的工具，但久而久之，论坛上的人与人、人与网站之间容易产生一定的感情。
（2）UI设计简单精准——这个优点使用户从使用习惯、审美上更容易接受这种产品，只要他在论坛发过帖子，隔段时间一定会回来看，论坛一旦良好运转起来，用户依赖性将会非常高。
1.2研究目的
我想要开发的这个在线技术交流论坛是一个提供给互联网开发者，并用于分享自己技术学习心得的专题类移动端网站。
它有发表技术交流文章、分享心得、查看最新的技术文章、解决自己遇到的技术难题等功能点，而由于它是一个移动端项目，所以拥有网络实时、获取信息及时便捷、只要你有手机，你就可以很快的获得你想要知道的信息的特点。
由于我自身专业是软件工程，所以对相关技术信息的需求比较大，当遇到问题时我也会去各类论坛寻找答案，所以我认为专题类论坛的产生是非常有必要的。
2系统开发相关技术简介
在该项目前端部分使用的技术是HTML、LESS、Vue、Webpack、Vue-Router、Vux、Axios，后台部分使用SpringBoot、SpringMVC，数据库使用MySQL、Redis。
使用的开发工具有Webstorm、Postman、Navicat、Git、Npm。
2.1Vue
Vue.js是一套前端开发的渐进式框架，和其他重量级框架不同的是，它采用自底向上增量开发的设计,其核心只关注视图层，不仅易于上手，还便于与第三方JavaScript库或已有项目整合,另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue也完全能够为复杂的单页应用程序提供驱动[1]。
2.2Webpack
Webpack是一个前端的资源加载/打包工具,它将根据模块的依赖关系进行静态分析，然后把这些模块按照指定的规则生成相对应的静态资源[2]。
其大体运转过程，如下图2-1所示：
图2-1webpack工作原理图
从上图中我们可以看出，Webpack这个资源打包工具可以将多种静态资源HTML、JS、CSS、LESS转换成一个静态文件，减少页面的请求次数、可以大大提高页面的渲染性能。
它是一个现代JavaScript应用程序的静态模块打包器（modulebundler），当webpack处理应用程序时，它会递归地构建一个依赖关系图（dependencygraph），其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle[2]。
2.3Axios
Axios是一个前端HTTP，基于ES6promise，它可以用在浏览器和Node.js中，并且可以创建XMLHttpRequests，在浏览器中，它从Node.js创建http请求，同时支持PromiseAPI,可以拦截请求和响应，转换请求数据和响应数据，支持自动转换JSON数据、高效迅速等特点[7]。
2.4SpringBoot
SpringBoot是一个全新框架，由Pivotal团队提供，其设计目的是用来简化新Spring应用的初始搭建，以及其开发过程，该框架进行配置使用了一种特定的方式，从而使开发人员不再需要书写样板化的配置，通过这种方式，SpringBoot致力于成为领导者，在现在这个蓬勃发展的快速应用开发领域[3]。
2.5Redis
Redis是一个遵守BSD协议的，高性能的key-value数据库。
它有以下几个特点：
（1）支持数据的持久化，可以将内存中的数据保存在磁盘中，重启的时候可以再次加载进行使用；
（2）不仅仅支持简单的类型的数据，如key-value类型，同时还提供list，set，zset，hash等数据结构的存储；
（3）支持数据的备份，即master-slave模式的数据备份[4]。
3系统分析
3.1可行性分析
随着互联网的覆盖面越来越广，现代人更倾向于依赖一个交流网站——论坛。
各色的交流网站应运而生，不管是专业性的还是综合性、个人性的。
到现在，论坛已不仅仅只是一个交流的平台，更演变成了体现自身价值的一个荧幕，正是因为交流网站变得越来越重要，所以该网站的功能的也是更值得深思的，而一个好的技术交流网站的产生，更需要从设计这个层面来了解和分析。
对一个技术交流论坛而言，我们最熟悉的板块就是用户可以浏览网站中现有的内容，对他人发布的文章进行评论交流，也可以把自己的想法分享给他人，同时用户自己也可以发布文章，文章内容可以是技术求助，也可以是干货分享。
在进行这些操作之前，用户必须在此网站进行注册后登录方可使用。
为了更良好的用户体验，论坛也需要区分板块，文章需要有分类，此分类用于区分各种文字的内容范畴，方便用户快速查找定位，所以总体来说，交流网站的基本功能就是要实现用户信息的数据库表管理和发布的文章的数据库表管理，以及如何用更精良的用户体验把这些网页的操作关联起来。
3.1.1技术可行性
此网站采用Vue的SPA为开发技术，单页面应用可以使页面跳转更加流畅，同时避免拥塞，使得资源可以按需加载，用户体验更加良好。
所以本网站的设计流程是从网站的需求分析开始，确定网站的流程与设计，从模块的划分再到数据结构的设计，最后开始每个模块的代码编写工作。
3.1.2设计可行性
由于本网站是一个以技术交流为主题的分享交流平台，用户来到这里以获取信息为主要目的，所以网站的设计风格应该是以简洁，素雅为主，操作简单容易上手。
在具体的页面设计上，应该是要文字，图片，色彩并存，描述不同类型的文字应该有大小轻重之分，标题副标题正文之分，颜色要深浅搭配，文本文字和图片不能简略的罗列，否则会使页面乱七八糟，因此，要根据实际情况，将图片和文本依照一定的序次进行合理编排和布局，使它们结合成一个有机的整体，展现给阅读者。
3.1.3结论
综合以上各方面的详细可行性分析可以看出以及具备开发此技术交流网站的开发条件，只需要严格遵循上述的需求分析和可行性分析就可以很好的完成该技术交流网站的完整流程。
3.2系统功能需求设计
该网站具备了一个普通的论坛有的功能结构。
在权限管理上：
分为游客和会员，游客可以只能查看文章，查看会员信息，以及登录注册等操作，进行其他的比如评论发布文章等操作时会跳转到登录页面。
该网站的用户可以浏览文章、文章分类、发布文章、对正在查看的文章发表自己的评论，以及对评论进行评论（楼中楼评论），对自己发布的文章进行增加、删除、查找的操作。
并对用户头像、自我简介、性别等信息进行修改。
以下是该网站的用例图，如下图3-1所示：
图3-1网站用例图
（1）游客用户模块
当用户在没有登录的情况下浏览本网站，可以有以下几种基本操作功能：
查看文章：
游客可以在没有登录的情况下访问本网站现有的发布的所有文章，并进入文章查看该文章的评论情况。
搜索文章：
游客可以在网站首页、文章分类页输入关键字对本网站现有的文章进行检索。
查看会员信息：
游客可以通过文章的发布人看到发布者的主页，发布者主页上会出现其相关的信息。
登录/注册：
非会员用户（即游客）可以在本网站进行登录和注册以及浏览文章等操作，会员的权限在登录后即可拥有，同时也可以通过注册后登录的方式成为本网站的会员。
（2）会员用户模块
游客在本网站登录或注册并登录成功后，可以获得游客的所有操作的权限，同时还有以下几点操作权限：
发表文章和文章的增删查：
会员可以随意新增和技术有关的文章，同时可以对自己发表的文章进行删除、查找等操作。
对浏览的文章进行评论：
会员可以在文章的下方讨论区对该文章进行评论，内容不限，可以是自己对该问题不同观点，也可以是对相关技术向大牛进行求助。
我的用户中心：
用户在个人中心可以进行如下操作：
修改用户头像、修改个人简介、性别、出生年月。
4系统总体设计
4.1系统总体结构设计
该网站采用四层结构进行整体的系统架构设计，使得结构层次分明，可维护性较好，这四个层次分别是前端视图层、展示层、业务层、数据层[5]。
具体逻辑如下图4-1所示：
图4-1系统架构设计图
该网站的开发流程如下图4-2所示：
图4-2网站开发流程图
4.2数据库设计
以下为使用Mangodb数据库建立的表，如下表4.1所示：
表4.1数据库表
数据表名
表描述
user
用户信息表
article
文章信息表
comment
文章评论表
type_list
文章分类表
hot_article
热门文章表
4.2.1user用户信息表
以是user用户信息表，如下表4.2所示：
表4.2用户信息表
字段名
性质
字段描述
name
非空
用户名/邮箱
sex
非空
用户性别
imgUrl
非空
用户头像
password
非空
用户密码
4.2.2article文章信息表
文章信息表，如下表4.3所示：
表4.3文章信息表
字段名
性质
字段描述
id
唯一主键
文章唯一标识
name
非空
文章名称
tag
非空
文章类型
creat_time
非空
文章发布时间
create_name
非空
创建人姓名
author
非空
作者
content
非空
文章内容
comment_num
非空
文章评论数
author_img
非空
用户头像
4.2.3type_list文章分类表
文章分类表，如下表4.4所示：
表4.4文章分类表
字段名
性质
字段描述
id
唯一主键
分类唯一标识
Name
非空
类别名称
5系统详细设计与实现
5.1首页
首页比较简洁明了，用户可以看到今日的热门文章（按照评论数和阅读数综合排名），同时在顶部有个搜索框可以对全站的文章进行检索，页面如下图5-1所示：
图5-1首页
首页比较简洁明了，用户可以看到今日的热门文章（按照评论数和阅读数综合排名），同时在顶部有个搜索框可以对全站的文章进行检索。
每个热门文章的缩略图都有以下几个要素：
作者名称、作者头像、文章发表日期、文章标题、文章类别、文章的评论数，这样的排版可以有效的把信息传递给用户。
同时，点击每一个文章的头部信息栏可以跳转都该文章的详情内容页，在文章详情页面可以对该文章进行发表个人观点，评论等操作。
页面下方是固定的切换导航栏，用户可以自由在首页、分类、个人中心这三个模块之间切换。
首页的部分核心代码如下代码块所示：
importfunctionsfrom'@/functions/common'
importMainMenufrom'@/components/MainMenu'
importSearchPagefrom'@/components/SearchPage'
exportdefault{
components:
{MainMenu,SearchPage},
data（）{return{articleList:
[]}},
mounted（）{
functions.getAjax（'/datas/index-article-list.json',（data）=>{
this.articleList=data.content.articleList;}）;}}
5.2登录页面
网站的登录界面需要用户输入注册的手机号和登录密码，所有字段为必填，其页面如下图5-2所示：
图5-2登录页面
网站的登录界面需要用户输入注册的手机号和登录密码，所有字段为必填：
手机号为11位中国手机号，密码为至少6位的字符串。
若表单字段校验失败，则会提示用户不可进行登录操作，校验成功则可正常向后端请求接口，若登录失败则提示用户错误信息，登录成功则自动跳转至网站首页。
登录的流程图如下图5-3所示：
图5-3登录流程图
登录的校验截图如下图5-4所示：
图5-4登录校验图
登录页面主要代码如下：
import{Group,XInput}from'vux'
importDzHeaderfrom'@/components/Header'
importDzSubmitBtnfrom'@/components/SubmitBtn'
importdzfrom'@/functions/common'
exportdefault{
components:
{Group,XInput,DzSubmitBtn,DzHeader},
data（）{return{submitForm:
{mobile:
'',pwd:
''}}},
mounted:
function（）{
if（!
this.GLOBAL.userLogin）{return;}else{
this.$router.push（'/homepage'）}},
methods:
{
validatePwd:
function（value）{return{
valid:
value.length>=6,
msg:
'密码长度必须大于等于6位哦~'}},
beforeSubmit:
function（）{
varformDate=JSON.stringify（this.submitForm）;[6]
if（!
/^1\d{10}$/.test（this.submitForm.mobile））{
dz.toast（'手机号不可为空或格式错误!
','top'）;return;}
if（this.submitForm.pwd.length<6）{
/*判断密码字段存在并且不符合格式时报错*/
dz.toast（'密码长度必须大于或等于6位!
','top'）;
return;}returntrue;},
submitSuccess:
function（）{
dz.toast（'登录成功!
','top'）;
setTimeout（（）=>{window.location.href="/"
},1000）}}}
5.3注册页面
网站的注册页面如下图5-5所示：
图5-5注册页面
网站的注册步骤有两步：
第一步是要求用户输入注册手机号，验证手机号格式正确后方可发送手机验证码，用户接收到验证后进行填写，验证成功后进入下一步：
设置账户的登录密码，密码是长度最少为6位的字符串。
两个步骤均验证通过后即提示用户注册会员成功，并定时链接至用户登录页面进行登录。
注册的流程图如下图5-6所示：
图5-6注册流程图
注册页面的部分核心代码如下代码块所示：
model="signUpForm"class="sign-up-form-w">
before-submit="beforeSubmit":
submit-data="signUpForm":
submit-handler="submitSuccess"submit-form-ref="signUpForm"btn-text="注册"class="login-btn">
5.4个人中心页面
个人中心页面有如下几个功能点：
点击顶部的用户头像即可选择本机文件进行修改头像，修改个人资料（性别，个人简介，出生年月等信息），发布文章，查看自己发布过的文章，同时可以对文章进行删除，查找的操作，另外还可以注销登录，具体页面如下图5-7所示：
图5-7个人中心页面
个人中心的头部显示改用户的用户名和头像，点击头像即可更换用户头像。
个人中心页面的部分核心代码如下代码块所示：
importfunctionsfrom'@/functions/common'
import{Blur,Group,Cell}from'vux'
importMainMenufrom'@/components/MainMenu'
exportdefault{
name:
'',
components:
{MainMenu,Blur,Group,Cell},
data（）{
return{userInfo:
{}}
},
mounted（）{
functions.getAjax（'/datas/user-info.json',（data）=>{
this.userInfo=data.content.userInfo;
}）;
}
}
5.5文章详情页面
点击进入文章详情页面，在页面头部是文章发布者的头像和用户昵称以及该交流贴发布的时间，具体页面如下图5-8所示：
图5-8文章详情页面
文章标题放在比较显眼的位置，标题和内容比较松散，不会很紧凑，这样的排版回给用户比较舒服的体验，文章末尾处是该文章的类别标签。
详情页底部是有其他用户对该文章的讨论区。
文章详情的的部分核心代码如下代码块所示：
mounted（）{
functions.getAjax（'/datas/article-detail.json',（data）=>{
this.articleDeatil=data.content.articleDeatil;}）;
}
5.6文章评论页面
点击文章详情下方的评论区，可以看到其他用户对该文章的评论内容，以及其他用户对该条评论的评论（楼中楼评论），具体页面如下图5-9所示：
图5-9文章评论页面
评论展示的主要信息有：
评论人的用户名、头像、时间、评论内容。
页面整体风格简约，很容易就能看出
升级会员 