手把手教你从前端到数据库用jsp撸一个简单的登录页面

要做一个登录页面需要一下的步骤

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("");

}

}

%>

希望各位朋友多多支持，您的点赞就是对骚小孩最大的鼓励。如有不理解的地方，请留言。