上一期有网友说有点看不懂,我这次就写仔细一点,希望大家不要觉得太多而没耐心,thanks! 页面效果以及代码字后面,红色的是大标题
什么是EL表达式
什么是EL:EL即Expression Language(表达式语言)
EL的功能:替代JSP页面中的复杂代码
EL的语法:${ EL exprission }
${ bean.name } 或 ${ bean['name'] }
EL的特点
自动转换类型:EL得到某个数据时可以自动转换类型,对于类型的限制更加宽松,使用简单,相比较在JSP中嵌入Java代码,EL应用更简单
EL的语法
EL语法:
以“${”作为开始,以“}”作为结束
直接使用变量名获取值$
${ username }
变量属性范围名称
属性范围 | EL中的名称 |
---|---|
page | pageScope,例如${pageScope.username},表示在page范围内查找username变量,找不到返回Null |
request | requstScope |
session | sessionScope |
application | applicationScope |
EL中的运算符
EL运算符 :运算符”[ ]” 运算符”.”
作用: 获取对象属性
获取对象集合中的数据: 在Session中保存了一个(list)集合users
EL表达式的简单应用:先给大家演示一下简单的代码效果
EL隐式对象
EL隐式对象介绍
对象名称 | 说 明 |
---|---|
pageScope | 返回页面范围的变量名,这些名称已映射至相应的值 |
requestScope | 返回请求范围的变量名,这些名称已映射至相应的值 |
sessionScope | 返回会话范围的变量名,这些名称已映射至相应的值 |
applicationScope | 返回应用范围内的变量,并将变量名映射至相应的值 |
param | 返回客户端的请求参数的字符串值 |
paramValues | 返回映射至客户端的请求参数的一组值 |
pageContext | 提供对用户请求和页面信息的访问 |
什么是JSTL
什么是JSTL :JSTL(JavaServerPages Standard Tag Library)
JSP标准标签库
JSTL通常会与EL表达式合作实现JSP页面的编码
使用JSTL实现JSP页面中逻辑处理
JSTL的优点:
提供一组标准标签
可用于编写各种动态JSP页面
为什么使用JSTL?
虽然EL表达式可以访问JavaBean的属性,但是并不能实现在JSP中进行逻辑判断,因而要使用JSTL标签。
JSTL的环境搭建
使用JSTL的步骤:
在JSP页面添加taglib指令
使用JSTL标签
JSTL标准标签库介绍
通用标签的使用:
set:设置指定范围内的变量值
out:计算表达式并将结果输出显示
remove:删除指定范围内的变量
条件标签
条件标签的使用:
if:if标签用于判断条件是否成立,与Java中的If语句作用相同
语法:
迭代标签 :实现对集合中对象的遍历
语法:
以上所写的知识就是下面购物车项目要运用到的知识点
下面这张图就是购物车版本以及现在给你们介绍的就是gwc3里面用到了css、js、fonts
这个购物车我改了字段,在下面列出来了
用户表user:int uuid-编号,String uname-名字,String upwd-密码,String uinfo-备注,这里面有两个方法
商品表goods: int bid-编号,String bname-名称,double bprice-价格,String binfo-简介,String bface-图片,你们需要哪些方法就写那些
订单表orderitem: int oid-订单标号,int uuid-用户编号,int bid-商品编号,String bname-商品名称,double bprice-商品价格,String binfo-商品简介,String bface-商品图片,int gnumber-订单数量,double gprice-订单总价,方法依据自己的想法
下面就是代码了
首先是登录页面login.jsp和dologin.jsp注册页面register.jsp和doregister.jsp
其次是主页面index.jsp和doindex.jsp
第三是购物车页面gwc.jsp和dogwc.jsp
第四是一些其他的小页面
最后是支付页面sfk.jsp
login.jsp
代码语言:javascript复制<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户登录</title>
<style>
#a {
width:50%;
height:200px;
border: 1px dashed ;
background-color:lightyellow;
text-align:center;
}
body{
background-color:lightblue;
}
</style>
<script type="text/javascript">
var str = "qwertyupasdfghjkzxcvbnmQWERTYUPASDFGHJKLZXCVBNM23456789";
function yz() {
//随机出4个0-字符串长度之间的数字 做为下标
yzmStr="";
for(var i=1;i<=4;i ){
yzmStr =str.substr(Math.round(Math.random()*(str.length-1)),1);
}
//把验证码赋值到页面
document.getElementById("syzm").innerHTML=yzmStr;
}
function $(id) {
return document.getElementById(id);
}
function login_yz() {
//验证 用户名 和 密码不能为空
//获取用户名
var uname = $("uname").value;
if(uname.length==0){
alert("用户名不能为空");
return false;
}
//获取密码
var upwd = $("upwd").value;
if(upwd.length==0){
alert("密码不能为空");
return false;
}
//获取验证码:判断和电脑的验证码是否相等
//PS:自己实现-输入的验证码不区分大小写-大小写转换
var yzm = $("uyzm").value;
if(yzm!=yzmStr){
alert("验证码输入错误,请重新输入");
//清空输入的验证码
$("uyzm").value="";
//重新生成验证码
yz();
return false;
}
}
</script>
</head>
<body onload="yz()" >
<div id="login" align="center">
<div id="center">
<div id="center_left"></div>
<div id="center_middle">
<form action="dologin.jsp" onsubmit="return login_yz()">
<div id="user">
用 户 <input type="text" id="uname" name="textfield" />
</div>
<div id="password">
密 码 <input type="password" id="upwd" name="textfield2" />
</div>
<div id="yzm">
验证码 <input id="uyzm" style="width: 50px;" type="text" name="textfield3" />
<span id="syzm" onclick="yz()"></span>
</div>
<div id="btn">
<input type="submit" value="登录">
<input type="button" value="注册" onclick="javascript:location.href='register.jsp'">
</div>
</form>
</div>
<div id="center_right"></div>
</div>
</div>
</body>
</html>
dologin.jsp
代码语言:javascript复制<%@page import="com.zking.entity.User"%>
<%@page import="com.zking.biz.imp.Imp_Userbiz"%>
<%@page import="com.zking.biz.IUserbiz"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//乱码
request.setCharacterEncoding("utf-8");
String uname = request.getParameter("textfield");
String jks=request.getParameter("jk");
int jk=0;
String upwd = request.getParameter("textfield2");
IUserbiz iub=new Imp_Userbiz();
User T=iub.login(uname, upwd);
if(T!=null){//成功就跳转到主页面
session.setAttribute("a", T.getUuid());
request.getRequestDispatcher("doindex.jsp").forward(request, response);
}else{//错误就回到登录页面
out.print("<script>alert('用户名或密码错误,请重新登录');location.href='login.jsp'</script>");
}
%>
register.jsp
代码语言:javascript复制<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户注册</title>
<style>
#a {
width:50%;
height:200px;
border: 1px dashed ;
background-color:lightyellow;
text-align:center;
}
body{
background-color:lightblue;
}
</style>
</head>
<body>
<form action="doregister.jsp" method="post" align="center">
用户名:<input type="text" name="uname"><br>
密码:<input type="password" name="upwd"><br>
备注:<textarea rows="" cols="" name="uinfo">
</textarea><br>
<input type="submit" value="注册">
<input type="reset" value="重置">
</form>
</body>
</html>
doregister.jsp
代码语言:javascript复制<%@page import="com.zking.biz.imp.Imp_Userbiz"%>
<%@page import="com.zking.biz.IUserbiz"%>
<%@page import="com.zking.entity.User"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
//设置编码-设置请求对象的编号
request.setCharacterEncoding("utf-8");
//接收注册页面传递的数据
String uname = request.getParameter("textfield");
String upwd = request.getParameter("textfield2");
String uinfo = request.getParameter("uinfo");
IUserbiz df=new Imp_Userbiz();
User T=new User(uname,upwd,uinfo);
//执行sql语句
if(T!=null){//成功就跳转到主页面
session.setAttribute("a", T.getUuid());
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{//错误就回到登录页面
out.print("<script>alert('用户名或密码错误,请重新登录');location.href='register.jsp'</script>");
}
%>
index.jsp
代码语言:javascript复制<%@page import="com.zking.util.DBHelper"%>
<%@page import="com.zking.entity.OrderItem"%>
<%@page import="com.zking.biz.imp.Imp_orderItembiz"%>
<%@page import="com.zking.biz.IorderItembiz"%>
<%@page import="com.zking.biz.imp.Imp_Goodsbiz"%>
<%@page import="com.zking.dao.imp.Imp_GoodsDao"%>
<%@page import="com.zking.biz.IGoodsbiz"%>
<%@page import="com.zking.entity.Goods"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">
function gm(bid){
location.href="dogwc.jsp?bid=" bid;
}
</script>
</head>
<body>
<table class="table table-hover">
<tr>
<td>商品编号</td>
<td>商品名称</td>
<td>商品单价</td>
<td>商品介绍</td>
<td>商品图片</td>
<td>操作一下</td>
</tr>
<c:forEach items="${glist }" var="g">
<tr>
<td>${g.bid }</td>
<td>${g.bname }</td>
<td>${g.bprice }</td>
<td>${g.binfo }</td>
<td>
<img src="${g.bface }">
</td>
<td>
<button onclick="gm(${g.bid })" class="btn btn-success">添加到购物车</button>
</td>
</tr>
</c:forEach>
</table>
</body>
</html>
doindex.jsp
代码语言:javascript复制<%@page import="com.zking.biz.imp.Imp_Goodsbiz"%>
<%@page import="com.zking.entity.Goods"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.zking.biz.IGoodsbiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
IGoodsbiz igb=new Imp_Goodsbiz();
ArrayList<Goods> glist=igb.getAll();
request.setAttribute("glist", glist);
request.getRequestDispatcher("index.jsp").forward(request, response);
%>
gwc.jsp
代码语言:javascript复制<%@page import="com.zking.dao.IorderItemDao"%>
<%@page import="com.zking.biz.imp.Imp_orderItembiz"%>
<%@page import="com.zking.biz.IorderItembiz"%>
<%@page import="com.zking.entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="js/bootstrap.js"></script>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
<script type="text/javascript">
function xx() {
//跳转到支付页面
location.href="sfk.jsp";
}
function $(id) {
return document.getElementById(id);
}
function xg(obj,bid){
var gnumber=obj.value;
//alert(gnumber);
location.href="dogwc.jsp?bid=" bid "&gn=" gnumber;
}
function bbb(oid,a){
if(a=='-'){
var gnumber=parseInt($("text").value)-1;
if(gnumber==0){
location.href="sc.jsp?bid=" bid;
}else{
location.href="doxg.jsp?oid=" oid "&aa=" 1;
}
}else if(a==' '){
location.href="doxg.jsp?oid=" oid "&aa=" 2;
}
}
function sc(oid){
location.href="sc.jsp?oid=" oid;
}
</script>
</head>
<body>
<table class="table table-hover">
<tr>
<td>商品名称</td>
<td>商品单价</td>
<td>商品信息</td>
<td>商品图片</td>
<td>商品数量</td>
<td>总价</td>
<td>操作一下</td>
</tr>
<c:forEach items="${oslist }" var="d">
<tr>
<td>${d.bname}</td>
<td>${d.bprice}</td>
<td>${d.binfo }</td>
<td>
<img src="${d.bface} ">
</td>
<td>
<button class="btn" onclick="bbb(${d.oid },' ')"> </button>
<input id="text" type="text" style="width:40px;text-align:center" value="${d.gnumber } "/>
<button class="btn" onclick="bbb(${d.oid },'-')">-</button>
</td>
<td>${d.gprice }</td>
<td>
<button onclick="sc(${d.oid })" class="btn btn-danger">删除</button>
</td>
</tr>
<c:set var="sum" value="${sum d.gprice}"></c:set>
</c:forEach>
</table>
<button class="btn btn-success" onclick="xx()">总价${sum }</button>    
<a href="doindex.jsp">返回首页</a>
</body>
</html>
dogwc.jsp
代码语言:javascript复制<%@page import="org.eclipse.jdt.internal.compiler.batch.Main"%>
<%@page import="com.zking.biz.imp.Imp_orderItembiz"%>
<%@page import="com.zking.biz.IorderItembiz"%>
<%@page import="com.zking.util.DBHelper"%>
<%@page import="com.zking.entity.Goods"%>
<%@page import="org.apache.catalina.util.Introspection"%>
<%@page import="com.zking.biz.imp.Imp_Goodsbiz"%>
<%@page import="com.zking.biz.IGoodsbiz"%>
<%@page import="com.zking.entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String number=request.getParameter("gn");
//System.out.print(number);
int count=1;
if(number!=null){
count=Integer.valueOf(number);
}
String uid=session.getAttribute("a") "";
int uuid=Integer.valueOf(uid);
String id=request.getParameter("bid");
int bid=Integer.valueOf(id);
//创建订单对象
OrderItem d=new OrderItem();
//使用多态创建商品业务逻辑层和实现类
IGoodsbiz igb=new Imp_Goodsbiz();
IorderItembiz iot=new Imp_orderItembiz();
Goods gd=new Goods();
gd=igb.getById(bid);
int oid=DBHelper.getNextId("OrderItem", "oid");
d.setOid(oid);
d.setUuid(uuid);
d.setBid(bid);
d.setBname(gd.getBname());
d.setBprice(gd.getBprice());
d.setBinfo(gd.getBinfo());
d.setBface(gd.getBface());
d.setGnumber(1);
int gnumber=1;
double bprice=gd.getBprice();
double sumgprice=gnumber*bprice;
d.setGprice(sumgprice);
ArrayList<OrderItem> slist=iot.getAll(uuid);
boolean b=true;
for(int i=0;i<slist.size();i ){
int ordid=slist.get(i).getOid();
int orprice=(int)slist.get(i).getBprice();
if(bid==slist.get(i).getBid()){
//int price=(int)slist.get(i).getBprice();
if(number==null){
int num=slist.get(i).getGnumber() 1;
iot.updateByOid(ordid, num);
iot.updateprice(ordid, num, orprice);
//System.out.print(slist.get(i).getGnumber());
}else{
iot.updateByOid(ordid, count);
iot.updateprice(ordid, count, orprice);
}
b=false;
}
}
if(b){
iot.add(d);
}
response.sendRedirect("doshopping.jsp?number=" number);
%>
doshopping.jsp
代码语言:javascript复制<%@page import="com.zking.entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@page import="com.zking.biz.imp.Imp_orderItembiz"%>
<%@page import="com.zking.biz.IorderItembiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String uid=session.getAttribute("a") "";
int uuid=Integer.valueOf(uid);
IorderItembiz iot=new Imp_orderItembiz();
ArrayList<OrderItem> oslist=iot.getAll(uuid);
request.setAttribute("oslist", oslist);
System.out.print(uuid);
System.out.print(oslist);
request.getRequestDispatcher("gwc.jsp").forward(request, response);
%>
doxg.jsp
代码语言:javascript复制<%@page import="com.zking.entity.OrderItem"%>
<%@page import="com.zking.biz.imp.Imp_orderItembiz"%>
<%@page import="com.zking.biz.IorderItembiz"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String y=request.getParameter("aa");
int ys=Integer.valueOf(y);
String id=request.getParameter("oid");
int oid=Integer.valueOf(id);
IorderItembiz iob=new Imp_orderItembiz();
OrderItem oi= iob.getById(oid);
int number=oi.getGnumber();
if(ys==2){
int num=number 1;
iob.updateByOid(oid, num);
}else if(ys==1){
int num=number-1;
//System.out.print(num);
iob.updateByOid(oid, num);
}
response.sendRedirect("doshopping.jsp");
%>
sc.jsp
代码语言:javascript复制<%@page import="com.zking.biz.imp.Imp_orderItembiz"%>
<%@page import="com.zking.biz.IorderItembiz"%>
<%@page import="com.zking.entity.OrderItem"%>
<%@page import="java.util.ArrayList"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String uid=session.getAttribute("a") "";
int uuid=Integer.valueOf(uid);
IorderItembiz idb=new Imp_orderItembiz();
String id= request.getParameter("oid");
int oid=Integer.valueOf(id);
idb.deleteById(oid);
response.sendRedirect("doshopping.jsp");
%>
sfk.jsp
代码语言:javascript复制<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body align="center">
<img alt="" src="images/gr.png" >
<a href="doindex.jsp">返回首页</a>
</body>
</html>