1. 什么是JSP
JSP全名为Java Server Pages，中文名叫java服务器页面，其根本是一个简化的Servlet设计，它是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术，它是在传统的网页HTML文件(.htm,.html)中插入Java程序段(Scriptlet)和JSP标记(tag)，从而形成JSP文件，后缀名为(*.jsp)。用JSP开发的Web应用是跨平台的，既能在Linux下运行，也能在其他操作系统上运行。
JSP将网页逻辑与网页设计的显示分离，支持可重用的基于组件的设计，使基于Web的应用程序的开发变得迅速和容易。
.html 静态页面(包含固定的页面内容)
.jsp 动态页面(页面数据可以动态更新,支持嵌套java代码和html代码)
2. JSP为什么会出现
- 1.servlet展示信息的不方便，引入了JSP。
- 2.JSP本质上也是一个servlet！！！！！！
- 3.JSP就是在HTML页面中嵌入了java代码。
3.JSP中如何嵌套java代码
小脚本(<% java代码%>)，就是java代码写在<% %>这一组标签中就行了。
page指令:声明标签 <%!变量或者方法声明%>表达式标签 <%= 表达式%> 在页面上显示的效果程序代码标签 <%java代码%> 页面上动态展示内容
<%@ page language=”java” import=”java.util.*” pageEncoding=”UTF-8”%>
如果把一个数据存在request域中，取值操作如下：<body> <%! int i=10;%><!--成员变量--> <%! public void show(){}%> <!--成员方法--> <%=i%> <!--输出变量值--> </body>
jsp中的注释:
<!-- html注释内容,查看源码时能看到 -->
<%-- jsp注释,查看页面源码时看不到 --%>
4. JSP的原理
当浏览器访问http://localhost:8080/day9_1/index.jsp。服务器发现后缀为.jsp，它会根据路径找到index.jsp文件，会将index.jsp翻译成index_jsp.java文件，对这个java文件进行编译，产生一个index_jsp.class文件，将class文件加载运行。将JSP翻译成java文件，它是将JSP中的所有的HTML代码通过流进行输出，也就是说最终翻译成class，被虚拟机加载，它本质是servlet，它就会往回响应，响应回去就是把JSP中的HTML代码以流的方式写回浏览器。所以在JSP中展示出了HTML代码.
5. JSP的内置对象
JSP中一共预先定义了9个这样的对象，分别为：request、response、session、application、out、pagecontext、config、page、exception
1、request对象
request 对象是 javax.servlet.httpServletRequest类型的对象。 该对象代表了客户端的请求信息，主要用于接受通过HTTP协议传送到服务器的数据。（包括头信息、系统信息、请求方式以及请求参数等）。request对象的作用域为一次请求。
2、response对象
response 代表的是对客户端的响应，主要是将JSP容器处理过的对象传回到客户端。response对象也具有作用域，它只在JSP页面内有效。所属类型:HttpServletResponse
3、session对象
session 对象是由服务器自动创建的与用户请求相关的对象。服务器为每个用户都生成一个session对象，用于保存该用户的信息，跟踪用户的操作状态。session对象内部使用Map类来保存数据，因此保存数据的格式为“Key/value”。 session对象的value可以使复杂的对象类型，而不仅仅局限于字符串类型。HttpSession
4、application对象
application 对象可将信息保存在服务器中，直到服务器关闭，否则application对象中保存的信息会在整个应用中都有效。与session对象相比，application对象生命周期更长，类似于系统的“全局变量” ServletContext
区别：
request:单次请求
session:浏览器访问期间(会话期间)
application:服务器启动期间,所存的数据可以跨浏览器
5、out 对象
out 对象用于在Web浏览器内输出信息，并且管理应用服务器上的输出缓冲区。在使用 out 对象输出数据时，可以对数据缓冲区进行操作，及时清除缓冲区中的残余数据，为其他的输出让出缓冲空间。待数据输出完毕后，要及时关闭输出流。
示例:
out.print("<script type='text/javascript'>alert('用户名不存在');location.href='index.jsp'</script>");
6、pageContext 对象
pageContext 对象的作用是取得任何范围的参数，通过它可以获取 JSP页面的out、request、reponse、session、application 等对象。pageContext对象的创建和初始化都是由容器来完成的，在JSP页面中可以直接使用pageContext对象。
7、config 对象
config 对象的主要作用是取得服务器的配置信息。通过 pageConext对象的 getServletConfig() 方法可以获取一个config对象。当一个Servlet 初始化时，容器把某些信息通过config对象传递给这个 Servlet。 开发者可以在web.xml 文件中为应用程序环境中的Servlet程序和JSP页面提供初始化参数。
//将image路径转换成服务器端的路径
String url= config.getServletContext().getRealPath("/image");
<h1>url=<%=url %></h1>
8、page 对象
page 对象代表JSP本身，只有在JSP页面内才是合法的。 page隐含对象本质上包含当前 Servlet接口引用的变量，类似于Java编程中的 this 指针。
9、exception 对象
exception 对象的作用是显示异常信息，只有在包含 isErrorPage=”true” 的页面中才可以被使用，在一般的JSP页面中使用该对象将无法编译JSP文件。excepation对象和Java的所有对象一样，都具有系统提供的继承结构。
exception 对象几乎定义了所有异常情况。在Java程序中，可以使用try/catch关键字来处理异常情况； 如果在JSP页面中出现没有捕获到的异常，就会生成 exception 对象，并把 exception 对象传送到在page指令中设定的错误页面中，然后在错误页面中处理相应的 exception 对象。
(1)先在可能发生错误的页面中添加errorPage属性:
<%@ page pageEncoding="utf-8"
errorPage="error.jsp"
contentType="text/html;charset=UTF-8" language="java" %>
(2) 在error.jsp页面中设置isErrorPage=”true” 的属性
(使用exception对象之前，需要先将当前页面设置成错误页面）
<%@ page language="java" isErrorPage="true" import="java.util.*" pageEncoding="UTF-8"%>
jsp的作用域:
pageContext -> request -> session -> application
当前页面 —> 单次请求有效 — > 当前会话期间—> 服务器运行期间有效
6. JSP的指令
JSP指令用来设置整个JSP页面相关的属性，如网页的编码方式和脚本语言。
语法格式如下：
<%@ directive attribute="value" %>
directive：指令名称 attribute 属性名 value:属性值
| 指令名称 | 描述 |
|---|---|
| page | 定义网页依赖属性，比如脚本语言、error页面、缓存需求等等 |
| include | 包含其他文件 |
| taglib | 引入标签库的定义 |
(1)Page指令
Page指令为容器提供当前页面的使用说明一个JSP页面可以包含多个page指令
Page指令的语法格式：
<%@ page attribute=”value” %>
(2) Include指令
JSP可以通过include指令来包含其他文件。被包含的文件可以是JSP文件、HTML文件或文本文件。包含的文件就好像是该JSP文件的一部分，会被同时编译执行。
Include指令的语法格式如下：
<%@ include file="文件相对 url 地址" %>
include 指令中的文件名实际上是一个相对的 URL 地址。
如果您没有给文件关联一个路径，JSP编译器默认在当前路径下寻找。
(3)Taglib指令
JSP API允许用户自定义标签，一个自定义标签库就是自定义标签的集合。
Taglib指令引入一个自定义标签集合的定义，包括库路径、自定义标签。
<%@ taglib uri="uri" prefix="" %>
uri属性确定标签库的位置，prefix属性指定标签库的前缀(可自定义)。
7. JSP出现的状态码
8. EL表达式
(1)什么Expression Language 表达式语言
最初定义于JSTL1.0部分
在JSP2.0中，EL从JSTL中剥离出来，放置在JSP规范中，称为JSP2.0规范的一部分
在JSP中使用EL表达式，可以简化对象和变量的访问是EL表达式
(2)EL表达式语法
语法格式：${需要展示信息的名字}
注意：
当表达式没有指定变量或者对象的范围时，
那么容器会依次从pageContext—>request—>session—>application中查找该变量或对象,我们可以通过隐含对象获得指定作用域的值:
pageScope对象，用于获取当前页面的属性值
requestScope对象，用于获取请求范围的属性值
sessionScope对象，用于获取会话范围的属性值
applicationScope对象，用于获取程序范围的属性值
语法:
${requestScope.key}
(3)EL中基础操作符
示例:
单个变量：${a+10}<br>
单个变量：${s}<br>
单个对象：${key.属性名}
//对象类型
Users u=new Users();
u.setName("王老五");
u.setPass("abc");
pageContext.setAttribute("u1",u);
user.name=${u1.name}
user.pass=${u1.pass}
// list集合对象:
List list=new ArrayList();
list.add("刘能");
list.add(30);
list.add(u);
pageContext.setAttribute("list2",list);
list1=${list2[0]}<br/>
list2=${list2[1]}<br/>
list3=${list2[2].pass}<br/>
// map集合:
k1=${map1.k1}<br>
k2=${map1.k2.username}--- ${map1.k2.password}
判断变量是否有值或是否存在:${empty key值}
List list2=new ArrayList();
list2.add("aa");
request.setAttribute("list222",list2);
判断list中是否有数据:${empty list222}
9. JSTL
(1) 什么是JSTL
JSP标准标签库（JSTL）是一个JSP标签集合，它封装了JSP应用的通用核心功能。
JSTL支持通用的、结构化的任务，比如迭代，条件判断，XML文档操作，国际化标签，SQL标签。 除了这些，它还提供了一个框架来使用集成JSTL的自定义标签。
根据JSTL标签所提供的功能，可以将其分为5个类别。核心标签 格式化标签 sql标签 xml标签 jstl函数（后面详细解释）
(2) JSTL的作用和语法格式
作用：简化jsp页面编写代码
语法格式：
1. 下载 jakarta-taglibs-standard-1.1.2.zip 包并解压，将 jakarta-taglibs-standard-1.1.2/lib/ 下的两个 jar 文件：standard.jar 和 jstl.jar 文件拷贝到 /WEB-INF/lib/ 下。
2. 在JSP页面中引入<%@ taglib prefix=”页面使用的名称” uri=”功能范围的路径”%>
| 功能范围 | Uri | 前缀 |
|---|---|---|
| core | http://java.sun.com/jsp/jstl/core | c |
| i18n | http://java.sun.com/jsp/jstl/fmt | fmt |
| sql | http://java.sun.com/jsp/jstl/sql | sql |
| xml | http://java.sun.com/jsp/jstl/xml | x |
| functions | http://java.sun.com/jsp/jstl/function | fn |
(3) 核心标签
①核心标签是最常用的 JSTL标签。引用核心标签库的语法如下：
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
② 核心标签的分类
表达式操作 out、set、remove、catch
流程控制 if、choose、when、otherwise
迭代操作 forEach、forTokens
URL操作 import、param、url、redirect
Set标签
＜c:set> 主要用来将变量存储至JSP范围中 或是JavaBean的属性或Map对象中
＜c:out>主要用来显示数据的内容
＜c:remove> 主要负责移除变量
＜c:if> 主要用于进行if判断,如果为true,则输出标签体中的内容
＜c:choose>,＜c:when>,＜c:otherwise> 作用相当于if-else
＜c:forEach> 循环控制，它可以将数组,集合(Collection)中的成员循序浏览一遍。
(4)格式化标签
1、fmt:formatDate 作用：将日期类型格式化为指定模式的字符串
属性
value:将要被格式化的数据
pattern：格式化的模式，与SimpleDateFormat的参数设置一样
var:格式化后的字符串所要存放的变量，若不指定var，则会将格式化的结果直接显示在页面
scope：变量存放的域属性空间，默认page
type：其取值为date、time、both，表示给出的value是日期、时间、还是两者都包含，默认是date
2、fmt:parseDate 作用：用于将指定字符串转化为日期类型
Value服务器获取的时间
Pattern:转换的格式
Var:页面显示的变量
3、fmt:formatNumber 按照指定格式对数字进行格式化
属性
maxIntegerDigits：整数部分最多的位数
minIntegerDigits：整数部分最少的位数
maxFrctionDigits：小数部分最多的位数
minFrctionDigits：小数部分最少的位数
var：存储格式化结果的变量
scope：var属性的作用域
integerOnly：是否只解析整型数true或者浮点数false
10、小试牛刀
做一个网页，可以登录，可以注册，登录之后显示个人昵称。
就在之前做过的视频播放网站的基础上改吧！
index.jsp
<%--
Created by IntelliJ IDEA.
com.zh.User: zlz1314
Date: 2020/9/6
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影星河</title>
<style>
/* 公共css样式 */
* {margin:0px;padding:0px}
a {text-decoration: none;}
ul li{list-style:none;}
/* 页面头部样式 */
#header{
position:fixed;
top:0px;
width:100%;
background-color: #0785D4;
}
#header .header-nav{
height:60px;
width:1000px;
margin:0px auto;
}
.logo{color:white;height: 60px;float: left;line-height: 60px;margin-left: 10px;}
.header-nav ul li{
float: left;
}
.header-nav ul li .navb-txt{
display:block;
width:120px;
height:60px;
line-height: 60px;
font-size:18px;
font-weight: bold;
color:white;
text-align:center;
}
.header-nav ul .navb a:hover{
background-color: white;
color: blue;
}
.header-nav ul li img{
margin-top: 10px;
width: 40px;
height: 40px;
background-position: 100%,100%;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icon{
font-family: "icomoon";
margin-top: 20px;
color: white;
}
.login,.register{color: white}
.login:hover{color: coral;}
.register:hover{color: rebeccapurple;}
/* 页面导航样式 */
/* #nav {
height: 60px;
margin-top: 62px;
background-color: #46474a;
} */
/* 页面主体样式 */
#container{
width:100%;
}
#container .content{
margin:0px auto;
margin-top: 82px;
width: 1200px;
clear: left;
}
/* 左侧列表样式 */
#left-side {
width: 800px;
clear: left;
}
#left-side .top-text{
width: 630px;
height: 35px;
border-bottom: 2px solid #e5e5e5;
line-height: 35px;
font-size: 150%;
color: #0785DC;
}
#left-side .top-text .more{
font-size: 70%;
float:right;
color: #0785DC;
}
#left-side .top-text .more:hover{color: red;}
#left-side ul{
overflow: auto;
}
#left-side ul li {
width: 200px;
height: 200px;
margin:6px;
float: left;
}
#left-side ul li .img{
width: 200px;
height: 150px;
}
#left-side ul li .image {
width: 200px;
height: 170px;
background-position: 100%,100%;
}
#left-side ul li .text{
float: left;
}
#left-side ul li .name{
line-height: 70px;
height: 24px;
}
.li-hv{
color: black;
overflow: hidden;
}
.li-hv:hover{color:dodgerblue;}
.image{
transition: margin-left 0.2s;
}
.li-hv:hover .image {margin-left:-3px}
/* 右侧播放器样式 */
#right-side {
position:fixed;
top: 90px;
left: 850px;
height: 450px;
width: 450px;
}
/* 页面尾部样式 */
#footer{
height: 40px;
background-color: #ccc;
margin-top:20px;
}
#footer p{
text-align: center;
font-size: 14px;
color:#777;
line-height:18px ;
}
</style>
</head>
<body>
<!-- 网页头部开始 -->
<div id="header">
<div class="logo">
<% session.setAttribute("count",1000); %>
<span>本站已有${count}位注册用户！</span>
</div>
<div class="header-nav">
<ul>
<li class="logo">
<img src="./images/银河.jpg" alt="电影星河">
</li>
<li class="logo">
<a class = "navb-txt" href="index.jsp">电影星河</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">首页</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">电影分类</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">本月最热</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">年度榜单</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">联系我们</a>
</li>
<li class="icon">
<a href="#">
<span class="icon"></span>
<a class="login" href="login.jsp">登录</a>
<a class="register" href="register.jsp">注册</a>
</a>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</div>
<!-- 网页头部结束 -->
<!-- 导航栏开始 -->
<!-- <div id="nav"></div> -->
<!-- 导航栏结束 -->
<!-- 网页主体开始 -->
<div id="container">
<div class="content">
<div id="left-side">
<div class="top-text">
<span class="video">精选视频</span>
<a href="https://www.bilibili.com/" class="more" target="_blank">更多>>></a>
</div>
<ul class="main">
<!-- 电影列表 -->
<li>
<a class="li-hv" href="./videos/17张牌你能秒我？.mp4" target="播放器" title="17张牌你能秒我？">
<div class="img">
<img class="image" src="./images/1.jpg" alt="17张牌你能秒我？" >
</div>
<div class="text">
<p class="name">17张牌你能秒我？</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/敢 杀 我 的 马？.mp4" target="播放器" title="敢杀我的马？">
<div class="img">
<img class="image" src="./images/5.jpg" alt="敢杀我的马？" >
</div>
<div class="text">
<p class="name">敢杀我的马？</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/最 强 法 海.mp4" target="播放器" title="最强法海">
<div class="img">
<img class="image" src="./images/2.jpg" alt="最强法海" >
</div>
<div class="text">
<p class="name">最强法海</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/逮虾户.mp4" target="播放器" title="逮虾户">
<div class="img">
<img class="image" src="./images/3.jpg" alt="逮虾户" >
</div>
<div class="text">
<p class="name">逮虾户</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/火影.mp4" target="播放器" title="火影">
<div class="img">
<img class="image" src="./images/4.jpg" alt="火影" >
</div>
<div class="text">
<p class="name">火影忍者</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1yE411v7Pq?t=4" target="播放器" title="前方高能">
<div class="img">
<img class="image" src="./images/6.jpg" alt="前方高能" >
</div>
<div class="text">
<p class="name">前方高能</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1Vb41177ud?t=35" target="播放器" title="漫威宇宙">
<div class="img">
<img class="image" src="./images/7.jpg" alt="漫威宇宙" >
</div>
<div class="text">
<p class="name">漫威宇宙</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1cs411s7LY?t=4" target="播放器" title="哔哩哔哩拜年祭">
<div class="img">
<img class="image" src="./images/8.jpg" alt="哔哩哔哩拜年祭" >
</div>
<div class="text">
<p class="name">哔哩哔哩拜年祭</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/9.mp4" target="播放器" title="极乐净土">
<div class="img">
<img class="image" src="./images/9.jpg" alt="极乐净土" >
</div>
<div class="text">
<p class="name">极乐净土</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1FJ411V7gy?t=33" target="播放器" title="处处吻">
<div class="img">
<img class="image" src="./images/10.jpg" alt="处处吻" >
</div>
<div class="text">
<p class="name">处处吻</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/黑人抬棺.mp4" target="播放器" title="黑人抬棺">
<div class="img">
<img class="image" src="./images/11.jpg" alt="黑人抬棺" >
</div>
<div class="text">
<p class="name">黑人抬棺</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/bangumi/play/ep331428" target="播放器" title="凡人修仙传">
<div class="img">
<img class="image" src="./images/13.jpg" alt="凡人修仙传" >
</div>
<div class="text">
<p class="name">凡人修仙传</p>
</div>
</a>
</li>
</ul>
</div>
<div id="right-side">
<iframe src = "./videos/17张牌你能秒我？.mp4" name = "播放器" frameborder="1" width="100%" height="100%"></iframe>
</div>
</div>
</div>
<!-- 网页主体结束 -->
<!-- 网页尾部开始 -->
<div id="footer">
<p>本网站提供的最新电影资源均系收集于各大视频网站，本网站只提供web页面服务，并不提供影片资源存储，也不参与录制、上传</p>
<p>若本站收录的链接无意侵犯了贵司版权，请邮箱联系我们，我们会及时处理相关内容，谢谢！邮箱：xixixi@haha.com</p>
</div>
<!-- 网页尾部结束 -->
</body>
</html>
login.jsp
<%--
Created by IntelliJ IDEA.
com.zh.User: zlz1314
Date: 2020/9/6
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>登录</title>
<style>
/* 全局设置，取消默认属性 */
* {margin:0px;padding: 0px;}
li {list-style: none;}
/* content样式 */
#content{width: 600px;height: 400px;background-color: white;margin: 40px auto;border: 1px solid #808080;}
/* form样式 */
#registForm{display: block;}
/* title样式 */
#title{height: 40px;width: 600px;font-size: 30px;color: #25BB9B;margin: 30px auto;font-weight: bold;line-height: 40px;border-bottom: 1px solid #f1f4f5;text-align: center;}
/* li */
li{display: block;}
li .label,.r-txt,.tips {display: inline-block;}
.label{margin: 10px 5px 10px 20px;width: 70px;height: 28px;}
.r-txt{width: 200px;height: 22px;}
.r-txt,.tips{margin: 10px;}
.tips{line-height: 22px;color: darkgray; font-size: 13px;}
/* input */
.inptxt{height: 30px;width:200px ;line-height: 20px;border: 1px solid #cfcdc7;background: #fff;color: #999;padding: 5px 0 5px 5px;border-radius: 5px;caret-color:black;}
/* button */
.btn{margin:40px;display: inline-block;}
.button{height: 40px;width: 200px;text-align: center;background-color: #25BB9B;border:none;color:white}
.btn :hover{cursor: pointer;}
</style>
</head>
<body>
<div id = "content" >
<div id="title">登录</div>
<form id = "registForm" action="verification.jsp" method="POST" name="loginForm" onsubmit="return doSubmit()">
<div id = "layout-bg">
<ul class="reg-list">
<li>
<div class="label">登录账号:</div>
<div class="r-txt"><input class = "inptxt" type="text" placeholder="请输入账号" name="uaccount" onblur="checkUname()" /></div>
<div class="tips">6~18位有效字符(字母、数字、下划线)</div>
</li>
<li>
<div class="label">登录密码:</div>
<div class="r-txt"><input class = "inptxt" type="password" placeholder="请输入密码" name="upass" onblur="checkUpass()" /></div>
<div class="tips">6~18位任意字符</div>
</li>
<li>
<div class="btn" style="margin-left: 110px;">
<input class="button" type="submit" value="立即登录"/>
</div>
</li>
</ul>
</div>
</form>
</div>
</body>
<script>
//验证账号函数
function checkUaccount(){
//获取账号信息
var uaccount = document.myform.uname;
//执行验证
if(uaccount.value.match(/^\w{6,18}$/) == null){
alert("账号请输入6~18位有效字符！");
// console.log(uname.parentNode.nextSibling.nextSibling)
uaccount.parentNode.nextSibling.nextSibling.style.color = "red";
return false;
}
uaccount.parentNode.nextSibling.nextSibling.style.color = "darkgray";
return true;
}
//验证密码函数
function checkUpass(){
//获取密码信息
var upass = document.myform.upass;
//执行验证
if(upass.value.match(/^.{6,18}$/) == null){
alert("密码请输入6~18位！");
upass.parentNode.nextSibling.nextSibling.style.color = "red";
return false;
}
upass.parentNode.nextSibling.nextSibling.style.color = "darkgray";
return true;
}
//表单提交
function doSubmit(){
return checkUaccount() && checkUpass();
}
</script>
</html>
main.jsp
<%--
Created by IntelliJ IDEA.
com.zh.User: zlz1314
Date: 2020/9/6
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电影星河</title>
<style>
/* 公共css样式 */
* {margin:0px;padding:0px}
a {text-decoration: none;}
ul li{list-style:none;}
/* 页面头部样式 */
#header{
position:fixed;
top:0px;
width:100%;
background-color: #0785D4;
}
#header .header-nav{
height:60px;
width:1000px;
margin:0px auto;
}
.logo{color:white;height: 60px;float: left;line-height: 60px;margin-left: 10px;}
.header-nav ul li{
float: left;
}
.header-nav ul li .navb-txt{
display:block;
width:120px;
height:60px;
line-height: 60px;
font-size:18px;
font-weight: bold;
color:white;
text-align:center;
}
.header-nav ul .navb a:hover{
background-color: white;
color: blue;
}
.header-nav ul li img{
margin-top: 10px;
width: 40px;
height: 40px;
background-position: 100%,100%;
}
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?7kkyc2');
src: url('fonts/icomoon.eot?7kkyc2#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?7kkyc2') format('truetype'),
url('fonts/icomoon.woff?7kkyc2') format('woff'),
url('fonts/icomoon.svg?7kkyc2#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
.icon{
font-family: "icomoon";
margin-top: 20px;
color: white;
}
.login,.register{color: white}
.login:hover{color: coral;}
.register:hover{color: rebeccapurple;}
/* 页面导航样式 */
/* #nav {
height: 60px;
margin-top: 62px;
background-color: #46474a;
} */
/* 页面主体样式 */
#container{
width:100%;
}
#container .content{
margin:0px auto;
margin-top: 82px;
width: 1200px;
clear: left;
}
/* 左侧列表样式 */
#left-side {
width: 800px;
clear: left;
}
#left-side .top-text{
width: 630px;
height: 35px;
border-bottom: 2px solid #e5e5e5;
line-height: 35px;
font-size: 150%;
color: #0785DC;
}
#left-side .top-text .more{
font-size: 70%;
float:right;
color: #0785DC;
}
#left-side .top-text .more:hover{color: red;}
#left-side ul{
overflow: auto;
}
#left-side ul li {
width: 200px;
height: 200px;
margin:6px;
float: left;
}
#left-side ul li .img{
width: 200px;
height: 150px;
}
#left-side ul li .image {
width: 200px;
height: 170px;
background-position: 100%,100%;
}
#left-side ul li .text{
float: left;
}
#left-side ul li .name{
line-height: 70px;
height: 24px;
}
.li-hv{
color: black;
overflow: hidden;
}
.li-hv:hover{color:dodgerblue;}
.image{
transition: margin-left 0.2s;
}
.li-hv:hover .image {margin-left:-3px}
/* 右侧播放器样式 */
#right-side {
position:fixed;
top: 90px;
left: 850px;
height: 450px;
width: 450px;
}
/* 页面尾部样式 */
#footer{
height: 40px;
background-color: #ccc;
margin-top:20px;
}
#footer p{
text-align: center;
font-size: 14px;
color:#777;
line-height:18px ;
}
</style>
</head>
<body>
<!-- 网页头部开始 -->
<div id="header">
<div class="logo">
<span>本站已有${sessionScope.count + 10}位注册用户！</span>
</div>
<div class="header-nav">
<ul>
<li class="logo">
<img src="./images/银河.jpg" alt="电影星河">
</li>
<li class="logo">
<a class = "navb-txt" href="movies.html">电影星河</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">首页</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">电影分类</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">本月最热</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">年度榜单</a>
</li>
<li class="navb">
<a class = "navb-txt" href="#">联系我们</a>
</li>
<li class="icon">
<a href="#">
<span class="icon"></span>
<a class="login"><%= session.getAttribute("name") %></a>
</a>
</li>
<div style="clear: both;"></div>
</ul>
</div>
</div>
<!-- 网页头部结束 -->
<!-- 导航栏开始 -->
<!-- <div id="nav"></div> -->
<!-- 导航栏结束 -->
<!-- 网页主体开始 -->
<div id="container">
<div class="content">
<div id="left-side">
<div class="top-text">
<span class="video">精选视频</span>
<a href="https://www.bilibili.com/" class="more" target="_blank">更多>>></a>
</div>
<ul class="main">
<!-- 电影列表 -->
<li>
<a class="li-hv" href="./videos/17张牌你能秒我？.mp4" target="播放器" title="17张牌你能秒我？">
<div class="img">
<img class="image" src="./images/1.jpg" alt="17张牌你能秒我？" >
</div>
<div class="text">
<p class="name">17张牌你能秒我？</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/敢 杀 我 的 马？.mp4" target="播放器" title="敢杀我的马？">
<div class="img">
<img class="image" src="./images/5.jpg" alt="敢杀我的马？" >
</div>
<div class="text">
<p class="name">敢杀我的马？</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/最 强 法 海.mp4" target="播放器" title="最强法海">
<div class="img">
<img class="image" src="./images/2.jpg" alt="最强法海" >
</div>
<div class="text">
<p class="name">最强法海</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/逮虾户.mp4" target="播放器" title="逮虾户">
<div class="img">
<img class="image" src="./images/3.jpg" alt="逮虾户" >
</div>
<div class="text">
<p class="name">逮虾户</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/火影.mp4" target="播放器" title="火影">
<div class="img">
<img class="image" src="./images/4.jpg" alt="火影" >
</div>
<div class="text">
<p class="name">火影忍者</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1yE411v7Pq?t=4" target="播放器" title="前方高能">
<div class="img">
<img class="image" src="./images/6.jpg" alt="前方高能" >
</div>
<div class="text">
<p class="name">前方高能</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1Vb41177ud?t=35" target="播放器" title="漫威宇宙">
<div class="img">
<img class="image" src="./images/7.jpg" alt="漫威宇宙" >
</div>
<div class="text">
<p class="name">漫威宇宙</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1cs411s7LY?t=4" target="播放器" title="哔哩哔哩拜年祭">
<div class="img">
<img class="image" src="./images/8.jpg" alt="哔哩哔哩拜年祭" >
</div>
<div class="text">
<p class="name">哔哩哔哩拜年祭</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/9.mp4" target="播放器" title="极乐净土">
<div class="img">
<img class="image" src="./images/9.jpg" alt="极乐净土" >
</div>
<div class="text">
<p class="name">极乐净土</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/video/BV1FJ411V7gy?t=33" target="播放器" title="处处吻">
<div class="img">
<img class="image" src="./images/10.jpg" alt="处处吻" >
</div>
<div class="text">
<p class="name">处处吻</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="./videos/黑人抬棺.mp4" target="播放器" title="黑人抬棺">
<div class="img">
<img class="image" src="./images/11.jpg" alt="黑人抬棺" >
</div>
<div class="text">
<p class="name">黑人抬棺</p>
</div>
</a>
</li>
<li>
<a class="li-hv" href="https://www.bilibili.com/bangumi/play/ep331428" target="播放器" title="凡人修仙传">
<div class="img">
<img class="image" src="./images/13.jpg" alt="凡人修仙传" >
</div>
<div class="text">
<p class="name">凡人修仙传</p>
</div>
</a>
</li>
</ul>
</div>
<div id="right-side">
<iframe src = "./videos/17张牌你能秒我？.mp4" name = "播放器" frameborder="1" width="100%" height="100%"></iframe>
</div>
</div>
</div>
<!-- 网页主体结束 -->
<!-- 网页尾部开始 -->
<div id="footer">
<p>本网站提供的最新电影资源均系收集于各大视频网站，本网站只提供web页面服务，并不提供影片资源存储，也不参与录制、上传</p>
<p>若本站收录的链接无意侵犯了贵司版权，请邮箱联系我们，我们会及时处理相关内容，谢谢！邮箱：xixixi@haha.com</p>
</div>
<!-- 网页尾部结束 -->
</body>
</html>
register.jsp
<%--
Created by IntelliJ IDEA.
com.zh.User: zlz1314
Date: 2020/9/6
Time: 11:11
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册</title>
<style>
/* 全局设置，取消默认属性 */
* {margin:0px;padding: 0px;}
li {list-style: none;}
/* content样式 */
#content{width: 600px;height: 400px;background-color: white;margin: 40px auto;border: 1px solid #808080;}
/* form样式 */
#registForm{display: block;}
/* title样式 */
#title{height: 40px;width: 600px;font-size: 30px;color: #25BB9B;margin: 30px auto;font-weight: bold;line-height: 40px;border-bottom: 1px solid #f1f4f5;text-align: center;}
/* li */
li{display: block;}
li .label,.r-txt,.tips {display: inline-block;}
.label{margin: 10px 5px 10px 20px;width: 70px;height: 28px;}
.r-txt{width: 200px;height: 22px;}
.r-txt,.tips{margin: 10px;}
.tips{line-height: 22px;color: darkgray; font-size: 13px;}
/* input */
.inptxt{height: 30px;width:200px ;line-height: 20px;border: 1px solid #cfcdc7;background: #fff;color: #999;padding: 5px 0 5px 5px;border-radius: 5px;caret-color:black;}
/* button */
.btn{margin:40px;display: inline-block;}
.button{height: 40px;width: 200px;text-align: center;background-color: #25BB9B;border:none;color:white}
.btn :hover{cursor: pointer;}
</style>
</head>
<body>
<div id = "content" >
<div id="title">注册</div>
<form id = "registForm" action="registerVer.jsp" method="POST" name="regForm" onsubmit="return doSubmit()">
<div id = "layout-bg">
<ul class="reg-list">
<li>
<div class="label">注册名称:</div>
<div class="r-txt"><input class = "inptxt" type="text" placeholder="请输入名称" name="uname" onblur="checkUname()" /></div>
<div class="tips">6~18位有效字符(字母、数字、下划线)</div>
</li>
<li>
<div class="label">注册账号:</div>
<div class="r-txt"><input class = "inptxt" type="text" placeholder="请输入账号" name="uaccount" onblur="checkUaccount()" /></div>
<div class="tips">6~18位有效字符(字母、数字、下划线)</div>
</li>
<li>
<div class="label">注册密码:</div>
<div class="r-txt"><input class = "inptxt" type="password" placeholder="请输入密码" name="upass" onblur="checkUpass()" /></div>
<div class="tips">6~18位任意字符</div>
</li>
<li>
<div class="btn" style="margin-left: 110px;">
<input class="button" type="submit" value="立即注册"/>
</div>
</li>
</ul>
</div>
</form>
</div>
</body>
<script>
//验证账号函数
function checkUname(){
//获取账号信息
var uname = document.myform.uname;
//执行验证
if(uname.value.match(/^\w{6,18}$/) == null){
alert("账号请输入6~18位有效字符！");
// console.log(uname.parentNode.nextSibling.nextSibling)
uname.parentNode.nextSibling.nextSibling.style.color = "red";
return false;
}
uname.parentNode.nextSibling.nextSibling.style.color = "darkgray";
return true;
}
//验证账号函数
function checkUaccount(){
//获取账号信息
var uaccount = document.myform.uaccount;
//执行验证
if(uaccount.value.match(/^\w{6,18}$/) == null){
alert("账号请输入6~18位有效字符！");
uaccount.parentNode.nextSibling.nextSibling.style.color = "red";
return false;
}
uaccount.parentNode.nextSibling.nextSibling.style.color = "darkgray";
return true;
}
//验证密码函数
function checkUpass(){
//获取密码信息
var upass = document.myform.upass;
//执行验证
if(upass.value.match(/^.{6,18}$/) == null){
alert("密码请输入6~18位！");
upass.parentNode.nextSibling.nextSibling.style.color = "red";
return false;
}
upass.parentNode.nextSibling.nextSibling.style.color = "darkgray";
return true;
}
//表单提交
function doSubmit(){
return checkUaccount() && checkUpass() && checkUname();
}
</script>
</html>
registerVer.jsp
<%@ page import="java.io.PrintWriter" %>
<%@ page import="com.zh.User" %>
<%@ page import="com.zh.Register" %><%--
Created by IntelliJ IDEA.
User: zlz1314
Date: 2020/9/6
Time: 19:30
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>register</title>
</head>
<body>
<%
PrintWriter writer = response.getWriter();
String uname = request.getParameter("uname");
String uaccount = request.getParameter("uaccount");
String upass = request.getParameter("upass");
User user = new User(uname,uaccount,upass);
boolean status = new Register().register(user);
if (!status){
session.setAttribute("name",uname);
writer.write("<script>alert('注册成功！即将跳转到登录界面！');location.href='login.jsp'</script>");
}else{
writer.write("<script>alert('注册失败！');location.href='register.jsp'</script>");
}
%>
</body>
</html>
verification.jsp
<%@ page import="com.zh.Login" %>
<%@ page import="com.zh.User" %>
<%@ page import="java.io.PrintWriter" %>
<%--
Created by IntelliJ IDEA.
User: zlz1314
Date: 2020/9/6
Time: 19:04
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>verification</title>
</head>
<body>
<%
PrintWriter writer = response.getWriter();
String uaccount = request.getParameter("uaccount");
String upass = request.getParameter("upass");
User user = new User(null,uaccount,upass);
String uname = new Login().login(user);
if (uname != null){
session.setAttribute("name",uname);
writer.write("<script>alert('登录成功！');location.href='main.jsp'</script>");
}else{
writer.write("<script>alert('登录失败，请检查你的账号密码！');location.href='login.jsp'</script>");
}
%>
</body>
</html>
下面是一些类：
DruidUtil.java
package com.zh;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;
import java.util.Properties;
public class DruidUtil {
private static DataSource ds;
static{
try {
Properties ppt = new Properties();
ppt.load(DruidUtil.class.getClassLoader().getResourceAsStream("druid.properties"));
ds = DruidDataSourceFactory.createDataSource(ppt);
} catch (Exception e) {
e.printStackTrace();
}
}
/**
* 从连接池中取出一个连接给用户
* @return 数据库链接
*/
public static Connection getConnection(){
try {
return ds.getConnection();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null;
}
public static void close(Connection conn, Statement state, ResultSet rs){
try {
rs.close();
} catch (Exception throwables) {
throwables.printStackTrace();
}
try {
state.close();
} catch (Exception throwables) {
throwables.printStackTrace();
}
try {
conn.close();
} catch (Exception throwables) {
throwables.printStackTrace();
}
}
}
Login.java
package com.zh;
import java.sql.*;
/**
* @Author: deemoHui
* @Description: 登录逻辑
* @Date Created in 2020-09-04 11:40
* @Modified By:
*/
public class Login {
public String login(User user) {
String status = null;
try {
Connection conn = DruidUtil.getConnection();
PreparedStatement state = null;
if (conn != null) {
state = conn.prepareStatement("select uname from user where account = ? and password = ?");
state.setString(1,user.getAccount());
state.setString(2,user.getPassword());
ResultSet resultSet = state.executeQuery();
resultSet.next();
status = resultSet.getString("uname");
state.close();
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
return status;
}
}
Register.java
package com.zh;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
/**
* @Author: deemoHui
* @Description:
* @Date Created in 2020-09-06 14:08
* @Modified By:
*/
public class Register {
public boolean register(User user) {
boolean status = false;
try {
Connection conn = DruidUtil.getConnection();
PreparedStatement state = null;
if (conn != null) {
state = conn.prepareStatement("INSERT INTO user VALUES(NULL,?,?,?)");
state.setString(1,user.getName());
state.setString(2,user.getAccount());
state.setString(3,user.getPassword());
status = state.execute();
state.close();
conn.close();
}
} catch (SQLException e) {
e.printStackTrace();
}
return status;
}
}
User.java
package com.zh;
import java.util.Objects;
/**
* @Author: deemoHui
* @Description: 用户类
* @Date Created in 2020-09-04 11:38
* @Modified By:
*/
public class User {
private String name;
private String account;
private String password;
public User() {
}
public User(String name, String account, String password) {
this.name = name;
this.account = account;
this.password = password;
}
public String getAccount() {
return account;
}
public void setAccount(String account) {
this.account = account;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public boolean equals(Object o) {
if (this == o) return true;
if (o == null || getClass() != o.getClass()) return false;
User user = (User) o;
return Objects.equals(name, user.name) &&
Objects.equals(account, user.account) &&
Objects.equals(password, user.password);
}
@Override
public int hashCode() {
return Objects.hash(name, account, password);
}
@Override
public String toString() {
return "User{" +
"name='" + name + '\'' +
", account='" + account + '\'' +
", password='" + password + '\'' +
'}';
}
}
还有druid.properties和上一次的一样
运行效果：
若有收获，就点个赞吧
0 人点赞
