购物车项目+EL表达式+JSTL+数据库-阿里云开发者社区

什么是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

<%@ 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

<%@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

<%@ 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

<%@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

<%@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

<%@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
<%@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>&nbsp&nbsp&nbsp&nbsp
<a href="doindex.jsp">返回首页</a>
</body>
</html>

dogwc.jsp

<%@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

<%@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

<%@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

<%@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

<%@ 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>

购物车项目+EL表达式+JSTL+数据库

什么是EL表达式

EL的特点

EL的语法

属性范围

EL中的名称

page

pageScope,例如${pageScope.username}，表示在page范围内查找username变量，找不到返回Null

request

requstScope

session

sessionScope

application

applicationScope

EL中的运算符

EL隐式对象

EL隐式对象介绍

对象名称

说 明

pageScope

返回页面范围的变量名，这些名称已映射至相应的值

requestScope

返回请求范围的变量名，这些名称已映射至相应的值

sessionScope

返回会话范围的变量名，这些名称已映射至相应的值

applicationScope

返回应用范围内的变量，并将变量名映射至相应的值

param

返回客户端的请求参数的字符串值

paramValues

返回映射至客户端的请求参数的一组值

pageContext

提供对用户请求和页面信息的访问