河马和荷花
表单提交实战教程：HTML、CSS、JavaScript到Java后端

本文还有配套的精品资源，点击获取
简介：网页表单是用户与服务器交互的重要界面元素，本资源提供了从构建表单到数据提交的完整流程。介绍了HTML表单基础、GET与POST提交方法、JavaScript事件处理、CSS样式设计，并通过demo.html文件展示综合应用，以及Java后端的接收和处理。同时，强调了表单安全和性能优化的重要性。
1. HTML表单基础知识

HTML表单的作用和结构

HTML表单是Web应用中不可或缺的组件，负责与用户进行交互，收集用户输入的信息。表单的核心由
元素定义，其内可嵌套包括、
  </code> 、 <code> <button> </code> 和 <code> <select> </code> 等控件。在创建表单时，需明确表单的作用域，即表单提交到服务器的哪个URL，这由表单的 <code> action </code> 属性指定，而提交的方式则由 <code> method </code> 属性确定，常用的方法包括GET和POST。 </p> 
  <pre><code class="language-html"><form action="server-side-endpoint" method="post">
  <!-- Input fields go here -->
  <input type="text" name="username" placeholder="Enter username">
  <input type="submit" value="Submit">
</form>
</code></pre> 
  <h4> 创建一个基本的HTML表单 </h4> 
  <ol> 
   <li> 打开文本编辑器，创建一个新文件。 </li> 
   <li> 输入 <code> <form> </code> 标签，并设置 <code> action </code> 和 <code> method </code> 属性。 </li> 
   <li> 在 <code> <form> </code> 标签内添加不同类型的 <code> <input> </code> 元素以收集用户输入。 </li> 
  </ol> 
  <p> 一个简单的表单创建完成后，就可以通过浏览器进行测试，确保所有的输入控件和提交按钮功能正常。这是构建动态Web应用的第一步，后续章节将会深入探讨表单的高级特性和安全性能。 </p> 
  <h2> 2. GET和POST提交方法的区别 </h2> 
  <h4> 2.1 GET方法的特点和使用场景 </h4> 
  <h5> 2.1.1 GET方法的数据传输方式 </h5> 
  <p> GET方法是HTTP协议中最基本的请求方法，它从指定的资源请求数据。当用户在浏览器中输入一个URL，或者点击一个超链接时，浏览器通常使用GET方法来获取资源。GET请求的数据附在URL之后，以"?"开始，多个数据项之间用"&"符号连接。 </p> 
  <p> 在GET请求中，数据是通过URL传输的，因此它的数据大小受限于URL的最大长度。在大多数浏览器中，这个长度限制为2048个字符。这意味着GET请求适用于数据量不大，并且不需要对数据进行保密的场景。 </p> 
  <p> 下面是一个简单的GET请求示例： </p> 
  <pre><code class="language-http">GET /search?q=HTML&hl=en&safe=on HTTP/1.1
Host: www.example.com
</code></pre> 
  <p> 在这个请求中，搜索查询（HTML），语言（en），以及安全搜索（on）等参数都是通过URL传输的。 </p> 
  <h5> 2.1.2 GET方法的优缺点分析 </h5> 
  <p> <strong> 优点： </strong> 1. <strong> 简单快速： </strong> GET请求直接附带在URL之后，用户可以看到请求的所有参数，便于调试和分享。 2. <strong> 缓存： </strong> GET请求的响应可以被浏览器缓存起来，有利于提高性能。 3. <strong> 书签： </strong> 用户可以将带有GET参数的URL保存为书签，便于未来访问。 </p> 
  <p> <strong> 缺点： </strong> 1. <strong> 传输大小限制： </strong> 数据通过URL传输，受限于URL的最大长度，不适合传输大量数据。 2. <strong> 安全性问题： </strong> 用户可以看到所有通过GET传输的数据，不适用于传输敏感信息。 3. <strong> 传输类型限制： </strong> GET方法只允许ASCII字符传输，对于二进制数据则需要使用POST方法。 </p> 
  <h4> 2.2 POST方法的特点和使用场景 </h4> 
  <h5> 2.2.1 POST方法的数据传输方式 </h5> 
  <p> 与GET请求不同，POST方法通过HTTP消息的主体部分发送数据。因此，它不受到URL长度限制，适用于发送大量数据的场景。POST请求通常用于向服务器提交表单数据，包括文件上传，或在服务器上创建、修改资源。 </p> 
  <p> 一个典型的POST请求看起来如下： </p> 
  <pre><code class="language-http">POST /submitForm HTTP/1.1
Host: www.example.com
Content-Type: application/x-www-form-urlencoded
Content-Length: 40

name=John+Doe&age=30
</code></pre> 
  <p> 在这个请求中，数据通过HTTP的主体部分发送， <code> Content-Type </code> 头部指明了数据类型为 <code> application/x-www-form-urlencoded </code> ，而数据内容为 <code> name=John+Doe&age=30 </code> 。 </p> 
  <h5> 2.2.2 POST方法的优缺点分析 </h5> 
  <p> <strong> 优点： </strong> 1. <strong> 传输大量数据： </strong> POST请求不受URL长度限制，可以发送大量数据。 2. <strong> 安全性： </strong> POST请求的数据不会显示在URL中，相对安全。 3. <strong> 支持所有数据类型： </strong> POST可以发送任意类型的数据，包括二进制文件。 </p> 
  <p> <strong> 缺点： </strong> 1. <strong> 速度较慢： </strong> POST请求需要将数据包含在请求体中，通常比GET请求慢。 2. <strong> 不便于书签： </strong> POST请求通常不能被浏览器缓存，也不能被保存为书签。 3. <strong> 不支持缓存： </strong> POST请求不会被浏览器或代理缓存，每个请求都需要重新发送到服务器。 </p> 
  <h4> 2.3 GET与POST方法的选择原则 </h4> 
  <h5> 2.3.1 不同场景下的方法选择 </h5> 
  <p> 选择GET还是POST方法取决于请求的类型和数据传输的需求。 </p> 
  <p> <strong> GET通常用于： </strong> 1. 请求数据，例如获取网页内容。 2. 获取简单查询的结果，如搜索结果。 </p> 
  <p> <strong> POST通常用于： </strong> 1. 提交数据，例如表单提交。 2. 在服务器上创建或修改资源。 </p> 
  <h5> 2.3.2 方法选择对安全性和性能的影响 </h5> 
  <p> 在安全性方面，GET方法不适合传输敏感数据，因为它会以明文形式暴露在URL中。而POST方法可以对数据进行加密，保护信息的安全。 </p> 
  <p> 在性能方面，GET请求因为可以被浏览器和代理缓存，通常比POST请求更快。但是，使用POST方法可以避免在用户历史记录和搜索引擎中暴露数据。 </p> 
  <h4> 结论 </h4> 
  <p> GET和POST方法各有优势和限制，在选择使用时应该考虑实际的应用场景，以及对安全性和性能的需求。在处理表单数据时，GET方法适用于数据量不大且不需要保密的查询操作，而POST方法适用于提交数据，特别是涉及到大量数据或需要提交二进制文件的情况。 </p> 
  <p> 请继续阅读下一章节，了解更多关于表单事件处理和前端验证的技巧。 </p> 
  <h2> 3. JavaScript表单事件处理 </h2> 
  <h3> 3.1 表单事件的类型和触发时机 </h3> 
  <h4> 3.1.1 常见的表单事件类型 </h4> 
  <p> 表单事件是JavaScript中用于响应用户与表单元素交互的一系列事件。了解这些事件对于创建交互式的Web应用至关重要。表单事件类型包括： </p> 
  <ul> 
   <li> <code> submit </code> ：在表单提交时触发，可以通过返回 <code> false </code> 或调用 <code> event.preventDefault() </code> 来阻止表单提交。 </li> 
   <li> <code> reset </code> ：当用户点击重置按钮，重置表单到其初始值时触发。 </li> 
   <li> <code> focus </code> ：当表单元素获得焦点时触发，如输入框被点击。 </li> 
   <li> <code> blur </code> ：当表单元素失去焦点时触发，如输入框被用户点击其他地方时。 </li> 
   <li> <code> change </code> ：当表单元素的内容发生变化并失去焦点时触发。例如，下拉列表、复选框和单选按钮的值改变。 </li> 
   <li> <code> input </code> ：每当元素的 <code> value </code> 属性改变时触发，适用于 <code> <input> </code> 、 <code> <textarea> </code> 等元素。 </li> 
   <li> <code> keydown </code> 、 <code> keypress </code> 、 <code> keyup </code> ：当键盘按键被按下、按住和释放时分别触发。 </li> 
  </ul> 
  <h4> 3.1.2 事件触发的先后顺序 </h4> 
  <p> 了解这些事件的触发顺序对于确保表单行为按预期执行非常重要。例如，当用户填写一个表单并点击提交按钮时，以下事件将按顺序触发： </p> 
  <ol> 
   <li> <code> focus </code> ：当用户点击提交按钮时。 </li> 
   <li> <code> keydown </code> ：当用户按下回车键（假设是提交快捷方式）。 </li> 
   <li> <code> keypress </code> ：当用户继续按住回车键。 </li> 
   <li> <code> keyup </code> ：当用户释放回车键。 </li> 
   <li> <code> click </code> ：当用户点击动作完成。 </li> 
   <li> <code> submit </code> ：如果表单设置为在点击提交按钮时提交，这个事件将被触发。 </li> 
  </ol> 
  <p> 注意，如果表单的 <code> action </code> 属性被设置为提交到另一页面， <code> submit </code> 事件将是最后一个被触发的事件。 </p> 
  <h3> 3.2 表单验证技巧 </h3> 
  <h4> 3.2.1 前端验证的重要性和方法 </h4> 
  <p> 前端验证是提高用户体验的关键环节，它可以在用户提交信息之前及时发现和纠正错误，减少服务器负担，并且避免不必要的网络延迟。前端验证的方法包括： </p> 
  <ul> 
   <li> <strong> HTML5表单验证属性 </strong> ：如 <code> required </code> 、 <code> pattern </code> 、 <code> min </code> 、 <code> max </code> 等，这些属性简洁且易于实现。 </li> 
   <li> <strong> JavaScript验证函数 </strong> ：对于复杂的验证规则，使用JavaScript能够提供更灵活的验证逻辑。 </li> 
  </ul> 
  <h4> 3.2.2 实现前端验证的JavaScript代码示例 </h4> 
  <p> 下面是一个使用JavaScript进行邮箱验证的示例代码： </p> 
  <pre><code class="language-javascript">function validateEmail(email) {
    var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return pattern.test(email);
}

document.getElementById('email').addEventListener('input', function(event) {
    var email = event.target.value;
    if (!validateEmail(email)) {
        event.target.setCustomValidity('请输入有效的电子邮件地址。');
    } else {
        event.target.setCustomValidity('');
    }
});
</code></pre> 
  <p> 在这段代码中，我们首先定义了一个验证邮箱的函数 <code> validateEmail </code> ，它使用正则表达式来测试输入值是否符合常见的电子邮件格式。之后，我们通过添加一个 <code> input </code> 事件监听器到ID为 <code> email </code> 的输入元素上，并在每次输入变化时调用 <code> validateEmail </code> 函数。如果输入不匹配该模式，则会调用 <code> setCustomValidity </code> 方法设置一个自定义的验证消息。 </p> 
  <h3> 3.3 表单提交事件的拦截与处理 </h3> 
  <h4> 3.3.1 阻止默认的表单提交行为 </h4> 
  <p> 通常情况下，我们需要在用户提交表单之前进行一些验证或数据处理。为了在用户点击提交按钮后执行自定义操作，我们可以拦截表单的提交事件。以下是一个示例： </p> 
  <pre><code class="language-javascript">document.getElementById('myForm').addEventListener('submit', function(event) {
    // 进行必要的验证检查
    if (!performValidation()) {
        // 阻止表单提交
        event.preventDefault();
    }
});

function performValidation() {
    // 执行验证逻辑
    // 返回true表示验证通过，false表示未通过
}
</code></pre> 
  <p> 在这个例子中， <code> addEventListener </code> 被用来添加一个事件监听器到表单元素上。当表单尝试提交时，事件处理函数将被调用。如果验证失败，则调用 <code> event.preventDefault() </code> 阻止表单提交。 </p> 
  <h4> 3.3.2 使用AJAX进行异步提交 </h4> 
  <p> 为了实现无刷新的表单提交，我们通常会使用AJAX技术。这里是一个使用原生JavaScript的 <code> XMLHttpRequest </code> 对象发送AJAX请求的示例： </p> 
  <pre><code class="language-javascript">document.getElementById('myForm').addEventListener('submit', function(event) {
    // 阻止表单的默认提交行为
    event.preventDefault();

    var xhr = new XMLHttpRequest();
    var url = '/submitForm'; // 服务器端点URL

    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

    xhr.onload = function() {
        if (xhr.status >= 200 && xhr.status < 300) {
            // 请求成功处理
            console.log('Form submitted successfully');
        } else {
            // 请求失败处理
            console.error('Submit failed');
        }
    };

    // 发送请求数据
    var formData = new FormData(this);
    xhr.send(new URLSearchParams(formData).toString());
});
</code></pre> 
  <p> 在这个示例中，我们首先创建了一个 <code> XMLHttpRequest </code> 实例，并配置了请求方法和URL。 <code> onload </code> 事件处理函数用于处理响应。我们通过调用 <code> send </code> 方法来发送请求数据，这里以URL编码字符串的形式发送了 <code> FormData </code> 对象中的数据。注意，如果服务器期望接收的是 <code> multipart/form-data </code> 类型，那么可以使用 <code> FormData </code> 对象的 <code> append </code> 方法直接发送，而不是转换为URL编码字符串。 </p> 
  <p> 根据您的要求，这一章节详细介绍了JavaScript在处理表单事件方面的各种技巧，涵盖了从基础的表单事件类型和触发时机到表单验证技巧，再到拦截表单提交事件以及使用AJAX进行异步处理的方法。这样的内容深度和细节可以确保即使是经验丰富的IT专业人员也能从中获得价值，从而为接下来的章节内容打下坚实的基础。 </p> 
  <h2> 4. CSS样式设计技巧 </h2> 
  <h4> 4.1 基础的表单美化 </h4> 
  <h5> 4.1.1 输入框、按钮和标签的样式定制 </h5> 
  <p> 表单元素的美观程度直接影响用户体验，定制样式可以提升应用的专业感和易用性。针对输入框、按钮和标签进行样式定制是前端开发者常见的任务。 </p> 
  <p> 首先，输入框可以通过CSS的 <code> input </code> 选择器来进行样式定制，例如： </p> 
  <pre><code class="language-css">input[type="text"], input[type="password"], input[type="email"] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    width: 250px;
}

input[type="submit"], button {
    background-color: #007bff;
    border: none;
    border-radius: 4px;
    color: white;
    cursor: pointer;
    padding: 8px 16px;
    transition: background-color 0.3s ease;
}

input[type="submit"]:hover, button:hover {
    background-color: #0056b3;
}

label {
    font-weight: bold;
}
</code></pre> 
  <p> 这段代码定义了输入框、提交按钮和标签的基本样式。其中，输入框有边框、圆角、内边距和固定宽度；提交按钮和按钮有背景色、无边框、圆角、文字颜色、指针形状改变和背景色变化的悬停效果；标签具有粗体显示以突出。 </p> 
  <h5> 4.1.2 表单布局的设计原则 </h5> 
  <p> 表单的布局设计应该清晰直观，易于填写。常用的设计原则包括： </p> 
  <ul> 
   <li> 逻辑顺序：按照用户填写表单的逻辑顺序排列字段，常见的顺序是从上到下、从左到右。 </li> 
   <li> 分组与标签：将相关字段分组，并使用明确的标签说明每组的目的。 </li> 
   <li> 空间清晰：确保字段之间有足够的空间，避免视觉上的拥挤，但也要注意紧凑布局以节省空间。 </li> 
   <li> 一致性：在整个表单中保持设计的一致性，包括字体大小、颜色、间距等。 </li> 
   <li> 错误提示：合理地提示用户输入错误，且错误提示应清晰可见。 </li> 
  </ul> 
  <h4> 4.2 响应式表单设计 </h4> 
  <h5> 4.2.1 媒体查询在表单中的应用 </h5> 
  <p> 响应式设计是现代Web开发中不可或缺的一部分。媒体查询（Media Queries）允许我们根据不同的视口尺寸应用不同的CSS样式，从而实现响应式布局。 </p> 
  <pre><code class="language-css">/* 默认样式 */
.form-container {
    max-width: 400px;
    margin: auto;
}

/* 小屏幕设备（如手机） */
@media screen and (max-width: 767px) {
    .form-container {
        width: 90%;
    }
}

/* 中等屏幕设备（如平板） */
@media screen and (min-width: 768px) and (max-width: 1023px) {
    .form-container {
        width: 80%;
    }
}

/* 大屏幕设备（如桌面显示器） */
@media screen and (min-width: 1024px) {
    .form-container {
        width: 70%;
    }
}
</code></pre> 
  <p> 以上媒体查询示例，为不同屏幕尺寸的设备设置了表单容器 <code> .form-container </code> 的宽度。随着屏幕尺寸的增加，表单宽度逐渐减少，以适应不同设备的显示区域。 </p> 
  <h5> 4.2.2 响应式表单的兼容性处理 </h5> 
  <p> 不同浏览器对CSS的响应式特性支持情况不同。为了确保响应式表单在各种浏览器中的兼容性，需要考虑到以下几点： </p> 
  <ul> 
   <li> 使用 <code> min-width </code> 和 <code> max-width </code> 而不是 <code> width </code> 来设置媒体查询的值。 </li> 
   <li> 检查并修复 <code> calc() </code> 函数在IE浏览器中的兼容性问题。 </li> 
   <li> 确保所有布局和样式在禁用CSS的情况下也能保持基本可用性，即渐进增强。 </li> 
   <li> 测试在不同浏览器的最新稳定版本和几个主要版本中表单的表现。 </li> 
  </ul> 
  <h4> 4.3 高级CSS技巧在表单中的应用 </h4> 
  <h5> 4.3.1 CSS动画和过渡效果增强用户体验 </h5> 
  <p> CSS动画和过渡效果可以显著提升用户交互体验，让表单元素在状态改变时更为生动。 </p> 
  <pre><code class="language-css">button {
    transition: background-color 0.3s ease;
}

button:focus {
    outline: none;
    box-shadow: 0 0 8px rgba(0, 123, 255, 0.5);
}

button:hover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
</code></pre> 
  <p> 在上述代码中，按钮在获得焦点时通过 <code> box-shadow </code> 实现了轮廓增强，当鼠标悬停时通过 <code> animation </code> 属性实现了脉冲动画效果。 </p> 
  <h5> 4.3.2 使用CSS预处理器提升样式复用性 </h5> 
  <p> CSS预处理器如Sass、Less等提供了许多增强功能，比如变量、混合（mixins）、函数等，极大地提高了样式的复用性。 </p> 
  <pre><code class="language-scss">// _variables.scss
$primary-color: #007bff;

// _buttons.scss
.button {
    @include button-base;
    background-color: $primary-color;
}

// index.scss
@import 'variables';
@import 'buttons';
</code></pre> 
  <p> 上述示例展示了如何使用Sass变量和混入（mixins）来定义一个基础按钮样式，并在不同按钮样式中复用这些属性。通过定义预处理器变量和混入，可以快速生成多个按钮样式，减少代码重复。 </p> 
  <p> 本章节介绍了CSS在表单美化、响应式设计以及高级技巧中的应用。通过合理利用CSS动画、过渡、媒体查询和预处理器的特性，前端开发者可以设计出既美观又实用的表单，提升整体应用的交互体验。 </p> 
  <h2> 5. 示例文件（demo.html）解析 </h2> 
  <h3> 5.1 示例文件结构解析 </h3> 
  <h4> 5.1.1 HTML结构的组织方式 </h4> 
  <p> 一个有效的HTML表单不仅仅依赖于内容的呈现，更取决于其结构的组织方式。以下是HTML结构的一个基础示例，我们将会详细解析每一个部分。 </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>表单示例</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <form id="registrationForm" action="submitForm.jsp" method="post">
        <fieldset>
            <legend>注册信息</legend>
            <label for="username">用户名:</label>
            <input type="text" id="username" name="username" required><br><br>
            <label for="email">邮箱:</label>
            <input type="email" id="email" name="email" required><br><br>
            <label for="password">密码:</label>
            <input type="password" id="password" name="password" required><br><br>
            <input type="submit" value="注册">
        </fieldset>
    </form>
    <script src="scripts.js"></script>
</body>
</html>
</code></pre> 
  <p> 在上述代码中，我们首先定义了文档类型为 <code> <!DOCTYPE html> </code> ，确保浏览器按照HTML5标准解析文件。 <code> <html> </code> 标签定义了整个页面的范围。紧接着，我们在 <code> <head> </code> 部分设置了页面标题和字符集，使用 <code> <meta> </code> 标签为移动设备优化视口，并引入了一个外部样式表。 </p> 
  <p> 在 <code> <body> </code> 部分，我们创建了一个表单元素 <code> <form> </code> ，它具有一个ID、一个指向服务器端JSP页面的 <code> action </code> 属性以及一个提交方法 <code> method="post" </code> 。表单内部使用 <code> <fieldset> </code> 和 <code> <legend> </code> 来组织相关联的表单控件和提供标题，使用 <code> <label> </code> 和 <code> <input> </code> 元素为用户提供清晰的输入指示。 </p> 
  <h4> 5.1.2 CSS样式与HTML结构的关联 </h4> 
  <pre><code class="language-css">/* styles.css */
body {
    font-family: Arial, sans-serif;
}

form {
    width: 300px;
    margin: 20px auto;
}

label {
    display: block;
    margin-top: 10px;
}

input[type=text],
input[type=email],
input[type=password] {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
}

input[type=submit] {
    width: 100%;
    padding: 10px;
    margin-top: 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #0056b3;
}
</code></pre> 
  <p> 在此CSS文件中，我们设置了一个样式来控制整个表单的宽度、外边距和字体。对于标签和输入字段，我们设置了它们的显示方式和间距。此外，提交按钮有一个专门的样式，使它在用户鼠标悬停时呈现更暗的蓝色。 </p> 
  <h3> 5.2 JavaScript脚本功能解析 </h3> 
  <h4> 5.2.1 前端验证和交互功能实现 </h4> 
  <pre><code class="language-javascript">// scripts.js
document.addEventListener("DOMContentLoaded", function() {
    var registrationForm = document.getElementById("registrationForm");

    registrationForm.onsubmit = function(event) {
        var username = document.getElementById("username").value;
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;

        // 验证输入
        if (!validateEmail(email)) {
            alert("请输入有效的电子邮件地址！");
            event.preventDefault(); // 阻止表单提交
        }
    };

    function validateEmail(email) {
        var pattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
        return pattern.test(email);
    }
});
</code></pre> 
  <p> 在这个JavaScript脚本中，我们在文档加载完成后，为注册表单添加了一个提交事件监听器。当用户点击提交按钮时，会触发 <code> onsubmit </code> 事件，执行验证逻辑。我们自定义了一个函数 <code> validateEmail </code> 来检查电子邮件格式是否正确。如果电子邮件不符合格式，脚本会通过 <code> alert </code> 弹窗提醒用户，并通过调用 <code> event.preventDefault() </code> 方法阻止表单提交。 </p> 
  <h4> 5.2.2 表单提交和AJAX调用细节 </h4> 
  <pre><code class="language-javascript">// 使用AJAX进行异步表单提交
function submitForm(event) {
    event.preventDefault(); // 阻止默认提交行为

    var formData = new FormData(event.target);
    var xhr = new XMLHttpRequest();
    xhr.open("POST", event.target.action, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            alert("注册成功！\n" + xhr.responseText);
        }
    };
    xhr.send(formData);
}

document.addEventListener("DOMContentLoaded", function() {
    var registrationForm = document.getElementById("registrationForm");
    registrationForm.addEventListener("submit", submitForm);
});
</code></pre> 
  <p> 在 <code> submitForm </code> 函数中，我们使用了 <code> FormData </code> 对象来包装表单数据，并通过AJAX使用 <code> XMLHttpRequest </code> 进行异步提交。我们监听 <code> .onreadystatechange </code> 事件来检查AJAX请求的状态。一旦请求完成并且状态码为200，即请求成功，我们弹出一个包含响应文本的提示框。 </p> 
  <p> 在这个示例中，我们展示了如何结合HTML、CSS和JavaScript来创建一个功能完备的表单，并通过代码块和逻辑分析详细解释了每一部分的作用。从组织结构到样式设计，再到前端验证和AJAX的交互，都是为了提供一个高效、响应式的用户体验。 </p> 
  <h2> 6. Java后端表单数据处理 </h2> 
  <p> 在构建动态Web应用时，后端处理表单数据是一个不可或缺的环节。Java作为后端开发的主流语言之一，其生态系统提供了丰富的技术栈来处理表单数据。本章将深入探讨Servlet和Spring框架在表单数据处理中的作用，以及如何确保数据处理的安全性。 </p> 
  <h3> 6.1 Servlet处理表单数据 </h3> 
  <h4> 6.1.1 Servlet的基本概念和作用 </h4> 
  <p> Servlet是Java EE的核心组件之一，用于处理客户端请求和生成动态Web内容。本质上，Servlet是一个运行在服务器端的Java类，它可以响应各种类型的请求（如HTTP请求），并返回响应。 </p> 
  <p> 当用户提交一个HTML表单时，浏览器会向服务器发送一个HTTP请求，该请求包含表单数据。Servlet通过HTTP请求的输入流读取这些数据，处理后通过输出流发送响应给客户端。 </p> 
  <h4> 6.1.2 Servlet处理GET和POST请求数据的方法 </h4> 
  <p> GET和POST是HTTP协议中常用的两种请求方法。在Servlet中处理它们的数据略有不同。 </p> 
  <ul> 
   <li> <strong> GET请求数据的处理 </strong> </li> 
  </ul> 
  <p> GET请求的数据通常附加在URL之后，称为URL参数。Servlet可以通过 <code> HttpServletRequest </code> 对象的 <code> getQueryString() </code> 方法获取完整的参数字符串，或者使用 <code> getParameter() </code> 方法直接获取特定参数值。 </p> 
  <p> <code> java String paramValue = request.getParameter("paramName"); </code> </p> 
  <p> 请注意，由于URL的长度限制以及安全问题，GET请求通常用于那些不需要传输大量或敏感数据的场景。 </p> 
  <ul> 
   <li> <strong> POST请求数据的处理 </strong> </li> 
  </ul> 
  <p> 相比GET请求，POST请求适合传输大量或敏感数据，因为数据不会显示在URL中。Servlet处理POST请求通常涉及读取请求体中的数据流。可以通过 <code> getInputStream() </code> 方法获取数据输入流。 </p> 
  <p> <code> java BufferedReader reader = request.getReader(); String line; StringBuilder input = new StringBuilder(); while ((line = reader.readLine()) != null) { input.append(line); } // 解析input中的数据，通常是application/x-www-form-urlencoded或multipart/form-data格式 </code> </p> 
  <h3> 6.2 Spring框架中的表单处理 </h3> 
  <h4> 6.2.1 Spring MVC表单绑定机制 </h4> 
  <p> Spring MVC是Spring框架的一部分，它提供了一套完整的Web层框架来处理HTTP请求和响应。表单绑定是Spring MVC中的一个重要功能，它可以通过声明式的绑定机制将表单数据绑定到后端的Java对象。 </p> 
  <p> 在Spring MVC中，可以通过 <code> @ModelAttribute </code> 注解来绑定表单数据到方法参数或者模型属性。当表单提交时，Spring会自动将HTTP请求参数与Java对象的属性匹配，并填充对象。 </p> 
  <pre><code class="language-java">@Controller
public class MyFormController {

    @RequestMapping(value = "/submitForm", method = RequestMethod.POST)
    public String handleFormSubmit(@ModelAttribute("user") User user) {
        // User对象已经被填充了表单数据
        // 进行后续处理，比如保存到数据库
        return "success";
    }
}
</code></pre> 
  <h4> 6.2.2 数据绑定和表单校验的实现 </h4> 
  <p> Spring提供了多种数据绑定和校验的机制。例如，可以使用JSR-303标准的校验注解来进行声明式校验。当请求提交到控制器方法时，Spring会自动应用校验逻辑，并将校验结果封装到 <code> BindingResult </code> 对象中。 </p> 
  <pre><code class="language-java">import javax.validation.Valid;

@Controller
public class MyFormController {

    @RequestMapping(value = "/submitForm", method = RequestMethod.POST)
    public String handleFormSubmit(@Valid @ModelAttribute("user") User user, BindingResult result) {
        if (result.hasErrors()) {
            // 如果校验失败，返回表单页面，并展示错误信息
            return "form";
        }
        // 校验通过，进行业务处理
        return "success";
    }
}
</code></pre> 
  <h3> 6.3 后端数据的安全性处理 </h3> 
  <h4> 6.3.1 SQL注入的防御措施 </h4> 
  <p> SQL注入是一种常见的安全威胁，攻击者可以通过在表单字段中输入恶意SQL代码来破坏数据库。在Java后端开发中，可以采用预处理语句（PreparedStatement）来防止SQL注入。 </p> 
  <p> PreparedStatement通过使用占位符来传递参数，可以自动处理特殊字符的转义，因此可以有效避免SQL注入问题。 </p> 
  <pre><code class="language-java">String sql = "INSERT INTO users (username, password) VALUES (?, ?)";
PreparedStatement pstmt = connection.prepareStatement(sql);
pstmt.setString(1, user.getUsername());
pstmt.setString(2, user.getPassword());
pstmt.executeUpdate();
</code></pre> 
  <h4> 6.3.2 跨站请求伪造（CSRF）防护策略 </h4> 
  <p> CSRF攻击利用了网站对用户浏览器的信任，当用户登录网站后，攻击者诱使用户访问恶意链接或表单，从而执行不应执行的操作。 </p> 
  <p> Spring Security提供了CSRF防护功能，通过为每个用户会话生成一个随机的CSRF令牌，并要求所有POST请求都携带这个令牌，从而防止CSRF攻击。 </p> 
  <pre><code class="language-java">// 在Spring MVC配置中启用CSRF保护
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            ...
            .and()
            .csrf().csrfTokenRepository(CookieCsrfTokenRepository.withHttpOnlyFalse());
    }
}
</code></pre> 
  <p> 在HTML表单中，需要确保CSRF令牌作为隐藏的表单字段被包含。 </p> 
  <pre><code class="language-html"><input type="hidden" name="_csrf" value="${_csrf.token}" />
</code></pre> 
  <p> 通过这些措施，Java后端开发者可以有效地处理表单数据并确保应用程序的安全性。下一章，我们将讨论表单安全性和性能优化的最佳实践。 </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> 简介：网页表单是用户与服务器交互的重要界面元素，本资源提供了从构建表单到数据提交的完整流程。介绍了HTML表单基础、GET与POST提交方法、JavaScript事件处理、CSS样式设计，并通过demo.html文件展示综合应用，以及Java后端的接收和处理。同时，强调了表单安全和性能优化的重要性。 </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="1886039148297515008"></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">你可能感兴趣的:(表单提交实战教程：HTML、CSS、JavaScript到Java后端)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1899346470969077760.htm"
                           title="ES6解构赋值详解" target="_blank">ES6解构赋值详解</a>
                        <span class="text-muted">漫天转悠</span>
<a class="tag" taget="_blank" href="/search/ES6/1.htm">ES6</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a>
                        <div>ES6解构赋值详解ES6解构赋值是JavaScript语言的一项强大特性，它允许从数组或对象中提取数据，并将其赋值给变量。这一特性不仅简化了代码，提高了可读性，还增强了代码的灵活性。本文将详细介绍ES6解构赋值的基本概念、语法、应用场景以及一些高级用法。1.基本概念解构赋值是对赋值运算符的扩展。它允许按照一定的模式，从数组或对象中提取值，并赋值给变量。这种语法使得从复杂数据结构中提取数据变得更加简</div>
                    </li>
                    <li><a href="/article/1899343573246078976.htm"
                           title="web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript" target="_blank">web前端期末大作业：婚纱网页主题网站设计——唯一旅拍婚纱公司网站HTML+CSS+JavaScript</a>
                        <span class="text-muted">IT-司马青衫</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E8%AF%BE%E7%A8%8B%E8%AE%BE%E8%AE%A1/1.htm">课程设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>‍静态网站的编写主要是用HTMLDⅣV+CSSJS等来完成页面的排版设计‍，一般的网页作业需要融入以下知识点：div布局、浮动定位、高级css、表格、表单及验证、js轮播图、音频视频Fash的应用、uli、下拉导航栏、鼠标划过效果等知识点，学生网页作业源码，制作水平和原创度都适合学习或交作业用，记得点赞。精彩专栏推荐【作者主页——获取更多优质源码】【web前端期末大作业——毕设项目精品实战案例(1</div>
                    </li>
                    <li><a href="/article/1899341930186207232.htm"
                           title="灵犀X2：人形机器人的新篇章" target="_blank">灵犀X2：人形机器人的新篇章</a>
                        <span class="text-muted">Anima.AI</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/1.htm">机器人</a>
                        <div>简介灵犀X2是智元机器人推出的最新款人形机器人，很可能是其前代产品灵犀X1的升级版本。灵犀X1作为一款开源的模块化机器人，其机械设计和软件代码完全公开，全球开发者都可以参与优化和创新。这款机器人身高130厘米，体重33公斤，具备34到44个自由度（DegreesofFreedom,DoF，即关节活动范围），能够执行轻型任务，如端茶送水、整理房间等。灵犀X2在继承这些特性的基础上，可能进一步提升了动</div>
                    </li>
                    <li><a href="/article/1899339285023223808.htm"
                           title="Webpack打包构建流程" target="_blank">Webpack打包构建流程</a>
                        <span class="text-muted">码上跑步</span>
<a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>webpack的打包构建流程为什么需要打包？在前端有非常多的资源，如css、js、vue、vue、图片、字体等。有些资源需要加工处理1.ts->jsts-loader2.css->css-loader+style-loader3.图片->file-loader+url-loader4.html->html-webpack-plugin需要对产物进行优化optimization（webpack优化配</div>
                    </li>
                    <li><a href="/article/1899338906130771968.htm"
                           title="webpack" target="_blank">webpack</a>
                        <span class="text-muted">码上跑步</span>
<a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a>
                        <div>webpack介绍webpack是一个构建工具,实现了模块化管理项目.他的工作方式是用各种loader将各种资源转化为js文件或者对js文件进行压缩编译亦或对静态资源进行处理.官网:webpack由来模块化存在一些问题1.ESM的兼容性问题2.模块文件过多,网络请求频繁3.前端的所有资源包括html和css都需要模块化构建工具应运而生,需要一个集编译,模块打包,支持不同的资源的模块打包工具.Web</div>
                    </li>
                    <li><a href="/article/1899338906554396672.htm"
                           title="Vue初体验" target="_blank">Vue初体验</a>
                        <span class="text-muted">码上跑步</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>Vue基础Vue是什么？Vue是javascript的渐进式框架。Vue初识Vue工作时必须要创建一个Vue的实例，并且传入一个配置对象。root容器里的代码是符合html的语法但是新添加了一些Vue语法，在这些地方Vue会自动进行解析。root容器里的代码称为Vue模版。Vue实例和容器是一一对应的。在实际开发中只有一个Vue，配合组件使用。在vue里的插值{{}}内部只要写js表达式就能正常解</div>
                    </li>
                    <li><a href="/article/1899336890570567680.htm"
                           title="机器学习实战——音乐流派分类（主页有源码）" target="_blank">机器学习实战——音乐流派分类（主页有源码）</a>
                        <span class="text-muted">喵了个AI</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0%E5%AE%9E%E6%88%98/1.htm">机器学习实战</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a><a class="tag" taget="_blank" href="/search/%E5%88%86%E7%B1%BB/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>
                        <div>✨个人主页欢迎您的访问✨期待您的三连✨✨个人主页欢迎您的访问✨期待您的三连✨✨个人主页欢迎您的访问✨期待您的三连✨1.简介音乐流派分类是音乐信息检索（MusicInformationRetrieval,MIR）中的一个重要任务，旨在通过分析音频信号的特征，将音乐自动分类到不同的流派（如古典、摇滚、爵士、流行等）。随着数字音乐平台的普及，音乐流派分类技术被广泛应用于音乐推荐、自动标签生成和音乐库管理</div>
                    </li>
                    <li><a href="/article/1899332226382884864.htm"
                           title="godot在_process()函数实现非阻塞延时触发逻辑" target="_blank">godot在_process()函数实现非阻塞延时触发逻辑</a>
                        <span class="text-muted">小沙盒</span>
<a class="tag" taget="_blank" href="/search/godot/1.htm">godot</a><a class="tag" taget="_blank" href="/search/godot/1.htm">godot</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F%E5%BC%95%E6%93%8E/1.htm">游戏引擎</a>
                        <div>extendsNode2D#用于累加delta的变量varelapsed_time=0#设定计时周期，单位为秒varinterval=3func_process(delta):#累加delta到elapsed_timeelapsed_time+=delta#检查是否达到了设定的时间间隔ifelapsed_time>=interval:#执行每3秒要做的逻辑print("每3秒执行一次的逻辑被触发"</div>
                    </li>
                    <li><a href="/article/1899328948634972160.htm"
                           title="CSS入门指南：从零开始学习网页开发——（一）简介" target="_blank">CSS入门指南：从零开始学习网页开发——（一）简介</a>
                        <span class="text-muted">GIS小白吃</span>
<a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一、什么是CSS？CSS（CascadingStyleSheets，层叠样式表）是一种用于描述网页的外观和布局的样式表语言。它通过定义网页元素的样式（如颜色、字体、边距等）来与HTML内容分离，提升了网页的可维护性和设计的灵活性。CSS的核心目的是增强网页的表现力。早期的网页仅使用HTML来进行内容的展示，但由于HTML只能描述内容的结构，页面设计和内容变得难以管理。于是，CSS作为一种辅助技术应</div>
                    </li>
                    <li><a href="/article/1899327434306678784.htm"
                           title="AI大模型零基础金融人如何一周自学大模型，从零基础到入门，看这篇就够了！" target="_blank">AI大模型零基础金融人如何一周自学大模型，从零基础到入门，看这篇就够了！</a>
                        <span class="text-muted">冻感糕人~</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/%E9%87%91%E8%9E%8D/1.htm">金融</a><a class="tag" taget="_blank" href="/search/AI%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">AI大模型</a><a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E6%8A%80%E6%9C%AF/1.htm">大模型技术</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">大模型学习路线</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E5%9F%BA%E7%A1%80/1.htm">大模型基础</a>
                        <div>前几天参加了字节跳动在上海举办的火山引擎Force原动力大会，OpenAI也连续开了12天发布会，最近堪称科技界的春晚了。如果说2022年ChatGPT横空出世把人工智能的发展带上了一个新的台阶，那么2024年末，大模型对工作、生活的全面“侵入”让我们越来越接近库兹韦尔所描述的那个奇点时刻。作为金融民工，我们想通过这篇文章讲讲从用户的角度如何一周快速掌握大模型，以及为什么我建议每一个金融从业人员（</div>
                    </li>
                    <li><a href="/article/1899324534067097600.htm"
                           title="关于Jquery基本内容一" target="_blank">关于Jquery基本内容一</a>
                        <span class="text-muted">gloria123_</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>jQuery(jQ)html+css+js1jQ是一个js库,封装了大量的特定的集合(函数和方法)如animate()、css()、show()等2使用jQ大大提高开发效率,简化dom操作常见的js库jQueryYUIDojoExtJszeptojQuery选择器$(selector)筛选方法parent()$(“li”).parent()children(selector)$(“ul”).chi</div>
                    </li>
                    <li><a href="/article/1899321628987289600.htm"
                           title="【春招笔试真题】饿了么2025.03.07-开发岗真题" target="_blank">【春招笔试真题】饿了么2025.03.07-开发岗真题</a>
                        <span class="text-muted">春秋招笔试突围</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%80%E6%96%B0%E4%BA%92%E8%81%94%E7%BD%91%E6%98%A5%E7%A7%8B%E6%8B%9B%E8%AF%95%E9%A2%98%E5%90%88%E9%9B%86/1.htm">最新互联网春秋招试题合集</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
                        <div>饿了么2025.03.07-开发岗题目1️⃣：统计01串中0和1的个数，通过计算可能的交换方式确定不同字符串数量2️⃣：使用模板匹配技术识别验证码图片中的"#"符号分布模式3️⃣：构建字典树（Trie）优化异或查询，实现高效的数字黑板游戏整体难度这套题目整体难度适中，由简到难逐步递进：第一题是基础的计数问题，需要理解交换操作的特性第二题是模式识别问题，需要实现模板匹配第三题是高级数据结构应用，需要</div>
                    </li>
                    <li><a href="/article/1899318603723894784.htm"
                           title="H5基于Canvas实现电子签名并生成PDF文档" target="_blank">H5基于Canvas实现电子签名并生成PDF文档</a>
                        <span class="text-muted">2401_85156853</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a><a class="tag" taget="_blank" href="/search/pdf/1.htm">pdf</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                        <div>3.注册监听事件letbeginX:number,beginY:number;constcanvas:HTMLCanvasElement=canvasDom.current;constctx=canvas.getContext(‘2d’);ctx.fillStyle=‘#fff’;ctx.fillRect(0,0,canvas.width,canvas.height);canvas.addEven</div>
                    </li>
                    <li><a href="/article/1899313815368036352.htm"
                           title="QT显示网页控件QAxWidget、QWebEngineView及区别" target="_blank">QT显示网页控件QAxWidget、QWebEngineView及区别</a>
                        <span class="text-muted">AI+程序员在路上</span>
<a class="tag" taget="_blank" href="/search/QT%26amp%3BC%2B%2B%E5%AE%9E%E6%88%98%E7%B3%BB%E5%88%97/1.htm">QT&C++实战系列</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>一.QT种显示网页控件QAxWidget1.介绍QAxWidget属于QtAxContainer模块，ActiveX是微软提出的一种组件对象模型（COM）技术，允许不同的软件组件在Windows操作系统上进行交互和集成。QAxWidget为开发者提供了在Qt应用程序中使用ActiveX控件的能力，通过它可以将各种ActiveX控件嵌入到应用程序界面中。2.使用引入必要的模块在.pro文件中添加QT</div>
                    </li>
                    <li><a href="/article/1899313310344474624.htm"
                           title="JavaScript -闭包" target="_blank">JavaScript -闭包</a>
                        <span class="text-muted">嗷呜~嗷呜~呜呜~</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>闭包定义:函数声明时会保存其所在的作用域(词法环境),必然有一个全局作用域,除了全局作用域剩余的对于当前函数来说叫--闭包闭包特征:函数在声明时会保存其所在的所有作用域(词法环境)闭包本质:作用域中所使用到的值组成的对象闭包的作用:把使用到的来自于其他作用域的值保存起来,保障函数在执行时能顺利运行window里面的ashow对象拥有一个scopes属性,其中存放了函数使用到的其他作用域中的值:这些</div>
                    </li>
                    <li><a href="/article/1899308643711512576.htm"
                           title="ollama教程——使用Ollama与LangChain实现Function Calling(函数调用)的详细教程（二）【附完整源码】" target="_blank">ollama教程——使用Ollama与LangChain实现Function Calling(函数调用)的详细教程（二）【附完整源码】</a>
                        <span class="text-muted">walkskyer</span>
<a class="tag" taget="_blank" href="/search/ollama%E5%85%A5%E9%97%A8%E6%95%99%E7%A8%8B/1.htm">ollama入门教程</a><a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/ollama/1.htm">ollama</a><a class="tag" taget="_blank" href="/search/LLM/1.htm">LLM</a>
                        <div>ollama入门系列教程简介与目录相关文章:Ollama教程——入门：开启本地大型语言模型开发之旅Ollama教程——模型：如何将模型高效导入到Ollama框架Ollama教程——兼容OpenAIAPI：高效利用兼容OpenAI的API进行AI项目开发Ollama教程——使用LangChain：Ollama与LangChain的强强联合Ollama教程——生成内容API：利用Ollama的原生AP</div>
                    </li>
                    <li><a href="/article/1899307630996811776.htm"
                           title="centos7升级curl到最新版包含离线安装方法" target="_blank">centos7升级curl到最新版包含离线安装方法</a>
                        <span class="text-muted">llody_55</span>
<a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a>
                        <div>当前版本[root@consul~]#curl-Vcurl7.29.0(x86_64-redhat-linux-gnu)libcurl/7.29.0NSS/3.53.1zlib/1.2.7libidn/1.28libssh2/1.8.0Protocols:dictfileftpftpsgopherhttphttpsimapimapsldapldapspop3pop3srtspscpsftpsmtp</div>
                    </li>
                    <li><a href="/article/1899304350371606528.htm"
                           title="Qt的QGraphics View的使用" target="_blank">Qt的QGraphics View的使用</a>
                        <span class="text-muted">水瓶丫头站住</span>
<a class="tag" taget="_blank" href="/search/Qt/1.htm">Qt</a><a class="tag" taget="_blank" href="/search/qt/1.htm">qt</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/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>
                        <div>QGraphicsView框架是Qt中用于管理和渲染大量2D图形对象的强大工具，适合构建绘图软件、游戏编辑器、数据可视化等场景。以下是关键使用步骤和示例：1.核心组件QGraphicsScene：场景容器，管理所有图形项（Item）的层级、坐标和事件。QGraphicsView：视图组件，用于显示场景内容，支持缩放、旋转、滚动等操作。QGraphicsItem：所有图形项的基类（如矩形、椭圆、自定</div>
                    </li>
                    <li><a href="/article/1899302603251052544.htm"
                           title="程序员必看！DeepSeek隐藏用法大揭秘：从代码优化到多模态开发，这些技巧让你少熬三夜班" target="_blank">程序员必看！DeepSeek隐藏用法大揭秘：从代码优化到多模态开发，这些技巧让你少熬三夜班</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a>
                        <div>最近在程序员圈子里，有个同事老张的故事特别火。他原本每周要花20小时写接口文档，自从用上DeepSeek的代码补全功能，现在喝着咖啡看AI自动生成Swagger注释——这让我想起刚入行时，为了调通一个正则表达式熬夜到凌晨三点的自己。今天咱们不聊那些官方说明书，就说点真正能让键盘冒火星的实战技巧。藏在代码补全里的"作弊码"很多人以为DeepSeek就是个加强版搜索引擎，其实它对代码的理解远超想象。比</div>
                    </li>
                    <li><a href="/article/1899301971513372672.htm"
                           title="HarmonyNext实战案例：基于ArkTS的高性能分布式机器学习应用开发" target="_blank">HarmonyNext实战案例：基于ArkTS的高性能分布式机器学习应用开发</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/harmonyos-next/1.htm">harmonyos-next</a>
                        <div>HarmonyNext实战案例：基于ArkTS的高性能分布式机器学习应用开发引言在HarmonyNext生态系统中，分布式机器学习是其核心特性之一。通过分布式机器学习，开发者可以充分利用多设备的计算资源，实现复杂模型的训练与推理。本文将深入探讨如何使用ArkTS12+语法开发一个高性能的分布式机器学习应用，涵盖从基础概念到高级技巧的全面讲解。通过本案例，您将学习到如何利用HarmonyNext的分</div>
                    </li>
                    <li><a href="/article/1899301829213220864.htm"
                           title="Vue3 基础教程：从入门到实践 (保姆级教学)" target="_blank">Vue3 基础教程：从入门到实践 (保姆级教学)</a>
                        <span class="text-muted">前段技术人</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a>
                        <div>一、Vue3简介Vue.js是一款用于构建用户界面的JavaScript框架，而Vue3作为其最新的主要版本，带来了诸多令人瞩目的改进与新特性，使其在前端开发领域备受青睐。（一）Vue3的优势性能提升：Vue3重写了虚拟DOM算法，显著提高了挂载、更新和渲染的速度。在处理大型列表或频繁数据更新的场景时，Vue3的表现更为出色，能够为用户带来更流畅的交互体验。例如，一个包含大量商品信息的电商产品列表</div>
                    </li>
                    <li><a href="/article/1899301715853766656.htm"
                           title="HarmonyNext实战案例：基于ArkTS的实时多人协作白板应用开发" target="_blank">HarmonyNext实战案例：基于ArkTS的实时多人协作白板应用开发</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/harmonyos-next/1.htm">harmonyos-next</a>
                        <div>HarmonyNext实战案例：基于ArkTS的实时多人协作白板应用开发引言在HarmonyNext生态系统中，实时多人协作是其核心特性之一。通过实时多人协作，开发者可以构建高效、互动的应用场景，例如实时白板、协同编辑等。本文将深入探讨如何使用ArkTS12+语法开发一个实时多人协作白板应用，涵盖从基础概念到高级技巧的全面讲解。通过本案例，您将学习到如何利用HarmonyNext的实时通信特性，结</div>
                    </li>
                    <li><a href="/article/1899301334323097600.htm"
                           title="HarmonyNext实战：基于ArkTS的分布式数据同步应用开发" target="_blank">HarmonyNext实战：基于ArkTS的分布式数据同步应用开发</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/harmonyos-next/1.htm">harmonyos-next</a>
                        <div>HarmonyNext实战：基于ArkTS的分布式数据同步应用开发引言在HarmonyNext生态系统中，分布式数据同步是一个核心功能，它允许设备之间无缝共享和同步数据。本文将深入探讨如何使用ArkTS构建一个高性能的分布式数据同步应用，涵盖从数据模型设计到分布式同步策略的完整开发流程。我们将通过一个实际的案例——实现一个跨设备的任务管理应用，来展示ArkTS在HarmonyNext平台上的强大能</div>
                    </li>
                    <li><a href="/article/1899301207139217408.htm"
                           title="HarmonyNext实战：基于ArkTS的分布式数据同步应用开发" target="_blank">HarmonyNext实战：基于ArkTS的分布式数据同步应用开发</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/harmonyos-next/1.htm">harmonyos-next</a>
                        <div>HarmonyNext实战：基于ArkTS的分布式数据同步应用开发引言在HarmonyNext生态系统中，分布式数据同步是一个核心特性，它允许设备之间无缝共享和同步数据。本文将深入探讨如何利用ArkTS语言开发一个高性能的分布式数据同步应用，涵盖从基础数据存储到跨设备同步的完整流程。我们将通过一个实战案例，详细讲解如何实现一个支持多设备数据同步的任务管理应用，并确保其性能优化。1.环境准备与项目初</div>
                    </li>
                    <li><a href="/article/1899301204610052096.htm"
                           title="HarmonyNext实战案例：基于ArkTS的高性能图像处理应用开发" target="_blank">HarmonyNext实战案例：基于ArkTS的高性能图像处理应用开发</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/harmonyos-next/1.htm">harmonyos-next</a>
                        <div>HarmonyNext实战案例：基于ArkTS的高性能图像处理应用开发引言在HarmonyNext生态系统中，ArkTS作为新一代的编程语言，为开发者提供了强大的工具来构建高性能、跨平台的应用。本文将深入探讨如何使用ArkTS12+语法开发一个高性能的图像处理应用，涵盖从基础概念到高级技巧的全面讲解。通过本案例，您将学习到如何利用HarmonyNext的特性，结合ArkTS的强大功能，实现复杂的图</div>
                    </li>
                    <li><a href="/article/1899300819287732224.htm"
                           title="javaweb内置对象request,response,out,session,Application等" target="_blank">javaweb内置对象request,response,out,session,Application等</a>
                        <span class="text-muted">菜鸟小T</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/struts/1.htm">struts</a>
                        <div>JSP内置对象是一些不用声明，也不用像一般的java代码一样需要用new去获取实例的对象，这些对象可以直接在JSP页面的脚本部分使用。一、request对象：1.response和request对象是JSP的内置对象中比较重要的两个，这两个对象提供了对服务器和浏览器通信方法的控制，在JSP中，内置对象request封装了用户提交的信息，即使用HTTP协议处理客户请求时，表单提交的数据就存放在req</div>
                    </li>
                    <li><a href="/article/1899300697472561152.htm"
                           title="23.Harmonyos Next仿uv-ui 组件NumberBox 步进器组件基础用法" target="_blank">23.Harmonyos Next仿uv-ui 组件NumberBox 步进器组件基础用法</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/harmonyos-next/1.htm">harmonyos-next</a>
                        <div>温馨提示：本篇博客的详细代码已发布到git:https://gitcode.com/nutpi/HarmonyosNext可以下载运行哦！1.组件介绍NumberBox步进器是HarmonyOSNEXT中一个实用的数字输入交互组件，它允许用户通过点击按钮或直接输入来增加或减少数值。本文将详细介绍NumberBox步进器组件的基础用法，帮助开发者快速上手使用这一组件。2.效果展示3.基础用法3.1引</div>
                    </li>
                    <li><a href="/article/1899300061964201984.htm"
                           title="VSCode 插件开发实战（十六）：详解插件生命周期" target="_blank">VSCode 插件开发实战（十六）：详解插件生命周期</a>
                        <span class="text-muted">乐闻x</span>
<a class="tag" taget="_blank" href="/search/VsCode/1.htm">VsCode</a><a class="tag" taget="_blank" href="/search/%E4%BD%BF%E7%94%A8%E6%89%8B%E5%86%8C/1.htm">使用手册</a><a class="tag" taget="_blank" href="/search/vscode/1.htm">vscode</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a>
                        <div>前言VSCode它不仅功能强大，而且可以通过插件进行扩展，以满足不同开发者的需求。那么，VSCode自定义插件的生命周期是如何运行的呢？今天我们就用通俗易懂的方式来讲解一下。什么是VSCode插件？VSCode插件是用来扩展编辑器功能的小程序。通过这些插件，我们可以添加新的语言支持、代码片段、调试支持等。VSCode插件通常是用JavaScript或TypeScript编写的，并打包成VSIX文件</div>
                    </li>
                    <li><a href="/article/1899299809274163200.htm"
                           title="web前端高级JavaScript - 闭包的应用及循环事件绑定的N中解决办法" target="_blank">web前端高级JavaScript - 闭包的应用及循环事件绑定的N中解决办法</a>
                        <span class="text-muted">一笑程序猴</span>
<a class="tag" taget="_blank" href="/search/WEB%E5%89%8D%E7%AB%AF%E9%AB%98%E7%BA%A7%E6%95%99%E7%A8%8B/1.htm">WEB前端高级教程</a><a class="tag" taget="_blank" href="/search/%E9%97%AD%E5%8C%85%E5%BA%94%E7%94%A8/1.htm">闭包应用</a><a class="tag" taget="_blank" href="/search/%E5%BE%AA%E7%8E%AF%E4%BA%8B%E4%BB%B6%E7%BB%91%E5%AE%9A/1.htm">循环事件绑定</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%AE%9A%E4%B9%89%E7%B4%A2%E5%BC%95/1.htm">自定义索引</a>
                        <div>闭包在循环事件绑定中的应用场景描述：在页面上有3个button按钮，当点击每个按钮时输出当前按钮的索引值，要求用循环来绑定每个按钮的事件，看下面的代码。button1button2button3varbuttons=document.querySelectorAll('button');for(vari=0;i<buttons.length;i++){buttons[i].onclick=func</div>
                    </li>
                    <li><a href="/article/1899299059043201024.htm"
                           title="刷题前必学！二叉树！用JavaScript学数据结构与算法" target="_blank">刷题前必学！二叉树！用JavaScript学数据结构与算法</a>
                        <span class="text-muted"></span>

                        <div>‍JavaScript算法与数据结构-HowieCong务必要熟悉JavaScript使用再来学！一、树是什么？数据结构中的树，对于现实世界中的树简化——树根抽象为“根节点”，树枝抽象为“边”，树枝的两个端点抽象为“结点”，树叶抽象为“叶子结点”计算机中的树如下：二、树的重点树的层次计算规则：根结点所在的那一层为第一层，其子节点为第二层，以此类推结点和树的高度计算规则：叶子结点高度为1，每向上一层</div>
                    </li>
                                <li><a href="/article/47.htm"
                                       title="jdk tomcat 环境变量配置" target="_blank">jdk tomcat 环境变量配置</a>
                                    <span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jdk/1.htm">jdk</a><a class="tag" taget="_blank" href="/search/tomcat/1.htm">tomcat</a>
                                    <div>Win7 下如何配置java环境变量 
 
1。准备jdk包，win7系统，tomcat安装包（均上网下载即可） 
2。进行对jdk的安装，尽量为默认路径（但要记住啊！！以防以后配置用。。。） 
3。分别配置高级环境变量。 
   电脑-->右击属性-->高级环境变量-->环境变量。 
 
 
分别配置 : 
 
path   
 &nbs</div>
                                </li>
                                <li><a href="/article/174.htm"
                                       title="Spring调SDK包报java.lang.NoSuchFieldError错误" target="_blank">Spring调SDK包报java.lang.NoSuchFieldError错误</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>        在工作中调另一个系统的SDK包，出现如下java.lang.NoSuchFieldError错误。 
org.springframework.web.util.NestedServletException: Handler processing failed; nested exception is java.l</div>
                                </li>
                                <li><a href="/article/301.htm"
                                       title="LeetCode[位运算] - #136 数组中的单一数" target="_blank">LeetCode[位运算] - #136 数组中的单一数</a>
                                    <span class="text-muted">Cwind</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%A2%98%E8%A7%A3/1.htm">题解</a><a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a>
                                    <div>原题链接：#136 Single Number 
要求： 
给定一个整型数组，其中除了一个元素之外，每个元素都出现两次。找出这个元素 
注意：算法的时间复杂度应为O(n)，最好不使用额外的内存空间 
难度：中等 
分析： 
题目限定了线性的时间复杂度，同时不使用额外的空间，即要求只遍历数组一遍得出结果。由于异或运算 n XOR n = 0, n XOR 0 = n，故将数组中的每个元素进</div>
                                </li>
                                <li><a href="/article/428.htm"
                                       title="qq登陆界面开发" target="_blank">qq登陆界面开发</a>
                                    <span class="text-muted">15700786134</span>
<a class="tag" taget="_blank" href="/search/qq/1.htm">qq</a>
                                    <div>今天我们来开发一个qq登陆界面，首先写一个界面程序，一个界面首先是一个Frame对象，即是一个窗体。然后在这个窗体上放置其他组件。代码如下： 
public class First {         public void initul(){        jf=ne</div>
                                </li>
                                <li><a href="/article/555.htm"
                                       title="Linux的程序包管理器RPM" target="_blank">Linux的程序包管理器RPM</a>
                                    <span class="text-muted">被触发</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>在早期我们使用源代码的方式来安装软件时，都需要先把源程序代码编译成可执行的二进制安装程序，然后进行安装。这就意味着每次安装软件都需要经过预处理-->编译-->汇编-->链接-->生成安装文件--> 安装，这个复杂而艰辛的过程。为简化安装步骤，便于广大用户的安装部署程序，程序提供商就在特定的系统上面编译好相关程序的安装文件并进行打包，提供给大家下载，我们只需要根据自己的</div>
                                </li>
                                <li><a href="/article/682.htm"
                                       title="socket通信遇到EOFException" target="_blank">socket通信遇到EOFException</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/EOFException/1.htm">EOFException</a>
                                    <div>java.io.EOFException 
at java.io.ObjectInputStream$PeekInputStream.readFully(ObjectInputStream.java:2281) 
at java.io.ObjectInputStream$BlockDataInputStream.readShort(ObjectInputStream.java:</div>
                                </li>
                                <li><a href="/article/809.htm"
                                       title="基于spring的web项目定时操作" target="_blank">基于spring的web项目定时操作</a>
                                    <span class="text-muted">知了ing</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a>
                                    <div>废话不多说，直接上代码，很简单 配置一下项目启动就行 
1，web.xml 
 

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xmlns="h</div>
                                </li>
                                <li><a href="/article/936.htm"
                                       title="树形结构的数据库表Schema设计" target="_blank">树形结构的数据库表Schema设计</a>
                                    <span class="text-muted">矮蛋蛋</span>
<a class="tag" taget="_blank" href="/search/schema/1.htm">schema</a>
                                    <div>原文地址： 
http://blog.csdn.net/MONKEY_D_MENG/article/details/6647488 
 
 
    程序设计过程中，我们常常用树形结构来表征某些数据的关联关系，如企业上下级部门、栏目结构、商品分类等等，通常而言，这些树状结构需要借助于数据库完成持久化。然而目前的各种基于关系的数据库，都是以二维表的形式记录存储数据信息，</div>
                                </li>
                                <li><a href="/article/1063.htm"
                                       title="maven将jar包和源码一起打包到本地仓库" target="_blank">maven将jar包和源码一起打包到本地仓库</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a>
                                    <div>http://stackoverflow.com/questions/4031987/how-to-upload-sources-to-local-maven-repository 
 
 
 
<project>
  ...
  <build>
    <plugins>
      <plugin>
        <groupI</div>
                                </li>
                                <li><a href="/article/1190.htm"
                                       title="java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！" target="_blank">java IO操作 与 File 获取文件或文件夹的大小，可读，等属性！！！</a>
                                    <span class="text-muted">百合不是茶</span>

                                    <div>类 File 
File是指文件和目录路径名的抽象表示形式。 
1，何为文件： 
标准文件（txt doc mp3...） 
目录文件（文件夹） 
虚拟内存文件 
  
2，File类中有可以创建文件的 createNewFile（）方法,在创建新文件的时候需要try{} catch(）{}因为可能会抛出异常；也有可以判断文件是否是一个标准文件的方法isFile();这些防抖都</div>
                                </li>
                                <li><a href="/article/1317.htm"
                                       title="Spring注入有继承关系的类（2）" target="_blank">Spring注入有继承关系的类（2）</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>被注入类的父类有相应的属性，Spring可以直接注入相应的属性，如下所例：1.AClass类 
package com.bijian.spring.test4;

public class AClass {

    private String a;
    private String b;
   
    public String getA() {
        retu</div>
                                </li>
                                <li><a href="/article/1444.htm"
                                       title="30岁转型期你能否成为成功人士" target="_blank">30岁转型期你能否成为成功人士</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E9%95%BF/1.htm">成长</a><a class="tag" taget="_blank" href="/search/%E5%8A%B1%E5%BF%97/1.htm">励志</a>
                                    <div>        很多人由于年轻时走了弯路，到了30岁一事无成，这样的例子大有人在。但同样也有一些人，整个职业生涯都发展得很优秀，到了30岁已经成为职场的精英阶层。由于做猎头的原因，我们接触很多30岁左右的经理人，发现他们在职业发展道路上往往有很多致命的问题。在30岁之前，他们的职业生涯表现很优秀，但从30岁到40岁这一段，很多人</div>
                                </li>
                                <li><a href="/article/1571.htm"
                                       title="【Velocity四】Velocity与Java互操作" target="_blank">【Velocity四】Velocity与Java互操作</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/velocity/1.htm">velocity</a>
                                    <div>Velocity出现的目的用于简化基于MVC的web应用开发，用于替代JSP标签技术，那么Velocity如何访问Java代码.本篇继续以Velocity三http://bit1129.iteye.com/blog/2106142中的例子为基础， 
     POJO 
   
package com.tom.servlets;

public</div>
                                </li>
                                <li><a href="/article/1698.htm"
                                       title="【Hive十一】Hive数据倾斜优化" target="_blank">【Hive十一】Hive数据倾斜优化</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hive/1.htm">hive</a>
                                    <div>什么是Hive数据倾斜问题 
  
 
 操作：join,group by,count distinct 
 现象：任务进度长时间维持在99%（或100%），查看任务监控页面，发现只有少量（1个或几个）reduce子任务未完成；查看未完成的子任务，可以看到本地读写数据量积累非常大，通常超过10GB可以认定为发生数据倾斜。 
 原因：key分布不均匀 
 倾斜度衡量：平均记录数超过50w且</div>
                                </li>
                                <li><a href="/article/1825.htm"
                                       title="在nginx中集成lua脚本：添加自定义Http头，封IP等" target="_blank">在nginx中集成lua脚本：添加自定义Http头，封IP等</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+lua+csrf/1.htm">nginx lua csrf</a>
                                    <div>Lua是一个可以嵌入到Nginx配置文件中的动态脚本语言，从而可以在Nginx请求处理的任何阶段执行各种Lua代码。刚开始我们只是用Lua 把请求路由到后端服务器，但是它对我们架构的作用超出了我们的预期。下面就讲讲我们所做的工作。 强制搜索引擎只索引mixlr.com 
Google把子域名当作完全独立的网站，我们不希望爬虫抓取子域名的页面，降低我们的Page rank。 
location /{</div>
                                </li>
                                <li><a href="/article/1952.htm"
                                       title="java-3.求子数组的最大和" target="_blank">java-3.求子数组的最大和</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>package beautyOfCoding;


public class MaxSubArraySum {

	/**
	 * 3.求子数组的最大和
题目描述：
输入一个整形数组，数组里有正数也有负数。
数组中连续的一个或多个整数组成一个子数组，每个子数组都有一个和。
求所有子数组的和的最大值。要求时间复杂度为O(n)。
例如输入的数组为1, -2, 3, 10, -4,</div>
                                </li>
                                <li><a href="/article/2079.htm"
                                       title="Netty源码学习-FileRegion" target="_blank">Netty源码学习-FileRegion</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/netty/1.htm">netty</a>
                                    <div>今天看org.jboss.netty.example.http.file.HttpStaticFileServerHandler.java 
可以直接往channel里面写入一个FileRegion对象，而不需要相应的encoder： 
 


		//pipeline（没有诸如“FileRegionEncoder”的handler）：
		public ChannelPipeline ge</div>
                                </li>
                                <li><a href="/article/2206.htm"
                                       title="使用ZeroClipboard解决跨浏览器复制到剪贴板的问题" target="_blank">使用ZeroClipboard解决跨浏览器复制到剪贴板的问题</a>
                                    <span class="text-muted">cngolon</span>
<a class="tag" taget="_blank" href="/search/%E8%B7%A8%E6%B5%8F%E8%A7%88%E5%99%A8/1.htm">跨浏览器</a><a class="tag" taget="_blank" href="/search/%E5%A4%8D%E5%88%B6%E5%88%B0%E7%B2%98%E8%B4%B4%E6%9D%BF/1.htm">复制到粘贴板</a><a class="tag" taget="_blank" href="/search/Zero+Clipboard/1.htm">Zero Clipboard</a>
                                    <div>Zero Clipboard的实现原理 
Zero Clipboard 利用透明的Flash让其漂浮在复制按钮之上，这样其实点击的不是按钮而是 Flash ，这样将需要的内容传入Flash，再通过Flash的复制功能把传入的内容复制到剪贴板。 
Zero Clipboard的安装方法 
首先需要下载 Zero Clipboard的压缩包，解压后把文件夹中两个文件：ZeroClipboard.js </div>
                                </li>
                                <li><a href="/article/2333.htm"
                                       title="单例模式" target="_blank">单例模式</a>
                                    <span class="text-muted">cuishikuan</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B%E6%A8%A1%E5%BC%8F/1.htm">单例模式</a>
                                    <div>第一种（懒汉，线程不安全）： 
public class Singleton {   2     private static Singleton instance;   3     pri</div>
                                </li>
                                <li><a href="/article/2460.htm"
                                       title="spring+websocket的使用" target="_blank">spring+websocket的使用</a>
                                    <span class="text-muted">dalan_123</span>

                                    <div>一、spring配置文件 
<?xml version="1.0" encoding="UTF-8"?><beans xmlns="http://www.springframework.org/schema/beans"    xmlns:xsi="http://www.w3.or</div>
                                </li>
                                <li><a href="/article/2587.htm"
                                       title="细节问题：ZEROFILL的用法范围。" target="_blank">细节问题：ZEROFILL的用法范围。</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
                                    <div>   1、zerofill把月份中的一位数字比如1，2，3等加前导0 
 
      
mysql> CREATE TABLE t1 (year YEAR(4), month INT(2) UNSIGNED ZEROFILL,    -> day</div>
                                </li>
                                <li><a href="/article/2714.htm"
                                       title="Android开发10——Activity的跳转与传值" target="_blank">Android开发10——Activity的跳转与传值</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/Android%E5%BC%80%E5%8F%91/1.htm">Android开发</a>
                                    <div>Activity跳转与传值，主要是通过Intent类，Intent的作用是激活组件和附带数据。 
  
一、Activity跳转 
方法一Intent intent = new Intent(A.this, B.class); startActivity(intent) 
  
方法二Intent intent = new Intent();intent.setCla</div>
                                </li>
                                <li><a href="/article/2841.htm"
                                       title="jdbc 得到表结构、主键" target="_blank">jdbc 得到表结构、主键</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/jdbc+%E5%BE%97%E5%88%B0%E8%A1%A8%E7%BB%93%E6%9E%84%E3%80%81%E4%B8%BB%E9%94%AE/1.htm">jdbc 得到表结构、主键</a>
                                    <div>转自博客：http://blog.csdn.net/ocean1010/article/details/7266042 
假设有个con DatabaseMetaData dbmd = con.getMetaData(); rs = dbmd.getColumns(con.getCatalog(), schema, tableName, null); rs.getSt</div>
                                </li>
                                <li><a href="/article/2968.htm"
                                       title="Android 应用程序开关GPS" target="_blank">Android 应用程序开关GPS</a>
                                    <span class="text-muted">gqdy365</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>要在应用程序中操作GPS开关需要权限： 
 

<uses-permission android:name="android.permission.WRITE_SECURE_SETTINGS" />
 
但在配置文件中添加此权限之后会报错，无法再eclipse里面正常编译，怎么办？ 
1、方法一：将项目放到Android源码中编译； 
2、方法二：网上有人说cl</div>
                                </li>
                                <li><a href="/article/3095.htm"
                                       title="Windows上调试MapReduce" target="_blank">Windows上调试MapReduce</a>
                                    <span class="text-muted">zhiquanliu</span>
<a class="tag" taget="_blank" href="/search/mapreduce/1.htm">mapreduce</a>
                                    <div>1.下载hadoop2x-eclipse-plugin https://github.com/winghc/hadoop2x-eclipse-plugin.git 把 hadoop2.6.0-eclipse-plugin.jar 放到eclipse plugin 目录中。 2.下载 hadoop2.6_x64_.zip http://dl.iteye.com/topics/download/d2b</div>
                                </li>
                                <li><a href="/article/3222.htm"
                                       title="如何看待一些知名博客推广软文的行为？" target="_blank">如何看待一些知名博客推广软文的行为？</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%9A%E5%AE%A2/1.htm">博客</a>
                                    <div>本文来自我在知乎上的一个回答：http://www.zhihu.com/question/23431810/answer/24588621 
互联网上的两种典型心态： 
 
  当初求种像条狗，如今撸完嫌人丑  
  当初搜贴像条犬，如今读完嫌人软  
 
你为啥感觉不舒服呢？ 
难道非得要作者把自己的劳动成果免费给你用，你才舒服？ 
就如同 Google 关闭了 Gooled Reader，那是</div>
                                </li>
                                <li><a href="/article/3349.htm"
                                       title="sql优化总结" target="_blank">sql优化总结</a>
                                    <span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a>
                                    <div>为了是自己对sql优化有更好的原则性，在这里做一下总结，个人原则如有不对请多多指教。谢谢！ 
  
要知道一个简单的sql语句执行效率，就要有查看方式，一遍更好的进行优化。 
  
一、简单的统计语句执行时间 
declare @d datetime ---定义一个datetime的变量set @d=getdate() ---获取查询语句开始前的时间select user_id</div>
                                </li>
                                <li><a href="/article/3476.htm"
                                       title="Linux Oracle中常遇到的一些问题及命令总结" target="_blank">Linux Oracle中常遇到的一些问题及命令总结</a>
                                    <span class="text-muted">超声波</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>1.linux更改主机名 
  
(1)#hostname oracledb　　　　临时修改主机名 
(2) vi /etc/sysconfig/network 　　修改hostname 
(3) vi /etc/hosts　　　　　　　　修改IP对应的主机名 
  
2.linux重启oracle实例及监听的各种方法 
（注意操作的顺序应该是先监听，后数据库实例） 
&nbs</div>
                                </li>
                                <li><a href="/article/3603.htm"
                                       title="hive函数大全及使用示例" target="_blank">hive函数大全及使用示例</a>
                                    <span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a><a class="tag" taget="_blank" href="/search/hive%E5%87%BD%E6%95%B0/1.htm">hive函数</a>
                                    <div>  
具体说明及示例参 见附件文档。  
  
  
文档目录： 
  
目录 
一、关系运算： 4 
1. 等值比较: = 4 
2. 不等值比较: <> 4 
3. 小于比较: < 4 
4. 小于等于比较: <= 4 
5. 大于比较: > 5 
6. 大于等于比较: >= 5 
7. 空值判断: IS NULL 5</div>
                                </li>
                                <li><a href="/article/3730.htm"
                                       title="Spring 4.2新特性-使用@Order调整配置类加载顺序" target="_blank">Spring 4.2新特性-使用@Order调整配置类加载顺序</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/spring+4/1.htm">spring 4</a>
                                    <div>4.1 @Order 
 
 Spring 4.2 利用@Order控制配置类的加载顺序 
  
4.2 演示 
 
 两个演示bean 
 
package com.wisely.spring4_2.order;

public class Demo1Service {

}

 
package com.wisely.spring4_2.order;

public class</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>