Bootstrap

基于Vue和NodeJs的摄影网站

随着互联网技术和信息化技术的不断深入发展,利用互联网技术进行信息化管理有了很大的提高,从而使得信息管理变的越来越快捷。面对互联网的发展提升引发的新的办公方式,照相馆管理人员急需要一套摄影网站管理系统来规范照相馆各项信息的自动化。通过摄影网站系统,照相馆管理人员都能够做到照相馆信息的正规化管理,从而引导照相馆科学发展,减少管理工作量,提升工作效率。照相馆负责人能够实现各项客照样本信息、照相活动信息、留言信息等的自动化管理。

本摄影网站管理系统不仅对于提升照相馆信息化建设具有探索建设性意义,而且对于学生理论联系实际,将所学计算机知识进行实际应用具有非常重要的指导意义。本系统以操作方便,交互友好为原则,按照软件工程开发思想,从需求到设计研发测试直到族中完成系统上线。系统分为前台用户功能和后台管理功能。

本摄影网站管理系统基于VUE和NodeJS设计研发,通过讨论调研摄影网站管理的业务流程,总结规范了一系列照相馆信息管理方案。平台上的设计工具使用VsCode,数据库采用mysql和开发框架采用Express。

关键词:摄影网站;互联网技术;VUE;NodeJS

当前科学技术发展迅速,互联网和信息化技术日新月异,利用互联网手段进行信息化管理成为行业信息化现代化的一个流行标志。然而不少照相馆信息管理仅仅采用手工管理的形式,这种方式对于照相馆各项信息的动态管理缺少及时性,容易产生各种和实际情况结合不符合的情况,最终导致无法统计分析各项照相馆信息。正式因为当前很多照相馆的信息发布处于按照内部工作人员及时采集编辑这种流程。这种方式简单,对于常规的例行工作有很大的帮助,但是对于照相馆管理人员来说,仅仅依靠内部人士管理信息已经远远不够,照相馆的持续发展很可能有发布的最新活动,这种单面的照相馆管理,对于新型的发展趋势来说显得非常落伍。当下的互动式照相馆信息管理平台即依靠网站进行信息化管理比较流行,基于互联网平台的摄影信息管理对用户来说能够和照相馆之间产生相互的了解,网站通过摄影网站的活动发布而获取照相馆摄影活动的报名及客照和样本照,然后把具有相关联的这些用户信息通过显示给照相馆的管理人员。

但是各个照相馆管理手段不一,水平也各有高低,导致很难用一套相同的管理方式进行统一管理。整体上有如下问题:照相馆各种信息资料属于不同的人员管理,资料信息不能实时比对更新,经常出现资料登记不全,资料分类无法确定,还有的对活动关联信息不能及时统计分析等等。这些问题总的来说,是因为管理手段落伍,无法跟进时代前进的步伐。必须设计一套管理摄影网站,提升照相馆管理信息化和现代化水平。

本摄影网站采用VUE和NodeJS技术平台进行设计,采用Express作为框架进行系统的快速研发。整个设计过程采取软件工程的研究思想,从需求到设计,然后再到开发测试直至最后系统上线。开发过程主要使用的软件工具:平台上的设计工具使用VsCode,数据库采用mysql和客户端采用谷歌浏览器。

本摄影网站系统的设计与实现本着设计功能丰富,易于操作,界面友好为开发原则。在开发过程中,首先对摄影网站管理系统的可行性进行分析,主要从技术、经济和操作三方面来进行分析,先要确保经济上能够承担,所谓经济基础决定上层建筑,然后再从技术来分析,最后从操作可行性进行讨论。接着对摄影网站管理系统的功能需求进行详细调研,以达到提升照相馆信息现代化管理的目的,然后根据需求分析,对系统进行总体设计和详细设计,以达到满足各项需求,并增进系统的健壮性,接着进行系统的开发和测试,使得最终实现的系统能够完美满足管理需求

摄影网站系统能够帮助照相馆管理人员节省时间精力达成照相馆信息的规范化与科学化,最终提升照相馆的客流和收益。

功能需求

本系统在需求调研阶段,通过对照相馆摄影全过程进行了详细的调查研究,对照相馆手工管理的问题作了全方位的考察,然后对照相馆摄影进行了流程梳理和业务解构,并在这个基础上制定了需求分析说明书。摄影网站根据客户和照相馆及管理者需求,进行系统的整体架构和功能划分,进而保证设计的摄影网站能够服务照相馆的管理需求和客户的消费需求。这样明确的系统设计目标,使得系统功能避免出现大的变更,导致系统设计来回修改迭代,减少不必要的工作量。

摄影网站依据用户不同,划分为前台功能模块和后台功能模块。

前台功能模块:用户注册、用户登录、样本查看、样本收藏、样本评论、活动预约和联系客服;

后台功能模块:用户登录、样本类型管理、样本详情管理、活动信息管理、预定信息管理、留言回复管理和系统设置功能。

系统整体结构设计

摄影网站主要划分为前台功能模块和后台功能模块两大功能模块。

前台功能模块:用户注册、用户登录、样本查看、样本收藏、样本评论、活动预约和联系客服;

后台功能模块:用户登录、样本类型管理、样本详情管理、活动信息管理、预定信息管理、留言回复管理和系统设置功能。

系统主页面实现

样本评论实现

如图所示为样本评论页面。

主要代码如下:
	api.post('/add', async (req, res) => {
		try {
			Object.keys(req.body).forEach(item=>{
				if(req.body[item] == '')  delete req.body[item]
			})
			req.body.userid = req.session.userinfo === undefined ? jwt.decode(req.headers.token).id : req.session.userinfo.id
			const userinfo = await DiscusshuodongxinxiModel.create(req.body)
			if (userinfo === null) {
				toRes.session(res, -1, '添加失败!')			} else {
				toRes.session(res, 0, '添加成功!')			}
		} catch(err) {			
			toRes.session(res, 500, '服务器错误!', '', 500)
		}
	})

活动预定实现

如图所示为活动预定页面。

后台实现

主要代码:
添加用户
	api.post('/save', async (req, res) => {
		try {
			if (!toRes.auth(req, res, '管理员')) return
			const userinfo = await UsersModel.create(req.body)
			if (userinfo === null) {
				toRes.session(res, -1, '添加失败!')
			} else {
				toRes.session(res, 0, '添加成功!')
			}
		} catch(err) {
			
			toRes.session(res, 500, '服务器错误!', '', 500)
		}
	})
	修改用户
	api.post('/update', async (req, res) => {
		try {
			if (!toRes.auth(req, res, '管理员')) return
			await UsersModel.update(req.body, {
				where: {
				  id: req.body.id
				}
			})

			toRes.session(res, 0, '编辑成功!')
		} catch(err) {
			
			toRes.session(res, 500, '服务器错误!', '', 500)
		}
	})

	删除用户
	api.post('/delete', async (req, res) => {
		try {
			if (!toRes.auth(req, res, '管理员')) return
			await UsersModel.destroy({
				where: {
				  id: {
					[Op.in]: req.body
				  }
				}
			})
			toRes.session(res, 0, '删除成功!')
		} catch(err) {
			toRes.session(res, 500, '服务器错误!', '', 500)
		}
	})

活动管理实现

如图所示为系统后台活动管理页面。

点击上边的活动信息管理菜单条,下面显示活动信息管理的界面。上面为活动信息查询输入,下面活动信息管理列表。在下面的活动信息管理列表中,点击添加就可以进行活动信息的添加管理操作;选择活动信息,然后点击修改,就可以进入活动信息修改的管理操作;选择活动信息,点击删除,就可以把活动信息从数据库中删除。核心代码与用户管理类似不在叙述。

样本管理实现

如图所示为系统后台样本管理页面。

点击上边的样本信息管理菜单条,下面显示样本信息管理的界面。上面为样本信息查询输入,下面样本信息管理列表。在下面的样本信息管理列表中,点击添加就可以进行样本信息的添加管理操作;选择样本信息,然后点击修改,就可以进入样本信息修改的管理操作;选择样本信息,点击删除,就可以把样本信息从数据库中删除。核心代码与用户管理类似不在叙述。

预约管理实现

如图所示为系统后台预约管理页面。

点击上边的预约信息管理菜单条,下面显示预约信息管理的界面。上面为预约信息查询输入,下面预约信息管理列表。选择预约信息,然后点击修改,就可以进入预约修改的管理操作;选择预约信息,点击删除,就可以把预约信息从数据库中删除。核心代码与用户管理类似不在叙述。

;