基于vue的摄影展示平台前端设计与实现【字数：10876】
摘 要随着信息化的发展，从web2.0时代逐渐步入移动互联网时代，建立一个自适应全尺寸屏幕的项目具有实际意义。本研究主要针对摄影作品展示平台进行设计与开发，包括前期的探索准备，UI设计和前端开发阶段与总结等几个部分。前期主要对研究意义和市场现状进行分析，探索并确定研究方向，研究设计阶段主要利用Photoshop进行UI设计；后期主要基于Vue.js结合html、css、JavaScript、jQuery进行开发。该项目采用主流的Vue.js框架，Vue.js具有轻量级、渐进式、响应式等特点，项目数据采用json数据，并适配包括PC端、Pad端以及手机端等全尺寸显示终端。
目 录
摘要I
AbstractII
1. 绪论1
1.1 研究意义1
1.2 web前端国内外应用研究现状1
1.2.1国内研究现状1
1.2.2国外研究现状2
1.3 主要研究内容及研究思路2
1.3.1 主要研究内容2
1.3.2 研究思路2
2. 相关技术及开发环境概述3
2.1 HTML概述3
2.2 CSS概述3
2.3 JavaScript概述4
2.4 Vue.js概述4
2.5 photoshop概述5
2.6 Hbuilder概述5
3. 研究的需求分析及设计6
3.1 需求分析6
3.2 开发环境搭建7
3.3 UI设计9
4. 开发过程及测试14
4.1 开发过程14
4.2 测试过程18
5. 研究成果展示22
5.1 成果展示22
6. 总结26
6.1 总结26
参考文献27
致谢28
1． 绪论
1.1 研究意义
随着时代的发展，信息全球化和全球命运共同体的趋势不断上涨，互联网做为信息全球化和全球一体化的重要连接枢纽之一，近年来也得到飞速发展，从web1.0时代迈入web2.0时代，再进入如 *好棒文|www.hbsrm.com +Q: *351916072*
今的移动互联网时代，全球信息交流实现多个量级的飞跃，沟通交流方式也实现质的变化，互联网和移动互联网的告诉发展为生活添加了更多乐趣，为创业者和就业者提供了更多机会，将光与影结合的摄影艺术与互联网的进一步结合与完美融合，互联网+摄影成为新的突破口。
在时代的发展的背景下，摄影活动成为日常生活不可或缺的部分，但面临的问题也随之而来，众多的摄影作品只得在鱼龙混杂的各种社交平台上呈现，摄影初学者或摄影爱好者得不到良好的体验与交流，且社交软件和社交平台都会对发布的摄影作品进行一定程度的压缩，摄影作品的保真率直线下降。
在技术领域，随着技术的不断的不断发展，web应用的开发模式越来越多元化，技术的发展经历过静态页面，在运维方面给运维人员带来诸多不便；在动态网页时代，虽然在运营方面有了一定改进，但前端和后端穿插耦合，在网页改版方面还是略有不足；直至MVC与MVVC开发模式的出现，诸多问题才得以改善。在客户层面，随着技术进一步发展，在浏览的视觉感受，交互体验逐步提升。
因此，就该课题的研究意义主要有三点：首先，利用行业领先的主流前端开发框架，开发一款符合社会潮流、符合人性化设计的web应用具有先进意义。对开发人员而言，采用MVVC开发模式具有利用Vue.js的优秀特性，提高代码复用率和数据交互从而提高工作效率具有先进意义；其次，对web应用的受众，即广大用户群体而言，拥有一款改版方便，交互人性化，布局符合潮流审美的web应用，可得到更好的用户体验；最后，就本人个人而言，学习行业主流技术并设计开发一款web平台的前端，对大学四年的学习的知识具有检测的意义，也是将知识融汇运用的体现。在此阶段采用主流技术进行研究，对今后个人工作也具有实际帮助的意义。
1.2 web前端国内外应用研究现状
1.2.1 国内研究现状
国内传统企业在以往会采用将互联网模块外包给其他公司，从而获得相对比较优质的互联网服务且减少成本开支，采用这种方法通常可为公司在管理上和预算支配上节约成本，但是这种方式也是相对存在弊端，采用供应商提供的互联网方案形式相对比较单一，无法树立鲜明的企业形象和品牌形象，在用户体验上千篇一律。因此组件自己的技术团队成为必然。
国内前端开发研究目前正处于高速发展阶段，国内以百度、腾讯、阿里巴巴为首的知名互联网企业和以华为为代表的的传统企业为推动信息化发展进程做出巨大贡献。淘宝网的“淘宝UED”，百度旗下的“百度UFO”，腾讯的“ISD”和“CDC”等等。这些团队性质大都相似，以提高用户体验为第一目标。
在国家大力倡导企业自主研发的前提下，国内互联网发展趋势是建立具有品牌差异化的互联网产品。在前端领域，淘宝框架和饿了么框架成为前端从业者争相模仿的框架，优秀的互联网产品开始大量使用React.js、Angular.js和Vue.js等主流优秀前端框架。优秀的前端框架在web应用的开发商发挥着巨大的作用，二者的结合衍生的优秀解决方案正在进一步促进国内互联网信息化建设的道路不断发展。
1.2.2 国外研究现状
根调查显示，国外前端应用发展现状亦是在轻量级、模块化、响应式等方面大做文章，React.js软件是Facebook公司自主研发的软件项目它的前端框架设计都是采用传统的MVC模式进行设计的，但这传统的运行模式很难能够满足于Facebook公司的使用需求。由此可见，国外一众大型企业也正在逐渐脱离传统开发模式，往MVVC模式进行改革。
1.3 主要研究内容及研究思路
1.3.1 主要研究内容
（1）主要对本课题的研究背景、研究目的以及研究意义进行深入探讨，分析国内外发展现状，明确课题研究的意义以及课题研究可行性；
（2）明确相关技术，搭建课题研究环境和相关设计软件；
（3）对课题项目进行详细分析，统计用户需求并设计相关功能，实现UI图设计；
（4）利用所搭建的环境对UI设计稿进行项目实施、测试；
（5）课题研究成果展示，主要通过项目截图和代码进行展示；
（6）对所研究的课题进行总结与展望。
1.3.2 研究思路
根据所确定的研究内容，本课题的研究思路主要分为前中后三个阶段。前期进行资料查阅和相关技术环境搭建，市场调研分析；中期进行项目实施，收集素材并设计UI稿，进行实时项目；后期进行项目测试与总结；
目 录
摘要I
AbstractII
1. 绪论1
1.1 研究意义1
1.2 web前端国内外应用研究现状1
1.2.1国内研究现状1
1.2.2国外研究现状2
1.3 主要研究内容及研究思路2
1.3.1 主要研究内容2
1.3.2 研究思路2
2. 相关技术及开发环境概述3
2.1 HTML概述3
2.2 CSS概述3
2.3 JavaScript概述4
2.4 Vue.js概述4
2.5 photoshop概述5
2.6 Hbuilder概述5
3. 研究的需求分析及设计6
3.1 需求分析6
3.2 开发环境搭建7
3.3 UI设计9
4. 开发过程及测试14
4.1 开发过程14
4.2 测试过程18
5. 研究成果展示22
5.1 成果展示22
6. 总结26
6.1 总结26
参考文献27
致谢28
1． 绪论
1.1 研究意义
随着时代的发展，信息全球化和全球命运共同体的趋势不断上涨，互联网做为信息全球化和全球一体化的重要连接枢纽之一，近年来也得到飞速发展，从web1.0时代迈入web2.0时代，再进入如 *好棒文|www.hbsrm.com +Q: *351916072*
今的移动互联网时代，全球信息交流实现多个量级的飞跃，沟通交流方式也实现质的变化，互联网和移动互联网的告诉发展为生活添加了更多乐趣，为创业者和就业者提供了更多机会，将光与影结合的摄影艺术与互联网的进一步结合与完美融合，互联网+摄影成为新的突破口。
在时代的发展的背景下，摄影活动成为日常生活不可或缺的部分，但面临的问题也随之而来，众多的摄影作品只得在鱼龙混杂的各种社交平台上呈现，摄影初学者或摄影爱好者得不到良好的体验与交流，且社交软件和社交平台都会对发布的摄影作品进行一定程度的压缩，摄影作品的保真率直线下降。
在技术领域，随着技术的不断的不断发展，web应用的开发模式越来越多元化，技术的发展经历过静态页面，在运维方面给运维人员带来诸多不便；在动态网页时代，虽然在运营方面有了一定改进，但前端和后端穿插耦合，在网页改版方面还是略有不足；直至MVC与MVVC开发模式的出现，诸多问题才得以改善。在客户层面，随着技术进一步发展，在浏览的视觉感受，交互体验逐步提升。
因此，就该课题的研究意义主要有三点：首先，利用行业领先的主流前端开发框架，开发一款符合社会潮流、符合人性化设计的web应用具有先进意义。对开发人员而言，采用MVVC开发模式具有利用Vue.js的优秀特性，提高代码复用率和数据交互从而提高工作效率具有先进意义；其次，对web应用的受众，即广大用户群体而言，拥有一款改版方便，交互人性化，布局符合潮流审美的web应用，可得到更好的用户体验；最后，就本人个人而言，学习行业主流技术并设计开发一款web平台的前端，对大学四年的学习的知识具有检测的意义，也是将知识融汇运用的体现。在此阶段采用主流技术进行研究，对今后个人工作也具有实际帮助的意义。
1.2 web前端国内外应用研究现状
1.2.1 国内研究现状
国内传统企业在以往会采用将互联网模块外包给其他公司，从而获得相对比较优质的互联网服务且减少成本开支，采用这种方法通常可为公司在管理上和预算支配上节约成本，但是这种方式也是相对存在弊端，采用供应商提供的互联网方案形式相对比较单一，无法树立鲜明的企业形象和品牌形象，在用户体验上千篇一律。因此组件自己的技术团队成为必然。
国内前端开发研究目前正处于高速发展阶段，国内以百度、腾讯、阿里巴巴为首的知名互联网企业和以华为为代表的的传统企业为推动信息化发展进程做出巨大贡献。淘宝网的“淘宝UED”，百度旗下的“百度UFO”，腾讯的“ISD”和“CDC”等等。这些团队性质大都相似，以提高用户体验为第一目标。
在国家大力倡导企业自主研发的前提下，国内互联网发展趋势是建立具有品牌差异化的互联网产品。在前端领域，淘宝框架和饿了么框架成为前端从业者争相模仿的框架，优秀的互联网产品开始大量使用React.js、Angular.js和Vue.js等主流优秀前端框架。优秀的前端框架在web应用的开发商发挥着巨大的作用，二者的结合衍生的优秀解决方案正在进一步促进国内互联网信息化建设的道路不断发展。
1.2.2 国外研究现状
根调查显示，国外前端应用发展现状亦是在轻量级、模块化、响应式等方面大做文章，React.js软件是Facebook公司自主研发的软件项目它的前端框架设计都是采用传统的MVC模式进行设计的，但这传统的运行模式很难能够满足于Facebook公司的使用需求。由此可见，国外一众大型企业也正在逐渐脱离传统开发模式，往MVVC模式进行改革。
1.3 主要研究内容及研究思路
1.3.1 主要研究内容
（1）主要对本课题的研究背景、研究目的以及研究意义进行深入探讨，分析国内外发展现状，明确课题研究的意义以及课题研究可行性；
（2）明确相关技术，搭建课题研究环境和相关设计软件；
（3）对课题项目进行详细分析，统计用户需求并设计相关功能，实现UI图设计；
（4）利用所搭建的环境对UI设计稿进行项目实施、测试；
（5）课题研究成果展示，主要通过项目截图和代码进行展示；
（6）对所研究的课题进行总结与展望。
1.3.2 研究思路
根据所确定的研究内容，本课题的研究思路主要分为前中后三个阶段。前期进行资料查阅和相关技术环境搭建，市场调研分析；中期进行项目实施，收集素材并设计UI稿，进行实时项目；后期进行项目测试与总结；
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/ysl/szmt/173.html
