基于Web技术的校园二手交易平台设计

基于Web技术的校园二手交易平台设计
发布时间：2022-11-11T06:05:17.502Z 来源：《中国建设信息化》2022年14期作者：周冠华严婷婷郑英杰[导读] 校园二手交易平台是针对学生出售闲置物品、
周冠华1，严婷婷2，郑英杰3
1.广州华立科技职业学院，广东广州 510000；
2.江苏航运职业技术学院，江苏南通 226010；
3.江门职业技术学院，广东江门 529000
摘要：校园二手交易平台是针对学生出售闲置物品、学生或校外单位购买低价二手物品开发的C2C交易平台，该平台实现了校园资源整合以及闲置物品利用价值的再循环。

本文设计实现了二手商品交易的大部分功能，平台开发时采用B/S架构，通过校园二手交易平台，用户可以自由出售、购买商品，实现校园商品流通。

关键词：商品交易平台；前端；B/S架构
随着互联网以及经济的发展，网络购物的快捷、方便、省时、商品不胜枚举、性价比高等以及购买力的提高，网络购物已成为现代大众生活的一种常态。

大学阶段，学习和生活用品的购买量是很大的，使用一段时间就会被淘汰，但是闲置、废弃物品重新体现利用价值并不多，学习和生活用品的浪费已成为一种普遍现象。

二手物品宣传的局限性、物品信息的无序性，是二手物品在买卖方流通的障碍。

针对这种情况，就需要一个平台把校园闲置资源整合，然后归类并向卖方展现物品信息，一方面降低购买物品的成本，缓解学生生活经济压力，另一方面实现闲置资源物尽其用。

因此，校园二手交易平台运应而生。

校园二手交易平台是针对学生出售闲置物品、学生或校外单位购买低价二手物品开发的C2C交易平台，解决传统校园二手物品信息发布与交流方式存在的弊端，每个学生都可以通过本平台发布自己要出售的二手物品，浏览其他人要出售的物品信息。

1 开发工具及技术
系统设计主要使用HbuilderX开发工具，前端开发主要使用HTML+CSS+JQuery，后端主要使用Nodejs完成。

HbuilderX是web开发平台，其实也可以使用VScode、Dreamweaver等开发工具。

前端使用技术中，HTML是Web的骨架，CSS是层叠样式表，用来美化页面。

Jquery是一个JavaScript框架，里面封装许多函数，可以快速获取DOM元素，让JS代码变得简洁，此外还提供许多插件，帮助我们提高开发效率。

Ajax是现有技术HTML、CSS、JS的综合，用来实现后台接口调用，它是用来代替客户端向服务器端发送请求和接收响应的，作用主要可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

后端使用技术Nodejs是基于V8引擎的JavaScript运行环境，它让JavaScript脱离浏览器而运行在服务器。

Node提供许多功能模块，简化了应用开发，作为小型项目开发是不错的选择。

2 系统需求分析和设计
2.1 前台/后台功能模块
未登录状态下可以访问的前端功能模块如下：登录注册、商品查询、商品浏览、商品详情。

登录状态下的普通用户可以访问的前端功能模块有下：登录注册、个人中心、商品查询、商品浏览、商品详情、商品咨询、商品评论。

后台功能模块只对管理员开放，主要功能如下：商品信息管理、用户信息管理、评论信息管理。

2.2 系统设计思想
1、使用B/S模式进行开发，符合用户使用体验；
2、使用模块化开发。

将一个项目按照功能划分，一个功能一个模块，互不影响模块化开发具有重复使用、更换方便等优点。

简化开发，利于后期维护；
3、简洁的交互界面。

方便用户快速适应系统；
4、采用面向对象进行开发和设计。

3 系统页面设计与实现
3.1 制作favicon图标
favicon.ico 一般用于作为缩略的网站标志，它显示在浏览器的地址栏或者标签上。

步骤如下：制作favicon图标；favicon图标放到网站根目录下；HTML页面引入favicon图标（如图1所示）；程序运行。

3.3 列表页、注册页设计与实现
列表页面是新的页面，需要新建页面文件 list.html。

因为列表页的头部和底部基本一致，所以需要把首页中的头部和底部的结构复制过来，头部和底部的样式也需要，因此 list.html 中还需要引入 common.css 。

需要新的 list.css 样式文件，这是列表页专门的样式文件。

最后需要列表页程序运行看效果如何。

注册页面比较隐私，为了保护用户信息，则不需要对当前页面做SEO优化。

4 系统功能实现
4.1 登录与退出功能
为登录按钮添加点击事件，获取用户在文本框中输入的用户名和密码，验证用户是否输入了用户名和密码，如果没有输入，阻止程序向下执行，提示用户输入用户名和密码。

调用实现登录功能的接口，登录成功，跳转到数据管理的首页，登录失败，提示用户名或密码错误，代码如图3所示。

为退出按钮添加点击事件，调用实现退出功能的接口，退出成功，跳转到登录页面，退出失败，给出提示代码。

4.3 修改密码
为修改密码表单中的每一个表单项添加name属性，name属性的值要和接口中的参数名称保持一致。

为修改密码表单添加表单提交事件，在事件处理函数中，阻止表单的默认提交行为。

获取到用户在表单中输入的内容。

调用修改密码接口，实现密码修改功能，如果密码修改成功，跳转到登录页面，让用户重新登录。

4.4 添加商品
获取商品分类数据，并将数据显示在所属分类的下拉列表中供管理员选择，实现商品封面图片的上传，并将上传后的图片地址保存在一个隐藏域中。

为添加商品表单中的每一个表单项添加name属性，并且name属性值要和接口中要求的参数名称保持一致。

为添加商品表单绑定表单提交事件，在事件处理函数中阻止表单默认提交的行为，获取到管理员在表单中输入的内容。

向服务器端发送添加商品的请求，
实现商品添加功能，商品添加成功以后要跳转到商品列表页面。

4.5 评论列表展示
向服务器端发送请求，获取评论列表数据，使用模板引擎将评论列表数据和HTML模板进行拼接，拼接完成以后再将内容展示在页面中。

根据分页数据实现分页功能，代码如图5所示。

5 结语
在系统开发过程中，运用了像HTML、CSS、javascript、Ajax、JQuery、art-template模板引擎、Node.js、MongoDB数据库等等技术，通过这些技术的实现，系统整体性能得到了一定提高。

本系统还存在许多缺陷与不足，比如细节做得不够好，同时存在一些bug。

希望在以后的学习中可以弥补，进一步完善系统。

本系统可以大程度上解决学校学生之间二手物品交易，但由于时间和技术条件的限制，还存在许多不足的地方，但一个好的软件、网站是建立在不断改善更新的过程，在以后的工作中将对系统进行完善和改进。

参考文献
[1]孙澄宇,于军,鲁志海.基于Web技术的虚拟实验平台开发与实现[J].数字技术与应用,2021,39(12):161-163.
[2]赵壮. 推荐算法在校园二手交易平台中的研究与应用[D].武汉轻工大学,2021.
[3]杨平,陈晓涛.基于微信公众平台的校园二手交易平台设计[J].电子商务,2018(10):95-96.
[4]武韵.基于Web App技术的音乐微课移动平台开发[J].微型电脑应用,2021,37(10):165-167+178.
[5]季铼,谭振江,周伟.基于网络技术的大学校园二手交易平台的设计与实现[J].智能计算机与应用,2017,7(03):156-158.
作者简介：
周冠华（1987-），男，广东佛冈人，硕士研究生，博士在读，讲师，研究方向：信息技术。