Java web应用 开发与实践

已于 2022-02-10 11:33:53 修改
阅读量1.9k 收藏 21
点赞数 4
分类专栏： 课程 文章标签： java 前端 开发语言
于 2020-09-24 19:51:53 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/uchihalyn/article/details/108610400
版权
本文介绍了如何使用HTML创建用户注册表单，并实现简单的校验功能。接着展示了JSP应用中的内置对象使用，包括用户登录、留言系统的实现，以及JDBC连接数据库的基础操作。在开发过程中，还涉及到了Tomcat服务器的配置和调试。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

文章目录

环境配置

java环境配置：jdk和tomcat安装
https://blog.youkuaiyun.com/uchihalyn/article/details/122857132

intelij idea 2020.2 创建Java web项目

创建java web项目，配置tomcat

基础知识

怎么创建包
web中常见错误之404 原始服务器没有找到目标资源的当前表示，或者不愿意公开该目标资源。

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>

留言板

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


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>留言</title>
</head>
<body>

<form action="addMessage.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="text" name="message"></td>
        </tr>
        <tr>
            <td align="center"><input type="submit" value="提交">
        </tr>
    </table>
</form>
</body>
</html>

addMessage.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.util.*" %>
<html>
<head>
    <title>addMessage</title>
</head>
<body>
<%!
    private String getIPAddress(HttpServletRequest request)
    {
        if(request.getHeader("x-forwarded-for") == null)
        {
            return request.getRemoteAddr();
        }
        return request.getHeader("x-forwarded-for");
    }
%>
<%
    String userName = request.getParameter("userName");
    String message = request.getParameter("message");
    String IPAddress = request.getRemoteAddr();
    String str = userName+"@"+IPAddress+"说："+message;

    try{
        List<String> messageList;
        messageList = (List<String>) application.getAttribute("allMessage");
        messageList.add(str);
        application.setAttribute("allMessage",messageList);
    }catch (Exception e)
    {
        List<String> messageList = new ArrayList<>();
        messageList.add(str);
        application.setAttribute("allMessage",messageList);
    }

    request.getRequestDispatcher("show.jsp").forward(request,response);
%>
</body>
</html>

show.jsp


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@page import="java.util.*" %>
<html>
<head>
    <title>addMessage</title>
</head>
<body>
<%!
    private String getIPAddress(HttpServletRequest request)
    {
        if(request.getHeader("x-forwarded-for") == null)
        {
            return request.getRemoteAddr();
        }
        return request.getHeader("x-forwarded-for");
    }
%>
<%
    String userName = request.getParameter("userName");
    String message = request.getParameter("message");
    String IPAddress = request.getRemoteAddr();
    String str = userName+"@"+IPAddress+"说："+message;

    try{
        List<String> messageList;
        messageList = (List<String>) application.getAttribute("allMessage");
        messageList.add(str);
        application.setAttribute("allMessage",messageList);
    }catch (Exception e)
    {
        List<String> messageList = new ArrayList<>();
        messageList.add(str);
        application.setAttribute("allMessage",messageList);
    }

    request.getRequestDispatcher("show.jsp").forward(request,response);
%>
</body>
</html>

JDBC应用

连接数据库：连接mysql
先下载 https://dev.mysql.com/downloads/connector/j/
在这里插入图片描述
解压后把东西放入上述路径

遇到的问题：缺失drive 文件，开始下载失败后来成功（可能的是网络问题），MySQL时区不对，修改时区

评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值