要做一个登录页面需要一下的步骤
1.数据库部分
1>.我们先来把数据库相关的写好
先建一个数据库,并建好一个表
2>.然后写JDBC相关的类
先加载驱动并连接数据库
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;
public class Connect {
private static String URL="jdbc:mysql://localhost:3306/students";
private static String name="root";
private static String password="";
static Connection conn=null;
public static Connection connn() {
try {
//加载jdbc驱动
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("加载驱动失败");
}
try {
//连接数据库
conn=DriverManager.getConnection(URL, name, password);
} catch (SQLException e) {
// TODO Auto-generated catch block
e.printStackTrace();
System.out.println("连接数据库失败");
}
return conn;
}
}
3>.然后创建一个用户类
public class User {
private String name;
private String password;
private String phone;
private String email;
public String getPhone() {
return phone;
}
public void setPhone(String phone) {
this.phone = phone;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getPassword() {
return password;
}
public void setPassword(String password) {
this.password = password;
}
4>.创建一个对数据库进行操作的方法
import java.sql.Connection;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.List;
public class Operate {
private String name="";
private String password="";
//插入方法
public void Add(Students st1) throws Exception {
String sql="insert into students(name,password,phone,email) value(?,?,?,?)";
Connection conn=Connect.connn();
PreparedStatement pstm=(PreparedStatement) conn.prepareStatement(sql);
pstm.setString(1,st1.getName());
pstm.setString(2, st1.getPassword());
pstm.setString(3, st1.getPhone());
pstm.setString(4, st1.getEmail());
pstm.executeUpdate();
pstm.close();
conn.close();
System.out.println("插入成功");
}
//通过名字来对数据库进行查询
public void QuertByName(Students st1) throws SQLException {
String sql="select name,password from students where name=?";
Connection conn=Connect.connn();
PreparedStatement pstm =(PreparedStatement) conn.prepareStatement(sql);
pstm.setString(1,st1.getName() );
ResultSet rest = pstm.executeQuery();
while(rest.next()) {
name=rest.getString("name");
password =rest.getString("password");
}
pstm.close();
rest.close();
conn.close();
}
public String getName() {
return name;
}
public String getPassword() {
return password;
}
}
2.然后我们可以开始写前端部分了
1>.我们先写一个jsp的登录页面(引入的外部css)
要注意设置编码格式,防止乱码发生
pageEncoding="utf-8"%>
登陆
注册
//form表单提交给以会要对登录页面进行处理的jsp文件
账号:
密码:
css设置如下
@charset "UTF-8";
*
body{
background: url("./about.jpg");
background-size: 100%;
font-size: 30px;
color: white;
}
a{
float: right;
color: darkturquoise;
font-size: 20px;
margin: 10px;
}
a:hover{
color: deepskyblue;
}
form{
clear: both;
position:absolute;
display: block;
text-align: center;
left: 37%;
top:40%;
}
form>input{
height: 25px;
width: 200px;
border: none;
}
#button{
height: 30px;
width: 100px;
border: none;
background-color: darksalmon;
cursor: pointer;
}
#button:hover{
background-color: coral;
}
2>.接下来对登录页面进行处理
通过上面写的jdbc方法来与用户输入进行比较
Insert title here
Students stu=new Students();
Operate op=new Operate();
//设置编码格式
request.setCharacterEncoding("utf-8");
//获取用户输入的信息
String username=request.getParameter("username");
String password2=request.getParameter("password");
stu.setName(username);
op.QuertByName(stu);
String name=op.getName();
String password=op.getPassword();
session.setAttribute("username", name);
//判断数据库中是否存在该用户名
if(name==""){
//下边是jsp和javascript混用,对用户输入的信息进行响应
out.print("");
//判断用户输入密码与数据库中保存的密码是否一致
}else if(password2.equals(password)){
request.getRequestDispatcher("success.jsp").forward(request, response);
}else{
out.print("");
}
%>
效果如下
如果登录成功跳转到成功页面
如果登录失败会以弹窗方式提示你失败原因如:用户名不存在,密码错误等
5>.登录成功页面如下(并没有设置太多内容)
pageEncoding="utf-8"%>
Insert title here
out.print("登陆成功!");
out.print("欢迎"+session.getAttribute("username"));
%>
3.我们来设置注册页面
注册的原理就是向数据库插入信息
pageEncoding="utf-8"%>
注册
用户名:
密码:
再次输入密码:
E-mail:
Phone:
同样应用外部样式表
body{
color: white;
}
.post{
width: 50%;
margin: 0 auto;
background-color: grey;
}
.post>form{
position: relative;
text-align: center;
padding-top: 100px;
padding-bottom: 100px;
}
.post>form>input{
margin-top: 50px;
border: none;
width: 30%;
height: 30px;
}
#button{
height: 30px;
width: 20%;
background-color: coral;
cursor: pointer;
border-radius: 5px;
}
注册前台样式如下
然后我们来进行处理注册页面
核心思想就是对用户输入的信息进行简单处理如判断2次密码是否相同,然后再对用户名与数据库中的用户名比较看是否重复,如果验证完成,则插入到数据库,然后跳转到登录界面。
pageEncoding="utf-8"%>
提交中
request.setCharacterEncoding("utf-8");
Students stu =new Students();
Operate sp =new Operate();
//获取用户输入的信息
String name =request.getParameter("name");
String password =request.getParameter("password");
String password2=request.getParameter("password2");
String email=request.getParameter("email");
String phone=request.getParameter("phone");
//对用户输入进行简单的判断
if(!(password.equals(password2))){
out.print("");
}
else{
stu.setName(name);
sp.QuertByName(stu);
String username=sp.getName();
//判断该用户名是否已被注册
if(username==""){
stu.setPassword(password);
stu.setPhone(phone);
stu.setEmail(email);
sp.Add(stu);
//验证成功,跳转到登录成功的页面
response.sendRedirect("login.jsp");
}else{
out.print("");
}
}
%>
希望各位朋友多多支持,您的点赞就是对骚小孩最大的鼓励。如有不理解的地方,请留言。
领取专属 10元无门槛券
私享最新 技术干货