前端页面代码:
<%--
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对象:
请求处理方法就可以简化为:
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 分享4款.NET开源、免费、实用的商城系统
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· 上周热点回顾(2.24-3.2)