JSP: Scriptlet、page指令、连接MySQL数据库、include指令、案例:用户登录

目录

JSP注释

Scriptlet

第一种<%%>

第二种Scriptlet<%!%>

第三种Scriptlet<%=%>

总结

page指令

页面编码

MIME设置

import指令

连接MySQL数据库

include指令

静态导入处理(静态包含)

动态导入处理(动态包含)

两种包含的区别

综合案例:用户登录

核心登录处理

前端JS验证


JSP注释

JSP之中使用的语法还是Java之中采用的语法形式, 在JSP中有两类注释:

  • 显式注释: 所有的注释信息发送到客户端上, 用户可以看见注释信息, HTML风格注释: <!-- 注释 --> ;

  • 隐式注释: Java风格的注释, 该注释不会发送到客户端浏览器之中;

          | - Java风格注释: //    /**/   

          | - JSP风格注释: <%--  注释 --%>

在以后开发之中编写最多的还是隐式注释.

Scriptlet

在Java之中有一些这样的名词: applet(应用小程序)  servelet(服务器端小程序)  scriptlet(脚本小程序), 脚本小程序主要是编写在JSP文件之中的, 主要是编写Java程序使用的, 同时可以与HTML的代码进行分离. 但是从实际开发来讲一共定义有三类scriptlet: <%%>, <%!%>, <%=%>

第一种<%%>

该Scriptlet主要功能是定义局部变量, 编写程序的语句. 所以该类的Scriptlet就好比类中的普通方法一样的作用地位.

范例: 观察局部变量

<% // 定义局部变量
	int count = 0 ;
%>
<%	// 编写语句
	out.println(count ++ ) ;
%>

因为执行的是局部变量, 那么在每一次执行页面请求的时候, 都会重新申明. 

第二种Scriptlet<%!%>

使用该种scriptlet的主要作用可以定义全局常量、全局变量 、方法 、类. 

范例: 定义全局常量与变量

<%!
	int count = 0 ;
	public static final String URL = "www.baidu.com" ;
%>
<%	// 编写语句
	out.println(count ++ ) ;
	out.println("<h1>" + URL + "</h1>") ;
%>

此时count是全局的常量, 即使访问一次, 那么也只会为count申明一次, 不会重复声明, 但是这样的变量恒少会去真正的使用, 使用此类Scriptlet里面用的最多的就是全局常量信息.

范例: 定义方法

<%!
	int count = 0 ;
	public static final String URL = "www.baidu.com" ;
	public int add(int x, int y) {
		return x + y ;
	}
%>
<%	// 编写语句
	out.println(count ++ ) ;
	out.println("<h1>" + URL + "</h1>") ;
	out.println("<h1>" + add(10,290) + "</h1>") ;
%>

范例: 定义类(不使用)

第三种Scriptlet<%=%>

<%=%>可以进行表达式输出使用,也就是说可以输出内容。之前的输出是使用out.println(),现在来观察第三种的具体操作形式:

<%
	String str = "www.baidu.com" ;
%>
<h1><%=str%></a></h1>

可以看出可以将html代码和JSP中的变量输出进行分割。

范例:与JavaScript混用的问题

<%
	String str = "www.baidu.com" ;
%>
<script type="text/javascript">
	alert("<%=str%>");
</script>

除了上述的问题之外,在实际开发之中使用表达式输出<%=%>,有可能造成初期的代码混乱。

范例:通过JSP输出一个乘法口诀表(web学习初期)(重点)

<table border = "1">
<%
    for(int i = 0; i <=9 ; i ++ ){
%>
    <tr>
<%
        for(int j = 0; j <= i; j ++) {
%>
            <td><%=i%> * <%=j%> = <%=i*j%> </td>
<%
        }
%>
    </tr>
<%
    }
%>
</table>

总结

scriptlet使用原则:

  • <%!%> 只用于定义全局变量。

  • <%%> 编写具体的语句和局部变量。

  • <%=%> 在JSP中的所有的输出使用此语句,禁止在JSP中输出使用out.println()

page指令

在JSP文件里面,page指令是唯一一个描述jsp页面属性的指令,那么这个属性可能包括:文件编码、MIME相应类型、导入处理包、页面的缓冲配置、session配置等等。

页面编码

为了保证页面的正常显示,需要进行页面编码的设置。可以直接在page指令里面编写一个pageEncoding的属性信息,而现在的常用编码:UTF-8。

范例:设置显示编码

<%@ page pageEncoding = "UTF-8" %>
<h1>哎呀又打游戏了</h1>

MIME设置

MIME指的是一个页面的最终显示形式,在编写网页的时候*.htm与*.htm效果是一样的,这个就属于MIME类型显示的风格,在TOMCAT_HOME/conf/web.xml文件里面定义有这样的显示方式。

    <mime-mapping>
        <extension>htm</extension>
        <mime-type>text/html</mime-type>
    </mime-mapping>

发现htm和html的mime处理模式是相同的,所以这两个文件都可以采用同样的方式进行解析处理。

范例:定义用户自己的MIME风格

<%@ page pageEncoding = "UTF-8" %>
<%@ page contentType="application/xml" %>
<h1>哎呀又打游戏了</h1>

如果没有设置MIME,则默认的风格为“text/html”;可以设置成word类型,打开他会自动下载,等。也可以进行编码中乱码问题的设置处理。

import指令

在page指令之中最为重要的功能是导入开发包的操作(该开发包必须在CLASSPATH之中)。

范例:import使用

<%@ page pageEncoding = "UTF-8" %>
<%@ page import="java.util.*,java.text.*" %>
<%@ page import="java.sql.*" %>
<h1><%=new java.util.Date() %></h1>
<h1><%=new SimpleDateFormat("yyyy-MM-dd").format(new java.util.Date()) %></h1>

import指令是系统之中唯一一个可以重复编写的page语句信息。那么既然可以进行导包的操作处理,那么Base64、ArrayList、Hash Map、ConcurrentHashMap这样的操作类就都可以使用了。

连接MySQL数据库

既然page指令可以进行开发包的导处理,那么自然可以利用利用page指令导入java.sql包,从而进行数据库的处理,要进行数据库的连接需要保证服务已经正常开启,并且将数据库的驱动程序拷贝到TOMCAT_HOME/lib目录下(重新启动Tomcat才能加载到最新的配置项)。 

范例:连接数据库,将Emp中的数据以表格的形式显示

<%@ page pageEncoding = "UTF-8" %>
<%@ page import="java.sql.*" %>
<%!
	// 将数据库信息定义为全局常量
	public static final String DRIVER = "com.mysql.jdbc.Driver" ;
	public static final String URL = "jdbc:mysql://127.0.0.1:3306/bjpowernode" ;
	public static final String USER = "root" ;
	public static final String PASSWORD = "3530553606";
%>

<%	// 数据库的连接查询处理,需要以下的变量信息
	Connection conn = null ;
	PreparedStatement psmt = null ;
	ResultSet rs = null ;	
%>
<%
	Class.forName(DRIVER) ;
	conn = DriverManager.getConnection(URL,USER,PASSWORD) ;
	String sql = "select empno,ename,job,hiredate,sal,comm from emp" ;
	psmt = conn.prepareStatement(sql);
	rs = psmt.executeQuery() ;
%>
<table style="width:100%" boder="0" cellpadding="1" cellspacing="1"  bgcolor="#F5F5F5">
<thead>
  <tr bgcolor="#FFFFFF">
    <th>雇员编号</th>
    <th>姓名</th>
    <th>职位</th>
    <th>入职日期</th>
    <th>工资</th>
    <th>佣金</th>
  </tr>
</thead>
<tbody>
<%
	while(rs.next()){
		int empno = rs.getInt(1);
		String ename = rs.getString(2);
		String job = rs.getString(3);
		Date hiredate = rs.getDate(4);
		double sal = rs.getDouble(5);
		double comm = rs.getDouble(6);
%>
  <tr bgcolor="#FFFFFF">
    <td><%=empno %></td>
    <td><%=ename %></td>
    <td><%=job %></td>
    <td><%=hiredate %></td>
    <td><%=sal %></td>
    <td><%=comm %></td>
  </tr>
<%
	}

%>
</table>

<%
	conn.close() ;
%>



通过数据库读取数据,而后利用JSP拼凑一个表格显示操作,那么这样的处理方式才是最合理的。

include指令

在任何一个页面之中,都是由固定的部分所组成的。

所以在这样的情况下,为了能够实现代码的重复使用。那么最好的做法是将这些逻辑代码单独保存在一个文件之中,而后在需要的情况下进行导入处理。这样就可以实现代码的重用操作,而在jsp里面提供有两类语法:

  • 静态导入处理:<%@include file="路径"%> ;

  • 动态导入处理:<jsp:include page="路径"/> ;

静态导入处理(静态包含)

静态导入处理(静态包含)的处理原则非常的简单,将所需要的页面代码直接包含到程序之中一起处理;

范例:建立三个包含的页面文件

info.htmlinfo.jspinfo.inc
<h1>info.html</h1><h1>info.jsp</h1><h1>info.inc</h1>

此时可以利用include指令导入到一个文件中进行显示。

范例:编写导入语句

<%@ page pageEncoding="UTF-8"%>
<h1>****************</h1>
<%@ include file="info.html"%>
<%@ include file="info.jsp"%>
<%@ include file="info.inc"%>

此时就实现了页面的导入处理操作

动态导入处理(动态包含)

动态包含于静态包含的最大的特点是会区分被包含的页面是动态页还是静态页,如果是动态页按照先处理后包含的原则进行处理,如果是静态页面则与静态包含的处理相同。

对于动态包含,由于指令是标签指令形式,那么该类指令在最后一定要有所完结,对于动态包含的指令有以下两种:

  • 不传递参数包含:<jsp:include page="包含路径"/>

  • 向包含页面传递参数:

<jsp:include page="包含路径”>
    <jsp:param  name="参数名称" value="参数内容"/>
    <jsp:param  name="参数名称" value="参数内容"/>
    ......
</jsp:include>

所有这些传递参数在被包含页面统一使用request.getParameter()方法进行接收处理。

范例: 只包含不传递参数

<%@ page pageEncoding="UTF-8"%>
<h1>****************</h1>
<jsp:include page="info.html"/>
<jsp:include page="info.jsp"/>
<jsp:include page="info.inc"/>

此时操作的效果与静态包含的效果相同,所以得出结论:动态包含的功能要比静态包含的要多,还存在传递参数的功能。

范例: 向页面传递参数

定义被包含的页面,param.jsp

<%@ page pageEncoding="UTF-8"%>
<h1>参数A:<%=request.getParameter("paramA") %></h1>
<h1>参数B:<%=request.getParameter("paramB") %></h1>

在includeDemo.jsp中,编写:

<%@ page pageEncoding="UTF-8"%>
<h1>****************</h1>
<jsp:include page="param.jsp">
	<jsp:param name="paramA" value="hello"/>
	<jsp:param value="paramB" name="57"/>
</jsp:include>

但是需要注意的是,此时接收的参数直接采用一个固定的内容传输的,如果要传输的参数是定义的变量,那么就需要通过表达式输出:

<%@ page pageEncoding="UTF-8"%>
<% // 标签指令不允许出现在Scriptlet之中
	String info = "57" ; 
%>
<h1>****************</h1>
<jsp:include page="param.jsp">
	<jsp:param name="paramA" value="hello"/>
	<jsp:param name="paramB" value="<%=info %>"/>
</jsp:include>

向标签中传递参数的时候一定要使用表达式输出。

两种包含的区别

面试题:请解释jsp中两种包含的区别?

两种包含的语法:

  • 静态包含:<%@include file="路径"%>

  • 动态包含:<jsp:include page="路径"/> 

处理流程:

  • 静态包含:将被包含页面的源代码包含进来,而后在一起进行解析执行,即先包含后处理;

  • 动态包含:先分别各自进行源代码的解析处理,最后将处理后的结果包含在一起处理显示,即先处理后包含;

由于在以后的开发过程之中,不确定被包含的页面是否存在有重名的变量(静态包含变量重名会出错),所以以后只使用动态包含。

forward指令

forward是一个无条件的跳转指令,跳转又被称为重定向,让一个页面跳转到另外一个页面。语法定义如下:

  • 跳转时不传递参数:<jsp:forward page="跳转路径"/>

  • 跳转时传递参数:

<jsp:forward page="跳转路径”>
    <jsp:param  name="参数名称" value="参数内容"/>
    <jsp:param  name="参数名称" value="参数内容"/>
    ......
</jsp:forward>

范例:实现跳转

<%@ page pageEncoding="UTF-8" %>
<h1>forward.jsp页面</h1>
<jsp:forward page="param.jsp">
    <jsp:param  name="paramA" value="hello"/>
    <jsp:param  name="paramB" value="word"/>
</jsp:forward>

param.jsp

<%@ page pageEncoding="UTF-8"%>
<h1>参数A:<%=request.getParameter("paramA") %></h1>
<h1>参数B:<%=request.getParameter("paramB") %></h1>

执行之后发现路径依然是执行的路径,但是内容是param.jsp的内容,即跳转后的页面内容。这种不改变请求路径的跳转,在开发中称为服务器端跳转。

跳转指令属于标签指令,操作最后一定要完结标签,同时跳转属于服务器端跳转。

综合案例:用户登录

所有的系统里面用户登录是一定需要具备的功能,在实际开发之中,用户的登录处理需要牵扯到角色、权限分配等概念,本次并不考虑这些。

用户信息保存在数据库里面,需要自己创建一张用户表(member),用于保存mid(作为主键),password。

x

编写数据库脚本与测试数据:

drop table if exists member;
create table member(
	mid 	 	varchar(50) primary key,
	password  varchar(32)
);
insert into member(mid,password) values ("ren1","mima1");
insert into member(mid,password) values ("ren2","mima2");

核心登录处理

表单验证处理和JSP没有关系,表单验证只是给用户填写表单提供一个引导。

1、建立login.jsp页面,该页面提供一个表单,表单里面有两个组件:mid、password;

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>登录程序</title>
</head>
<body>	 	
<form action="check.jsp" method="post">
<table>
	<tr>
		<td>用户名:</td>
		<td><input type="text" name="mid" id="mid"></td>
	</tr>			
	<tr>
		<td>密码:</td>
		<td><input type="password" name="password" id="password"></td>
	</tr>
	<tr>
		<td colspan="2">
			<input type="submit" value="登录">
			<input type="reset" value = "重置">
		</td>
	</tr>
</table>
</form>
</body>
</html>

2、check.jsp页面主要做的是数据库的验证处理;

验证的sql语句:

select mid from member where mid='用户名' and password='密码';

此时有数据返回,则表示验证通过,否则表示输入的账户或密码是错误的。

<%@ page language="java" pageEncoding="UTF-8"%>
<%@ page import="java.sql.*" %>
<%!
	// 将数据库信息定义为全局常量
	public static final String DRIVER = "com.mysql.jdbc.Driver" ;
	public static final String URL = "jdbc:mysql://127.0.0.1:3306/bjpowernode" ;
	public static final String USER = "root" ;
	public static final String PASSWORD = "3530553606";
%>
<%	 
	boolean flag = false ;  // 作为登录标记使用
	Class.forName(DRIVER) ;
	Connection conn = DriverManager.getConnection(URL,USER,PASSWORD) ;
	String sql = "select mid from member where mid=? and password=?" ;
	PreparedStatement psmt = conn.prepareStatement(sql);
	psmt.setString(1, request.getParameter("mid"));
	psmt.setString(2, request.getParameter("password")) ;
	ResultSet rs = psmt.executeQuery() ;
	if(rs.next()){  // 现在有返回结构则表示用户名和密码是正确的
		flag = true; // 表示登录成功
	}
	conn.close() ;
%>
<%
	if(flag){  // 登录成功,跳转到welcom.jsp
%>
	<jsp:forward page="welcome.jsp"/>
<%	
	} else {
%>
	<jsp:forward page="login.jsp" >
		<jsp:param value="loginError" name="error"/>
	</jsp:forward>

<%		
	}
%>
 

3、定义welcom.jsp页面,该页面主要是负责显示一个简单的欢迎信息

<%@ page language="java" pageEncoding="UTF-8"%>
<html>
<head>
<title>欢迎</title>
</head>
<body>
	<h1>登录成功</h1>
</body>
</html>

 4、处理错误的方式,判断返回的error这个参数是否为空

在表格上面增加如下代码:

<%
	String error = request.getParameter("error");
%>
<h1><%=error == null ? "" : "登录失败,账户名或密码错误!" %></h1>

前端JS验证

1、建立util.js文件

/**
 * 本文件是一个JS工具文件,里面应该提供有一系列属性、函数、类
 */
/**
 * 本方法主要是验证指定元素内容是否为空
 * @param {*} eleId 
 */
function validateEmpty(eleId) {
    var obj = document.getElementById(eleId); // 取得一个表单元素
    if (obj != null){
        if (obj.value == "") {//数据错误
            setFailureStyle(obj);
            return false ; //表示验证失败
        } else {
            setSuccessStyle(obj);
            return true ; //表示验证成功
        }
    }
    return false;
}
function validateRegex(eleId,regex){ // 从外部传入正则
    if (validateEmpty(eleId)){//进行是否为空的验证
        var obj = document.getElementById(eleId); // 取得一个表单元素
        if (!regex.test(obj.value)) {//数据错误
            setFailureStyle(obj);
            return false ; //表示验证失败
        } else {            
            setSuccessStyle(obj);
            return true ; //表示验证成功
        }
    }
}
function validateEmail(eleId) {  //在正则基础上的一个开发
    return validateRegex(eleId,/^\w+@\w+\.\w+$/)
}
function validateNumber(eleId) { //在正则基础上的一个开发
    return validateRegex(eleId,/^\d+(\.\d+)?$/)
}
/**
 * 
 * @param {*} srcId  要比较的原始数据
 * @param {*} distId 要设置比较的字段ID
 */
function validateRepeat(srcId,distId){
    if (validateEmpty(srcId) && validateEmpty(distId)) {
        var srcObj = document.getElementById(srcId);
        var distObj = document.getElementById(distId);
        if (srcObj.value != distObj.value) { // 失败
            setFailureStyle(distObj);
            return false ; //表示验证失败
        } else {//成功
            setSuccessStyle(distObj);
            return true ; //表示验证成功
        }
    }
    return false;
}
function setSuccessStyle(obj){  // 设置成功 
    obj.className = "success" ; //设置正确的样式
    var spanObj = document.getElementById(obj.id+ "Span") ; //取得提示信息元素
    if (spanObj != null) {       
        spanObj.innerHTML  = "<font color='green'>√</font>" ;   // 设置元素内部内容
    }
}
function setFailureStyle(obj){  // 设置失败
    obj.className = "failure" ; //设置错误的样式
    var spanObj = document.getElementById(obj.id+ "Span") ; //取得提示信息元素
    if (spanObj != null) {        
        spanObj.innerHTML  = "<font color='red'>×</font>" ;   // 设置元素内部内容
    }
}
/**
 * 阻止表单在出现问题时进行提交
 */
function fromStop(e){
    if(e && e.preventDefault){  // 现在是在W3C标准下执行的
        e.preventDefault() ; // 阻止浏览器动作
    } else { // 专门针对IE浏览器的处理
        window.event.returnValue = false ;
    }
}

2、将所需要的样式和js文件导入到login.jsp页面之中;

在login.jsp文件中<head>中增加如下代码:

	<link rel="stylesheet" type="text/css" href="css/form.css"/>
	<script type="text/javascript" src="js/util.js"></script>
	<script type="text/javascript" src="js/login.js"></script>

3、编写login.js代码,实现表单验证处理

window.onload = function(){
	document.getElementById("mid").addEventListener("blur",function(){
	    validateMid() ;
	},false);
	document.getElementById("password").addEventListener("blur",function(){
	    validatePassword() ;
	},false);
}
function validateFrom(){
	return validateMid() & validatePassword() ;
}
function validateMid(){
	return validateEmpty("mid");
}
function validatePassword(){
	return validateEmpty("password");
}

JavaScript对于用户的填写表单是一个引导作用。

静态代码与动态代码的区别:JavaScript只是一个静态的页面代码,而JSP依靠web Container才可以进行数据库的连接处理。

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值