基于vue的摄影网站-毕业论文

2019届毕业设计（论文）系统实现摄影网站首页的实现这是摄影网站的首页，上面有一个轮播图，是采用swiper做的，一共是三张轮播图会轮播。然后在最上方居中的地方，有网站的logo，网站的名字，还有登录入口。其具体的摄影网站首页上部分实现图如图5.1所示。图5.1摄影网站首页上部分实现图摄影网站首页下方是摄影网站所有的图片，在图片左小角可以点击下载和收藏，直接左键点击图片可以新生成该图片的页面，看该图片的大图。在页面缩小的时候，图片会随着该页面的大小进行响应式布局，在页面变小的时候，会对应的出现一列或者两列。由于图片有限，所以做成了无限加载模式的瀑布流首页图片展示。采用了vue的一款插件，vue-waterfall-easy，这款插件的实现方式比对于另外的插件时，不需要在返回的数据里面限定图片的宽度和高度，所以适合这种不知道后台返回图片的高度的页面上。而且瀑布流相比传统网站的单一布局也十分好看。首先采用npm安装，接下来再import导入，在组件中注册。详细代码：importvueWaterfallEasyfrom'vue-waterfall-easy'exportdefault{name:'app',data(){return{imgsArr:[],group:0,//requestparam}},components:{vueWaterfallEasy},methods:{getData(){axios.get('./static/mock/data.json?group='+this.group).then(res=>{this.imgsArr=this.imgsArr.concat(res.data)this.group++})},},created(){this.getData()}}<vue-waterfall-easy:imgsArr="imgsArr"@scrollReachBottom="getData"></vue-waterfall-easy>其具体的摄影网站首页下半部分实现图如图5.2、5.3、5.4所示。图5.2摄影网站首页下半部分实现图图5.3摄影网站首页下半部分实现图图5.4摄影网站首页下半部分实现图用户登录界面的实现用户在首页点击登录之后可以进入登录页面，如果登录成功，可以进入自己的图片收藏页面，页面具有上传、登出等功能。在用户的登录页面，为了视觉上能有摄影网站的效果，采用了css3的新属性filter:blur(15px)，括号里面的值可以调整模糊度。其具体的摄影网站登录实现图如图5.5所示。图5.5摄影网站登录实现图在用户登录失败之后，进入登录失败页面，登录失败页面有两个动画效果和一个定时器定时跳转功能，两个动画效果由Animate.css提供。在进入的时候，文字从页面顶部落下来，然后经过5秒回到登录页面。在这个过程中，可以直接点击登录页回到登录页面，或者在4秒后，文字向下落，随着这个动画回到登录页面。详细代码：<div:class="[box,animated,bounceInDown]"><p>hhh~请重新登录~</p><p><strongid="shijian"ref="shijian">{{times}}</strong>秒后回到<router-linkto="/Login"class="logincolor">登录页</router-link></p></div>在改变变量bounceInDown时，使用watch来监控变量的变化，这时动画具体效果也随之改变。watch:{bounceInDown:function(newValue,oldValue){this.bounceInDown=newValue;}}其具体的摄影网站登录失败实现图如图5.6、5.7所示。图5.6摄影网站登录失败实现图图5.7摄影网站登录失败实现图收藏界面的实现在用户没有登录的时候，直接点击收藏会被判断为没有登录。已经收藏的会和还没有收藏的显示有略微的差异，在用户点击登录之后，就可以进行收藏操作，收藏之后，数据库会将对应的记录添加到收藏表中，进入个人收藏页面的时候，就可以直接看到收藏的图片。其具体的摄影网站收藏功能实现图如图5.8、5.9、5.10所示。图5.8摄影网站个人收藏实现图图5.9摄影网站个人收藏实现图图5.10摄影网站个人收藏实现图管理员登录界面的实现管理员登录的界面比起用户登录的界面要简单一些，在填入管理员账号和密码之后，拖动验证条，点击登录就可以进行登录操作。基本都是iview直接的使用，在登录界面有一个网站的logo，点击之后可以返回网站首页。验证条必须要进行验证，否则会弹出消息提醒该摄影网站的管理员没有进行验证。其具体的摄影网站管理员登录实现图如图5.11、5.12所示。图5.11摄影网站管理员登录界面实现图图5.12摄影网站管理员登录界面实现图管理员管理用户界面的实现摄影网站管理员的管理界面相对比较简洁。点击导出数据，可以直接在excel表中查看操作。方便于管理员类似文员的办公操作，在右边有搜索框，可以进行对应的搜索，快速定位用户，再对用户进行操作。最下方有分页按钮。管理员界面基本都是由iview的组件提供，因为管理员界面需要的简洁正好符合这些组件的样式。其具体的摄影网站管理员用户管理界面实现图如图5.13所示。图5.13摄影网站管理员管理用户实现图管理员在excel中查看导出表格实现图如图5.14所示。图5.14摄影网站管理员管理用户实现图其具体的摄影网站管理员用户管理搜索用户实现图如图5.15所示。图5.15摄影网站管理员管理用户实现图其具体的摄影网站管理员用户管理点击操作实现图如图5.16、5.17所示。图5.16摄影网站管理员管理用户实现图图5.17摄影网站管理员管理用户实现图其具体的摄影网站管理员用户管理点击添加实现图如图5.18所示。图5.18摄影网站管理员管理用户实现图其具体的摄影网站管理员用户管理点击删除，删除一条数据实现图如图5.19所示。图5.19摄影网站管理员管理用户实现图管理员管理图片界面的实现摄影网站的管理员能够在后端处理有关图片的相应的操作。类似于用户管理，可以进行操作，搜索，但是不能进行图片的上载，因为图片的上载是由用户实现的。管理员的首要作用是管理这些摄影的图片，然后删除违规的摄影图片。其具体的摄影网站管理员图片管理点击详情实现图如图5.20所示。图5.20摄影网站管理员管理用户实现图其具体的摄影网站管理员图片管理点击操作实现图如图5.21所示。图5.21摄影网站管理员管理用户实现图其具体的摄影网站管理员图片管理搜索实现图如图5.22所示。图5.22摄影网站管理员管理用户实现图其具体的摄影网站管理员图片管理分页实现图如图5.22所示。图5.23摄影网站管理员管理用户实现图本章小结本章分别从首页开始进行了一整个系统的流程的介绍。其中包括，摄影网站首页的实现、用户登录界面的实现、收藏界面的实现、管理员登录界面的实现、管理员管理用户界面的实现、管理员管理图片界面的实现。分别可以实现用户对摄影网站收藏下载上传等的需求。

总结与展望6.1总结从论文的题目确定开始，我就开始确定系统所要使用的前端和后台技术，前端的好确定，用vue，因为从最开始我就准备用vue来写。但是后台的技术一直不好确定，最初我是打算用node.js+mongoDB来写。很多人推荐向前端发展的人做后台使用node.js+mongoDB。但是后来的时候，遇到了一个比较纠结的问题，比较难以解决，就换了后台的技术。用了自己熟悉一些的技术，bootdatajpa这个是以java语言为基础的，算是熟悉一点。而且数据库也换成了mySql这也是自己熟悉一些的。经过这次毕设，学习到了很多东西，特别是自己从理论到实践这个过程中，明白了很多知识点。总的来说，从确定选题，到动手实践，这一路上会遇到很多问题。但是只要有克服困难的心，问题终究会被解决的。6.2展望摄影网站现在有很多，但是只要想进行原图片的无损下载，就会需要关注微信，或者需要收费，或者需要一些麻烦的操作。这都是十分复杂的，所以这个网站如果推荐成一个大型的分享平台，在未来，将会对于整个摄影界的发展都是有影响的。在国内推广以后，还可以向国外推广，把网站打造成一个走向国际的大型网站。来自各个国家的人一起进行摄影的艺术交流，还可以定期的举办一些活动，线上线下的活动，提高网站上人员的参与度。艺术重在交流，一个好的交流平台可以使整个摄影界发生质的改变。在进入到足够的层次之后，甚至很多大咖都是源于网站，这个时候可以邀请大咖进行分享，甚至举办一些比赛，提高大赛的含金量，吸引大众眼球，引进投资商进行投资。参考文献FernandoMonteiro.LearningSingleWebAppDevelopment，PacktPublishing-ebooksAccount，2017.朱二华.互科技与创新期刊，基于Vue.js的Web前端应用研究2017,(12):55-57.刘兴.机器人交互界面情感呈现系统的设计与实现，南京邮电大学，2018.王康.基于node.js及关联分析技术的水质在线监测系统开发，硕士论文，北方工业大学，2018.王翔;沈为;曾丹.基于Vue.js的智能超市导航系统，工业控制计算机，期刊，2018,(10)：15-17.RobertX.D.Hawkins.Conductingreal-timemultiplayerexperimentsontheweb，IndianaUniversity，2015.梁璞.某国税系统微信公众平台的设计与实现，西安工业大学，硕士论文，2017.RuiFerreira;RuiL.Aguiar;.Repositioningprivacyconcerns:WebserverscontrollingURLmetadata，UniversityofAveiroPortugal，2019.徐頔；朱广华；贾瑶.基于VueJs的WEB前端开发研究，科技风，期刊，2017,(3):50-52.Buasri,N,Janpan,T,Yamborisut,U,Wongsawang,D.Web-basedinteractivevirtualclassroomusingHTML5-basedtechnology， StudentProjectConference(ICT-ISPC)，2014,(5):33-35.刘欢.基于组件依赖的软件按需组装方法研究，西安电子科技大学，硕士论文，2018.焦映.西计电磁兼容与环境检测实验室管理系统分析与设计，重庆理工大学，硕士论文，2018.秦颖.基于混合云的石油企业移动管理平台的设计与实现，北京交通大学，硕士论文，2018.方晓玮；侯超钧.基于Web在线课堂问答统计系统的设计与实现，现代计算机(专业版),2018.郑娟娟.基于虚拟现实的某自行火炮模拟训练系统设计，南京邮电大学，硕士论文，2018.刘振国.基于WEB的企业信息交流平台的设计与实现，南京邮电大学，硕士论文，2018.YuanFENG,Xu-huiWANG,Jia-yuXIANG,Jian-weiZHANG,Wan-xingLI,Zeng-yuCAI.TheTrainingManagementSystemforCollegeStudentsBasedonJavaEE，2ndInternationalConferenceonInformationTechnologyandManagementEngineering，2017,66-67.王煜.熊掌号审核平台的设计与实现,北京交通大学，硕士论文，2018.宋晓晓.基于Ajax与MVC模式的短信业务综合管理系统，安徽工业大学，硕士论文，2018.全先灏.共享图书平台的研究与设计，青岛理工大学，硕士论文，2018.祁闻砚.移动终端的博物馆展示艺术研究，西安工程大学，硕士论文，2018.

2019届毕业设计（论文）致谢首先我要感谢信息工程学院的各位领导，因为他们给予了我一个良好的学习环境，同时也给了我继续深造的机会，最终让我成为了赵作斌教