大数据正式19 待我称王封你为后i 2022-06-04 06:39 206阅读 0赞 # 大数据正式19 # ### jsp标签技术 ### * 提出:jsp是一种动态的web资源开发技术,看起来像html,但是可以嵌入java代码,非常方便开发,但是这样还是两种语言的混合,不方便开发和维护,可以用标签来代替java代码 * 目的:将jsp中的java代码消除掉,即将java代码用jsp标签来进行替换 * jsp标签:sun公司在jsp2.0提供的原生标签,不需要导入任何开发包就可以使用,但是使用率非常少 1. 页面包含:<jsp:include page=""> # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <h1>top</h1> <jsp:include page="/one.jsp"></jsp:include> <h1>foot</h1> </body> </html> # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'one.jsp' starting page</title> </head> <body bgcolor="#ff00ff" text="#ffffff"> <h2>hello!!</h2> </body> </html> * 效果 * ![FETMyUX.png][] 2. 页面转发:<jsp:forward page=""> # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <h1>top</h1> <jsp:forward page="/one.jsp"></jsp:forward> <h1>foot</h1></body> </html> # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'one.jsp' starting page</title> </head> <body bgcolor="#ff00ff" text="#ffffff"> <h2>hello!!</h2> </body> </html> * 效果 * ![umxe374.png][] 3. 页面参数:<jsp:param name="" value=""> # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body> <h1>top</h1> <jsp:forward page="/one.jsp"> <jsp:param value="hello!!!" name="val" /> </jsp:forward> <h1>foot</h1> </body> </html> # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>My JSP 'one.jsp' starting page</title> </head> <body bgcolor="#ff00ff" text="#ffffff"> <h2><%=request.getParameter("val") %></h2> </body> </html> * 效果 * ![7YSvJ6R.png][] ### EL表达式 ### * Expression Language 表达式语言 * 用来替代jsp的脚本表达式<%=表达式%> * el只能获取【域】里面的对象,只能获取数据,不能遍历 * 功能 1. 获取数据 * 形式:$\{el表达式\} * 数据类型 1. 常量数据:$\{3.14\} # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <h1>${3.14}</h1> </body> </html> * 效果 * ![bRnRZz1.png][] 2. 变量数据:$\{变量名称\}--从小到大范围的搜索,找到返回相应的值,找不到返回空字符串 # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("name", "kungfu~peng"); %> <h1>${name}</h1> </body> </html> * 效果 * ![Mu07joZ.png][] 3. 获取数组中的数据:$\{array\[x\]\} # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% String[] array = { "a", "b" }; pageContext.setAttribute("array", array); %> <h1>${array[1]}</h1> </body> </html> * 效果 * ![yeTSkR0.png][] 4. 获取集合中的数据:$\{list\[x\]\} # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% ArrayList<String> list = new ArrayList<String>(); list.add("a"); list.add("b"); list.add("c"); pageContext.setAttribute("list", list); %> <h1>${list[0]}</h1> </body> </html> * 效果 * ![UJok4Bq.png][] 5. 获取map中的数据:$\{map\},$\{map\["key"\]\},$\{map.key\} # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% HashMap<String, String> map = new HashMap<String, String>(); map.put("a", "a"); map.put("b", "b"); map.put("c", "c"); pageContext.setAttribute("map", map); %> <h1>${map["c"]}</h1> </body> </html> * 效果 * ![ZlejaB2.png][] * 注:不同的情况,使用方式不同 1. key中有点(.)时必须用""的方式 2. 如果是常量,则可以用【常量】直接写 # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% HashMap<String, String> map = new HashMap<String, String>(); map.put("a.a", "a.a"); map.put("b", "b"); map.put("c", "c"); pageContext.setAttribute("map", map); %> <h1>${map["a.a"]}</h1> <h1>${map.b}</h1> <h1>${map}</h1> </body> </html> * 效果 * ![Dkcbi59.png][] 6. 获取JavaBean中的属性$\{对象.属性\} * 注:必须有getter方法 * 延伸:通过pageContext获取域对象和隐式对象进行相应的操作【路径:应用名--服务器不用写,浏览器看的得写】 * 例 * javabean:Person # # package compeng.javabean; import java.io.Serializable; public class Person implements Serializable { private String name; public String getName() { return name; } public void setName(String name) { this.name = name; } } * jsp:index.jsp # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% Person p = new Person(); p.setName("kungfu~peng"); pageContext.setAttribute("p", p); %> <h1>${p.name}</h1> </body> </html> * 效果 * ![0s0Tc40.png][] 2. 执行简单运算 1. 算数运算【el会尝试将非数字转化为数字,字母会报错,“+”在这里不是连接符】 1. \+ 2. \- 3. \* 4. / 2. 关系运算符 1. ==eq 2. !=ne 3. <le 4. >gt 5. <=le 6. >=ge 3. 逻辑运算 1. && and 2. || or 3. ! not 4. 三元表达式 1. 表达式 ? 值1:值2 5. empty 1. 判断对象是否为null 2. 判断字符串是否为“” 3. 判断集合是否没元素 4. 判断域中是否没有任何属性 3. 获取常用开发对象 * el为了大家方便使用,在其内部定义了11个内置对象,这些对象不需要提前存入就可使用 * 这里的11个对象和九大隐式对象没任何关系 * 11个对象 1. pageContext 代表当前页面,有了它意味着有了九大隐式对象 1. pageContext.request 2. pageContext.sesson 3. 。。。~9 2. pageScope--pageContext域,不是pageContext对象,是基于map的域 3. requestScope--Request域,不是request对象,是基于map的域 4. sessionScope--session域,不是session对象,是基于map的域 5. applicationScope--ServletContext域,不是ServletContext对象,是基于map的域 6. param--所有请求参数组成map:<String,String> 7. paramValues--所有请求参数组成map:<String,String\[\]>--当请求中出现多个同名的参数时 8. head--浏览器提交的请求中,所有请求头组成的map:<String,String> 9. headValues--浏览器提交的请求中,所有请求头组成的map:<String,String\[\]>--当请求头出现多个同名的参数时 10. cookie--浏览器提交的中,所有Cookie信息组成的map:<String,Cookie对象> 11. initParam--获取web应用初始化参数--web.xml文件中地全局配置信息 4. 调用java方法 * 自定义的java方法--没人用,略... * el中的方法:结合jstl的fn库 * jstl的fn库 * ![taNfPDZ.png][] # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:forEach var="i" items="${fn:split('aa.bb.cc','.') }">${i}</c:forEach> </body> </html> * 效果 * ![qs1nnoG.png][] ### JSTL标签库 ### * 定义JavaServer Pages Standard Tag Library标准标签库 * 兼容EL * 开发步骤 1. 导包或设置jsp的taglib指令<%@taglib prefix="" uri="" tagdir="包所在的位置"%> # # <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> 2. jstl嵌入到html * jstl的子库 * core:核心库 * fmt:国际化标签库 * xml:操作xml的标签库 * sql:操作关系型数据库 * 具体的标签 1. <c:out value="" default="" escapeXml=""></c:out> 1. 输出固定值 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:out value="kungfu~peng"></c:out> </body> </html> * 效果 * ![Is1nnmE.png][] 2. 输出变量 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("name", "kungfu~peng"); %> <c:out value="${name} "></c:out> </body> </html> * 效果 * ![Is1nnmE.png][] 3. 转义输出(escapeXml设置是否转义) # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("name", "kungfu~peng"); %> <c:out value="<a href='#'>www.easymall.com</a>" escapeXml="true"></c:out> </body> </html> * 效果 * ![22HXZbW.png][] # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("name", "kungfu~peng"); %> <c:out value="<a href='#'>www.easymall.com</a>" escapeXml="false"></c:out> </body> </html> * 效果 * ![3IEpUyN.png][] 4. 输出默认值 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:out value="${haha}" default="haha~~"></c:out> </body> </html> * 效果 * ![P4lMGhW.png][] 2. <c:set property="" scope="" target="" value="" var=""></c:set> 1. 增加域属性 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:set scope="request" var="name" value="kungfupeng"></c:set> ${requestScope.name} </body> </html> * 效果 * ![GtpnjGs.png][] 2. 向map中添加键值对和修改键值对 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% HashMap<String, String> map = new HashMap<String, String>(); pageContext.setAttribute("map", map); %> <c:set target="${map }" property="name" value="kungfu~peng"></c:set> ${map} </body> </html> * 效果 * ![GeGpmxI.png][] 3. 修改javabean # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% Person p = new Person(); p.setName("aa"); pageContext.setAttribute("p", p); %> ${p.name} <br /> <c:set target="${p }" property="name" value="kungfu~peng"></c:set> ${p.name} </body> </html> * 效果 * ![E5ecIkP.png][] 3. <c:remove var="" scope=""/> 1. 删除指定域中的值 # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("name", "kungfu~peng"); application.setAttribute("name", "kungfu~peng"); session.setAttribute("name", "kungfu~peng"); request.setAttribute("name", "kungfu~peng"); %> ${name} <br /> <c:remove var="name" scope="request"></c:remove> <%=request.getAttribute("name")%> <%=pageContext.getAttribute("name")%> <%=application.getAttribute("name")%> <%=session.getAttribute("name")%> </body> </html> * 效果 * ![hoSS472.png][] 2. 不指定范围,则删除所有域中的值 # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("name", "kungfu~peng"); application.setAttribute("name", "kungfu~peng"); session.setAttribute("name", "kungfu~peng"); request.setAttribute("name", "kungfu~peng"); %> ${name} <br /> <c:remove var="name"></c:remove> <%=request.getAttribute("name")%> <%=pageContext.getAttribute("name")%> <%=application.getAttribute("name")%> <%=session.getAttribute("name")%> </body> </html> * 效果 * ![0IHe9v5.png][] 4. <c:catch var=""></c:catch> 1. 捕获指定范围的异常 # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:catch var="e"><%=(1 / 0)%></c:catch> </body> </html> * 效果 * ![ZSE5vNV.png][] 2. var返回异常的对象 # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:catch var="e"><%=(1 / 0)%></c:catch> ${e } </body> </html> * 效果 * ![R5p8wuJ.png][] 5. <c:if test="判断表达式" scope="域" var="test的Boolean值"></c:if>:只有if,没有else 1. 判断语句 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:if test="true" scope="request" var="is">hello</c:if> ${requestScope.is} </body> </html> * 效果 * ![C0shBa4.png][] 6. <c:choose><c:when><c:otherwise> # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% pageContext.setAttribute("day", 7); %> <c:choose> <c:when test="${day==1 }">星期一</c:when> <c:when test="${day==2 }">星期二</c:when> <c:when test="${day==3 }">星期三</c:when> <c:when test="${day==4 }">星期四</c:when> <c:when test="${day==5 }">星期五</c:when> <c:when test="${day==6 }">星期六</c:when> <c:otherwise>星期天</c:otherwise> </c:choose> </body> </html> * 效果 * ![Xv03lrI.png][] 7. <c:forEach begin="" end="" items="" step="" var="" varStatus="位置"></c:forEach> 1. 普通循环 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:forEach begin="1" end="5" step="1">a<br /> </c:forEach> </body> </html> * 效果 * ![ycASNvZ.png][] 2. 增强for循环 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <% ArrayList<String> list = new ArrayList<String>(); list.add("a"); list.add("b"); list.add("c"); pageContext.setAttribute("list", list); %> <c:forEach items="${list}" var="i">${i}<br /> </c:forEach> </body> </html> * 效果 * ![rvsryWj.png][] 8. <c:forTokens items="" delims=""></c:forTokens>分割 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:forTokens items="cc.vv.aa" delims="." var="i">${i }</c:forTokens> </body> </html> * 效果 * ![IefygDt.png][] 9. <c:url context="" scope="" value="" var=""></c:url> * url重写【第一次有cookie,但它是智能的,如果没禁用,则第二次访问时,Jsessionid就自动不带了】 # # <%@page import="compeng.javabean.Person"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> </head> <body bgcolor="#00ff00" text="#ffffff"> <c:url value="/index.jsp" var="i" scope="request" context="/EasyMall"></c:url> ${requestScope.i} </body> </html> * 效果 * ![DCC7xVD.png][] ### 自定义标签 ### * 略(补充材料中找) ### EasyMall页面改造 ### * 主页 * top.jsp # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML> <link rel="stylesheet" href="css/head.css" /> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <div id="common_head"> <div id="line1"> <div id="content"> <c:if test="${sessionScope.username!=null}"> 您好:${sessionScope.username} | <a href="${requestScope.contextPath }/LogoutSer">注销 </a> </c:if> <c:if test="${sessionScope.username==null}"> <a href="${requestScope.contextPath }/login.jsp">登录</a> | <a href="${requestScope.contextPath }/regist.jsp">注册</a> </c:if> </div> </div> <div id="line2"> <img id="logo" src="img/head/logo.jpg" /> <input type="text" name="" /> <input type="button" value="搜索" /> <span id="goto"> <a id="goto_order" href="#">我的订单</a> <a id="goto_cart" href="#">我的购物车</a> </span> <img id="erwm" src="img/head/qr.jpg" /> </div> <div id="line3"> <div id="content"> <ul> <li><a href="#">首页</a></li> <li><a href="#">全部商品</a></li> <li><a href="#">手机数码</a></li> <li><a href="#">电脑平板</a></li> <li><a href="#">家用电器</a></li> <li><a href="#">汽车用品</a></li> <li><a href="#">食品饮料</a></li> <li><a href="#">图书杂志</a></li> <li><a href="#">服装服饰</a></li> <li><a href="#">理财产品</a></li> </ul> </div> </div> </div> * index.jsp # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8" buffer="0kb"%> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/index.css" /> <title>欢迎光临EasyMall</title> </head> <body> <%@include file="head.jsp"%> <div id="index"> <div id="line1"> <img src="img/index/banner_big.jpg" /> </div> <div id="line2"> <img id="line2_1" src="img/index/adv1.jpg" /> <img id="line2_2" src="img/index/adv2.jpg" /> <img id="line2_3" src="img/index/adv_l1.jpg" /> </div> <div id="line3"> <img id="line3_1" src="img/index/adv3.jpg" /> <img id="line3_2" src="img/index/adv4.jpg" /> <div id="line3_right"> <img id="line3_3" src="img/index/adv_l2.jpg" /> <img id="line3_4" src="img/index/adv_l3.jpg" /> </div> </div> <div id="line4"> <img src="img/index/217.jpg" /> </div> <div id="line5"> <span id="line5_1"> <img src="img/index/icon_g1.png" /> 500强企业 品质保证 </span> <span id="line5_2"> <img src="img/index/icon_g2.png" /> 7天退货 15天换货 </span> <span id="line5_3"> <img src="img/index/icon_g3.png" /> 100元起免运费 </span> <span id="line5_4"> <img src="img/index/icon_g4.png" /> 448家维修网点 全国联保 </span> </div> </div> <%@include file="foot.jsp"%> </body> </html> * foot.jsp # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <!DOCTYPE HTML> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/foot.css" /> <div id="common_foot"> <p> Copyright © 2011-2015 达内软件技术有限公司 版权所有 保留一切权利 苏B2-20130048号 | 京ICP备09062682号-9 <br> 网络文化经营许可证苏网文[2012]0401-019号 </p> </div> * 注册 * regist.jsp # # <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML> <html> <head> <title>欢迎注册EasyMall</title> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/regist.css" /> <script type="text/javascript" src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(document).ready( function() { var canSubmit = true;//提交的标志 //用户名已存在检查(ajax) $("input[name='username']").blur( function() { if ($("input[name='username']").val() != "") { $.get("/UserNameHasServlet?" + $.param({ "username" : $( "input[name='username']") .val() }), function(data) { if ($.parseJSON(data).hasUser) { //提示该账户已有 $("input[name='username']") .next("span").text("用户名重复!"); canSubmit = false; } else { $("input[name='username']") .next("span").text(""); canSubmit = true; } }); } }); //两次密码的一致性检验(失去焦点) $("input[name='password2']").blur( function() { if ($("input[name='password2']").val() != "") { if ($("input[name='password']").val() != $( "input[name='password2']").val()) {//密码不一致 $("input[name='password2']").next("span") .text("密码不一致!"); canSubmit = false; } else { $("input[name='password2']").next("span") .text(""); canSubmit = true; } } }); //检查邮箱的格式是否正确 $("input[name='email']").blur(function() { var email_Reg = /^\w+@\w+(\.\w+)+$/; if ($(this).val() != "" && email_Reg.test($(this).val())) { $(this).next("span").text(""); canSubmit = true; } else { $(this).next("span").text("邮箱格式不正确!"); canSubmit = false; } }); //验证码切换(点击事件) $("#yzm_img").click( function() { $(this).attr( "src", "/ValiImageServlet?time=" + new Date().getTime()); }); //表单提交事件 $("form").submit(function() { //判断所有的输入框是否为空 $.each($("input[type!='submit']"), function() { if ($(this).val() == "") {//密码不一致 $(this).nextAll("span").text("数据不能为空!"); canSubmit = false; } else { $(this).nextAll("span").text(""); canSubmit = true; } }); return canSubmit; }); }); </script> </head> <body> <h1>欢迎注册EasyMall</h1> <form action="/RegisteSer" method="POST" onsubmit=""> <table> <tr> <td class="tds">用户名:</td> <td><input type="text" name="username" value="${param.username }"><span></span></td> </tr> <tr> <td class="tds">密码:</td> <td><input type="password" name="password"><span></span> </td> </tr> <tr> <td class="tds">确认密码:</td> <td><input type="password" name="password2"><span></span> </td> </tr> <tr> <td class="tds">昵称:</td> <td><input type="text" name="nickname" value="${param.nickname }"><span></span></td> </tr> <tr> <td class="tds">邮箱:</td> <td><input type="text" name="email" value="${param.email }"><span></span> </td> </tr> <tr> <td class="tds">验证码:</td> <td><input type="text" name="valistr"><img id="yzm_img" src="/ValiImageServlet" style="cursor: pointer" /><span><font color="#ff0000">${requestScope.msg }</font> </span> </td> </tr> <tr> <td colspan="2"><input type="submit" value="注册用户" /></td> </tr> </table> </form> </body> </html> * 登录 * login.jsp # # <%@page import="java.net.URLDecoder"%> <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="css/login.css" /> <title>EasyMall欢迎您登陆</title> </head> <body> <h1>欢迎登陆EasyMall</h1> <form action="/LoginSer" method="POST"> <table> <c:if test="${param.msg!=null}"> <tr> <td colspan='2'><font color='#ff0000'> <!-- 注:这里没有解决乱码的jstl标签,所以用java代码来写--><%=new String(request.getParameter("msg").getBytes( "iso8859-1"), "utf-8")%> </font> </td> </tr> </c:if> <tr> <td class="tdx">用户名:</td> <td><input type="text" name="username" id="username" value="" /> </td> </tr> <tr> <td class="tdx">密码:</td> <td><input type="password" name="password" /></td> </tr> <tr> <td colspan="2"><input type="checkbox" name="remname" value="true" <c:if test="${cookie.remname!=null }">checked="checked"</c:if> />记住用户名 <input type="checkbox" name="autologin" value="true" />30天内自动登陆</td> </tr> <tr> <td colspan="2"><input type="submit" value="登陆" /> </td> </tr> </table> </form> <script type="text/javascript"> //给账号设值 var username = "${cookie.remname.value}"; document.getElementById("username").value = decodeURIComponent(username); </script> </body> </html> ### 补充 ### * ![y60FkRT.jpg][] [FETMyUX.png]: https://i.imgur.com/FETMyUX.png [umxe374.png]: https://i.imgur.com/umxe374.png [7YSvJ6R.png]: https://i.imgur.com/7YSvJ6R.png [bRnRZz1.png]: https://i.imgur.com/bRnRZz1.png [Mu07joZ.png]: https://i.imgur.com/Mu07joZ.png [yeTSkR0.png]: https://i.imgur.com/yeTSkR0.png [UJok4Bq.png]: https://i.imgur.com/UJok4Bq.png [ZlejaB2.png]: https://i.imgur.com/ZlejaB2.png [Dkcbi59.png]: https://i.imgur.com/Dkcbi59.png [0s0Tc40.png]: https://i.imgur.com/0s0Tc40.png [taNfPDZ.png]: https://i.imgur.com/taNfPDZ.png [qs1nnoG.png]: https://i.imgur.com/qs1nnoG.png [Is1nnmE.png]: https://i.imgur.com/Is1nnmE.png [22HXZbW.png]: https://i.imgur.com/22HXZbW.png [3IEpUyN.png]: https://i.imgur.com/3IEpUyN.png [P4lMGhW.png]: https://i.imgur.com/P4lMGhW.png [GtpnjGs.png]: https://i.imgur.com/GtpnjGs.png [GeGpmxI.png]: https://i.imgur.com/GeGpmxI.png [E5ecIkP.png]: https://i.imgur.com/E5ecIkP.png [hoSS472.png]: https://i.imgur.com/hoSS472.png [0IHe9v5.png]: https://i.imgur.com/0IHe9v5.png [ZSE5vNV.png]: https://i.imgur.com/ZSE5vNV.png [R5p8wuJ.png]: https://i.imgur.com/R5p8wuJ.png [C0shBa4.png]: https://i.imgur.com/C0shBa4.png [Xv03lrI.png]: https://i.imgur.com/Xv03lrI.png [ycASNvZ.png]: https://i.imgur.com/ycASNvZ.png [rvsryWj.png]: https://i.imgur.com/rvsryWj.png [IefygDt.png]: https://i.imgur.com/IefygDt.png [DCC7xVD.png]: https://i.imgur.com/DCC7xVD.png [y60FkRT.jpg]: https://i.imgur.com/y60FkRT.jpg
相关 大数据正式5 大数据正式5 常见的shell命令 管道命令 管道符| 将两个命令隔开,左边命令的输出就会作为管道右边命令的输入 连续使 旧城等待,/ 2022年06月06日 10:29/ 0 赞/ 215 阅读
相关 大数据正式2 大数据正式2 用户身份与用户组记录的文件 在Linux系统当中,默认情况下所有的系统上的账号信息都记录在/etc/passwd这个文件内(包括root用户), 快来打我*/ 2022年06月06日 08:38/ 0 赞/ 140 阅读
相关 大数据正式10 大数据正式10 jQuery 定义:jQuery是一个“写的更少”,但“做的更多”的轻量级JavaScript函数库 优势 1. 可 ゞ 浴缸里的玫瑰/ 2022年06月05日 06:24/ 0 赞/ 221 阅读
相关 大数据正式19 大数据正式19 jsp标签技术 提出:jsp是一种动态的web资源开发技术,看起来像html,但是可以嵌入java代码,非常方便开发,但是这样还是两种语言的混 待我称王封你为后i/ 2022年06月04日 06:39/ 0 赞/ 207 阅读
相关 大数据正式32 大数据正式32 Spring中的JDBC jar包准备 ![zW1gEQQ.png][] bean+properties普通配置 悠悠/ 2022年06月03日 08:44/ 0 赞/ 146 阅读
相关 大数据正式27 大数据正式27 Spring 先来张图简单看一下 ![oQySJMC.png][] spring框架的特点 1 悠悠/ 2022年06月03日 04:38/ 0 赞/ 126 阅读
相关 大数据正式37 大数据正式37 Maven 传统项目存在的弊端 1. 导入jar包得经验丰富 2. 传统项目打包方式不通用,不能很好的支持聚合项 左手的ㄟ右手/ 2022年06月02日 01:46/ 0 赞/ 138 阅读
相关 大数据正式36 大数据正式36 MyBatis的接口形式 注意两点 1. 接口名---namespace值对应 2. 方法名---id一致 淩亂°似流年/ 2022年06月02日 01:12/ 0 赞/ 243 阅读
相关 大数据正式34 大数据正式34 Spring+SpringMVC 小例子 效果图 ![hsIEQmd.png][] 功能说明 川长思鸟来/ 2022年06月02日 00:16/ 0 赞/ 256 阅读
还没有评论,来说两句吧...