图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果

代码仓库

• 码云仓库

前期准备

• 前端项目
• 后端接口（OpenAI接口即可）

启动一个新的 React 项目

• 如果小伙伴们有现有项目，可跳过此步骤直接进入下一步~
• Next.js 是一个全栈式的 React 框架。它用途广泛，可以让你创建任意规模的 React 应用——可以是静态博客，也可以是复杂的动态应用。要创建一个新的 Next.js 项目，请在你的终端运行：

npx create-next-app@latest

下载依赖

cd xiaojin-react-chatgpt

npm i

运行项目

npm run dev

引入 antd

• antd官网

安装并引入 antd

npm install antd --save

基础页面准备

• 我们先使用简单的代码来实现效果
• 修改src\app\page.js代码如下

"use client";
import { useState } from "react";
import { Input, Button } from "antd";

const { TextArea } = Input;
export default function Home() {
  let [outputValue, setOutputValue] = useState("");
  return (
    

      
Chat GPT 打字机效果
            <Button>发送请求</Button>
    </main>
  );
}

</code></pre> 
  <h5>页面效果如下</h5> 
  <p><a href="http://img.e-com-net.com/image/info8/bcb227b7e1214be7b73daeae219613ea.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/bcb227b7e1214be7b73daeae219613ea.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第4张图片" width="650" height="727" style="border:1px solid black;"></a></p> 
  <h3>接口准备</h3> 
  <ul> 
   <li>注册一个OpenAI账号（或者使用其他接口也可以）</li> 
  </ul> 
  <h5>接口文档示例</h5> 
  <ul> 
   <li>参考 OpenAI 中文文档</li> 
  </ul> 
  <p><a href="http://img.e-com-net.com/image/info8/5eb85a6ba3aa417395a58dbd9910d2e6.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/5eb85a6ba3aa417395a58dbd9910d2e6.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第5张图片" width="650" height="400" style="border:1px solid black;"></a></p> 
  <h5>Chat聊天-聊天完成对象-参数说明</h5> 
  <table> 
   <thead> 
    <tr> 
     <th>参数</th> 
     <th>类型</th> 
     <th>描述</th> 
    </tr> 
   </thead> 
   <tbody> 
    <tr> 
     <td>id</td> 
     <td>string</td> 
     <td>聊天完成的唯一标识符</td> 
    </tr> 
    <tr> 
     <td>choices</td> 
     <td>array</td> 
     <td>聊天完成选项列表。如果n大于1,可以有多个选项</td> 
    </tr> 
    <tr> 
     <td>created</td> 
     <td>integer</td> 
     <td>创建聊天完成的Unix时间戳(秒)</td> 
    </tr> 
    <tr> 
     <td>model</td> 
     <td>string</td> 
     <td>用于聊天完成的模型</td> 
    </tr> 
    <tr> 
     <td>system_fingerprint</td> 
     <td>string</td> 
     <td>该指纹表示模型运行的后端配置</td> 
    </tr> 
    <tr> 
     <td>object</td> 
     <td>string</td> 
     <td>对象类型,总是 chat.completion</td> 
    </tr> 
    <tr> 
     <td>usage</td> 
     <td>object</td> 
     <td>完成请求的使用统计信息</td> 
    </tr> 
    <tr> 
     <td>completion_tokens</td> 
     <td>integer</td> 
     <td>生成的完成中的标记数</td> 
    </tr> 
    <tr> 
     <td>prompt_tokens</td> 
     <td>integer</td> 
     <td>提示中的标记数</td> 
    </tr> 
    <tr> 
     <td>total_tokens</td> 
     <td>integer</td> 
     <td>请求中使用的标记总数(提示 + 完成)</td> 
    </tr> 
   </tbody> 
  </table> 
  <h5>准备接口参数</h5> 
  <pre><code> const data = {
      model: "XXX",
      messages: [
        {
          role: "user",
          content: "写一篇1000字关于春天的作文",
        },
      ],
      prompt: "写一篇1000字关于春天的作文",
      temperature: 0.75,
      stream: true,
    };
</code></pre> 
  <h3>方案1：使用fetch来处理stream流实现打字机效果</h3> 
  <h5>使用流的方式处理 Fetch</h5> 
  <ul> 
   <li> <p>mdn文档</p> </li> 
   <li> <p>Fetch API 允许你跨网络获取资源，它提供了现代化的 API 去替代 XHR。它有一系列的优点，真正好的是，浏览器最近增加了将 fetch 响应作为可读流使用的能力。</p> </li> 
   <li> <p>Request.body 和 Response.body 属性也是这样，它们将主体内容暴露作为一个可读流的 getter。</p> </li> 
  </ul> 
  <h5>调用代码示例</h5> 
  <pre><code>    const response = await fetch(url, {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
      },
    });

    const reader = response.body.getReader();
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        console.log("***********************done");
        console.log(value);
        break;
      }
      console.log("--------------------value");
      console.log(value);
    }
</code></pre> 
  <ul> 
   <li>在函数中，我们使用 response.body.getReader() 将 reader 锁定到该流，然后遵循我们之前看到的相同的模式——使用 reader 读取每个分块，在再次运行 read() 方法之前，检查 done 是否为 true，如果是 true，处理结束，如果是 false，读取下一个分块并且处理它。</li> 
   <li>通过循环获取传输的数据</li> 
  </ul> 
  <h5>编写页面逻辑代码</h5> 
  <ul> 
   <li>我们暂时使用固定参数来进行模拟</li> 
   <li>写一个简单的demo来演示</li> 
  </ul> 
  <pre><code>"use client";
import { useState } from "react";
import { Input, Button } from "antd";
const { TextArea } = Input;
export default function Home() {
  let [outputValue, setOutputValue] = useState("");
  const send = async () => {
    const url = "http://10.169.112.194:7100/v1/chat/completions";
    const data = {
      model: "chatglm2-6b",
      messages: [
        {
          role: "user",
          content: "写一篇1000字关于春天的作文",
        },
      ],
      prompt: "写一篇1000字关于春天的作文",
      temperature: 0.75,
      stream: true,
    };
    const response = await fetch(url, {
      method: "POST",
      body: JSON.stringify(data),
      headers: {
        "Content-Type": "application/json",
      },
    });

    const reader = response.body.getReader();
    while (true) {
      const { done, value } = await reader.read();
      if (done) {
        console.log("***********************done");
        console.log(value);
        break;
      }
      console.log("--------------------value");
      console.log(value);
    }
  };
  return (
    <main className="flex min-h-screen text-black flex-col items-center justify-between p-24">
      <h2>Chat GPT 打字机效果</h2>
      <TextArea rows={17} value={outputValue} />
      <Button onClick={send}>发送请求</Button>
    </main>
  );
}

</code></pre> 
  <h5>点击按钮查看打印结果</h5> 
  <p><a href="http://img.e-com-net.com/image/info8/9b63b397feec4b8d9b040074ee3dc603.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/9b63b397feec4b8d9b040074ee3dc603.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第6张图片" width="650" height="382" style="border:1px solid black;"></a></p> 
  <ul> 
   <li>我们可以看到打印出来的都是buffer字符串，我们需要对其进行解析才可以得知最终结果</li> 
  </ul> 
  <h5>解析buffer</h5> 
  <p><a href="http://img.e-com-net.com/image/info8/4cda27c305254a0aa0a7bf23bded20ed.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/4cda27c305254a0aa0a7bf23bded20ed.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第7张图片" width="650" height="441" style="border:1px solid black;"></a></p> 
  <pre><code>const encode = new TextDecoder("utf-8");
const reader = response.body.getReader();
 while (true) {
      const { done, value } = await reader.read();
      const text = encode.decode(value);
      if (done) {
        console.log("***********************done");
        console.log(text);
        break;
      }
      console.log("--------------------value");
      console.log(text);
    }
</code></pre> 
  <h5>查看解析</h5> 
  <p>我们可以看到解析结果格式如下<br> <a href="http://img.e-com-net.com/image/info8/1533fdc1e4014ed6ab7ae1c068d62f89.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/1533fdc1e4014ed6ab7ae1c068d62f89.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第8张图片" width="650" height="395" style="border:1px solid black;"></a></p> 
  <pre><code>data: {"id": "chatcmpl-3zmRJUd4TTpm9xP9NbQVHw", "model": "chatglm2-6b", "choices": [{"index": 0, "delta": {"content": "希望"}, "finish_reason": null}]}
</code></pre> 
  <h5>使用正则解析数据</h5> 
  <p>我们编写一个函数~~然后打印数据</p> 
  <pre><code> const getReaderText = (str) => {
    // 定义正则表达式匹配模式
    let result = str.match(/{"content": "(\S*)"}, "finish_reason":/);
    return result && result[1] ? result[1] : "";
  };

</code></pre> 
  <p><a href="http://img.e-com-net.com/image/info8/53322649968945f0a77ccd4c77c91523.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/53322649968945f0a77ccd4c77c91523.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第9张图片" width="650" height="390" style="border:1px solid black;"></a></p> 
  <p><a href="http://img.e-com-net.com/image/info8/f20f308d71d0449f9963186ea2b9b86e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/f20f308d71d0449f9963186ea2b9b86e.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第10张图片" width="650" height="307" style="border:1px solid black;"></a></p> 
  <h5>赋值数据到文本框</h5> 
  <p><a href="http://img.e-com-net.com/image/info8/30a8c846af2b45d592f923af5fd84712.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/30a8c846af2b45d592f923af5fd84712.jpg" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第11张图片" width="650" height="400" style="border:1px solid black;"></a><br> <a href="http://img.e-com-net.com/image/info8/3204e4cad7ed4fcbbd994e06d1803fe3.png" target="_blank"><img src="http://img.e-com-net.com/image/info8/3204e4cad7ed4fcbbd994e06d1803fe3.png" alt="图文并茂手把手教你基于React多种方案调用OpenAI接口实现ChatGPT打字机效果_第12张图片" width="650" height="721" style="border:1px solid black;"></a></p> 
  <h5>解决换行问题</h5> 
  <p>解决textarea显示\n但是并没有换行的问题,经过排查发现，是接口返回的数据是\n,所以渲染有异常，因此我们可以用下面的方式去解决.</p> 
  <pre><code>replaceAll(/\\n/g,'\r\n')
</code></pre> 
  <h5>初步实现简易打字机效果</h5> 
  <p></p> 
  <h5>代码块支持（待补充）</h5> 
  <h5>自动滚动（等我忙完补充）</h5> 
  <h3>方案2：axios请求方式（等我忙完补充）等待补充</h3> 
  <h5>今天就写到这里啦~</h5> 
  <ul> 
   <li>小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~</li> 
   <li>大家要天天开心哦</li> 
  </ul> 
  <blockquote> 
   <p>欢迎大家指出文章需要改正之处~<br> 学无止境，合作共赢</p> 
  </blockquote> 
  <p><img src="http://img.e-com-net.com/image/info8/169bc2ecce9c414e9c99088ef531ca01.jpg" alt="在这里插入图片描述" width="0" height="0"></p> 
  <h4>欢迎路过的小哥哥小姐姐们提出更好的意见哇~~</h4> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1723829464971948032"></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">你可能感兴趣的:(面向全栈,react.js,chatgpt,前端)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1896473548063567872.htm"
                           title="ThinkPHP运行目录设置为public子目录" target="_blank">ThinkPHP运行目录设置为public子目录</a>
                        <span class="text-muted">NightReader</span>
<a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a>
                        <div>ThinkPHP是一个快速、兼容和简单的面向对象的PHP框架，它遵循MVC（模型-视图-控制器）设计模式。在ThinkPHP框架中，public目录扮演着非常重要的角色，它被设计为框架的公共访问目录。Public目录设置的原因和解决方案是ThinkPHP框架结构和安全策略的核心部分。原因：1)安全性：将public设为唯一的公共访问目录可以增强应用的安全性。通过限制对框架其他部分的访问，可以防止潜</div>
                    </li>
                    <li><a href="/article/1896470646028824576.htm"
                           title="Java 简介" target="_blank">Java 简介</a>
                        <span class="text-muted">谏君之</span>
<a class="tag" taget="_blank" href="/search/java%E6%95%99%E7%A8%8B/1.htm">java教程</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>Java简介Java是一种基于类的面向对象的编程语言，旨在具有尽可能少的实现依赖关系。它旨在让应用程序开发人员**一次编写并随处运行（WORA），**这意味着编译后的Java代码可以在支持Java的所有平台上运行，而无需重新编译。Java广泛用于开发桌面、Web和移动设备的应用程序。Java以其简单性、健壮性和安全功能而闻名，使其成为企业级应用程序的热门选择。Java应用程序可以被编译为在任何Ja</div>
                    </li>
                    <li><a href="/article/1896452744726769664.htm"
                           title="将excel文件各列保存为txt的实战代码" target="_blank">将excel文件各列保存为txt的实战代码</a>
                        <span class="text-muted">爱编程的喵喵</span>
<a class="tag" taget="_blank" href="/search/Python%E5%9F%BA%E7%A1%80%E8%AF%BE%E7%A8%8B/1.htm">Python基础课程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/excel/1.htm">excel</a><a class="tag" taget="_blank" href="/search/txt/1.htm">txt</a><a class="tag" taget="_blank" href="/search/%E5%AE%9E%E6%88%98%E4%BB%A3%E7%A0%81/1.htm">实战代码</a>
                        <div>  大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的知识进行总结与归纳，不仅形成深入且独到的理解，而且能够帮助新手快速入门。  本文主要介绍了将excel文件各列保存为txt的实</div>
                    </li>
                    <li><a href="/article/1896449087306264576.htm"
                           title="FromData传参形式：" target="_blank">FromData传参形式：</a>
                        <span class="text-muted">It 小白努力中…</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</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>
                        <div>前端传参有很多形式下面介绍一下FromData传参！！首先模拟的是获取列表的形式向后端传递参数：1、第一要在发请求函数里new一个新的对象通过append方式向这个对象中添加参数：//获取列表getLists(){letformdata=newFormData();//new出来的对象formdata.append("pageNum",this.queryParams.page);//所传递参数f</div>
                    </li>
                    <li><a href="/article/1896438748598562816.htm"
                           title="工程化与框架系列（16）--前端路由实现" target="_blank">工程化与框架系列（16）--前端路由实现</a>
                        <span class="text-muted">一进制ᅟᅠ        ‌‍‎‏ </span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%B7%A5%E7%A8%8B%E5%8C%96%E4%B8%8E%E6%A1%86%E6%9E%B6/1.htm">前端工程化与框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>前端路由实现前端路由是单页应用（SPA）的核心功能，它使得在不刷新页面的情况下实现视图切换和状态管理。本文将深入探讨前端路由的实现原理和关键技术。前端路由概述小知识：前端路由是指在单页应用中，通过JS动态操作改变页面内容，而不触发浏览器刷新的技术，使得用户体验更加流畅。为什么需要前端路由在传统的多页面应用中，页面跳转需要向服务器发送请求并重新加载页面。而在单页应用中，前端路由带来以下优势：提升用户</div>
                    </li>
                    <li><a href="/article/1896430427875373056.htm"
                           title="前端基础 - HTML（一）html基本结构" target="_blank">前端基础 - HTML（一）html基本结构</a>
                        <span class="text-muted">林一。</span>
<a class="tag" taget="_blank" href="/search/html%E5%9F%BA%E7%A1%80/1.htm">html基础</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>html概述和基本结构html概述HTML是HyperTextMark-upLanguage的首字母简写，意思是超文本标记语言，超文本指的是超链接，标记指的是标签，是一种用来制作网页的语言，这种语言由一个个的标签组成，用这种语言制作的文件保存的是一个文本文件，文件的扩展名为html或者htm，一个html文件就是一个网页，html文件用编辑器打开显示的是文本，可以用文本的方式编辑它，如果用浏览器打</div>
                    </li>
                    <li><a href="/article/1896428029916278784.htm"
                           title="基于微服务架构的毕业设计:2025年计算机毕业设计选题汇总(建议收藏)✅" target="_blank">基于微服务架构的毕业设计:2025年计算机毕业设计选题汇总(建议收藏)✅</a>
                        <span class="text-muted">会写代码的羊</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E9%80%89%E9%A2%98/1.htm">毕设选题</a><a class="tag" taget="_blank" href="/search/%E6%9E%B6%E6%9E%84/1.htm">架构</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1/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/%E6%AF%95%E8%AE%BE%E7%B3%BB%E7%BB%9F/1.htm">毕设系统</a><a class="tag" taget="_blank" href="/search/%E6%AF%95%E8%AE%BE%E9%80%89%E9%A2%98/1.htm">毕设选题</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E6%9C%8D%E5%8A%A1%E6%9E%B6%E6%9E%84/1.htm">微服务架构</a><a class="tag" taget="_blank" href="/search/java%E5%BE%AE%E6%9C%8D%E5%8A%A1/1.htm">java微服务</a>
                        <div>文章目录前言最新毕设选题（建议收藏起来）基于微服务架构的毕业设计选题毕设作品推荐前言2025全新毕业设计项目博主介绍：✌全网粉丝10W+,CSDN全栈领域优质创作者，博客之星、掘金/华为云/阿里云等平台优质作者。精彩专栏推荐订阅计算机毕业设计精品项目案例-500套基于JavaSpringBoot的微信校园二手交易小程序平台开发系列（一）基于校园二手物品交易小程序系统设计与实现系列（二）基于云开发微</div>
                    </li>
                    <li><a href="/article/1896426136116719616.htm"
                           title="前端学习——HTML" target="_blank">前端学习——HTML</a>
                        <span class="text-muted">W起名有点难</span>
<a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a>
                        <div>VSCode常用快捷键代码格式化：Shift+Alt+F向上或向下移动一行：Alt+Up或Alt+Down快速复制一行代码：Shift+Alt+Up或者Shift+Alt+Down快速替换：Ctrl+HHTML标签文本标签定义着重文字定义粗体文字定义斜体文字加重语气删除字无特定含义列表标签1、有序列表//type可以改变列表项目标签//1：用数字标号；A：用大写字母标号；a：用小写字母标号；i：小</div>
                    </li>
                    <li><a href="/article/1896425883846111232.htm"
                           title="我的创作纪念日" target="_blank">我的创作纪念日</a>
                        <span class="text-muted">活宝小娜</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/javascript/1.htm">javascript</a>
                        <div>机缘在2020年初，正值前端开发技术日新月异的时期，我作为一名初入行不久的前端开发者，经常在工作中遇到各种挑战和难题。为了找到解决方案，我开始频繁地在CSDN上搜索相关的技术文章和讨论。渐渐地，我发现通过分享和讨论，不仅能帮助自己更快地解决问题，还能结识到许多志同道合的朋友。于是，在2020年03月01日，我鼓起勇气，发表了第一篇技术博客。收获知识深化：通过撰写博客，我不断巩固和深化了自己的前端知</div>
                    </li>
                    <li><a href="/article/1896421589814145024.htm"
                           title="前端基础——HTML" target="_blank">前端基础——HTML</a>
                        <span class="text-muted">happyhappy666568</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>目录一、前端概述二、HTML简介三、HTML基本结构一、前端概述在Web开发中，有前端与后端之分。前端负责页面的布局，后端负责页面的逻辑。前端负责设计网页的样子，也就是我们看到的一个个彩色的方框和文字，但是一个网站只有这些按钮还远远不够啊，肯定还有服务器记录我们输入的信息数据。所以，后端负责的就是我们看不到的那些逻辑程序，它负责处理我们在网页上输入的那些信息或者点击信号等。核心技术：HTML(负责</div>
                    </li>
                    <li><a href="/article/1896420832209596416.htm"
                           title="强者联盟——Python语言结合Spark框架" target="_blank">强者联盟——Python语言结合Spark框架</a>
                        <span class="text-muted">博文视点</span>
<a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%A0%88%E5%B7%A5%E7%A8%8B%E5%B8%88/1.htm">全栈工程师</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%A0%88/1.htm">全栈</a><a class="tag" taget="_blank" href="/search/%E5%85%A8%E6%A0%88%E6%95%B0%E6%8D%AE/1.htm">全栈数据</a><a class="tag" taget="_blank" href="/search/Spark/1.htm">Spark</a><a class="tag" taget="_blank" href="/search/Python/1.htm">Python</a><a class="tag" taget="_blank" href="/search/PySpark/1.htm">PySpark</a>
                        <div>引言：Spark由AMPLab实验室开发，其本质是基于内存的快速迭代框架，“迭代”是机器学习最大的特点，因此非常适合做机器学习。得益于在数据科学中强大的表现，Python语言的粉丝遍布天下，如今又遇上强大的分布式内存计算框架Spark，两个领域的强者走到一起，自然能碰出更加强大的火花（Spark可以翻译为火花），因此本文主要讲述了PySpark。本文选自《全栈数据之门》。全栈框架Spark由AMP</div>
                    </li>
                    <li><a href="/article/1896416043748880384.htm"
                           title="关于后端使用Boolean或boolean时前端收到的参数的区别" target="_blank">关于后端使用Boolean或boolean时前端收到的参数的区别</a>
                        <span class="text-muted">燃星cro</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</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>当后端使用的是Boolean时，调用的方法是setIsLoginUser，前端收到的参数的参数名是isLoginUser而当后端使用的是boolean时，调用的方法是setLoginUser，前端收到的参数的参数名是loginUser封装类和基本数据类型在使用时需要注意这些细微的差别，因为这些细微的差别可能会导致前端收到的参数名称与预想的并不一样从而导致功能无法正常实现</div>
                    </li>
                    <li><a href="/article/1896410745231437824.htm"
                           title="Java进阶——面向对象编程" target="_blank">Java进阶——面向对象编程</a>
                        <span class="text-muted">1加1等于</span>
<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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/java%E9%9D%A2%E5%90%91%E5%AF%B9%E8%B1%A1/1.htm">java面向对象</a>
                        <div>本篇文章，将深入探讨Java面向对象编程的关键知识点，并用一些例子展示这些概念的实际工作开发中的应用。本文目录一、三大特性1.封装2.继承3.多态二、类与对象1.对象创建2.构造方法3.静态成员三、访问控制修饰符四、方法相关1.方法签名2.final关键字3.可变参数五、对象生命周期六、高级特性1.接口和抽象类2.内部类3.枚举类七、对象关系1.组合2.聚合总结一、三大特性1.封装封装是指隐藏对象</div>
                    </li>
                    <li><a href="/article/1896409858706567168.htm"
                           title="必看系列：JAVA面试该怎么准备以及如何在面试过程中展示自己的技术能力" target="_blank">必看系列：JAVA面试该怎么准备以及如何在面试过程中展示自己的技术能力</a>
                        <span class="text-muted">web13688565871</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/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>准备JAVA面试是一个系统而全面的过程，旨在确保你熟悉JAVA的各个方面，并能够清晰地展示自己的技术能力。以下是一些关键的准备步骤和面试技巧：一、面试准备深入理解JAVA基础：熟悉JAVA的核心概念，如JVM、数据类型、运算符、流程控制、面向对象编程（类、对象、继承、封装、多态）等。理解JAVA的内存模型，包括堆、栈和方法区，以及垃圾收集器的工作原理。掌握JAVA核心技术：对JAVA集合框架（如L</div>
                    </li>
                    <li><a href="/article/1896402546445053952.htm"
                           title="DeepSeek集成开发全栈指南：解锁AI原生开发的终极工具箱" target="_blank">DeepSeek集成开发全栈指南：解锁AI原生开发的终极工具箱</a>
                        <span class="text-muted">量子纠缠BUG</span>
<a class="tag" taget="_blank" href="/search/DeepSeek%E9%83%A8%E7%BD%B2/1.htm">DeepSeek部署</a><a class="tag" taget="_blank" href="/search/DeepSeek/1.htm">DeepSeek</a><a class="tag" taget="_blank" href="/search/AI/1.htm">AI</a><a class="tag" taget="_blank" href="/search/AI-native/1.htm">AI-native</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%9C%BA%E5%99%A8%E5%AD%A6%E4%B9%A0/1.htm">机器学习</a>
                        <div>引言：AI原生开发的新范式在AI技术渗透软件开发生命周期的今天，DeepSeek通过开放生态构建了覆盖全场景的开发工具矩阵。据统计，GitHub上awesome-deepseek-integration项目已获19k星标，其集成的200+工具链正在重塑AI应用开发范式。本文将深度解析DeepSeek生态中的核心开发工具，揭秘企业级AI应用的构建密码一、智能开发套件：从编码到部署的全链路支撑1.ID</div>
                    </li>
                    <li><a href="/article/1896401284777439232.htm"
                           title="Linux服务器防火墙白名单访问策略的配置示例" target="_blank">Linux服务器防火墙白名单访问策略的配置示例</a>
                        <span class="text-muted">一望无际的大草原</span>
<a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/%E9%98%B2%E7%81%AB%E5%A2%99/1.htm">防火墙</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E9%98%B2%E7%81%AB%E5%A2%99/1.htm">防火墙</a>
                        <div>最近在做Linux系统应用部署配置过程中，为了确保应用的安全，简单学习了解了一些Linux中的动态防火墙管理工具的使用方法。本文测试实验主要采用Linux服务器的动态防火墙管理工具(即firewalld)，来实现服务或端口的访问控制，firewalld主要用于管理Linux系统中的防火墙规则，firewalld不是一个独立的防火墙软件，他基于Linux内核的netfilter框架的前端工具，fir</div>
                    </li>
                    <li><a href="/article/1896401158373699584.htm"
                           title="探索Node.js全栈开发新境界：Express后端API实践项目" target="_blank">探索Node.js全栈开发新境界：Express后端API实践项目</a>
                        <span class="text-muted">黎玫洵Errol</span>

                        <div>探索Node.js全栈开发新境界：Express后端API实践项目todo-nodejs-apiNodeJS全栈开发之后端接口技术栈基于Node.js+Express+Mysql实现RESTFULAPI项目地址:https://gitcode.com/gh_mirrors/to/todo-nodejs-api在现代Web开发中，Node.js以其异步非阻塞I/O模型和高效的性能备受青睐。而当它邂逅</div>
                    </li>
                    <li><a href="/article/1896395865241743360.htm"
                           title="2024年linux——环境基础开发工具使用_gcc test file(4)，2024年最新程序设计+Linux运维+Web+数据库+框架+分布式" target="_blank">2024年linux——环境基础开发工具使用_gcc test file(4)，2024年最新程序设计+Linux运维+Web+数据库+框架+分布式</a>
                        <span class="text-muted">2401_83740189</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/%E8%BF%90%E7%BB%B4/1.htm">运维</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>最全的Linux教程，Linux从入门到精通======================linux从入门到精通(第2版)Linux系统移植Linux驱动开发入门与实战LINUX系统移植第2版Linux开源网络全栈详解从DPDK到OpenFlow第一份《Linux从入门到精通》466页====================内容简介====本书是获得了很多读者好评的Linux经典畅销书**《Linu</div>
                    </li>
                    <li><a href="/article/1896368631428739072.htm"
                           title="【One Api】部署" target="_blank">【One Api】部署</a>
                        <span class="text-muted">giao客</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/API/1.htm">API</a>
                        <div>文章目录介绍安装流程MySQL安装OneAPI安装访问前端使用超级管理员参考链接介绍Oneapi作为一个对用户请求和模型接口的中转站，能够根据用户的id和渠道id，调控用户与大模型api接口的请求。能够对用户的请求token量进行充值、监控、统计等功能。是作为大模型管理的一个开源高效工具。OneAPI是一个OpenAI接口管理&分发系统，可以通过标准的OpenAIAPI格式访问所有的大模型，开箱即</div>
                    </li>
                    <li><a href="/article/1896366489468989440.htm"
                           title="python读取redis大数据_大数据系列——Redis学习笔记" target="_blank">python读取redis大数据_大数据系列——Redis学习笔记</a>
                        <span class="text-muted">weixin_39661345</span>

                        <div>1.Redis的简介Redis是一个开源(BSD许可)，内存存储的数据结构服务器,可用作数据库，高速缓存和消息队列代理它支持字符串、哈希表、列表、集合、有序集合，位图，hyperloglogs等数据类型内置复制、Lua脚本、LRU收回、事务以及不同级别磁盘持久化功能，同时通过RedisSentinel提供高可用，通过RedisCluster提供自动分区。简言之，Redis是一种面向“键/值”对数据</div>
                    </li>
                    <li><a href="/article/1896357784279117824.htm"
                           title="如何在管理端项目中优雅地封装表格搜索条件" target="_blank">如何在管理端项目中优雅地封装表格搜索条件</a>
                        <span class="text-muted">前端老曹</span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/css3/1.htm">css3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/typescript/1.htm">typescript</a><a class="tag" taget="_blank" href="/search/sass/1.htm">sass</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>#前端做管理端项目时会有一个非常明显的问题就是表格页面过多如果每个表格页面都是自己写一套表格搜索条件会造成很多的代码冗余于是我就尝试封装一个适用于大部分表格的搜索条件组件用于提高代码复用性、可维护性和用户体验#文章目录引言需求分析设计思路实现细节使用示例总结引言在前端开发中，表格搜索是常见的功能需求。特别是在管理端项目中，表格搜索能够帮助用户快速定位到所需的数据。ElementPlus作为基于Vu</div>
                    </li>
                    <li><a href="/article/1896357656772276224.htm"
                           title="Vue 3 项目中的路由管理详解" target="_blank">Vue 3 项目中的路由管理详解</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><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>#随着前端单页应用（SPA）的兴起，路由管理成为了前端项目中不可或缺的一部分。VueRouter作为Vue.js官方的路由管理器，与Vue.js深度集成，为构建单页应用提供了强大的路由功能。在Vue3中，VueRouter也相应地进行了更新和优化，以更好地支持Vue3的新特性。本文将详细介绍Vue3项目中的路由管理。#一、VueRouter4概述VueRouter4是与Vue3配套使用的路由管理器</div>
                    </li>
                    <li><a href="/article/1896347567470473216.htm"
                           title="使用WebStorm开发Vue3项目" target="_blank">使用WebStorm开发Vue3项目</a>
                        <span class="text-muted">web18285997089</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/webstorm/1.htm">webstorm</a><a class="tag" taget="_blank" href="/search/rust/1.htm">rust</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a>
                        <div>记录一下使用WebStorm开发Vu3项目时的配置现在WebStorm可以个人免费使用啦！??基本配置打包工具：Vite前端框架：ElementPlus开发语言：Vue3、TypeScript、Sass代码检查：ESLint、PrettierIDE：WebStorm2024.2首先说一下版本兼容问题，ElementPlus>=2.8.5需要Sass>=1.79.0，但是升级了Sass后，会导致El</div>
                    </li>
                    <li><a href="/article/1896344410333966336.htm"
                           title="前端 github 项目拉取 启动出错一些列问题记录" target="_blank">前端 github 项目拉取 启动出错一些列问题记录</a>
                        <span class="text-muted">风无雨</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/github/1.htm">github</a>
                        <div>1.MissingSecret:Pleasedefinea`secret`.Readmoreathttps://errors.authjs.dev#missingsecretatassertConfig(D:\project\ai-chatbot\.next\server\edge\chunks\c1962_@auth_core_9221fb._.js:480:16)atAuth(D:\proje</div>
                    </li>
                    <li><a href="/article/1896333068533297152.htm"
                           title="2024年前端提效项目盘点之：低代码拖拽生成页面（架构设计篇）" target="_blank">2024年前端提效项目盘点之：低代码拖拽生成页面（架构设计篇）</a>
                        <span class="text-muted">前端77</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E4%BD%8E%E4%BB%A3%E7%A0%81/1.htm">低代码</a>
                        <div>前言因为之前公司内部业务及提效的需要，做了一系列低代码的项目：分别有vscode插件、figma设计稿转代码插件、脚手架，拖拽生成h5营销页面和问卷等。现在把这一些系列实践的经验自我总结一下，形成一个低代码专栏。每个项目都分为思路架构设计和实践各两篇文章。当前是整个专栏的其中一个项目：拖拽生成h5页面（架构设计篇）1.起因为了满足公司运营及提效需要，搭建了一套供运营人员的使用的低代码平台。2.低代</div>
                    </li>
                    <li><a href="/article/1896332312006684672.htm"
                           title="深入解析 Svelte：下一代前端框架的革命" target="_blank">深入解析 Svelte：下一代前端框架的革命</a>
                        <span class="text-muted">赵大仁</span>
<a class="tag" taget="_blank" href="/search/%E6%8A%80%E6%9C%AF/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/%E5%A4%A7%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/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/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>深入解析Svelte：下一代前端框架的革命1.Svelte简介Svelte是一款前端框架，与React、Vue等传统框架不同，它采用编译时（Compile-time）方式来优化前端应用。它不像React或Vue依赖虚拟DOM，而是在编译阶段直接生成高效的原生JavaScript代码，使其拥有更小的包体积、更快的渲染速度和更低的运行时开销。1.1Svelte的核心特点特性说明无虚拟DOM直接生成高效</div>
                    </li>
                    <li><a href="/article/1896325881228488704.htm"
                           title="Svelte 开发 AI 应用：高效轻量级前端框架的 AI 集成探索" target="_blank">Svelte 开发 AI 应用：高效轻量级前端框架的 AI 集成探索</a>
                        <span class="text-muted">赵大仁</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E8%AF%AD%E8%A8%80%E6%A8%A1%E5%9E%8B/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/AI/1.htm">AI</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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>Svelte开发AI应用：高效轻量级前端框架的AI集成探索1.引言人工智能（AI）与Web应用的结合已经成为前端开发的重要趋势。传统上，Vue、React等框架常用于AI前端交互，而Svelte作为一款编译时优化的前端框架，以轻量级、高性能、无运行时的特点，成为AI应用开发的新选择。本文将探讨如何利用Svelte构建高效的AI应用，包括AIAPI集成、前端推理优化、可视化分析、Web组件开发等关键</div>
                    </li>
                    <li><a href="/article/1896322853679198208.htm"
                           title="【常用代码】文件夹递归转换代码文件字符集为utf8 bom" target="_blank">【常用代码】文件夹递归转换代码文件字符集为utf8 bom</a>
                        <span class="text-muted">御风@户外</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a>
                        <div>来自chatgpt，前几个版本bug主要是0d0a混用等问题未考虑到。utf8bom与utf8谁更好，未明确调查。#C:\Users\xxx\AppData\Local\Programs\Python\Python313\python.execode_utf8.pycode_folderimportosimportsysimportchardet#pipinstallchardet#支持的代码文件</div>
                    </li>
                    <li><a href="/article/1896320585131159552.htm"
                           title="TCP连接的三次握手与四次挥手详解" target="_blank">TCP连接的三次握手与四次挥手详解</a>
                        <span class="text-muted">影子落人间</span>
<a class="tag" taget="_blank" href="/search/%E7%90%86%E8%AE%BA/1.htm">理论</a><a class="tag" taget="_blank" href="/search/tcp%2Fip/1.htm">tcp/ip</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">服务器</a>
                        <div>TCP（传输控制协议）是实现可靠数据传输的重要协议之一。TCP协议的设计之初就考虑到了数据在传输过程中的可靠性和完整性，而三次握手和四次挥手就是实现这一目的的基础机制。TCP的基本概念TCP是一种面向连接的协议，这意味着在数据传输之前，通信的双方必须首先建立一条连接。TCP协议还保证了数据的顺序传输和完整性控制，这些特性使得TCP被广泛应用于需要高可靠性的场合，如网页浏览、文件传输和电子邮件等。三</div>
                    </li>
                    <li><a href="/article/1896320332436926464.htm"
                           title="Vue Router 4与路由管理实战" target="_blank">Vue Router 4与路由管理实战</a>
                        <span class="text-muted">qcidyu</span>
<a class="tag" taget="_blank" href="/search/%E6%96%87%E7%AB%A0%E5%BD%92%E6%A1%A3/1.htm">文章归档</a><a class="tag" taget="_blank" href="/search/%E5%8A%A8%E6%80%81%E8%B7%AF%E7%94%B1/1.htm">动态路由</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E5%88%86%E5%89%B2/1.htm">代码分割</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1%E6%87%92%E5%8A%A0%E8%BD%BD/1.htm">路由懒加载</a><a class="tag" taget="_blank" href="/search/%E5%AF%BC%E8%88%AA%E5%AE%88%E5%8D%AB/1.htm">导航守卫</a><a class="tag" taget="_blank" href="/search/%E8%B7%AF%E7%94%B1%E7%AE%A1%E7%90%86/1.htm">路由管理</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E9%A1%B5%E9%9D%A2%E5%BA%94%E7%94%A8/1.htm">单页面应用</a><a class="tag" taget="_blank" href="/search/Vue/1.htm">Vue</a><a class="tag" taget="_blank" href="/search/Router/1.htm">Router</a>
                        <div>title:VueRouter4与路由管理实战date:2024/6/7updated:2024/6/7excerpt:这篇文章介绍了如何在Vue.js应用中利用VueRouter实现单页面应用的路由管理，包括配置路由、导航守卫的使用、路由懒加载以优化性能以及动态路由的实现方法，旨在提升用户体验和应用加载效率categories:前端开发tags:VueRouter单页面应用路由管理导航守卫路由懒</div>
                    </li>
                                <li><a href="/article/3.htm"
                                       title="枚举的构造函数中抛出异常会怎样" target="_blank">枚举的构造函数中抛出异常会怎样</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/enum/1.htm">enum</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a>
                                    <div>首先从使用enum实现单例说起。 
 
为什么要用enum来实现单例？ 
这篇文章（ 
http://javarevisited.blogspot.sg/2012/07/why-enum-singleton-are-better-in-java.html）阐述了三个理由： 
1.enum单例简单、容易，只需几行代码： 
 

public enum Singleton {
	INSTANCE;</div>
                                </li>
                                <li><a href="/article/130.htm"
                                       title="CMake 教程" target="_blank">CMake 教程</a>
                                    <span class="text-muted">aigo</span>
<a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a>
                                    <div>转自：http://xiang.lf.blog.163.com/blog/static/127733322201481114456136/ 
  
CMake是一个跨平台的程序构建工具，比如起自己编写Makefile方便很多。 
介绍：http://baike.baidu.com/view/1126160.htm 
本文件不介绍CMake的基本语法，下面是篇不错的入门教程： 
http:</div>
                                </li>
                                <li><a href="/article/257.htm"
                                       title="cvc-complex-type.2.3: Element 'beans' cannot have character" target="_blank">cvc-complex-type.2.3: Element 'beans' cannot have character</a>
                                    <span class="text-muted">Cb123456</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/Webgis/1.htm">Webgis</a>
                                    <div>  cvc-complex-type.2.3: Element 'beans' cannot have character 
    Line 33 in XML document from ServletContext resource [/WEB-INF/backend-servlet.xml] is i</div>
                                </li>
                                <li><a href="/article/384.htm"
                                       title="jquery实例:随页面滚动条滚动而自动加载内容" target="_blank">jquery实例:随页面滚动条滚动而自动加载内容</a>
                                    <span class="text-muted">120153216</span>
<a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a>
                                    <div><script language="javascript">
$(function (){
	var i = 4;$(window).bind("scroll", function (event){
		//滚动条到网页头部的 高度，兼容ie,ff,chrome
		var top = document.documentElement.s</div>
                                </li>
                                <li><a href="/article/511.htm"
                                       title="将数据库中的数据转换成dbs文件" target="_blank">将数据库中的数据转换成dbs文件</a>
                                    <span class="text-muted">何必如此</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/dbs/1.htm">dbs</a>
                                    <div>旗正规则引擎通过数据库配置器（DataBuilder）来管理数据库，无论是Oracle，还是其他主流的数据都支持，操作方式是一样的。旗正规则引擎的数据库配置器是用于编辑数据库结构信息以及管理数据库表数据，并且可以执行SQL 语句，主要功能如下。 
1)数据库生成表结构信息： 
        主要生成数据库配置文件(.conf文</div>
                                </li>
                                <li><a href="/article/638.htm"
                                       title="在IBATIS中配置SQL语句的IN方式" target="_blank">在IBATIS中配置SQL语句的IN方式</a>
                                    <span class="text-muted">357029540</span>
<a class="tag" taget="_blank" href="/search/ibatis/1.htm">ibatis</a>
                                    <div>在使用IBATIS进行SQL语句配置查询时，我们一定会遇到通过IN查询的地方，在使用IN查询时我们可以有两种方式进行配置参数：String和List。具体使用方式如下： 
 
1.String:定义一个String的参数userIds，把这个参数传入IBATIS的sql配置文件，sql语句就可以这样写： 
 
 
 
<select id="getForms" param</div>
                                </li>
                                <li><a href="/article/765.htm"
                                       title="Spring3 MVC 笔记（一）" target="_blank">Spring3 MVC 笔记（一）</a>
                                    <span class="text-muted">7454103</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/mvc/1.htm">mvc</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/REST/1.htm">REST</a><a class="tag" taget="_blank" href="/search/JSF/1.htm">JSF</a>
                                    <div>    
     自从 MVC 这个概念提出来之后 struts1.X  struts2.X   jsf 。。。。。 
这个view 层的技术一个接一个！ 都用过！不敢说哪个绝对的强悍！ 
要看业务，和整体的设计！ 
 
     最近公司要求开发个新系统！</div>
                                </li>
                                <li><a href="/article/892.htm"
                                       title="Timer与Spring Quartz 定时执行程序" target="_blank">Timer与Spring Quartz 定时执行程序</a>
                                    <span class="text-muted">darkranger</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/bean/1.htm">bean</a><a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/quartz/1.htm">quartz</a>
                                    <div>有时候需要定时触发某一项任务。其实在jdk1.3，java sdk就通过java.util.Timer提供相应的功能。一个简单的例子说明如何使用，很简单： 1、第一步，我们需要建立一项任务，我们的任务需要继承java.util.TimerTask package com.test; import java.text.SimpleDateFormat; import java.util.Date; </div>
                                </li>
                                <li><a href="/article/1019.htm"
                                       title="大端小端转换，le32_to_cpu 和cpu_to_le32" target="_blank">大端小端转换，le32_to_cpu 和cpu_to_le32</a>
                                    <span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/C%E8%AF%AD%E8%A8%80%E7%9B%B8%E5%85%B3/1.htm">C语言相关</a>
                                    <div>大端小端转换，le32_to_cpu 和cpu_to_le32   字节序  
http://oss.org.cn/kernel-book/ldd3/ch11s04.html 
        小心不要假设字节序. PC 存储多字节值是低字节为先(小端为先, 因此是小端), 一些高级的平台以另一种方式(大端)</div>
                                </li>
                                <li><a href="/article/1146.htm"
                                       title="Nginx负载均衡配置实例详解" target="_blank">Nginx负载均衡配置实例详解</a>
                                    <span class="text-muted">avords</span>

                                    <div>[导读] 负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。负载均衡先来简单了解一下什么是负载均衡，单从字面上的意思来理解就可以解  负载均衡是我们大流量网站要做的一个东西，下面我来给大家介绍在Nginx服务器上进行负载均衡配置方法，希望对有需要的同学有所帮助哦。 
负载均衡 
先来简单了解一下什么是负载均衡</div>
                                </li>
                                <li><a href="/article/1273.htm"
                                       title="乱说的" target="_blank">乱说的</a>
                                    <span class="text-muted">houxinyou</span>
<a class="tag" taget="_blank" href="/search/%E6%A1%86%E6%9E%B6/1.htm">框架</a><a class="tag" taget="_blank" href="/search/%E6%95%8F%E6%8D%B7%E5%BC%80%E5%8F%91/1.htm">敏捷开发</a><a class="tag" taget="_blank" href="/search/%E8%BD%AF%E4%BB%B6%E6%B5%8B%E8%AF%95/1.htm">软件测试</a>
                                    <div>从很久以前，大家就研究框架，开发方法，软件工程，好多！反正我是搞不明白！   
这两天看好多人研究敏捷模型，瀑布模型！也没太搞明白.    
不过感觉和程序开发语言差不多，   
瀑布就是顺序，敏捷就是循环.    
瀑布就是需求、分析、设计、编码、测试一步一步走下来。而敏捷就是按摸块或者说迭代做个循环，第个循环中也一样是需求、分析、设计、编码、测试一步一步走下来。   
  
也可以把软件开发理</div>
                                </li>
                                <li><a href="/article/1400.htm"
                                       title="欣赏的价值——一个小故事" target="_blank">欣赏的价值——一个小故事</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/%E6%9C%89%E6%95%88%E8%BE%85%E5%AF%BC/1.htm">有效辅导</a><a class="tag" taget="_blank" href="/search/%E6%AC%A3%E8%B5%8F/1.htm">欣赏</a><a class="tag" taget="_blank" href="/search/%E6%AC%A3%E8%B5%8F%E7%9A%84%E4%BB%B7%E5%80%BC/1.htm">欣赏的价值</a>
                                    <div>　　第一次参加家长会，幼儿园的老师说："您的儿子有多动症，在板凳上连三分钟都坐不了，你最好带他去医院看一看。"　　回家的路上，儿子问她老师都说了些什么，她鼻子一酸，差点流下泪来。因为全班30位小朋友，惟有他表现最差；惟有对他，老师表现出不屑，然而她还在告诉她的儿子："老师表扬你了，说宝宝原来在板凳上坐不了一分钟，现在能坐三分钟。其他妈妈都非常羡慕妈妈，因为全班只有宝宝</div>
                                </li>
                                <li><a href="/article/1527.htm"
                                       title="包冲突问题的解决方法" target="_blank">包冲突问题的解决方法</a>
                                    <span class="text-muted">bingyingao</span>
<a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/maven/1.htm">maven</a><a class="tag" taget="_blank" href="/search/exclusions/1.htm">exclusions</a><a class="tag" taget="_blank" href="/search/%E5%8C%85%E5%86%B2%E7%AA%81/1.htm">包冲突</a>
                                    <div>包冲突是开发过程中很常见的问题： 
其表现有： 
1.明明在eclipse中能够索引到某个类，运行时却报出找不到类。 
2.明明在eclipse中能够索引到某个类的方法，运行时却报出找不到方法。 
3.类及方法都有，以正确编译成了.class文件，在本机跑的好好的，发到测试或者正式环境就 
抛如下异常： 
 
java.lang.NoClassDefFoundError: Could not in</div>
                                </li>
                                <li><a href="/article/1654.htm"
                                       title="【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j" target="_blank">【Spark七十五】Spark Streaming整合Flume-NG三之接入log4j</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/Stream/1.htm">Stream</a>
                                    <div>先来一段废话： 
实际工作中，业务系统的日志基本上是使用Log4j写入到日志文件中的，问题的关键之处在于业务日志的格式混乱，这给对日志文件中的日志进行统计分析带来了极大的困难，或者说，基本上无法进行分析，每个人写日志的习惯不同，导致日志行的格式五花八门，最后只能通过grep来查找特定的关键词缩小范围，但是在集群环境下，每个机器去grep一遍，分析一遍，这个效率如何可想之二，大好光阴都浪费在这上面了</div>
                                </li>
                                <li><a href="/article/1781.htm"
                                       title="sudoku solver in Haskell" target="_blank">sudoku solver in Haskell</a>
                                    <span class="text-muted">bookjovi</span>
<a class="tag" taget="_blank" href="/search/sudoku/1.htm">sudoku</a><a class="tag" taget="_blank" href="/search/haskell/1.htm">haskell</a>
                                    <div>这几天没太多的事做，想着用函数式语言来写点实用的程序，像fib和prime之类的就不想提了（就一行代码的事），写什么程序呢？在网上闲逛时发现sudoku游戏，sudoku十几年前就知道了，学生生涯时也想过用C/Java来实现个智能求解，但到最后往往没写成，主要是用C/Java写的话会很麻烦。 
  
现在写程序，本人总是有一种思维惯性，总是想把程序写的更紧凑，更精致，代码行数最少，所以现</div>
                                </li>
                                <li><a href="/article/1908.htm"
                                       title="java apache ftpClient" target="_blank">java apache ftpClient</a>
                                    <span class="text-muted">bro_feng</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>最近使用apache的ftpclient插件实现ftp下载，遇见几个问题，做如下总结。 
1. 上传阻塞，一连串的上传，其中一个就阻塞了，或是用storeFile上传时返回false。查了点资料，说是FTP有主动模式和被动模式。将传出模式修改为被动模式ftp.enterLocalPassiveMode();然后就好了。 
 
看了网上相关介绍，对主动模式和被动模式区别还是比较的模糊，不太了解被动模</div>
                                </li>
                                <li><a href="/article/2035.htm"
                                       title="读《研磨设计模式》-代码笔记-工厂方法模式" target="_blank">读《研磨设计模式》-代码笔记-工厂方法模式</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;

/*
 * 工厂方法模式：使一个类的实例化延迟到子类
 * 某次，我在工作不知不觉中就用到了工厂方法模式（称为模板方法模式更恰当。2012-10-29）：
 * 有很多不同的产品，它</div>
                                </li>
                                <li><a href="/article/2162.htm"
                                       title="面试记录语" target="_blank">面试记录语</a>
                                    <span class="text-muted">chenyu19891124</span>
<a class="tag" taget="_blank" href="/search/%E6%8B%9B%E8%81%98/1.htm">招聘</a>
                                    <div>或许真的在一个平台上成长成什么样，都必须靠自己去努力。有了好的平台让自己展示，就该好好努力。今天是自己单独一次去面试别人，感觉有点小紧张，说话有点打结。在面试完后写面试情况表，下笔真的好难，尤其是要对面试人的情况说明真的好难。 
今天面试的是自己同事的同事，现在的这个同事要离职了，介绍了我现在这位同事以前的同事来面试。今天这位求职者面试的是配置管理，期初看了简历觉得应该很适合做配置管理，但是今天面</div>
                                </li>
                                <li><a href="/article/2289.htm"
                                       title="Fire Workflow 1.0正式版终于发布了" target="_blank">Fire Workflow 1.0正式版终于发布了</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a><a class="tag" taget="_blank" href="/search/workflow/1.htm">workflow</a><a class="tag" taget="_blank" href="/search/Google/1.htm">Google</a>
                                    <div>Fire Workflow 是国内另外一款开源工作流，作者是著名的非也同志，哈哈.... 
 官方网站是 http://www.fireflow.org 
 
 经过大家努力,Fire Workflow 1.0正式版终于发布了 
 
 正式版主要变化: 
1、增加IWorkItem.jumpToEx(...)方法，取消了当前环节和目标环节必须在同一条执行线的限制，使得自由流更加自由 
2、增加IT</div>
                                </li>
                                <li><a href="/article/2416.htm"
                                       title="Python向脚本传参" target="_blank">Python向脚本传参</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E8%84%9A%E6%9C%AC/1.htm">脚本</a><a class="tag" taget="_blank" href="/search/%E4%BC%A0%E5%8F%82/1.htm">传参</a>
                                    <div>如果想对python脚本传参数，python中对应的argc, argv(c语言的命令行参数)是什么呢？ 
需要模块：sys 
参数个数：len(sys.argv) 
脚本名：    sys.argv[0] 
参数1：     sys.argv[1] 
参数2：     sys.argv[</div>
                                </li>
                                <li><a href="/article/2543.htm"
                                       title="管理用户分组的命令gpasswd" target="_blank">管理用户分组的命令gpasswd</a>
                                    <span class="text-muted">dongwei_6688</span>
<a class="tag" taget="_blank" href="/search/passwd/1.htm">passwd</a>
                                    <div>NAME：  gpasswd - administer the /etc/group file 
SYNOPSIS： 
 gpasswd group 
 gpasswd -a user group 
 gpasswd -d user group 
 gpasswd -R group 
 gpasswd -r group 
 gpasswd [-A user,...] [-M user,...] g</div>
                                </li>
                                <li><a href="/article/2670.htm"
                                       title="郝斌老师数据结构课程笔记" target="_blank">郝斌老师数据结构课程笔记</a>
                                    <span class="text-muted">dcj3sjt126com</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>
                                    <div><<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<<</div>
                                </li>
                                <li><a href="/article/2797.htm"
                                       title="yii2 cgridview加上选择框进行操作" target="_blank">yii2 cgridview加上选择框进行操作</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/GridView/1.htm">GridView</a>
                                    <div>页面代码
<?=Html::beginForm(['controller/bulk'],'post');?>
<?=Html::dropDownList('action','',[''=>'Mark selected as: ','c'=>'Confirmed','nc'=>'No Confirmed'],['class'=>'dropdown',])</div>
                                </li>
                                <li><a href="/article/2924.htm"
                                       title="linux mysql" target="_blank">linux mysql</a>
                                    <span class="text-muted">fypop</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a>
                                    <div>enquiry mysql version in centos linux 
yum list installed | grep mysql 
yum -y remove mysql-libs.x86_64 
enquiry mysql version in yum repositoryyum list | grep mysql oryum -y list mysql* 
install mysq</div>
                                </li>
                                <li><a href="/article/3051.htm"
                                       title="Scramble String" target="_blank">Scramble String</a>
                                    <span class="text-muted">hcx2013</span>
<a class="tag" taget="_blank" href="/search/String/1.htm">String</a>
                                    <div>Given a string s1, we may represent it as a binary tree by partitioning it to two non-empty substrings recursively. 
Below is one possible representation of s1 = "great":</div>
                                </li>
                                <li><a href="/article/3178.htm"
                                       title="跟我学Shiro目录贴" target="_blank">跟我学Shiro目录贴</a>
                                    <span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/%E8%B7%9F%E6%88%91%E5%AD%A6shiro/1.htm">跟我学shiro</a>
                                    <div>历经三个月左右时间，《跟我学Shiro》系列教程已经完结，暂时没有需要补充的内容，因此生成PDF版供大家下载。最近项目比较紧，没有时间解答一些疑问，暂时无法回复一些问题，很抱歉，不过可以加群（334194438/348194195）一起讨论问题。 
  
  
----广告-----------------------------------------------------</div>
                                </li>
                                <li><a href="/article/3305.htm"
                                       title="nginx日志切割并使用flume-ng收集日志" target="_blank">nginx日志切割并使用flume-ng收集日志</a>
                                    <span class="text-muted">liyonghui160com</span>

                                    <div>  
   nginx的日志文件没有rotate功能。如果你不处理，日志文件将变得越来越大，还好我们可以写一个nginx日志切割脚本来自动切割日志文件。第一步就是重命名日志文件，不用担心重命名后nginx找不到日志文件而丢失日志。在你未重新打开原名字的日志文件前，nginx还是会向你重命名的文件写日志，linux是靠文件描述符而不是文件名定位文件。第二步向nginx主</div>
                                </li>
                                <li><a href="/article/3432.htm"
                                       title="Oracle死锁解决方法" target="_blank">Oracle死锁解决方法</a>
                                    <span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>　select p.spid,c.object_name,b.session_id,b.oracle_username,b.os_user_name from v$process p,v$session a, v$locked_object b,all_objects c where p.addr=a.paddr and a.process=b.process and c.object_id=b.</div>
                                </li>
                                <li><a href="/article/3559.htm"
                                       title="java之List排序" target="_blank">java之List排序</a>
                                    <span class="text-muted">shiguanghui</span>
<a class="tag" taget="_blank" href="/search/list%E6%8E%92%E5%BA%8F/1.htm">list排序</a>
                                    <div>   在Java Collection Framework中定义的List实现有Vector，ArrayList和LinkedList。这些集合提供了对对象组的索引访问。他们提供了元素的添加与删除支持。然而，它们并没有内置的元素排序支持。 　　你能够使用java.util.Collections类中的sort()方法对List元素进行排序。你既可以给方法传递</div>
                                </li>
                                <li><a href="/article/3686.htm"
                                       title="servlet单例多线程" target="_blank">servlet单例多线程</a>
                                    <span class="text-muted">utopialxw</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E4%BE%8B/1.htm">单例</a><a class="tag" taget="_blank" href="/search/%E5%A4%9A%E7%BA%BF%E7%A8%8B/1.htm">多线程</a><a class="tag" taget="_blank" href="/search/servlet/1.htm">servlet</a>
                                    <div>转自http://www.cnblogs.com/yjhrem/articles/3160864.html 
和   http://blog.chinaunix.net/uid-7374279-id-3687149.html 
Servlet 单例多线程 
Servlet如何处理多个请求访问？Servlet容器默认是采用单实例多线程的方式处理多个请求的：1.当web服务器启动的</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>