2019尚硅谷大数据 Javaweb篇二 JSP、EL和JS
tags:
- 大数据
- 2019尚学堂
categories:
- JSP
- EL
- JavaScript
文章目录
第一节 JSP
1. JSP介绍
- JSP全称Java Server Pages，顾名思义就是运行在java服务器中的页面，也就是在我们JavaWeb中的动态页面，其本质就是一个Servlet。
- 其本身是一个动态网页技术标准，它的主要构成有HTML网页代码、Java代码片段、JSP标签几部分组成，后缀是.jsp
- 相比于Servlet，JSP更加善于处理显示页面，而Servlet跟擅长处理业务逻辑，两种技术各有专长，所以一般我们会将Servlet和JSP结合使用，Servlet负责业务，JSP负责显示。
- 一般情况下， 都是Servlet处理完的数据，转发到 JSP，JSP负责显示数据的工作
- 注意：把已经存在的html变成jsp, 先加下面一句话在该后缀，否则会乱码。
- <%@ page language=“java” contentType=“text/html; charset=UTF-8” pageEncoding=“UTF-8”%>
2. JSP基本使用
- 创建默认支持UTF-8的jsp文件: Window->Preferences->搜JSP
- 在jsp页面上导入java包。鼠标位于第一个Date后面，Alt+/ 可以自动导包
- JSP必须经过服务器处理才能在浏览器打开，不像html直接拖过去也能打开。
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%
Date date = new Date();
%>
<h1>现在的时间是: <%=date %></h1>
</body>
</html>
- 启动服务器，运行。http://localhost:8080/Web_JSP/ 看到页面
- JSP运行原理(服务器目录，右键服务器Browse Deployment Location)
- 把index.jsp页面翻译成index_jsp.java文件。放在服务器的work目录下
- Java虚拟机会把index_jsp.java编译成字节码文件。放在服务器的work目录下
- Servlet容器根据ndex_jsp.class类帮我们造对象，里面有方法可以一行行输出页面内容到浏览器。
- 如果第二次请求，index.jsp没变，则直接用之前生成的类。如果index.jp改变，则重新生成index_jsp.java类和字节码。
3. JSP基本语法
- jsp的注释 : <%-- 注释 --%>
- 写一个grammar.jsp http://localhost:8080/Web_JSP/grammar.jsp 测试常见语法
- JSP脚本片段和JSP表达式。
- JSP的九大隐含对象(可以在JSP中直接使用，加粗的为需要掌握的四个域对象)
- out（JspWriter）：相当于response.getWriter()获取的对象，用于在页面中显示信息。
- config（ServletConfig）：对应Servlet中的ServletConfig对象。
- page（Object）：对应当前Servlet对象，实际上就是this。
- pageContext（PageContext）：当前页面的上下文，也是一个域对象。
- exception（Throwable）：错误页面中异常对象（isErrorPage=“true”）
- <%@ page language=“java” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8” isErrorPage=“true”%> - 只有在错误页面中才有exception,在正常页面中没有。
- <%@ page language=“java” contentType=“text/html; charset=UTF-8”
- request（HttpServletRequest）：HttpServletRequest对象
- response（HttpServletResponse）：HttpServletResponse对象
- application（ServletContext）：ServletContext对象
- session（HttpSession）：HttpSession对象
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 1. JSP脚本片段
作用： 用来写java代码
-->
<%-- exception.getMessage();--%>
<%
for(int i=0;i<10;i++){
out.print("今天天气真好!!");
}
%>
<%-- 循环html语句 --%>
<%
for(int i=0;i<10;i++){
%>
<h2>"今天天气真好!!"</h2>
<%
}
%>
<!-- 2. JSP表达式
作用： 用来向浏览器输出对象
-->
<%="我是通过JSP表达式输出的!" %>
<%-- http://localhost:8080/Web_JSP/grammar.jsp?username=admin --%>
<h1>欢迎您, <%=request.getParameter("username") %></h1>
</body>
</html>
- 四个域(使用规则：能用小的域，就不用大的域)：
- page域
- 范围最小 当前页面
- 对应的域对象: pageContext
- 域对象的类型: PageContext
- request域
- 范围 当前请求
- 对应的域对象: request
- 域对象的类型: HttpServletRequest
- session域
- 范围 当前会话
- 对应的域对象: session
- 域对象的类型: HttpSession
- application域 (例:统计在线人数)
- 范围 当前Web应用
- 对应的域对象: application
- 域对象的类型: ServletContext
- page域
- 四个域对象都以下三个方法:
- void setAttribute(String key，object value)
- Object getAttribute(String key)
- void removeAttribute(String. key)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>四个域对象</title>
</head>
<body>
<!-- 在当前页面分别向四个域中添加四个属性 -->
<%
pageContext.setAttribute("pageKey", "pageValue");
request.setAttribute("reqKey", "reqValue");
session.setAttribute("sessionKey", "sessionValue");
application.setAttribute("applicationKey", "applicationValue");
%>
<h1>在当前页面中四个域中的属性值</h1>
page域中的属性值: <%=pageContext.getAttribute("pageKey") %><br>
request域中的属性值: <%=request.getAttribute("reqKey") %><br>
session域中的属性值: <%=session.getAttribute("sessionKey") %><br>
application域中的属性值: <%=application.getAttribute("applicationKey") %><br>
<!-- 转发到Scope2.jsp页面, page的东西取不到了 -->
<%-- <jsp:forward page="/Scope2.jsp"></jsp:forward> --%>
<!-- 超链接,page的东西取不到, request取不到 -->
<a href="/Web_JSP/Scope2.jsp">Scope2.jsp页面</a>
<!-- 关闭浏览器直接输入http://localhost:8080/Web_JSP/Scope2.jsp -->
<!-- page的东西取不到, request取不到，session取不到 -->
<!-- 重启服务器输入http://localhost:8080/Web_JSP/Scope2.jsp所有都取不到 -->
</body>
</html>
第二节 EL技术
2.1 EL表达式介绍
- EL是JSP内置的Expression Language(表达式语言)，用以访问页面的上下文以及不同作用域中的对象 ，取得对象属性的值，或执行简单的运算或判断操作。EL在得到某个数据时，会自动进行数据类型的转换。
- EL表达式用于代替JSP表达式(<%= %>)在页面中做输出操作。
- EL表达式仅仅用来读取数据，而不能对数据进行修改。
- 使用EL表达式输出数据时，如果有则输出数据，如果为null则什么也不输出。
- EL表达式的语法: ${ EL表达式(可完成取值、简单的判断、简单的运算等) }
- EL表达式默认查询的规则:
- 先从page域中开始查找，找到后直接返回，不再向其他域中查找，如果找不到再去request域中查找，以此类推。. .
- 如果在application域中仍找不到则返回空串
- EL取值的四个Scope对象，指定获取对应域中数据（精确获取指定域中的属性值）:
- pageScope
- requestScope
- sessionScope
- applicationScope
<%@page import="com.hynqn.bean.Department"%>
<%@page import="com.hynqn.bean.Employee"%>
<%@page import="java.util.Date"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!--
EL全称：Expression Language(表达式语言)
作用: 主要用来输出域对象的属性值。
EL表达式查询的规则:
先从page域中开始查找，找到后直接返回，不再向其他域中查找，如果找不到再去request域中查找，以此类推。. .
如果在application域中仍找不到则返回空串
E1给我们提供了四个Scope对象，用来精确获取指定域中的属性值
-->
<%
Date date = new Date();
// 把date放在page域中，供EL输出
pageContext.setAttribute("time", date+"-");
request.setAttribute("time", date+"--");
session.setAttribute("time", date+"---");
application.setAttribute("time", date+"----");
// 创建Employee对象
Employee employee = new Employee(1,"吴秀波",new Department(1001,"出轨风波"));
//将employe对象放到page域中
pageContext.setAttribute("star", employee);
%>
通过JSP表达式输出当前的时间: <%=date %><br>
通过EL表达式输出当前的时间: ${time}<br>
通过EL表达式输出request域中当前的时间: ${requestScope.time}<br>
<!-- pageScope.star.lastName 实际上调用getlastName方法 -->
通过EL表达式获取Employee对象的lastName: ${pageScope.star.lastName}<br>
通过EL表达式获取Employee对象的dept的name值: ${pageScope.star.dept.name}<br>
<!-- 只要定义了get方法， 获取值时注意get去掉首字母小写-->
通过EL表达式获取自定义函数getOutName的返回值: ${pageScope.star.outName}<br>
<!--pageContext比较特殊,它可以获取其他八个隐藏对象-->
通过JSP表达式获取项目的虚拟路径:<%=request.getContextPath() %><br>
通过EL表达式获取项目的虚拟路径:${pageContext.request.contextPath}
</body>
</html>
第三节 JavaScript技术
3.1 javascript介绍
- 脚本语言。JavaScript是一种解释型的脚本语言,C、C++、Java等语言先编译后执行, 而JavaScript是在程序的运行过程中逐行进行解释。
- 基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
- 简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言。
- 动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。
- 跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。因此一个JavaScript脚本在编写后可以带到任意机器上使用,前提是机器上的浏览器支持JavaScript脚本语言,目前JavaScript已被大多数的浏览器所支持。
3.2 JavaScript的事件驱动
- 用户事件：用户操作，例如单击、鼠标移入、鼠标移出等
- 系统事件：由系统触发的事件，例如文档加载完成。
- 常用的事件:
- onload 加载
- onclick 单击
- onblur 失去焦点
- onfocus 获取焦点
- onmouseover
- onmouseout
3.3 BOM
- Borwser Object Model 浏览器对象模型
- 浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象
- 常用的对象(window的子对象)
document history location screen navigator frames
3.4 DOM
- Document Object Model 文档对象模型
- document对象: window对象的一个属性，代表当前HTML文档，包含了整个文档的树形结构。获 取document对象的本质方法是：window.document，而“window.”可以省略。
- DOM树
| 功能 | API | 返回值 |
|---|---|---|
| 根据id值查询 | document.getElementById(“id值”) | 一个具体的元素节点 |
| 根据标签名查询 | document.getElementsByTagName(“标签名”) | 元素节点数组 |
| 根据name属性值查询 | document.getElementsByName(“name值”) | 元素节点数组 |
3.5 js和JQuery应用案例
- HTML也可以断点调试， 谷歌浏览器F12。点击source, 可以对页面打断点。刷新页面控制运行。
- 原生JS案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
// 当整个文档执行完之后, 在执行函数中的内容。
// 如果不这样写, 它按顺序执行会报错找不到元素,也可以写在body后面
window.onload = function(){
alert("文档执行完毕");
// 1. 获取按钮对象
var btnEle = document.getElementById("btnId");
//alert(btnEle);
// 2. 给按钮对象绑定onclick单击事件
btnEle.onclick = function(){
// 3. 弹出提示框
alert("hello javascript");
};
};
</script>
</head>
<body>
<button id="btnId">Say Hello</button>
</body>
</html>
- Jquery 案例。资料中有Jquery包和中文手册。
- text( )方法:用来获取或设置成对出现的标签中的文本值
- 对象.text():获取文本值
- 对象.text(“new value”): 设置文本值
- html()方法与text()方法唯一的区别是html()方法可以解析html标签
- val()方法:获取或设置input标签中的value属性值
- 对象.val( )获取value属性值
- 对象.val(“new value”): 设置value属性值
- text( )方法:用来获取或设置成对出现的标签中的文本值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引入Jquery.js文件库 -->
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
<!-- 测试是否正常引入Jquery.js文件库 -->
alert($);
alert($==jQuery);
//相当于window.onload = function(){};
$(function(){
alert("文档执行完毕");
$("#btnId").click(function(){
alert("hello javascript");
});
});
</script>
</head>
<body>
<button id="btnId">Say Hello</button>
</body>
</html>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/*
text( )方法:用来获取或设置成对出现的标签中的文本值
对象.text():获取文本值
对象.text("new value"): 设置文本值
html()方法与text()方法唯一的区别是html()方法可以解析html标签
*/
//给文本框绑定focus事件
$(function(){
$("#username").focus(function(){
//将显示文本span标签内容置空
//$("#msgSpan").text("")
$("#msgSpan").html("<font color='green'>我要变绿</font>");
});
//给登录按钮获取绑定时间
$("#sub").click(function(){
/*
val()方法:获取或设置input标签中的value属性值
对象.val( )获取value属性值
对象.val("new value"): 设置value属性值
*/
//获取用户输入的用户名
var username = $("#username").val();
var password = $("#password").val();
//alert(username);
//alert(password);
//判断用户名是否为空
if(username == "" || password == ""){
alert("用户名或密码不能为空!");
// 取消默认行为
return false;
};
});
});
</script>
<base href="http://Localhost:8080/Web_Ex/">
<style type="text/css">
body {
background-color:pink
}
</style>
</head>
<body>
<h1>登录页面</h1>
<form action="LoginServlet" method="post">
<!-- value="abc" -->
用户名: <input type="text" name="username" id="username"><span style="color:red" id="msgSpan"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %></span><br>
密 码 : <input type="password" name="password" id="password"><br>
<input type="submit" value="登录" id="sub"><br>
</form>
</body>
</html>
3.6 正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").click(function(){
var username = $("#username").val();
alert(username);
//设置一个正则表达式 验证用户名是否符合规则
var userReg = /^[a-zA-Z0-9_-]{3, 6}/;
//验证用户名是否符合规则
var flag = userReg.test(username);
//alert(flag);
if(!flag){
return false;
}
});
});
</script>
</head>
<body>
<form action="" method="post">
用户名: <input type="text" name="username" id="username"><br>
<input type="submit" value="登录" id="sub"><br>
</form>
</body>
</html>
第四节 添加注册功能
1. 前端页面
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
<script type="text/javascript" src="../script/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(function(){
$("#username").focus(function(){
$("#msgSpan").html("<font color='red'>请输入注册用户名</font>");
});
//给注册按钮绑定事件
$("#sub").click(function(){
var username = $("#username").val();
var useReg = /^[a-zA-Z0-9_-]{3,16}$/;
var flag = useReg.test(username)
if(!flag){
//不符合规则
alert("用户名不合法，请输入3-16位的字母数字下划线！")
return false;
};
// 验证密码规则的表达式
var pwdReg = /^[a-z0-9_-]{6,18}$/;
var password = $("#password").val();
// 判断密码是否符合规则
if(!pwdReg.test(password)){
//不符合规则
alert("密码不合法，请输入6-18位的字母数字下划线！")
return false;
};
var rePwd = $("#rePwd").val();
if(password != rePwd){
// 两次输入密码不一致
$("#rePwd").val("");
$("#password").val("");
alert("两次输入密码不一致");
return false;
};
var email = $("#email").val();
var emailReg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
if(!emailReg.test(email)){
//不符合规则
alert("邮箱格式不正确！")
return false;
};
});
});
</script>
<base href="http://Localhost:8080/Web_Ex/">
<style type="text/css">
body {
background-color:#bbffaa
}
</style>
</head>
<body>
<h1>欢迎注册</h1>
<form action="RegistServlet" method="post">
<!-- value="abc" -->
用户账号 : <input type="text" name="username" id="username"><span style="color:red" id="msgSpan"><%=request.getAttribute("msg")==null?"":request.getAttribute("msg") %></span><br>
用户密码 : <input type="password" name="password" id="password"><br>
确认密码 : <input type="password" name="rePwd" id="rePwd"><br>
用户邮箱 : <input type="text" name="email" id="email"><br>
<input type="submit" value="注册" id="sub"><br>
</form>
</body>
</html>
2. UserDao接口写验证方法UserDao.java
package com.hynqn.dao;
import com.hynqn.bean.User;
public interface UserDao {
// ctrl+shift+o 导包
/**
* 根据用户名和密码
* @param username
* @param password
* @return user 或者 null
*/
User checkUsernameAndPassword(String username , String password);
/**
* 根据用户名查找数据库中是否已经存在用户
* @param username
* @return true 用户已经存在 false 用户不存在
*/
boolean checkUserName(String username);
/**
* 保存用户名密码到数据库中
* @param username
* @param password
* @param email
*/
void saveUser(String username, String password, String email);
}
3. 实现接口中的方法UserDaoImpl.java
package com.hynqn.dao.impl;
import com.hynqn.bean.User;
import com.hynqn.dao.BasicDao;
import com.hynqn.dao.UserDao;
public class UserDaoImpl implements UserDao {
// 创建BasicDao对象
BasicDao basicdao = new BasicDao();
@Override
public User checkUsernameAndPassword(String username, String password) {
// TODO Auto-generated method stub
String sql = "select id,username,password,email from users where username = ? and password = ?";
// 调用BasicDao中获取一个对象的方法
User bean = basicdao.getBean(User.class, sql, username,password);
return bean;
}
public boolean checkUserName(String username) {
// TODO Auto-generated method stub
String sql = "select id,username,password,email from users where username = ?";
// 调用BasicDao中获取一个对象的方法
User bean = basicdao.getBean(User.class, sql, username);
return bean != null;
}
public void saveUser(String username, String password, String email) {
String sql = "insert into users(username, password, email) value (?, ?, ?)";
// 调用调用BasicDao中通用的增删改方法
basicdao.update(sql, username, password, email);
}
}
4. 写单元测试类
package com.hynqn.test;
import static org.junit.jupiter.api.Assertions.*;
import org.junit.jupiter.api.Test;
import com.hynqn.bean.User;
import com.hynqn.dao.UserDao;
import com.hynqn.dao.impl.UserDaoImpl;
class UserDaoTest {
// 前面写接口类型 后面写实例 多态的写法
UserDao userDao = new UserDaoImpl();
@Test
void testCheckUsernameAndPassword() {
User user = userDao.checkUsernameAndPassword("admin", "123416");
System.out.println(user);
}
@Test
void checkUserName(){
boolean flag = userDao.checkUserName("admin1");
System.out.println(flag);
}
@Test
void saveUser(){
userDao.saveUser("admin1","123456","1wrw@qq.com");
}
}
5. 写Servlet接口
package com.hynqn.servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.hynqn.dao.UserDao;
import com.hynqn.dao.impl.UserDaoImpl;
/**
* 处理用户注册的Servlet
*/
public class RegistServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public RegistServlet() {
super();
}
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
response.getWriter().append("Served at: ").append(request.getContextPath());
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 获取用户输入的用户名密码邮箱
String username = request.getParameter("username");
String password = request.getParameter("password");
String email = request.getParameter("email");
// 创建UserDao对象
UserDao userdao = new UserDaoImpl();
boolean flag = userdao.checkUserName(username);
if(flag) {
// 用户名已存在, 设置提示信息放在request域中
request.setAttribute("msg", "用户名已存在");
//转发到注册页面
request.getRequestDispatcher("/pages/regist.jsp").forward(request, response);
} else {
// 用户名可用, 保存在的数据库中
userdao.saveUser(username, password, email);
//重定向到登录界面
response.sendRedirect(request.getContextPath()+"/pages/login.jsp");
}
}
}
280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
