整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
SP技术
题量: 15 满分: 100
作答时间:11-01 22:20至
重做
100分
一. 单选题（共8题，52.8分）
1.JSP文件在第一次运行的时候被JSP引擎编译为( )文件
A. Servlet
B. Class
C. HTML
D. XML
我的答案: A正确答案: A
2.page指令的属性中可以多次设计的属性是( )
A. import
B. session
C. extends
D. info
我的答案: A正确答案: A
3.在JSP页面中，能够完成输出操作的内置对象是( )
A. out
B. response
C. request
D. config
我的答案: A正确答案: A
4. 在JSP中，若要在JSP正确使用标签：<x:getKing/>，在jsp中声明的taglib
指令为：<%@taglib uri = “/WEB-INF/myTags.tld” prefix = “( )”%>，
下划线处应该是
A. x
B. getKing
C. myTags
D. king
我的答案: A正确答案: A
5.某JSP中有如下代码，显示结果为( )
<%
int a = 5;
request.setAttribute(“a”,”123”);
session.setAttribute(“a”,”456”);
%>
<c:out value="${a}"/>
A. 5
B. 123
C. 456
D. null
我的答案: B正确答案: B
6.要在jsp中使用ArrayList,做法正确的是( )
A. <% import java.util.ArrayList%>
B. <%@ import "java.util.ArrayList"%>
C. %@ page import="java.util.ArrayList"%>
D. <%@ page package="java.util.ArrayList"%>
我的答案: C正确答案: C
7.下面关于JSP作用域对象的说法错误的是( )
A. request对象可以得到请求中的参数
B. session对象可以保存用户信息
C. application对象可以被多个应用共享
D. 作用域范围从小到达是request、session、application
我的答案: C正确答案: C
8.在JSP页面中，保存数据的范围由小到大依次是( )
A. pageContext,request,application,session
B. pageContext,application,session,request
C. pageContext,request,session,application
D. pageContext,session,request,application
我的答案: C正确答案: C
二. 多选题（共2题，13.2分）
9.Servlet与JSP的区别是( )
A. 性能更强
B. 编程方式不同
C. 运行速度不同
D. 编译顺序不同
我的答案: BCD正确答案: BCD
10.在a.jsp中有代码片断如下：
<form action =”b.jsp” method =”POST”name=”form1”>
loginName:<input type=”text”name=”loginName”/>
<input type=”submit” name=”submit”/>
</form>
在b.jsp中加入下列( )代码，可以输出在a.jsp页面上输入的loginName的值
A. <%=request.getParameter(“loginName”)%>
B. <%=request.gerAttribute(“loginName”)%>
C. <%Stringname=request.getParameter(“loginname”);
out.println(name); %>
D. <% Stringname=request.getAttribute(“loginname”);
out.println(name); %>
我的答案: AC正确答案: AC
三. 判断题（共5题，34分）
11.JSP页面是采用JavaScript语言实现在服务端代码。
A. 对
B. 错
我的答案: 错正确答案: 错
12<jsp:forward ... >标记的page属性值是相对的URL地址，只能静态的URL。
A. 对
B. 错
我的答案: 错正确答案: 错
13.JSP代码可以直接执行，所以不会被翻译成JAVA代码。
A. 对
B. 错
我的答案: 错正确答案: 错
14.JSP页面中不能包含脚本元素。
A. 对
B. 错
我的答案: 错正确答案: 错
15.JSP中Java表达式的值由服务器负责计算，并将计算值按字符串发送给客户端显示。
A. 对
B. 错
我的答案: 对正确答案: 对
录
一、写在前面
二、效果图
三、实现思路
四、实现代码
1、login总界面
2、registercheck总代码
3、logoutcheck总代码
4、amendcheck总代码
相关文章
哈喽~大家好，这篇呢我们来看看用 JSP 连接 MySQL 登入注册项目实践，这里就可能有人问了，唉？追桑~前些天不是写了 jsp 登入注册的项目吗？怎么这次还在写呢？哈哈，您别担心，这次呢，肯定和上次不同，我们先来看看效果吧！
数据库界面
感觉是不是不一样了，哈哈哈，那么接下来我们来看看是怎么实现的。
三、实现思路
首先我们这里很明显，有四个总页面分别是 login(登入界面)、logout(注销界面)、amend(修改界面)、register(注册界面)，这四个总页面分别对应着检查页面(check)、成功页面(success)、失败页面(fail)。建立之好后，通过 from 的 action 来进行跳转，我们先来看看 MySQL (数据库)表名叫 login。
我们这里数据库共三列，第一列叫 name （用户名）、pass（密码）、time（注册时间），name 与 pass 都是 int（整型） 类型的，time 是 varchar （可变长类型），如图。
首先我们先有个页面，有基本的用户名框，密码框，两按钮，一个注册，一个注销，通过 from进行跳转，代码如下
<form method="post" action="check.jsp">
<input type="text" name="user" style="width: 300px;height: 50px" placeholder="请输入用户名："
> <br>
<input type="password" name="pass" style="width: 300px;height: 50px" placeholder="请输入密码：" > <br>
<button type="submit" style="width:80px;height:40px; font-size: 20px" class="clear">登录</button>
<button type="reset" style="width:80px;height:40px; font-size: 20px" class="clear">重置</button>
<br>
没有账号?<a href="register.jsp">点击注册</a><br>
不想用了?<a href="logout.jsp">点击注销</a>
</form>
用 check 连接数据库(如何连接数据库，前面文章已经给出了，有兴趣的小伙伴可以看看前面写的文章，也放在前面了) 同样的道理，还是那五个步骤（这里就不过多的解释，可以看看上面表格给出的文章），先来看看代码。
String user = request.getParameter("user"); // getParameter 与 getAttribute 区别
String pass = request.getParameter("pass");
// String getParameter(String name):根据参数名称获取参数值
// getAttribute()获取的是服务器设置的数据。getAttribute() 方法返回指定属性名的属性值。
try {
Class.forName("com.mysql.cj.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/db1?useUnicode=true&characterEncoding=utf-8&useSSL=false&serverTimezone=UTC";
String user1 = "root";
String pass1 = "123456";
Connection connection = DriverManager.getConnection(url,user1,pass1);
String sql = "select * from login where name=? and pass=?";
PreparedStatement ps = connection.prepareStatement(sql);
ps.setString(1,user);
ps.setString(2,pass);
ResultSet re = ps.executeQuery();
if (re.next()){
response.sendRedirect("loginsuccess.jsp");
session.setAttribute("user",user);
}else {
response.sendRedirect("loginfail.jsp");
}
} catch (ClassNotFoundException e) {
e.printStackTrace();
} catch (SQLException e) {
e.printStackTrace();
}
这里 response.sendRedirect 跳转了两个页面一个 loginsuccess 和 loginfail 的两个界面，下面我们来看看，这两个文件（其实很简单）
loginsuccess 代码
<div class="form">
<h2> <h22>登录成功</h22><br>
</h2>
<fon>恭喜您成功登入 <br> 欢迎使用 <br>
<a class="a1" href="login.jsp">返回登入界面</a>
</fon>
</div>
loginfail 代码：
<h2> <h22>登录失败</h22><br>
</h2>
<fon>宝~是不是账号或密码记错惹？ <br>
<a class="a1" href="login.jsp">返回登入界面</a><br>
<p1><a href="amend.jsp">点击修改密码</a></p1>
</fon>这里我们点击运行看看效果
这里我们用两个升级 大装备（html）(css) 来美化一下我们的页面，这里我们页面美化的，用的是这位大佬的页面（博主名为键盘奏鸣曲），大家可以来看看，点击链接
HTML 代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css.css">
<title>123</title>
</head>
<body>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="box">
<div class="circle" style="--x:0"></div>
<div class="circle" style="--x:1"></div>
<div class="circle" style="--x:2"></div>
<div class="circle" style="--x:3"></div>
<div class="circle" style="--x:4"></div>
<div class="container">
<div class="form">
<h2>登录</h2>
<form method="post" action="check.jsp">
<div class="inputBox">
<input type="text" placeholder="姓名" name="user">
</div>
<div class="inputBox">
<input type="password" placeholder="密码" name="pass">
</div>
<div class="inputBox">
<input type="submit" value="登录">
</div>
<p class="forget">不想用了?<a href="logout.jsp">
点击这里
</a></p>
<p class="forget">没有账户?<a href="register.jsp">
注册
</a></p>
</form>
</div>
</div>
</div>
</section>
</body>
</html>
CSS 代码
/*.center{*/
/* text-align:center;*/
/* margin-top: 50px;*/
/*}*/
.fon{
font-size: 40px;
}
/*body{*/
/* background: url("images/image-2.jpg") no-repeat 0 0;*/
/* background-size: 100% 100%;*/
/* text-decoration:none;*/
/*}*/
/*input {*/
/* background-color: transparent;*/
/* outline: none;*/
/* color: black;*/
/*}*/
/*.clear{*/
/* opacity:0.3;*/
/*}*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 使用flex布局，让内容垂直和水平居中 */
section {
/* 相对定位 */
position: relative;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
/* linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片 */
background: linear-gradient(to bottom, #f1f4f9, #dff1ff);
}
/* 背景颜色 */
section .color {
/* 绝对定位 */
position: absolute;
/* 使用filter(滤镜) 属性，给图像设置高斯模糊*/
filter: blur(200px);
}
/* :nth-child(n) 选择器匹配父元素中的第 n 个子元素 */
section .color:nth-child(1) {
top: -350px;
width: 600px;
height: 600px;
background: #ff359b;
}
section .color:nth-child(2) {
bottom: -150px;
left: 100px;
width: 500px;
height: 500px;
background: #fffd87;
}
section .color:nth-child(3) {
bottom: 50px;
right: 100px;
width: 500px;
height: 500px;
background: #00d2ff;
}
.box {
position: relative;
}
/* 背景圆样式 */
.box .circle {
position: absolute;
background: rgba(255, 255, 255, 0.1);
/* backdrop-filter属性为一个元素后面区域添加模糊效果 */
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 50%;
/* 使用filter(滤镜) 属性，改变颜色。
hue-rotate(deg) 给图像应用色相旋转
calc() 函数用于动态计算长度值
var() 函数调用自定义的CSS属性值x*/
filter: hue-rotate(calc(var(--x) * 70deg));
/* 调用动画animate，需要10s完成动画，
linear表示动画从头到尾的速度是相同的，
infinite指定动画应该循环播放无限次*/
animation: animate 10s linear infinite;
/* 动态计算动画延迟几秒播放 */
animation-delay: calc(var(--x) * -1s);
}
/* 背景圆动画 */
@keyframes animate {
0%, 100% {
transform: translateY(-50px);
}
50% {
transform: translateY(50px);
}
}
.box .circle:nth-child(1) {
top: -50px;
right: -60px;
width: 100px;
height: 100px;
}
.box .circle:nth-child(2) {
top: 150px;
left: -100px;
width: 120px;
height: 120px;
z-index: 2;
}
.box .circle:nth-child(3) {
bottom: 50px;
right: -60px;
width: 80px;
height: 80px;
z-index: 2;
}
.box .circle:nth-child(4) {
bottom: -80px;
left: 100px;
width: 60px;
height: 60px;
}
.box .circle:nth-child(5) {
top: -80px;
left: 140px;
width: 60px;
height: 60px;
}
/* 登录框样式 */
.container {
position: relative;
width: 400px;
min-height: 400px;
background: rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
align-items: center;
backdrop-filter: blur(5px);
box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.form {
position: relative;
width: 100%;
height: 100%;
padding: 50px;
}
/* 登录标题样式 */
.form h2 {
text-align: center;
position: relative;
color: #fff;
font-size: 40px;
font-weight: 600;
letter-spacing: 5px;
margin-bottom: 30px;
cursor: pointer;
}
.form h2 h22 {
top: -40px;
text-align: center;
position: relative;
color: #fff;
font-size: 40px;
font-weight: 600;
letter-spacing: 5px;
margin-bottom: 30px;
cursor: pointer;
}
.form .a1, .form p1 {
bottom: -90px;
left: 50px;
position: relative;
color: #fff;
font-size: 18px;
font-weight: 600;
letter-spacing: 5px;
/*margin-bottom: 10px;*/
cursor: pointer;
text-decoration: none;
}
.form p1 a{
position: relative;
color: #fff;
font-size: 18px;
font-weight: 600;
letter-spacing: 5px;
/*margin-bottom: 10px;*/
cursor: pointer;
text-decoration: none;
}
.form fon {
top: -30px;
left: 30px;
position: relative;
color: #fff;
font-size: 28px;
font-weight: 600;
letter-spacing: 5px;
margin-bottom: 30px;
cursor: pointer;
}
/* 登录标题的下划线样式 */
.form h2::before {
content: "";
position: absolute;
left: 0;
bottom: -10px;
width: 0px;
height: 3px;
background: #fff;
transition: 0.5s;
}
.form h2 h22::before {
content: "";
position: absolute;
/*left: 0;*/
/*bottom: -10px;*/
/*width: 0px;*/
/*height: 3px;*/
/*background: #fff;*/
/*transition: 0.5s;*/
}
.form h2:hover:before {
width: 53px;
}
.form .inputBox {
width: 100%;
margin-top: 20px;
}
/* 输入框样式 */
.form .inputBox input {
width: 100%;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
outline: none;
border: none;
border-radius: 30px;
border: 1px solid rgba(255, 255, 255, 0.5);
border-right: 1px solid rgba(255, 255, 255, 0.2);
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-size: 16px;
letter-spacing: 1px;
color: #fff;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}
.form .inputBox input::placeholder {
color: #fff;
}
/* 登录按钮样式 */
.form .inputBox input[type="submit"],.form .inputBox input[type="reset"] {
background: #fff;
color: #666;
max-width: 100%;
margin-bottom: 20px;
font-weight: 600;
cursor: pointer;
}
.forget {
margin-top: 6px;
color: #fff;
letter-spacing: 1px;
}
.forget a {
color: #fff;
font-weight: 600;
text-decoration: none;
}
同样的道理我们来升级一下 loginsuccess 与 loginfail 。
loginsuccess 代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登入成功界面</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%-- <p class="fon">登入成功界面</p>--%>
<%-- <p class="fon1">恭喜您成功登入，欢迎使用</p>--%>
<%-- <a href="login.jsp">点击退出,返回登入界面</a>--%>
<%--</div>--%>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="box">
<div class="circle" style="--x:0"></div>
<div class="circle" style="--x:1"></div>
<div class="circle" style="--x:2"></div>
<div class="circle" style="--x:3"></div>
<div class="circle" style="--x:4"></div>
<div class="container">
<div class="form">
<h2> <h22>登录成功</h22><br>
</h2>
<fon>恭喜您成功登入 <br> 欢迎使用 <br>
<a class="a1" href="login.jsp">返回登入界面</a>
</fon>
</div>
</div>
</div>
</section>
</body>
</html>
loginfail 代码
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>登入失败界面</title>
<link rel="stylesheet" href="css.css" type="text/css">
</head>
<body>
<%--<div class="center">--%>
<%-- <p class="fon">登入失败界面</p>--%>
<%-- <p class="fon1">对不起，您账号或密码有误，请返回登入界面</p>--%>
<%-- <a href="login.jsp">返回登入界面</a><br>--%>
<%-- 忘记密码？<a href="amend.jsp">点击修改密码</a>--%>
<%--</div>--%>
<section>
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
<div class="box">
<div class="circle" style="--x:0"></div>
<div class="circle" style="--x:1"></div>
<div class="circle" style="--x:2"></div>
<div class="circle" style="--x:3"></div>
<div class="circle" style="--x:4"></div>
<div class="container">
<div class="form">
<h2> <h22>登录失败</h22><br>
</h2>
<fon>宝~是不是账号或密码记错惹？ <br>
<a class="a1" href="login.jsp">返回登入界面</a><br>
<p1><a href="amend.jsp">点击修改密码</a></p1>
</fon>
</div>
</div>
</div>
</section>
</body>
</html>
点击运行，我们来看看效果
那么这里我们是完成了，login总界面的效果，同样的道理，代码都差不多，我们直接 cv 大法，这里就给出重点要改的代码。
里面要重点改的代码，一个是 sql 语句插入，另一个是时间格式转换。
tring sql = "insert into login(name, pass,time)VALUES(?,?,?)";SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");// 时间转换，要不然就会是国际时间格式
String data = formatter.format(new Date());// 记录的是当前的时间
ps.setString(3,data);
3、logoutcheck总代码
3、logoutcheck总代码
里面要重点改的代码，是 sql 语句删除。
String sql = "DELETE FROM login WHERE name =? and pass =?";
4、amendcheck总代码
里面要重点改的代码，是 sql 语句更新。
String sql = "update login set pass='"+pass+"'";
然后分别是各个总页面的 success 与 fail 页面来实现好，这里有一个小细节，我们在作抛出异常，这里可以 out.println 来打印出信息来测试，可以输出在网页上，这样可以方便知道那里有异常。
catch (ClassNotFoundException e) {
e.printStackTrace();
out.println("1");
// response.sendRedirect("registerfail.jsp");
} catch (SQLException e) {
e.printStackTrace();
out.println("2");
// response.sendRedirect("registerfail.jsp");
好了，点击运行，完成总效果。
作者：一个名叫追的程序猿
原文出处:https://blog.csdn.net/aasd23/article/details/124458396?spm=1001.2100.3001.7377&utm_medium=distribute.pc_feed_blog_category.none-task-blog-classify_tag-16-124458396-null-null.nonecase&depth_1-utm_source=distribute.pc_feed_blog_category.none-task-blog-classify_tag-16-124458396-null-null.nonecase
最开始作为一种使网站变得漂亮的方式，JavaScript 已转变为一种严肃的编程语言。
• 来源：linux.cn • 作者：Nimisha Mukherjee • 译者：Xingyu.Wang •
（本文字数：2310，阅读时长大约：3 分钟）
JavaScript 的卑微起步始于 1995 年，是由当时在 Netscape 通信公司工作的 Brendan Eich 在短短 10 天内创建的 。从那时起，JavaScript 已经走过了漫长的道路，从一个让网站变得漂亮的工具变成了一种严肃的编程语言。
在其早期，JavaScript 被认为是一种视觉工具，它使网站变得更有趣和更有吸引力。像 Jakarta Server Pages （即 JSP，以前称作 JavaServer Pages）这样的语言曾经用来完成渲染网页的繁重工作，而 JavaScript 则被用来创建基本的交互、视觉增强和动画。
长期以来，HTML、CSS 和 JavaScript 之间的分界并不明确。前端开发主要由 HTML、CSS 和 JavaScript 组成，形成了标准 Web 技术的“ 多层蛋糕 ”。
标准网络技术的“ 多层蛋糕 ”（Mozilla 开发者网络， CC BY-SA 4.0 ）
HTML 和 CSS 为内容提供结构、格式和样式。一旦网页要做一些超越了显示静态内容的事情，就是 JavaScript 的用武之地。Ecma 国际部开发了 JavaScript 规范， 万维网联盟(World Wide Web Consortium)（W3C）开发了 HTML 和 CSS 规范。
JavaScript 是如何成为 最受欢迎的 编程语言的，背后有一段漫长的 历史 。早在 20 世纪 90 年代，Java 是王者，不可避免的人们会与它进行比较。许多工程师认为 JavaScript 不是一门好的编程语言，因为它缺乏对面向对象编程的支持。尽管当时并不明显，但其实 JavaScript 的对象模型和功能特性在其第一个版本中就已经出现了。
1995 年 JavaScript 匆匆发布后，网景公司将其提交给了 欧洲计算机制造商协会(European Computer Manufacturers Association)（ECMA）国际部进行标准化。由此产生了 ECMAScript ，这是一个 JavaScript 标准，旨在确保不同 Web 浏览器之间网页的互操作性。ECMAScript 1 于 1997 年 6 月问世，帮助推进了 JavaScript 的标准化。
在此期间，PHP 和 JSP 成为了服务器端编程语言的流行选择。JSP 作为 通用网关接口(Common Gateway Interface)（ CGI ）的首选替代方案获得了突出的地位，因为它可以在 HTML 中嵌入 Java 代码。虽然它很受欢迎，但开发人员发现将 Java 嵌入 HTML 中是不自然的。此外，即使是 HTML 上最简单的文本变化，JSP 也必须经历一个耗时的生命周期。在今天的微服务世界里，面向 JSP 的页面被认为是技术债务。
PHP 的工作原理与 JSP 类似，但 PHP 代码以一个通用网关接口（ CGI ）的可执行文件来处理。基于 PHP 的 Web 应用比基于 JSP 的应用更容易部署。总的来说，使用 PHP 更容易上手和运行。今天，PHP 和 JavaScript 是创建动态网站最流行的组合之一：PHP 作为服务器端脚本，JavaScript 作为客户端脚本。
伴随着 2006 年 jQuery 的发布，JavaScript 的应用越来越多。jQuery 是一个多用途的 JavaScript 库，简化了繁琐的 文档对象模型(Document Object Model)（DOM）管理、事件处理和 Ajax 。
2009 年 Node.js 的发布是 JavaScript 发展的转折点。开发者现在可以用 JavaScript 编写服务器端脚本了。紧随其后的是 2010 年发布的 Backbone.js 和 AngularJS 等框架。这导致了出现了使用单一语言进行全栈开发的概念。
2015 年，Ecma 国际部发布了 ECMAScript 6（ES6），它为编写复杂的应用程序增加了包括类声明在内的重要新语法。其他新特性还包括迭代器、箭头函数表达式、let 和 const 关键字、类型化数组、新的集合（映射、集合和 WeakMap）、Promise、字符串的模板字元以及许多其它很酷的特性。后来的版本又继续增加了更多的功能，使 JavaScript 更加强大、精简和可靠。
在过去的 20 年里，JavaScript 有了长足的进步。现在大多数浏览器都在争相满足合规性，因此最新的规范推出得更快。
根据你的项目需求，有大量稳定的 JavaScript 框架可供选择，包括最流行的 React 、 Angular 和 Vue.js 等等。在本系列的下一篇文章中，我将深入探讨为什么 JavaScript 如此受欢迎。
via: opensource.com
作者： Nimisha Mukherjee 选题： lujun9972 译者： wxy 校对： wxy
本文由 LCTT 原创编译， Linux中国 荣誉推出
*请认真填写需求信息，我们会在24小时内与您取得联系。
