一.案例要求
-
建库
-
要求登陆成功进入欢迎页面,显示用户信息(用自定义标签),完成用户信息输出
-
登录信息不正确回到登录页,并提示错误信息
-
注册时,用户名不可以重复,用ajax验证
-
注册成功,写入数据库,并返回登录页面
-
用户信息修改页面要求用在jsp页面使用Bean完成
-
各页面注意页面效果,用Bootstrap框架布局
注意:所有jsp页面不可以出现任何java代码
二.使用工具
工具
IDEA、Navicat 15 for MySQL、Tomcat服务器、java开发环境JDK1.8、xmind(思维导图工具)
相关文件的导入
- 在WEB-INF下新建lib文件夹,把jar包(843b)导入后按图示操作
1.数据库建立
1.1 新建数据库
1.2 建表
1.3 添加记录
Bootstrap部署
到Bootstrap下载文件,这里用的是Bootstrap4.4.1
下载好后把bootstrap-4.4.1下的dist文件夹中的两个文件夹复制粘贴到web目录下即可如下图(Bootstrap快速入门)
login.jsp实现
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><%--导入标准库标签的包--%>
<html>
<head>
<title>登录界面</title>
<link href="css/bootstrap.min.css" rel="stylesheet"><%--导入bootstrap的css样式--%>
</head>
<body>
<div class="container"><%--bootstrap的栅格布局--%>
<h3 style="text-align: center" class="mt-4">用户登录</h3><%--mt调整margin-top--%>
<form action="${pageContext.request.contextPath}/loginServlet" method="post" class="mt-2 col-lg-5 col-md-3 mr-auto ml-auto"><%--直接从Bootstrap官网复制粘贴过来,修改一下即可--%>
<div class="form-group"><%--mr-auto和ml-auto是为了使内容居中 col-md-8是指该内容在辨率≥768px的设备中占3个格子 col-lg-4是该内容在分辨率≥992px的设备中占5个格子--%>
<label for="userName">用户名</label><%--label的作用就是点击标签体内容 焦点给到id为username的输入框--%>
<input type="text" class="form-control" name="userName" id="userName" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="userPassword">密码</label>
<input type="password" class="form-control" id="userPassword" name="userPassword" placeholder="请输入密码">
</div>
<hr class="mt-4 mb-4"><%--mt调整margin-top mb是调整margin--bottomde--%>
<div class="form-group" style="text-align: center"><%--style的属性是为了使两个按钮居中--%>
<button type="submit" class="btn btn-primary btn-light">登录</button>
<a href="register.jsp" class="btn btn-primary btn-dark">注册</a>
</div>
</form>
<%--出错显示的信息框--%>
<c:if test="${not empty errorMes}"><%--如果request域中获取的errorMes不为空则显示下列信息--%>
<div class="alert alert-warning alert-dismissible fade show col-md-2 col-lg-4 mr-auto ml-auto " role="alert"> <%--Bootstrap的警告框 直接从官网复制代码修改即可--%>
<strong>出错啦!</strong> <c:out value="${errorMes}"/>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
</c:if>
</div>
<script src="js/bootstrap.min.js"></script><%--导入bootstrap的js--%>
<script src="js/jquery-3.4.1.min.js"></script><%--导入jquery--%>
</body>
效果
3.JDBC的DAO模式实现
3.1 数据库连接类
需要加载的MySQL驱动已在提供的jar包中(mysql-connector-java-8.0.19)
package cn.lot.DB;
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class MySQLConnection {
/*加载的驱动程序名*/
private static final String DRIVER="com.mysql.cj.jdbc.Driver";
/*配置MySQL时的用户名和密码*/
private static final String USERNAME="你自己的用户名";
private static final String PASSWORD="密码";
/*URL指向访问的数据库名*/
private static final String URL="jdbc:mysql://localhost:3306/user?serverTimezone=Asia/Shanghai";/*设置为shanghai的时间*/
/*声明Connection对象*/
private Connection conn;
public Connection getConnction() throws Exception{
Class.forName(DRIVER);/*加载驱动*/
conn = DriverManager.getConnection(URL,USERNAME,PASSWORD);
return conn;
}
/*关闭数据库连接的方法*/
public void close(){
if(conn != null){
try{
this.conn.close();
}catch (SQLException e){
e.printStackTrace();
}
}
}
}
3.2 User实体类-JavaBean
User特征
- 有一个默认的无参构造函数
- 需要被序列化即实现Serializable接口
- 除userid属性只读外(本案例中userid由数据库自动生成)其余属性均可读写
- 所有属性均有getter和setter方法
User代码
package cn.lot.VO;
import java.io.Serializable;
public class User implements Serializable {
private int userid;
private String username;
private String address;
private String password;
private String sex;
private String email;
public User() {}
public User(int userid, String username, String address, String password, String sex, String email) {
this.userid = userid;
this.username = username;
this.password = password;
this.address = address;
this.sex = sex;
this.email = email;
}
public int getUserid() {
return userid;
}
public void setUserid(int userid) {
this.userid = userid;
}
public String getUsername() {
return username;
}
public void setUsername(String username) {
this.username = username;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
public String getAddress() {
return address;
}
public void setAddress(String address) {
this.address = address;
}
public String getSex() {
return sex;
}
public void setSex(String sex) {
this.sex = sex;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
@Override
public String toString() {
return "User{" +
"userid=" + userid +
", username='" + username + '\'' +
", address='" + address + '\'' +
", passwo