SpringBoot+Mybatis(前端页面的处理)携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第30天，点击查看活动详情

4.8 前端页面的处理

前端框架

前端页面可以通过网上的UI模板套用

主要是关键的位置，会出现什么样的请求我们处理好这些请求即可

前端页面用到了很多Thymeleaf的知识，下面我会着重写这一块相关的

Layui - 经典开源模块化前端 UI 框架（官方文档镜像站） (layuiweb.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请求