2020-10-27

1.编写一登陆界面,账户密码正确可进入,错误则登陆失败,三秒后返回登陆页面。
代码如下:
login.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>登录页面</title>
    <%--引入css文件和js文件--%>
    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.bundle.js"></script>

    <style>
        .container{
            width: 20%;
            height: 20%;
            margin-top: 10%;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <form role="form" method="post" action="index.jsp">
                <h3 style="text-align: center">登录</h3>
                <div class="form-group">
                    <label for="exampleInputEmail1">用户名:</label><input type="text" name="username" class="form-control" id="exampleInputEmail1" />
                </div>
                <div class="form-group">
                    <label for="exampleInputPassword1">密码:</label><input type="password" name="password" class="form-control" id="exampleInputPassword1" />
                </div>
                <button type="submit" style="width: 100%" class="btn btn-info">提交</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

在这里插入图片描述

该代码在获得用户提交的数据后,将数据提交到index.jsp
index.jsp:

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
  <title>个人中心</title>
  <%--引入css文件和js文件--%>
  <link rel="stylesheet" href="css/bootstrap.css">

  <script src="js/jquery.min.js"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/bootstrap.bundle.js"></script>
  <style>
    .container{
      margin-top:20px;
    }
  </style>
</head>
<body>
<div class="container">
  <div class="row clearfix">
    <div class="col-md-12 column">
      <h3 style='text-align:center'>欢迎来到个人主页!</h3>
      <a href="#modal-container-addUser" role="button" class="btn" data-toggle="modal">添加用户</a>
      <table class="table table-striped">
        <thead>
        <th>ID</th>
        <th>用户名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>操作</th>
        </thead>
        <tbody>

        <%
          //加载数据库驱动
          Class.forName("com.mysql.jdbc.Driver");
          //建立数据库连接
          String url="jdbc:mysql://localhost:3306/book";
          Connection connection= DriverManager.getConnection(url,"root","root");

          String sql ="select * from user";

          PreparedStatement pstm =connection.prepareStatement(sql);
          ResultSet rs=pstm.executeQuery();


        %>
<%
            while (rs.next()){
              out.print("<tr>");
              out.print(
                      "<td>"+rs.getInt("id")+"</td>"
                              +"<td>"+rs.getString("username")+"</td>"
                              +"<td>"+rs.getString("gender")+"</td>"
                              +"<td>"+rs.getString("age")+"</td>"
                              +"<td><a href='delete.jsp?id="+rs.getInt("id")+"'>删除</a>"
                              +"&nbsp;<a href='edit.jsp?id="+rs.getInt("id")+"'>编辑</a></td>");
              out.print("</tr>");
            }

        %>
        </tbody>
      </table>

      <div class="modal fade" id="modal-container-addUser" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel">添加用户</h4>
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            </div>
            <form role="form" method="post" action="add.jsp">
              <div class="modal-body">
                <div class="form-group">
                  <label>用户名:</label><input type="text" name="username" class="form-control" />
                </div>
                <div class="form-group">
                  <label>密码:</label><input type="password" name="password" class="form-control"/>
                </div>
                <div class="form-group">
                  <label>性别:</label><input type="text" name="gender" class="form-control"/>
                </div>
                <div class="form-group">
                  <label>年龄:</label><input type="text" name="age" class="form-control"/>
                </div>
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="submit" class="btn btn-primary">添加</button>
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

</body>
</html>

index.jsp中,若判断用户登陆错误,则提示登录失败,三秒后返回登陆界面在这里插入图片描述
如果判断用户登录正确,则进入到home.jsp

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>个人中心</title>
    <%--引入css文件和js文件--%>
    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.bundle.js"></script>
    <style>
        .container{
            margin-top:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clear fix">
        <div class="col-md-12 column">
            <h3 style='text-align:center'>欢迎来到个人主页!</h3>
            <a href="#modal-container-addUser" role="button" class="btn" data-toggle="modal">添加用户</a>
            <table class="table table-striped">
                <thead>
                <th>ID</th>
                <th>用户名</th>
                <th>性别</th>
                <th>年龄</th>
                <th>操作</th>
                </thead>
                <tbody>

                <%
                    if(session.getAttribute("username") == null){
                        //表示尚未登录
                        out.print("你尚未登录,3秒之后跳转登录页面");
                        response.setHeader("refresh","3;url=login.jsp");
                    }else{

                        //加载数据库驱动
                        Class.forName("com.mysql.jdbc.Driver");

                        //建立数据库连接
                        String url = "jdbc:mysql://localhost:3306/book"; //数据库连接地址
                        Connection connection = DriverManager.getConnection(url,"root","root"); //第一个root为数据库的用户名  第二个root为数据库的密码

                        String sql = "select * from user"; //在PreparedStatement 中使用问好代替实际参数
                        PreparedStatement ps = connection.prepareStatement(sql);

                        ResultSet rs = ps.executeQuery();

                        while (rs.next()){
                            out.print("<tr>");
                            out.print(
                                    "<td>"+rs.getInt("id")+"</td>"
                                            +"<td>"+rs.getString("username")+"</td>"
                                            +"<td>"+rs.getString("gender")+"</td>"
                                            +"<td>"+rs.getString("age")+"</td>"
                                            +"<td><a href='delete.jsp?id="+rs.getInt("id")+"'>删除</a>"
                                            +"&nbsp;<a href='edit.jsp?id="+rs.getInt("id")+"'>编辑</a></td>");
                            out.print("</tr>");
                        }
                    }
                %>
                </tbody>
            </table>

            <div class="modal fade" id="modal-container-addUser" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h4 class="modal-title" id="myModalLabel">添加用户</h4>
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                        </div>
                        <form role="form" method="post" action="add.jsp">
                            <div class="modal-body">
                                <div class="form-group">
                                    <label>用户名:</label><input type="text" name="username" class="form-control" />
                                </div>
                                <div class="form-group">
                                    <label>密码:</label><input type="password" name="password" class="form-control"/>
                                </div>
                                <div class="form-group">
                                    <label>性别:</label><input type="text" name="gender" class="form-control"/>
                                </div>
                                <div class="form-group">
                                    <label>年龄:</label><input type="text" name="age" class="form-control"/>
                                </div>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                <button type="submit" class="btn btn-primary">添加</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</body>
</html>

在这里插入图片描述
3.添加用户
点击添加用户后弹出弹窗
代码如下
add.jsp:

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.SQLException" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="user" class="xxxx.User" scope="request"></jsp:useBean>
<jsp:setProperty name="user" property="*"></jsp:setProperty>
<%
    //加载驱动
    Class.forName("com.mysql.jdbc.Driver");

    //建立连接
    String url ="jdbc:mysql://localhost:3306/book";
    Connection connection = DriverManager.getConnection(url,"root","root");

    //关闭自动提交


    //sql语句模板
    String sql = "insert into user (username,password,gender,age,id) value (?,?,?,?,?)";
    //创建preparedStatement对象
    PreparedStatement ps =connection.prepareStatement(sql);

    ps.setString(1,user.getUsername());
    ps.setString(2,user.getPassword());
    ps.setInt(3,user.getGender());
    ps.setInt(4,user.getAge());
    ps.setInt(5,user.getId());


    int count=ps.executeUpdate();
    if(count > 0){
        out.print("添加成功");
    }else{
        out.print("添加失败");
    }
    response.setHeader("refresh","3;url=home.jsp");
%>

添加成功在这里插入图片描述
添加前
在这里插入图片描述
添加后
在这里插入图片描述

4.删除用户
删除某一行数据,代码如下
delete.jsp:

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %><%--
  Created by IntelliJ IDEA.
  User: 你
  Date: 2020/10/16
  Time: 15:31
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    //加载数据库驱动
    Class.forName("com.mysql.jdbc.Driver");

    //建立数据库连接
    String url = "jdbc:mysql://localhost:3306/book"; //数据库连接地址
    Connection connection = DriverManager.getConnection(url,"root","root"); //第一个root为数据库的用户名  第二个root为数据库的密码

    String sql = "delete from user where id = ?"; //在PreparedStatement 中使用问好代替实际参数
    PreparedStatement ps = connection.prepareStatement(sql);

    int id = Integer.parseInt(request.getParameter("id"));

    ps.setInt(1,id);

    int count = ps.executeUpdate();

    if(count > 0){
        out.print("删除成功");
    }else{
        out.print("删除失败");
    }

%>

删除成功
在这里插入图片描述
删除前
在这里插入图片描述
删除后
在这里插入图片描述

5.修改用户数据
代码如下:
edit.jsp:

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import="xxxx.User" %><%--
  Created by IntelliJ IDEA.
  User: 你
  Date: 2020/10/20
  Time: 14:05
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>编辑页面</title>
    <%--引入css文件和js文件--%>
    <link rel="stylesheet" href="css/bootstrap.css">

    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/bootstrap.bundle.js"></script>

    <style>
        .container{
            width: 50%;
            margin-top:20px;
        }
    </style>
</head>
<body>
<div class="container">
    <div class="row clear fix">
        <div class="col-md-12 column">
            <h3 style="text-align: center">编辑页面</h3>
            <form method="post" action="update.jsp">
                <%
                    int id = Integer.parseInt(request.getParameter("id"));

                    //加载数据库驱动
                    Class.forName("com.mysql.jdbc.Driver");

                    //建立数据库连接
                    String url = "jdbc:mysql://localhost:3306/book"; //数据库连接地址
                    Connection connection = DriverManager.getConnection(url,"root","root"); //第一个root为数据库的用户名  第二个root为数据库的密码

                    String sql = "select * from user where id = ?"; //在PreparedStatement 中使用问好代替实际参数
                    PreparedStatement ps = connection.prepareStatement(sql);

                    ps.setInt(1,id);

                    ResultSet rs = ps.executeQuery();

                    while (rs.next()){
                        out.print("<input type='hidden' name='id' value="+rs.getString("id")+">");
                        out.print("用户名:<input type='text' class='form-control' name='username' value="+rs.getString("username")+"><br>");
                        out.print("密码:<input type='text' class='form-control' name='password' value="+rs.getString("password")+"><br>");
                        out.print("性别:<input type='text' class='form-control' name='gender' value="+rs.getString("gender")+"><br>");
                        out.print("年龄:<input type='text' class='form-control' name='age' value="+rs.getString("age")+"><br>");
                    }
                %>
                <button type="submit" style="width: 100%" class="btn btn-info">提交</button>
            </form>
        </div>
    </div>
</div>
</body>
</html>

将修改的数据提交到update.jsp中
成功修改后返回home
update.jsp:

<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.PreparedStatement" %><%--
  Created by IntelliJ IDEA.
  User: cc
  Date: 2020/10/20
  Time: 14:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<jsp:useBean id="user" class="xxxx.User" scope="request"></jsp:useBean>
<jsp:setProperty name="user" property="*"></jsp:setProperty>
<%
    //加载驱动
    Class.forName("com.mysql.jdbc.Driver");

    //建立连接
    String url ="jdbc:mysql://localhost:3306/book";
    Connection connection = DriverManager.getConnection(url,"root","root");

    //sql语句模板
    String sql = "update user set username = ? ,password = ? ,gender = ?,age = ? where id = ?";
    //创建preparedStatement对象
    PreparedStatement ps =connection.prepareStatement(sql);

    ps.setString(1,user.getUsername());
    ps.setString(2,user.getPassword());
    ps.setInt(3,user.getGender());
    ps.setInt(4,user.getAge());
    ps.setInt(5,user.getId());

    int count = ps.executeUpdate();
    if(count > 0){
        out.print("修改成功");
    }else{
        out.print("修改失败");
    }
    response.setHeader("refresh","3;url=home.jsp");
%>

编辑成功
在这里插入图片描述

编辑前
在这里插入图片描述
编辑后
在这里插入图片描述

©️2020 CSDN 皮肤主题: 游动-白 设计师:上身试试 返回首页