第一步先通过jdbc驱动链接数据库
package JavaBean;
import java.sql.*;
public class DriverManager {
public Connection getConn() throws ClassNotFoundException, SQLException {
Class.forName("com.mysql.jdbc.Driver");//通过驱动名字来注册驱动
String url = "jdbc:mysql://localhost:3306/student";
String user = "root";
String pwd = "root";
Connection conn = java.sql.DriverManager.getConnection(url, user, pwd);
return conn;
}
public Statement getStatement() throws SQLException, ClassNotFoundException {
Connection conn = getConn();
Statement st = conn.createStatement();
return st;
}
public PreparedStatement getPreStatemrnt(String sql) throws SQLException, ClassNotFoundException {
Connection conn = getConn();
PreparedStatement prest = conn.prepareStatement(sql);
return prest;
}
public boolean getQuery(String user, String upwd) throws SQLException, ClassNotFoundException {
if(user==null||upwd==null) { //防止刚进页面未传参数的情况
return false;
}
Statement st = getStatement();
String sql = "select * from stuinfo;";
ResultSet rs = st.executeQuery(sql);
while (rs.next()) {
String name = rs.getString("name");
String pwd = rs.getString("pwd");
if (user.equals(name)&&upwd.equals(pwd)) {
return true; //遍历结果集,比较用户输入与数据库中的值正确返回true
}
}
return false;
}
public boolean doInsert(String user, String upwd) {
String sql = "insert into stuinfo values('" + user + "','" + upwd + "')";
try {
Statement st = getStatement();
st.executeUpdate(sql);
} catch (ClassNotFoundException | SQLException e1) {
// TODO Auto-generated catch block
return false;
}
return true;
}
public boolean doDel(String user) { //这个是为了注销用户准备的
try {
Statement st = getStatement();
String sql = "select * from stuinfo;";
ResultSet rs = st.executeQuery(sql);
while(rs.next()){
String name = rs.getString("name");
if (name.equals(user)){
String str = "delete from stuinfo where name='"+user+"'";
System.out.println(str);
st.executeUpdate(str);
return true;
}
}
} catch (SQLException throwables) {
throwables.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
return false;
}
}
在写主页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="JavaBean.DriverManager" %> <!--导包-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vab社区</title>
<link rel="stylesheet" href="sheet.css"> <!--css样式连入-->
</head>
<body>
<div class="main">
<header>
<a href="index.html" class="logoline"><p class="logofont">Vab社区</p></a>
</header>
<div class="mid">
<div class="one">
<ul>
<li class="oneli">C:\Windows\system\cmd.exe-mysql -u root -p</li>
<li class="line animation"> Microsoft Windows [版本 10.0.19042.964]</li>
<li class="line animation it">(c) Microsoft Corporation。保留所有权利。</li>
<li><br></li>
<li class="line animation it1">C:\Users\A8>mysql -u root -p</li>
<li class="line animation it2">Enter password: ****</li>
<li class="line animation it3">Welcome to the MySQL monitor. Commands end with ; or \g.</li>
<li class="line animation it4">Your MySQL connection id is 4</li>
<li class="line animation it5">Server version: 5.5.27-log MySQL Community Server (GPL)</li>
<li class="line animation it6"><br></li>
<li class="line animation it7">Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.</li>
<li><br></li>
<li class="line animation it8">Oracle is a registered trademark of Oracle Corporation and/or its</li>
<li class="line animation it9">affiliates. Other names may be trademarks of their respective</li>
<li class="line animation it10">owners.</li>
<li><br></li>
<li class="line animation it11">Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.</li>
<li><br></li>
<li class="line animation it12">mysql> show databases;</li>
<li class="line animation it13">+-------------------------------+</li>
<li class="line animation it14">| Database |</li>
<li class="line animation it15">+-------------------------------+</li>
<li class="line animation it16">| information_schema |</li>
<li class="line animation it17">| mysql |</li>
<li class="line animation it18">| performance_schema |</li>
<li class="line animation it19">+-------------------------------+</li>
<li class="line animation it20">5 rows in set (0.00 sec)</li>
</ul>
</div>
<div class="two">
<ul>
<li class="oneli1">login</li>
<form action="#" method="POST" name="userinfo">
>>userName: <input type="text" name="user" class="in"><br><br>
>>userpwd: <input type="password" name="pwd" class="in"><br><br>
<br><br><br>
<input type="submit" value="登录" class="deng">
</form>
<br><br><br><br><br><br><br><br><br>
<a href="register.jsp" class="a">注册账号</a>
</ul>
</div>
</div>
<% <!--做查询数据库操作,数据库中有相应的值,重定向到另一页面-->
DriverManager dm = new DriverManager();
String name = request.getParameter("user");
String pwd = request.getParameter("pwd");
boolean flag = dm.getQuery(name, pwd);
if(flag){
response.sendRedirect("http://localhost:8080/test/register.jsp");
<!--没有写登录后的页面,所以那注册页面来使-->
}
%>
</div>
</body>
</html>
编写css样式
*{
margin: 0;
padding: 0;
}
.main{
width: 100%;
height: 100%;
position: fixed;
background-color: black;
}
.logofont{
color: rgb(13, 245, 44);
font-size: xx-large;
font-weight: 700;
font-style: italic;
margin-left: 20px;
}
.logoline{
text-decoration-line: none;
}
.mid{
width: 100%;
height: 700px;
z-index: 2;
}
div ul li{
list-style: none;
color: lawngreen;
font-family: Arial, Helvetica, sans-serif;
font-size: xx-small;
}
footer{
text-align: center;
display: inherit;
color: rgb(19, 241, 48);
margin-bottom: 10px;
}
.oneli{
list-style: none;
background-color: mediumorchid;
border-bottom: mediumorchid;
border-width: 1px;
}
.one{
width: 450px;
height: 300px;
margin-left: 100px;
margin-top: 100px;
overflow: hidden;
border-style: solid;
border-width: 1px;
border-color: magenta;
position: fixed;
animation: myactive 7s alternate-reverse 0 infinite normal normal;
}
.two{
width: 450px;
height: 450px;
margin-left: 850px;
margin-top: 100px;
overflow: hidden;
border-style: solid;
border-width: 1px;
border-color: magenta;
position: relative;
}
.oneli1{
padding: 0;
list-style: none;
background-color: mediumorchid;
border-bottom: mediumorchid;
border-width: 2px;
text-align: center;
font-size: large;
font-weight: 500;
}
form{
color: mediumseagreen;
}
form input{
border-width: 0;
background-color:black;
background-origin: content-box;
}
.line{
width:550px;
border-right:5px solid rgb(47, 212, 14);
white-space:nowrap;
overflow:hidden;
}
.in{
outline: none;
color: chartreuse;
border: none;
caret-color:mediumorchid;
text-align: left;
}
.deng{
color: chartreuse;
background-color: black;
margin-left: 200px;
}
.a{
margin-left: 300px;
color: blueviolet;
}
.animation{
animation:grow 10s steps(70) 1s normal both, blink 500ms steps(40) infinite normal;
}
@keyframes grow{
from{width:0; }
to{width:550px;/*段落长度 */ border-right-color:transparent; }
0%{ border-right:0; }/*光标起始位置不显示*/
1%{ border-right:5px solid rgb(10, 228, 10); }/*光标显示*/
99%{ border-right:5px solid rgb(27, 238, 8); }
100%{border-right:0;}/*结束位置光标不显示*/
}
@keyframes blink{
from{ border-right-color:#000}
to{ border-right-color:transparent;/*文字透明化*/}
}
.it{
animation-delay: 6s;
}/*下一段延时执行动画*/
.it1{
animation-delay: 12s;
}/*下一段延时执行动画*/
.it2{
animation-delay: 18s;
}/*下一段延时执行动画*/
.it3{
animation-delay: 24s;
}/*下一段延时执行动画*/
.it4{
animation-delay: 30s;
}/*下一段延时执行动画*/
.it5{
animation-delay: 36s;
}/*下一段延时执行动画*/
.i6t{
animation-delay: 42s;
}/*下一段延时执行动画*/
.it7{
animation-delay: 48s;
}/*下一段延时执行动画*/
.it8{
animation-delay: 54s;
}/*下一段延时执行动画*/
.it9{
animation-delay: 60s;
}/*下一段延时执行动画*/
.it10{
animation-delay: 66s;
}/*下一段延时执行动画*/
.it11{
animation-delay: 72s;
}/*下一段延时执行动画*/
.it12{
animation-delay: 72s;
}
.it13{
animation-delay: 72s;
}
.it14{
animation-delay: 72s;
}
.it15{
animation-delay: 72s;
}
.it16{
animation-delay: 72s;
}
.it17{
animation-delay: 72s;
}
.it18{
animation-delay: 72s;
}
.it19{
animation-delay: 72s;
}
.it20{
animation-delay: 72s;
}
再对登录页面稍作改动,改为注册页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="JavaBean.DriverManager" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vab社区</title>
<link rel="stylesheet" href="sheet.css">
</head>
<body>
<div class="main">
<header>
<a href="index.html" class="logoline"><p class="logofont">Vab社区</p></a>
</header>
<div class="mid">
<div class="one">
<ul>
<li class="oneli">C:\Windows\system\cmd.exe-mysql -u root -p</li>
<li class="line animation"> Microsoft Windows [版本 10.0.19042.964]</li>
<li class="line animation it">(c) Microsoft Corporation。保留所有权利。</li>
<li><br></li>
<li class="line animation it1">C:\Users\A8>mysql -u root -p</li>
<li class="line animation it2">Enter password: ****</li>
<li class="line animation it3">Welcome to the MySQL monitor. Commands end with ; or \g.</li>
<li class="line animation it4">Your MySQL connection id is 4</li>
<li class="line animation it5">Server version: 5.5.27-log MySQL Community Server (GPL)</li>
<li class="line animation it6"><br></li>
<li class="line animation it7">Copyright (c) 2000, 2011, Oracle and/or its affiliates. All rights reserved.</li>
<li><br></li>
<li class="line animation it8">Oracle is a registered trademark of Oracle Corporation and/or its</li>
<li class="line animation it9">affiliates. Other names may be trademarks of their respective</li>
<li class="line animation it10">owners.</li>
<li><br></li>
<li class="line animation it11">Type 'help;' or '\h' for help. Type '\c' to clear the current input statement.</li>
<li><br></li>
<li class="line animation it12">mysql> show databases;</li>
<li class="line animation it13">+-------------------------------+</li>
<li class="line animation it14">| Database |</li>
<li class="line animation it15">+-------------------------------+</li>
<li class="line animation it16">| information_schema |</li>
<li class="line animation it17">| mysql |</li>
<li class="line animation it18">| performance_schema |</li>
<li class="line animation it19">+-------------------------------+</li>
<li class="line animation it20">5 rows in set (0.00 sec)</li>
</ul>
</div>
<div class="two">
<ul>
<li class="oneli1">register</li>
<form action="#" method="POST" name="userinfo">
>>userName: <input type="text" name="user" class="in"><br><br>
>>userpwd: <input type="password" name="pwd" class="in"><br><br><br><br><br>
<br><br><br>
<input type="submit" value="注册" class="deng">
<%
DriverManager dm = new DriverManager();
String name = request.getParameter("user");
String pwd = request.getParameter("pwd");
boolean flag = dm.doInsert(name, pwd); <!--做相应的插入数据操作-->
if(flag){
out.print("<br><br><br><a href='demo01.jsp'>注册成功!返回登陆>></a>");
}
%>
</form>
</ul>
</div>
</div>
</div>
</body>
</html>