基于Java，SSH，Vue电子商品交易二手平台仿闲鱼转转验机系统设计

摘要

本研究旨在设计与实现一款基于Java、SSH（Struts2+Spring+Hibernate）框架及Vue.js的电子商品交易二手平台系统，对标“闲鱼”“转转”等主流平台，满足用户对手机、电脑、平板等电子设备的闲置交易、信息查询及社交互动需求，解决传统二手交易中信息不对称、流程繁琐、信用体系缺失等问题。系统采用分层架构设计，后端通过Struts2实现MVC模式的控制器逻辑，利用Spring的依赖注入与面向切面编程管理业务组件，借助Hibernate完成Java对象与MySQL数据库的ORM映射；前端基于Vue.js构建单页面应用，集成Vue Router实现路由管理，通过Vuex进行状态集中管理，并采用Element UI组件库实现响应式界面设计。随着共享经济的发展，二手交易市场规模不断扩大，用户对便捷、安全的电子商品二手交易平台需求日益增长。本研究设计并实现了一款基于 Java、SSH（Struts2 + Spring + Hibernate）框架与 Vue.js 的电子商品交易二手平台，对标“闲鱼”“转转”等主流产品，以满足用户对电子设备闲置交易、信息查询、社交互动等核心需求，解决传统二手交易中信息不对称、交易流程繁琐、信用体系缺失等问题。后端采用 SSH 框架搭建企业级应用，Struts2 处理用户请求与响应逻辑，Spring 通过依赖注入和面向切面编程管理业务层组件，Hibernate 实现 Java 对象与 MySQL 数据库的无缝交互；前端基于 Vue.js 构建单页面应用，使用 Vue Router 管理前端路由，Vuex 集中管理应用状态，Element UI 提供响应式 UI 组件库。系统采用分层架构，分为表现层、业务逻辑层、数据持久层，各层通过接口解耦。

功能介绍

系统分为管理员、验机机构（验货平台，多平台）、普通用户（既是买家也可以是卖家）三种角色；

系统分为前后台，管理员和平台仅有后台管理，用户可以登录前台和后台，不同角色后台功能不一样；

管理员：

商品管理、用户管理（除基本增删改查还可以对用户信用打分，买家和卖家都可以看到）、平台管理、查看所有订单、活动管理（给用户发券，统一所有用户可以收到）、投诉管理等；

验机平台：

平台给需要验机的商品填写一个报告。

普通用户（可以自助注册）：

1.电子产品管理：用户根据实际情况填写商品信息，包括标题、描述、品牌、型号、成色、验机报告（可选）、保修状态、价格等，上传图片或视频。用户需要选择电子产品分类，比如手机、电脑、相机、配件等。可以对商品信息修改和删除。可以查看发布的商品浏览量。

2.在线交流：买家和卖家可以发消息交流。

3.在前台加入购物车和付款（假支付）。等报告出来后买家可以选择退货或者同意接收。

4.地址管理，增删改查地址信息。

5.在前台首页有搜索框。首页有轮播图，有商品展示等。

6.订单管理，在这里可以查看验机报告和上面3提到的退货或接收。评价功能。

7.投诉买家或者卖家。

技术介绍

后端：Java语言的SSH框架、MySQL8数据库、Maven依赖管理等；

前端：使用Vue、element-ui、axios等。

登录页面代码

<template><article class="sign_in"><div class="warp"><el-row><el-col><el-form style="background-color:rgba(0, 0, 0, 0.35);" :model="form" :rules="rules" ref="form" label-width="60px" class="form"><h1 class="margin-10 text-white">{{siteTitle}}</h1><el-form-item label="账号" prop="account"><el-input type="text" v-model="form.account" placeholder="请输入用户名"></el-input></el-form-item><el-form-item label="密码" prop="password"><el-input type="password" v-model="form.password" placeholder="请输入密码"autocomplete="off"></el-input></el-form-item><div class="btns"><el-button type="primary" @click="sign_in()">登录</el-button><router-link class="el-button el-button--primary" to="./register">注册</router-link></div><!-- <div class="btns"><router-link to="./forgot" >忘记密码?</router-link></div> --></el-form></el-col></el-row></div></article>
</template><script>import SlidePicture from "@/components/common/slidePicture";import common from '@/common/commonRequest.js'export default {data: function() {return {// 极验状态开始isGeeFinish: false,// 极验状态结束oauth: {signIn: false},user:false,web: this.$store.state.web,form: {account: "",password: ""},remember_me: 1,rules: {account: [{required: true,message: '请输入账号',trigger: 'blur'},{min: 1,max: 20,message: '长度在 1 到 20 个字符',trigger: 'blur'}],password: [{required: true,message: '请输入密码',trigger: 'blur'},{min: 1,max: 16,message: '长度在 1 到 20 个字符',trigger: 'blur'}]}}},methods: {// 极验滑块事件开始slidePictureState(state) {if (state === true) {// 成功this.$message.success("哇塞~检验成功，速度战胜99%的用户，请进行登录");this.isGeeFinish = true;} else {this.isGeeFinish = false;}},// 极验滑块事件开始sign_in() {var f = this.form;var form = {password: f.password};var account = f.account + '';// 账号类型判断if (account.indexOf('@') !== -1) {form.email = account;} else if (/1[0-9]{10}/.test(account)) {form.phone = account;} else {form.username = account;}if(!this.form.account){return this.$message.warning("请输入正确账号")}else if(!this.form.password){return this.$message.warning("请输入正确密码")}let _this = this;common.request({data: {nickName: this.form.account,password: window.btoa(this.form.password)},url: common.urlMap.login,success: function(res) {if (res.data.code == 200) {// try {_this.user = res.data.data;if(!_this.user.uid){common.err("登录异常");_this.$router.push("/login");return;}else{localStorage.setItem('userInfo', JSON.stringify(res.data.data));_this.saveUserInfo(_this.user);}if(_this.user.type == 2){_this.$router.push("/mainPage");}else{_this.$router.push("/");}} else {common.err(res.data.msg);}},fail: function(res) {alert(res)  common.err("网络异常");}})},logOut() {localStorage.removeItem("userInfo");this.user = false;common.request({url: common.urlMap.logout});},saveUserInfo(data){data['user_id'] = data.uid;data['username'] = data.nickName;data['user_group'] = data.type == 1?'管理员':'用户';data['token'] = data.token;this.$store.commit('user_set', data);}},created() {},mounted() {},components:{SlidePicture}	}
</script>

演示视频