javaweb-EL&JSTL

其他 2019-04-24 02:27:20 阅读次数: 0

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>&nbsp;</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <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 &copy; 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-》修改成现在的项目名称。

目前为止自己测试不会出现什么问题

可能是以后东西多了会出错吧

自己实验好着呢啊，反正最后修改一下吧

猜你喜欢

转载自blog.csdn.net/JQ210245253/article/details/89315515
今日推荐
周排行
LRU cache算法
windows10, 自带的OpenSSH, key权限问题, 文件权限问题
测试用例书写方法
HIVE-默认分隔符的（linux系统的特殊字符）查看，输入和修改
最贵的AMD 7nm显卡来了！这设计 够狂野
java多线程简单demo
[ 转载 ]在Android系统上使用busybox——最简单的方法
QT connect学习
BFSIFT算法分析
Xcode10：library not found for -lstdc++.6.0.9 临时解决
每日归档
更多
2024-08-06(0)
2024-08-05(0)
2024-08-04(0)
2024-08-03(0)
2024-08-02(0)
2024-08-01(0)
2024-07-31(0)
2024-07-30(0)
2024-07-29(0)
2024-07-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022