期末实训项目总结
本次期末实训项目为步步糕糕点坊的网上购买系统，包含前台用户使用页面和后台管理员使用页面。项目包含四个MySQL数据库。
第一个为糕点坊的全部商品储存数据库：
第二个为糕点坊用户数据库：
第三个为步步糕管理员的数据库：
第四个为步步糕的购物车数据库：
Lib导包：
JspSmartUpload.jar 为上传图片的专用jar包
项目难点：
- 后台的分页实现
- 前台用户注册时的验证码显示与判断
- 注册时进行验证是否符合
基本的增删改查不做赘述。
一、 后台的分页实现
后台的显示先从Servlet查询到数据开始。
//改编码
request.setCharacterEncoding(“utf-8”);
response.setContentType(“text/html;charset=utf-8”);
//接收页码
String pageNoSte = request.getParameter(“pageNo”);
if (pageNoSte == null){
pageNoSte = “1”;
}
int pageNo = Integer.parseInt(pageNoSte);
//调用业务层 分页的实现
UserDao userDao = new UserDaoImpl();
ArrayList wares = userDao.getUserBypage(pageNo);
int zongjilushu = userDao.zongjilushu();
int zongyeshu = userDao.zongyeshu();
//跳转
request.setAttribute(“zongjilushu”,zongjilushu);//总记录数
request.setAttribute(“zongyeshu”,zongyeshu);//总页数
request.setAttribute(“pageNo”,pageNo); // 当前页
request.setAttribute(“wares”,wares); //记录
request.getRequestDispatcher(“list.jsp”).forward(request,response);
接收页码先判断是否为空 空则赋值1，第一页。
通过UserDao的实现类userDao.getUserBypage(pageNo);来查询出第一页的商品数据。
先设置每页记录数
int pageSize = 3; //设置每页记录数
public ArrayList getUserBypage(int pageNo) {
int start = (pageNo - 1) * pageSize;
String sql = "select * from waresty limit ?,? ";
ArrayList waresArrayList = null;
try {
waresArrayList = (ArrayList) qr.query(sql,new BeanListHandler(Wares.class),start,pageSize);
} catch (SQLException e) {
e.printStackTrace();
}
return waresArrayList;
}
数据库的总记录数和总页数：
// 总记录数
@Override
public int zongjilushu() {
String sql = “select count(*) from waresty”;
Number row = 0;
try {
row = (Number) qr.query(sql,new ScalarHandler());
} catch (SQLException e) {
e.printStackTrace();
}
int c = row.intValue();
return c;
}
// 总页数
@Override
public int zongyeshu() {
int zongjilushu = zongjilushu();
int zongyeshu = 0;
zongyeshu = (zongjilushu%pageSize == 0?zongjilushu/pageSize:zongjilushu/pageSize+1);
return zongyeshu;
}
注意总记录数取得的值要进行数据转换：
row = (Number) qr.query(sql,new ScalarHandler());
int c = row.intValue();
return c;
否则拿不到。
二、前台用户注册时的验证码显示与判断
验证码在aa.jsp中创建 在注册页面以图片的形式显示。
注册页面显示：
<div>
<tr>
<td width="118" height="22" valign="middle" align="center">
<input class="tableItem" required placeholder="请输入右侧验证码" type="text" name="rands" size="15">
</td>
<td width="138" valign="middle" align="center">
<img alt="code..." name="randImage" id="randImage"
src="aa.jsp" width="60" height="20"
border="1" align="absmiddle">
</td>
</tr>
</div>
在判断验证码时要注意 在session 中取得验证码的值时有延迟，只能取得上一个验证码的值 原因是页面刷新时有先后顺序 现货的session后刷新图片验证码。
所以要在一个页面单独进行验证码的验证。
验证码刷新Servlet：
public class YzhengmaServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//改编码
request.setCharacterEncoding(“utf-8”);
response.setContentType(“text/html;charset=utf-8”);
//获取表单数据
int rands = Integer.parseInt(request.getParameter(“rands”));
String name = request.getParameter(“shoujihao”);
String pwd = request.getParameter(“password”);
System.out.println(rands +“rands”);
// //作用域session
HttpSession session = request.getSession();
Object rand = session.getAttribute(“rand”);
String c = rand.toString();
int a = Integer.parseInt©;
System.out.println(a +“a”);
if (rands != a){
System.out.println("111");
RequestDispatcher rd = request.getRequestDispatcher("zhuceshibai.jsp");
rd.forward(request,response);
}else{
System.out.println("222");
request.setAttribute("shoujihao",name);
request.setAttribute("password",pwd);
RequestDispatcher rd = request.getRequestDispatcher("ZhuceServlet");
rd.forward(request,response);
}
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
this.doPost(request, response);
}
}
三、 注册时进行验证是否符合
注册jsp页面代码：
<%--
Created by IntelliJ IDEA.
User: Dell
Date: 2020/6/14
Time: 21:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<style>
.tableItem {
position: relative;
height: 50px;
width: 330px;
margin-bottom: 10px;
padding: 14px 0;
border: 1px solid #dedede;
background: #FFF;
line-height: 24px;
}
.tableBtn {
width: 330px;
height: 52px;
border: 0 none;
border-radius: 3px;
background: #ff3c3c;
font-size: 16px;
color: #FFF;
cursor: pointer;
text-shadow: 1px 1px 1px #ff7373;
font-family: "Microsoft YaHei";
line-height: 52px;
}
.xiayinying{
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #ccc 0px 0px 10px;
-moz-box-shadow: #ccc 0px 0px 10px;
box-shadow: #ccc 0px 0px 10px;
}
/* 重置属性 上下左右贴边 */
body,html,div{ padding:0; margin:0;}
</style>
</head>
<body>
<div style="height: 80px; width: 100%;" class="xiayinying">
<div style="align: bottom;vertical-align: top;">
<img src="tupian/logo.jpg" />
<img src="tupian/bbg.jpg" style="width: 100px;height: 50px;" />
<a style="margin-left: 500px;">你好，欢迎光临步步糕糕点坊！请<a href="denglu.jsp">登录</a>-</a>
</div>
</div>
<form action="YzhengmaServlet" method="post">
<div style="margin-left: 37%;">
<h2>步步糕注册</h2>
<div>
<input class="tableItem" id="shoujihao" onblur="shoujihaoma()" type="text" name="shoujihao" required placeholder="手机号码"/>
</div>
<div id="shoujihaos"></div>
<div >
<input class="tableItem" id="password" onblur="password()" type="password" name="password" required placeholder="密码"/>
</div>
<div id="passwords"></div>
<div >
<input class="tableItem" id="qpassword" onblur="qpassword()" type="password" name="querenmima" required placeholder="确认密码"/>
</div>
<div>
<tr>
<td width="118" height="22" valign="middle" align="center">
<input class="tableItem" required placeholder="请输入右侧验证码" type="text" name="rands" size="15">
</td>
<td width="138" valign="middle" align="center">
<img alt="code..." name="randImage" id="randImage"
src="aa.jsp" width="60" height="20"
border="1" align="absmiddle">
</td>
</tr>
</div>
<div id="qpasswords"></div>
<input type="submit" class="tableBtn" value="同意协议并注册" >
</div>
</form>
<script src="https://cdn.staticfile.org/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//确认密码--------------------------------------
$("#qpassword").blur(function(){
checkQPwd();
});
function checkQPwd(){
var mimas = $("#qpassword").val();
var $mimasId = $("#qpasswords");
var mimasyanz = $("#password").val();
if(mimasyanz != mimas){
$mimasId.html("两次输入密码不一致");
return false;
}
$mimasId.html("");
return true;
}
//密码--------------------------------------------
$("#password").blur(function(){
checkPwd();
});
function checkPwd(){
var mima = $("#password").val();
var $mimaId = $("#passwords");
var mimayanz =/^\w{4,10}$/;
if(mimayanz.test(mima) == false){
$mimaId.html("密码由英文字母和数字组成的4-10位字符");
return false;
}
$mimaId.html("");
return true;
}
//手机号--------------------------------------------
$("#shoujihao").blur(function(){
checkPhone();
});
function checkPhone(){
var mobile = $("#shoujihao").val();
var $mobileId = $("#shoujihaos");
var regMobile = /^1\d{10}$/;
if(regMobile.test(mobile) == false){
$mobileId.html("手机号不正确，请重新输入.");
return false;
}
$mobileId.html("");
return true;
}
// 6.所有输入框验证通过再提交注册
$("form").submit(function(){
if(checkPhone() && checkPwd() && checkQPwd()){
alert('注册成功 正在跳转…………')
}else{
alert("注册失败 输入有误")
return false;
}
})
});
</script>
</body>
</html>
通过jQuery正则表达式 来判断是否验证正确：
吧各个判断分成方法checkPhone() && checkPwd() && checkQPwd()来判断$(“form”).submit(function()
是否返回return false;阻止表单提交。
购物车个数的更改及保存到数据库：
购物车清单列表：
qingdan.jsp:
<%@ page import="com.waress.dao.WaresDao" %>
<%@ page import="com.waress.dao.WaresDaoImpl" %>
<%@ page import="com.waress.po.Gwclei" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.util.List" %><%--
Created by IntelliJ IDEA.
User: Dell
Date: 2020/6/23
Time: 10:48
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Title</title>
</head>
<style>
.s_btn {
width: 90px;
height: 40px;
line-height: 40px;
background-color: #ff3c3c;
color: #FFF;
font-size: 16px;
text-align: center;
float: left;
border: 0;
cursor: pointer;
}
.s_ipt {
width: 408px;
height: 40px;
line-height: 36px;
overflow: hidden;
color: #555555;
font-size: 14px;
float: left;
padding: 0 10px;
border: 2px solid #ff3c3c;
border-right: 0;
}
/* 重置属性 上下左右贴边 */
body,html,div{ padding:0; margin:0;}
</style>
<body>
<%--loge--------------------------%>
<div style="height: 30px;background-color: #dedede;"> </div>
<div style="margin-left: 50px;margin-top: 30px;display:inline-block;">
<img src="tupian/logo.jpg" />
<img src="tupian/bbg.jpg" style="width: 100px;height: 50px;" />
</div>
<!-- logo end ------------------------------------->
<!-- 搜索框 -------------------------------->
<div style="margin-left: 150px; display:inline-block;">
<form action="QgwcbaocunServlet" method="post" >
<input type="search" name="guanjianzi" value="" placeholder="请输入关键字" class="s_ipt"/>
<input type="submit" value="搜索" class="s_btn"/>
</form>
<a>       在上面搜索查询商品哦</a>
</div>
<div style="margin-left: 150px; display:inline-block;text-align: center;
background-color: aliceblue;border:2px solid #aaaaaa;">
<a href="QzhuyeServlet">点此返回主页</a>
</div>
<!-- 搜索框end -------------------------------->
<!-- 阴影分界线 ------------------------------->
<div style="background-color: #CCCCCC;height: 3px; width: 100%;" id="fenjiexian">
</div>
<!-- 阴影分界线 end------------------------------->
<form action="QgwcbaocunServlet" method="post" >
<table id="tab" style="text-align: center" align="center" cellspacing="0" cellpadding="0" border="0" width="80%">
<tr>
<th style="width: 30%">商品名称</th>
<th>商品图片</th>
<th>单个商品价格         
   商品个数</th>
<th>删除在购物车</th>
</tr>
<%
List<Integer> idjihe = new ArrayList<>();
//调用业务层
WaresDao waresDao = new WaresDaoImpl();
ArrayList<Gwclei> wares = waresDao.lookupGwc();
if (wares.size() != 0){
for (Gwclei ware : wares) {
idjihe.add(ware.getId());
%>
<tr>
<th><%=ware.getName()%></th>
<th><img src="<%=ware.getTupian()%>" style="width: 150px;height: 100px"></th>
<td>
<span class="price">      <%=ware.getPrice()%></span>
               
<input class="min" name="" type="button" value="-" />
<input style="width: 30px" class="text_box" name=""type="text" value="<%=ware.getGeshu()%>" />
<input class="add" name="" type="button" value="+" />
</td>
<th><a href="deleteGwcServlet?id=<%=ware.getId()%>"onclick='return confirm("确认删除吗？")'>删除</a></th>
</tr>
<%
}
}else {
out.println("<div style=\"text-align: center\" ><h1>购物车内没有商品…………</h1></div>");
}
%>
</table>
<div style="margin-left: 80%;display:inline-block;" >
总价:<p><label id="total"></label></p>
</div>
<div style="display:inline-block;">
<input type="submit" value="保存" id="baocun" class="s_btn"/>
</div>
<input id="jihe" name="jihe" value="1" style="width: 20px;display: none">
<input value="<%=idjihe%>" name="idjihe" id="idjihe" style="width: 20px;display: none" >
</form>
<form action="querendenglu.jsp" method="post" >
<div style="display:inline-block;margin-left: 1125px">
<input type="submit" value="提交订单" id="tijiao" class="s_btn"/>
<div style="display: none;">
<input name="zongjia" id="total1">
</div>
</div>
</form>
<%
//吧登录用户的信息放入作用域session
session.setAttribute("idjihe",idjihe);
%>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script>
$(document).ready(function () {
$("tr:even").css("background-color","#87CEFA");
$("tr:odd").css("background-color","#ADEAEA");
$(".add").click(function(){
var t = $(this).parent().find('input[class*=text_box]');
t.val(parseInt(t.val())+1);
setTotal();
})
$(".min").click(function(){
var t = $(this).parent().find("input[class*=text_box]");
t.val(parseInt(t.val())-1);
if(parseInt(t.val())<0){
t.val(0);
}
setTotal()
})
function setTotal(){
var array = new Array();
var sum = 0;
$("#tab td").each(function(){
var num = parseInt($(this).find("input[class*=text_box]").val());
var price = parseFloat($(this).find("span[class*=price]").text());
sum += num*price;
array.push(num);
$("#jihe").val(array);
})
$("#total").html(sum.toFixed(2));
$("#total1").val(sum.toFixed(2));
}
setTotal();
//保存
// $("#baocun").ready(function() {
// $("#tab td").each(function () {
// var t = parseInt($(this).find("input[class*=text_box]").val());
// array.push(t);
// })
// alert(array)
// $("#jihe").val(array);
// })
});
</script>
</body>
</html>
点击保存 跳转到QgwcbaocunServlet
QgwcbaocunServlet：
public class QgwcbaocunServlet extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//改编码
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
//创建集合
//xx 为id集合 zz为个数集合
List<String> xx = new ArrayList<>();
List<String> zz = new ArrayList<>();
//获取表单
String jihe = (request.getParameter("jihe"));
String idjihe = (request.getParameter("idjihe"));
//处理idjihe
int g = idjihe.length();
String a = idjihe.substring(1,g-1);
System.out.println(a);
int gs = a.length();
a = a.replace(",","");
System.out.println(a);
//处理jihe
System.out.println(jihe);
jihe = jihe.replace(",","");
int gw = jihe.length();
System.out.println(jihe);
//对处理后的idjihe进行分选 进入真正的集合
for (int i = 0; i < gs-2; i++) {
String e = a.substring(i,i+3);
System.out.println(e);
xx.add(e);
i++;
i++;
i++;
}
// 对处理后的jihe进行分选 进入真正的集合
for (int i = 0; i < gw; i++) {
String e = jihe.substring(i,i+1);
System.out.println(e);
zz.add(e);
}
for (int i = 0; i < gw; i++) {
//调用业务层
WaresDao dao = new WaresDaoImpl();
int row = dao.Gwcbaocun(xx.get(i),zz.get(i));
}
System.out.println(xx.get(0));
System.out.println(xx.get(1));
System.out.println(zz.get(0));
System.out.println(zz.get(1));
System.out.println(gw);
//跳转
response.sendRedirect("qingdan.jsp");
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
}
QgwcbaocunServlet 是在清单获取个数及个数对应id的数组串
再用for循环处理数组串 提取单个值 传入实现类方法Gwcbaocun
Gwcbaocun：
@Override
public int Gwcbaocun(String id, String geshu) {
int row = 0;
String sql =“update waresgwc set geshu=? where id=?”;
try {
row = qr.update(sql,geshu,id);
} catch (SQLException e) {
e.printStackTrace();
}
return row;
}
这个方法比较笨 id和个数只能是固定的位数 id为三位数个数为一位数，例 id 111 个数2 id 112 个数9
345
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
