使用IDEA学习JSP代码第027课

最新推荐文章于 2023-11-22 10:39:52 发布

虾米大王

最新推荐文章于 2023-11-22 10:39:52 发布

阅读量137

点赞数

分类专栏： Java 文章标签： intellij-idea 学习 javascript

本文链接：https://blog.csdn.net/modern358/article/details/125193092

版权

Java 专栏收录该内容

1297 篇文章 5 订阅

订阅专栏

new394.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <style type="text/css">
        #div1{
            border: 1px solid red;
            width: 200px;
            height: 200px;
            background-color: #cccccc;
            margin: 50px auto;
        }

        #div2{
            border: 1px solid black;
            width: 350px;
            height: 350px;
            background-color: #666666;

        }
    </style>
    <script type="text/javascript">
        $(function () {
           var $div1 = $("#div1");
           var $div2 = $("#div2");
           $div1.bind("mouseover mouseout mousemove",function (event) {
              if(event.type == "mouseover")
              {
                  $div2.show();
              }
              else  if(event.type == "mouseout")
              {
                  $div2.hide();
              }
              else if(event.type == "mousemove")
              {
                  $div2.offset({
                      left: event.pageX + 15,
                      top: event.pageY + 15
                  });
              }

           });
        });
    </script>


</head>
<body>
    <div id="div1">&nbsp;</div>
    <div id="div2">&nbsp;</div>
</body>
</html>

new395.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>bootstrap + jsp 的使用</title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>

    <style type="text/css">
        *,html{
            margin: 0;
            padding: 0;
        }

        .container-fluid{
            padding: 0;
        }

        .top-bar{
            height: 150px;
            width: 100%;
            background-color: white;
        }

        .middle-bar{
            width: 100%;
            height: 560px;
            background-color: #3e8f3e;
        }

        .middle-bar #span1{
            color: #fefefe;
            font-size: 50px;
            display:inline-block;
            padding-top: 260px;
            padding-left: 220px;

        }

        #errorMsg{
            color: red;
            font-size: 21px;
            padding-left: 40px;
        }

    </style>
    <script type="text/javascript">
        $(function () {
           $("#btn_reg").click(function () {
               //验证用户名
               var userName = $("#userName").val();
               var userNamePattern = /^\w{5,12}$/;
               if(!userNamePattern.test(userName))
               {
                   $("#errorMsg").text("用户名不合法");
                   return false;
               }
               //验证密码
               var pwd = $("#pwd").val();
               var pwdPattern = /^\w{5,12}$/;
               if(!pwdPattern.test(pwd))
               {
                   $("#errorMsg").text("密码不合法");
                   return false;
               }
               //确认密码与密码一致
               var pwd2 = $("#pwd2").val();
               if(pwd2 !== pwd)
               {
                   $("#errorMsg").text("密码与确认密码不一致");
                   return false;
               }

               $("#errorMsg").text("");
               alert("注册成功");
           });
        });
    </script>


</head>
<body>
    <div class="container-fluid">
        <div class="top-bar">

        </div>
        <div class="middle-bar">
            <div class="col-md-4 col-md-offset-1">
                <span id="span1">欢迎注册</span>
            </div>
            <div class="col-md-4 col-md-offset-1">
                <h2>用户注册</h2>
                <br>
                <form action="http://localhost:8080">
                    <div class="form-group">
                        <label for="userName">用户名：</label>
                        <input type="text" class="form-control" id="userName" placeholder="用户名">
                    </div>
                    <div class="form-group">
                        <label for="pwd">密码：</label>
                        <input type="password" class="form-control" id="pwd" placeholder="密码">
                    </div>
                    <div class="form-group">
                        <label for="pwd2">确认密码：</label>
                        <input type="password" class="form-control" id="pwd2" placeholder="确认密码">
                    </div>
                    <br>
                    <button type="submit" class="btn btn-default" id="btn_reg">注册</button>
                    <span id="errorMsg"></span>
                </form>

            </div>
        </div>

    </div>
</body>
</html>

new396.jsp

<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="../other/boot/css/bootstrap.min.css">
    <script type="text/javascript" src="../other/jQuery/jQuery-3.4.1.js"></script>
    <script type="text/javascript" src="../other/boot/js/bootstrap.min.js"></script>



</head>
<body>
    <%!
        private Connection conn = null;
        private Statement stmt = null;
        private ResultSet rs  = null;

        public void getNewsList()
        {
            try
            {
                Class.forName("com.mysql.jdbc.Driver");
                conn = DriverManager.getConnection("jdbc:mysql://localhost:3306/test","root","mysql123");
                stmt = conn.createStatement();
                rs = stmt.executeQuery("select a,b,c from table1");
                while (rs.next())
                {
                    int id = rs.getInt("a");
                    String title = rs.getString("b");
                    String summary = rs.getString("c");
                    String content = rs.getString("content");
                    String author = rs.getString("author");
                    Timestamp time = rs.getTimestamp("createdate");
                    System.out.println(id + "\t" + title + "\t" + summary + "\t" + content + "\t" + author + "\t" + time);
                    //以上均为模拟代码，供参考
                }

            }
            catch (SQLException | ClassNotFoundException e)
            {
                e.printStackTrace();
            }
            finally
            {
                try
                {
                    if(rs != null)
                    {
                        rs.close();
                    }

                    if(stmt != null)
                    {
                        stmt.close();
                    }

                    if(conn != null)
                    {
                        conn.close();
                    }
                }
                catch (SQLException e)
                {
                    e.printStackTrace();
                }
            }


        }
    %>

    <%
        getNewsList(); //表没有建立，提示错误
    %>
</body>
</html>