【开源】基于Vue.js的校园二手交易系统的设计和实现

这篇具有很好参考价值的文章主要介绍了【开源】基于Vue.js的校园二手交易系统的设计和实现。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端


一、摘要

1.1 项目介绍

随着国家生产力的发展,越来越多商品被生产了出来,超过了人们的实际消耗量,所以产生了大量闲置的商品,这些闲置商品有些被遗弃、有些通过二手平台被他人使用。为了防止不必要的浪费,开发了这套面向校园的二手交易系统,帮助用户高效率的转卖闲置的二手商品。

校园二手交易系统使用Idea开发工具完成了编码实现。前端采用Vue.js,采用View UI组件库美化界面,后端采用SpringBoot框架。在操作系统、开发语言、服务器,数据库、连接技术方面,对应使用Window操作系统、Java语言、Tomcat服务器、MySql数据库以及MyBatis技术完成系统搭建。该系统基于B/S架构,采用前后端分离架构,分为网页前台和管理后台,使用户可以在系统上发布与购买二手商品、进行留言以及掌握最新商品咨询。

  • 前端:Vue 2.7.10

  • 后端:Spring Boot 3.1.10

  • 数据库:MySQL 8.0.31

1.2 项目详细录屏

源码下载


二、功能模块

校园二手交易平台的功能性需求主要包含数据中心模块、二手商品档案模块、商品预约模块、商品预定模块、商品留言板模块、商品资讯模块六大模块,是基于浏览器运行的web管理后端,其中各个模块详细说明如下:

2.1 数据中心模块

数据中心模块包含了校园二手交易平台的系统基础配置,如登录用户的管理、二手平台组织架构的管理、用户菜单权限的管理、系统日志的管理、公用文件云盘的管理。

其中登录用户管理模块,由二手平台管理员负责运维工作,管理员可以对登录用户进行增加、删除、修改、查询操作。

二手组织架构,指的是二手平台管理运营公司的组织架构,该模块适用于管理这些组织架构的部门层级和员工的部门归属情况。

用户菜单权限管理模块,用于管理不同权限的用户,拥有哪些具体的菜单权限。

系统日志的管理,用于维护用户登入系统的记录,方便定位追踪用户的操作情况。

公用云盘管理模块,用于统一化维护校园二手交易平台中的图片,如二手商品的照片、保险单、三方协议等等。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

2.2 二手商品档案管理模块

二手商品档案模块,维护了校园二手交易平台中发布的二手商品数据,管理员可以对二手商品数据进行增加、删除、修改、查询操作。

2.3 商品预约管理模块

商品预约指的是买家有了初步意向,申请线下查看。注册用户可以在二手商品档案模块发起预约申请,卖家在收到预约申请后,主动联系买家对接后续预约事宜。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

2.4 商品预定管理模块

商品预定,指买家决定购买选定的商品。买家可以在二手商品档案中选择心仪的二手商品进行预定,并输入理想的价格和可选的备注信息,卖家就可以收到这个交易订单。卖家有权同意或驳回买家的预定请求,如果同意,则生成商品交易单,确定交易。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

2.5 商品留言板管理模块

二手商品的买卖过程中难免会有一些咨询和纠纷,所以校园二手交易平台专门设计了商品留言板模块,用于解决买家和卖家、买家和二手平台的纠纷。任何一方可以在留言板中留言,或对已留言的信
息进行回复。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

2.6 商品资讯管理模块

商品资讯管理模块,用于校园二手交易平台发布一些商品新闻,以及防诈骗推文等系统注册用户可以阅读到这些新闻信息。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端


三、实体类设计

3.1 用户表

数据中心模块最核心的就是用户了,用户的信息包括了手机号、地址、邮箱、身份证、性别等数据等。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

3.2 二手商品表

二手商品档案模块是对系统内二手商品的数据进行管理,二手商品的数据包括商品ID、商品品牌、三方检测、商品照片、价格、卖家姓名、卖家手机、备注。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

3.3 商品预约表

商品预约模块用于买家对商品的线下预约,商品预约模块应该包括商品ID、商品品牌、商品照片、卖家姓名、卖家手机、预约时间、预约地点、备注。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

3.4 商品预定表

商品预定模块主要是对学生的下单信息进行记录和存储,例如商品ID、商品品牌、商品照片、卖家姓名、卖家手机、下单时间、约定价格、备注。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

3.5 留言表

商品留言板用于解决买家和卖家、买家和二手平台的纠纷,包括留言内容、留言人、留言时间、是否回复、回复人、回复时间、回复内容、备注,任何一方可以在留言板中留言,或对已留言的信息进行回复。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

3.6 资讯表

商品资讯管理模块,用于二手平台发布一些商品新闻,以及防诈骗推文等系统注册用户可以阅读到这些新闻信息,包括发布人ID、发布人、发布内容、图片、附件、发布时间、排序值、发布状态。

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

四、界面展示

此系统用于校园二手交易网站工作人员和注册买家。首先是校园二手交易网站的工作人员,可以对数据中心模块进行配置,发布、删除二手商品信息,查询学生的预约、预定信息。

对于注册买家,可以查询管理员发布的二手商品档案,并根据自己的需求进行预定、预约。
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端

二手商品档案模块,维护了校园二手交易网站中发布的二手商品数据,管理员可以对二手商品数据进行增加、删除、修改、查询操作。
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端
【开源】基于Vue.js的校园二手交易系统的设计和实现,开源,vue.js,前端


五、核心代码

5.1 用户网页登录

@RequestMapping(value = "/loginOnWeb", method = RequestMethod.GET)
@ApiOperation(value = "网站前台登陆")
public Result<String> loginOnWeb(@RequestParam String userName, @RequestParam String password){
    QueryWrapper<User> qw = new QueryWrapper<>();
    qw.eq("username",userName);
    List<User> userList = iUserService.list(qw);
    if(userList.size() < 1) {
        return ResultUtil.error("用户不存在");
    }
    User user = userList.get(0);
    if(!new BCryptPasswordEncoder().matches(password, user.getPassword())){
        return ResultUtil.error("密码不正确");
    }
    String accessToken = securityUtil.getToken(user.getUsername(), true);
    UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(new SecurityUserDetails(user), null, null);
    SecurityContextHolder.getContext().setAuthentication(authentication);
    return new ResultUtil<String>().setData(accessToken);
}

5.2 用户网页注册

@RequestMapping(value = "/reOnWeb", method = RequestMethod.GET)
@ApiOperation(value = "网站前台注册")
public Result<String> reOnWeb(@RequestParam String userName,@RequestParam String mobile,@RequestParam String password){
    QueryWrapper<User> qw = new QueryWrapper<>();
    qw.eq("username",userName);
    qw.and(wrapper -> wrapper.eq("username", userName).or().eq("mobile",mobile));
    Long userCount = iUserService.count(qw);
    if(userCount > 0) {
        return ResultUtil.error("用户已存在");
    }
    User u = new User();
    u.setUsername(userName);
    u.setNickname(userName);
    u.setMobile(mobile);
    u.setEmail(u.getMobile() + "@qq.com");
    String encryptPass = new BCryptPasswordEncoder().encode(password);
    u.setPassword(encryptPass).setType(0);
    iUserService.saveOrUpdate(u);
    QueryWrapper<Role> roleQw = new QueryWrapper<>();
    roleQw.eq("default_role",true);
    List<Role> roleList = iRoleService.list(roleQw);
    if(roleList.size() > 0){
        for(Role role : roleList) {
            iUserRoleService.saveOrUpdate(new UserRole().setUserId(u.getId()).setRoleId(role.getId()));
        }
    }
    String accessToken = securityUtil.getToken(u.getUsername(), true);
    UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(new SecurityUserDetails(u), null, null);
    SecurityContextHolder.getContext().setAuthentication(authentication);
    return new ResultUtil<String>().setData(accessToken);
}

5.3 新增商品预约

@RequestMapping(value = "/addOrder", method = RequestMethod.GET)
@ApiOperation(value = "新增单条二手商品预定单")
public Result<Object> addOrder(@RequestParam String carId){
    UsedCar usedCar = iUsedCarService.getById(carId);
    if(usedCar == null) {
        return ResultUtil.error("二手商品不存在");
    }
    User currUser = securityUtil.getCurrUser();
    QueryWrapper<CarOrder> qw = new QueryWrapper<>();
    qw.eq("car_id",carId);
    qw.eq("buy_id",currUser.getId());
    if(iCarOrderService.count(qw) > 0L) {
        return ResultUtil.error("您已预定,无需重复预定");
    }
    CarOrder carOrder = new CarOrder();
    carOrder.setCarId(carId);
    carOrder.setBrand(usedCar.getBrand());
    carOrder.setSellerMoney(usedCar.getMoney());
    carOrder.setImageUrl(usedCar.getImageUrl());
    carOrder.setSellerId(usedCar.getSellId());
    carOrder.setSellerName(usedCar.getSellName());
    carOrder.setSellerMobile(usedCar.getSellMobile());
    carOrder.setBuyId(currUser.getId());
    carOrder.setBuyName(currUser.getNickname());
    carOrder.setOrderTime(DateUtil.now());
    carOrder.setContractFlag(false);
    carOrder.setContractTime("");
    iCarOrderService.saveOrUpdate(carOrder);
    return ResultUtil.success();
}

5.4 商品审核

@RequestMapping(value = "/doAudit", method = RequestMethod.POST)
@ApiOperation(value = "审核")
public Result<Object> doAudit(@RequestParam String id){
    CarOrder carOrder = iCarOrderService.getById(id);
    if(carOrder == null) {
        return ResultUtil.error("订单不存在");
    }
    carOrder.setAuditFlag(true);
    iCarOrderService.saveOrUpdate(carOrder);
    return ResultUtil.success();
}

5.5 查询留言

@RequestMapping(value = "/getByPage", method = RequestMethod.GET)
@ApiOperation(value = "查询留言")
public Result<IPage<MessageBoard>> getByPage(@ModelAttribute MessageBoard board,@ModelAttribute PageVo page){
    QueryWrapper<MessageBoard> qw = new QueryWrapper<>();
    if(!ZwzNullUtils.isNull(board.getDate())) {
        qw.eq("date",board.getDate());
    }
    if(ZwzNullUtils.isNull(board.getReplyId())) {
        qw.eq("reply_id","");
    } else {
        qw.eq("reply_id",board.getReplyId());
    }
    return new ResultUtil<IPage<MessageBoard>>().setData(iMessageBoardService.page(PageUtil.initMpPage(page),qw));
}

六、免责说明

  • 本项目仅供个人学习使用,商用授权请联系博主,否则后果自负。
  • 博主拥有本软件构建后的应用系统全部内容所有权及独立的知识产权,拥有最终解释权。
  • 如有问题,欢迎在仓库 Issue 留言,看到后会第一时间回复,相关意见会酌情考虑,但没有一定被采纳的承诺或保证。

下载本系统代码或使用本系统的用户,必须同意以下内容,否则请勿下载!文章来源地址https://www.toymoban.com/news/detail-759839.html

  1. 出于自愿而使用/开发本软件,了解使用本软件的风险,且同意自己承担使用本软件的风险。
  2. 利用本软件构建的网站的任何信息内容以及导致的任何版权纠纷和法律争议及后果和博主无关,博主对此不承担任何责任。
  3. 在任何情况下,对于因使用或无法使用本软件而导致的任何难以合理预估的损失(包括但不仅限于商业利润损失、业务中断与业务信息丢失),博主概不承担任何责任。
  4. 必须了解使用本软件的风险,博主不承诺提供一对一的技术支持、使用担保,也不承担任何因本软件而产生的难以预料的问题的相关责任。

到了这里,关于【开源】基于Vue.js的校园二手交易系统的设计和实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序的校园二手交易商城/校园二手物品交易系统的设计与实现

    摘  要      随着当今 网络 的发展,时代的进步, 各行各业 也在发生着变化, 于是网络已经 逐步进入人们的生活 ,给我们生活或者工作 提供了新的方向新的可能 。    本毕业设计的内容是设计实现一个 微信小程序的校园二手交易商城 。 使用 微信开发者 是以 java语言

    2024年02月12日
    浏览(52)
  • 基于SpringBoot Vue二手闲置物品交易系统

    大家好✌!我是Dwzun。很高兴你能来阅读我,我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结,还为大家分享优质的实战项目,本人在Java项目开发领域有多年的经验,陆续会更新更多优质的Java实战项目,希望你能有所收获,少走一些弯路,向着优秀 程序员

    2024年01月23日
    浏览(42)
  • 校园二手商品交易小程序系统源码

    目录 一、整体目录(示范): 文档含项目技术介绍、E-R图、数据字典、项目功能介绍与截图等 二、运行截图 三、代码部分(示范): 四、数据库表(示范): 数据库表有注释,可以导出数据字典及更新数据库时间,欢迎交流学习 五、主要技术介绍: 六、项目调试学习(点击

    2024年02月09日
    浏览(90)
  • node.js毕业设计校园二手交易小程序(源码+程序+LW+部署)

    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程。欢迎交流 项目运行 环境配置: Node.js+ Vscode + Mysql5.7 + HBuilderX+Navicat11+Vue+Express 。 项目技术: Express 框架 + Node.js+ Vue 等等组成,B/S模式 +Vscode管理+前后端分离等等。 环境需要 1. 运行环境:最好是Nodejs最

    2024年02月09日
    浏览(40)
  • 校园二手物品交易系统微信小程序设计

    本网最大的特点就功能全面,结构简单,角色功能明确。其不同角色实现以下基本功能。 服务端 后台首页:可以直接跳转到后台首页。 用户信息管理:管理所有申请通过的用户。 商品信息管理:管理校园二手物品中所有的商品信息,非常详细。 违规投诉管理:对一些违规

    2024年02月09日
    浏览(45)
  • 微信小程序校园二手书交易系统设计与实现

     博主介绍 :黄菊华老师《Vue.js入门与商城开发实战》《微信小程序商城开发》图书作者,CSDN博客专家,在线教育专家,CSDN钻石讲师;专注大学生毕业设计教育和辅导。 所有项目都配有从入门到精通的基础知识视频课程,免费 项目配有对应开发文档、开题报告、任务书、

    2024年02月04日
    浏览(56)
  • springboot+java+jsp校园二手书旧书交易交换系统

    前台功能:用户进入系统可以对首页、书籍信息、校园公告、个人中心、后台管理等功能进行操作; 后台主要是管理员,管理员功能包括主页、个人中心、学生管理、发布人管理、书籍分类管理、书籍信息管理、交易信息管理、交换信息管理、系统管理等; 功能介绍  Spri

    2024年02月05日
    浏览(48)
  • 基于微信小程序的校园二手交易小程序(源码+文档+部署+讲解)

    毕设帮助、技术解答、源码交流 联系方式见文末。 网络技术的快速发展给各行各业带来了很大的突破,也给各行各业提供了一种新的管理模式,校园二手交易平台小程序将是又一个从传统管理到智能化信息管理的典型案例,对于传统的校园二手交易,所包括的信息内容比较

    2024年02月20日
    浏览(49)
  • 【附源码】计算机毕业设计SSM校园二手商品交易系统

    项目运行 环境配置: Jdk1.8 + Tomcat7.0 + Mysql + HBuilderX (Webstorm也行)+ Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM + mybatis + Maven + Vue 等等组成,B/S模式 + Maven管理等等。 环境需要 1. 运行环境:最好是java jdk 1.8,我们在这个平台上运行的。其他版本理论上也可以

    2024年02月02日
    浏览(51)
  • 基于Java+SpringBoot+Vue前后端分离二手车交易系统设计和实现

    博主介绍 : ✌ 全网粉丝30W+,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战 ✌ 🍅 文末获取源码联系 🍅 👇🏻 精彩专栏 推荐订阅 👇🏻 不然下次找不到哟 2022-2024年

    2024年02月10日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包