山东大学软件学院项目实训-创新实训-基于大模型的旅游平台（十九）

本文介绍了如何编写一个前端登录界面。

头部

首先，设置页面的字符编码为 UTF-8，确保页面可以正确显示各种语言和符号，并设置标题。

html
复制代码
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>用户登录</title>

接着，使用 Thymeleaf 的 include 指令来引入名为 "headcommon" 的公共模板片段，这样可以在多个页面中重复使用相同的头部内容。还可以使用 Thymeleaf 的 URL 表达式来引入 JavaScript 文件（Thymeleaf会在渲染页面时将URL表达式转换为实际的URL路径）。

html
复制代码
<div th:include="common :: headcommon"></div>
<script th:src="@{/js/index/login.js}" type="text/javascript"></script>

主体

首先，写一个标题，并指定标题样式。

html
复制代码
<h2 class="register-title">用户登录</h2>

接下来，使用layui框架提供的样式和组件创建一个表单，并将用户名、密码和验证码放入表单中。

html
复制代码
<form class="layui-form">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-inline">
        <input type="text" name="uname" required lay-verify="uname" placeholder="请输入用户名"
               autocomplete="off" class="layui-input">
    </div>

    <label class="layui-form-label">密码</label>
    <div class="layui-input-inline">
        <input type="password" name="password" required lay-verify="password" placeholder="请输入密码"
               autocomplete="off" class="layui-input" id="password">
    </div>

    <label class="layui-form-label">验证码</label>
    <div class="layui-input-inline">
        <input type="text" name="checkcode" required lay-verify="checkcode" placeholder="请输入验证码"
               autocomplete="off" class="layui-input">
    </div>
    
    <div class="layui-form-mid layui-word-aux">
        <img src="/user/register/checkCode" οnclick="changeCheckCode(this)" alt="更换验证码">
        <script type="text/javascript">
            function changeCheckCode(img) {
                img.src = "/user/register/checkCode?" + new Date().getTime();
            }
        </script>
    </div>

    <div class="layui-input-block">
        <button class="layui-btn" type="button" lay-submit lay-filter="login">登录</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>

详细说明

用户名输入框:

标签：<label class="layui-form-label">用户名</label>
输入框：<input type="text" name="uname" required lay-verify="uname" placeholder="请输入用户名" autocomplete="off" class="layui-input">

密码输入框:

标签：<label class="layui-form-label">密码</label>
输入框：<input type="password" name="password" required lay-verify="password" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">

验证码输入框:

标签：<label class="layui-form-label">验证码</label>
输入框：<input type="text" name="checkcode" required lay-verify="checkcode" placeholder="请输入验证码" autocomplete="off" class="layui-input">

验证码图片:

图片：<img src="/user/register/checkCode" οnclick="changeCheckCode(this)" alt="更换验证码">
更换验证码的JavaScript函数：function changeCheckCode(img) { img.src = "/user/register/checkCode?" + new Date().getTime(); }

按钮:

登录按钮：<button class="layui-btn" type="button" lay-submit lay-filter="login">登录</button>
重置按钮：<button type="reset" class="layui-btn layui-btn-primary">重置</button>

通过以上步骤，一个完整的登录界面就构建好了。这个界面不仅包含基础的用户名和密码输入框，还包括验证码功能，提高了安全性。同时，通过使用layui框架，界面更加美观和易用。