摄影网站的建设与开发(源码)【字数：9030】
摘 要随着互联网的发展，尤其是最近10年智能手机的普及，摄影对于普通人来说越来越方便。摄影不再是高深的技术，大多数人拍摄的作品也不是以发表为目的，更多的是作为爱好在微信、微博等互联网上展示、交流。互联网的发展，也为摄影师提供了一个方便快捷的交流平台，互联网凭借快速、及时、互动性的特点为摄影作品提供了良好的平台。本系统实现了基于vue的前端摄影分享商城网站设计，网站的内容分为主页、社区、图片展示、商城功能、登录注册和人物介绍。主页通过轮播图展示了图片，社区功能可以实现作品的点赞评论。商城的部分主要实现了商品的点赞、购物车、购买等功能。
目 录
一、引言 1
（一）课题背景 1
（二）使用工具 1
（三）课题意义 1
二、需求分析 1
三、项目设计 2
（一）功能设计 2
（二）特点 2
四、技术介绍 2
（一）项目技术 2
1.vue介绍 2
2.项目的编程特点 3
（二）项目框架 3
1.项目框架 3
2.项目组件的构成 3
五、页面介绍 3
（一）主页功能 3
1．主页首页介绍 3
2．欢迎展示介绍 3
3．图片轮播介绍 4
4．人物介绍 6
(二)社区页面 7
1.社区作品展示 7
2. 社区点赞功能 8
3. 社区添加评论 9
4.社区删除评论 11
（三）收藏页面 11
（四）商店展示 13
1.商店的主页面 13
2.商品浏览 14
3.商品的点赞 14
六、用户功能介绍 16
（一）用户注册介绍 16
（二）用户的登录介绍 17
（三）购物车的添加 20
（四）购物车的删除 22
（五）购物车下单 23
（六）购物车结算 24
（七）结算成功 25
1.未选购完所有商品 25
*好棒文|www.hbsrm.com +Q: &351916072&
2.选购完所有商品 26
七、管理员功能介绍 26
（一）修改商品信息 27
（二）商品的创建 29
（三）商品数据显示 29
（四）商品的修改 30
（五）商品的删除 30
九、软件测试 31
（一）用户登录注册测试 31
（二）社区功能测试 32
（三）商城功能测试 32
总结 33
致谢 35
参考文献 36
一、引言
（一）课题背景
人们出去玩都喜欢拍照摄影留恋，在现在人手一部手机的情况下，分享给别人变得十分重要。人们一般会选择发朋友圈或者qq空间等其他社交软件发布，为的就是通过自己摄影的图片给别人带来份喜悦或者自己开心。
所以决定课题从人们的生活入手，做一个摄影网页，满足人们对于摄影的需求分享、评论之类，同时可以交流获得美的提升。
（二）使用工具
为了解决摄影作品的分享、购买等功能，此项目使用vue、elementui、vuerouter、vuex等技术。使用npm作为包管理工具，可以方便管理和添加新的依赖。
（三）课题意义
人们分享的摄影照片多半只能点点赞或者保存一下，例如使用其他人的照片是需要版权的其实，网页可以将他们很好的整合在一起，能达到购买、点赞、评论于一体，这样的网页有以下优势。
作为网页可以不用像app那么繁琐，分享速度快、量大，用户直接体验会超过app的体验。
扩大用户与其他的用户连接，彼此分享相互查看，在网页上用户能更直观的看见分享的摄影图片。
用户可以购买版权，这是最重要的一点，图片都有专属的使用版权，为此，网页专门设计一个可以购买的地方，用户可以对于自己看得上的照片买单，增强版权意识，为自己的辛苦给个奖励。
二、需求分析
用户在使用网站首先会需要查看各种摄影作品，在此基础上主页的主要功能就是显示各种图片，用户还可以对自己喜爱的图片截屏,除了显示图片用户还需要对图片点赞和评论。在用户需要商城功能点击图片可以点赞、然后加入购物车，在购物车界面可以选择自己所需要的数量,还有是那些种类,例（尺寸,大小等）。
用户的功能主要有以下五个方面
浏览图片：在用户进入到摄影网站的主页上时,可以通过点击收藏来查看。
登录、注册：在网页的最右上方,功能分别是注册一个新用户和登录一个用户账号。
点赞、评论图片：是社区所包含的功能,对用户摄影比较厉害而设立的,他们可以分享,而其他用户可以进行点赞和一个评论的功能,
浏览商品：这是网页的商店界面,图片也需要有自己的专属版权,用户可以对自己特别喜爱的图片精选挑选,在这个界面也包含了一个点赞功能,用户可以进行滑动浏览。
结算订单：在网页的商店界面,可以点进去选择尺寸、大小,用户可以对自己最喜爱的图片进行加入购物车,并跳转到购物车清单界面,点击结算,至此,结算成功。
三、项目设计
（一）功能设计
根据项目需求，可以将整个项目大致分为6大模块，分别是：主页、社区、作品展示、商店、人物介绍、登录注册。页面采取topcontent的布局模式，通过不变的top菜单可以实现页面的快速跳转。
主页：左边是欢迎,四张较为著名的图片在网页中间进行一个轮播,右边是四大著名人物介绍,依次雪姨,海因,安塞尔和奥斯卡。
社区：对图片进行筛选,展示一部分优秀的图片给所有用户,每个用户均可在社区查看,这也是用户无法进行主动选择的一条。
目 录
一、引言 1
（一）课题背景 1
（二）使用工具 1
（三）课题意义 1
二、需求分析 1
三、项目设计 2
（一）功能设计 2
（二）特点 2
四、技术介绍 2
（一）项目技术 2
1.vue介绍 2
2.项目的编程特点 3
（二）项目框架 3
1.项目框架 3
2.项目组件的构成 3
五、页面介绍 3
（一）主页功能 3
1．主页首页介绍 3
2．欢迎展示介绍 3
3．图片轮播介绍 4
4．人物介绍 6
(二)社区页面 7
1.社区作品展示 7
2. 社区点赞功能 8
3. 社区添加评论 9
4.社区删除评论 11
（三）收藏页面 11
（四）商店展示 13
1.商店的主页面 13
2.商品浏览 14
3.商品的点赞 14
六、用户功能介绍 16
（一）用户注册介绍 16
（二）用户的登录介绍 17
（三）购物车的添加 20
（四）购物车的删除 22
（五）购物车下单 23
（六）购物车结算 24
（七）结算成功 25
1.未选购完所有商品 25
*好棒文|www.hbsrm.com +Q: &351916072&
2.选购完所有商品 26
七、管理员功能介绍 26
（一）修改商品信息 27
（二）商品的创建 29
（三）商品数据显示 29
（四）商品的修改 30
（五）商品的删除 30
九、软件测试 31
（一）用户登录注册测试 31
（二）社区功能测试 32
（三）商城功能测试 32
总结 33
致谢 35
参考文献 36
一、引言
（一）课题背景
人们出去玩都喜欢拍照摄影留恋，在现在人手一部手机的情况下，分享给别人变得十分重要。人们一般会选择发朋友圈或者qq空间等其他社交软件发布，为的就是通过自己摄影的图片给别人带来份喜悦或者自己开心。
所以决定课题从人们的生活入手，做一个摄影网页，满足人们对于摄影的需求分享、评论之类，同时可以交流获得美的提升。
（二）使用工具
为了解决摄影作品的分享、购买等功能，此项目使用vue、elementui、vuerouter、vuex等技术。使用npm作为包管理工具，可以方便管理和添加新的依赖。
（三）课题意义
人们分享的摄影照片多半只能点点赞或者保存一下，例如使用其他人的照片是需要版权的其实，网页可以将他们很好的整合在一起，能达到购买、点赞、评论于一体，这样的网页有以下优势。
作为网页可以不用像app那么繁琐，分享速度快、量大，用户直接体验会超过app的体验。
扩大用户与其他的用户连接，彼此分享相互查看，在网页上用户能更直观的看见分享的摄影图片。
用户可以购买版权，这是最重要的一点，图片都有专属的使用版权，为此，网页专门设计一个可以购买的地方，用户可以对于自己看得上的照片买单，增强版权意识，为自己的辛苦给个奖励。
二、需求分析
用户在使用网站首先会需要查看各种摄影作品，在此基础上主页的主要功能就是显示各种图片，用户还可以对自己喜爱的图片截屏,除了显示图片用户还需要对图片点赞和评论。在用户需要商城功能点击图片可以点赞、然后加入购物车，在购物车界面可以选择自己所需要的数量,还有是那些种类,例（尺寸,大小等）。
用户的功能主要有以下五个方面
浏览图片：在用户进入到摄影网站的主页上时,可以通过点击收藏来查看。
登录、注册：在网页的最右上方,功能分别是注册一个新用户和登录一个用户账号。
点赞、评论图片：是社区所包含的功能,对用户摄影比较厉害而设立的,他们可以分享,而其他用户可以进行点赞和一个评论的功能,
浏览商品：这是网页的商店界面,图片也需要有自己的专属版权,用户可以对自己特别喜爱的图片精选挑选,在这个界面也包含了一个点赞功能,用户可以进行滑动浏览。
结算订单：在网页的商店界面,可以点进去选择尺寸、大小,用户可以对自己最喜爱的图片进行加入购物车,并跳转到购物车清单界面,点击结算,至此,结算成功。
三、项目设计
（一）功能设计
根据项目需求，可以将整个项目大致分为6大模块，分别是：主页、社区、作品展示、商店、人物介绍、登录注册。页面采取topcontent的布局模式，通过不变的top菜单可以实现页面的快速跳转。
主页：左边是欢迎,四张较为著名的图片在网页中间进行一个轮播,右边是四大著名人物介绍,依次雪姨,海因,安塞尔和奥斯卡。
社区：对图片进行筛选,展示一部分优秀的图片给所有用户,每个用户均可在社区查看,这也是用户无法进行主动选择的一条。
版权保护: 本文由 hbsrm.com编辑，转载请保留链接: www.hbsrm.com/jsj/rjgc/781.html
