随笔都是学习笔记
随笔仅供参考,为避免笔记中可能出现的错误误导他人,请勿转载。

前端页面代码:

<%--
  Created by IntelliJ IDEA.
  User: CDU_LM
  Date: 2022/6/26
  Time: 11:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
  <head>
    <title>FirstPage</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.2/dist/js/bootstrap.bundle.min.js"></script>
    <style>
      #top{
        position: sticky; /* 相对粘性*/
        top: 0;
        width: 100%;
        height: 5%;
      }
      #bottom{
        position: fixed; /* 绝对固定 */
        bottom: 0;
        width:100%;
        height: 20px;
      }
      #form{
        border: 2px solid blue;
        border-radius: 5px;
      }
    </style>
  </head>
  <body style="height: 1000px; background: ghostwhite;align-content: center;">
  <nav id="top" class="navbar navbar-expand-sm bg-dark navbar-dark">
    <div class="container-fluid">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" href="#">活动</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">链接</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">禁用</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="container-fluid row mt-5 p-5">
    <div class="col-sm-4">
      <!-- 轮播 -->
      <div id="demo1" class="carousel slide" data-bs-ride="carousel">
        <!-- 指标/点 -->
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#demo1" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#demo1" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#demo1" data-bs-slide-to="2"></button>
        </div>

        <!-- 幻灯片/轮播 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="${pageContext.request.contextPath}/img/img.png" alt="Los Angeles" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/img/img.png" alt="Chicago" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/img/img.png" alt="New York" class="d-block w-100">
          </div>
        </div>

        <!-- 左右控件/图标 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo1" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo1" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
    <div id="form" class="col-sm-4 bg-info">
      <%--@elvariable id="user" type="cn.cdulm.entity.User"--%>
      <form:form action="${pageContext.request.contextPath}/form/user" method="post" modelAttribute="user">
        <div class="mb-3 mt-3">
          <label for="id" class="form-label">id:</label>
          <form:input type="text" class="form-control" id="id" placeholder="请输入id" name="id" value="${user.id}" path="id"/><b style="color: red"><form:errors path="id"/></b>
        </div>
        <div class="mb-3">
          <label for="username" class="form-label">username:</label>
          <form:input type="text" class="form-control" id="username" placeholder="请输入username" name="username" value="${user.username}" path="username"/><b style="color: red"><form:errors path="username"/></b>
        </div>
        <div class="mb-3">
          <label for="birthday" class="form-label">birthday:</label>
          <form:input type="text" class="form-control" id="birthday" placeholder="请输入birthday" name="birthday" value="${user.birthday}" path="birthday"/><b style="color: red"><form:errors path="birthday"/></b>
        </div>
        <div class="mb-3">
          <label for="balance" class="form-label">balance:</label>
          <form:input type="text" class="form-control" id="balance" placeholder="请输入balance" name="balance" value="${user.balance}" path="balance"/><b style="color: red"><form:errors path="balance"/></b>
        </div>
        <div class="mb-3">
          <label for="salary" class="form-label">salary:</label>
          <form:input type="text" class="form-control" id="salary" placeholder="请输入salary" name="salary" value="${user.salary}" path="salary"/><b style="color: red"><form:errors path="salary"/></b>
        </div>
        <div class="mb-3">
          <label for="taskCount" class="form-label">taskCount:</label>
          <form:input type="text" class="form-control" id="taskCount" placeholder="请输入taskCount" name="taskCount" value="${user.taskCount}" path="taskCount"/><b style="color: red"><form:errors path="taskCount"/></b>
        </div>
        <div>
        hobbies:<form:checkbox name="hobbies" value="唱歌" path="hobbies"/>
          <form:label path="hobbies">唱歌</form:label>
          <form:checkbox name="hobbies" value="跳舞" path="hobbies"/>
          <form:label path="hobbies">跳舞</form:label>
        </div>
        <br/>
        <form:button class="btn btn-primary">提交</form:button>
<%--        <button type="submit" class="btn btn-primary">提交</button>--%>
      </form:form>
    </div>
    <div class="col-sm-4">
      <!-- 轮播 -->
      <div id="demo" class="carousel slide" data-bs-ride="carousel">

        <!-- 指标/点 -->
        <div class="carousel-indicators">
          <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
          <button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
          <button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
        </div>

        <!-- 幻灯片/轮播 -->
        <div class="carousel-inner">
          <div class="carousel-item active">
            <img src="${pageContext.request.contextPath}/img/img.png" alt="Los Angeles" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/img/img.png" alt="Chicago" class="d-block w-100">
          </div>
          <div class="carousel-item">
            <img src="${pageContext.request.contextPath}/img/img.png" alt="New York" class="d-block w-100">
          </div>
        </div>

        <!-- 左右控件/图标 -->
        <button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
          <span class="carousel-control-prev-icon"></span>
        </button>
        <button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
          <span class="carousel-control-next-icon"></span>
        </button>
      </div>
    </div>
  </div>
  <div id="bottom" class="mt-5 p-4 bg-dark text-white text-center">
    <p>页脚</p>
  </div>
  </body>
</html>

在使用form标签库时,在form表单和其中的标签都要加上前缀:

 

并且一定要绑定一个空的user类:

使用get请求在访问url时向Model中加入User对象:

 

请求处理方法就可以简化为:

 

posted on 2022-06-28 18:01  时间完全不够用啊  阅读(112)  评论(0编辑  收藏  举报