菜单 搜索
首页 前端知识 JSP Servlet Css Mysql实现网页简单的登录注册功能

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

2024-06-13 21:06:57 前端知识 前端哥 311 734 我要收藏

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、体会

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

转载请注明出处或者链接地址：https://www.qianduange.cn//article/11968.html
标签
servlet
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

HTML5-本地存储浅谈

2024-06-19 08:06:18

html5测试题整理--针对标签的概念性(1)，2024年最新作为一个前端程序员

2024-06-19 08:06:04

302.哆啦A梦动漫主题网页 大学生期末大作业 Web前端网页制作 html5 css js

2024-06-19 08:06:01

【百套源码】HTML5期末大作业 - 各类网页作业源码合集

2024-06-19 08:06:36

JS实现倒计时功能

2024-06-19 08:06:34

基于html小说网站的设计与实现(源码 开题)

2024-06-19 08:06:23

Web实训项目--网页设计（附源码）

2024-06-19 08:06:13

html实现好看的个人介绍，个人主页模板5(附源码)

2024-01-25 11:01:54

HTML黑客帝国字母雨

2024-06-11 09:06:45

每天一篇之HTML(2)

2024-06-19 08:06:26

大家推荐的文章
1

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
2

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
3

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
4

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000
5

jquery实现注册表单验证（仅供参考）

2024-06-07 00:06:411000
6

基于Echarts的高校就业数据可视化管理系统设计与实现（计算机毕业设计源码81461）

2024-05-29 10:05:301000
7

VUE3 Vite Pinia TypeScript项目笔记

2024-05-20 14:05:191000
8

轻松掌握数据库中JSON数据提取：json_extract函数用法详解

2024-05-09 11:05:011000
9

HTML5(六)——Canvas 高级操作

2024-05-09 10:05:191000
10

UE4.27支持HTML5

2024-05-07 13:05:261000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！