|
项目说明及需求设计思路具体实现
注册界面用户登录修改密码商品列表管理员登录管理员操作小黑屋管理库存服装删除添加更新商品信息数据库信息 回顾与反思源码下载
项目说明及需求
建立和维护一个的Web网站必须有数据库操作部分，即对表的增改删和浏览功能要有浏览数据库内容的功能最好有分页浏览功能。
设计思路
我和另外一个同学两个人共同完成这个项目，考虑到时间的安排，以及需求，我们打算就做一个类似于淘宝的服装销售网站。 其次，这个方案很好的符合我们的需求，初始需要一个数据库来构建商品目录，且只有管理员登录才能对该数据库经行操作修改。 然后就是用户的需求，需要注册和登录才能够使用该平台。用户账户密码使用数据库经行存储。 销售平台给出商品列表。
具体实现
平台： Eclipse Jee Neon MySQL 5.6 Tomcat v9.0 Server
注册界面
注册界面
body{
margin:0 15%;
}
h1{
text-align:center;
font-size:1.3em;
font-family:"微软雅黑";
color:#ffffff;
padding-top:40px;
}
p{
text-align:center;
font-family:"微软雅黑";
}
.head img{
float:left;
margin-left:80px;
margin-top:10px;
}
.middle img{
float:left;
margin-left:80px;
margin-top:35px;
}
span{
float:left;
margin-left:40px;
margin-top:25px;
font-weight: bold;
font-family:"微软雅黑";
letter-spacing: 0.1em;
font-size:2em;
}
.middle {
float: left;
margin-top: 20px;
width: 1000px;
height: 400px;
background:
url(https://images.pexels.com/photos/192632/pexels-photo-192632.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb)
no-repeat;
}
input{
border-radius:5px;
border: 1px solid #999999;
box-shadow: 1px 1px 3px #cccccc;
}
form{
width:320px;
height:360px;
background-color:rgba(113,119,116,0.3);
margin-left:600px;
margin-top:20px;
text-align:center;
position:relative;
z-index:2;
border-radius:5px;
}
#sub1{
background-color:#E4393C;
color:white;
width:240px;
height:30px;
margin-left:20px;
font-size:1em;
font-family:"微软雅黑";
}
#user{
width:200px;
height:20px;
margin-left:8px;
font-family:"微软雅黑";
}
#psw{
width:200px;
height:20px;
margin-left:8px;
font-family:"微软雅黑";
}
#sub3{
background-color:rgb(234,227,208);
color:rgb(181,170,141);
width:240px;
height:30px;
margin-left:20px;
margin-top:14px;
font-size:1em;
font-family:"微软雅黑";
}
a[href] {
text-decoration:none;
font-family:"微软雅黑";
color:#000000;
}
a[href]:hover {
text-decoration:underline;
font-family:"微软雅黑";
color:red;
}
form a[href]{
color:red;
}
.tail{
float:left;
margin-top:35px;
font-size:0.4em;
font-family:"微软雅黑";
width:100%;
}
footer_copyright{
width:100%;
}
.tag1{
float:left;
margin-left:280px;
width:100px;
}
.sep{
float:left;
margin-left:10px;
width:5px;
position:absolute;
}
.tag2{
float:left;
margin-left:50px;
width:130px;
position:absolute;
}
.tag3{
float:left;
margin-left:200px;
position:absolute;
}
.footer_icon img{
float:left;
margin-left:250px;
margin-top:13px;
}
#redone {
text-decoration:none;
color:rgb(234,227,208);
font-size:1.2em;
}
alert("请输入你的注册用户名!");
alert("用户名长度不合法");
alert("请输入你的注册密码!");
alert("密码只能是3-16位的数字,英文,下划线组合!");
0){
msg = "保存成功!";
}%>
alert("恭喜,您已经完成注册!");
alert("该用户名已经被注册,请更换用户名!");
账户注册
用 户 名：
设置密码 ：
我已经注册，现在就登录
Web 2017
|
H & J
联系邮箱
用户登录
用户登录
用户：
密码 ：
忘记密码？
修改密码
if(request.getMethod().equalsIgnoreCase("post")){
try{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(connectString,"user", "123");
Statement stmt = con.createStatement();
user = request.getParameter("user");
psw = request.getParameter("psw");
puser=user;
if(user==""){
msg="请输入你的用户名!";%>
alert("请输入你的用户名!");
alert("用户名长度必须为6位!");
alert("请输入你的新密码!");
alert("密码只能是3-16位的数字,英文,下划线组合!");
alert("用户名不存在,请重新注册!");
0){
msg = "修改成功!";
}
%>
alert("恭喜,您已经完成密码修改!");
alert("该用户名已经被注册,请更换用户名!");
商品列表
0 && rs.next()){
pg--;
}
}
while(rs.next() && (goods_num++
¥
上一页
下一页
管理员登录
if(request.getMethod().equalsIgnoreCase("post")){
try{
user = request.getParameter("user");
psw = request.getParameter("psw");
if(user.equals("admin")&&psw.equals("111")){
msg="登录成功";
response.sendRedirect("manage.jsp");
}
else{
msg="登录失败";%>
alert("密码错误,请重新输入!");
管理员操作
系统管理员操作
是小黑屋
服装管理
小黑屋
if(request.getMethod().equalsIgnoreCase("post")){
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection(connectString,"user", "123");
Statement stmt = con.createStatement();
try{
id = request.getParameter("id");
if(id==""){%>
alert("请输入用户ID!");
alert("用户名不存在!");
0){
msg = "Delete Success!";
%>
alert("黑名单添加成功!");
管理库存服装
管理库存服装
删除商品
添加商品
更新商品信息
返回管理员操作界面
删除、添加、更新商品信息
 增加与删除类似 
数据库信息
包括用户信息表和商品信息表 
回顾与反思
实际上这个系统的基本架构十分完整，只不过在UI和数据库丰富度上还不够完善，仍然有很大的修改和提升空间。
源码下载
项目源码 【newshop】
|