You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Oracle APEX 24.4新手求助：基于Bootstrap5模板开发含轮播的登录页

avatar
云上老周
2026-6-13
Oracle APEX 24.4 Bootstrap5 登录页实现方案（含轮播+登录/注册切换）

针对你的需求，以下是基于Bootstrap5的Oracle APEX 24.4登录页实现方案，包含轮播组件、登录/注册切换功能，附带可直接复用的代码和配置说明：

一、页面基础配置

  1. 创建空白公共页面：

    • 新建页面，类型选择「空白页」，页面属性中设置安全性 > 需要身份验证为「否」，确保未登录用户可访问
    • 页面模板选择Bootstrap5内置的「Universal - Blank」模板，确保Bootstrap5样式全局生效

  2. 布局设置：

    • 添加一个父静态区域，区域模板选择「Bootstrap Container」，内部使用Bootstrap栅格系统拆分轮播区和表单区（例如row下分两个col-md-6，实现左右分栏）

二、轮播组件代码（静态区域内容）

在左侧col-md-6区域中添加以下Bootstrap5轮播代码，替换#APP_FILES#后的图片名为你上传到APEX静态文件的实际文件名：

<div id="loginCarousel" class="carousel slide h-100" data-bs-ride="carousel" data-bs-interval="5000">
  <div class="carousel-indicators">
    <button type="button" data-bs-target="#loginCarousel" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
    <button type="button" data-bs-target="#loginCarousel" data-bs-slide-to="1" aria-label="Slide 2"></button>
    <button type="button" data-bs-target="#loginCarousel" data-bs-slide-to="2" aria-label="Slide 3"></button>
  </div>
  <div class="carousel-inner h-100">
    <div class="carousel-item active h-100">
      <img src="#APP_FILES#carousel-demo-1.jpg" class="d-block w-100 h-100 object-fit-cover" alt="企业应用演示">
      <div class="carousel-caption d-none d-md-block text-dark">
        <h5>高效企业级Web应用</h5>
        <p>基于Oracle APEX快速构建</p>
      </div>
    </div>
    <div class="carousel-item h-100">
      <img src="#APP_FILES#carousel-demo-2.jpg" class="d-block w-100 h-100 object-fit-cover" alt="响应式设计">
      <div class="carousel-caption d-none d-md-block text-dark">
        <h5>全设备适配</h5>
        <p>Bootstrap5响应式布局，支持手机/平板/桌面</p>
      </div>
    </div>
    <div class="carousel-item h-100">
      <img src="#APP_FILES#carousel-demo-3.jpg" class="d-block w-100 h-100 object-fit-cover" alt="安全验证">
      <div class="carousel-caption d-none d-md-block text-dark">
        <h5>安全可靠</h5>
        <p>Oracle原生身份验证机制，保障数据安全</p>
      </div>
    </div>
  </div>
  <button class="carousel-control-prev" type="button" data-bs-target="#loginCarousel" data-bs-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="visually-hidden">上一张</span>
  </button>
  <button class="carousel-control-next" type="button" data-bs-target="#loginCarousel" data-bs-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="visually-hidden">下一张</span>
  </button>
</div>

三、登录/注册切换表单代码（静态区域内容）

在右侧col-md-6区域中添加以下代码，实现标签页切换+APEX原生登录/注册逻辑：

<div class="card h-100">
  <div class="card-body d-flex flex-column justify-content-center p-5">
    <h3 class="text-center mb-4">账户验证</h3>
    
    <!-- 切换标签 -->
    <ul class="nav nav-tabs mb-4" id="authTab" role="tablist">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">登录</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">注册</button>
      </li>
    </ul>

    <!-- 标签页内容 -->
    <div class="tab-content" id="authTabContent">
      <!-- 登录表单 -->
      <div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
        <form action="#APP_SESSION#" method="post">
          <input type="hidden" name="p_flow_id" value="#APP_ID#">
          <input type="hidden" name="p_flow_step_id" value="#APP_PAGE_ID#">
          <input type="hidden" name="p_instance" value="#APP_SESSION#">
          <input type="hidden" name="p_request" value="DO_LOGIN">

          <div class="mb-3">
            <label for="login-username" class="form-label">用户名</label>
            <input type="text" class="form-control" id="login-username" name="P_USERNAME" required autofocus>
          </div>
          <div class="mb-3">
            <label for="login-password" class="form-label">密码</label>
            <input type="password" class="form-control" id="login-password" name="P_PASSWORD" required>
          </div>
          <div class="mb-3 form-check">
            <input type="checkbox" class="form-check-input" id="login-remember">
            <label class="form-check-label" for="login-remember">记住登录状态</label>
          </div>
          <button type="submit" class="btn btn-primary w-100 py-2">登录</button>
        </form>
      </div>

      <!-- 注册表单 -->
      <div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
        <form action="#APP_SESSION#" method="post">
          <input type="hidden" name="p_flow_id" value="#APP_ID#">
          <input type="hidden" name="p_flow_step_id" value="#APP_PAGE_ID#">
          <input type="hidden" name="p_instance" value="#APP_SESSION#">
          <input type="hidden" name="p_request" value="DO_REGISTER">

          <div class="mb-3">
            <label for="reg-username" class="form-label">用户名</label>
            <input type="text" class="form-control" id="reg-username" name="P_NEW_USERNAME" required>
          </div>
          <div class="mb-3">
            <label for="reg-email" class="form-label">邮箱</label>
            <input type="email" class="form-control" id="reg-email" name="P_NEW_EMAIL" required>
          </div>
          <div class="mb-3">
            <label for="reg-password" class="form-label">密码</label>
            <input type="password" class="form-control" id="reg-password" name="P_NEW_PASSWORD" required>
          </div>
          <div class="mb-3">
            <label for="reg-confirm-password" class="form-label">确认密码</label>
            <input type="password" class="form-control" id="reg-confirm-password" name="P_CONFIRM_PASSWORD" required>
          </div>
          <button type="submit" class="btn btn-success w-100 py-2">注册账户</button>
        </form>
      </div>
    </div>
  </div>
</div>

四、页面流程配置

1. 登录流程（REQUEST=DO_LOGIN）

添加一个「PL/SQL过程」类型的页面流程，执行以下代码：

BEGIN
  APEX_AUTHENTICATION.LOGIN(
    p_username => :P_USERNAME,
    p_password => :P_PASSWORD
  );
  -- 登录成功后跳转到主页（替换为你的主页页面ID）
  APEX_UTIL.REDIRECT_URL(p_url => 'f?p=' || :APP_ID || ':1:' || :APP_SESSION);
EXCEPTION
  WHEN OTHERS THEN
    APEX_ERROR.ADD_ERROR(
      p_message => '用户名或密码错误',
      p_display_location => APEX_ERROR.C_INLINE_IN_NOTIFICATION
    );
END;

2. 注册流程（REQUEST=DO_REGISTER）

添加一个「PL/SQL过程」类型的页面流程，执行以下代码：

BEGIN
  -- 验证两次密码是否一致
  IF :P_NEW_PASSWORD != :P_CONFIRM_PASSWORD THEN
    APEX_ERROR.ADD_ERROR(
      p_message => '两次输入的密码不一致',
      p_display_location => APEX_ERROR.C_INLINE_IN_NOTIFICATION
    );
    RETURN;
  END IF;

  -- 创建新用户
  APEX_USER.CREATE_USER(
    p_user_name => :P_NEW_USERNAME,
    p_email_address => :P_NEW_EMAIL,
    p_web_password => :P_NEW_PASSWORD,
    p_change_password_on_first_use => 'Y'
  );

  -- 注册成功后自动登录
  APEX_AUTHENTICATION.LOGIN(
    p_username => :P_NEW_USERNAME,
    p_password => :P_NEW_PASSWORD
  );

  -- 跳转到主页
  APEX_UTIL.REDIRECT_URL(p_url => 'f?p=' || :APP_ID || ':1:' || :APP_SESSION);
EXCEPTION
  WHEN OTHERS THEN
    APEX_ERROR.ADD_ERROR(
      p_message => SQLERRM,
      p_display_location => APEX_ERROR.C_INLINE_IN_NOTIFICATION
    );
END;

3. 动态动作（可选）

添加一个动态动作，监听注册表单的「确认密码」输入框，实时验证密码一致性：

  • 触发条件：「确认密码」输入框失去焦点
  • 动作：执行JavaScript代码：
const password = document.getElementById('reg-password').value;
const confirmPassword = document.getElementById('reg-confirm-password').value;
const submitBtn = document.querySelector('#register button[type="submit"]');

if (password !== confirmPassword) {
  document.getElementById('reg-confirm-password').classList.add('is-invalid');
  submitBtn.disabled = true;
} else {
  document.getElementById('reg-confirm-password').classList.remove('is-invalid');
  submitBtn.disabled = false;
}

五、演示效果说明

  • 页面加载后，左侧轮播自动播放，支持手动切换，图片自适应容器大小
  • 右侧表单区默认显示登录界面，点击「注册」标签可切换到注册表单
  • 登录/注册提交后，通过APEX原生API处理身份验证，错误信息会在页面顶部显示
  • 注册成功后自动登录并跳转到应用主页

内容的提问来源于stack exchange，提问作者Kameswara Kumar Akundi

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分)， 限时 9.9 元起

产品介绍相关文档
火山引擎 最新活动
全面开放
Doubao-Seedance-2.5全新模型升级

模型再升级,30秒超长叙事, 模态参考扩容

HOT
方舟Codingplan

模型自由，工具不限，最新支持 Deepseek-V4 系列、GLM-5.3 系列

HOT
方舟Agent plan

超全模态模型 × Harness 升级，最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列

HOT
新用户特惠专场

大模型19元起，Al应用9.9元畅享，新人首购爆款尽享优惠

最近更新时间：2026.06.13 19:17:05