Java全栈（四）web网页技术：14.书城项目实战三：EL和JSTL练习

最新推荐文章于 2023-01-15 13:36:56 发布
最新推荐文章于 2023-01-15 13:36:56 发布
阅读量713 收藏 2
点赞数
分类专栏： JAVA系统学习 文章标签： java jsp
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ouyicnm/article/details/122159396
版权

1.需求：

前面的项目练习中，我们完成了用户登录、注册两个功能。现在我们在前面的基础上进行优化，将JSP代码替换为EL和JSTL代码。

  • 添加JSTL相关的jar包到项目
    在这里插入图片描述
    在这里插入图片描述

在这里插入图片描述

  • 修改login.jsp文件，将jsp代码改为EL或JSTL
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
  <head>
    <%@ include file="/WEB-INF/public_jsp/base.jsp"%>
    <!--base href="http://localhost:8080/bookStore2/"/-->
    <meta charset="UTF-8" />
    <title>尚硅谷会员登录页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <!--script type="text/javascript" src="static/script/jquery-1.7.2.js"></script-->
    <script type="text/javascript" src="static/script/login.js"></script>
  </head>
  <body>
    <div id="login_header">
      <a href="index.jsp">
        <img class="logo_img" alt="" src="static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div id="l_content">
        <span class="login_word">欢迎登录</span>
      </div>

      <div id="content">
        <div class="login_form">
          <div class="login_box">
            <div class="tit">
              <h1>尚硅谷会员</h1>
            </div>
            <div class="msg_cont">
              <b></b>
              <!--根据request域中是否由msg，来判断要显示的内容-->
<!--          <span class="errorMsg"><%=request.getAttribute("msg")==null?"请输入用户名密码":request.getAttribute("msg")%></span>-->
              <span class="errorMsg">${empty requestScope.msg?"请输入用户名密码":requestScope.msg}</span> <!--使用EL表达式--> <!--使用EL表达式-->

            </div>
            <div class="form">
              <form action="UserServlet">
                <input type="hidden" name="method" value="login"/> <!--用来标识当前请求-->
                <label>用户名称：</label>
                <input
                  class="itxt"
                  type="text"
                  placeholder="请输入用户名"
                  autocomplete="off"
                  tabindex="1"
                  name="username"
                  id="username"
                />
                <br />
                <br />
                <label>用户密码：</label>
                <input
                  class="itxt"
                  type="password"
                  placeholder="请输入密码"
                  autocomplete="off"
                  tabindex="1"
                  name="password"
                  id="password"
                />
                <br />
                <br />
                <input type="submit" value="登录" id="sub_btn" />
              </form>
              <div class="tit">
                <a id = "submit" href="pages/user/regist.jsp">立即注册</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </body>
</html>
  • 修改register.jsp文件，将jsp代码改为EL或JSTL
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
  <head>
    <%@ include file="/WEB-INF/public_jsp/base.jsp"%>
    <meta charset="UTF-8" />
    <title>尚硅谷会员注册页面</title>
    <link type="text/css" rel="stylesheet" href="static/css/style.css" />
    <link rel="stylesheet" href="static/css/register.css" />
    <style type="text/css">
      .login_form {
        height: 420px;
        margin-top: 25px;
      }
    </style>
    <%@ include file="/static/script/regist.js.jsp"%>
    <!--script type="text/javascript" src="static/script/regist.js.jsp"></script-->
  </head>
  <body>
    <div id="login_header">
      <a href="index.jsp">
        <img class="logo_img" alt="" src="static/img/logo.gif" />
      </a>
    </div>

    <div class="login_banner">
      <div class="register_form">
        <h1>注册尚硅谷会员</h1>
        <form action="UserServlet">
          <input type="hidden" name="method" value="register"/>
          <div class="form-item">
            <div>
              <label>用户名称:</label>
              <!--根据请求参数中是否存在值，来判断是否需要回显-->
<%--          <input id="username" value="<%=request.getParameter("username")==null?"":request.getParameter("username")%>" type="text" name="username" placeholder="请输入用户名"/>--%>
              <input id="username" value="${param.username}" type="text" name="username" placeholder="请输入用户名"/>
            </div>
            <!--根据request域中是否有错误提示，来判断使用哪个内容-->
            <span class="errMess" id="userErrMess">
<%--          <%=request.getAttribute("msg")==null?"用户名、密码：只能是字母（大小写）、数字、_。6-18位":request.getAttribute("msg")%>--%>
              ${empty requestScope.msg?"用户名、密码：只能是字母（大小写）、数字、_。6-18位":requestScope.msg}
            </span>
          </div>
          <div class="form-item">
            <div>
              <label>用户密码:</label>
<%--          <input type="password" value="<%=request.getParameter("password")==null?"":request.getParameter("password")%>" id="password" name="password" placeholder="请输入密码" />--%>
              <input type="password" value="${param.password}" id="password" name="password" placeholder="请输入密码" />
            </div>
            <span class="errMess" id="passErrMess">只能是字母（大小写）、数字、_。6-18位</span>
          </div>
          <div class="form-item">
            <div>
              <label>确认密码:</label>
<%--          <input type="password" value="<%=request.getParameter("rePassword")==null?"":request.getParameter("rePpassword")%>" id="rePassword" name="rePassword" placeholder="请输入确认密码" />--%>
              <input type="password" value="${param.rePassword}" id="rePassword" name="rePassword" placeholder="请输入确认密码" />
            </div>
            <span class="errMess" id="rePasswordErrMess">密码两次输入不一致</span>
          </div>
          <div class="form-item">
            <div>
              <label>用户邮箱:</label>
<%--          <input type="text" value="<%=request.getParameter("email")==null?"":request.getParameter("email")%>" id="email" name="email" placeholder="请输入邮箱" />--%>
              <input type="text" value="${param.email}" id="email" name="email" placeholder="请输入邮箱" />
            </div>
            <span class="errMess" id="emailErrMess">请输入正确的邮箱格式</span>
          </div>
          <div class="form-item">
            <div>
              <label>验证码:</label>
              <div class="verify">
                <input type="text" id="verify" placeholder="" />
                <img src="static/img/code.bmp" alt="" />
              </div>
            </div>
            <span class="errMess" id="verifyErrMess">请输入正确的验证码</span>
          </div>
          <button class="btn" id="register">注册</button>
        </form>
      </div>
    </div>
    <div id="bottom">
      <span>
        尚硅谷书城.Copyright &copy;2015
      </span>
    </div>
  </body>
</html>
  • 修改register.js.jsp文件，将jsp内容替换为EL和JSTL
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<script type="text/javascript">
    $(function () {

        /**
         * 校验request域中是否有msg属性
         */
<%--       <%
            Object msg = request.getAttribute("msg");
            if (msg == null){
                // request域中不存在对应错误信息
            }else {
                // request域中存在对应错误信息
        %>
        $("#userErrMess").css("visibility", "visible"); // 显示对应错误信息
        <%}%>
--%>
        <%--使用EL和JSTL来代替jsp--%>
        <c:if test="${!empty requestScope.msg}">
            $("#userErrMess").css("visibility", "visible"); // 显示对应错误信息
        </c:if>


        /**
         * 用户名校验
         */
        function checkUsername() {
            var reg = /^[a-zA-Z0-9_]{6,18}$/;
            var userVaule = $("#username").val();
            if (reg.test(userVaule) == false) {
                $("#userErrMess").text("用户名、密码：只能是字母（大小写）、数字、_。6-18位").css("visibility", "visible");
                return false;
            } else {
                $("#userErrMess").css("visibility", "hidden");
            }
        }

        /**
         * 密码校验
         */
        function checkPassword() {
            var reg = /^[a-zA-Z0-9_]{6,18}$/;
            var passwordValue = $("#password").val();
            if (reg.test(passwordValue) == false) {
                $("#passErrMess").css("visibility", "visible");
                return false;
            } else {
                $("#passErrMess").css("visibility", "hidden");
            }
        }


        /**
         * 确认密码
         */
        function checkrePassword() {
            var passwordValue = $("#password").val();
            var rePasswordValue = $("#rePassword").val();
            if (passwordValue != rePasswordValue) {
                $("#rePasswordErrMess").css("visibility", "visible");
                return false;
            } else {
                $("#rePasswordErrMess").css("visibility", "hidden");
            }
        }

        /**
         * 检查邮箱
         */
        function checkEmail(){
            var reg = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
            var emailValue = $("#email").val();
            if (reg.test(emailValue) == false){
                $("#emailErrMess").css("visibility", "visible");
                return false;
            }else {
                $("#emailErrMess").css("visibility", "hidden");
            }
        }

        function checkVerify(){
            var verifyValue = $("#verify").val();
            if (verifyValue == ""){
                $("#verifyErrMess").css("visibility", "visible");
                return false;
            }else {
                $("#verifyErrMess").css("visibility", "hidden");
            }
        }

        // 注册栏内容改变后校验
        $("#username").change(checkUsername);
        $("#password").change(checkPassword);
        $("#rePassword").change(checkrePassword);
        $("#email").change(checkEmail);
        $("#verify").change(checkVerify);

        // 注册按钮后校验
        $("#register").click(checkUsername);
        $("#register").click(checkPassword);
        $("#register").click(checkrePassword);
        $("#register").click(checkEmail);
        $("#register").click(checkVerify);
    })
</script>
new nm个对象
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
blog.rar_JAVA WEB基础_JSTL_java se项目_jsp mysql blog_staruml
09-14
这个项目是在Java培训班同学，学习完成Java SE、Java Web基础内容后，由刘老师带领同学手把手开发的第一个Java Web项目，项目中主要使用了：Java SE、JSP、Servlet、Tomcat、MySQL、PowerDesigner、starUML、Dreamweaver、数据库连接池、Commons DbUtils、JSTL、Displaytag、HTML、Javascript、CSS等技术和工具。适用有Java SE、Java Web开发的基础的同学学习。
EL和JSTL的学习
weixin_42454678的博客
08-24 221
1.使用传统方式在jsp中获取作用域数据 (1)使用传统方式在jsp中获取作用域的数据有什么不方便的地方? 1、书写比较繁琐 2、需要导包 3、需要强转 2.表达式的概念介绍和基本语法 (1)视频中在jsp中使用脚本段语句获取作用域中的数据的缺陷是？ 1、书写比较繁琐 2、需要导包 3、需要强转 (2)简述El表达式的作用？ 作用：让 jsp 书写起来更加的方便。简化在 jsp 中获取作用域或者请...
MyBatis 登录改进
q19973643718的博客
10-05 164
改进jsp页面 思路： 用户登录后，显示用户名信息和登出等相关操作 例如： 在原jsp页面引入其他jsp内容 方法： <%@ include file="relativeURI"%> <jsp:include page="header.jsp"/> 在login.jsp页面引入header.jsp页面 login.jsp前端代码： <!--引入头部--> <div id="header"> <%@include file="header.js
WEB-JSP&EL&JSTL
weixin_45156610的博客
07-13 410
day12-JSP&EL&JSTL 学习目标 -[ ] 了解JSP的作用 -[ ] jsp常用内置对象 -[ ] EL表达式学习 -[ ] JSTL标签库学习 第一章 JSP 1、概述 1.1 JSP引入 ​ 在前几天的登录案例中，登录失败后为了能够响应登录的错误信息。我们特意创建了一个LoginErrorServlet用来动态地拼接错误信息。 【代码如下】 LoginError...
el&jstl
Bulid_Evolto的博客
08-24 1889
09.el表达式介绍与作用 jsp的问题 ​ 页面上太多脚本代码,全都是<%或%>,导致页面很乱,由于我们用的最多就是脚本代码片段与脚本表达式,所以就需要将这些脚本使用更好的技术替代 脚本表达式------->使用el替代脚本代码片段----->使用jstl替代 目标 使用el代替页面上的脚本表达式，简化输出 el使用格式 Expression Language； ${ 域...
【javaweb：el&jstl】通过模拟用户登录，使网页"登录""测试"部分变成“用户”和“退出”
像雾像雨又像风_的博客
01-30 2037
1.模拟用户登录部分，访问一个jsp，在jsp中嵌入java代码，然后再session域中存入user对象， 表示用户已经登录了。代码如下： <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> Insert title here <% /****模
El表达式与JSTl实现登录 AJAX搜索提示的实现
qq_62898618的博客
04-17 1294
1.同界面登录的实现 所设计的架包下载 文件json的使用与架包下载密码:40tf JSTL架包下载 文件密码:6dva 1.第一步引入jstl prefix 命名 可随意 <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> 2.通过jstl进行判断 保存的session是否存在 action可加上绝对路径${pageContext.request.contextPath} 不存在时 显示表...
JavaWeb上机实验10 EL和JSTL优化程序
qq_64314976的博客
01-15 229
进入投票页面，可以点击链接查看候选人的基本信息，页面自己设计，可以通过点击【提交】按钮或者明星下面的【投她一票】实现投票。1、现有一个人力资源管理系统，优化系统中的jsp页面，用EL表达式和JSTL替代jsp页面中出现的jsp元素。（3）投票提交后仍然显示投票页面，但相应候选人的得票数增加，如下图。1、掌握JSTL标签库中core标签的使用方法。2、掌握JSTL和EL结合实现jsp页面的优化。2、掌握EL表达式对四大域属性的引用方法。1、掌握EL表达式的使用方法。（1）首页，输入用户名登录。
JSP动态网页设计：第11章 EL与JSTL.ppt
05-19
JSP动态网页设计：第11章 EL与JSTL.ppt
java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion问题解决方法
09-03
主要介绍了java.lang.AbstractMethodError: org.apache.xerces.dom.DocumentImpl.setXmlVersion问题解决方法,导致本文问题的原因是缺少一个xerces.jar jar包,需要的朋友可以参考下
使用EL和JSTL显示查询结果
06-03
使用EL和JSTL，实现从Servlet中获取信息，然后在显示页面显示结果
jstl练习实例，学习JSTL
02-13
综合的JSTL练习实例，JSTL表情的用法
javaProject2TI:Java JPA和JSTL学校项目
07-11
javaProject2TI：媒体库项目练习如果您的项目满足所有基本要求，您将达到 12/20。 如果您进行扩展，您可以获得额外积分。 完成整个项目的截止日期是 2013 年 5 月 26 日（星期日）下午 6 点。 您通过 Toledo 上的...
基于Java+MySQL实现（Web）网上书城项目【100011159】
03-06
关键字：JSP、servlet、Ajax、jstl、JavaScript、注册登录、分页、购物车、增删改查 开发环境：Eclipse、MySQL 5.7、Tomcat 8.0
WEB--EL&JSTL（IDEA版）
xiaohan0010的博客
03-13 198
JSP: 1. 指令 * 作用：用于配置JSP页面，导入资源文件 * 格式： <%@ 指令名称 属性名1=属性值1 属性名2=属性值2 ... %> * 分类： 1. page ： 配置JSP页面的 * contentType：等同于response.setContentType() 1. 设置响应体的mime类型以及字符集 2. 设置当前jsp页...
使用JSP与JavaBean结合JSTL标签，完成图书查询功能
chang_wb的专栏
11-16 3855
1.创建数据库
Day12_JavaWeb——使用EL+JSTL遍历显示图书数据
Android_la的博客
10-06 807
一. 储备知识 在项目中使用EL+JSTL遍历显示图书数据，主要分为两大部分：完成管理员端的增删改查功能；完成用户访问index页面的图书的显示和按照加个查询指定数据的功能。本篇首先讲述第一个功能。 1.1 完成管理员端的增删改查功能 前面设计了一个三层架构来优化Servlet处理请求，所以这次介绍的功能也同样使用三层架构来实现。 变现层：用户交互的内容 book_manager.jsp:提供图...
JSP-07使用EL和JSTL简化JSP
云哥的博客
07-11 523
本文主要介绍：1.EL表达式的使用；2.JSTL标签的使用（标准标间、条件标签、迭代标签）、3.JSTL引用自定义函数。
javaee实验：使用mvc模式 设计一个图书管理系统
wow_awsl_qwq的博客
11-21 6198
太多了把报告粘贴过来了，仅供参考 实习三 EL、JSTL及MVC 一、实习要求与目的 1.掌握标签库的使用 2.掌握EL及JSTL常用标签及方法 3.掌握MVC的编程模式，完成一个完整的信息管理系统 二、实习内容 使用EL、JSTL及MVC完成一个图书管理系统，要求完成图书信息的添加、修改、删除、查询与显示；并添加用户管理功能，只有登录用户才能完成图书的管理操作。 三、扩展 试着使用过滤器作为控制器完成实习内容。 四、实验代码 代码在最下面 工程结构如下图： 这个实验的工程结构中Model是cn.cie.
java.lang.classnotfoundexception: javax.servlet.jsp.jstl.core.looptag
最新发布
03-16
这是一个Java异常，表示找不到javax.servlet.jsp.jstl.core.LoopTag类。这通常是由于缺少相关的JAR文件或类路径配置错误引起的。要解决此问题，您需要确保已正确安装和配置所需的JAR文件，并将类路径设置为正确的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值