一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第24天，点击查看活动详情。
课设：基于jsp的手机商城的设计与实现
第一章 需求分析
在线手机商城系统是当前海量手机商品信息在线管理的最好系统，用户可以在该系统上对手机商品进行具体浏览，也可以了解最新的手机商品信息。该系统的最大优势在于可以获取手机商品的全网最低价格，帮助用户以最低的价格获得最优质的手机商品，随着人们对新品手机上市的关注力度逐渐增加，该系统的用户量将会逐年倍增！
1.1 课程设计题目
随着互联网的发展，在线商城系统日益完善。生活中用户查询手机商品和了解手机商品信息的需求也在不断增加，使网络与人们的生活息息相关。在线商城系统方便了手机商品的查询与货比，真正使信息得以共享，改变了人们的工作和生活方式。在线手机销售是手机公司，实体店提高销量的有效方式，同时也为用户了解手机市场提供了有力保障。所以手机商城正慢慢成为一种全新的在线销售方式。也正是由于互联网的数据信息能够进行有效交互，确保了在线数据的可靠性。
1.2 课程设计任务及要求
在当下这个发展快速的信息化时代，越来越多的手机销售机构开始建立或者已经使用起手机销售系统，利用计算机和网络对信息进行管理已是大势所趋。商城系统必将代替之前繁琐的人工销售模式，实现由复杂、冗余性手工操作向人机简便操作的转化，运用计算机完成商品的查看、购买等，提高了用户的交易体验感，也避免繁重的业务量造成的人为错误，还可运用信息共享加快数据传递。通过对商城系统的操作，既节省大量的人力与物力，又不用保存与整理数据文件，将一切信息转化为数字化，提高了工作效率。该系统运用已经学习过的Java知识，JSP知识和前端数据库相关的知识来设计和实现的让人们可以更方便的操作，方式非常的友好。
1.3 系统开发技术和环境
软件体系：Javaweb方面的编写采用IDEA，使用jdk1.8进行编写，数据库方面的编写采用8.0数据库和SQLyog。
1.3.1 IDEA简介
IDEA 全称 IntelliJ IDEA，是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具，尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、JUnit、CVS整合、代码分析、 创新的GUI设计等方面的功能可以说是超常的。IDEA是JetBrains公司的产品，这家公司总部位于捷克共和国的首都布拉格，开发人员以严谨著称的东欧程序员为主。它的旗舰版本还支持HTML，CSS，PHP，MySQL，Python等。免费版只支持Java等少数语言。 在很多时候我们要选取某个方法，或某个循环或想一步一步从一个变量到整个类慢慢扩充着选取，IDEA就提供这种基于语法的选择，在默认设置中Ctrl+W，可以实现选取范围的不断扩充，这种方式在重构的时候尤其显得方便。IDEA提供了丰富的导航查看模式，例如Ctrl+E显示最近打开过的文件，Ctrl+N显示你希望显示的类名查找框（该框同样有智能补充功能，当你输入字母后IDEA将显示所有候选类名）。在最基本的project视图中，你还可以选择多种的视图方式。
1.3.2 SQLyog简介
SQLyog 是一个快速而简洁的图形化管理MYSQL数据库的工具，它能够在任何地点有效地管理你的数据库，由业界著名的Webyog公司出品。
使用SQLyog可以快速直观地让您从世界的任何角落通过网络来维护远端的MySQL数据库。
SQLyog是业界著名的Webyog公司出品的一款简洁高效、功能强大的图形化MySQL数据库管理工具。使用SQLyog可以快速直观地让您从世界的任何角落通过网络来维护远端的MySQL数据库。SQLyog相比其他类似的MySQL数据库管理工具其有如下特点:
（1）基于C++和MySQLAPI编程；
（2）方便快捷的数据库同步与数据库结构同步工具；
（3）易用的数据库、数据表备份与还原功能；
（4）支持导入与导出XML、HTML、CSV等多种格式的数据；
（5）直接运行批量SQL脚本文件，速度极快；
（6）新版本更是增加了强大的数据迁移。
1.3.3 性能需求
该系统在性能功能上达到如下需求：
（1）操作简单、界面友好：提供可视化的操作，用户只需要点击所想要进行操作的按钮即可以实现想要进行的操作，并且具有单独的输入框，方便用户进行输入操作。
（2）实时更新：对订单的状态（已下单，已取消，已付款等）将根据用户的操作立即在后台数据库中进行更新，达到“即时操作、即时生效”的功能；
（3）系统运行应该快速、稳定、高效和可靠；
（4）在结构上应具有很好的可扩展性，便于将来的功能扩展和维护。
（5）功能上，手机商城的功能分为两个模块。在注册模块上面：包括用户输入用户名和密码来完成注册。在登录模块：包括手机商品的浏览，手机商品的分类查看，手机商品信息的查询，下单购买手机商品，以及退出系统等5个部分。
首页.html:
<!DOCTYPE HTML>
<html lang="zxx">
<head>
<title>登录</title>
<!-- Meta tag Keywords -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="UTF-8" />
<meta name="keywords" content="Triple Forms Responsive Widget,Login form widgets, Sign up Web forms , Login signup Responsive web form,Flat Pricing table,Flat Drop downs,Registration Forms,News letter Forms,Elements" />
<script src="js/jquery.1.8.3.min.js"></script>
<script>
addEventListener("load", function () {
setTimeout(hideURLbar, 0);
}, false);
function hideURLbar() {
window.scrollTo(0, 1);
}
$(function () {
$("#login").click(function () {
var lname = $("#lname").val();
var lpwd = $("#lpwd").val();
$.ajax({
url: "/Phone_Store/doLogin", //请求地址
data: {username:lname,pwd:lpwd} ,//参数
type: "POST", //请求方式
success:function (result) {
if (result==1){
alert("欢迎"+lname+"登录");
location.href="shouye.html?username="+lname+"";
}
else{
alert("请先注册或者核实您的账号密码");
}
}
});
});
$("#zc").click(function () {
var zname = $("#zname").val();
var zpwd = $("#zpwd").val();
if ((zname.length<3 || zname.length>15)&&(zpwd.length<6||zpwd.length>18)){
alert("用户名或密码不符合规则");
}
else{
$.ajax({
url: "/Phone_Store/doZhuCe", //请求地址
data: {username:zname,pwd:zpwd} ,//参数
type: "POST", //请求方式
success:function (result) {
alert("注册成功,请登录");
}
});
}
});
})
</script>
<!-- Meta tag Keywords -->
<!-- css files -->
<link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
<!-- Style-CSS -->
<link href="css/font-awesome.min.css" rel="stylesheet">
<!-- Font-Awesome-Icons-CSS -->
<!-- //css files -->
</head>
<body>
<div class="main-bg" id="mian">
<!-- title -->
<h1>KD手机商城</h1>
<!-- //title -->
<div class="sub-main-w3">
<div class="image-style">
</div>
<!-- vertical tabs -->
<div class="vertical-tab">
<div id="section1" class="section-w3ls">
<input type="radio" name="sections" id="option1" checked>
<label for="option1" class="icon-left-w3pvt"><span class="fa fa-user-circle" aria-hidden="true"></span>登录</label>
<article>
<form>
<h3 class="legend">账号登录</h3>
<div class="input">
<span class="fa fa-user-o" aria-hidden="true"></span>
<input type="text" id="lname" v-model="logindata.email" placeholder="用户名" name="username" required />
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="true"></span>
<input type="password" id="lpwd" placeholder="密码" name="password" required />
</div>
<button type="button" class="btn submit" id="login">登 录</button>
<a href="#" class="bottom-text-w3ls">忘记密码?</a>
</form>
</article>
</div>
<div id="section2" class="section-w3ls">
<input type="radio" name="sections" id="option2">
<label for="option2" class="icon-left-w3pvt"><span class="fa fa-pencil-square" aria-hidden="true"></span>注册</label>
<article>
<form>
<h3 class="legend">注册帐户</h3>
<div class="input">
<span class="fa fa-user-o" aria-hidden="true"></span>
<input type="text" id="zname" placeholder="用户名长度要大于2小于16" name="name" required />
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="true"></span>
<input type="password" id="zpwd" placeholder="密码长度大于5小于18" name="password" required />
</div>
<div class="input">
<span class="fa fa-key" aria-hidden="true"></span>
<input type="password" placeholder="确认密码" name="confirmPassword" required />
</div>
<button type="button" class="btn submit" id="zc">注 册</button>
</form>
</article>
</div>
<div id="section3" class="section-w3ls">
<input type="radio" name="sections" id="option3">
<label for="option3" class="icon-left-w3pvt"><span class="fa fa-lock" aria-hidden="true"></span>忘记密码?</label>
<article>
<form>
<h3 class="legend last">重置账号</h3>
<p class="para-style">请输入您的电子邮件地址，我们将给您发送一封带有说明的电子邮件。</p>
<p class="para-style-2"><strong>需要帮助?</strong>了解更多关于如何 <a href="#"></a></p>
<div class="input">
<span class="fa fa-envelope-o" aria-hidden="true"></span>
<input type="email" placeholder="邮箱" name="email" required />
</div>
<button type="button" class="btn submit last-btn">提交</button>
</form>
</article>
</div>
</div>
<!-- //vertical tabs -->
<div class="clear"></div>
</div>
</div>
</body>
</html>
部分css：
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
sub,
sup,
tt,
var,
b,
u,
i,
dl,
dt,
dd,
ol,
nav ul,
nav li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
copyright,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
article,
aside,
details,
figcaption,
figure,
copyright,
header,
hgroup,
menu,
nav,
section {
display: block;
}
ol,
ul {
list-style: none;
margin: 0px;
padding: 0px;
}
blockquote,
q {
quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
.txt-rt {
text-align: right;
}
/* text align right */
.txt-lt {
text-align: left;
}
/* text align left */
.txt-center {
text-align: center;
}
/* text align center */
.float-rt {
float: right;
}
/* float right */
.float-lt {
float: left;
}
部分js：
//根据传递过来的参数name获取对应的值
function getParameter(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)","i");
var r = location.search.substr(1).match(reg);
if (r!=null) return (r[2]); return null;
}
效果图如下:
尾言
这是课设的前端部分代码以及部分报告，如果觉得还不错的话，欢迎点赞收藏哦
