本系统基于springboot脚手架开发,完整的二手商城交易系统
前台:(1)二手物品信息查看、搜索。
(2)学生注册登录、个人信息修改。
(3)二手物品信息发布、编辑。
(4)二手物品评论、回复、举报。
(5)求购信息发布。
(6)求购信息查看。
后台:(1)管理员登录。
(2)系统管理:菜单管理、角色用户管理、权限管理、日志管理、数据库备份。
(3)业务管理:二手物品管理、求购物品管理、学生信息管理、评论管理、举报管理。
(4)站点管理:友情链接管理、站点基本信息(站点名称、logo、版权等)设置。
系统工作流程设计
首页代码
<!DOCTYPE html>
<html>
<head>
<title>Home</title>
<link href="/recovery/css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="/recovery/js/jquery.min.js"></script>
<!-- Custom Theme files -->
<!--theme-style-->
<link href="/recovery/css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--//theme-style-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Acrostia Responsive web template, Bootstrap Web Templates, Flat Web Templates, Andriod Compatible web template,
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyErricsson, Motorola web design" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--fonts-->
<link href='http://fonts.useso.com/css?family=Lato:300,400,700,900' rel='stylesheet' type='text/css'>
<!--//fonts-->
<script src="/recovery/js/responsiveslides.min.js"></script>
<script>
$(function () {
$("#slider").responsiveSlides({
auto: true,
nav: true,
speed: 500,
namespace: "callbacks",
pager: true,
});
});
</script>
<!---->
<script type="text/javascript" src="/recovery/js/move-top.js"></script>
<script type="text/javascript" src="/recovery/js/easing.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
});
});
</script>
<style>
/*--idea-starts--*/
.idea{
padding:8em 0px;
background-color: #84bf96;
}
.idea-right h3 {
font-weight: bold;
font-family: 微软雅黑;
}
.idea-right p {
color: #5e5e5e;
font-size: 16px;
width: 92%;
font-weight: 400;
margin-top: 1.5em;
line-height: 1.8em;
font-family: 'Open Sans', sans-serif;
}
.i-btn{
margin-top:3em;
}
.i-btn a {
color: #414141;
padding: 12px 2.1em;
border: 2px solid #414141;
font-size: 16px;
font-weight: 700;
border-radius: 0.3em;
background:#fff;
}
.i-btn a:hover,.team-msg-right a:hover,.error-btn a:hover{
background:#45b887;
color:#fff;
border: 2px solid #fff;
transition: 0.5s all ease;
-webkit-transition: 0.5s all ease;
-moz-transition: 0.5s all ease;
-o-transition: 0.5s all ease;
-ms-transition: 0.5s all ease;
}
.idea-top:nth-child(3){
margin-top:5em;
}
.idea-top:nth-child(4){
margin-top:5em;
}
.idea-left {
text-align: center;
}
.id-left{
margin-top:3%;
}
/*--idea-ends--*/
#zxd_x{
width:20px;
height:20px;
text-align:center;
font-size:16px;
color:red;
position:absolute;
right:0px;
top:0px;
cursor:pointer;
}
.content img{
width: 40px;
height: 40px;
}
/*--information--*/
.information-section {
background: url(/recovery/images/info-bg.jpg) no-repeat 0px 0px;
min-height: 340px;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
}
.information-grids {
padding-top: 2em;
}
.info-grid {
background: #007d65;
padding: 1.7em 2em;
width: 32%;
margin: 0px 7px;
}
.info-grid h3 {
font-family: 'Lora', serif;
color: #fff;
font-size: 2em;
font-weight: 400;
margin: 0;
padding: 0.4em 0;
}
ul.loction-text {
padding: 0;
}
ul.loction-text li, ul.loction-text li a {
display: block;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
vertical-align: middle;
text-decoration: none;
color: #B0ADAD;
margin: 0.5em 0;
line-height: 1.2em;
font-size: 1.05em;
}
ul.loction-text li, ul.loction-text li a:hover {
color: #fff;
}
.info-grid.information {
padding: 1.75em 2em;
}
.list.styled.arrow-list2 ul li {
list-style: none;
display: block;
}
.list.styled.arrow-list2 ul li a {
display: block;
-webkit-transition: 0.8s;
-moz-transition: 0.8s;
-o-transition: 0.8s;
transition: 0.8s;
text-decoration: none;
color: #424242;
margin: 0.5em 0;
line-height: 1.7em;
font-size: 1.05em;
}
.list.styled.arrow-list2.two ul li a {
color: #B0ADAD;
}
.list.styled.arrow-list2.two ul li a:hover {
color: #fff;
margin-left: 4px;
}
.list.styled.arrow-list2 ul li a img {
margin-right: 10px;
}
.info-grid h4 {
color: #D8D8D8;
font-size: 1.4em;
font-weight: 400;
margin: 0;
padding: 0.2em 0 0.8em;
}
.info-grid p {
color: #B0ADAD;
font-size: 1.04em;
font-weight: 400;
margin: 0;
line-height: 1.6em;
}
/*--/information--*/
</style>
</head>
<body>
<!--header-->
<!--banner-->
<div class="banner" id="home">
<!-- 用户图标 -->
<div style="z-index:999;display: block; position: fixed; right: 120px; top: 12px;">
<div id="zxd_x">
<a title="点击关闭"><b></b></a></div>
<div class="content"><a href="/home/index/login"><img src="/recovery/images/user.png"></a></div>
</div>
<!-- 巨幕 -->
<div class="slider" >
<div class="callbacks_container">
<ul class="rslides" id="slider">
<li>
<img src="/recovery/images/banner1.jpg" alt="">
</li>
<li>
<img src="/recovery/images/banner2.jpg" alt="">
</li>
<li>
<img src="/recovery/images/banner3.jpg" alt="">
</li>
</ul>
</div>
</div>
</div>
<!---->
<div class="header" >
<div class="container">
<div class="fixed-header">
<div class="logo">
<a href="index.html"><img src="/recovery/images/logo.png" alt=" " /></a>
</div>
<div class="top-nav cssmenu">
<nav class="nav clearfix">
<a id="menu-toggle" class="anchor-link"><img src="/recovery/images/menu.png" alt="" /></a>
<ul class="simple-toggle" id="nav">
<li class="current"><a href="#home" class="scroll">首页</a></li>
<li ><a href="#laji" class="scroll">垃圾回收</a></li>
<li ><a href="#shangcheng" class="scroll">二手商城</a></li>
<li><a href="#juanzeng" class="scroll">爱心捐献</a></li>
</ul>
</nav>
<script type="text/javascript">
$(document).ready(function() {
$('#menu-toggle').click(function () {
$('#nav').toggleClass('open');
e.preventDefault();
});
});
</script>
<!---->
<script src="/recovery/js/jquery.nav.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#nav').onePageNav({
begin: function() {
console.log('start')
},
end: function() {
console.log('stop')
}
});
});
</script>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
var navoffeset=$(".header").offset().top;
$(window).scroll(function(){
var scrollpos=$(window).scrollTop();
if(scrollpos >=navoffeset){
$(".header").addClass("fixed");
}else{
$(".header").removeClass("fixed");
}
});
});
</script>
<!-- /script-for sticky-nav -->
<!--start-idea-->
<div class="idea" id="laji">
<div class="container">
<div class="idea-main">
<div class="idea-top">
<div class="col-md-5 idea-left id-left">
<img src="/recovery/images/垃圾回收s1.png" alt="" />
</div>
<div class="col-md-7 idea-right id-right">
<h3>垃圾分一分,环保多一份,环境每一份,健康加一分</h3>
<p>根据《城市生活垃圾分类及其评价标准》行业标准,可回收物是指适宜回收循环使用和资源利用的废物。主要包括:⒈纸类:未严重玷污的文字用纸、包装用纸和其他纸制品等。如报纸、各种包装纸、办公用纸、广告纸片、纸盒等;⒉塑料:废容器塑料、包装塑料等塑料制品。比如各种塑料袋、塑料瓶、泡沫塑料、一次性塑料餐盒餐具、硬塑料等;⒊金属:各种类别的废金属物品。如易拉罐、铁皮罐头盒、铅皮牙膏皮、废电池等;⒋玻璃:有色和无色废玻璃制品;⒌织物:旧纺织衣物和纺织制品</p>
<div class="i-btn">
<a href="/index/recovery">点击进入垃圾分类</a>
</div>
</div>
<div class="clearfix"></div>
</div>
<!--information-->
<div class="information-section">
<div class="container">
<div class="information-grids wow bounceInLeft animated" data-wow-delay="0.4s" style="visibility: visible; -webkit-animation-delay: 0.4s;">
<div class="col-md-4 info-grid loction">
<h3>联系方式</h3>
<ul class="loction-text">
<li>电话:123456</li>
<li>地址:苏州吴中区</li>
<li>邮编:214214</li>
<li><img src="/recovery/images/mail.png" alt=""></li>
<li><a href="mailto:info@example.com">123456@qq.com</a></li>
<div class="clearfix"> </div>
</ul>
</div>
<div class="col-md-4 info-grid information">
<h3>我们的站点</h3>
<div class="list styled arrow-list2 two">
<ul>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">苏州高博站点</a></li>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">苏州高博站点</a></li>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">苏州高博站点</a></li>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">苏州高博站点</a></li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="col-md-4 info-grid custom">
<h3>回收价格</h3>
<div class="list styled arrow-list2 two">
<ul>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">纸类:0.5毛/斤</a></li>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">金属类:100元/公斤</a></li>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">衣物类:5元/斤</a></li>
<li><a href="#"><img src="/recovery/images/tick1.png" alt="">电器类:100元/斤</a></li>
<div class="clearfix"> </div>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
</div>
</div>
<!--/information-->
<div class="idea-top" id="shangcheng" >
<div class="col-md-7 idea-right id-one-left">
<h3>集四面八方货物,供千家万户需求</h3>
<p>都来买,都再买;你想要的,这里都有。优惠都来买,优质随您挑。你来买,我来买,大家都来买。</p>
<div class="i-btn">
<a href="/home/index/login">点击进入商城</a>
</div>
</div>
<div class="col-md-5 idea-left id-one-right">
<img src="/recovery/images/二手商城.jpg" alt="" />
</div>
<div class="clearfix"></div>
</div>
<div class="idea-top" id="juanzeng">
<div class="col-md-5 idea-left id-left">
<img src="/recovery/images/爱心.jpg" height="199px" width="329px" alt="" />
</div>
<div class="col-md-7 idea-right id-right">
<h3>涓滴之水成海洋,颗颗爱心变希望</h3>
<p>爱心是一滴洒落在花萼的甘露,使心田久涸的人得到滋润爱心是一句飘荡在寒晨的问候,使奔波劳累的人感到振奋。爱心是一股流淌在沙漠的泉水,使口渴得难忍的人感到生命的可贵。爱心是一首飘荡在夜空的歌谣,使孤独无依的人获得心灵的慰藉。爱心是一泓出此刻沙漠里的清泉,使濒临绝境的人重新看到生活的希望。爱心是一首飘荡在夜空的歌谣,使孤独无依的人获得心灵慰藉。</p>
<div class="i-btn">
<a href="/index/lovedonation">我要捐献</a>
</div>
</div>
<div class="clearfix"></div>
</div>
</div>
</div>
</div>
<!--end-idea-->
<!--start-footer-->
<div class="footer">
<div class="container">
<div class="footer-text">
<p>Copyright © 2021.Company All rights reserved.<a target="_blank" href="http://h2design.taobao.com/">CityGC</a></p>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
/*
var defaults = {
containerID: 'toTop', // fading element id
containerHoverID: 'toTopHover', // fading element hover id
scrollSpeed: 1200,
easingType: 'linear'
};
*/
$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
</div>
<!--End-footer-->
</body>
</html>
下面展示图片介绍
首页
商品详情
个人信息
后台首页