4.8 前端页面的处理
前端框架
前端页面可以通过网上的UI模板套用
主要是关键的位置，会出现什么样的请求我们处理好这些请求即可
前端页面用到了很多Thymeleaf的知识，下面我会着重写这一块相关的
Layui - 经典开源模块化前端 UI 框架（官方文档镜像站） (layuiweb.com)
Examples · Bootstrap (getbootstrap.com)
能在这里拿很多你想要的样式，表单啊、按钮...等等
个性化提示
我们定位到登录页，可以在这里做一个错误提示
例如：如果没有登录就去访问类路径下的资源，那么提示一些警告。
我们在Welcome Back!下面新建一行，这一行来提示错误信息。通过在controller层的判断，如果没有登录就用Model忘请求域中存入错误信息Model.addAttribute("msg",密码或账户错误)
我们存取过后呢，在前端页面怎么显示？通过thymeleaf来获取即可
<p style="color: red" th:text="${msg}"></p>
<div class="text-center"> <h1 class="h4 text-gray-900 mb-4">Welcome Back!</h1> <p style="color: red" th:text="${msg}"></p> </div> <form class="user" method="post" th:action="@{/login}"> <div class="form-group"> <input name="name" type="email" class="form-control form-control-user" id="exampleInputEmail" aria-describedby="emailHelp" placeholder="Enter Email Address..."> </div> <div class="form-group"> <input name="age" type="password" class="form-control form-control-user" id="exampleInputPassword" placeholder="Password"> </div> <div class="form-group"> <div class="custom-control custom-checkbox small"> <input type="checkbox" class="custom-control-input" id="customCheck"> <label class="custom-control-label" for="customCheck">Remember Me</label> </div> </div> <input type="submit" class="btn btn-primary btn-user btn-block"> </form>
input标签的说明
input标签要注意加上name属性，不然提交的时候请求域中获取不到输入的值
概念
payload，翻译过来是有效载荷
payload 字面意思“有效载荷，有效负荷，有效载重”。
要解释什么是有效载重，用货运行业打个比方： 比如有一位客户需要支付一笔费用委托货车司机运送一车石油，石油本身的重量、车子的重量、司机的重量等等，这些都属于载重(load)。但是对于该客户来说，他关心的只有石油的重量，所以石油的重量是有效载重(payload，也就是付费的重量)。
所以抽象一下，payload 可以理解为一系列信息中最为关键的信息。 对于程序员来说就是在程序中 起关键作用的代码。
安全方面：
通常在传输数据时，为了使数据传输更可靠，要把原始数据分批传输，并且在每一批数据的头和尾都加上一定的辅助信息， 比如数据量的大小、校验位等，这样就相当于给已经分批的原始数据加一些外套，这些外套起标示作用，使得原始数据不易丢失， 一批数据加上“外套”就形成了传输通道的基本传输单元，叫做数据帧或数据包，而其中的原始数据就是payload
我来模拟一个登录请求，查看一下它提交的信息
表单提交的说明
表单提交是post请求
