Java web应用 开发与实践

环境配置

intelij idea 2020.2 创建Java web项目

创建java web项目,配置tomcat

HTML应用

掌握HTML表单和表单元素的使用

基础知识:
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
需求:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
<form action="http://localhost:63342/" method="get">
    <h1 align="center"><font color="red" size="7"><b>用户注册</b></font></h1>
<table align="center">
    <tr>
        <td align="right"> 用户名:</td>
        <td><input type="text" name="username">用户名由3-5个字符组成</td>
    </tr>
    <tr>
        <td align="right">密码:</td>
        <td> <input type="password" name="password">请输入8-12位密码</td>
    </tr>
    <tr>
        <td align="right"> 确认密码:</td>
        <td><input type="password" name="repassword">两次密码不一致</td>
    </tr>
    <tr>
        <td align="right">Email:</td>
        <td><input type="email" name="email">格式示例:XXXXXXX@163.com</td>
    </tr>
    <tr>
        <td align="right"> 手机号码:</td>
        <td> <input type="text" name="phoneNUmber">格式示例:12803780000</td>
    </tr>
    <tr>
        <td align="right"> 真实姓名:</td>
        <td><input type="text" name="realname">由2-5个中文组成</td>
    </tr>
    <tr>
        <td align="right"> 省份:</td>
        <td>
            <select name="province">
                <option>--请选择--</option>
                <option value="河南">河南</option>
                <option value="黑龙江">黑龙江</option>
                <option value="河北">河北</option>
                <option value="海南">海南</option>
            </select>请选择省份
        </td>
    </tr>
    <tr>
        <td align="right"> 技术方向:</td>
        <td>
            <input type="radio" name="direction" value="Java">Java<input type="radio" name="direction" value=".Net">.Net
            <input type="radio" name="direction" value="PHP">PHP<input type="radio" name="direction" value=网页"">网页
            <input type="radio" name="direction" value="IOS">IOS<input type="radio" name="direction" value="Android">Android
        </td>
    </tr>
    <tr>
        <td></td>
        <td align="center"><input type="submit" value="注册">&nbsp;<input type="reset" value="重置"></td>

    </tr>
</table>
</form>
</body>
</html>

实现校验功能

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <script>
        //动态注册事件
        window.onload=function (){
            //获取标签对象
            var username=document.getElementById("userName");
            var password=document.getElementById("password");
            var repassword=document.getElementById("repassword");
            var realname=document.getElementById("realname");
            var formobj=document.getElementById("form01");

            var ptext;
            //验证合法性
            function username_verify(){
                var usernameText=username.value;
                //验证合法
                var usernameSpan=document.getElementById("usernameSpan");
                var patt=/^[\w\W]{3,5}$/;
                if(patt.test(usernameText)){
                    usernameSpan.style.color="green";
                    return true;
                }
                else {
                    usernameSpan.style.color="red";
                    return false;
                }
            }
            function password_verify(){
                var passwordText=password.value;
                ptext=passwordText;
                var passwordSpan=document.getElementById("passwordSpan");
                var patt=/^[\w\W]{8,12}$/;
                if(patt.test(passwordText)){
                    passwordSpan.style.color="green";
                    return true;
                }
                else{
                    passwordSpan.style.color="red";
                    return false;
                }
            }
            function repassword_verify(){
                var repasswordText=repassword.value;
                var repasswordSpan=document.getElementById("repasswordSpan");
                if(repasswordText==ptext){
                    repasswordSpan.style.color="green";
                    repasswordSpan.innerHTML="两次密码一致"
                    return true;
                }
                else{
                    repasswordSpan.style.color="red";
                    repasswordSpan.innerHTML="两次密码不一致";
                    return false;
                }
            }
            function realname_verify(){
                var realnameText=realname.value;
                var realnameSpan=document.getElementById("realnameSpan");
                var patt=/^[\u4e00-\u9fa5]{2,5}$/;
                if(patt.test(realnameText)){
                    realnameSpan.style.color="green";
                    return true;
                }
                else{
                    realnameSpan.style.color="red";
                    return false;
                }
            }
            //通过标签对象,事件名=function(){}
            username.onblur=function (){
                username_verify();
            }
            password.onblur=function (){
               password_verify();
            }
            repassword.onblur=function (){
               repassword_verify();
            }
            realname.onblur=function (){
               realname_verify();
            }
            formobj.onsubmit=function (){
                if(username_verify() && password_verify() && repassword_verify() && realname_verify()){
                    return true;
                }
                else{
                    return false;
                }
            }
        }
    </script>
</head>
<body>

<form action="http://localhost:8080/" method="get" id="form01" >
    <h1 align="center"><font color="red" size="7"><b>用户注册</b></font></h1>
<table align="center">
    <tr>
        <td align="right"> 用户名:</td>
        <td><input type="text" name="username" id="userName" value=""><span id="usernameSpan">用户名由3-5个字符组成</span></td>
    </tr>
    <tr>
        <td align="right">密码:</td>
        <td> <input type="password" name="password" id="password"><span id="passwordSpan">请输入8-12位密码</span> </td>
    </tr>
    <tr>
        <td align="right"> 确认密码:</td>
        <td><input type="password" name="repassword" id="repassword"><span id="repasswordSpan">两次密码不一致</span> </td>
    </tr>
    <tr>
        <td align="right">Email:</td>
        <td><input type="email" name="email">格式示例:XXXXXXX@163.com</td>
    </tr>
    <tr>
        <td align="right"> 手机号码:</td>
        <td> <input type="text" name="phoneNUmber">格式示例:12803780000</td>
    </tr>
    <tr>
        <td align="right"> 真实姓名:</td>
        <td><input type="text" name="realname" id="realname"><span id="realnameSpan">2-5个中文组成</span> </td>
    </tr>
    <tr>
        <td align="right"> 省份:</td>
        <td>
            <select name="province">
                <option>--请选择--</option>
                <option value="河南">河南</option>
                <option value="黑龙江">黑龙江</option>
                <option value="河北">河北</option>
                <option value="海南">海南</option>
            </select>请选择省份
        </td>
    </tr>
    <tr>
        <td align="right"> 技术方向:</td>
        <td>
            <input type="radio" name="direction" value="Java">Java<input type="radio" name="direction" value=".Net">.Net
            <input type="radio" name="direction" value="PHP">PHP<input type="radio" name="direction" value=网页"">网页
            <input type="radio" name="direction" value="IOS">IOS<input type="radio" name="direction" value="Android">Android
        </td>
    </tr>
    <tr>
        <td></td>
        <td align="center"><input type="submit" value="注册">&nbsp;<input type="reset" value="重置"></td>

    </tr>
</table>

</form>

</body>
</html>

JSP 应用

jsp内置对象的方法不能解析,tomcat调试问题

  • 第一个开始找到的是要从tomcat那儿导入jar包,但是九个内置对象中session的不能用,后来改从maven仓库下载。
    idea:file–project structure --liabraries–添加
    https://mvnrepository.com/ 下载包,点里面的【jar 文件大小】标签下载
  • tomcat调试:配置好后先在右上角把tomcat服务器启动起来,然后右键run要跑的代码。

基础知识:

页面结构,编译指令,动作指令,内置对象
参考:jsp页面跳转
jsp实现表单提交
课件

需求

在这里插入图片描述
Login.jsp

<%--
  Created by IntelliJ IDEA.
  User: 11759
  Date: 2020/10/9
  Time: 21:11
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="verify.jsp" method="get">
    <table align="center">
        <tr>
            <td align="right">用户:</td>
            <td><input type="text" name="username"></td>
        </tr>
        <tr>
            <td align="right">密码:</td>
            <td> <input type="password" name="password"></td>
        </tr>
        <tr>
            <td align="center"><input type="submit" value="提交查询">
        </tr>
    </table>
</form>
</body>
</html>

verify.jsp

<%@ page import="javax.servlet.http.*" %><%--
  Created by IntelliJ IDEA.
  User: 11759
  Date: 2020/10/9
  Time: 21:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>Title</title>
</head>
<body>
<%
    request.setCharacterEncoding("utf-8");

    String username = request.getParameter("username");
    String pwd = request.getParameter("password");
    String rightpwd="123456";
    if((!"".equals(username))&&rightpwd.equals(pwd)){
        session.setAttribute("username", username);
        request.getRequestDispatcher("greet.jsp").forward(request, response);
    }
    else{
        response.sendRedirect("Login.jsp");
    }
%>
</body>
</html>

greet.jsp

<%--
  Created by IntelliJ IDEA.
  User: 11759
  Date: 2020/10/9
  Time: 23:57
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<% request.setCharacterEncoding("utf-8");%>
"欢迎,<%= session.getAttribute("username")%>
</body>
</html>

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页