JSP+Servlet+Css+Mysql实现网页简单的登录注册功能

最新推荐文章于 2023-12-02 20:26:10 发布
最新推荐文章于 2023-12-02 20:26:10 发布
阅读量1.7k 收藏 64
点赞数 6
文章标签： java servlet css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_63701355/article/details/134289769
版权

1.登录页面

userLogin.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录界面</title>
    <style>
        html{
            height :100%;
            background: linear-gradient(to bottom, #9da2bb, #0ee1bd);
        }
        .text1{
            text-align: center;
            font-size: 28px;
            margin-left: 70px;
            font-weight: bold;
            letter-spacing: 20px;
        }
        .form {
            width: 400px;
            height: 300px;
            border-radius: 20px;
            margin: 50px auto;
            padding: 25px;
            text-align: center;
            font-family: "微软雅黑";
            box-shadow: 0px 0px 13px #8c8c8c;
            background: rgba(241, 242, 246, 0.4);
            display: flex;
        }
        input {
            border-radius: 10px;
            width: 180px;
            height: 30px;
            margin-bottom: 5px;
            border: 1px solid #9b9b9b;
            outline: none;}
        input:hover {
            box-shadow: 0px 0px 5px #020d18;
        }
        .input1{
            padding-left: 10px;
        }
        .input2 {
            margin-top: 20px;
            padding-left: 10px;
        }
        .submit {
            background: #7e8acb;
            margin-top: 20px;
            width: 80px;
            height: 21px;
            font-size: 12px;
        }
        .submit:hover,.reg:hover {
            background-color: #b3d57a;
            box-shadow: 0px 0px 5px #1c8fff;
        }
        .box{
             display: flex;
             flex-direction:row;
             justify-content: space-around;
         }
        .reg{
              margin-top: 19px;
              margin-left: -150px;
              border-radius: 10px;
              border: 1px solid #9b9b9b;
              outline: none;
              background: #7e8acb;
              width: 80px;
              height: 20px;
              line-height: 21px;
              font-size: 13px;
          }
        .reg a{
            display:block;
            width: 100%;
            height: 100%;
            text-decoration: none;
            color: #000000;
        }
        .msg{
            display:inline-block;
            color: #d90d24;
            height: 30px;
            line-height: 40px;
            font-weight: bold;
        }
    </style>


</head>
<body>

<form class="form" action="UserLoginServlet" method="post">
    <div>
        <p class="text1">学生管理系统</p><br>
        账&nbsp;号:<input class="input1" type="text" name="userName" /> <br>
        密&nbsp;码:<input class="input2" type="password" name="userPassword" /> <br>
        <div class="box">
            <div>
                <input class="submit" type="submit" value="登录" />
            </div>
            <div class="reg">
                <a href="userRegister.jsp">注册</a>
            </div>
        </div>
        <span class="msg">${msg}</span>
    </div>

</form>
<script type="text/javascript">

</script>
</body>
</html>

2、注册页面

userRegister.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>注册页面</title>
    <style>
        <%--页面上所有的元素设置了样式 --%>
       *{
           margin: 0;
           padding: 0;
           outline: none;
           box-sizing: border-box;
       }
       html{
           height :100%;
           background: linear-gradient(to bottom,#acb6e5,#86fde8);
           display: flex;
           justify-content: center;
           align-items:center;
       }
       p{
           text-align: center;
           font-size: 25px;
          margin-bottom: 20px;
           font-weight: bold;
           letter-spacing: 10px;
       }
       form{
           width:420px;
           font-size: 15px;
           color: #434343;
           font-family: "微软雅黑";
           font-weight: 400;
           margin-left: 30px;
           background: rgba(230,255,251,0.4);
           padding: 10px 100px;
           border-radius: 30px;
           box-shadow: 0 0 10px #d9d9d9;
       }
         label{
           height: 35px;
           line-height: 30px;
           display: block;
       }
       span{
           display: inline-block;
           width: 20px;
           text-align: center;
       }
       input,select{
           height: 20px;
           width: 150px;
           border-radius: 10px;
           padding-left: 10px;
           border: 1px solid #ffffff;
           color: #434343;
       }
       <%--设置当鼠标悬停在输入框（input）或选择框（select）上时的样式--%>
        input :hover,select:hover{
          border: 1px;
            box-shadow:  0 0 5px #021221;

}
        input[type="radio"]{
            width: 20px;
            height:13px;
            vertical-align: center;
            margin-left: 10px;
        }
        .submit{
            border: 1px solid #adb6bd;
            background: #4d4e8f;
            text-align: center;
            width: 100px;
            height: 28px;
            margin-left: 50px;
            letter-spacing: 10px;
            color: #ffffff;
        }
        h5{
            line-height: 30px;
            color: #f5222d;
            text-align: center;
        }
    </style>
</head>
<body>
<form class=".form" action="RegisterServlet"method="post">
    <p>注册页面</p>
    <label>
        账&nbsp;户:<input type ="text" name="userName">
    </label>
    <label>
        密&nbsp;码:<input type ="password" name="userPassword">
    </label>
    <label>
        学&nbsp;号:<input type="text" name="sno">
    </label>
    <label>
        姓&nbsp;名:<input type="text" name="snoName">
    </label>
    <label>
        性&nbsp;别:
        男:<input type="radio" name="sex"value="男">
        女:<input type="radio" name ="sex" value="女">
    </label>
    <label>
        年&nbsp;龄:<input type="text" name="age">
    </label>
    <label>
        职&nbsp;业:
        学&nbsp;生:<input type="radio" name="userId" value="1">
        老&nbsp;师:<input type="radio" name="userId" value="2">
    </label>
    <label>
        学&nbsp;院:<input type="text" name="userClass">
    </label>


    <h5>${msg}</h5>
    <label>
        <input class="submit" type="submit" value="注册">
    </label>

</form>
</body>
</html>

3、Servlet层

UserLoginServlet.java

获取前端的信息

package servlet1;


import bean1.DBUtil;
import bean1.User;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;

@WebServlet("/UserLoginServlet")
public class UserLoginServlet extends HttpServlet {
@Override
//获取前端的信息
   protected void service(HttpServletRequest req, HttpServletResponse resp) throws IOException, ServletException {
    req.setCharacterEncoding("utf-8");
    resp.setContentType("text/html;charset=utf-8");
    Connection conn = null;
    PreparedStatement ps = null;
    ResultSet rs = null;
    try {
        conn = DBUtil.getConnection();
        String sql = "select*from user where userName=? and userPassword=? ";
        ps = conn.prepareStatement(sql);

        String userName = req.getParameter("userName");
        String userPassword = req.getParameter("userPassword");
        ps.setString(1, userName);
        ps.setString(2, userPassword);
        rs = ps.executeQuery();
        User user = new User();
        if (rs.next()) {
            do {
                user.setUserName(rs.getString("userName"));
                user.setUserPassword(rs.getString("userPassword"));
                user.setSnoName(rs.getString("snoName"));
                user.setSex(rs.getString("sex"));
                user.setAge(rs.getInt("age"));
                user.setSno(rs.getInt("sno"));
                user.setUserClass(rs.getString("userClass"));
                user.setUserId(rs.getInt("userId"));
            } while (rs.next());
            req.getSession().setAttribute("user",user);
            req.setAttribute("mainR","blank.jsp");
            req.getRequestDispatcher("/main.jsp").forward(req, resp);
        } else {
            req.setAttribute("msg", "登录失败，账号或密码错误");
            req.getRequestDispatcher("userLogin.jsp").forward(req, resp);
        }
    } catch (SQLException e) {
        e.printStackTrace();
    } finally {
        DBUtil.close(rs,ps,conn);
    }

}

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}
 UserRegister.java
package servlet1;


import bean1.DBUtil;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.SQLException;
import java.util.Map;

@WebServlet("/RegisterServlet")
public class RegisterServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //处理注册页面的请求

        req.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=utf-8");

        Map<String, String[]> map = req.getParameterMap();
        PreparedStatement ps = null;
        Connection conn = null;
        try {
            conn = DBUtil.getConnection();
            String sql = "insert into user(userName,userPassword,snoName,sex,age,sno,userClass,userId) values(?,?,?,?,?,?,?,?)";
            ps = conn.prepareStatement(sql);
            ps.setString(1, map.get("userName")[0]);
            ps.setString(2, map.get("userPassword")[0]);
            ps.setString(3, map.get("snoName")[0]);
            ps.setString(4, map.get("sex")[0]);
            ps.setInt(5, Integer.valueOf(map.get("age")[0]));
            ps.setString(6, map.get("sno")[0]);
            ps.setString(7, map.get("userClass")[0]);
            ps.setInt(8, Integer.valueOf(map.get("userId")[0]));
            int count = ps.executeUpdate();
            if (count > 0) {
                System.out.println("注册成功");
                req.setAttribute("msg", "注册成功！");
                req.getRequestDispatcher("/userLogin.jsp").forward(req, resp);
            } else {
                req.setAttribute("msg", "注册失败！");
                req.getRequestDispatcher("userRegister.jsp").forward(req, resp);
            }
        } catch (SQLException e) {

            req.setAttribute("msg", "注册失败，账号已存在");
            req.getRequestDispatcher("userRegister.jsp").forward(req, resp);
        } catch (NullPointerException e) {
            System.out.println("注册失败");
            req.setAttribute("msg", "注册失败！信息必须填写完整");
            req.getRequestDispatcher("userRegister.jsp").forward(req, resp);
        } finally {
            DBUtil.close(null,ps,conn);
        }

    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doGet(req, resp);
    }
}

4.连接数据库

参考我的博客“jdbc连接数据库的文章”

5、实体类

user.java

package bean1;

public class User {
   private String userName;
   private String userPassword;
   private String snoName;
  private  String sex;
  private int age;
  private int sno;
  private String userClass;
  private int userId;
  public String getUserName(){
      return userName;
  }
  public void setUserName(String userName){
      this.userName=userName;
  }
  public String getUserPassword(){
      return userPassword;
  }
  public void setUserPassword(String userPassword){
      this.userPassword=userPassword;
  }
  public String getSnoName(){
      return snoName;
  }
  public void setSnoName(String snoName){
      this.snoName= snoName;
  }
  public String getSex(){
      return sex;
  }
  public void setSex(String sex){
      this.sex= sex;
  }
  public int getAge(){
      return age;
  }
  public void setAge(int age){
      this.age=age;
  }
  public int getSno(){
      return sno;
  }
  public void setSno(int sno){
      this.sno=sno;
  }
   public String getUserClass(){
      return userClass;
   }
   public void setUserClass(String userClass){
      this.userClass=userClass;
   }
  public int getUserId(){return userId;}
    public void setUserId(int userId){this.userId=userId;}
@Override
    public String toString(){
      return "userName:"+userName+"userPassword:"+userPassword
              +"snoName:"+snoName+"sex"+sex+"age"+age+"sno"+sno+"userClass"+userClass+"userId"+userId;
}
}

6.创建数据库

7.效果图

8、体会

 以上都是参考网上的视频教学来做，一边做一边学，只展示了一部分功能，其他页面没有展示出来，仅供大家参考。

爱吃玉米的小七
关注
  • 6
    点赞
  • 踩
  • 64
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
JDBC+MySQL+JSP+Servlet实现简单网页登录
Kurumi的博客
06-29 574
JSP+Servlet+MySQL实现简单网页登录 准备工作 把mysql-connector-java-5.0.8-bin.jar添加到idea项目中的lib中，并右键选择Add as library 把mysql-connector-java-5.0.8-bin.jar复制到tomcat安装路径/lib/ 配置tomcat参考 创建表 SET NAMES utf8; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Tab
Jsp加servlet做一个简单的登陆注册页面
weixin_42087159的博客
12-15 621
1.登录页面 <%@ page language=“java” contentType=“text/html; charset=utf-8” pageEncoding=“utf-8”%> Insert title here <style type="text/css"> html{ width: 100%; height: 100%; ov...
使用JSP+Servlet+MySQL实现登录注册功能
分享思想，留下痕迹。
12-02 3928
大家好，我是Leo哥🫣🫣🫣，前几天一个在大学的粉丝跟我说：Leo哥，我们最近要搞那个Java期末作业，要求是通过Javaweb知识点，使用JDBC，MySQL，JSP,Servlet等技术实现一个登录和注册功能，能不能出一期教程啊，老师啥也不教。听到这里我也是感触颇深，让我看到我之前的影子，当时老师也是啥都不教，就念个PPT，啥都要咱们自己琢磨。既然这样，咱们就出一期保姆级教程。后面也会出一些demo案例放到这个系列，第一期就先来点简单的开胃菜吧好了，话不多说让我们开始吧😎😎😎。
Servlet (四) --- 用Jsp和Servlet写一个注册页面
但行好事 莫问前程
07-16 1万+
注册要求： 一个注册页面 username （文本框） password：密码 （密码框） passwordYes ：再次输入密码（密码框） hobby （多选框） sex （单选框） info （文本域） servlet处理注册信息，判断两次密码是否相同 相同则跳到成功页面 不同则注册失败，重定向到注册页面 成功页面 显示登陆成功的用户名，密码，爱好，性别和信息； 显...
基于JSP+Servlet+JavaBean实现用户注册和登录
qq_43238335的博客
05-14 8060
基于JSP+Servlet+JavaBean实现用户注册和登录 实现一个简单的用户注册登录页面。通过注册页面提交注册信息，若数据库中已存在该用户名，给出提示，重新进入注册页面，当与数据库中的已有用户名不重复时，写入数据库，转向登录页面，当符合数据库中信息时，转向主页。 采用MVC开发模式 结构如下图所示： 1.总页面（deng.jsp） 连接注册页面和登录页面 <%@ page language="java" contentType="text/html; charse...
基于servlet，jsp以及MySQL实现登录及注册功能
天青色 等烟雨的博客
02-28 4938
基于servlet以及MySQL实现登录及注册功能第一步建表第二步创建数据库连接类JdbcUtils及bean类创建servlet类以及jsp页面 第一步建表 1.创建表格有来储存用户的注册相关信息，方便后面进行获取 create table user( id int auto_increment, username char(20) not null, password char(20) not null, email char(20) not null, primary
使用 HTML 和 CSS 的玻璃态登录表单(含免费完整源码)
努力是为了站在万人之中，成为别人的光
09-17 1万+
直接跳到末尾 获取完整源码 在本文中，我将带着大家展示如何使用 HTML 和 CSS 代码创建 玻璃态登录表单。你可以将任何简单的设计转换为玻璃态设计。为此，只需要更改一点代码。首先使用 background-color semi-transparent 比如 rgba (255,255,255,0.13)。其次，我们需要使用backdrop-filter: blur (10px)来模糊背景。最后需要使用边框来增强其美感。 ❤️使用 HTML 和 CSS 的玻璃态登录表单❤️???? 在线演示地址??
Java+Servlet+Jdbc+Jsp+Mysql实现Web学生信息管理系统
07-16
在本项目中，"Java+Servlet+Jdbc+Jsp+Mysql实现Web学生信息管理系统"，开发者利用了Java后端技术、Servlet、JDBC、JSP以及MySQL数据库来构建一个完整的Web应用，用于管理学生信息。以下是这些技术在系统中的具体应用...
JSP+Servlet+MySql实现商城项目
03-19
本项目基于JSP、Servlet和MySQL技术实现了在线商城的功能，这是一套完整的电商系统开发案例，适合初学者和有一定经验的开发者学习。在本文中，我们将深入探讨这三个核心技术在电商项目中的应用，以及它们如何协同...
基于Java+servlet+jsp+css+js+mysql实现的“转赚”二手交易平台源码+项目说明.zip
最新发布
02-27
【资源说明】 1、该资源包括项目的全部源码，下载可以直接使用！ 2、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大...基于Java+servlet+jsp+css+js+mysql实现的“转赚”二手交易平台源码+项目说明.zip
登陆注册JSP+MySQL页面
11-22
此项目为登陆注册，JSP+MySQL+JavaBean,项目是在IDEA的环境编写
用jsp实现简单的用户注册功能，点提交可以在另一个jsp页面显示用户注册信息
11-22
简单的用户注册功能，有两个jsp页面，在第一个页面点提交可以在另一个jsp页面显示用户注册信息。供初学者使用
jsp登录页面设计源代码
10-26
jsp登录页面设计jsp登录页面设计jsp登录页面设计
JSP和MYSQL实现用户注册
03-26
写给广大基础班的JSP爱好者，设计的很简单，方便大家的理解，降低学习的难度。
JSP+Servlet+JavaBean+MySQL实现的宠物管理系统
06-19
该项目是一个宠物管理系统，为大二下学期Java Web实训作业；主要是对用户的请求和后台数据的处理，基于MVC模式。 前端：HTML+CSS 后端：JSP+Servlet+JavaBean+MySQL 配有sql文件
mysql+servlet+jsp的简易crm实现
07-29
【MySQL + Servlet + JSP 简易CRM实现】 在IT行业中，开发客户关系管理系统（CRM）是一项常见的任务，尤其对于初学者来说，通过MySQL、Servlet和JSP的结合可以构建一个基础的CRM系统，这有助于理解Web应用程序的...
jsp实现注册功能
m0_63300795的博客
05-12 2903
一，编写jsp注册页面 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <met...
JSP实现简单的登录和注册
热门推荐
weixin_61370021的博客
03-19 1万+
JSP实现简单的登录和注册，使用Map集合模拟数据库存储数据
非常漂亮的自定义登录表单样式代码
ICode联盟
10-30 659
下载地址 HTMLCSS.form-1 { /* Size & position */ width: 300px; margin: 60px auto 30px; padding: 10px; position: relative; /* For the submit button positioning */ /* Styles */ box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 3px 7px rgba(0, 0, 0, 0.3), inset 0 1px
jsp+servlet+mysql实现简易订餐
05-10
这是一个比较常见的Web应用开发需求，可以分为以下几个步骤： 1. 确定需求：确定订餐系统的功能需求，例如用户注册登录、浏览菜单、下单、支付等。 2. 数据库设计：设计数据库表结构，包括用户表、菜单表、订单表等。可以使用MySQL Workbench等工具进行设计和生成SQL语句。 3. 编写前端页面：使用HTML、CSS、JavaScript等技术实现前端页面的设计和交互逻辑。可以使用Bootstrap等前端框架加速开发。 4. 编写后端程序：使用Java语言编写Servlet程序，实现用户登录、浏览菜单、下单、支付等功能。可以使用Maven等工具管理依赖。 5. 连接数据库：使用JDBC技术连接MySQL数据库，并编写Java程序实现增删改查等操作。 6. 部署应用：将编写好的程序部署到Tomcat等Web服务器中，启动应用，测试功能是否正常。 7. 上线发布：在测试通过后，将应用部署到云服务器或者其他生产环境中，供用户使用。 以上是一个简单的订餐系统的开发流程，具体实现过程中需要根据实际需求进行调整和优化。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值