小薛博客

Appearance

5、前端登录页面集成 ​

1、添加未登录按钮 ​

layui-button页面：https://layui.dev/docs/2/button/#theme

html
<div id="unlogin_btn_div" style="position:absolute;bottom: 40px;text-align: center;width: 84%">
    <button type="button" class="layui-btn layui-btn-lg" lay-on="doLogin"> 未登录</button>
</div>
image-20250305134104046

2、新建登录页面login.html ​

layui-表单组件：https://layui.dev/docs/2/form/#login

html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Demo</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>
<body>
<style>
    .demo-login-container{width: 320px; margin: 21px auto 0;}
    .demo-login-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
</style>
<form class="layui-form">
    <div class="demo-login-container">
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-username"></i>
                </div>
                <input type="text" name="username" value="" lay-verify="required" placeholder="用户名" lay-reqtext="请填写用户名" autocomplete="off" class="layui-input" lay-affix="clear">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-wrap">
                <div class="layui-input-prefix">
                    <i class="layui-icon layui-icon-password"></i>
                </div>
                <input type="password" name="password" value="" lay-verify="required" placeholder="密   码" lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-vercode"></i>
                        </div>
                        <input type="text" name="captcha" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input" lay-affix="clear">
                    </div>
                </div>
                <div class="layui-col-xs5">
                    <div style="margin-left: 10px;">
                        <img src="https://www.oschina.net/action/user/captcha" onclick="this.src='https://www.oschina.net/action/user/captcha?t='+ new Date().getTime();">
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <input type="checkbox" name="remember" lay-skin="primary" title="记住密码">
            <a href="#forget" style="float: right; margin-top: 7px;">忘记密码？</a>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login">登录</button>
        </div>
        <div class="layui-form-item demo-login-other">
            <label>社交账号登录</label>
            <span style="padding: 0 21px 0 6px;">
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq" style="color: #3492ed;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat" style="color: #4daf29;"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo" style="color: #cf1900;"></i></a>
      </span>
            或 <a href="#reg">注册帐号</a>
        </div>
    </div>
</form>

<script src="/layui/layui.js"></script>
<script>
    layui.use(function(){
        var form = layui.form;
        var layer = layui.layer;
        // 提交事件
        form.on('submit(demo-login)', function(data){
            var field = data.field; // 获取表单字段值
            // 显示填写结果，仅作演示用
            layer.alert(JSON.stringify(field), {
                title: '当前填写的字段值'
            });
            // 此处可执行 Ajax 等操作
            // …
            return false; // 阻止默认 form 跳转
        });
    });
</script>

</body>
</html>

3、index页面点击【未登录】按钮弹出login.html ​

弹出层：https://layui.dev/docs/2/layer/#demo-iframe

image-20250305134929797

登陆弹出框后的index.html中的js函数

java
//【未登录按钮点击后弹出登录页面login.html】
    'doLogin':function () {
        layer.open({
            type: 2,
            title: "登录",
            area: ['560px', '400px'],
            content: '/login.html',
            fixed: true, // 不固定
            maxmin: false,
            shadeClose: false,
            btnAlign: 'c',
            move: false
        });
    },

4、上述js中各个字段意思 ​

打开弹层：https://layui.dev/docs/2/layer/#open

基础属性：https://layui.dev/docs/2/layer/#options

5、完整版index.html ​

html
<!-- 前端模板如下: -->
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>小薛博客LLM大模型实战</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 引入 layui.css -->
    <link href="/layui/css/layui.css" rel="stylesheet">
</head>

<body>
<div class="layui-layout layui-layout-admin">
    <!--11111111-->
    <div class="layui-header">
        <div class="layui-logo layui-hide-xs layui-bg-black">小薛博客LLM大模型实战</div>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul id="chat-nav" class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs layui-this" lay-on="nav-change-content"  lay-data="chat-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="chat-tongyi-content"><a href="javascript:;">通义千问</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="chat-wenxin-content"><a href="javascript:;">文心一言</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="chat-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
        </ul>
        <ul id="draw-nav" class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="draw-chatgpt-content"><a href="javascript:;">ChatGPT</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="draw-tongyi-content"><a href="javascript:;">通义千问</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="draw-wenxin-content"><a href="javascript:;">文心一言</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content"  lay-data="draw-xunfei-content"><a href="javascript:;">科大讯飞</a></li>
        </ul>
        <!-- 头部区域（可配合layui 已有的水平导航） -->
        <ul id="discuss-nav" class="layui-nav layui-layout-left" style="display: none">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content"><a href="javascript:;">推荐</a></li>
            <li class="layui-nav-item layui-hide-xs" lay-on="nav-change-content" lay-data="discuss-content-new"><a href="javascript:;">最新</a></li>
        </ul>
        <ul class="layui-nav layui-layout-right">
            <li class="layui-nav-item layui-hide layui-show-sm-inline-block">
                <a href="javascript:;">
                    <img src="//unpkg.com/outeres@0.0.10/img/layui/icon-v2.png" class="layui-nav-img">
                    tester
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="javascript:;">Your Profile</a></dd>
                    <dd><a href="javascript:;">Settings</a></dd>
                    <dd><a href="javascript:;">Sign out</a></dd>
                </dl>
            </li>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-more-vertical"></i>
                </a>
            </li>
        </ul>
    </div>
    <!--22222222-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item layui-nav-itemed">
                    <a class="" href="javascript:;">AI功能集</a>
                    <dl class="layui-nav-child">
                        <dd><a href="javascript:;" lay-on="chat-nav-show">对话问答(文生文)</a></dd>
                        <dd><a href="javascript:;" lay-on="draw-nav-show">对话问图(文生图)</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item" lay-on="discuss-nav-show"><a href="javascript:;">话题讨论</a></li>
                <li class="layui-nav-item" lay-on="about-us"><a href="javascript:;">关于我们</a></li>
            </ul>

            <div id="unlogin_btn_div" style="position:absolute;bottom: 40px;text-align: center;width: 84%">
                <button type="button" class="layui-btn layui-btn-lg" lay-on="doLogin"> 未登录</button>
            </div>

        </div>
    </div>

    <!--3333333-->
    <div class="layui-body">
        <!-- 内容主体区域 -->
        <div style="padding-top: 15px;padding-bottom: 80px">
            <div>
                <div id="chat-chatgpt-content">

                </div>
                <div id="chat-tongyi-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        tongyi提出的问题1
                    </div>
                    <div class="layui-card-body">
                        tongyi回答的问题
                    </div>
                </div>
                <div id="chat-wenxin-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        wenxin提出的问题1
                    </div>
                    <div class="layui-card-body">
                        wenxin回答的问题
                    </div>
                </div>
                <div id="chat-xunfei-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        xunfei提出的问题1
                    </div>
                    <div class="layui-card-body">
                        xunfei回答的问题
                    </div>
                </div>

                <div id="draw-chatgpt-content" class="layui-card layui-panel" style="display: none">

                </div>
                <div id="draw-tongyi-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        draw-tongyi
                    </div>
                    <div class="layui-card-body">
                        draw-tongyi问题
                    </div>
                </div>
                <div id="draw-wenxin-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        draw-wenxin
                    </div>
                    <div class="layui-card-body">
                        draw-wenxin画图
                    </div>
                </div>
                <div id="draw-xunfei-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        draw-xunfei
                    </div>
                    <div class="layui-card-body">
                        draw-xunfei回答
                    </div>
                </div>
                <div id="discuss-content" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        话题讨论-推荐
                    </div>
                    <div class="layui-card-body">
                        话题讨论-推荐详细情况
                    </div>
                </div>
                <div id="discuss-content-new" class="layui-card layui-panel" style="display: none">
                    <div class="layui-card-header layui-font-16">
                        话题讨论-最新
                    </div>
                    <div class="layui-card-body">
                        话题讨论-最新详细情况
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--4444444-->
    <div id="footer-chat" class="layui-footer" style="height: 80px;line-height: 80px;">
        <!-- 底部固定区域 -->
        <div style="width: 80%;">
            <div class="layui-input-group" style="width: 100%;">
                <input type="text" id="question-input" style="margin-top: 20px;margin-left: 120px;" placeholder="输入问题..."
                       class="layui-input">
                <div class="layui-input-suffix">
                    <button type="button" id="question-send"  style="margin-left: 80px;" lay-on="question-send" class="layui-btn layui-btn-radius">发送
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 引入 layui.js -->
<script src="/layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'util'], function(){
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        //var $ = layui.$;
        var jQuery = layui.$;

        var question_type = "chat"; // 默认对话问答文生文，当前在使用聊天功能

        util.on('lay-on',{
            //对话问答(文生文)
            'chat-nav-show':function () {
                jQuery("#chat-nav").show();
                jQuery("#draw-nav").hide();
                jQuery("#discuss-nav").hide();
                //对话问答-点击后顶部导航栏显示第一个标签页ChatGPT
                var showDivId = "chat-chatgpt-content";
                jQuery("#" + showDivId).show();
                jQuery("#" + showDivId).siblings().hide();
                //对话问答-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
                jQuery("#chat-nav").find("li").removeClass("layui-this");
                jQuery("#chat-nav").find("li").eq(1).addClass("layui-this");
                // 显示最下面【输入问题】对话框
                jQuery("#footer-chat").show();
                //底部输入框对话类型
                question_type = "chat";
            },
            //对话问图(文生图)
            'draw-nav-show':function () {
                jQuery("#draw-nav").show();
                jQuery("#chat-nav").hide();
                jQuery("#discuss-nav").hide();
                //左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT
                var showDivId = "draw-chatgpt-content";
                jQuery("#" + showDivId).show();
                jQuery("#" + showDivId).siblings().hide();
                //左侧对话问图-点击后顶部导航栏显示第一个标签页ChatGPT+底部光标跟随
                jQuery("#draw-nav").find("li").removeClass("layui-this");
                jQuery("#draw-nav").find("li").eq(1).addClass("layui-this");
                // 显示最下面【输入问题】对话框
                jQuery("#footer-chat").show();
                //底部输入框对话类型
                question_type = "draw";
            },
            //左侧话题讨论
            'discuss-nav-show':function () {
                jQuery("#discuss-nav").show();
                jQuery("#chat-nav").hide();
                jQuery("#draw-nav").hide();
                //左侧话题讨论-点击后顶部导航栏显示第一个标签页ChatGPT
                var showDivId = "discuss-content";
                jQuery("#" + showDivId).show();
                jQuery("#" + showDivId).siblings().hide();
                jQuery("#discuss-nav").find("li").removeClass("layui-this");
                jQuery("#discuss-nav").find("li").eq(1).addClass("layui-this");
                // 隐藏最下面【输入问题】对话框
                jQuery("#footer-chat").hide();
            },
            //给lay-on="nav-change-content"添加函数说明,根据标签页切换显示不同的内容
            'nav-change-content':function (e) {
                var showDivId = jQuery(e).attr("lay-data");
                jQuery("#" + showDivId).show(); // 显示自己的内容
                jQuery("#" + showDivId).siblings().hide(); // 隐藏所有同级 div 的内容
            },
            //给主页底部【发送】按钮添加事件
            'question-send':function () {
                //输入问题...对话框内容
                var question = jQuery("#question-input").val();
                //非空判断
                if (question == null || question == "") {
                    layer.msg("提问词不能为空,请先输入问题！");
                    return;
                }
                if(question_type == "chat") {//文生文
                    //前端发送ajax请求到后端restful
                    jQuery.ajax({
                        url:"/openai/chat",
                        type: "get",
                        data:{question:question},
                        success:function (result) {
                            if(result.code == 200){

                                var createHTML = '          <div class="layui-card layui-panel">\n' +
                                    '            <div class="layui-card-header layui-font-16">\n' +
                                    question+'            \n' +
                                    '            </div>\n' +
                                    result.result+'            <div class="layui-card-body">\n' +
                                    '              \n' +
                                    '            </div>\n' +
                                    '          </div>';
                                jQuery("#chat-chatgpt-content").prepend(createHTML);
                                jQuery("#chat-chatgpt-content").val("");
                                jQuery("#question-input").val("");
                            }else{
                                layer.msg(result.code+"\t"+result.message);
                            }
                        }
                    });
                }else if(question_type == "draw"){//文生图
                    //前端发送ajax请求到后端restful
                    jQuery.ajax({
                        url:"/openai/draw",
                        type: "get",
                        data:{question:question},
                        success:function (result) {
                            if(result.code == 200){
                                var createHTML = '<div>\n' +
                                    '                        <div class="layui-card-header layui-font-16">\n' +
                                    question +
                                    '                        </div>\n' +
                                    '                        <div class="layui-card-body">\n<img src="' +
                                    result.result+
                                    '">                        </div>\n' +
                                    '             </div>';
                                jQuery("#draw-chatgpt-content").prepend(createHTML);
                                jQuery("#draw-chatgpt-content").val("");
                                jQuery("#question-input").val("");
                            }else{
                                layer.msg(result.code+"\t"+result.message);
                            }
                        }
                    });
                }
            },
            //关于我们
            'about-us':function () {
                layer.msg('触发了事件-关于我们');
            },

            //【未登录按钮点击后弹出登录页面login.html】
            'doLogin':function () {
                layer.open({
                    type: 2,
                    title: "登录",
                    area: ['560px', '400px'],
                    content: '/login.html',
                    fixed: true, // 不固定
                    maxmin: false,
                    shadeClose: false,
                    btnAlign: 'c',
                    move: false
                });
            },

        });


        //头部事件
        util.event('lay-header-event', {
            menuLeft: function(othis){ // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function(){  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });
    });
</script>
</body>
</html>