目 录
摘 要 I
Abstract II
1 绪论 1
1.1 选题背景及意义 1
1.1.1选题背景 1
1.1.2选题意义 1
1.2国内外研究现状及发展趋势 2
1.2.1国内研究现状 2
1.2.2国外研究现状 2
1.2.3发展趋势 2
1.3 研究主要内容 3
2 系统开发环境 4
2.1 SSM框架 4
2.2 Java简介 4
2.3 B/S结构 5
2.4访问数据库实现方法 6
2.5 MySQL数据库 7
2.6系统对MySQL数据库的两种连接方式 8
3 需求分析 11
3.1技术可行性:技术背景 11
3.2经济可行性 11
3.3操作可行性 12
3.4系统设计规则 13
3.5系统流程和逻辑 13
4系统设计 17
4.1 概述 17
4.2 系统结构 17
4.3. 数据库设计 18
4.3.1 数据库实体 18
4.3.2 数据库设计表 19
5 系统实现 24
5.1系统功能模块 24
5.2管理员功能模块 25
5.3机构功能模块 30
5.4用户功能模块 31
6 系统测试 33
6.1系统测试的目的 33
6.2系统测试方法 33
6.3 测试结果 34
结 论 35
致 谢 36
参考文献 37
1.3 研究主要内容
本研究的主要内容是设计并实现一个基于SSM(Spring + SpringMVC + MyBatis)框架的闲置衣物捐赠系统。该系统旨在解决当前闲置衣物资源浪费和环境压力的问题,促进衣物的合理利用和捐赠。
研究将分为以下几个主要部分:
需求分析:对系统的功能需求、性能需求、用户需求等进行详细的分析和梳理,确保系统能够满足实际应用的需要。
系统设计:根据需求分析的结果,设计系统的整体架构、数据库结构、功能模块等。同时,选择合适的开发语言、框架和工具进行系统的开发。
系统实现:按照系统设计的方案,进行具体的编码和开发工作。实现系统的各个功能模块,包括用户管理、衣物管理、捐赠申请、物流管理等。
系统测试:在系统实现完成后,进行系统的测试工作。通过单元测试、集成测试、性能测试等方式,确保系统的稳定性和可靠性。
系统部署与维护:将系统部署到实际运行环境中,进行持续的维护和更新工作。确保系统的正常运行和数据的安全可靠。
在整个研究过程中,将注重理论与实践相结合,充分利用现有的技术和工具,实现一个高效、稳定、易维护的闲置衣物捐赠系统。同时,也将关注系统的可扩展性和可维护性,为后续的功能扩展和系统升级提供便利。
此外,研究还将探讨如何通过技术手段提高系统的用户体验和交互性,增强用户的参与度和满意度。例如,通过引入智能推荐算法,为用户推荐合适的捐赠衣物;通过优化界面设计和交互流程,提高用户的操作便捷性和舒适性。
综上所述,本研究的主要内容是设计并实现一个基于SSM框架的闲置衣物捐赠系统,以解决当前闲置衣物资源浪费和环境压力的问题。研究将注重理论与实践相结合,充分利用现有的技术和工具,实现一个高效、稳定、易维护的系统,并探讨如何通过技术手段提高系统的用户体验和交互性。
<!-- 首页 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>首页</title>
<link rel="stylesheet" href="./layui/css/layui.css">
<link rel="stylesheet" href="./xznstatic/css/common.css"/>
<link rel="stylesheet" href="./xznstatic/css/style.css"/>
</head>
<style type="text/css">
html, body {
height: 100%;
}
#iframe {
width: 100%;
margin-top: 50px;
padding-top: 100px;
}
#header {
height: auto;
background: #fff;
border-bottom: 0;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#header .nav-top {
display: flex;
align-items: center;
padding: 0 20px;
font-size: 16px;
color: #2a8a15;
box-sizing: border-box;
height: 50px;
background-color: rgba(38, 155, 158, 1);
box-shadow: 0 0px 6px rgba(15,98,108);
justify-content: center;
position: relative;
}
#header .nav-top-img {
width: 124px;
height: 40px;
padding: 0;
margin: 0;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
#header .nav-top-title {
line-height: 30px;
font-size: 25px;
color: rgba(255, 255, 255, 1);
padding: 0 20px;
margin: 0 20px;
border-radius: 6px;
border-width: 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 0px rgba(0,0,0,.3);
}
#header .nav-top-tel {
line-height: 0px;
font-size: 20px;
color: rgba(255, 255, 255, 1);
padding: 0px 20px;
margin: 0px 20px;
border-radius: 20px;
border-width: 0px;
border-style: solid;
border-color: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 6px rgba(0,0,0,.3);
}
#header .navs {
display: flex;
padding: 0 20px;
align-items: center;
box-sizing: border-box;
height: 100px;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 1px 6px rgba(0,0,0,0);
justify-content: center;
}
#header .navs .title {
width: auto;
line-height: 40px;
font-size: 25px;
color: rgba(255, 255, 255, 1);
padding: 0;
margin: 0 0 0 30px;
border-radius: 6px;
border-width: 0;
border-style: solid;
border-color: rgba(0,0,0,.3);
box-shadow: 0 0 6px rgba(0,0,0,0);
}
#header .navs li {
display: inline-block;
width: auto;
line-height: 35px;
padding: 0 20px;
margin: 0 5px;
color: rgba(0, 0, 0, 1);
font-size: 20px;
border-radius: 10px;
border-width: 0px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.3);
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 0 0px rgba(0,0,0,.1);
text-align: center;
}
#header .navs li a{
color: inherit;
}
#header .navs li.current a{
color: inherit;
}
#header .navs li a:hover{
color: inherit;
}
#header .navs li.current {
color: rgba(255, 255, 255, 1);
font-size: 18px;
border-radius: 10px;
border-width: 10px;
border-style: solid;
border-color: rgba(38, 155, 158, 1);
background-color: rgba(38, 155, 158, 1);
box-shadow: 0 0 0px #269B9E;
}
#header .navs li:hover {
color: rgba(255, 255, 255, 1);
font-size: 16px;
border-radius: 10px;
border-width: 10px;
border-style: solid;
border-color: rgba(38, 155, 158, 1);
background-color: rgba(38, 155, 158, 1);
box-shadow: 0 0 0px rgba(0,0,0,.3);
}
</style>
<body>
<!-- start 顶部导航栏 -->
<div id="header">
<div v-if='true' class="nav-top">
<img v-if='false' class="nav-top-img" src='https://www.baidu.com/img/flexible/logo/pc/result@2.png'>
<div v-if="true" class="nav-top-title">{{projectName}}</div>
<div class="nav-top-tel"></div>
</div>
<div class="navs">
<!-- <div class="logo" style="font-size: 20px;top: 32px;color: #fff;font-weight: bold;margin-left: -200px;width: 240px;" v-text="projectName"></div> -->
<div class="title" v-if="false" v-text="projectName"></div>
<div class="list">
<ul>
<li class='current'><a href="javascript:navPage('./pages/home/home.html')" class="menumain"><i v-if="false" class="layui-icon layui-icon-home"></i>首页</a></li>
<li v-for="(item,index) in indexNav" v-bind:key="index"><a :href="'javascript:navPage(\''+item.url+'\')'" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon" :class="iconArr[index]"></i>{{item.name}}</a></li>
<li><a href="javascript:centerPage();" class="menumain"><i v-if="false" class="layui-icon layui-icon-username"></i>个人中心</a></li>
<li><a :href="adminurl" target="_blank" class="menumain" style="cursor: pointer;"><i v-if="false" class="layui-icon layui-icon-link"></i>后台管理</a></li>
<li v-if="cartFlag"><a href="javascript:navPage('./pages/shop-cart/list.html')" class="menumain"><i v-if="false" class="layui-icon"></i>购物车</a></li>
<li v-if="chatFlag"><a href="javascript:chatTap()" class="menumain"><i v-if="false" class="layui-icon"></i>联系我们</a></li>
</ul>
</div>
</div>
</div>
<!-- end 顶部导航栏 -->
<iframe src="./pages/home/home.html" id="iframe" frameborder="0" scrolling="no" width="100%" onload="changeFrameHeight"></iframe>
<div id="tabbar" v-if="true" class="tabbar" :style='{"padding":"30px 0","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"30px 0 0 0","borderColor":"rgba(0,0,0,.3)","backgroundColor":"rgba(38, 155, 158, 1)","borderRadius":"0","borderWidth":"0","borderStyle":"solid"}' style="position: relative;z-index: 999;">
<img v-if='false' :style='{"boxShadow":"0 0 6px rgba(255,0,0,.8)","margin":"0 auto","borderColor":"rgba(0,0,0,.3)","borderRadius":"100%","borderWidth":"1px","width":"44px","borderStyle":"solid","height":"44px"}' style='display: block;' src='http://codegen.caihongy.cn/20201024/ed5e326ca66f403aa3197b5fbb4ec733.jpg' />
<div :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,.8)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0, 112, 126, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="company"></div>
<div :style='{"padding":"0 10px","boxShadow":"0 0 0px rgba(255,0,0,0)","margin":"10px auto","borderColor":"rgba(0,0,0,1)","backgroundColor":"rgba(0, 112, 126, 1)","color":"#fff","textAlign":"center","borderRadius":"0","borderWidth":"0","width":"100%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="record"></div>
<div :style='{"padding":"0 10px","boxShadow":"0 0 6px rgba(255,0,0,0)","margin":"10px auto 30px auto","borderColor":"rgba(255,255,255,1)","backgroundColor":"rgba(38, 155, 158, 1)","color":"rgba(255, 255, 255, 1)","textAlign":"center","borderRadius":"0","borderWidth":"0px 0","width":"40%","lineHeight":"32px","fontSize":"14px","borderStyle":"solid"}' class="desc"></div>
</div>
<script src="./xznstatic/js/jquery-1.11.3.min.js"></script>
<script src="./layui/layui.js"></script>
<script src="./js/vue.js"></script>
<script src="./js/config.js"></script>
<script>
var vue1 = new Vue({el: '#tabbar'})
var vue = new Vue({
el: '#header',
data: {
iconArr: ['layui-icon-gift','layui-icon-email','layui-icon-logout','layui-icon-transfer','layui-icon-slider','layui-icon-print','layui-icon-cols','layui-icon-snowflake','layui-icon-note','layui-icon-flag','layui-icon-theme','layui-icon-website','layui-icon-console','layui-icon-face-surprised','layui-icon-template-1','layui-icon-app','layui-icon-read','layui-icon-component','layui-icon-file-b','layui-icon-unlink','layui-icon-tabs','layui-icon-form','layui-icon-chat'],
indexNav: indexNav,
cartFlag: cartFlag,
adminurl: adminurl,
chatFlag: chatFlag,
projectName: projectName,
},
mounted: function() {
this.bindClickOnLi();
},
created() {
this.iconArr.sort(()=>{
return (0.5-Math.random())
})
},
methods: {
jump(url) {
jump(url)
},
bindClickOnLi() {
let list = document.getElementsByTagName("li");
for(var i = 0;i<list.length;i++){
list[i].onclick = function(){
$(this).addClass("current").siblings().removeClass("current");
}
}
}
}
});
layui.use(['element','layer'], function() {
var element = layui.element;
var layer = layui.layer;
});
function chatTap(){
var userTable = localStorage.getItem('userTable');
if (userTable) {
layui.layer.open({
type: 2,
title: '联系我们',
area: ['600px', '600px'],
content: './pages/chat/chat.html'
});
} else {
window.location.href = './pages/login/login.html'
}
}
// 导航栏跳转
function navPage(url) {
localStorage.setItem('iframeUrl', url);
document.getElementById('iframe').src = url;
}
// 跳转到个人中心也
function centerPage() {
var userTable = localStorage.getItem('userTable');
if (userTable) {
localStorage.setItem('iframeUrl', './pages/' + userTable + '/center.html');
document.getElementById('iframe').src = './pages/' + userTable + '/center.html';
} else {
window.location.href = './pages/login/login.html'
}
}
var iframeUrl = localStorage.getItem('iframeUrl');
document.getElementById('iframe').src = iframeUrl || './pages/home/home.html';
// var i = 0;
setInterval(function(){
// i++;
// if(i<50) changeFrameHeight();
changeFrameHeight();
},200)
function changeFrameHeight() {
var iframe = document.getElementById('iframe');
// iframe.height = 'auto';
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.body.scrollHeight;
}
}
};
// 窗口变化时候iframe自适应
// function changeFrameHeight() {
// var header = document.getElementById('header').scrollHeight;
// let isshow = true
// var tabbar = 0
// if(isshow) {
// tabbar = document.getElementById('tabbar').scrollHeight
// }
// var ifm = document.getElementById("iframe");
// ifm.height = document.documentElement.clientHeight - header - tabbar;
// ifm.width = document.documentElement.clientWidth;
// }
// reasize 事件 窗口大小变化后执行的方法
window.onresize = function() {
changeFrameHeight();
}
</script>
</body>
</html>