Suvo Sarkar
打造完美Web登录界面：HTML、CSS与Bootstrap实战

本文还有配套的精品资源，点击获取
简介：登录界面是用户与Web应用程序互动的起点，其设计和实现对用户体验至关重要。本教程将指导开发者如何使用HTML、CSS和Bootstrap框架创建一个功能齐全且视觉吸引力强的登录界面。内容涵盖从基础的表单标签到使用Bootstrap的响应式设计，以及如何结合JavaScript和后端技术来增强界面的业务逻辑和用户验证功能。
1. HTML表单标签基础

HTML表单标签概述

HTML表单是网页交互的核心组件之一，主要用于收集用户输入的数据，如文本、数字、日期等。它们在设计时需考虑到用户体验、数据的安全性和服务器端的数据处理需求。一个典型的HTML表单包含
标签，其中嵌套各种表单元素（如 ,
  </code> 等），允许用户输入不同类型的数据。 </p> 
  <h3> 输入控件详解 </h3> 
  <p> <code> <input> </code> 标签是表单中最灵活的元素，它支持多种 <code> type </code> 属性，如 <code> text </code> , <code> password </code> , <code> checkbox </code> , <code> radio </code> , <code> submit </code> 等，每种类型都对应不同的输入形式或功能。 <code> select </code> 元素提供一个下拉列表供用户选择，而 <code> textarea </code> 元素则用于输入多行文本，常用于评论或反馈。 </p> 
  <h3> 表单的提交与验证 </h3> 
  <p> 表单提交时，数据会发送到服务器，由服务器端脚本进行处理。 <code> <form> </code> 标签提供了 <code> action </code> 属性指定提交地址， <code> method </code> 属性定义提交方式（如GET或POST）。前端验证可使用JavaScript增强用户体验，如校验输入格式、检查必填字段等，避免了不必要的服务器负载和响应延迟。 </p> 
  <pre><code class="language-html"><form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="password" name="password" required>
    <input type="submit" value="登录">
</form>
</code></pre> 
  <p> 以上示例为一个简单的登录表单，其中 <code> required </code> 属性确保在提交前用户必须填写用户名和密码。 </p> 
  <h2> 2. CSS样式应用与美化 </h2> 
  <h3> 2.1 CSS基础与选择器 </h3> 
  <h4> 2.1.1 CSS的作用与基本语法 </h4> 
  <p> CSS（层叠样式表）用于控制网页的外观和格式。它定义了如何显示HTML元素，包括布局、颜色、字体、边框等。通过CSS，开发者能够将内容与表现分离，提高网页的可维护性和可访问性。CSS的作用在于： </p> 
  <ul> 
   <li> <strong> 美化界面 </strong> ：通过颜色、字体、边框、背景、阴影等视觉元素提升用户体验。 </li> 
   <li> <strong> 布局控制 </strong> ：利用定位、盒模型等属性对页面结构进行布局设计。 </li> 
   <li> <strong> 响应式设计 </strong> ：适配不同屏幕尺寸和设备，提高用户体验。 </li> 
  </ul> 
  <p> 基本CSS语法涉及选择器、属性和值，语法结构简单，但可扩展性强大。例如： </p> 
  <pre><code class="language-css">h1 {
    color: blue;
    font-size: 24px;
}
</code></pre> 
  <p> 这段代码选择所有 <code> <h1> </code> 元素，并将其文字颜色设置为蓝色，字体大小设为24像素。 </p> 
  <h4> 2.1.2 选择器的种类及其优先级 </h4> 
  <p> CSS选择器可以分为多种类型，包括元素选择器、类选择器、ID选择器、属性选择器等。正确使用选择器能够精确控制样式应用范围。 </p> 
  <ul> 
   <li> <strong> 元素选择器 </strong> ：直接指定HTML标签类型。 </li> 
   <li> <strong> 类选择器 </strong> ：用 <code> . </code> 表示，选择具有特定类属性的元素。 </li> 
   <li> <strong> ID选择器 </strong> ：用 <code> # </code> 表示，选择具有特定ID属性的元素。 </li> 
   <li> <strong> 属性选择器 </strong> ：通过元素的属性和值来选择元素。 </li> 
  </ul> 
  <p> CSS中的一个重要概念是选择器优先级，也称为CSS特异性。它决定了当多个规则应用于同一元素时，哪个规则将生效。优先级从高到低如下： </p> 
  <ol> 
   <li> 行内样式（直接在元素上应用的样式） </li> 
   <li> ID选择器 </li> 
   <li> 类选择器、伪类和属性选择器 </li> 
   <li> 元素选择器和伪元素 </li> 
  </ol> 
  <p> 为了解决样式的冲突，可以使用 <code> !important </code> 声明，但需谨慎使用，因为它会破坏CSS的自然特异性规则。 </p> 
  <h3> 2.2 CSS布局技术 </h3> 
  <h4> 2.2.1 盒模型的理解与应用 </h4> 
  <p> 盒模型是CSS布局的基础，它将每个HTML元素视为一个矩形盒子。每个盒子由内容（content）、内边距（padding）、边框（border）和外边距（margin）四部分组成。 </p> 
  <ul> 
   <li> <strong> 内容 </strong> ：元素的可见内容区域。 </li> 
   <li> <strong> 内边距 </strong> ：内容与边框之间的透明区域。 </li> 
   <li> <strong> 边框 </strong> ：围绕内容和内边距的框线。 </li> 
   <li> <strong> 外边距 </strong> ：边框外的透明区域，用于分隔相邻元素。 </li> 
  </ul> 
  <p> CSS中可以通过 <code> box-sizing </code> 属性设置盒模型的计算方式，默认为 <code> content-box </code> ， <code> border-box </code> 会包含padding和border在宽度和高度计算中。 </p> 
  <pre><code class="language-css">* {
    box-sizing: border-box;
}
</code></pre> 
  <p> 这段代码将页面中所有元素的盒模型设置为 <code> border-box </code> 。 </p> 
  <h4> 2.2.2 布局的常见模式（如Flexbox、Grid） </h4> 
  <p> CSS布局技术经历了从传统布局（如浮动和定位）到现代布局技术（如Flexbox和Grid）的发展。现代布局技术提供了更强大和灵活的布局能力。 </p> 
  <ul> 
   <li> <strong> Flexbox </strong> ：弹性盒子布局模型，适用于创建灵活的一维布局。它允许子元素在主轴方向上排列成行或列，并能自动调整其大小。 </li> 
   <li> <strong> Grid </strong> ：网格布局模型，用于创建二维布局。它定义了行和列的网格，并将子元素放置在这些网格交叉点上。 </li> 
  </ul> 
  <pre><code class="language-css">.container {
    display: flex; /* 设置为Flexbox布局 */
    flex-direction: row; /* 子元素在行内排列 */
}

.grid-container {
    display: grid; /* 设置为Grid布局 */
    grid-template-columns: 200px 1fr; /* 定义两列的宽度 */
}
</code></pre> 
  <p> 这些代码展示了如何为容器设置Flexbox布局和Grid布局。 </p> 
  <h3> 2.3 界面美化技巧 </h3> 
  <h4> 2.3.1 颜色、字体和边框的样式设计 </h4> 
  <p> 界面美化涉及颜色搭配、字体选择和边框设计。合适的颜色可以传达品牌信息和情感，字体的选择则影响可读性和美观，而边框则能增加视觉效果或分割内容。 </p> 
  <p> 颜色选择时可以使用颜色工具或色彩理论，如色轮、色相对比等。字体选择应基于字体的可读性、风格与品牌定位。边框则可以通过样式（实线、虚线）、宽度和颜色来增强视觉层次。 </p> 
  <pre><code class="language-css">body {
    background-color: #f8f8f8;
    color: #333;
    font-family: 'Arial', sans-serif;
    border: 1px solid #ddd;
}
</code></pre> 
  <h4> 2.3.2 响应式设计与媒体查询 </h4> 
  <p> 响应式设计是让网站在不同设备上都能良好展示的一种设计方法。媒体查询是实现响应式设计的重要工具，它允许根据不同的设备特性应用不同的CSS规则。 </p> 
  <p> 通过 <code> @media </code> 规则，开发者可以定义特定屏幕尺寸或设备类型的样式。以下示例展示了如何设置小屏设备的字体大小和布局： </p> 
  <pre><code class="language-css">/* 对于屏幕宽度小于600px的设备 */
@media only screen and (max-width: 600px) {
    body {
        font-size: 14px;
    }

    .header, .footer {
        padding: 10px;
    }
}
</code></pre> 
  <p> 以上代码表示当屏幕宽度小于600像素时，页面字体大小将调整为14像素，并且头部和底部的内边距设置为10像素。 </p> 
  <h2> 3. Bootstrap响应式设计实现 </h2> 
  <h3> 3.1 Bootstrap框架简介 </h3> 
  <h4> 3.1.1 Bootstrap的特点与优势 </h4> 
  <p> Bootstrap是一个流行的前端框架，它允许开发者快速地创建出响应式的网页布局。其特点主要体现在以下几个方面： </p> 
  <ul> 
   <li> <strong> 丰富的组件库： </strong> Bootstrap提供了大量的预制组件，比如按钮、导航栏、表单控件等，极大地简化了开发者的工作量。 </li> 
   <li> <strong> 一致的跨浏览器体验： </strong> Bootstrap的组件经过优化，以确保在不同的浏览器和设备上有一致的表现。 </li> 
   <li> <strong> 响应式设计： </strong> 该框架的核心之一就是响应式设计，能自动适应不同大小的屏幕和设备。 </li> 
   <li> <strong> 强大的栅格系统： </strong> Bootstrap的栅格系统是构建响应式布局的基础，允许开发者通过简单的类名来创建复杂的布局。 </li> 
   <li> <strong> 自定义和扩展性： </strong> 开发者可以通过Sass变量来自定义Bootstrap的颜色、字体等，适应个性化需求。 </li> 
  </ul> 
  <h4> 3.1.2 Bootstrap的安装与初始化 </h4> 
  <p> 安装Bootstrap有两种常见方式：通过CDN或通过包管理器。以下是使用CDN的示例代码，将其添加到HTML的 <code> <head> </code> 标签内： </p> 
  <pre><code class="language-html"><!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

<!-- Bootstrap JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</code></pre> 
  <p> 通过上述代码，Bootstrap框架被引入到项目中，接下来就可以开始使用它的类和组件来构建响应式网页了。 </p> 
  <h3> 3.2 Bootstrap组件应用 </h3> 
  <h4> 3.2.1 常用组件的使用方法 </h4> 
  <p> Bootstrap提供了丰富而强大的组件，下面以导航栏组件为例，展示如何使用它： </p> 
  <pre><code class="language-html"><nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>
</code></pre> 
  <p> 在这段代码中，我们使用 <code> navbar </code> 类定义了一个导航栏， <code> navbar-expand-lg </code> 类控制了导航栏在不同屏幕尺寸下的表现。 <code> navbar-light bg-light </code> 定义了导航栏的样式。通过 <code> collapse </code> 类和按钮的 <code> data-toggle </code> 属性，我们还可以实现响应式的导航栏折叠功能。 </p> 
  <h4> 3.2.2 组件的定制与扩展 </h4> 
  <p> Bootstrap组件可以进行定制和扩展以满足特定的需求。这通常是通过覆盖默认的CSS样式来完成的。例如，你可以自定义导航栏的背景色： </p> 
  <pre><code class="language-css">.navbar {
  background-color: #343a40;
}
</code></pre> 
  <p> 然后在你的CSS文件中引入这段样式，从而覆盖默认的样式。为了保持样式的整洁和可维护性，建议使用Sass等预处理器的变量和混入来定制和扩展组件。 </p> 
  <h3> 3.3 响应式布局实践 </h3> 
  <h4> 3.3.1 媒体查询与断点的设置 </h4> 
  <p> 响应式布局的核心是媒体查询，它允许开发者为不同的屏幕尺寸设置特定的样式规则。Bootstrap定义了四个默认断点： <code> sm </code> , <code> md </code> , <code> lg </code> , <code> xl </code> 。 </p> 
  <p> 例如，以下代码展示了如何针对不同断点设置样式： </p> 
  <pre><code class="language-css">/* 大屏幕设备（桌面，992px以上） */
@media (min-width: 992px) {
  .custom-class {
    background-color: lightgreen;
  }
}

/* 中等屏幕设备（平板，768px至991px） */
@media (min-width: 768px) and (max-width: 991px) {
  .custom-class {
    background-color: lightblue;
  }
}

/* 小屏幕设备（手机，767px以下） */
@media (max-width: 767px) {
  .custom-class {
    background-color: lightcoral;
  }
}
</code></pre> 
  <p> 通过自定义媒体查询，你可以创建更加符合实际需求的响应式设计。 </p> 
  <h4> 3.3.2 实现跨设备的兼容布局 </h4> 
  <p> 创建跨设备兼容布局的关键在于合理利用Bootstrap提供的栅格系统。栅格系统分为12个列，你可以使用 <code> container </code> , <code> row </code> , <code> col </code> 等类来创建一个响应式的布局： </p> 
  <pre><code class="language-html"><div class="container">
  <div class="row">
    <div class="col-4">Column 1</div>
    <div class="col-4">Column 2</div>
    <div class="col-4">Column 3</div>
  </div>
</div>
</code></pre> 
  <p> 在这个例子中，三个列都各自占满了容器宽度的四分之一（12/3），并且在任何屏幕尺寸下都是这样。当然，你可以根据需要调整列的数量和宽度比例，来创建更复杂的布局。 </p> 
  <p> 此外，利用Bootstrap的响应式工具类可以快速解决常见的布局调整需求，比如在小屏幕上隐藏或显示某些元素： </p> 
  <pre><code class="language-html"><div class="d-none d-sm-block">仅在小屏幕上隐藏</div>
<div class="d-block d-sm-none">仅在小屏幕上显示</div>
</code></pre> 
  <p> 在上述代码中， <code> d-none </code> 和 <code> d-block </code> 分别用于控制元素的显示和隐藏，通过 <code> d-sm- </code> 前缀，我们可以针对不同屏幕尺寸定义不同的行为。 </p> 
  <p> 通过这些方式，开发者可以利用Bootstrap构建出既美观又符合用户需求的响应式网页。 </p> 
  <h2> 4. 登录界面的视觉与功能完整性 </h2> 
  <h3> 4.1 登录界面视觉设计 </h3> 
  <h4> 4.1.1 用户体验与界面美观的关系 </h4> 
  <p> 在构建登录界面时，用户体验与界面美观之间存在密不可分的关系。用户界面不仅仅需要具备功能性的要求，同时还需要在视觉上吸引用户，从而提供更加直观、易用且愉悦的用户体验。良好的视觉设计可以简化用户操作流程，减少用户在进行登录操作时的心理负担。 </p> 
  <p> 例如，通过使用直观的图形和布局，用户可以快速理解登录表单的输入要求。另外，采用颜色对比、动画效果和反馈机制，可以提示用户进行下一步操作，甚至在用户输入错误信息时给予视觉上的提示，提高用户的满意度和界面的整体吸引力。 </p> 
  <h4> 4.1.2 视觉设计的要素与原则 </h4> 
  <p> 为了达成上述的用户体验目标，视觉设计需要遵循一定的原则和要素。设计要素包括色彩、形状、排版、图像和布局，而设计原则则是清晰性、一致性、反馈和简洁性。 </p> 
  <ul> 
   <li> <strong> 清晰性 </strong> ：确保所有的文本和控件都易于阅读，使用标准的提示信息和易懂的图标。 </li> 
   <li> <strong> 一致性 </strong> ：界面的元素和操作流程需要遵循统一的风格，以减少用户的学习成本。 </li> 
   <li> <strong> 反馈 </strong> ：提供即时的反馈信息，如表单验证错误提示、登录过程的进度显示等。 </li> 
   <li> <strong> 简洁性 </strong> ：界面元素不应过多，以避免用户感到混乱。简洁的界面有助于用户集中注意力在必要的操作上。 </li> 
  </ul> 
  <p> 在设计过程中，设计师通常会借助一些设计工具和规范来指导他们创建出既美观又实用的界面。例如，他们可能会参照材料设计（Material Design）或苹果的Human Interface Guidelines等知名的设计系统。 </p> 
  <h4> 4.1.3 代码实现登录界面的视觉设计 </h4> 
  <p> 为了将上述设计原则和要素转化为实际的代码，我们可以使用HTML和CSS来实现。下面是一个简单的示例代码块，展示了如何创建一个基本的登录表单界面。 </p> 
  <pre><code class="language-html"><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login Page Design</title>
<style>
  body {
    font-family: Arial, sans-serif;
    background-color: #f7f7f7;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
  }
  .login-container {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }
  .login-container input[type="text"], .login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
  }
  .login-container input[type="submit"] {
    background-color: #5cb85c;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
  }
  .login-container input[type="submit"]:hover {
    background-color: #4cae4c;
  }
</style>
</head>
<body>
  <div class="login-container">
    <h2>Login</h2>
    <form>
      <input type="text" placeholder="Username" required>
      <input type="password" placeholder="Password" required>
      <input type="submit" value="Login">
    </form>
  </div>
</body>
</html>
</code></pre> 
  <p> 在这个示例中，我们通过使用内联样式创建了一个简单的登录表单。这个表单拥有基本的输入框和提交按钮，同时通过CSS样式提供了简洁且一致的视觉设计。 </p> 
  <h4> 4.1.4 设计工具和资源的运用 </h4> 
  <p> 设计师在创建视觉设计时，通常会使用各种设计工具和资源。常见的工具包括Adobe系列（如Photoshop、Illustrator）、Sketch、Figma和InVision等。这些工具可以帮助设计师创建原型、设计图和高保真度的用户界面。 </p> 
  <p> 除了设计工具，设计师还会利用大量的在线资源库来获取图标、字体和高质量图片等。这些资源网站包括但不限于Unsplash、Flaticon和Google Fonts。通过运用这些资源，设计师能够更加高效地创建出视觉吸引且功能完善的登录界面。 </p> 
  <h3> 4.2 功能完整性分析 </h3> 
  <h4> 4.2.1 功能需求的分析与实现 </h4> 
  <p> 为了确保登录界面的功能完整性，我们需要对功能需求进行详尽的分析。这不仅包括基本的用户名和密码输入框，还包括表单验证、错误处理、第三方登录集成等功能。 </p> 
  <ul> 
   <li> <strong> 表单验证 </strong> ：在前端进行初步的输入验证，确保用户输入的内容符合要求。 </li> 
   <li> <strong> 错误处理 </strong> ：当用户输入错误信息时，系统需要提供清晰的反馈。 </li> 
   <li> <strong> 第三方登录集成 </strong> ：如社交媒体登录，可以简化用户的登录流程。 </li> 
  </ul> 
  <h4> 4.2.2 用户反馈与界面优化 </h4> 
  <p> 在用户界面设计的过程中，收集用户反馈是一个不断优化界面的重要环节。设计师可以通过各种方式，如问卷调查、用户访谈或使用分析工具，来了解用户对登录界面的看法和改进建议。 </p> 
  <p> 根据收集到的反馈信息，设计师可以对界面进行微调，例如调整输入框的位置、改变颜色方案或者优化提示信息等。此外，用户测试可以帮助发现潜在的设计问题或交互问题，进一步提升登录界面的易用性和安全性。 </p> 
  <h3> 4.3 安全性考量 </h3> 
  <h4> 4.3.1 登录安全性的基本要求 </h4> 
  <p> 登录界面的设计不仅需要考虑用户体验和视觉美观，还需要确保安全性。基本的安全要求包括但不限于： </p> 
  <ul> 
   <li> <strong> 数据加密 </strong> ：传输过程中使用HTTPS协议来加密数据。 </li> 
   <li> <strong> 验证码 </strong> ：为了防止自动化攻击，如机器人登录尝试，使用验证码机制。 </li> 
   <li> <strong> 二次验证 </strong> ：为高风险操作提供二次验证，例如使用手机短信或电子邮件验证码。 </li> 
  </ul> 
  <h4> 4.3.2 常见的安全漏洞与防御策略 </h4> 
  <p> 虽然前端可以实施一些基本的安全措施，但后端的安全防御措施更为关键。常见的安全漏洞包括跨站脚本攻击（XSS）和跨站请求伪造（CSRF）。防御这些漏洞的策略包括： </p> 
  <ul> 
   <li> <strong> 输入验证 </strong> ：确保所有用户输入都经过验证，防止恶意脚本的注入。 </li> 
   <li> <strong> 输出编码 </strong> ：对所有输出进行编码处理，防止XSS攻击。 </li> 
   <li> <strong> 令牌生成 </strong> ：使用令牌来验证请求的来源，防止CSRF攻击。 </li> 
  </ul> 
  <p> 通过细致的需求分析和用户反馈收集，以及重视安全性问题，我们可以构建一个既美观又功能完整的登录界面。这不仅需要前端技术的支持，还需要后端以及安全技术的协助，以保证用户在使用过程中既舒适又安全。 </p> 
  <h2> 5. JavaScript与后端技术集成 </h2> 
  <h3> 5.1 JavaScript基础 </h3> 
  <h4> 5.1.1 JavaScript的作用与语法基础 </h4> 
  <p> JavaScript是一种广泛使用的脚本语言，它让网页具备交互性，使得用户能够与网页进行实时的交互操作。JavaScript 可以改变 HTML 和 CSS 以更新用户界面，从而创建动态网站。JavaScript 运行在客户端，即用户的浏览器中，这也意味着它能够快速响应用户的操作。 </p> 
  <p> 语法是任何编程语言的基础，对于JavaScript来说也不例外。JavaScript 的核心语法包括变量声明、数据类型、运算符、条件语句、循环、函数等基本构建块。例如，使用 <code> var </code> 或 <code> let </code> 声明一个变量，然后赋予字符串、数字等数据类型。条件语句如 <code> if </code> 用于基于不同条件执行不同的代码块，而 <code> function </code> 关键字用于定义可复用的代码块，即函数。 </p> 
  <pre><code class="language-javascript">// 变量声明示例
let greeting = "Hello, World!";

// 条件语句示例
if (greeting === "Hello, World!") {
    console.log("The greeting is correct.");
}

// 函数示例
function sayHello() {
    console.log("Hello!");
}
</code></pre> 
  <h4> 5.1.2 常用的DOM操作与事件处理 </h4> 
  <p> 文档对象模型（DOM）是针对HTML和XML文档的一个API，允许程序和脚本动态地访问和更新文档的内容、结构和样式。JavaScript可以利用DOM来读取、修改和添加网页上的元素。 </p> 
  <p> 事件处理是JavaScript中非常重要的一个部分，它让JavaScript可以响应用户的操作，如点击、按键、鼠标移动等。通过为元素添加事件监听器，JavaScript能够执行相应的函数来处理这些事件。 </p> 
  <pre><code class="language-javascript">// DOM操作示例
const heading = document.querySelector("h1"); // 获取第一个h1元素
heading.textContent = "New Heading"; // 改变其文本内容

// 事件处理示例
document.body.addEventListener("click", function() {
    console.log("Body was clicked.");
});
</code></pre> 
  <h3> 5.2 前后端数据交互 </h3> 
  <h4> 5.2.1 AJAX与JSON的基本使用 </h4> 
  <p> AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个页面的情况下，能够让网页实现异步数据更新的技术。JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，易于人阅读和编写，同时也易于机器解析和生成。 </p> 
  <p> 在JavaScript中，使用 <code> XMLHttpRequest </code> 对象或者现代的 <code> fetch </code> API可以实现AJAX请求。JSON常作为数据的传输格式，在前后端交互中被广泛使用。前端可以发送JSON数据到服务器，并从服务器接收JSON格式的响应数据。 </p> 
  <pre><code class="language-javascript">// AJAX使用fetch API发送请求的示例
fetch('https://example.com/data')
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error:', error));
</code></pre> 
  <h4> 5.2.2 使用Fetch API进行网络请求 </h4> 
  <p> <code> fetch </code> API是现代浏览器提供的一个内置的网络请求API，它提供了一个更强大、更灵活的方式来发起网络请求。与 <code> XMLHttpRequest </code> 相比， <code> fetch </code> API的语法更简洁，更易于使用。 <code> fetch </code> 返回一个Promise，这让它能够与 <code> async/await </code> 语法很好地配合，使得异步代码的编写更加直观。 </p> 
  <pre><code class="language-javascript">// 使用async/await语法使用fetch API
async function fetchData() {
    try {
        const response = await fetch('https://example.com/data');
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        console.log(data);
    } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
    }
}

fetchData();
</code></pre> 
  <h3> 5.3 功能实现与优化 </h3> 
  <h4> 5.3.1 登录验证逻辑的实现 </h4> 
  <p> 在Web应用中，登录验证是一个核心功能。前端JavaScript通常负责收集用户输入的用户名和密码，然后通过AJAX或Fetch API发送到后端进行验证。验证成功后，服务器通常会返回一个令牌（如JWT），前端将此令牌存储起来，并用于后续的请求认证。 </p> 
  <pre><code class="language-javascript">// 登录验证的前端逻辑示例
function login(username, password) {
    fetch('https://example.com/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ username, password })
    })
    .then(response => response.json())
    .then(data => {
        if(data.success) {
            // 存储令牌，并进行其他验证成功后的操作
            localStorage.setItem('authToken', data.token);
            console.log("Login successful");
        } else {
            console.log("Login failed");
        }
    })
    .catch(error => console.error('Login error:', error));
}
</code></pre> 
  <h4> 5.3.2 性能优化与错误处理 </h4> 
  <p> 在实现前端功能时，性能优化是一个不可忽视的环节。合理的代码组织、减少HTTP请求次数、代码压缩等都是常见的优化手段。此外，前端代码应当具备健壮性，这意味着应当对可能出现的错误进行捕获和处理。 </p> 
  <pre><code class="language-javascript">// 代码压缩与错误处理的示例
try {
    // 正常执行的代码
} catch (error) {
    // 错误处理代码
    console.error('An error occurred:', error);
    // 还可以进行额外的操作，例如显示错误信息给用户
}
</code></pre> 
  <p> JavaScript与后端技术的集成是实现现代Web应用不可或缺的一部分。通过使用AJAX和Fetch API进行前后端数据交互，以及通过DOM操作实现丰富的前端功能，开发者可以创建功能强大的Web应用。同时，确保代码的性能优化和错误处理机制，则有助于提升用户体验和应用的稳定性。 </p> 
  <h2> 6. 综合案例分析 </h2> 
  <h3> 6.1 案例需求分析 </h3> 
  <h4> 6.1.1 确定项目目标与用户场景 </h4> 
  <p> 在本章节中，我们探讨一个综合案例——开发一个功能齐全的在线论坛。首先，项目目标是创建一个用户友好的界面，其中用户可以注册、登录、发帖、回帖以及查看其他用户的信息。 </p> 
  <p> 确定用户场景对理解目标用户群体至关重要。我们设想了以下几种典型的用户场景： </p> 
  <ul> 
   <li> <strong> 新用户注册 </strong> ：用户首次访问论坛时，应被引导至注册页面进行账户创建。 </li> 
   <li> <strong> 常规用户登录 </strong> ：已有账户的用户应能快速登录，参与论坛讨论。 </li> 
   <li> <strong> 发帖与回帖 </strong> ：用户应能够创建新帖子和回复现有帖子，同时管理自己的帖子。 </li> 
   <li> <strong> 资料浏览 </strong> ：用户可以查看其他用户的资料信息，包括发帖量、等级等。 </li> 
  </ul> 
  <h4> 6.1.2 设计技术路线与实现方案 </h4> 
  <p> 为了实现上述目标，我们决定采用前后端分离的开发模式。前端使用现代JavaScript框架，如React或Vue.js，搭配Bootstrap来提高响应式布局的开发效率。后端则选择Node.js搭配Express框架，并结合数据库技术如MongoDB来存储用户数据和帖子信息。 </p> 
  <p> 技术路线如下： </p> 
  <ul> 
   <li> <strong> 前端实现 </strong> ：利用React和Bootstrap构建用户界面，利用Ajax与后端进行数据交互。 </li> 
   <li> <strong> 后端实现 </strong> ：使用Node.js和Express构建RESTful API，用MongoDB作为数据存储。 </li> 
   <li> <strong> 安全性 </strong> ：对敏感操作如登录、注册等采用HTTPS协议和JWT（JSON Web Tokens）进行数据加密传输，保护用户信息。 </li> 
  </ul> 
  <h3> 6.2 功能实现 </h3> 
  <h4> 6.2.1 编码实现登录界面的各个部分 </h4> 
  <p> 登录页面是用户与系统交互的第一个界面。在这个部分，我们将重点关注HTML、CSS和JavaScript的综合应用。 </p> 
  <p> 首先是HTML结构的实现： </p> 
  <pre><code class="language-html"><form id="loginForm" class="form-signin">
  <h2 class="form-signin-heading">欢迎登录</h2>
  <label for="inputUsername" class="sr-only">用户名</label>
  <input type="text" id="inputUsername" class="form-control" placeholder="用户名" required autofocus>
  <label for="inputPassword" class="sr-only">密码</label>
  <input type="password" id="inputPassword" class="form-control" placeholder="密码" required>
  <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</code></pre> 
  <p> 对应的CSS样式： </p> 
  <pre><code class="language-css">.form-signin {
  width: 100%;
  max-width: 330px;
  padding: 15px;
  margin: auto;
}
.form-signin .form-control {
  position: relative;
  box-sizing: border-box;
  height: auto;
  padding: 10px;
  font-size: 16px;
}
.form-signin .btn {
  margin-top: 15px;
}
</code></pre> 
  <p> JavaScript登录逻辑，使用Fetch API： </p> 
  <pre><code class="language-javascript">document.getElementById('loginForm').addEventListener('submit', function(e) {
  e.preventDefault();
  const username = document.getElementById('inputUsername').value;
  const password = document.getElementById('inputPassword').value;
  fetch('/api/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ username, password })
  })
  .then(response => response.json())
  .then(data => {
    if(data.success) {
      localStorage.setItem('userToken', data.token);
      window.location.href = '/dashboard.html';
    } else {
      alert('登录失败: ' + data.message);
    }
  })
  .catch(error => {
    console.error('登录过程中发生错误: ', error);
  });
});
</code></pre> 
  <h4> 6.2.2 测试与调试过程中的问题解决 </h4> 
  <p> 测试过程中，我们可能遇到的问题包括： </p> 
  <ul> 
   <li> <strong> 表单提交时的跨域问题 </strong> ：如果前端和后端部署在不同的域上，可能需要配置CORS。 </li> 
   <li> <strong> 响应式设计问题 </strong> ：不同设备上的显示可能不一致，需要使用媒体查询进行调整。 </li> 
   <li> <strong> 安全性问题 </strong> ：使用HTTPS和JWT可以减少安全风险，但这需要正确的配置和使用。 </li> 
  </ul> 
  <h3> 6.3 案例总结与展望 </h3> 
  <h4> 6.3.1 项目总结与评估 </h4> 
  <p> 项目完成之后，需要对整体项目进行总结和评估。这包括评估项目是否达到既定目标，用户反馈如何，以及技术上有哪些不足。同时，也要对代码质量、测试覆盖率、部署流程等方面进行评估。 </p> 
  <h4> 6.3.2 对未来技术趋势的预测与建议 </h4> 
  <p> 随着技术的不断进步，我们预计前端技术会更加模块化和组件化，后端会继续朝着微服务架构演进。建议保持对新技术的关注，例如Serverless架构、WebAssembly等，同时持续学习和实践最佳开发、部署和安全实践。 </p> 
  <p> 本文还有配套的精品资源，点击获取 <img alt="menu-r.4af5f7ec.gif" src="http://img.e-com-net.com/image/info8/b382ea984dff45babbf94bb96ef7b607.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;" width="0" height="0"></p> 
  <p> 简介：登录界面是用户与Web应用程序互动的起点，其设计和实现对用户体验至关重要。本教程将指导开发者如何使用HTML、CSS和Bootstrap框架创建一个功能齐全且视觉吸引力强的登录界面。内容涵盖从基础的表单标签到使用Bootstrap的响应式设计，以及如何结合JavaScript和后端技术来增强界面的业务逻辑和用户验证功能。 </p> 
  <p> 本文还有配套的精品资源，点击获取 <img alt="menu-r.4af5f7ec.gif" src="http://img.e-com-net.com/image/info8/b382ea984dff45babbf94bb96ef7b607.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;" width="0" height="0"></p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1947944893716426752"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(打造完美Web登录界面：HTML、CSS与Bootstrap实战)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1950233199242178560.htm"
                           title="x86-64汇编语言训练程序与实战" target="_blank">x86-64汇编语言训练程序与实战</a>
                        <span class="text-muted">十除以十等于一</span>

                        <div>本文还有配套的精品资源，点击获取简介：汇编语言是一种低级语言，与机器代码紧密相关，特别适用于编写系统级代码及性能要求高的应用。nasm编译器是针对x86和x86-64架构的汇编语言编译器，支持多种语法风格和指令集。项目Euler提供数学和计算机科学问题，鼓励编程技巧应用，前100个问题的答案可共享。x86-64架构扩展了寄存器数量并引入新指令，提升了数据处理效率。学习汇编语言能够深入理解计算机底层</div>
                    </li>
                    <li><a href="/article/1950232910862807040.htm"
                           title="《玉骨遥》：大司命为什么不杀朱颜？原因没那么简单" target="_blank">《玉骨遥》：大司命为什么不杀朱颜？原因没那么简单</a>
                        <span class="text-muted">windy天意晚晴</span>

                        <div>《玉骨遥》里，朱颜就是时影的命劫之人。重明与时影早就知道，他们一直瞒着大司命，如今大司命也知道了真相。可是大司命却没有杀朱颜，而是给朱颜下了诛心咒，还说时影的命劫已经破了，真的如此吗？1、计划总是赶不上变化的大司命从目前剧情来说，大司命还不如时影，他信心十足的事情总会有纰漏。他不让时影见命劫之女，结果时影还是遇上了。他想让时影走火入魔，一心复仇，结果时影在朱颜的劝说下放下了仇恨。大司命让时影开山收</div>
                    </li>
                    <li><a href="/article/1950232820773351424.htm"
                           title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a>
                        <span class="text-muted">good2know</span>

                        <div>本文还有配套的精品资源，点击获取简介：本项目是一套为移动端设计的jQuery实现方案，用于简化用户在选择城市和区县时的流程。它包括所有必需文件：HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项，实现城市到区县的联动效果，支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用，并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div>
                    </li>
                    <li><a href="/article/1950231381485350912.htm"
                           title="《极简思维》第三部分" target="_blank">《极简思维》第三部分</a>
                        <span class="text-muted">小洋苏兮</span>

                        <div>整理你的人际关系如何改善人际关系？摘录：因为人际关系问题是人们生活中不快乐的主要原因。感想：感觉这个说的挺对，之前我总是埋头学习，不管舍友不管自己的合作伙伴的一些事情，但实际上，这学期关注了之后好多了摘录：“亲密关系与社交会让你健康而快乐。这是基础。太过于关注成就或不太关心人际关系的人都不怎么快乐。基本上来说，人类就是建立在人脉关系上的。”感想：但是如果有时想的太多就不太好，要以一个开放的心态跟别</div>
                    </li>
                    <li><a href="/article/1950231254427299840.htm"
                           title="我不懂什么是爱，但我给你全部我拥有的" target="_blank">我不懂什么是爱，但我给你全部我拥有的</a>
                        <span class="text-muted">香尧</span>

                        <div>因为怕黑，所以愿意陪伴在夜中行走的人，给他一点点的安全感。因为渴望温柔与爱，所以愿意为别的孩子付出爱与温柔。因为曾遭受侮辱和伤害，所以不以同样的方式施于其他人。如果你向别人出之以利刃，对方还了你爱与包容，真的不要感激他，真的不要赞美他。每一个被人伤害过的人心里都留下了一颗仇恨的种子，他也会想要有一天以眼还眼，以牙还牙。但他未让那颗种子生根发芽，他用一把心剑又一次刺向他自己，用他血荐仇恨，开出一朵温</div>
                    </li>
                    <li><a href="/article/1950230804957294592.htm"
                           title="SpringMVC执行流程（原理），通俗易懂" target="_blank">SpringMVC执行流程（原理），通俗易懂</a>
                        <span class="text-muted">国服冰</span>
<a class="tag" taget="_blank" href="/search/SpringMVC/1.htm">SpringMVC</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a>
                        <div>SpringMVC执行流程（原理），通俗易懂一、图解SpringMVC流程二、进一步理解Springmvc的执行流程1、导入依赖2、建立展示的视图3、web.xml4、spring配置文件springmvc-servlet5、Controller6、tomcat配置7、访问的url8、视图页面一、图解SpringMVC流程图为SpringMVC的一个较完整的流程图，实线表示SpringMVC框架提</div>
                    </li>
                    <li><a href="/article/1950228468897738752.htm"
                           title="别再讲道理啦，对方听不进去的" target="_blank">别再讲道理啦，对方听不进去的</a>
                        <span class="text-muted">方所</span>

                        <div>我之前写过一篇叫做《你总妄想改变他人》，然后就有朋友跟我说，有一些方法可以改变他人之类的。嗯，是这样，但是任何具体的问题，都要限定好语境，描述清楚前提条件，然后再表达观点，我的这位朋友的说法就犯了一刀切的错误，这样并不能让讨论正常展开（这篇我得先给她看看，不然可能会挨揍）。好了，hhhh，谁让她不能写文章呢，我就来再说一说吧。我前面说过，我们在学到一个道理、学会一种方法之后，总是迫不及待地想要去与</div>
                    </li>
                    <li><a href="/article/1950228285266915328.htm"
                           title="Git 与 GitHub 的对比与使用指南" target="_blank">Git 与 GitHub 的对比与使用指南</a>
                        <span class="text-muted">一念&</span>
<a class="tag" taget="_blank" href="/search/%E5%85%B6%E5%AE%83/1.htm">其它</a><a class="tag" taget="_blank" href="/search/git/1.htm">git</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
                        <div>Git与GitHub的对比与使用指南在软件开发中，Git和GitHub是两个密切相关但本质不同的工具。下面我将逐步解释它们的定义、区别、核心概念以及如何协同使用，确保内容真实可靠，基于广泛的技术实践。1.什么是Git？Git是一个分布式版本控制系统，由LinusTorvalds于2005年创建。它的核心功能是跟踪代码文件的变化，帮助开发者管理项目历史记录、协作和回滚错误。Git是开源的，可以在本地</div>
                    </li>
                    <li><a href="/article/1950228158863175680.htm"
                           title="英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？" target="_blank">英伟达靠什么支撑起了4万亿？AI泡沫还能撑多久？</a>
                        <span class="text-muted"></span>

                        <div>英伟达市值突破4万亿美元，既是AI算力需求爆发的直接体现，也暗含市场对未来的狂热预期。其支撑逻辑与潜在风险并存，而AI泡沫的可持续性则取决于技术、商业与地缘政治的复杂博弈。⚙️一、英伟达4万亿市值的核心支撑因素技术垄断与生态壁垒硬件优势：英伟达GPU在AI训练市场占有率超87%，H100芯片的FP16算力达1979TFLOPS，领先竞品3-5倍。CUDA生态：400万开发者构建的软件护城河，成为A</div>
                    </li>
                    <li><a href="/article/1950228032513961984.htm"
                           title="ARM 和 AMD 架构的区别" target="_blank">ARM 和 AMD 架构的区别</a>
                        <span class="text-muted">m0_69576880</span>
<a class="tag" taget="_blank" href="/search/arm%E5%BC%80%E5%8F%91/1.htm">arm开发</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a>
                        <div>ARM架构和AMD架构是两种不同的计算机处理器架构，它们有以下几个主要区别：设计出发点、兼容性、性能特点、市场定价。设计出发点：①ARM构架：ARM架构最初是为嵌入式系统设计的，旨在提供低功耗和高效能的解决方案。它主要应用于移动设备、嵌入式系统和物联网设备②AMD架构：AMD架构是基于x86架构的扩展，旨在提供与Intel架构兼容的处理器。它主要用于台式机、服务器和工作站等计算机系统。兼容性：AR</div>
                    </li>
                    <li><a href="/article/1950227023859347456.htm"
                           title="Linux系统配置（应用程序）" target="_blank">Linux系统配置（应用程序）</a>
                        <span class="text-muted">1风天云月</span>
<a class="tag" taget="_blank" href="/search/Linux/1.htm">Linux</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E7%A8%8B%E5%BA%8F/1.htm">应用程序</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%AF%91%E5%AE%89%E8%A3%85/1.htm">编译安装</a><a class="tag" taget="_blank" href="/search/rpm/1.htm">rpm</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a>
                        <div>目录前言一、应用程序概述1、命令与程序的关系2、程序的组成3、软件包封装类型二、RPM1、RPM概述2、RPM用法三、编译安装1、解包2、配置3、编译4、安装5、启用httpd服务结语前言在Linux中的应用程序被视为将软件包安装到系统中后产生的各种文档，其中包括可执行文件、配置文件、用户手册等内容，这些文档被组织为一个有机的整体，为用户提供特定的功能，因此对于“安装软件包”与“安装应用程序”这两</div>
                    </li>
                    <li><a href="/article/1950226517397139456.htm"
                           title="JVM 内存模型深度解析：原子性、可见性与有序性的实现" target="_blank">JVM 内存模型深度解析：原子性、可见性与有序性的实现</a>
                        <span class="text-muted">练习时长两年半的程序员小胡</span>
<a class="tag" taget="_blank" href="/search/JVM/1.htm">JVM</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%89%96%E6%9E%90%EF%BC%9A%E4%BB%8E%E9%9D%A2%E8%AF%95%E8%80%83%E7%82%B9%E5%88%B0%E7%94%9F%E4%BA%A7%E5%AE%9E%E8%B7%B5/1.htm">深度剖析：从面试考点到生产实践</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%86%85%E5%AD%98%E6%A8%A1%E5%9E%8B/1.htm">内存模型</a>
                        <div>在了解了JVM的基础架构和类加载机制后，我们需要进一步探索Java程序在多线程环境下的内存交互规则。JVM内存模型（JavaMemoryModel，JMM）定义了线程和主内存之间的抽象关系，它通过规范共享变量的访问方式，解决了多线程并发时的数据一致性问题。本文将从内存模型的核心目标出发，详解原子性、可见性、有序性的实现机制，以及volatile、synchronized等关键字在其中的作用。一、J</div>
                    </li>
                    <li><a href="/article/1950226391064702976.htm"
                           title="Flowable 实战落地核心：选型决策与坑点破解" target="_blank">Flowable 实战落地核心：选型决策与坑点破解</a>
                        <span class="text-muted">练习时长两年半的程序员小胡</span>
<a class="tag" taget="_blank" href="/search/Flowable/1.htm">Flowable</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">流程引擎实战指南</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a><a class="tag" taget="_blank" href="/search/BPMN/1.htm">BPMN</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E/1.htm">流程引擎</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>在企业级流程引擎的落地过程中，选型的准确性和坑点的预见性直接决定项目成败。本文聚焦Flowable实战中最关键的“选型决策”与“常见坑点”，结合真实项目经验，提供可落地的解决方案。一、流程引擎选型：从业务本质出发1.1选型的三大核心维度企业在选择流程引擎时，需避免陷入“技术崇拜”，应回归业务本质。评估Flowable是否适用，可从三个维度判断：业务复杂度若流程涉及动态审批链（如按金额自动升级审批）</div>
                    </li>
                    <li><a href="/article/1950226390070652928.htm"
                           title="Flowable 高级扩展：自定义元素与性能优化实战" target="_blank">Flowable 高级扩展：自定义元素与性能优化实战</a>
                        <span class="text-muted">练习时长两年半的程序员小胡</span>
<a class="tag" taget="_blank" href="/search/Flowable/1.htm">Flowable</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E%E5%AE%9E%E6%88%98%E6%8C%87%E5%8D%97/1.htm">流程引擎实战指南</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%9B%BE/1.htm">流程图</a><a class="tag" taget="_blank" href="/search/flowable/1.htm">flowable</a><a class="tag" taget="_blank" href="/search/BPMN/1.htm">BPMN</a><a class="tag" taget="_blank" href="/search/%E6%B5%81%E7%A8%8B%E5%BC%95%E6%93%8E/1.htm">流程引擎</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>在前五篇文章中，我们从基础概念、流程设计、API实战、SpringBoot集成，到外部系统协同，逐步构建了Flowable的应用体系。但企业级复杂场景中，原生功能往往难以满足定制化需求——比如需要特殊的审批规则网关、与决策引擎联动实现动态路由，或是在高并发场景下优化流程引擎性能。本文将聚焦Flowable的高级扩展能力，详解如何自定义流程元素、集成规则引擎，并掌握大型系统中的性能调优策略。一、自定</div>
                    </li>
                    <li><a href="/article/1950226137909096448.htm"
                           title="互信息：理论框架、跨学科应用与前沿进展" target="_blank">互信息：理论框架、跨学科应用与前沿进展</a>
                        <span class="text-muted">大千AI助手</span>
<a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/OTHER/1.htm">OTHER</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E5%AD%A6%E4%B9%A0/1.htm">深度学习</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E4%BA%92%E4%BF%A1%E6%81%AF/1.htm">互信息</a><a class="tag" taget="_blank" href="/search/%E9%A6%99%E5%86%9C/1.htm">香农</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E4%BF%A1/1.htm">通信</a><a class="tag" taget="_blank" href="/search/%E9%9A%8F%E6%9C%BA%E5%8F%98%E9%87%8F/1.htm">随机变量</a>
                        <div>1.起源与核心定义互信息（MutualInformation,MI）由克劳德·香农（ClaudeShannon）在1948年开创性论文《AMathematicalTheoryofCommunication》中首次提出，该论文奠定了现代信息论的基础。互信息用于量化两个随机变量之间的统计依赖关系，定义为：若已知一个随机变量的取值，能为另一个随机变量提供的信息量。数学上，对于离散随机变量XXX和YYY，</div>
                    </li>
                    <li><a href="/article/1950225785054883840.htm"
                           title="Java | 多线程经典问题 - 售票" target="_blank">Java | 多线程经典问题 - 售票</a>
                        <span class="text-muted">Ada54</span>

                        <div>一、售票需求1）同一个票池2）多个窗口卖票，不能出售同一张票二、售票问题代码实现（线程与进程小总结，请戳：Java|线程和进程，创建线程）step1：定义SaleWindow类实现Runnable接口，覆盖run方法step2：实例化SaleWindow对象，创建Thread对象，将SaleWindow作为参数传给Thread类的构造函数，然后通过Thread.start()方法启动线程step3</div>
                    </li>
                    <li><a href="/article/1950225381961297920.htm"
                           title="SpringMVC的执行流程" target="_blank">SpringMVC的执行流程</a>
                        <span class="text-muted"></span>

                        <div>1、什么是MVCMVC是一种设计模式。MVC的原理图如下所示M-Model模型（完成业务逻辑：有javaBean构成，service+dao+entity）V-View视图（做界面的展示jsp，html……）C-Controller控制器（接收请求—>调用模型—>根据结果派发页面2、SpringMVC是什么SpringMVC是一个MVC的开源框架，SpringMVC=Struts2+Spring，</div>
                    </li>
                    <li><a href="/article/1950225255079407616.htm"
                           title="企业级区块链平台Hyperchain核心原理剖析" target="_blank">企业级区块链平台Hyperchain核心原理剖析</a>
                        <span class="text-muted">boyedu</span>
<a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E5%8C%BA%E5%9D%97%E9%93%BE/1.htm">区块链</a><a class="tag" taget="_blank" href="/search/%E4%BC%81%E4%B8%9A%E7%BA%A7%E5%8C%BA%E5%9D%97%E9%93%BE%E5%B9%B3%E5%8F%B0/1.htm">企业级区块链平台</a><a class="tag" taget="_blank" href="/search/Hyperchain/1.htm">Hyperchain</a>
                        <div>Hyperchain作为国产自主可控的企业级联盟区块链平台，其核心原理围绕高性能共识、隐私保护、智能合约引擎及可扩展架构展开，通过多模块协同实现企业级区块链网络的高效部署与安全运行。以下从核心架构、关键技术、性能优化、安全机制、应用场景五个维度展开剖析：一、核心架构：分层解耦与模块化设计Hyperchain采用分层架构，将区块链功能解耦为独立模块，支持灵活组合与扩展：P2P网络层由验证节点（VP）</div>
                    </li>
                    <li><a href="/article/1950224616647618560.htm"
                           title="JAVA接口机结构解析" target="_blank">JAVA接口机结构解析</a>
                        <span class="text-muted">秃狼</span>
<a class="tag" taget="_blank" href="/search/SpringBoot/1.htm">SpringBoot</a><a class="tag" taget="_blank" href="/search/%E5%85%AB%E8%82%A1%E6%96%87/1.htm">八股文</a><a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a>
                        <div>什么是接口机在Java项目中，接口机通常指用于与外部系统进行数据交互的中间层，负责处理请求和响应的转换、协议适配、数据格式转换等任务。接口机的结构我们的接口机的结构分为两个大部分，外部接口机和内部接口机，在业务的调度上也是通过mq来实现的，只要的目的就是为了解耦合和做差异化。在接口机中主要的方法就是定时任务，消息的发送和消费，其他平台调用接口机只能提供外部接口机的方法进行调用，外部接口机可以提供消</div>
                    </li>
                    <li><a href="/article/1950224490331959296.htm"
                           title="通义万相2.2：开启高清视频生成新纪元" target="_blank">通义万相2.2：开启高清视频生成新纪元</a>
                        <span class="text-muted">Liudef06小白</span>
<a class="tag" taget="_blank" href="/search/%E7%89%B9%E6%AE%8A%E4%B8%93%E6%A0%8F/1.htm">特殊专栏</a><a class="tag" taget="_blank" href="/search/AIGC/1.htm">AIGC</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/%E9%80%9A%E4%B9%89%E4%B8%87%E7%9B%B82.2/1.htm">通义万相2.2</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E7%94%9F%E8%A7%86%E9%A2%91/1.htm">图生视频</a>
                        <div>通义万相2.2：开启高清视频生成新纪元2025年7月28日，中国AI领域迎来里程碑时刻——通义万相团队正式开源其革命性视频生成模型Wan2.2的核心权重，这标志着开源社区首次获得支持720P高清视频生成的先进模型架构。一、架构革新：混合专家系统1.1MoE视频扩散架构通义万相2.2首次将混合专家（MoE）架构引入视频扩散模型，通过双专家系统实现计算效率与模型容量的平衡：classMoEVideoD</div>
                    </li>
                    <li><a href="/article/1950224132230672384.htm"
                           title="氧惠官方邀请码333777，氧惠邀请码怎么获得？氧惠邀请码有什么套路？" target="_blank">氧惠官方邀请码333777，氧惠邀请码怎么获得？氧惠邀请码有什么套路？</a>
                        <span class="text-muted">知行导师</span>

                        <div>问：氧惠邀请码怎么获得？答：氧惠官方邀请码333777返点高佣金高真的高。问：氧惠邀请码有什么套路？答：氧惠官方邀请码333777返点高佣金高真的高。氧惠APP汇聚各大主流电商和生活服务平台优惠，展示全网全品类商品，满足网购爱好者对品质好货与极致性价比的追求，并同时享受大平台购物权益保障。满足用户日常吃喝玩乐衣食住行的聚合APP，独特的商业模式，响应国家号召，为实现全民共富而努力奋斗。氧惠邀请码3</div>
                    </li>
                    <li><a href="/article/1950222345163567104.htm"
                           title="深入理解汇编语言子程序设计与系统调用" target="_blank">深入理解汇编语言子程序设计与系统调用</a>
                        <span class="text-muted">网安spinage</span>
<a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96%E8%AF%AD%E8%A8%80/1.htm">汇编语言</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E6%B1%87%E7%BC%96/1.htm">汇编</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a>
                        <div>本文将全面解析汇编语言中子程序设计的核心技术以及系统调用的实现方法，涵盖参数传递的多种方式、堆栈管理、API调用等关键知识点，并提供实际案例演示。一、子程序设计：参数传递的艺术1.寄存器传参：高效简洁.386.modelflat,stdcalloptioncasemap:none.dataxdd5;定义变量ydd6sumdd?.code;函数定义：addxy1addxy1procpushebpmo</div>
                    </li>
                    <li><a href="/article/1950222094314827776.htm"
                           title="【老房翻新】92平轻奢简约风，将和谐之美融入空间！" target="_blank">【老房翻新】92平轻奢简约风，将和谐之美融入空间！</a>
                        <span class="text-muted">没人比我更懂装修</span>

                        <div>在客厅空间中，设计师于冷静的空间基调中选用了层次感丰富的黄蓝色作为主要跳色，搭配黑白纹理的地毯与单椅，为空间增加了时尚摩登的气息。艺术感的单品突出点亮了空间，绿植的点缀、留白的软饰则增强了空间的呼吸性。点击此处添加图片说明文字点击此处添加图片说明文字设计师力求使每一处的设立都在空间中达到相互间的呼应与制衡，将艺术的跃动之美赋于空间之上，也将空间的和谐之美融于生活之中。点击此处添加图片说明文字点击此</div>
                    </li>
                    <li><a href="/article/1950220180864954368.htm"
                           title="京东家电年销售额是去年的1300%，主要来自于他...." target="_blank">京东家电年销售额是去年的1300%，主要来自于他....</a>
                        <span class="text-muted">Shanshan小课堂</span>

                        <div>经过大半个月角逐纠缠，时间终于来到6月18日，618全球年中购物节迎来最高潮。作为国内最大的家电零售平台，京东家电从18日0点开始，便开启了飞速狂奔的模式，仅8分钟销售额就突破20亿元!展现出强劲的增长势头与家电主场的王者霸气的同时，也让各家电品牌实现了爆发式增长，美的、海尔、格力、奥克斯均在3分钟内突破1亿元大关。在今年的618中，除了消费者已经熟悉的网购形式外，线上线下联动的融合模式、社交电商</div>
                    </li>
                    <li><a href="/article/1950219953118441472.htm"
                           title="编程算法：技术创新的引擎与业务增长的核心驱动力" target="_blank">编程算法：技术创新的引擎与业务增长的核心驱动力</a>
                        <span class="text-muted"></span>

                        <div>在数字经济时代，算法已成为推动技术创新与业务增长的隐形引擎。从存内计算突破冯·诺依曼瓶颈，到动态规划优化万亿级金融交易，编程算法正在重塑产业竞争格局。一、存内计算：突破冯·诺依曼瓶颈的算法革命1.1存内计算的基本原理传统计算架构中90%的能耗消耗在数据搬运上。存内计算（Processing-in-Memory）通过直接在存储单元执行计算，实现能效10-100倍提升：#传统计算vs存内计算能耗模型i</div>
                    </li>
                    <li><a href="/article/1950219166367674368.htm"
                           title="包含日志获取webshell" target="_blank">包含日志获取webshell</a>
                        <span class="text-muted">陈望_ning</span>

                        <div>日志文件关闭：Apache目录下的httpd.conf文件#ErrorLog"logs/error.log"#CustomLog"logs/access.log"common加#号为注释不产生日志文件如果去掉#将会在Apache/logs/目录下产生日志文件linux:access_logerror_logwindows:access.logerror.logaccess_log每一行记录了一次网</div>
                    </li>
                    <li><a href="/article/1950218946015719424.htm"
                           title="图论算法经典题目解析：DFS、BFS与拓扑排序实战" target="_blank">图论算法经典题目解析：DFS、BFS与拓扑排序实战</a>
                        <span class="text-muted">周童學</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84%E4%B8%8E%E7%AE%97%E6%B3%95/1.htm">数据结构与算法</a><a class="tag" taget="_blank" href="/search/%E6%B7%B1%E5%BA%A6%E4%BC%98%E5%85%88/1.htm">深度优先</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%9B%BE%E8%AE%BA/1.htm">图论</a>
                        <div>图论算法经典题目解析：DFS、BFS与拓扑排序实战图论问题是算法面试中的高频考点，本博客将通过四道LeetCode经典题目（均来自"Top100Liked"题库），深入讲解图论的核心算法思想和实现技巧。涵盖DFS、BFS、拓扑排序和前缀树等知识点，每道题配有Java实现和易错点分析。1.岛屿数量(DFS遍历)问题描述给定一个由'1'(陆地)和'0'(水)组成的二维网格，计算岛屿的数量。岛屿由水平或</div>
                    </li>
                    <li><a href="/article/1950218819616174080.htm"
                           title="基于redis的Zset实现作者的轻量级排名" target="_blank">基于redis的Zset实现作者的轻量级排名</a>
                        <span class="text-muted">周童學</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a>
                        <div>基于redis的Zset实现轻量级作者排名系统在今天的技术架构中，Redis是一种广泛使用的内存数据存储系统，尤其在需要高效检索和排序的场景中表现优异。在本篇博客中，我们将深入探讨如何使用Redis的有序集合（ZSet）构建一个高效的笔记排行榜系统，并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台，用户可以发布各种笔记，系统需要根据用户发布的笔记数量来生成一个实时更新的</div>
                    </li>
                    <li><a href="/article/1950218817753903104.htm"
                           title="【项目实战】 容错机制与故障恢复：保障系统连续性的核心体系" target="_blank">【项目实战】 容错机制与故障恢复：保障系统连续性的核心体系</a>
                        <span class="text-muted">本本本添哥</span>
<a class="tag" taget="_blank" href="/search/004/1.htm">004</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E7%A0%94%E6%95%88%E4%B8%8EDevOps%E8%BF%90%E7%BB%B4%E5%B7%A5%E5%85%B7%E9%93%BE/1.htm">研效与DevOps运维工具链</a><a class="tag" taget="_blank" href="/search/002/1.htm">002</a><a class="tag" taget="_blank" href="/search/-/1.htm">-</a><a class="tag" taget="_blank" href="/search/%E8%BF%9B%E9%98%B6%E5%BC%80%E5%8F%91%E8%83%BD%E5%8A%9B/1.htm">进阶开发能力</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E5%B8%83%E5%BC%8F/1.htm">分布式</a>
                        <div>在分布式系统中，硬件故障、网络波动、软件异常等问题难以避免。容错机制与故障恢复的核心目标是：通过主动检测故障、自动隔离风险、快速转移负载、重建数据一致性，最大限度减少故障对业务的影响，保障系统“持续可用”与“数据不丢失”。以下从核心机制、实现方式、典型案例等维度展开说明。一、故障检测：及时发现异常节点故障检测是容错的第一步，需通过多维度手段实时感知系统组件状态，确保故障被快速识别。1.健康检查与心</div>
                    </li>
                    <li><a href="/article/1950218314064130048.htm"
                           title="Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)" target="_blank">Java并发核心：线程池使用技巧与最佳实践！ | 多线程篇(五)</a>
                        <span class="text-muted">bug菌¹</span>
<a class="tag" taget="_blank" href="/search/Java%E5%AE%9E%E6%88%98%28%E8%BF%9B%E9%98%B6%E7%89%88%29/1.htm">Java实战(进阶版)</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Java%E9%9B%B6%E5%9F%BA%E7%A1%80%E5%85%A5%E9%97%A8/1.htm">Java零基础入门</a><a class="tag" taget="_blank" href="/search/Java%E5%B9%B6%E5%8F%91/1.htm">Java并发</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">线程池</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%AF%87/1.htm">多线程篇</a>
                        <div>本文收录于「Java进阶实战」专栏，专业攻坚指数级提升，希望能够助你一臂之力，帮你早日登顶实现财富自由；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！环境说明：Windows10+IntelliJIDEA2021.3.2+Jdk1.8本文目录前言摘要正文何为线程池？为什么需要线程池？线程池的好处线程池使用场景如何创建线程池？线程池的常见配置源码解析案例分享案例代码演示案例运行</div>
                    </li>
                                <li><a href="/article/11.htm"
                                       title="VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite" target="_blank">VMware Workstation 11 或者 VMware Player 7安装MAC OS X 10.10 Yosemite</a>
                                    <span class="text-muted">iwindyforest</span>
<a class="tag" taget="_blank" href="/search/vmware/1.htm">vmware</a><a class="tag" taget="_blank" href="/search/mac+os/1.htm">mac os</a><a class="tag" taget="_blank" href="/search/10.10/1.htm">10.10</a><a class="tag" taget="_blank" href="/search/workstation/1.htm">workstation</a><a class="tag" taget="_blank" href="/search/player/1.htm">player</a>
                                    <div>最近尝试了下VMware下安装MacOS 系统， 
安装过程中发现网上可供参考的文章都是VMware Workstation 10以下， MacOS X 10.9以下的文章， 
只能提供大概的思路， 但是实际安装起来由于版本问题， 走了不少弯路， 所以我尝试写以下总结， 希望能给有兴趣安装OSX的人提供一点帮助。 
  
  
写在前面的话： 
其实安装好后发现， 由于我的th</div>
                                </li>
                                <li><a href="/article/138.htm"
                                       title="关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？" target="_blank">关于《基于模型驱动的B/S在线开发平台》源代码开源的疑虑？</a>
                                    <span class="text-muted">deathwknight</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a>
                                    <div>本人从学习Java开发到现在已有10年整，从一个要自学 java买成javascript的小菜鸟，成长为只会java和javascript语言的老菜鸟（个人邮箱：deathwknight@163.com） 
 
一路走来，跌跌撞撞。用自己的三年多业余时间，瞎搞一个小东西（基于模型驱动的B/S在线开发平台，非MVC框架、非代码生成）。希望与大家一起分享，同时有许些疑虑，希望有人可以交流下 
 
平台</div>
                                </li>
                                <li><a href="/article/265.htm"
                                       title="如何把maven项目转成web项目" target="_blank">如何把maven项目转成web项目</a>
                                    <span class="text-muted">Kai_Ge</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/MyEclipse/1.htm">MyEclipse</a>
                                    <div>创建Web工程，使用eclipse ee创建maven web工程 1.右键项目,选择Project Facets,点击Convert to faceted from 2.更改Dynamic Web Module的Version为2.5.(3.0为Java7的,Tomcat6不支持). 如果提示错误,可能需要在Java Compiler设置Compiler compl</div>
                                </li>
                                <li><a href="/article/392.htm"
                                       title="主管？？？" target="_blank">主管？？？</a>
                                    <span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a>
                                    <div>转载：http://www.blogjava.net/fastzch/archive/2010/11/25/339054.html 
 
 
 
 
很久以前跟同事参加的培训，同事整理得很详细，必须得转！ 
 
前段时间，公司有组织中高阶主管及其培养干部进行了为期三天的管理训练培训。三天的课程下来，虽然内容较多，因对老师三天来的课程内容深有感触，故借着整理学习心得的机会，将三天来的培训课程做了一个</div>
                                </li>
                                <li><a href="/article/519.htm"
                                       title="python内置函数大全" target="_blank">python内置函数大全</a>
                                    <span class="text-muted">2002wmj</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                                    <div>最近一直在看python的document，打算在基础方面重点看一下python的keyword、Build-in Function、Build-in Constants、Build-in Types、Build-in Exception这四个方面，其实在看的时候发现整个《The Python Standard Library》章节都是很不错的，其中描述了很多不错的主题。先把Build-in Fu</div>
                                </li>
                                <li><a href="/article/646.htm"
                                       title="JSP页面通过JQUERY合并行" target="_blank">JSP页面通过JQUERY合并行</a>
                                    <span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                                    <div>在写程序的过程中我们难免会遇到在页面上合并单元行的情况，如图所示 
 
 
如果对于会的同学可能很简单，但是对没有思路的同学来说还是比较麻烦的，提供一下用JQUERY实现的参考代码 
 
function mergeCell(){ 
        var trs = $("#table tr"); 
&nb</div>
                                </li>
                                <li><a href="/article/773.htm"
                                       title="Java基础" target="_blank">Java基础</a>
                                    <span class="text-muted">冰天百华</span>
<a class="tag" taget="_blank" href="/search/java%E5%9F%BA%E7%A1%80/1.htm">java基础</a>
                                    <div>学习函数式编程 
package base;

import java.text.DecimalFormat;

public class Main {

	public static void main(String[] args) {
//		Integer a = 4;  
//		Double aa = (double)a  / 100000;  
//		Decimal</div>
                                </li>
                                <li><a href="/article/900.htm"
                                       title="unix时间戳相互转换" target="_blank">unix时间戳相互转换</a>
                                    <span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/%E8%BD%AC%E6%8D%A2/1.htm">转换</a><a class="tag" taget="_blank" href="/search/unix/1.htm">unix</a><a class="tag" taget="_blank" href="/search/%E6%97%B6%E9%97%B4%E6%88%B3/1.htm">时间戳</a>
                                    <div>如何在不同编程语言中获取现在的Unix时间戳(Unix timestamp)？     Java time   JavaScript Math.round(new Date().getTime()/1000)
getTime()返回数值的单位是毫秒   Microsoft .NET / C# epoch = (DateTime.Now.ToUniversalTime().Ticks - 62135</div>
                                </li>
                                <li><a href="/article/1027.htm"
                                       title="作为一个合格程序员该做的事" target="_blank">作为一个合格程序员该做的事</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                                    <div>作为一个合格程序员每天该做的事   1、总结自己一天任务的完成情况 最好的方式是写工作日志，把自己今天完成了什么事情，遇见了什么问题都记录下来，日后翻看好处多多 
2、考虑自己明天应该做的主要工作 把明天要做的事情列出来，并按照优先级排列，第二天应该把自己效率最高的时间分配给最重要的工作 
3、考虑自己一天工作中失误的地方，并想出避免下一次再犯的方法 出错不要紧，最重</div>
                                </li>
                                <li><a href="/article/1154.htm"
                                       title="由html5视频播放引发的总结" target="_blank">由html5视频播放引发的总结</a>
                                    <span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/%E8%A7%86%E9%A2%91/1.htm">视频</a><a class="tag" taget="_blank" href="/search/video/1.htm">video</a>
                                    <div>前言 
  
项目中存在视频播放的功能，前期设计是以flash播放器播放视频的。但是现在由于需要兼容苹果的设备，必须采用html5的方式来播放视频。我就出于兴趣对html5播放视频做了简单的了解，不了解不知道，水真是很深。本文所记录的知识一些浅尝辄止的知识，说起来很惭愧。 
  
视频结构 
  
本该直接介绍html5的<video>的，但鉴于本人对视频</div>
                                </li>
                                <li><a href="/article/1281.htm"
                                       title="解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat" target="_blank">解决httpclient访问自签名https报javax.net.ssl.SSLHandshakeException: sun.security.validat</a>
                                    <span class="text-muted">bewithme</span>
<a class="tag" taget="_blank" href="/search/httpclient/1.htm">httpclient</a>
                                    <div>     如果你构建了一个https协议的站点，而此站点的安全证书并不是合法的第三方证书颁发机构所签发，那么你用httpclient去访问此站点会报如下错误 
  
javax.net.ssl.SSLHandshakeException: sun.security.validator.ValidatorException: PKIX path bu</div>
                                </li>
                                <li><a href="/article/1408.htm"
                                       title="Jedis连接池的入门级使用" target="_blank">Jedis连接池的入门级使用</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/redis%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">redis数据库</a><a class="tag" taget="_blank" href="/search/jedis/1.htm">jedis</a>
                                    <div>Jedis连接池操作步骤如下： 
        a.获取Jedis实例需要从JedisPool中获取； 
        b.用完Jedis实例需要返还给JedisPool； 
        c.如果Jedis在使用过程中出错，则也需要还给JedisPool； 
packag</div>
                                </li>
                                <li><a href="/article/1535.htm"
                                       title="变与不变" target="_blank">变与不变</a>
                                    <span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/%E4%B8%8D%E5%8F%98/1.htm">不变</a><a class="tag" taget="_blank" href="/search/%E5%8F%98/1.htm">变</a><a class="tag" taget="_blank" href="/search/%E4%BA%B2%E6%83%85%E6%B0%B8%E6%81%92/1.htm">亲情永恒</a>
                                    <div>变与不变 
   周末骑车转到了五年前租住的小区，曾经最爱吃的西北面馆、江西水饺、手工拉面早已不在， 
   各种店铺都换了好几茬，这些是变的。 
   三年前还很流行的一款手机在今天看起来已经落后的不像样子。 
   三年前还运行的好好的一家公司，今天也已经不复存在。 
   一座座高楼拔地而起，</div>
                                </li>
                                <li><a href="/article/1662.htm"
                                       title="【Scala十】Scala核心四：集合框架之List" target="_blank">【Scala十】Scala核心四：集合框架之List</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
                                    <div>Spark的RDD作为一个分布式不可变的数据集合，它提供的转换操作，很多是借鉴于Scala的集合框架提供的一些函数，因此，有必要对Scala的集合进行详细的了解 
  
1. 泛型集合都是协变的，对于List而言，如果B是A的子类，那么List[B]也是List[A]的子类，即可以把List[B]的实例赋值给List[A]变量 
  
2. 给变量赋值(注意val关键字，a，b</div>
                                </li>
                                <li><a href="/article/1789.htm"
                                       title="Nested Functions in C" target="_blank">Nested Functions in C</a>
                                    <span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/closure/1.htm">closure</a>
                                    <div>  
Nested Functions 又称closure，属于functional language中的概念，一直以为C中是不支持closure的，现在看来我错了，不过C标准中是不支持的，而GCC支持。 
  
既然GCC支持了closure，那么 lexical scoping自然也支持了，同时在C中label也是可以在nested functions中自由跳转的</div>
                                </li>
                                <li><a href="/article/1916.htm"
                                       title="Java-Collections Framework学习与总结-WeakHashMap" target="_blank">Java-Collections Framework学习与总结-WeakHashMap</a>
                                    <span class="text-muted">BrokenDreams</span>
<a class="tag" taget="_blank" href="/search/Collections/1.htm">Collections</a>
                                    <div>        总结这个类之前，首先看一下Java引用的相关知识。Java的引用分为四种：强引用、软引用、弱引用和虚引用。 
 
        
强引用：就是常见的代码中的引用，如Object o = new Object();存在强引用的对象不会被垃圾收集</div>
                                </li>
                                <li><a href="/article/2043.htm"
                                       title="读《研磨设计模式》-代码笔记-解释器模式-Interpret" target="_blank">读《研磨设计模式》-代码笔记-解释器模式-Interpret</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
                                    <div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ 
 
 

package design.pattern;

/*
 * 解释器（Interpreter）模式的意图是可以按照自己定义的组合规则集合来组合可执行对象
 * 
 * 代码示例实现XML里面1.读取单个元素的值 2.读取单个属性的值
 * 多</div>
                                </li>
                                <li><a href="/article/2170.htm"
                                       title="After Effects操作&快捷键" target="_blank">After Effects操作&快捷键</a>
                                    <span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/After+Effects/1.htm">After Effects</a>
                                    <div>1、快捷键官方文档 
 
 
 中文版：https://helpx.adobe.com/cn/after-effects/using/keyboard-shortcuts-reference.html  
 英文版：https://helpx.adobe.com/after-effects/using/keyboard-shortcuts-reference.html  
 
 
 2、常用快捷键</div>
                                </li>
                                <li><a href="/article/2297.htm"
                                       title="Maven 常用命令" target="_blank">Maven 常用命令</a>
                                    <span class="text-muted">crabdave</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>Maven 常用命令 
  
mvn archetype:generate 
mvn install 
mvn clean 
mvn clean complie 
mvn clean test 
mvn clean install 
mvn clean package 
mvn test 
mvn package 
mvn site 
  
mvn dependency:res</div>
                                </li>
                                <li><a href="/article/2424.htm"
                                       title="shell bad substitution" target="_blank">shell bad substitution</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/shell/1.htm">shell</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a>
                                    <div>#!/bin/sh 
 
/data/script/common/run_cmd.exp 192.168.13.168 "impala-shell -islave4 -q 'insert OVERWRITE table imeis.${tableName} select ${selectFields}, ds, fnv_hash(concat(cast(ds as string), im</div>
                                </li>
                                <li><a href="/article/2551.htm"
                                       title="Java SE 第二讲（原生数据类型 Primitive Data Type）" target="_blank">Java SE 第二讲（原生数据类型 Primitive Data Type）</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>Java SE  第二讲： 
 
1.   Windows: notepad, editplus, ultraedit, gvim 
Linux: vi, vim, gedit 
 
2.   Java 中的数据类型分为两大类： 
1）原生数据类型  （Primitive Data Type） 
2）引用类型（对象类型）  （R</div>
                                </li>
                                <li><a href="/article/2678.htm"
                                       title="CGridView中实现批量删除" target="_blank">CGridView中实现批量删除</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a><a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
                                    <div>1，CGridView中的columns添加 
array(
                        'selectableRows' => 2,
                        'footer' => '<button type="button" onclick="GetCheckbox();" style=&</div>
                                </li>
                                <li><a href="/article/2805.htm"
                                       title="Java中泛型的各种使用" target="_blank">Java中泛型的各种使用</a>
                                    <span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%B3%9B%E5%9E%8B/1.htm">泛型</a>
                                    <div>Java中的泛型的使用：1.普通的泛型使用 
在使用类的时候后面的<>中的类型就是我们确定的类型。 
public class MyClass1<T> {//此处定义的泛型是T
    private T var;

    public T getVar() {
        return var;
    }

    public void setVa</div>
                                </li>
                                <li><a href="/article/2932.htm"
                                       title="Web开发技术十年发展历程" target="_blank">Web开发技术十年发展历程</a>
                                    <span class="text-muted">gcq511120594</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">浏览器</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a>
                                    <div>回顾web开发技术这十年发展历程： 
Ajax 
03年的时候我上六年级，那时候网吧刚在小县城的角落萌生。传奇，大话西游第一代网游一时风靡。我抱着试一试的心态给了网吧老板两块钱想申请个号玩玩，然后接下来的一个小时我一直在，注，册，账，号。 
彼时网吧用的512k的带宽，注册的时候，填了一堆信息，提交，页面跳转，嘣，”您填写的信息有误，请重填”。然后跳转回注册页面，以此循环。我现在时常想，如果当时a</div>
                                </li>
                                <li><a href="/article/3059.htm"
                                       title="openSession()与getCurrentSession()区别：" target="_blank">openSession()与getCurrentSession()区别：</a>
                                    <span class="text-muted">hetongfei</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/DAO/1.htm">DAO</a><a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a>
                                    <div>来自 http://blog.csdn.net/dy511/article/details/6166134 
1.getCurrentSession创建的session会和绑定到当前线程,而openSession不会。 
2. getCurrentSession创建的线程会在事务回滚或事物提交后自动关闭,而openSession必须手动关闭。 
这里getCurrentSession本地事务(本地</div>
                                </li>
                                <li><a href="/article/3186.htm"
                                       title="第一章 安装Nginx+Lua开发环境" target="_blank">第一章 安装Nginx+Lua开发环境</a>
                                    <span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a><a class="tag" taget="_blank" href="/search/openresty/1.htm">openresty</a>
                                    <div>首先我们选择使用OpenResty，其是由Nginx核心加很多第三方模块组成，其最大的亮点是默认集成了Lua开发环境，使得Nginx可以作为一个Web Server使用。借助于Nginx的事件驱动模型和非阻塞IO，可以实现高性能的Web应用程序。而且OpenResty提供了大量组件如Mysql、Redis、Memcached等等，使在Nginx上开发Web应用更方便更简单。目前在京东如实时价格、秒</div>
                                </li>
                                <li><a href="/article/3313.htm"
                                       title="HSQLDB In-Process方式访问内存数据库" target="_blank">HSQLDB In-Process方式访问内存数据库</a>
                                    <span class="text-muted">liyonghui160com</span>

                                    <div>  
  
HSQLDB一大特色就是能够在内存中建立数据库，当然它也能将这些内存数据库保存到文件中以便实现真正的持久化。 
  
先睹为快！ 
  
下面是一个In-Process方式访问内存数据库的代码示例： 
  
  
下面代码需要引入hsqldb.jar包 （hsqldb-2.2.8） 
  
import java.s</div>
                                </li>
                                <li><a href="/article/3440.htm"
                                       title="Java线程的5个使用技巧" target="_blank">Java线程的5个使用技巧</a>
                                    <span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a>
                                    <div>Java线程有哪些不太为人所知的技巧与用法？   　　萝卜白菜各有所爱。像我就喜欢Java。学无止境，这也是我喜欢它的一个原因。日常 
工作中你所用到的工具，通常都有些你从来没有了解过的东西，比方说某个方法或者是一些有趣的用法。比如说线程。没错，就是线程。或者确切说是Thread这个类。当我们在构建高可扩展性系统的时候，通常会面临各种各样的并发编程的问题，不过我们现在所要讲的可能会略有不同。   </div>
                                </li>
                                <li><a href="/article/3567.htm"
                                       title="开发资源大整合：编程语言篇——JavaScript（1）" target="_blank">开发资源大整合：编程语言篇——JavaScript（1）</a>
                                    <span class="text-muted">shoothao</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div>概述：本系列的资源整合来自于github中各个领域的大牛，来收藏你感兴趣的东西吧。           
  程序包管理器  
  管理javascript库并提供对这些库的快速使用与打包的服务。 
 
  Bower - 用于web的程序包管理。 
  component - 用于客户端的程序包管理，构建更好的web应用程序。 
  spm - 全新的静态的文件包管</div>
                                </li>
                                <li><a href="/article/3694.htm"
                                       title="避免使用终结函数" target="_blank">避免使用终结函数</a>
                                    <span class="text-muted">vahoa.ma</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jvm/1.htm">jvm</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a>
                                    <div>终结函数（finalizer）通常是不可预测的，常常也是很危险的，一般情况下不是必要的。使用终结函数会导致不稳定的行为、更差的性能，以及带来移植性问题。不要把终结函数当做C++中的析构函数（destructors）的对应物。 
  
    我自己总结了一下这一条的综合性结论是这样的： 
1）在涉及使用资源，使用完毕后要释放资源的情形下，首先要用一个显示的方</div>
                                </li>
                </ul>
            </div>
        </div>
    </div>

<div>
    <div class="container">
        <div class="indexes">
            <strong>按字母分类：</strong>
            <a href="/tags/A/1.htm" target="_blank">A</a><a href="/tags/B/1.htm" target="_blank">B</a><a href="/tags/C/1.htm" target="_blank">C</a><a
                href="/tags/D/1.htm" target="_blank">D</a><a href="/tags/E/1.htm" target="_blank">E</a><a href="/tags/F/1.htm" target="_blank">F</a><a
                href="/tags/G/1.htm" target="_blank">G</a><a href="/tags/H/1.htm" target="_blank">H</a><a href="/tags/I/1.htm" target="_blank">I</a><a
                href="/tags/J/1.htm" target="_blank">J</a><a href="/tags/K/1.htm" target="_blank">K</a><a href="/tags/L/1.htm" target="_blank">L</a><a
                href="/tags/M/1.htm" target="_blank">M</a><a href="/tags/N/1.htm" target="_blank">N</a><a href="/tags/O/1.htm" target="_blank">O</a><a
                href="/tags/P/1.htm" target="_blank">P</a><a href="/tags/Q/1.htm" target="_blank">Q</a><a href="/tags/R/1.htm" target="_blank">R</a><a
                href="/tags/S/1.htm" target="_blank">S</a><a href="/tags/T/1.htm" target="_blank">T</a><a href="/tags/U/1.htm" target="_blank">U</a><a
                href="/tags/V/1.htm" target="_blank">V</a><a href="/tags/W/1.htm" target="_blank">W</a><a href="/tags/X/1.htm" target="_blank">X</a><a
                href="/tags/Y/1.htm" target="_blank">Y</a><a href="/tags/Z/1.htm" target="_blank">Z</a><a href="/tags/0/1.htm" target="_blank">其他</a>
        </div>
    </div>
</div>
<footer id="footer" class="mb30 mt30">
    <div class="container">
        <div class="footBglm">
            <a target="_blank" href="/">首页</a> -
            <a target="_blank" href="/custom/about.htm">关于我们</a> -
            <a target="_blank" href="/search/Java/1.htm">站内搜索</a> -
            <a target="_blank" href="/sitemap.txt">Sitemap</a> -
            <a target="_blank" href="/custom/delete.htm">侵权投诉</a>
        </div>
        <div class="copyright">版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.
<!--            <a href="https://beian.miit.gov.cn/" rel="nofollow" target="_blank">京ICP备09083238号</a><br>-->
        </div>
    </div>
</footer>
<!-- 代码高亮 -->
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shLegacy.js"></script>
<script type="text/javascript" src="/static/syntaxhighlighter/scripts/shAutoloader.js"></script>
<link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="/static/syntaxhighlighter/src/my_start_1.js"></script>





</body>

</html>