级基于多种交互技术的科研成果展示系统

中 第1章绪 科研成果展示系统开发背 研究现 本文的主要工 本文的组织结 第2章系统需求分 需求分析的方 系统的功能需 前端功能需 功能需求 系统的非功能需 第3章系统概要设 Jfinal框 功能流程设 系统架构设 第4章系统详细设 界面设 界面设计原 界面详细设 功能设 上传成 个人信 数据库设 第5章系统实现与测 系统实 我的收藏页的实 个人信息页的实 成果上传页的实 系统测 页面测 功能实现测 第6章结 致 参考文 附录1英文原 附录2译 基于多种交互技术的科研成果展示系中随着互联网技术日新月异的发展与广泛的应用建设已经深入到了社会示平台，从而无法更有效的服务其他的领域，也不能得到迅捷地。JAVA基于java语言的Jfinal开发框架并使用了Ajax异步传输MD5加密等技术，数据库使用Mysql进行管理，利用前后端分离开发方法，充分应用并展现了关键字：成果展示系统WiththerapiddevelopmentofInternettechnologyandthewiderangeapplications,constructionsiteshasbeendeepintoallaspectsofsociallife.Collegesanduniversitiesasanimportantpartofscientificresearchinstitutions,thenumberofannualoutputofconsiderableresearch,yedamainstayroleinourscienceandtechnologyandeconomicdevelopment.ButinthepastmanyschoolsdifferentCollegeresearchgenerallynotwellclassifyandorganizethelackofacomprehensivetformforthedisy,whichcannotbemoreeffectiveservicestootherareas,itcannotbequicktospread.Inthispaper,basedontheactualneedsoftoday'scollegesanduniversities,onthebasisofadetailedysisoftheneedsofthedesignofasetofuniversities'technologydisysystem,includingsystemdesign,detaileddesign,systemdevelopmentandcompletionofadetailedtest.ThesystemusesB/Sstructure,usingtheUnifiedModelingLanguage(UML)asthedescriptionlanguagedesign,usingJAVAlanguagetoinctwiththedisytocompletetheoperationdata.Thispaperdescribesthebackgroundmanagementfunctionstoachieve,including eofuploading alinformation,myfavorites,theresultsoftheaudit,usermanagement,institutionalsettingsandother alcentermodule.Theprojectinadditiontothesystemdesignandfullyfunctional,easytouseforuserstobuildasystemoutside,butalsotheuseofadvanceddesignconceptsandcutting-edgetechnologytodevelopsystemdesign.FrameworkadoptedJfinaldevelopmentframeworkbasedonjavalanguage,andtheuseofAjaxasynchronoustransmission,MD5encryptiontechnology,usingaMySQLdatabasestoragemanagement,theuseoffrontandrearendsseparationmethoddevelopment,anddemonstratedthefullapplicationofmodular,hierarchicaldesigneffectivelyshortenthedevelopmentcycle,andsignificantlyreducesthepotentialriskofinterferencebetweenthevariousmodulestoeachother,similartotheresultsshowthesystemdesignanddevelopmenttoprovideasolution.Keyword:Resultsdisysystem;B/S;1家大力鼓励创新与实用的今天高校的许多科研成果却总是因为而不能及中介机构机制的不健全是高校科研成果转化的重要原因。研究现要求满足网上项目申报、项目管理以及评估。借助互联网的普及，管理信息本文的主要工提供工业界的科研成果接收方的交流与推广需求具体而言即科研成果的发户、学校管理员与系统管理员这五类。其中游客可以浏览所有的展示成果、搜索进行成果或者相应院校的查找等功能，但不能收藏自己喜欢的成果，索相应之外，还可以对自己喜欢的科技成果或者学院进行收藏，并可以在个人中心里对已收藏的项目进行快速；教师用户除了可以浏览所有成果、搜索相应以及收藏成果之外，还有可以上传成果，并对自己上传的成果进行需求的挖掘，结合项目背景以及国内外研究现状，我们对该项目开发和研究UML建模、面向对象等多种思想，旨在使开发过程和 山东省高校科技成果展示系统的主框架采用Jfinal，主要考虑到Jfinal是一个轻量级Web应用框架与其使用简单的可以进行快速开发同时Jfinal框架可以实现很好的前后端分离开发，这极大地提高了前端与的开发效率，同时也使得前端与接口明确十分利于单元测试Jfinal使用MVC思想，减少了层次间的耦合，增加可扩展性。系统数据采用MySQL数据库，考虑 本文的组织结本文主要从以下几个进行论述第一章为绪论部分，首先介绍该的开发背景，然后介绍国内外类似网 主要功能设计,最后介绍数据库设计。技术，以及主要功能的实现细节。2需求分析的方JACKSON能之间存在的联系。考虑到以上特点，本文采用用例分析法。UML系统的功能需前端功能需展开顺序展开描述，默认以游客进行展开，需要登录的模块特别注明。2-12-1部。点击搜索后进入相应的搜索结果页面点击登录后进入登录页完成登录后登录/所在位置自动变为个人中心，显示用户名/退出，点击用户名相应的个人中心页，点击退出可以退出当前登录，并恢复登录/样式。轮播滚动图 自 2-22-2学院和发布人，右对齐，外部由英文中括号“[]”（图示不完全准确）包2-32-32-42-4页脚采用与导航栏同底色条形栏，居中对齐显示版本号 信息262-52-52-62-6次优先展示相关成果，每个成果一行，左侧为成果logo，右侧上部为2-72-7该页右侧为与首页相同的推荐高校和所有高校具体详见首页相关部分。以及成果名称成果简介成果成果所属学院与成果上传者信息。、、包括文字 、、 、所属院系、成 以及作者上传的附件。如图2-8所示2-87-1.用户登录后可以在感的成果展示页点击顶部的收藏按钮进行成果用户登录后可以在感的成果列表页顶部点击按钮收藏学院7-2. 校以及是否修改，点击提交即可对当前信息进行修改7-3.择成果名称、成果类型、、所属学校、所属学院、、成果简介、（富文本logo7-4.后面，审核可以点击通过或者，被的成果不予展示。7-5.管理员可以进行用户管理，待审核用户排面，审核后的用户排在后面，管理员可以通过或者普通用户是否可以成为教师用户对已审核的用户可以7-6.7-7.2-92-102-11。要面向游客、普通用户以及教师用户山东省高校科技成果展示系统进行用。名个人中心，点击退出即退出当前用户登录，并清除session数据2.2.2功能需1可 并发性是评价系统最多支持的用户量的指标。当多个用户系统时，CPU占有率过40%。3B/SJfinal框架进行程序开发，使用MySQL数据库对数据进行。下面详细介绍一下Jfinal框架。Jfinal框Jfinal框架是基于Java语言的极速WEB+ORM框架，其设计目标是开发迅速、代码量少、学习简单、功能强大、轻量级、易扩展、Restful。在拥有Javaruby、python、phpJFinalMVCCOCDb+RecordActiveRecordjavawebAOP支持，器配置灵活，功能强大Plugin多视图支持，支持Marker、JSP、Validatorstruts2体积小仅248K，且无第依赖JFinal采用微内核全方位扩展架构，全方位是指其扩展方式在空间上的表现形式。JFinal由Handler、Interceptor、Controller、Render、Plugin五大CommandJFinal3-13-1Jfinal根据角色和功能进行划分，本系统可以分为前台显示和管理两个部分。前台显示部分提供成果信息展示、编辑以及个人信息功能，主要供游客、普以为普通用户但只有在校教职工可以根据学校的学工号信息为教师用下面分两小节对前台和进行介绍。3-23-2下面介绍功能流程设计，成果进行审核后可标记为已审核或则不被展示出来。管理员还可以进，图3-3功能流程libLibraries模块。libjar包，src模块为主要模块，里面包含了本系统所构建的前台和的代码，ExternalLibraries模块用来存放各种要用到src模块内部包括java部分，resourceswebappjava部分包括了Jfinal框架的主体部分，主要用来解决的各项配置包括路由配置、数据库连接、文件上传等各类数据交互resources部分存放了所要用到的各种配置文件，包括了数据库连接信息、webapp部分包括了前端的所有html、css、JavaScript以及资源文件，也是程序运行的所在。4界面设界面设计Web应用系统，Web应用系统的界面设计实际就是网页设计，不同于传统的桌面应用程序，WebWeb程序展示系统在正式上线前已经通过了IE9IE10浏览器Firefox浏览器、360浏览器等主流浏览器的兼容性测试。航栏左列是正文显示版块这种布局的优势是可以整齐并有序显示的信息，界面详细。根据所述的界面设计原则，我们对本系统进行了设计为了区别于传统高校较为沉闷的设计风格，采用了活泼的撞色配色方案，选用蓝色与橙色为。个人中心页导航栏为右侧边栏显示了不同用户的不同权限可以进行的4-1所示。

4-14-2所示。4-24-3所示。4-3功能设上传成权限上传成果上传成果信息包括成果名称成果类型所属学校、所属学院、、成果简介、成果介绍、成果logo以及成果附件。用户/project_upload上传成果，首先根据登录信息判断用户类型，之后接收前 成功的提示。上传成果页时序图如图4-4所示。4-4个人信请求个人信息页时传入用户id包括用户名邮箱号码所属学院学工号数据库返回息并交由前端模板填充合成后显示在页面中当用户进行修改操作时先端id4-5所示。4-5数据库设别进行描述。成果表包括成果编号、成果名称、成果类型、成果、成果所属学校、成果所属学院、成果、成果简介、成果详细介绍、成果、logoid。其中成果编号是主键。id、成果所属学院、成果所属学校、成果所属类型通过4-64-12所示表为山东省高校科技成果展示系统成果表，用于记录用户上传的各类成果信息。在该表中有如下字段：成果编号id、成果名称p_projectname、成果类型p_projecttype、成果p_leader、成果所属学校p_school、成果所属学院p_college、成果p_tag、成果简介p_into、成果详细介绍p_content、成果p_time、成果是否通过审核p_ischecked、成果logop_logo以及成果上传者idp_user。4-74-7所示表为山东省高校科技成果展示系统用户表，用于记录各个用户的id，用户u_usernameu_passwordu_phoneu_nameu_teacheridu_typeu_collegeCollect，收藏的成果u_projectCollect。4-8学校官网s_website，所在城市s_city，具体地址s_address，s_phone，s_postnumber，学校LOGOs_logo，学校首字母s_letter。4-94-9所示表为山东省高校科技成果展示系统学院表，用于记录各个学院的基本信息。该表包括字段：学院编号id，学院名称c_name，c_phone，c_postnumber，所在城市c_city，详细地址c_address，学院简介c_intro，所属学校c_schoolid，学院首字母c_letter，学院类型c_type。4-104-10所示表为山东省高校科技成果展示系统成果类型表，用于记录不同的成果类型。该表包括字段：成果类型编号id，成果类型t_type。4-114-11所示表为山东省高校科技成果展示系统城市表，用于记录山东省各个城市名称。该表包括字段：城市编号id，城市名称city_name。5系统实。果以及个人中心作为辅助为前台提供支持。下面本系统中个人中心模块进。我的收藏页的实5-1所示。5-1function.geementById('projectDIV').className='m0p0bgf37543whw120bh40bd_nonetclh40lpoi';.geementById('collegeDIV').className='m0p0gf37545w120h40bb1f37543tclh40lpoi';}else.geementById('projectDIV').className='m0p0gf37545w120h40bb1f37543tclh40lpoi';.geementById('collegeDIV').className='m0p0bgf37543whw120bh40bd_nonetclh40lpoi';}}forfor(inti=0;i<str1.length;i++)JSONObjectobjJson1=newCollegecollege=College.me.findByIdLoadColumns(str1[i],"id,c_name,c_schoolid");objJson1.put("collegeName",college.getStr("c_name"));Stringschoolid1=college.getStr("c_schoolid");intschoolid=Integer.parseInt(schoolid1);objJson1.put("schoolid",schoolid);Schoolschool=School.me.findByIdLoadColumns(schoolid,"s_name,s_logo");objJson1.put("schoolName",school.getStr("s_name"));objJson1.put("schoolLogo",school.getStr("s_logo"));}个人信息页的实个人信息页用来给帮助用户修改时填写的个人信息包括用户名、5-2所示。5-2 return}elseif((password!="")&&(repassword=="")){return}elseif((password!="")&&(repassword!="")&&(repassword!=password)){return}elseif(myreturn}elseif(my!=""&&(my.indexOf("@")<1||(my.lastIndexOf(".")- alert("e-mail地址return}} 成果上传页的实果logo以及附件。点击提交按钮即可判断填写表单是否正确，若正确则上传至5-3所示。5-3project_upload.htmlfunctionvarurl:"/project/upload_res",dataType:'json', }publicpublicvoidUploadFileuf=getFile("Filedata");System.out.println("upload_res输出：文件上传");renderJson(Uitls.Ajax.success("上传成功",""));}系统测需求中各种功能。除了要测试系统功能的完整性和正确性，测试还需要保证系统的安全，避免软件测试的经典定义是：在规定的条件下对程序进行操作，以发现程序错误，衡量软件质量，并对页面测UI设计图相符合，同时不要出现杂色功能实现5-4所示。5-46求。在功能需求中按照功能进行展开描述，主要的功能包括成果、已收藏成果、具体成果展示、学校列表、学院列表、搜索、用户、用户登录、忘记找回教师用户申请与资格学校机构设置成果上传成果编辑、管理员管。非功能需求则对系统的可靠性、可用性、可性、并发性和性能提JfinalURL也为具体某个网页的造成了一定的阻碍因此后期会逐步完善本系统目前存在的问题，同时还可能会对已有功能进行进一步的扩展。在本文即将完成之际，回想本科阶段的学习生活，我衷心感谢我的导师他深厚的理论素养、渊博的知识、严谨的治学态度，极大地了我们，这一切都会让我们感动铭记和受益的在本科学习阶段老师对我的课程学习、 时应特别感谢与我并肩接近半年时间的同学没有相助我一个人[1],.基于JFinal框架的JavaWeb应用开发研究[J].电脑知识[2]高瞻,锁志海,等.基于JFinal框架的高校知识管理系统[J].现代计[3].基于Jifnal框架的呼吸疾病临床防治研究平台的设计[J].软件[4],,陈云霄等.Web2.0下基于WebGIS的旅游博客构建[J]南 [5].港博客管理系统的设计与实现[D].电子科技大[6].探究基于用户体验的互动展示的交互设计[J].艺术科 [7].基于用户体验的互动展示的交互设计研究[D].工业大[8],,等.Ajax引擎的原理和应用[J].微计算机信[9]吕,万经华,等.基于AJAX的Web无刷新页面快速更新数据方[10],,等.基于AJAX与J2EE的新型Web应用的设计与 任中方,,等.MVC模式研究的综述[J].计算机应用研陆荣幸,郁洲,等.J2EE平台上MVC设计模式的研究与实现[J]..用户界面设计研究[D].浙江大学,.基于HTML5的文件上传类设计[J].电脑知识与技.浅议CSS和JavaScript技术实现轮播[J].新经,,等.UML用例图在软件工程中的步骤设计研究[J].微1TheimpactofcolouronWebsiteappealandusers’cognitiveprocessesBonnardel,N.；Piolat,A.；LeBigot,Oneofthechallengestodayinhuman–computerinctionistodesignsystemsthatarenotonlyusablebutalsoappealingtousers.Inordertocontributetomeetthischallenge,ourgeneralobjectiveinthepresentstudywastoenhancecurrentunderstandingoftheperceptualfeaturesthatfavourusers’inctionswithWebsites.Thisisaparticularlyimportantissue,asusers’firstimpressionswhentheylandonasitedeterminewhetherornottheystayonit.Weconductedtwoexperimentalstudies,focusingononespecificperceptualfeature:Websitecolour.Thefirststudyinvestigateddesigners’andusers’preferredcoloursforaWebhomepage.Althoughresearchersgenerallyflagupdifferencesbetweendesignersandusers,wefoundthatthelatteralsohadseveralfavouritecoloursincommon.Onthebasisoftheseinitialresults,threecolourswereselectedforasecondstudyexploringcolourinrelationtoanentireWebsite.Themainoriginalityofthissecondstudylaysinthefactthatweusedbothsubjectiveandobjectivemeasurementstogaugetheimpactofcolour,yzingnotonlyusers’judgmentsbutalsotheirWebsitenavigationandtheitemsofinformationtheymemorized.ResultsofthissecondstudyshowedthatcolourswereadeterminingfactorinthewaythatusersinctedwiththeWebsite.Theirinfluencewasalsoobservedafterwards,whenuserswereaskedtoexploittheinformationtheyhadgleanedfromtheWebsite.Assuch,thesefindingswillhaveapracticalvalueforWebsiteColourappeal;Websitedesign;Navigation;User-centredTheimportanceofvisualperceptioninhuman–computerinction(HCI)haslongbeenacknowledged.Inthepast,authorsgenerallyadvocatedauser-centredapproach,puttingforwardergonomic mendations,or“goldenrules”.Thesemendationstendedtofocusonusers’cognitiveandperceptual-motorabilities,ratherthanonwhattheyfeltwheninctingwithasystem.Now,however,humansandtheirinctionswithsystemsareincreasinglybeingstudiedatthreedifferentlevels:knowing,ngandfeeling.Inrecentyears,the“feeling”levelhas eapopularresearchtopicincognitivescienceandthescienceofdesign,withadvancesinourunderstandingoffeelings,affectsandemotionshavingimplicationsforthelatter.Whendeveloproductsorsystems,designershavetocomeupwithdesignsolutionsthatarebothnovelandadaptedtotheirfutureusers.Thisadaptationtofutureusers passseveralcomplementaryaspects.Usabilityisnolongertheultimategoalfordesigners.Newsystemsmustalsohaveanaestheticvalueandinjectalittlefunandpleasureintopeople’slives.Inadditiontotheirfunctionalcharacteristics,inctivesystemsmustberegardedasconveyingfeelingsthroughvisualInthepresentstudy,wesoughttoenhancecurrentunderstandingofoneperceptualfeature,namelycolour,inatypeofinctivesystemwhereaestheticsandattractivenessconstituteaparticularchallenge:theWebsite.Here,users’initialfeelingsarecrucial,asitisduringthefirstfewsecondsofinctionthatusersor“visitors”decidewhetherornottocontinuenavigatingtheWebsite.Lindgaardetal.showedthatusers’firstimpressionsareconstructedinabout50msandappeartobestableovertime.TheyallowuserstodevelopanaestheticimpressionoftheWebpage,whichinfluencestheirsubsequentnavigation.Sincevisitors’preferencesarebasedontheWebsite’saestheticfeatures,ourobjectivewastoyzeoneparticularperceptualfeaturethatcontributesconsiderablytofirstimpressions:Websitecolour.Colourshavethepotentialtoaffectourperceptions,emotionalreactionsandbehaviouralintentions.However,littleresearchhasbeendoneontheimpactofcoloursinInternet-environmentsandonlyahandfulofresearchershaveconductedstudiesonthistopicin