组装首页:其他组件html、css移入JS中再引入首页

news2024/12/23 19:28:57

组装首页

 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>组装首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            /* 禁止文本选中 */
            user-select: none;
        }

        /* 登录界面样式 */
        html,
        body {
            height: 100%;
        }

        body {
            display: flex;
        }

        .wrapper {
            width: 100%;
            background: linear-gradient(to bottom, #f7c750, #ff6d6d);
            background-image: url('file:///D:/img/开门.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
        }

        .container {
            width: 98%;
            height: 96%;
            display: flex;
            flex-direction: column;
            /* 设置为列方向 */
            position: relative;
            border-radius: 8px;
            margin: 2% auto;
            border: 1px solid rgba(255, 255, 255, 6);
            background-image: linear-gradient(to top left,
                    rgba(255, 255, 255, 0.1),
                    rgba(255, 255, 255, 0.1) 30%,
                    rgba(255, 255, 255, 0));
            backdrop-filter: blur(4px);
            box-shadow:
                inset 4px 4px 3px rgba(255, 255, 255, 0.6),
                inset -4px -4px 3px rgba(0, 0, 0, 0.6);
        }

        .welcome-box {
            width: 100%;
            height: 50%;
            /* 调整高度 */
            position: absolute;
            /* 保持绝对定位 */
            left: 0;
            top: 0;
            transition: transform 0.5s ease-in-out;
            /* 保持过渡效果 */
            border: 5px;
            border-radius: 8px 8px 0 0;
            background-image: url('file:///D:/img/上.png');
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-size: 100% 100%;
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            text-shadow: 1px 1px 1px #100000;
            z-index: 9;
        }

        .container p,
        .container h1 {
            color: rgb(255, 255, 255);
        }

        .welcome-box h1 {
            margin-top: 45px;
            text-align: center;
            letter-spacing: 5px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }

        .welcome-box p {
            height: 25px;
            line-height: 25px;
            text-align: center;
            margin: 10px 0;
            font-weight: bold;
            text-shadow: 2px 2px 2px #100000;
        }

        .image-container {
            width: 100px;
            height: 100px;
            margin: 10px auto;
            border-radius: 50%;
            overflow: hidden;
            background: rgba(75, 82, 88, 0.524);
            backdrop-filter: blur(5px);
            opacity: 0.9;
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            text-shadow: 1px 1px 1px #100000;
            z-index: 99;
        }

        .image-container img {
            width: 100%;
            height: 100%;
        }

        .form-container {
            margin: 120px auto;
        }

        .form-container,
        .registration-container {
            flex: 1;
            height: 100%;
            margin: 40px auto;
        }

        .title-container {
            height: 50px;
            line-height: 4px;
        }

        .title-container h1 {
            text-align: center;
            letter-spacing: 5px;
            background-image: linear-gradient(to top left,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0));
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            text-shadow: 1px 1px 1px #100000;
        }

        .input-group {
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .container input {
            width: 60%;
            height: 25px;
            margin-bottom: 20px;
            text-indent: 4px;
            border-radius: 3px;
            box-shadow: 0px 0px 5px 5px #f7c750;
        }

        .form-container input[type="password"] {
            transform: translateY(20px);
        }

        .container input:focus {
            color: rgb(61, 185, 71);
        }

        .button-container {
            display: flex;
            justify-content: center;
        }

        .form-container .button-container {
            margin-top: 45px;
        }

        .container button {
            width: 100px;
            height: 30px;
            margin: 0 3px;
            border: none;
            border-radius: 3px;
            color: #fff;
            background-color: #2196F3;
            background-image: linear-gradient(to top left,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0));
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            text-shadow: 1px 1px 1px #100000;
        }

        .register-btn {
            background-color: #4CAF50;
        }

        button:hover {
            cursor: pointer;
            background-color: aqua;
        }

        .button-container p {
            height: 30px;
            line-height: 30px;
            padding: 0 10px;
            font-size: 14px;
            background-color: #f56c6c;
            border-radius: 3px;
            background-image: linear-gradient(to top left,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0));
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
            text-shadow: 1px 1px 1px #d3bfbf;
        }

        button:hover,
        .button-container p:hover {
            cursor: pointer;
            background-color: rgb(251, 16, 16);
            background-image: linear-gradient(to top left,
                    rgba(0, 0, 0, 0.2),
                    rgba(0, 0, 0, 0.2) 30%,
                    rgba(0, 0, 0, 0));
            box-shadow:
                inset 2px 2px 3px rgba(255, 255, 255, 0.6),
                inset -2px -2px 3px rgba(0, 0, 0, 0.6);
        }

        .button-container p:active,
        button:active {
            box-shadow:
                inset -2px -2px 3px rgba(255, 255, 255, 0.6),
                inset 2px 2px 3px rgba(0, 0, 0, 0.6);
        }

        .container ::placeholder {
            color: rgb(36, 192, 127);
            letter-spacing: 25px;
            font-size: 15px;
        }

        /* 登录界面样式 结束 */
        /* 登录后的样式 */
        #mask {
            display: none;
            width: 100%;
            transition: background-color 0.3s, color 0.3s;
            background: #0b1b2c;
            /* 默认背景色 */
            color: #ffffff;
        }

        nav {
            background-color: #cbcbcb;
            padding: 5px;
        }

        nav a {
            color: #007bff;
            padding: 4px 8px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        nav a:hover {
            background-color: #ff000097;
            color: white;
            backdrop-filter: blur(5px);
        }

        .nav-active {
            display: inline-block;
            transform: scale(1.5);
            transform-origin: center;
            margin-left: 10px;
            padding: 0;
            border-radius: 3px;
            background-color: #ff0000;
            color: white;
            text-shadow: 1px 1px 1px #000000;
        }

        .content {
            display: none;
            padding: 20px;
        }

        .content p {
            background-color: #144756;
            color: #f56c6c;
            text-shadow: 1px 1px 1px #000000;
        }

        .active {
            display: block;
        }

        #mask.day-mode {
            background-color: #f0f0f0;
            color: #000000;
        }

        nav.day-mode {
            background-color: #cccccc;
        }

        .toggle-day-mode {
            float: right;
        }

        /* 调整我的标志位置 */
        #logo {
            position: absolute;
            top: -28px;
            right: 175px;
        }

        /* 登录后的结束 */
    </style>
</head>

<body>
    <!-- 登录界面.wrapper -->
    <div class="wrapper">
        <div class="container">
            <div class="welcome-box">
                <h1>欢迎</h1>
                <p>加入我们!</p>
                <div class="image-container">
                    <img src="file:///D:/img/空.png" alt="正方形图片">
                </div>
            </div>
            <div class="registration-container">
                <div class="title-container">
                    <h1>注册</h1>
                </div>
                <div class="input-group">
                    <input type="text" id="reg-username" placeholder="用户名">
                    <input type="password" id="reg-password" placeholder="密码">
                    <input type="password" id="reg-confirm-password" placeholder="确认密码">
                </div>
                <div class="button-container">
                    <button class="register-btn" onclick="register()">注册</button>
                    <p onclick="mySwitch()">已有账号?去登录</p>
                </div>
            </div>
            <div class="form-container">
                <div class="title-container">
                    <h1>登录</h1>
                </div>
                <div class="input-group">
                    <input type="text" id="login-username" placeholder="用户名">
                    <input type="password" id="login-password" placeholder="密码">
                </div>
                <div class="button-container">
                    <button onclick="login()">登录</button>
                    <p onclick="mySwitch()">没有账号?去注册</p>
                </div>
            </div>
        </div>
    </div>
    <!-- 登录界面.wrapper结束 -->
    <!-- 登录后的内容#mask -->
    <div id="mask">
        <!-- 导航栏 nav-->
        <nav>
            <!-- 引入我的标志和外部 JavaScript 文件 -->
            <div id="logo">我的标志</div>
            <script src="logo.js"></script>
            <!-- 导航栏链接 -->
            <a href="#" onclick="showPage('home')">首页</a>
            <a href="#" onclick="showPage('writeDown')">记下来</a>
            <a href="#" onclick="showPage('webPage')">网页</a>
            <a href="#" onclick="showPage('countdown')">倒计时</a>
            <a href="#" onclick="showPage('about')">关于</a>
            <!-- 添加白天模式切换链接 -->
            <a href="#" class="toggle-day-mode" onclick="toggledayMode()">切换白天模式</a>
            <button onclick="logout()"
                style="background-color: #f56c6c; border: none; border-radius: 5px; cursor: pointer; float: right;padding: 0 2px;">
                退出登录
            </button>
        </nav>
        <div id="home" class="content active">
            <h1>欢迎来到首页</h1>
            <p>内容正在筹备中...</p>
        </div>
        <div id="writeDown" class="content">
            <h1>记下来</h1>
            <p>1.自从有了手机,每天过着李世民的生活,有人献歌献舞,表演才艺,朕还要挨个批阅点评,盖红章,朕甚是劳累。</p>
            <p>2.内容正在筹备中...</p>
        </div>
        <div id="webPage" class="content">
            <h1>网页</h1>
            <p>内容正在筹备中... </p>
        </div>
        <div id="countdown" class="content">
            <h1>倒计时</h1>
            <p>内容正在筹备中...</p>
        </div>
        <div id="about" class="content">
            <h1>关于</h1>
            <p>项目初始创建时间:2024年10月09日 </p>
        </div>
    </div>
    <!-- 登录后的内容#mask结束 -->
</body>
<!-- 登录界面滑动引入的js文件 src="http://code.jquery.com/jquery-latest.js"-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
    let flag = true;
    const users = [
        { username: "admin", password: "admin123" }, // 添加管理员账户
        { username: "1", password: "1" } // 添加管理员测试账户
    ]; // 存储用户信息的数组
    const mySwitch = () => {
        if (flag) {
            $(".welcome-box").css({
                "transform": "translateY(100%)",
                "background-image": "url('file:///D:/img/下.png')", // 修改为背景图片
                "border-radius": "0 0 8px 8px" // 添加边框圆角
            });
            $("img").attr("src", "file:///D:/img/荧.png");
            $("img").css("transform", "scale(1.3)"); // 这个图片返回原大小,添加缩放效果
        } else {
            $(".welcome-box").css({
                "transform": "translateY(0%)",
                "background-image": "url('file:///D:/img/上.png')", // 修改为背景图片
                "border-radius": "8px  8px 0 0" // 添加圆角效果
            });
            $("img").attr("src", "file:///D:/img/空.png");
            $("img").css("transform", "scale(1)"); // 这个图片返回原大小,添加缩放效果
        }
        flag = !flag;
    }
    const register = () => {
        const username = document.getElementById("reg-username").value;
        const password = document.getElementById("reg-password").value;
        const confirmPassword = document.getElementById("reg-confirm-password").value;
        // 检查账号和密码是否为空
        if (!username || !password) {
            alert("账号和密码不能为空!");
            return;
        }
        if (password !== confirmPassword) {
            alert("密码不匹配!");
            return;
        }
        // 检查用户名是否已存在
        const userExists = users.some(user => user.username === username);
        if (userExists) {
            alert("用户名已存在,请选择其他用户名!");
            return;
        }
        // 注册用户
        users.push({ username, password });
        alert("注册成功,请登录!");
        mySwitch(); // 切换到登录界面
    }
    const login = () => {
        const username = document.getElementById("login-username").value;
        const password = document.getElementById("login-password").value;
        // 验证用户信息
        const user = users.find(user => user.username === username && user.password === password);
        if (user) {
            alert("登录成功!");
            // 显示受保护的页面
            document.getElementById("mask").style.display = "block"; // 显示内容
            document.querySelector('.wrapper').style.display = "none"; // 隐藏注册和登录盒子
        } else {
            alert("用户名或密码错误!");
        }
    }
    const logout = () => {
        document.getElementById("mask").style.display = "none"; // 隐藏受保护的内容
        document.querySelector('.wrapper').style.display = "block"; // 显示注册和登录盒子
        document.getElementById("login-username").value = ""; // 清空登录用户名输入框
        document.getElementById("login-password").value = ""; // 清空登录密码输入框
    }
    // 导航页面切换函数
    function showPage(page) {
        // 隐藏所有内容并移除激活样式
        document.querySelectorAll('.content').forEach(content => content.classList.remove('active'));
        document.querySelectorAll('nav a').forEach(link => link.classList.remove('nav-active'));
        // 显示当前选择的内容
        const selectedContent = document.getElementById(page);
        selectedContent.classList.add('active');
        document.querySelector(`nav a[onclick="showPage('${page}')"]`).classList.add('nav-active');
    }
    // 在页面加载时显示首页并激活相应的样式
    document.addEventListener('DOMContentLoaded', function () {
        showPage('home');
    });
    // 切换白天模式函数
    function toggledayMode() {
        document.getElementById("mask").classList.toggle('day-mode');
        document.querySelector('nav').classList.toggle('day-mode');
    }
</script>

</html>

logo.js

const styles = `
    figure.logo {
        width: 262px;
        height: 50px;
        transform: scale(0.5) translate(110px, 50px);
        border-radius: 50%;
        background: #f30303;
        box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6),
            inset -4px -4px 5px rgba(0, 0, 0, 0.6);
        z-index: 99;
    }
    figure.logo figcaption {
        background: hsl(0, 0%, 0%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        font-weight: bold;
        box-shadow: inset 4px 4px 4px rgba(255, 255, 255, 0.6), inset -4px -4px 5px rgba(0, 0, 0, 0.6);
        letter-spacing: -3px;
        line-height: 45px;
        border-radius: 50%;
        font-size: 40px;
        width: 152px;
    }
    figure.logo .my_name1 {
        text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.726);
        clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
        transform: translate(35%, 0%);
        -webkit-text-stroke: #fffbfb 1px;
    }
    figure.logo .my_name2 {
        text-shadow: 1px 1px 1px hsla(160, 100%, 37%, 0.555);
        clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
        transform: translate(35%, -93%);
        -webkit-text-stroke: #ffffff 1px;
    }
    figure.logo .avatarYing,
    figure.logo .avatarKong {
        position: absolute;
        width: 60px;
        height: 35px;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0.8), rgba(243, 3, 3, 0.8));
        border-radius: 50%;
        margin-left: 204px;
    }
    figure.logo img {
        --s: 60px;
        --b: -5px;
        --f: 1;
        --bgOptions: content-box no-repeat center/ calc(100% / var(--f)) 100%;
        --shrink: calc((var(--s) / var(--f) - var(--s)) / 2 - var(--b));
        padding-top: 15px;
        width: var(--s);
        height: var(--s);
        transform: scale(var(--f));
        transition: 0.5s;
        mask: linear-gradient(#000 0 0) no-repeat center calc(0px - var(--shrink)) / calc(100% / var(--f) - 2 * var(--b)) 50%,
            radial-gradient(circle closest-side, #fff 60%, transparent) var(--bgOptions);
    }
    figure.logo .avatarYing {
        margin-left: 0px;
        margin-top: -83px;
    }
    figure.logo .avatarKong {
        margin-left: 202px;
        margin-top: 8px;
    }
    figure.logo .kong {
        margin-top: -40px;
    }
    figure.logo .ying {
        margin-top: -44px;
        --f: 1.4;
    }
`;

const styleSheet = document.createElement("style");
styleSheet.type = "text/css";
styleSheet.innerText = styles;
document.head.appendChild(styleSheet);

const logoHtml = `
    <figure class="logo">
        <div class="avatarKong">
            <a href="https://blog.csdn.net/lulei5153?spm=1011.2415.3001.5343" title="与妖为邻CSDN博客" target="_blank">
                <img class="kong" src="file:///D:/img/空.png" alt="与妖为邻">
            </a>
        </div>
        <figcaption class="my_name1">与妖为邻</figcaption>
        <figcaption class="my_name2">与妖为邻</figcaption>
        <div class="avatarYing">
            <a href="file:///D:/web/html%E9%A6%96%E9%A1%B5/%E5%A4%87%E5%BF%98%E5%BD%95.html" title="首页" target="_blank">
                <img class="ying" src="file:///D:/img/荧.png" alt="与妖为邻">
            </a>
        </div>
    </figure>
`;
document.getElementById("logo").innerHTML = logoHtml; // 将内容插入到 #logo 中

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2210318.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java-Exception与RuntimeException

&#x1f496;简介 &#x1f4d6;Exception Exception 类是所有非致命性异常的基类。这些异常通常是由于编程逻辑问题或外部因素&#xff08;如文件不存在、网络连接失败等&#xff09;导致的&#xff0c;可以通过适当的编程手段来恢复或处理。Exception 可以进一步分为两大类…

分享一些常用的数据库性能监测工具

以下是一些常用的数据库性能监测工具&#xff1a; 一、MySQL MySQL Enterprise Monitor&#xff1a; 由 MySQL 官方推出&#xff0c;提供全面的数据库性能监控、诊断和优化功能。可以监控数据库的各种指标&#xff0c;如查询性能、连接数、缓存命中率等&#xff0c;并提供警报…

目标检测——YOLO11算法解读

作者&#xff1a;Ultralytics公司 代码&#xff1a;https://github.com/ultralytics/ultralytics YOLO系列算法解读&#xff1a; YOLOv1通俗易懂版解读、SSD算法解读、YOLOv2算法解读、YOLOv3算法解读、YOLOv4算法解读、YOLOv5算法解读、YOLOR算法解读、YOLOX算法解读、YOLOv6算…

(南京观海微电子)——HKC_5.0_QP050AS01-1_MIPI_LVDS_RGB原理及代码介绍

1. MIPI 2. LVDS 3. TTL 4.代码 //初始化代码 Generic_Short_Write_1P(0xee,0x01); // ENTER PAGE1 Generic_Short_Write_1P(0xea,0x07); Generic_Short_Write_1P(0xeb,0x12); Generic_Short_Write_1P(0x0a,0x76); // vcom //Generic_Sh…

兆易创新Cortex-M7 GD32H459适配OpenHarmony轻量系统适配教程

笔者利用国庆假期的时间适配了一款Cortex-M7 的国产厂商兆易创新GD32H459&#xff0c;开源地址&#xff1a;https://gitee.com/GD32H759_OpenHarmony OpenHarmony 4.1r 轻量系统移植到GD32H759文档 1.学习本文档的意义 1.学习如何移植OpenHarmony轻量系统4.1r到GD32 m7内核G…

[论文期刊|稳定检索]2024年信号处理与光学工程国际会议(SPOE 2024 )

2024年信号处理与光学工程国际会议 2024 International Conference on Signal Processing and Optical Engineering 【1】大会信息 会议名称&#xff1a;2024年信号处理与光学工程国际会议 会议简称&#xff1a;SPOE 2024 大会时间&#xff1a;请查看官网 大会地点&#xf…

【JS试题】对象键排序问题的神仙试题

前言 题目如下&#xff1a; const obj { a: 0 } obj[1] 0 obj[obj.a] obj.a const values Object.values(obj) obj[values[1]] obj.a console.log(obj);在此之前需要先了解 JS 对象键的排序问题&#xff0c;JS会对对象的属性进行处理&#xff0c;把所有 Number类型 和 数…

AWS S3迁移到阿里云OSS实践

本教程讲解如何将AWS S3中的数据迁移到阿里云对象存储OSS。 如果您需要将AWS S3中的数据通过专线迁移到阿里云对象存储OSS&#xff0c;请参见使用代理迁移。 概述 阿里云在线迁移服务是阿里云提供的存储产品数据通道。使用在线迁移服务&#xff0c;您可以将第三方数据轻松迁…

GaussDB主备版 8 工具学习

1 客户端工具 1.1 gsql 1.1.1 类似plsql 1.1.2 默认只支持从服务器本机连接&#xff0c;如果需要连接到远端的数据库&#xff0c;必须在服务端进行配置 1.1.3 gsql --help 1.1.4 命令参考-https://doc.hcs.huawei.com/db/zh-cn/gaussdb/24.1.30/tg/gaussdb-38-0007.html 1.1.…

Golang | Leetcode Golang题解之第474题一和零

题目&#xff1a; 题解&#xff1a; func findMaxForm(strs []string, m, n int) int {dp : make([][]int, m1)for i : range dp {dp[i] make([]int, n1)}for _, s : range strs {zeros : strings.Count(s, "0")ones : len(s) - zerosfor j : m; j > zeros; j--…

【网络基础知识】网络通信概述与TCPIP、UDP协议

网络基础知识 介绍网络基础知识&#xff0c;譬如网络通信概述、OSI 七层模型、IP 地址、TCP/IP 协议族、TCP 和 UDP 协议等等&#xff0c; 旨在以引导入门、了解为主&#xff0c;其中并不会深入、详细地介绍这些内容&#xff1b; Linux网络编程入门移步&#xff1a;【Linux网络…

使用CSS和HTML实现3D图片环绕效果

使用CSS和HTML实现3D图片环绕效果 在本篇博客中&#xff0c;将介绍如何使用HTML和CSS实现一个3D图片环绕效果。这个效果不仅具有视觉吸引力&#xff0c;而且具有高度的互动性&#xff0c;鼠标悬停时动画会暂停。接下来将一步步讲解这个效果的实现过程。 1. 效果 2. 页面结构与…

Python人脸识别技术进阶篇

在上一篇文章中&#xff0c;我们介绍了如何使用Python进行基本的人脸识别。本文将深入探讨人脸识别技术的高级应用&#xff0c;包括如何优化识别性能、处理复杂环境下的识别挑战以及如何利用深度学习模型来提高识别准确性等话题。 人脸识别的原理回顾 人脸识别流程 人脸识别…

使用 llamafile 以单个文件运行本地大模型

在开发 GenAI 应用时&#xff0c;有一个在本地运行的大模型是非常重要的&#xff0c;可以很方便地进行开发和测试。目前有几个流行的在本地运行大模型的选项&#xff0c;包括 Ollama 和 LM Studio。 这里介绍的是 llamafile。llamafile 是 Mozilla 支持的开源项目。llamafile …

OceanBase + DolphinScheduler,搭建分布式大数据调度平台的实践

本文整理自白鲸开源联合创始人&#xff0c;Apache DolphinScheduler PMC Chair&#xff0c;Apache Foundation Member 代立冬的演讲。主要介绍了DolphinScheduler及其架构、DolphinScheduler与OceanBase 的联合大数据方案。 DolphinScheduler是什么&#xff1f; Apache Dolphi…

第十六章 RabbitMQ延迟消息之延迟插件优化

目录 一、引言 二、优化方案 三、核心代码实现 3.1. 生产者代码 3.2. 消息处理器 3.3. 自定义多延迟消息封装类 3.4. 订单实体类 3.5. 消费者代码 四、运行效果 一、引言 上一章节我们提到&#xff0c;直接使用延迟插件&#xff0c;创建一个延迟指定时间的消息&…

一款零依赖、跨平台的流媒体协议处理工具,支持 RTSP、WebRTC、RTMP 等视频流协议的处理

大家好&#xff0c;今天给大家分享一款功能强大的流媒体协议处理工具go2rtc&#xff0c;支持多种协议和操作系统&#xff0c;具有零依赖、零配置、低延迟等特点。 项目介绍 go2rtc可以从各种来源获取流&#xff0c;包括 RTSP、WebRTC、HomeKit、FFmpeg、RTMP 等&#xff0c;并…

第一个servlet程序

文章目录 在原有工程上建立模块前端配置前后端映射关系添加外部依赖库后端代码启动配置 在原有工程上建立模块 添加web框架 前端 应用结构 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>第一…

【云原生技术】Docker容器进阶知识

文章目录 namespace概述一、namespace的基本概念二、namespace的主要作用三、namespace的类型四、namespace的操作五、namespace在容器技术中的应用 cgroup一、cgroup的基本概念二、cgroup的主要功能三、cgroup的子系统介绍四、cgroup的应用场景五、cgroup的使用与管理 cgroup和…