本文详细介绍了EL（Expression Language）和JSTL（JavaServer Pages Standard Tag Library）在JavaWeb开发中的应用。EL主要用于简化JSP中变量的访问方式，包括获取域中数据、执行运算和访问web对象。而JSTL是一种标签库，用于替代JSP脚本，主要包括核心库（core）、格式化库（fmt）等，常见标签如`c:if`和`c:forEach`用于条件判断和循环。通过实例展示了如何使用EL和JSTL实现商品展示和登录案例的优化。
1、什么是EL：
EL是JSP表达式语言，全称是ExpressionLanguage，使用EL的目的是简化在JSP中访问变量的方式，简单静态HTML与Java代码的耦合。用来替代jsp中的输出<%=..%>
2. EL的作用:
- 1.获取域中数据 ★
- 2.执行运算 ★
- 3.获取常见的web对象
- 4.调用java的方法
格式: ${el表达式}
2.1.获取域中的数据
获取简单数据
${pageScope|requestScope|sessionScope|applicationScope.属性名}快捷获取：${skey}
${属性名}:依次从pageContext,request,session,application查找指定属性,若查找到返回值,结束该次查找
若查找不到,返回""
演示：
//JSP页面中省略上半段
<body>
<%
request.setAttribute("rkey", "rvalue");
session.setAttribute("skey", "svalue");
session.setAttribute("rkey", "svalue");
application.setAttribute("akey", "avalue");
%>
获取request中的数据:<br>
老方式:<%=request.getAttribute("rkey") %><br/>
el方式:${requestScope.rkey }<br/>
<hr>
<hr>
获取失败老方式:<%=application.getAttribute("aakey") %><br/> 返回NULl
获取失败el方式:${applicationScope.aakey } 空字符
<hr>
便捷获取:
${skey },${rkey },${aakey },${akey }
<hr>
${rkey } 先获取大的rkey就是request的
<hr>
</body>
获取复杂的数据
获取数组中的数据
${域中的名称[index]} ${arr[1] }
获取list中的数据
${域中的名称[index]} ${list[1]
获取map中的数据
${域中的名称.键名} ${map.age }在JSP页面中，这里省略上半部分
<% //往request域中放入数组 request.setAttribute("arr", new String[]{"aa","bb","cc"}); //往request域中放入list List list=new ArrayList(); list.add("aaa"); list.add("bbb"); list.add("ccc"); request.setAttribute("list", list); //往request域中放入map Map m=new HashMap(); m.put("username","tom"); m.put("age",18); request.setAttribute("map", m); //往域中放入一个简单数据 request.setAttribute("arr.age","18"); %> 获取域中的数组:<br> 老方式:<%=((String[])request.getAttribute("arr"))[1] %><br> el方式:${arr[1] }<br> <hr> //注意这里request.getAttribute完后是Object,需要强转才可以转成数组 获取域中的list:<br> 老方式:<%=((List)request.getAttribute("list")).get(1) %><br> el方式:${list[1] }<br> list的长度:${list.size() } <hr> 获取域中的map:<br> 老方式:<%=((Map)request.getAttribute("map")).get("age") %><br> el方式:${map.age }<br> <hr> 获取特殊名字的数据<br> ${requestScope["arr.age"] }注意:★
若属性名中出现了"."|"+"|"-"等特殊符号,需要使用scope获取
例如:
${requestScope["arr.age"] }
.JavaBean导航
- javabean:
java语言编写的一个可重用的组件,
狭义上来说就是我们编写的一个普通的java类 例如:User Person
- javabean规范:
1.必须是一个公共的具体的类 public class
2.提供私有的字段 private String id;//id称之为字段
3.提供公共访问字段的方法 get|set|is方法
public String getId(){..}
一旦有公共的方法之后,get|set|is之后的内容,将首字母小写,将这个东西称之为bean属性
id就是一个bean属性
4.提供一个无参的构造器
5.一般实现序列化接口 serializable
演示：
第一步：先编写一个javabean
把getusername改为getname
这里面username bean属性已经消失变成name了，在get之后的东西称为一个bean。
username这时称为字段。
import java.io.Serializable;
public class User {
private String id;
private String username;
private String password;
public String getId() {
return id;
}
public void setId(String id) {
this.id = id;
}
public String getName() {
return username;
}
public void setName(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
}
第二步：在JSP页面中，这里省略上半部分
<%
User u=new User();
u.setId("001");
u.setName("tom");
u.setPassword("123");
//将u放入域中
request.setAttribute("user", u);
%>
获取域中javabean的id值:<br>
老方式:<%=((User)request.getAttribute("user")).getId() %><br/>
el方式:${user.id }<!-- 相当于调用 getXxx() --><hr>
2.2执行运算:
1.可以执行 四则运算 关系(+ - * /) 以及逻辑运算(&& ||)
2. 注意:
1.+:只能进行加法运算,字符串形式数字可以进行加法运算.
2.empty:判断一个容器的长度是否为0(array set list map),还可以判断一个对象是否为空
三元运算符
eg:${3>4?"yes":"no"}
输出为no
JSP页面中省略上半部分
<body> <% request.setAttribute("i", 3); request.setAttribute("j", 4); request.setAttribute("q", "12"); request.setAttribute("k", "k"); List l=null; request.setAttribute("list", l); List ll=new ArrayList(); ll.add("22"); request.setAttribute("list_", ll); User user=null; request.setAttribute("bean", user); User user_=new User(); request.setAttribute("bean_", user_); %> ${i+j }<br/> ${i+q }<br/> ${q+q }<br/> <%-- ${i+k }<br/> --%> <hr> 域中list的长度是否为0:${empty list}<br/> 域中list_的长度是否为0:${empty list_ }<br/> <hr> 域中的bean是否为空:${empty bean }<br/> 域中的bean_是否为空:${empty bean_ }<br/> <hr> ${ 3>4?"yes":"no" }<br/> ${i==3 } </body>
3.el的内置对象(了解)可以直接使用
11个
pageScope
requestScope
sessionScope
applicationScope
param
paramValues
header
haederValues
initParam
cookie★
pageContext★
注意:
除了pagecontext其余对象获取的全是map集合key value的形式
1. 了解:和参数相关的el内置对象
param
paramValues
index.jsp中 <a href="/day12/el/demo5.jsp?username=tom&password=123&hobby=drink&hobby=sleep">和参数相关的内置对象(了解) </a><br>
在JSP页面中就可以 ${param.username }<hr>来获取
2.了解:和请求头相关的el内置对象
header
haederValues
<body> ${header }<hr> ${headerValues } <hr> <hr> referer:${header.referer }<br> user-agent:${headerValues["user-agent"][0] } </body>
3.了解:和全局初始化参数相关的el内置对象
initParam
4.cookie内置对象:
${cookie} 获取map{key=Cookie}
例如:创建cookie
Cookie c=new Cookie("username","tom");
通过${cookie}获取相当于
{username=new Cookie("username","tom")}
相当于map的key是cookie的键
map的value是当前cookie
若项获取名称username的cookie的value值(获取tom)
${cookie.username.value}--javabean导航
注意:
java中Cookie的api
getName():获取cookie的名称
getValue():获取cookie的value值
我们称name和value是cookie的bean属性
使用cookie内置对象:
${cookie.给cookie起名字.value}
例如:
获取jsession的值
${cookie.JSESSIONID.value}
5.pageContext:获取不是map集合,相当于jsp的pageContext内置对象
在jsp页面中动态的获取项目名${pageContext.request.contextPath}
————————————————————————————————————————————————————————
1.什么是JSTL
JSTL（JavaServer Pages Standard Tag Library，JSP标准标签库)是一个不断完善的开放源代码的JSP标签库，是由apache的jakarta小组来维护的
用来替代java脚本
2.JSTL的使用
使用步骤:
1.导入jar包 (jstl.jar和standard.jar)
2.在页面上导入标签库（**********不导入下面的cif什么都用不成）
<%@taglib prefix="" uri=""%>
例如:
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
3. jstl的分类:
1.core:核心类库 ★(最常用)
2.fmt:格式化|国际化
3.xml:过时了
4.sql:过时了
5.函数库:很少使用
现在来学习以下core
core中有13个标签，最常用的c:if和c:forEach
-
c:if 判断
<c:if test="${el表达式}">满足的时候输出的内容</c:if>
例如:
<c:if test="${3>4 }">
3大于4
</c:if>
<c:if test="${3<=4 }">
3不大于4
</c:if>输出结果 ： 3不大于4
-
c:forEach 循环
格式1:基础用法
<c:forEach begin="从那里开始" end="到那里结束" step="步长" var="给变量起个名字" varStatus="循环状态变量">
${i }--${vs.count }--${vs.current }<br>
</c:forEach>
varStatus:用来记录循环的状态
常用的属性:
1.count:记录次数
2.current:当前遍历的内容
<!--1~20内的所有奇数 --> <c:forEach begin="1" end="20" step="2" var="${i}" varStatus="1">格式2:高级用法
<c:forEach items="${el获取域中的容器}" var="n"> 这里面的n是起的名字
${n }
</c:forEach>例如: //遍历list <c:forEach items="${list }" var="n"> ${n } </c:forEach> //遍历map <c:forEach items="${map }" var="en"> ${en.key }-- ${en.value }<br/> </c:forEach>
-
c:set 和 c:choose
<c:set var="day" value="4"/>
<!-- 相当于 pageContext.setAttribute("day",3) -->
<c:choose>相当于switch的用法
<c:when test="${day==1 }">
周1
</c:when>
<c:when test="${day==2}">
周2
</c:when>
<c:when test="${day==3 }">
周3
</c:when>
<c:otherwise>
其他
</c:otherwise>
</c:choose>
函数库:${fn:toUpperCase("hello“)}变大写(不常用)
案例一：(展示商品)
学习了el和jstl,现在不使用jsp脚本，来实现遍历所有的商品展示到页面中
1.数据库和表
create database day0701;
use day0701;
create table product(
id int primary key auto_increment,
pname varchar(20),
price double,
pdesc varchar(20)
);insert into product values (null,'电视机',3200,'液晶曲面大电视');
insert into product values (null,'韭菜盒子',3,'味重请小心食用');
insert into product values (null,'益达',10,'韭菜伴侣');
insert into product values (null,'十三香',12,'守义牌');
新建一个项目
导入jar包:
驱动 dbutils c3p0 jstl
导入c3p0配置文件 和工具类
实体类:
private int id;
private String pname;
private double price;
private String pdesc;
2.index.jsp中添加一个连接
<a href="/day1201/findAll">展示所有商品</a>
3.FindAllServlet:
调用ProductService.findAll() 返回一个集合 List<Product>
将list放入request域中
请求转发到product_list.jsp
4.ProductService.findAll() 调用dao.findAll()
5.dao.findAll() 使用beanListHandler()
6.在product_list.jsp展示所有商品
使用 c:forEach
使用javabean导航获取里面的数据
效果展示：
FIndALL的代码
package com.javaweb.FinAll;
import java.io.IOException;
import java.sql.SQLException;
import java.util.List;import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.javaweb.domain.product;
import com.javaweb.service.ProductService;/**
* 展示所有商品
*/
public class FindAll extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1.调用service 返回list
List<product> plist=null;
try {
plist = new ProductService().findAll();
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//2.将list放入request域中
request.setAttribute("list", plist);
//3.请求转发
request.getRequestDispatcher("/product_list.jsp").forward(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}}
product_list.jsp
这里就用到了c:foreach
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!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>Insert title here</title>
</head>
<body>
<table border="1" align="center">
<tr>
<td>id</td>
<td>商品名称</td>
<td>单价</td>
<td>描述</td>
</tr>
<c:forEach items="${list }" var="p">
<tr>
<td>${p.id }</td>
<td>${p.pname }</td>
<td>${p.price }</td>
<td>${p.pdesc }</td>
</tr>
</c:forEach>
</table>
</body>
</html>
案例二：(登陆案例)优化
增加记住用户名和验证码
需求:
在页面上填写用户名和密码及验证码,点击提交,先校验验证码是否一致.若一致后再去找数据库.顺便记住用户名
技术:
表单
验证码
servlet
request
session
cookie
步骤分析:
1.数据库和表
create table user(
id int primary key auto_increment,
username varchar(20),
password varchar(20)
);
2.创建一个项目
包结构
jar包
工具类和配置文件
3.表单 login.jsp
4.表单提交 loginServlet
loginServlet:
获取验证码(从前台传过来和session中)
判断两个验证码是否一致
若不一致:
填写错误信息,请求转发到login.jsp
若一致:获取用户名和密码
调用userService的getuserbyusernameandpassword 返回值 User user
判断user是否为空
若为空:填写错误信息,请求转发到login.jsp
若不为空:
继续判断是否勾选了记住用户名
若勾选:
创建cookie 将用户名放入cookie写回浏览器
将user对象放入session中
页面重定向 index.jsp 展示 xxx:欢迎回来
效果展示
下面附上代码
首先是包的内容：
com.javaweb.dao
package com.javaweb.dao;
import java.sql.SQLException;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;import com.javaweb.domain.User;
import com.javaweb.utils.DataSourceUtils;public class UserDao {
public User getUserNameAndPwd(String username, String password) throws SQLException {
QueryRunner qr=new QueryRunner(DataSourceUtils.getDataSource());
String sql="select * from user1 where username = ? and password = ?";
return qr.query(sql, new BeanHandler<>(User.class), username,password);
}}
com.javaweb.domain
package com.javaweb.domain;
public class User {
private int id;
private String username;
private String passsword;
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPasssword() {
return passsword;
}
public void setPasssword(String passsword) {
this.passsword = passsword;
}}
com.javaweb.service
package com.javaweb.service;
import java.sql.SQLException;
import com.javaweb.dao.UserDao;
import com.javaweb.domain.User;public class UserService {
public User getUserNameAndPwd(String username, String password) throws SQLException {
return new UserDao().getUserNameAndPwd(username,password);
}}
com.javaweb.servlet
package com.javaweb.servlet;//验证码代码
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.IOException;
import java.util.Random;import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;public class CodeServlet extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 使用java图形界面技术绘制一张图片
int charNum = 4;
int width = 30 * 4;
int height = 30;// 1. 创建一张内存图片
BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);// 2.获得绘图对象
Graphics graphics = bufferedImage.getGraphics();// 3、绘制背景颜色
graphics.setColor(Color.YELLOW);
graphics.fillRect(0, 0, width, height);// 4、绘制图片边框
graphics.setColor(Color.BLUE);
graphics.drawRect(0, 0, width - 1, height - 1);// 5、输出验证码内容
graphics.setColor(Color.RED);
graphics.setFont(new Font("宋体", Font.BOLD, 20));// 随机输出4个字符
Graphics2D graphics2d = (Graphics2D) graphics;
String s = "ABCDEFGHGKLMNPQRSTUVWXYZ23456789";
Random random = new Random();
// session中要用到
String msg = "";
int x = 5;
for (int i = 0; i < 4; i++) {
int index = random.nextInt(32);
String content = String.valueOf(s.charAt(index));
msg += content;
double theta = random.nextInt(45) * Math.PI / 180;
// 让字体扭曲
graphics2d.rotate(theta, x, 18);
graphics2d.drawString(content, x, 18);
graphics2d.rotate(-theta, x, 18);
x += 30;
}
//将验证码放入session中
request.getSession().setAttribute("sessionCode", msg);// 6、绘制干扰线
graphics.setColor(Color.GRAY);
for (int i = 0; i < 5; i++) {
int x1 = random.nextInt(width);
int x2 = random.nextInt(width);int y1 = random.nextInt(height);
int y2 = random.nextInt(height);
graphics.drawLine(x1, y1, x2, y2);
}// 释放资源
graphics.dispose();// 图片输出 ImageIO
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
}
}
LoginServlet
package com.javaweb.servlet;
import java.io.IOException;
import java.sql.SQLException;import javax.servlet.ServletException;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import com.javaweb.domain.User;
import com.javaweb.service.UserService;/**
* 登陆
*/
public class LoginServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//0.设置编码
request.setCharacterEncoding("utf-8");
//1.接受两个验证码
String rCode=request.getParameter("checkCode");
String sCode=(String) request.getSession().getAttribute("sessionCode");
//一次性验证码 用完之后从session中移除
request.getSession().removeAttribute("sessionCode");
//判断两个验证码是否一致.
if(rCode==null || rCode.trim().length()==0||sCode==null){
//验证码有问题 提示信息 页面跳转到login.jsp
request.setAttribute("msg", "请重新输入验证码");
request.getRequestDispatcher("/login.jsp").forward(request, response);
return;
}
if(!rCode.equalsIgnoreCase(sCode)){
//验证码输入不一致 提示信息 页面跳转到login.jsp
request.setAttribute("msg", "验证码输入错误");
request.getRequestDispatcher("/login.jsp").forward(request, response);
return;
}
//2.接受用户名和密码
String username = request.getParameter("username");
String password = request.getParameter("password");
User user=null;
try {
user = new UserService().getUserNameAndPwd(username,password);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
//4.判断user
if(user==null){
//4.1若user为空 提示信息,请求转发到login.jsp
request.setAttribute("msg", "用户名和密码不匹配");
request.getRequestDispatcher("/login.jsp").forward(request, response);
return;
}else{
//4.2若user 不为空 判断是否勾选了记住用户名, 将user放入session
if("ok".equals(request.getParameter("savename"))){
//创建cookie username不能是中文
Cookie c= new Cookie("saveName", username);
c.setPath(request.getContextPath()+"/");
c.setMaxAge(3600);
//写回浏览器
response.addCookie(c);
}
request.getSession().setAttribute("user", user);
}
//5.页面重定向 index.jsp
response.sendRedirect(request.getContextPath()+"/index.jsp");
}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}}
com.javaweb.utils
package com.javaweb.utils;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;import javax.sql.DataSource;
import com.mchange.v2.c3p0.ComboPooledDataSource;
public class DataSourceUtils {
private static ComboPooledDataSource ds=new ComboPooledDataSource();
/**
* 获取数据源
* @return 连接池
*/
public static DataSource getDataSource(){
return ds;
}
/**
* 获取连接
* @return 连接
* @throws SQLException
*/
public static Connection getConnection() throws SQLException{
return ds.getConnection();
}
/**
* 释放资源
*
* @param conn
* 连接
* @param st
* 语句执行者
* @param rs
* 结果集
*/
public static void closeResource(Connection conn, Statement st, ResultSet rs) {
closeResultSet(rs);
closeStatement(st);
closeConn(conn);
}/**
* 释放连接
*
* @param conn
* 连接
*/
public static void closeConn(Connection conn) {
if (conn != null) {
try {
conn.close();
} catch (SQLException e) {
e.printStackTrace();
}
conn = null;
}}
/**
* 释放语句执行者
*
* @param st
* 语句执行者
*/
public static void closeStatement(Statement st) {
if (st != null) {
try {
st.close();
} catch (SQLException e) {
e.printStackTrace();
}
st = null;
}}
/**
* 释放结果集
*
* @param rs
* 结果集
*/
public static void closeResultSet(ResultSet rs) {
if (rs != null) {
try {
rs.close();
} catch (SQLException e) {
e.printStackTrace();
}
rs = null;
}}
}
最后src下的就是c3p0.perties(没用config.xml）
c3p0.driverClass=com.mysql.jdbc.Driver
c3p0.jdbcUrl=jdbc:mysql:///day0702
c3p0.user=root
c3p0.password=root
index.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
${user.username}:Welcom bcak
Login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>会员登录</title>
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css" />
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
<!-- 引入自定义css文件 style.css -->
<link rel="stylesheet" href="css/style.css" type="text/css"/><style>
body{
margin-top:20px;
margin:0 auto;
}
.carousel-inner .item img{
width:100%;
height:300px;
}
.container .row div{
/* position:relative;
float:left; */
}
font {
color: #666;
font-size: 22px;
font-weight: normal;
padding-right:17px;
}
</style>
</head>
<body>
<!--
时间：2015-12-30
描述：菜单栏
-->
<div class="container-fluid">
<div class="col-md-4">
<img src="img/logo2.png" />
</div>
<div class="col-md-5">
<img src="img/header.png" />
</div>
<div class="col-md-3" style="padding-top:20px">
<ol class="list-inline">
<li><a href="login.htm">登录</a></li>
<li><a href="register.htm">注册</a></li>
<li><a href="cart.htm">购物车</a></li>
</ol>
</div>
</div>
<!--
时间：2015-12-30
描述：导航条
-->
<div class="container-fluid">
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">首页</a>
</div><!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">手机数码<span class="sr-only">(current)</span></a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
<li><a href="#">电脑办公</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form></div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
<div class="container" style="width:100%;height:460px;background:#FF2C4C url('images/loginbg.jpg') no-repeat;">
<div class="row">
<div class="col-md-7">
<!--<img src="./image/login.jpg" width="500" height="330" alt="会员登录" title="会员登录">-->
</div>
<div class="col-md-5">
<div style="width:440px;border:1px solid #E7E7E7;padding:20px 0 20px 30px;border-radius:5px;margin-top:60px;background:#fff;">
<font>会员登录</font>USER LOGIN <font color="red">${msg }</font><div> </div>
<form class="form-horizontal" action="${pageContext.request.contextPath }/login" method="post">
<div class="form-group">
<label for="username" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="username" placeholder="请输入用户名" name="username" value="${cookie.saveName.value }">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">密码</label>
<div class="col-sm-6">
<input type="password" class="form-control" id="inputPassword3" placeholder="请输入密码" name="password">
</div>
</div>
<div class="form-group">
<label for="inputPassword3" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control" id="inputPassword3" placeholder="请输入验证码" name="checkCode">
</div>
<div class="col-sm-3">
<img src="${pageContext.request.contextPath }/code"/>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="checkbox">
<label>
<input type="checkbox"> 自动登录
</label>
<label>
<input type="checkbox" name="savename" value="ok"> 记住用户名
</label>
</div>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<input type="submit" width="100" value="登录" name="submit" border="0"
style="background: url('./images/login.gif') no-repeat scroll 0 0 rgba(0, 0, 0, 0);
height:35px;width:100px;color:white;">
</div>
</div>
</form>
</div>
</div>
</div>
</div><div style="margin-top:50px;">
<img src="./image/footer.jpg" width="100%" height="78" alt="我们的优势" title="我们的优势" />
</div><div style="text-align: center;margin-top: 5px;">
<ul class="list-inline">
<li><a>关于我们</a></li>
<li><a>联系我们</a></li>
<li><a>招贤纳士</a></li>
<li><a>法律声明</a></li>
<li><a>友情链接</a></li>
<li><a target="_blank">支付方式</a></li>
<li><a target="_blank">配送方式</a></li>
<li><a>服务声明</a></li>
<li><a>广告声明</a></li>
</ul>
</div>
<div style="text-align: center;margin-top: 5px;margin-bottom:20px;">
Copyright © 2005-2016 大学商城 版权所有
</div>
</body></html>
剩余的图片没有贴出来，太多了，主要是了解其中的过程就可以了，这里面的部分需要注意的都是加粗的。
如果想要自己做一遍可以参考黑马的16年6月份的那一期视频，自己跟着学感觉还可以。
项目过程小结：
1.目前位置所有的路径已经变成动态的了，不需要自己设置
eg:
<img src="${pageContext.request.contextPath }/code"/>
2.
下面的代码中：
//判断两个验证码是否一致.
if(rCode==null || rCode.trim().length()==0||sCode==null){
//验证码有问题 提示信息 页面跳转到login.jsp
request.setAttribute("msg", "请重新输入验证码");
request.getRequestDispatcher("/login.jsp").forward(request, response);
return;
}
if(!rCode.equalsIgnoreCase(sCode)){
//验证码输入不一致 提示信息 页面跳转到login.jsp
request.setAttribute("msg", "验证码输入错误");
request.getRequestDispatcher("/login.jsp").forward(request, response);
return;
}
equalsIgnoreCase：
String fileName=".SHP";
fileName.equals(".shp")为false;
fileName.equalsIgnoreCase(".shp")为TRUE;
equalsIgnoreCase与equals区别在于前者不区分大小写
用在区分验证码是否大小写。
rCode.trim()：trim( )的作用是去掉字符串两端的多余的空格，注意，是两端的空格，且无论两端的空格有多少个都会去掉，当然中间的那些空格不会被去掉，如：String s = " a s f g ";
前面的基础se不扎实，补充一下。
3.$（msg）的使用
$(user.username)的使用
4.在
UserService中
USerDao的使用
后面要加上（）才可以，自己做了几次都忘记了，这是一个方法，需要自己构造
注意后面的getUserNameAndPwd的使用。
5.ctrl+shiif+f
格式化代码，就是把代码有层次的排放。
6.注意不要把jsp文件放在WEB-INF的下面
这样跳转是跳转不到的，需要加WEB-INF这个路径
很容犯错的，出现下面这个错误提示
7.关于复制一个动态web项目后路径的问题
最好在复制完后
右键-》properties-》web ..setting-》修改成现在的项目名称。
目前为止自己测试不会出现什么问题
可能是以后东西多了会出错吧
自己实验好着呢啊，反正最后修改一下吧
扫一扫
960
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
