模板语法 & vue指令

这章讲模板语法 & vue指令

一模板语法

模板插值是将数据从组件的模型绑定到视图的一种常用方式。插值表达式通常用于文本内容的输出，可以使用两种语法：双大括号 {{ }} 和 v-bind 指令。（这两个比较常用）

双括号法

另一种vue2中常用写法对比

v-bind 指令

使用 v-bind 或简写 : 可以将数据绑定到 HTML 属性中。

后面指令会细讲

写个小案例吧（先不急看懂，只是说明用法，等后面学到了回头看）

  
  
  
  


  

    
    
{{ message }}
    
    
    
你已经点击了 {{ count }} 次
    
    
    
{{ user.name }} - {{ user.age }} 岁
    
    
    

    
    
    点击我
  

  

解释

1. 创建响应式数据：

   • 使用 ref 创建一个响应式数据 count。
   • 定义非响应式数据 message 和响应式数据对象 user。
   • 定义 rawHtml 来存储原始 HTML 内容。

2. 模板插值：

   • {{ message }}：显示一个简单的字符串。
   • {{ count }}：显示响应式数据 count 的值。
   • {{ user.name }} 和 {{ user.age }}：显示对象 user 的属性。
   • v-html="rawHtml"：将原始 HTML 内容渲染到 div 中。

3. 事件绑定：

   • @click="count++"：绑定一个点击事件监听器，每次点击按钮时增加 count 的值。

运行效果

1. 页面会显示一个段落元素，包含文本 "Hello, Vue 3!"。
2. 有一个段落元素显示 "你已经点击了 x 次"，其中 x 是点击按钮的次数。
3. 有一个段落元素显示 "张三 - 28 岁"。
4. 有一个 div 元素显示加粗文本 "这是加粗文本"。
5. 有一个按钮，每次点击时，段落元素中的计数会增加。

这个示例展示了 Vue 3 中模板插值的基本用法，包括文本插值、表达式插值、对象属性绑定和原始 HTML 插值。

二setup（简单知道代码格式要怎么写就行了，后面再单独将这个讲）

这是 Vue 3 引入的一种新方式，使得编写组件更加简洁和直观，特别是在使用组合式 API 时。 ### 使用 `ref` 和 `reactive` ### 使用 `computed` 和 `watch` ### 使用 `props` 和 `emits` ### 使用 TypeScript ### 样式和类 ### 解释 1. **基础示例**： - `submit` 函数在按钮点击时被调用。 2. **使用 `ref`**： - 使用 `ref` 创建响应式数据 `message`。 3. **使用 `computed`**： - 使用 `computed` 创建一个计算属性 `capitalizedMessage`，它将 `message` 转换为大写。 4. **使用 `props` 和 `emits`**： - 使用 `defineProps` 定义组件的 props。 - 使用 `defineEmits` 定义组件的 emits。 5. **使用 TypeScript**： - 使用 TypeScript 定义类型。 6. **样式和类**： - 使用 `:class` 绑定动态类。 ` ### 解释 1. **绑定属性**： - `:src="imageSrc"` 将 `img` 标签的 `src` 属性绑定到 `imageSrc` 数据属性。 2. **绑定 class**： - `:class="{ active: isActive, 'text-danger': hasError }"` 根据 `isActive` 和 `hasError` 的值动态绑定 class。 3. **绑定 style**： - `:style="styleObject"` 将 `div` 标签的 `style` 属性绑定到 `styleObject` 数据对象。 4. **绑定组件 prop**： - `:user-name="userName"` 将 `my-component` 组件的 `user-name` prop 绑定到 `userName` 数据属性。 `v-bind` 指令是 Vue 中最常用的指令之一，它为动态 DOM 更新提供了强大的支持。

2. v-model

`v-model` 是 Vue.js 中用于在表单控件元素上创建双向数据绑定的指令。它不仅会绑定输入控件的值到数据属性，还会监听输入事件来更新数据。

以下是 `v-model` 的一些基本用法：

### 文本输入







### 多行文本







### 复选框







### 单选按钮







### 下拉选择







### 自定义组件







### 修饰符

- `.trim`：输入时自动去除首尾空白字符。
- `.number`：输入转换为数值类型。
- `.lazy`：在 `change` 事件而不是 `input` 事件之后更新数据。







### 注意事项

- `v-model` 在 `` 元素上默认绑定至 `value` 属性。
- `v-model` 在 `<input>` 元素上默认绑定至 `value` 属性，但在 `<input type="checkbox">` 和 `<input type="radio">` 上绑定至 `checked` 属性。
- 当用在组件上时，`v-model` 默认绑定至组件的 `value` prop，并监听 `update:value` 事件。

`v-model` 是创建动态表单和实现数据绑定的便捷方式。
</code></pre> 
  <p>3. <code>v-for</code></p> 
  <pre><code class="hljs">`v-for` 是 Vue.js 中用于基于源数据多次渲染一个元素或模板块的指令。它可以用于遍历数组或对象，为每个元素生成一个元素或模板块。

以下是 `v-for` 的一些基本用法：

### 遍历数组


<template>
  <ul>
    <li v-for="(item, index) in items" :key="index">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { name: '苹果' },
  { name: '香蕉' },
  { name: '橘子' }
]);
</script>


在这个例子中，`items` 是一个数组，`v-for` 遍历数组并为每个元素创建一个 `<li>` 元素。

### 使用 `item` 别名


<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
  { id: 1, name: '苹果' },
  { id: 2, name: '香蕉' },
  { id: 3, name: '橘子' }
]);
</script>


在这个例子中，我们使用 `item` 来引用数组中每个元素的对象，并使用 `item.id` 作为 `:key`。

### 遍历对象


<template>
  <ul>
    <li v-for="(value, key, index) in object" :key="key">
      {{ index }}. {{ key }}: {{ value }}
    </li>
  </ul>
</template>

<script setup>
import { reactive } from 'vue';

const object = reactive({
  firstName: '张三',
  lastName: '李四',
  age: 25
});
</script>


在这个例子中，`object` 是一个响应式对象，`v-for` 遍历对象的每个属性。

### 使用 `of` 作为 `v-for` 的别名


<template>
  <ul>
    <li v-for="item of items" :key="item.id">
      {{ item.name }}
    </li>
  </ul>
</template>

`of` 是 `v-for` 的别名，用法与 `in` 相同。

### 注意事项

- 总是为 `v-for` 绑定一个唯一的 `:key` 属性，以帮助 Vue.js 识别列表中元素的唯一性并优化渲染性能。
- 避免使用相同的 `key` 值重复利用，这可能会导致更新列表时的意外行为。
- 如果需要在 `v-for` 中使用多个变量，可以继续绑定更多的变量，例如：`(v-for="(value, key, index) in object")`。

`v-for` 是 Vue 中处理列表渲染的强大指令，正确使用它可以创建动态和响应式的列表视图。
</code></pre> 
  <p>4. <code>v-if</code>, <code>v-else-if</code>, <code>v-else</code></p> 
  <pre><code class="hljs">在 Vue.js 中，`v-if`、`v-else-if` 和 `v-else` 是一组指令，用于根据表达式的值条件性地渲染一块内容。这些指令允许你控制哪个 DOM 元素应该被渲染，以及在何种条件下渲染。

### 基本用法

#### 1. `v-if`

`v-if` 指令用于条件性地渲染元素，只有当指令的表达式返回 `true` 时，元素才会被渲染。


<template>
  <div v-if="isVisible">这部分内容仅在 isVisible 为 true 时显示。</div>
</template>

<script setup>
import { ref } from 'vue';

const isVisible = ref(true);
</script>


#### 2. `v-else-if`

`v-else-if` 指令用于在 `v-if` 之后提供额外的条件，它必须紧跟在 `v-if` 或 `v-else-if` 元素之后。

<template>
  <div v-if="type === 'A'">类型 A</div>
  <div v-else-if="type === 'B'">类型 B</div>
  <div v-else-if="type === 'C'">类型 C</div>
</template>

<script setup>
import { ref } from 'vue';

const type = ref('B');
</script>


#### 3. `v-else`

`v-else` 指令用于在一组 `v-if` 和 `v-else-if` 之后渲染条件性内容，类似于 JavaScript 中的 `else`。它不需要表达式，并且也必须紧跟在 `v-if` 或 `v-else-if` 元素之后。


<template>
  <div v-if="type === 'A'">类型 A</div>
  <div v-else>非类型 A</div>
</template>

<script setup>
import { ref } from 'vue';

const type = ref('B');
</script>


### 示例代码


<template>
  <div>
    <p v-if="age >= 18">已成年</p>
    <p v-else>未成年</p>
  </div>
  <div>
    <p v-if="score > 90">优秀</p>
    <p v-else-if="score > 70">良好</p>
    <p v-else-if="score > 50">及格</p>
    <p v-else>不及格</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const age = ref(17);
const score = ref(85);
</script>


### 注意事项

- `v-if` 是“真正的”条件渲染，因为它确保在条件为 false 时不渲染任何元素。
- `v-else-if` 和 `v-else` 必须紧跟在 `v-if` 或 `v-else-if` 后面，不能有其他元素或注释隔开。
- 这些指令可以与 `v-show` 结合使用，但它们在行为上有重要区别：`v-if` 和 `v-else-if` 是结构性指令，会根据条件添加或移除元素；`v-show` 是通过切换 CSS 的 `display` 属性来控制显示。

通过使用 `v-if`、`v-else-if` 和 `v-else`，你可以创建条件性地显示内容的动态界面。
</code></pre> 
  <p>5. <code>v-on</code></p> 
  <pre><code class="hljs">`v-on` 是 Vue.js 中用于监听 DOM 事件的指令，它可以让你在模板中直接绑定事件监听器。当事件被触发时，指定的方法将被调用。

以下是 `v-on` 的一些基本用法：

### 监听点击事件


<template>
  <button v-on:click="handleClick">点击我</button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了');
};
</script>


### 监听多个事件


<template>
  <button v-on:click="handleClick" v-on:mouseover="handleMouseOver">按钮</button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了');
};

const handleMouseOver = () => {
  console.log('鼠标悬停在按钮上');
};
</script>

### 使用内联处理器


<template>
  <button v-on:click="handleClick">点击我</button>
</template>

<script setup>
const handleClick = () => {
  console.log('按钮被点击了');
};
</script>


### 停止事件传播


<template>
  <div v-on:click.stop="handleDivClick">
    <div v-on:click="handleInnerDivClick">
      点击内部 div
    </div>
  </div>
</template>

<script setup>
const handleDivClick = () => {
  console.log('外部 div 被点击');
};

const handleInnerDivClick = (event) => {
  console.log('内部 div 被点击');
  // 由于 .stop 修饰符，这不会导致 handleDivClick 被调用
};
</script>


### 阻止默认行为


<template>
  <a v-on:click.prevent="handleLinkClick">点击我而不跳转</a>
</template>

<script setup>
const handleLinkClick = (event) => {
  console.log('链接被点击，但默认行为被阻止');
};
</script>


### 事件捕获


<template>
  <div v-on:click.capture="handleClick">点击我</div>
</template>

<script setup>
const handleClick = (event) => {
  console.log('捕获到点击事件');
};
</script>


### 事件修饰符

- `.stop`：阻止事件冒泡。
- `.prevent`：阻止事件的默认行为。
- `.capture`：使用事件捕获模式而非冒泡模式。
- `.self`：只当事件在该元素自身触发时才触发。
- `.once`：事件处理函数只执行一次。

### 缩写

在 Vue 中，`v-on` 也有一个更简洁的缩写，即 `@`：

<template>
  <button @click="handleClick">点击我</button>
</template>


### 示例代码


<template>
  <div>
    <button @click="handleClick">点击我</button>
    <a @click.prevent="handleLinkClick">点击我而不跳转</a>
    <button @click.stop="handleButtonClick">点击我</button>
  </div>
</template>

<script setup>
const handleClick = () => {
  console.log('处理点击');
};

const handleLinkClick = (event) => {
  console.log('处理链接点击');
};

const handleButtonClick = () => {
  console.log('按钮捕获点击');
};
</script>


### 解释

1. **监听点击事件**：
   - `@click="handleClick"` 监听按钮的点击事件，并调用 `handleClick` 方法。

2. **阻止默认行为**：
   - `@click.prevent="handleLinkClick"` 监听链接的点击事件，并阻止其默认行为（即不进行页面跳转）。

3. **停止事件传播**：
   - `@click.stop="handleButtonClick"` 监听按钮的点击事件，并阻止事件冒泡。

`v-on` 指令是 Vue 中处理用户交互的强大工具，它使得事件处理变得简单和直观。
</code></pre> 
  <p>6. <code>v-slot</code></p> 
  <pre><code class="hljs">`v-slot` 是 Vue.js 中用于插槽分发的指令，它允许你将内容传递到组件的插槽中。插槽是组件的一个占位符，可以用于在组件的模板内插入外部内容。

以下是 `v-slot` 的一些基本用法：

### 默认插槽

<template>
  <my-component>
    <template v-slot>
      这里是默认插槽的内容
    </template>
  </my-component>
</template>


或者使用缩写 `#`：


<template>
  <my-component>
    <template #default>
      这里是默认插槽的内容
    </template>
  </my-component>
</template>

### 具名插槽


<template>
  <my-component>
    <template v-slot:header>
      这里是 header 插槽的内容
    </template>
    <template v-slot:footer>
      这里是 footer 插槽的内容
    </template>
  </my-component>
</template>

使用缩写：


<template>
  <my-component>
    <template #header>
      这里是 header 插槽的内容
    </template>
    <template #footer>
      这里是 footer 插槽的内容
    </template>
  </my-component>
</template>


### 作用域插槽

<template>
  <my-component>
    <template v-slot:default="slotProps">
      {{ slotProps.text }}
    </template>
    <template v-slot:item="slotProps" v-for="item in slotProps.items">
      {{ item.name }}
    </template>
  </my-component>
</template>

使用缩写：


<template>
  <my-component>
    <template #default="slotProps">
      {{ slotProps.text }}
    </template>
    <template #item="slotProps" v-for="item in slotProps.items">
      {{ item.name }}
    </template>
  </my-component>
</template>


### 插槽的 props


<template>
  <my-component>
    <template v-slot:default="slotProps">
      {{ slotProps.someProperty }}
    </template>
  </my-component>
</template>


### 使用解构赋值


<template>
  <my-component>
    <template v-slot:default="{ text }">
      {{ text }}
    </template>
  </my-component>
</template>


### 注意事项

- 默认插槽可以不使用 `name` 属性。
- 具名插槽必须使用 `v-slot:name` 或缩写 `#name` 来指定插槽名称。
- 作用域插槽可以接收来自组件的 data、computed、methods 等作为插槽的 props。
- 插槽的 props 默认是解构模式，如果插槽内容简单，可以省略参数名称。

`v-slot` 指令是 Vue 中处理组件内容分发的重要指令，它使得组件设计更加灵活和强大。
</code></pre> 
  <p>哥们写不下去了，下一章再接上吧</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1913933940591226880"></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">你可能感兴趣的:(vue.js,前端,javascript)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1939715335536046080.htm"
                           title="中小团队零成本搭建PHP任务管理系统：4大核心工具实测推荐" target="_blank">中小团队零成本搭建PHP任务管理系统：4大核心工具实测推荐</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
                        <div>引言在现代软件开发和团队协作中，高效的任务管理系统是提升生产力的核心要素。PHP作为全球最受欢迎的服务器端编程语言之一，凭借其成熟的生态系统、丰富的框架选择和强大的社区支持，成为构建任务管理系统的理想选择。一个优秀的PHP任务管理系统不仅能够实现任务的全生命周期管理，还能通过智能化的功能提升团队协作效率，降低项目管理成本。构建这样一个系统需要考虑多个层面：从底层的数据库设计到前端的用户体验，从安全</div>
                    </li>
                    <li><a href="/article/1939697253291716608.htm"
                           title="Android Gantt View 安卓实现项目甘特图" target="_blank">Android Gantt View 安卓实现项目甘特图</a>
                        <span class="text-muted">netkiller-BG7NYT</span>
<a class="tag" taget="_blank" href="/search/Android/1.htm">Android</a><a class="tag" taget="_blank" href="/search/%E6%89%8B%E6%9C%AD/1.htm">手札</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E7%94%98%E7%89%B9%E5%9B%BE/1.htm">甘特图</a>
                        <div>需要做一个项目管理工具，其中使用到了甘特图。发现全网甘特图解决方案比较少，于是自动动手丰衣足食。前面我用Python和Node.js前端都做过，这次仅仅是移植到Android上面。其实甘特图非常简单，开发也不难，如果我专职去做，能做出一个非常棒产品。我写这个只是消遣，玩玩，闲的蛋痛，所以不怎么上心，就搞成下面这德行吧。仅仅供大家学习，参考。那天心情好了，完善一下。屏幕布局文件<androidx.c</div>
                    </li>
                    <li><a href="/article/1939682372236668928.htm"
                           title="每天一个前端小知识 Day 16 - 前端性能优化全流程指南" target="_blank">每天一个前端小知识 Day 16 - 前端性能优化全流程指南</a>
                        <span class="text-muted">蓝婷儿</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E9%9D%A2%E8%AF%95/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/%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96/1.htm">性能优化</a>
                        <div>前端性能优化全流程指南（从加载到交互）目标概览：前端性能优化四大核心维度阶段优化目标加载阶段首屏速度、资源压缩、请求优化渲染阶段减少回流重绘、避免布局抖动交互阶段保持高帧率、避免卡顿持久运行阶段内存泄露处理、缓存命中策略一、加载性能优化（首屏速度为王）✅核心策略：资源体积优化JS/CSS/图片压缩（如gzip,brotli）Tree-shaking（去除无用代码）图片压缩（webp优先）合理拆包（</div>
                    </li>
                    <li><a href="/article/1939678837335977984.htm"
                           title="JAVA：常见 JSON 库的技术详解" target="_blank">JAVA：常见 JSON 库的技术详解</a>
                        <span class="text-muted">拾荒的小海螺</span>
<a class="tag" taget="_blank" href="/search/JAVA/1.htm">JAVA</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>1、简述在现代应用开发中，JSON（JavaScriptObjectNotation）已成为数据交换的标准格式。Java提供了多种方式将对象转换为JSON或从JSON转换为对象，常见的库包括Jackson、Gson和org.json。本文将介绍几种常用的JSON处理方式，并通过简单示例展示其应用。2、什么是JSON？JSON是一种轻量级的数据交换格式，使用键值对来表示数据。它易于人阅读和编写，同时</div>
                    </li>
                    <li><a href="/article/1939673165848440832.htm"
                           title="Vue.js 3.0 vue-devtools 的安装和使用" target="_blank">Vue.js 3.0 vue-devtools 的安装和使用</a>
                        <span class="text-muted"></span>

                        <div>vue-devtools是用来在浏览器中调试Vue.js的利器，vue-devtools的github地址请点击这里。github页面中显示的打开vue-devtools的方法是针对Vue2.0的，在Vue3.0开发版本中默认是打开devtools的调试的，不需要做特殊操作。安装googlechrome插件在github页面上找到安装地址，就是下方红色标记那个链接：安装成功后，需要重启一下goog</div>
                    </li>
                    <li><a href="/article/1939641532214734848.htm"
                           title="JS 与 CSS 的交互式开发：打造灵动的网页体验" target="_blank">JS 与 CSS 的交互式开发：打造灵动的网页体验</a>
                        <span class="text-muted">维他奶糖61</span>
<a class="tag" taget="_blank" href="/search/pandas/1.htm">pandas</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>在当今的网页开发领域，静态的网页早已无法满足用户日益增长的交互需求。JavaScript（JS）和层叠样式表（CSS）作为前端开发的两大支柱，它们的强强联合能够创造出令人惊叹的交互式网页效果。从简单的按钮点击变色，到复杂的动画过渡和动态页面布局变换，JS与CSS的交互式开发赋予了网页生命与活力。接下来，就让我们深入探索这一奇妙的领域。理解JS与CSS的分工与协作在开始交互式开发之前，我们需要明确J</div>
                    </li>
                    <li><a href="/article/1939629801539170304.htm"
                           title="js代码开发" target="_blank">js代码开发</a>
                        <span class="text-muted"></span>

                        <div>当然可以！为你说明在VSCode中进行JavaScript开发的环境配置，这是一个非常普遍且高效的组合。别担心，配置过程非常直接。JS开发环境的核心主要包括两大部分：运行时(Runtime)：即能够执行JavaScript代码的环境。开发工具(Tooling)：即让编码过程更高效、更不容易出错的工具，这部分主要通过VSCode扩展来实现。下面我为你分解成清晰的步骤，跟着做就行。第一步：安装Node</div>
                    </li>
                    <li><a href="/article/1939627404326662144.htm"
                           title="HTML前端的自动化构建工具使用" target="_blank">HTML前端的自动化构建工具使用</a>
                        <span class="text-muted">前端视界</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E8%89%BA%E5%8C%A0%E9%A6%86/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/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E8%87%AA%E5%8A%A8%E5%8C%96/1.htm">自动化</a><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a>
                        <div>HTML前端的自动化构建工具使用：从手工作坊到智能工厂的蜕变关键词：前端构建工具、自动化流程、Gulp、Webpack、前端工程化摘要：本文将带你从前端开发的“手工作坊时代”出发，一步步理解为什么需要自动化构建工具，揭秘核心概念和工作原理，并通过实战案例教你用Gulp和Webpack搭建高效的前端工作流。无论你是刚入门的前端新手，还是想优化现有项目的开发者，都能在这里找到从“手动劳动”到“智能生产</div>
                    </li>
                    <li><a href="/article/1939623752572661760.htm"
                           title="用Pytorch训练手写签名模型并进行签名识别" target="_blank">用Pytorch训练手写签名模型并进行签名识别</a>
                        <span class="text-muted">TBM矩阵</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/AI%E4%BD%93%E7%B3%BB%E5%AD%A6%E4%B9%A0/1.htm">AI体系学习</a><a class="tag" taget="_blank" href="/search/pytorch/1.htm">pytorch</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/python/1.htm">python</a>
                        <div>整体思路收集至少两个人的手写签名图片，每个人至少20张使用Pytorch进行模型训练使用Flask搭建Web服务使用Html/JavaScript实现前端调用进行签名识别项目结构signature-systemdatatrainuser001001.png...user002001.png...templatesindex.htmlapp.pymodel.pytrain.py建模：model.py</div>
                    </li>
                    <li><a href="/article/1939620346080587776.htm"
                           title="FlatBuffers（概念、原理及优势、在TS中的使用）" target="_blank">FlatBuffers（概念、原理及优势、在TS中的使用）</a>
                        <span class="text-muted">前端杂货铺</span>
<a class="tag" taget="_blank" href="/search/TodoList/1.htm">TodoList</a><a class="tag" taget="_blank" href="/search/100%E4%B8%AA%E5%B0%8F%E7%9F%A5%E8%AF%86/1.htm">100个小知识</a><a class="tag" taget="_blank" href="/search/FlatBuffers/1.htm">FlatBuffers</a><a class="tag" taget="_blank" href="/search/JSON/1.htm">JSON</a><a class="tag" taget="_blank" href="/search/%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">序列化</a><a class="tag" taget="_blank" href="/search/%E5%8F%8D%E5%BA%8F%E5%88%97%E5%8C%96/1.htm">反序列化</a>
                        <div>个人简介个人主页：前端杂货铺‍♂️学习方向：主攻前端方向，正逐渐往全干发展个人状态：研发工程师，现效力于中国工业软件事业人生格言：积跬步至千里，积小流成江海推荐学习：前端面试宝典100个小功能Vue2Vue3Vue2/3项目实战Node.js实战Three.js个人推广：每篇文章最下方都有加入方式，旨在交流学习&资源分享，快加入进来吧文章目录介绍在Vue中使用FlatBuffersFlatBuff</div>
                    </li>
                    <li><a href="/article/1939619086531096576.htm"
                           title="语法糖：编程中的甜蜜简化 (附 Vue 3 & Javascript 实战示例)" target="_blank">语法糖：编程中的甜蜜简化 (附 Vue 3 & Javascript 实战示例)</a>
                        <span class="text-muted">Pu_Nine_9</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A0/1.htm">前端学习</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><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/%E8%AF%AD%E6%B3%95%E7%B3%96/1.htm">语法糖</a>
                        <div>什么是语法糖？语法糖（SyntacticSugar）是编程语言中一种特殊的语法结构，它不引入新的功能，而是提供一种更简洁、更易读的方式来表达已有功能。就像给咖啡加糖一样，它让代码"更甜"——更易于理解和编写。语法糖的四大核心价值可读性提升：让代码更接近自然语言表达开发效率：减少样板代码，专注业务逻辑错误预防：通过标准化模式减少人为失误维护便捷：简洁的代码结构更易于后期维护经典语法糖示例深度解析示例</div>
                    </li>
                    <li><a href="/article/1939613789125144576.htm"
                           title="Node.js 后端开发：与前端的完美结合" target="_blank">Node.js 后端开发：与前端的完美结合</a>
                        <span class="text-muted"></span>

                        <div>Node.js后端开发：与前端的完美结合关键词：Node.js、后端开发、前后端分离、RESTfulAPI、Express、性能优化、全栈开发摘要：本文深入探讨Node.js在后端开发中的优势及其与前端的完美结合方式。我们将从Node.js的核心特性出发，分析其适合后端开发的原因，详细介绍如何构建高性能的RESTfulAPI服务，探讨前后端分离架构的最佳实践，并通过实际项目案例展示Node.js如</div>
                    </li>
                    <li><a href="/article/1939610512086069248.htm"
                           title="React用户交互事件" target="_blank">React用户交互事件</a>
                        <span class="text-muted"></span>

                        <div>在React中处理用户交互事件（如点击、输入、提交等）的方式与原生JavaScript类似，但有一些语法差异和最佳实践。以下是常见交互事件的处理方法及代码示例：一、基本事件处理（点击、输入等）1.点击事件（onClick）importReact,{useState}from'react';constButtonExample=()=>{const[count,setCount]=useState(</div>
                    </li>
                    <li><a href="/article/1939600179430748160.htm"
                           title="前端React和Vue框架的区别" target="_blank">前端React和Vue框架的区别</a>
                        <span class="text-muted"></span>

                        <div>React和Vue作为前端Web开发的两大主流框架，虽然都用于构建用户界面，但在设计理念、语法风格、生态系统等方面存在显著差异。以下从多个维度对比两者的核心区别，帮助你在技术选型时做出更合适的决策。一、设计理念与架构1.数据流控制React：强制单向数据流（One-WayDataFlow），状态变化只能通过父组件→子组件传递，如需反向通信（如子组件修改父组件状态），需通过回调函数实现。复杂应用中需</div>
                    </li>
                    <li><a href="/article/1939596398492184576.htm"
                           title="【JS-6-ES6中的let和const】深入理解ES6中的let和const：块级作用域与变量声明的新范式" target="_blank">【JS-6-ES6中的let和const】深入理解ES6中的let和const：块级作用域与变量声明的新范式</a>
                        <span class="text-muted">AllenBright</span>
<a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在ES6(ECMAScript2015)之前，JavaScript中只有var一种变量声明方式，这导致了许多作用域相关的问题。ES6引入了let和const两种新的变量声明方式，彻底改变了JavaScript的作用域规则。本文将深入探讨let和const的特性、优势以及它们与var的区别。1.var的问题与ES6的解决方案1.1var的局限性在ES5及之前版本中，var声明存在几个主要问题：函数作</div>
                    </li>
                    <li><a href="/article/1939595642322087936.htm"
                           title="让你彻底了解 JavaScript 解构赋值" target="_blank">让你彻底了解 JavaScript 解构赋值</a>
                        <span class="text-muted">前端 贾公子</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%9F%BA%E7%A1%80/1.htm">前端基础</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>JavaScript解构赋值详解1.解构赋值简介解构赋值（Destructuringassignment）是JavaScriptES6引入的一种语法特性，它使得我们可以从数组和对象中提取值，并以一种更便捷的方式赋值给变量。这种语法可以大大减少代码量，提高代码的可读性和维护性。1.1为什么使用解构赋值？代码更简洁，减少重复的赋值语句提高代码可读性，使变量的来源更清晰方便地处理嵌套数据结构在函数参数中</div>
                    </li>
                    <li><a href="/article/1939593626833186816.htm"
                           title="前端基础知识JavaScript系列 - 25（Javascript本地存储）" target="_blank">前端基础知识JavaScript系列 - 25（Javascript本地存储）</a>
                        <span class="text-muted">前端小白从0开始</span>
<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>一、方式javaScript本地缓存的方法我们主要讲述以下四种：cookiesessionStoragelocalStorageindexedDBcookieCookie，类型为「小型文本文件」，指某些网站为了辨别用户身份而储存在用户本地终端上的数据。是为了解决HTTP无状态导致的问题作为一段一般不超过4KB的小型文本数据，它由一个名称（Name）、一个值（Value）和其它几个用于控制cooki</div>
                    </li>
                    <li><a href="/article/1939579119985553408.htm"
                           title="前端vue2 报错不是一个函数 怎么解决？" target="_blank">前端vue2 报错不是一个函数 怎么解决？</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>检查函数定义确保报错的函数确实在对应的组件或模块中正确定义。函数需要在methods对象中声明，或在混合（mixins）、插件中正确引入。例如：methods:{myFunction(){//函数逻辑}}检查函数调用方式确认函数调用时没有拼写错误，且调用方式正确。在模板中调用需使用@click="myFunction"，在脚本中调用需使用this.myFunction()。注意避免直接调用未绑定的</div>
                    </li>
                    <li><a href="/article/1939579120480481280.htm"
                           title="JavaScript性能优化代码示例" target="_blank">JavaScript性能优化代码示例</a>
                        <span class="text-muted">突然暴富的我 || 比较富的我</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>JavaScript性能优化实战大纲性能优化的核心目标减少加载时间、提升渲染效率、降低内存占用、优化交互响应代码层面的优化实践避免全局变量污染，使用局部变量和模块化开发减少DOM操作频率，批量处理DOM更新使用事件委托替代大量事件监听器优化循环结构，减少不必要的计算使用WebWorkers处理密集型计算任务内存管理策略及时清除不再使用的对象引用避免内存泄漏，注意闭包使用场景使用弱引用（WeakMa</div>
                    </li>
                    <li><a href="/article/1939574708588572672.htm"
                           title="小程序领域开发语言的基础教程" target="_blank">小程序领域开发语言的基础教程</a>
                        <span class="text-muted">小程序开发2020</span>
<a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/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/ai/1.htm">ai</a>
                        <div>小程序领域开发语言的基础教程：从0到1轻松入门关键词：小程序开发、WXML、WXSS、JavaScript、双线程模型、生命周期、组件化摘要：本文是针对小程序开发语言的零基础入门指南，通过生活类比、代码示例和实战案例，详细讲解小程序核心开发语言（WXML/WXSS/JavaScript）的原理、协作方式及实际应用。无论你是前端新手还是想转行小程序开发的小白，都能通过本文掌握小程序开发的“三板斧”，</div>
                    </li>
                    <li><a href="/article/1939547351840518144.htm"
                           title="【面试宝典】39道UniApp高频题库整理(附答案背诵版)" target="_blank">【面试宝典】39道UniApp高频题库整理(附答案背诵版)</a>
                        <span class="text-muted">想念@思恋</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95%E5%AE%9D%E5%85%B8/1.htm">面试宝典</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E8%81%8C%E5%9C%BA%E5%92%8C%E5%8F%91%E5%B1%95/1.htm">职场和发展</a>
                        <div>1.简述什么是uniApp？uniApp是一个使用Vue.js开发所有前端应用的框架，它允许开发者用一套代码同时发布到iOS、Android、Web（包括PC和移动端浏览器）、以及各种小程序（微信、支付宝、百度、字节跳动、QQ等）和快应用等多个平台。简而言之，uniApp的宗旨是“一次开发，多处运行”。使用uniApp，开发者可以享受到Vue.js的开发体验，包括组件化开发、Vue插件支持、Vue</div>
                    </li>
                    <li><a href="/article/1939544579883724800.htm"
                           title="深入理解JavaScript ES6 Promise基本使用和进阶讲解" target="_blank">深入理解JavaScript ES6 Promise基本使用和进阶讲解</a>
                        <span class="text-muted">ScottePerk</span>
<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/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>一项新技术的出现一定是为了解决某个痛点问题的。ES6的Promise就是为了解决ES5在处理异步任务时所存在的问题。Promise是一个异步处理框架。Promise前夕——ES5对于异步任务的处理我们先来看看ES5是怎么处理异步任务的。主要的手段就是通过回调函数。回调函数是JavaScript本身就支持的机制。可以通过回调函数实现类似下面这个的网络请求过程。虽然这个函数的实现看起来代码有点不好看，</div>
                    </li>
                    <li><a href="/article/1939540774215544832.htm"
                           title="trycatch捕获不到的错误" target="_blank">trycatch捕获不到的错误</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AFjavascript/1.htm">前端javascript</a>
                        <div>在浏览器环境的JavaScript中，try...catch是处理运行时错误的常用机制，但并非所有错误都能被其捕获。以下是无法被try...catch捕获的几类错误及其原因与解决方案：⚠️1.语法错误（SyntaxErrors）原因：语法错误发生在代码解析阶段，此时代码尚未执行，try...catch无法捕获。示例：try{consta=;//缺少赋值表达式}catch(e){console.lo</div>
                    </li>
                    <li><a href="/article/1939530333422678016.htm"
                           title="现代 JavaScript (ES6+) 入门到实战（六）：异步的终极形态 - async/await 的优雅魔法" target="_blank">现代 JavaScript (ES6+) 入门到实战（六）：异步的终极形态 - async/await 的优雅魔法</a>
                        <span class="text-muted">程序员阿超的博客</span>
<a class="tag" taget="_blank" href="/search/ES6%2B/1.htm">ES6+</a><a class="tag" taget="_blank" href="/search/%E5%AE%8C%E5%85%A8%E8%BF%9B%E5%8C%96%E6%8C%87%E5%8D%97%EF%BC%9A%E4%BB%8E/1.htm">完全进化指南：从</a><a class="tag" taget="_blank" href="/search/ES5/1.htm">ES5</a><a class="tag" taget="_blank" href="/search/%E5%88%B0%E7%8E%B0%E4%BB%A3/1.htm">到现代</a><a class="tag" taget="_blank" href="/search/JS/1.htm">JS</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在上一篇，我们用Promise把“回调地狱”改造成了优雅的链式调用。这已经是一个巨大的进步了。但是，当逻辑复杂时，一长串的.then()仍然会降低代码的可读性，我们的大脑依然需要切换到“异步模式”去理解代码。有没有一种方法，能让我们像写同步代码（一行接一行）那样去写异步代码呢？答案是肯定的！ES7(ES2017)带来了async/await，它被誉为JavaScript异步编程的“终极解决方案”。</div>
                    </li>
                    <li><a href="/article/1939525292779433984.htm"
                           title="ES6 新特性从入门到精通：100 + 代码示例带你轻松掌握（附图解教程）" target="_blank">ES6 新特性从入门到精通：100 + 代码示例带你轻松掌握（附图解教程）</a>
                        <span class="text-muted">北泽别胡说</span>
<a class="tag" taget="_blank" href="/search/%E6%96%B0%E6%89%8B%E4%BF%9D%E6%8A%A4%E6%9C%9F/1.htm">新手保护期</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E0%E5%88%B01%E5%AD%A6%E5%89%8D%E7%AB%AF/1.htm">从0到1学前端</a><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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a>
                        <div>本文针对JavaScript新手系统讲解ES6核心语法，涵盖变量声明、箭头函数、解构赋值、类与继承、Promise等核心模块。通过150+行带注释代码，结合「传统写法对比」和「新手避坑指南」，帮助读者3小时掌握ES6关键特性，快速应用于项目开发。一、ES6入门：为什么必须学习ES6？1.1ES6的革命性升级代码简洁性：箭头函数、模板字符串等语法减少冗余代码逻辑清晰性：class类、模块化语法让代码</div>
                    </li>
                    <li><a href="/article/1939524913589186560.htm"
                           title="Javascript：ES6+概念详解" target="_blank">Javascript：ES6+概念详解</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>Javascript：ES6+概念详解善良的小乔一.基础概念什么是ES6+？ES6+（或ES2015+）是JavaScript语言的现代版本，包含了从2015年ES6（ECMAScript2015）开始的一系列更新。这些更新引入了新的语法糖、内置对象和API，显著提升了代码的可读性、简洁性和开发效率。什么是ECMAScript？ECMAScript是JavaScript的标准化规范（由ECMA国际</div>
                    </li>
                    <li><a href="/article/1939512563033239552.htm"
                           title="浏览器原理与API" target="_blank">浏览器原理与API</a>
                        <span class="text-muted">天涯学馆</span>
<a class="tag" taget="_blank" href="/search/Web%E5%A4%A7%E5%89%8D%E7%AB%AF%E5%85%A8%E6%A0%88%E6%9E%B6%E6%9E%84/1.htm">Web大前端全栈架构</a><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>
                        <div>浏览器原理与渲染机制浏览器架构概述现代浏览器通常由以下核心组件构成：用户界面(UI)：地址栏、后退/前进按钮、书签菜单等浏览器引擎：在用户界面和渲染引擎之间架起桥梁渲染引擎：负责显示请求的内容(如Chrome的Blink、Firefox的Gecko)网络层：处理网络请求(如HTTP请求)JavaScript引擎：解释和执行JavaScript代码(如V8引擎)UI后端：绘制基本的窗口小部件(如组合</div>
                    </li>
                    <li><a href="/article/1939501218183311360.htm"
                           title="rollupOptions 详细讲解，如何优化性能" target="_blank">rollupOptions 详细讲解，如何优化性能</a>
                        <span class="text-muted">东心十</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>RollupOptions详细讲解与性能优化Rollup是一个JavaScript模块打包器，特别适合用于库和应用的打包。rollupOptions是在使用Vite、WMR等构建工具时配置Rollup的选项对象。下面我将详细讲解rollupOptions的各个配置项以及如何优化打包性能。核心配置项详解输入(input)javascriptrollupOptions:{input:‘src/main</div>
                    </li>
                    <li><a href="/article/1939491137492414464.htm"
                           title="JAVA进阶之路" target="_blank">JAVA进阶之路</a>
                        <span class="text-muted">夜澜听雨声</span>
<a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/Advance/1.htm">Advance</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企业开发基础1.JavaWeb2.SSM框架3.Maven4.Springboot25.mybatis-plus6.前端学习（不算很重要）7.SpringSecurity（有时间再看，不重要）8.代码开发规范（不重要，有时间看）9.Git10.Linux（不重要，会用就行）二、Java企业开发进阶1.设计模式2.Redis（核心）3.消息队列RocketMQ(核心)4.</div>
                    </li>
                    <li><a href="/article/1939488993569730560.htm"
                           title="Python爬虫实战：使用Scrapy+Selenium+Playwright高效爬取Coursera课程信息" target="_blank">Python爬虫实战：使用Scrapy+Selenium+Playwright高效爬取Coursera课程信息</a>
                        <span class="text-muted">Python爬虫项目</span>
<a class="tag" taget="_blank" href="/search/2025%E5%B9%B4%E7%88%AC%E8%99%AB%E5%AE%9E%E6%88%98%E9%A1%B9%E7%9B%AE/1.htm">2025年爬虫实战项目</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/scrapy/1.htm">scrapy</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1/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/%E7%A7%91%E6%8A%80/1.htm">科技</a><a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a>
                        <div>前言在当今信息爆炸的时代，在线教育平台如Coursera提供了海量的高质量课程资源。对于学习者、教育研究者和数据分析师来说，获取这些平台的课程信息具有重要价值。本文将详细介绍如何使用Python爬虫技术高效爬取Coursera课程信息，并分析其中的技术难点与解决方案。1.Coursera网站分析Coursera是一个典型的现代Web应用，具有以下特点：采用React/Vue等前端框架构建，大量内容</div>
                    </li>
                                <li><a href="/article/34.htm"
                                       title="Java 并发包之线程池和原子计数" target="_blank">Java 并发包之线程池和原子计数</a>
                                    <span class="text-muted">lijingyao8206</span>
<a class="tag" taget="_blank" href="/search/Java%E8%AE%A1%E6%95%B0/1.htm">Java计数</a><a class="tag" taget="_blank" href="/search/ThreadPool/1.htm">ThreadPool</a><a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91%E5%8C%85/1.htm">并发包</a><a class="tag" taget="_blank" href="/search/java%E7%BA%BF%E7%A8%8B%E6%B1%A0/1.htm">java线程池</a>
                                    <div>对于大数据量关联的业务处理逻辑，比较直接的想法就是用JDK提供的并发包去解决多线程情况下的业务数据处理。线程池可以提供很好的管理线程的方式，并且可以提高线程利用率，并发包中的原子计数在多线程的情况下可以让我们避免去写一些同步代码。 
    这里就先把jdk并发包中的线程池处理器ThreadPoolExecutor 以原子计数类AomicInteger 和倒数计时锁C</div>
                                </li>
                                <li><a href="/article/161.htm"
                                       title="java编程思想 抽象类和接口" target="_blank">java编程思想 抽象类和接口</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%8A%BD%E8%B1%A1%E7%B1%BB/1.htm">抽象类</a><a class="tag" taget="_blank" href="/search/%E6%8E%A5%E5%8F%A3/1.htm">接口</a>
                                    <div>接口c++对接口和内部类只有简介的支持,但在java中有队这些类的直接支持 
  
1 ,抽象类 :  如果一个类包含一个或多个抽象方法,该类必须限定为抽象类(否者编译器报错) 
  
抽象方法 : 在方法中仅有声明而没有方法体  
  
 
package com.wj.Interface;

</div>
                                </li>
                                <li><a href="/article/288.htm"
                                       title="[房地产与大数据]房地产数据挖掘系统" target="_blank">[房地产与大数据]房地产数据挖掘系统</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a>
                                    <div> 
       随着一个关键核心技术的突破,我们已经是独立自主的开发某些先进模块,但是要完全实现,还需要一定的时间... 
 
       所以,除了代码工作以外,我们还需要关心一下非技术领域的事件..比如说房地产 
 
    &nb</div>
                                </li>
                                <li><a href="/article/415.htm"
                                       title="数组队列总结" target="_blank">数组队列总结</a>
                                    <span class="text-muted">沐刃青蛟</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84%E9%98%9F%E5%88%97/1.htm">数组队列</a>
                                    <div>  
    数组队列是一种大小可以改变，类型没有定死的类似数组的工具。不过与数组相比，它更具有灵活性。因为它不但不用担心越界问题，而且因为泛型（类似c++中模板的东西）的存在而支持各种类型。 
  
   以下是数组队列的功能实现代码： 
  
import List.Student;

public class</div>
                                </li>
                                <li><a href="/article/542.htm"
                                       title="Oracle存储过程无法编译的解决方法" target="_blank">Oracle存储过程无法编译的解决方法</a>
                                    <span class="text-muted">IT独行者</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/%E5%AD%98%E5%82%A8%E8%BF%87%E7%A8%8B%E3%80%80/1.htm">存储过程　</a>
                                    <div>今天同事修改Oracle存储过程又导致2个过程无法被编译，流程规范上的东西，Dave 这里不多说，看看怎么解决问题。 
   


1.     查看无效对象  
XEZF@xezf(qs-xezf-db1)> select object_name,object_type,status from all_objects where status='IN</div>
                                </li>
                                <li><a href="/article/669.htm"
                                       title="重装系统之后oracle恢复" target="_blank">重装系统之后oracle恢复</a>
                                    <span class="text-muted">文强chu</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a>
                                    <div>前几天正在使用电脑，没有暂停oracle的各种服务。 
突然win8.1系统奔溃，无法修复，开机时系统 提示正在搜集错误信息，然后再开机，再提示的无限循环中。 
无耐我拿出系统u盘 准备重装系统，没想到竟然无法从u盘引导成功。 
晚上到外面早了一家修电脑店，让人家给装了个系统，并且那哥们在我没反应过来的时候， 
直接把我的c盘给格式化了 并且清理了注册表，再装系统。 
然后的结果就是我的oracl</div>
                                </li>
                                <li><a href="/article/796.htm"
                                       title="python学习二（ 一些基础语法）" target="_blank">python学习二（ 一些基础语法）</a>
                                    <span class="text-muted">小桔子</span>
<a class="tag" taget="_blank" href="/search/pthon/1.htm">pthon</a><a class="tag" taget="_blank" href="/search/%E5%9F%BA%E7%A1%80%E8%AF%AD%E6%B3%95/1.htm">基础语法</a>
                                    <div>紧接着把！昨天没看继续看django 官方教程，学了下python的基本语法 与c类语言还是有些小差别： 
1.ptyhon的源文件以UTF-8编码格式 
2. 
 /   除 结果浮点型 
 //  除 结果整形 
 %   除 取余数 
 *   乘 
 **  乘方 eg 5**2 结果是5的2次方25 
 _&</div>
                                </li>
                                <li><a href="/article/923.htm"
                                       title="svn 常用命令" target="_blank">svn 常用命令</a>
                                    <span class="text-muted">aichenglong</span>
<a class="tag" taget="_blank" href="/search/SVN/1.htm">SVN</a><a class="tag" taget="_blank" href="/search/%E7%89%88%E6%9C%AC%E5%9B%9E%E9%80%80/1.htm">版本回退</a>
                                    <div>1 svn回退版本 
  1)在window中选择log,根据想要回退的内容,选择revert this version或revert chanages from this version 
 两者的区别: 
  revert this version:表示回退到当前版本(该版本后的版本全部作废) 
  revert chanages from this versio</div>
                                </li>
                                <li><a href="/article/1050.htm"
                                       title="某小公司面试归来" target="_blank">某小公司面试归来</a>
                                    <span class="text-muted">alafqq</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                                    <div>先填单子，还要写笔试题，我以时间为急，拒绝了它。。时间宝贵。 
老拿这些对付毕业生的东东来吓唬我。。 
 
面试官很刁难，问了几个问题，记录下； 
 
1，包的范围。。。public,private,protect. --悲剧了 
2，hashcode方法和equals方法的区别。谁覆盖谁.结果，他说我说反了。 
3，最恶心的一道题，抽象类继承抽象类吗？（察，一般它都是被继承的啊） 
4，stru</div>
                                </li>
                                <li><a href="/article/1177.htm"
                                       title="动态数组的存储速度比较 集合框架" target="_blank">动态数组的存储速度比较 集合框架</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E9%9B%86%E5%90%88%E6%A1%86%E6%9E%B6/1.htm">集合框架</a>
                                    <div>集合框架： 
自定义数据结构(增删改查等) 
package 数组;

/**
 * 创建动态数组
 * @author 百合
 *
 */

public class ArrayDemo{
	
	//定义一个数组来存放数据
	
	String[] src = new String[0];
	
	/**
	 * 增加元素加入容器 
	 * @param s要加入容器</div>
                                </li>
                                <li><a href="/article/1304.htm"
                                       title="用JS实现一个JS对象，对象里有两个属性一个方法" target="_blank">用JS实现一个JS对象，对象里有两个属性一个方法</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/js%E5%AF%B9%E8%B1%A1/1.htm">js对象</a>
                                    <div><html> 
  <head> 
  </head> 
  <body> 
    用js代码实现一个js对象，对象里有两个属性，一个方法 
  </body> 
  <script> 
        var obj={a:'1234567',b:'bbbbbbbbbb',c:function(x){ 
 </div>
                                </li>
                                <li><a href="/article/1431.htm"
                                       title="探索JUnit4扩展：使用Rule" target="_blank">探索JUnit4扩展：使用Rule</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/%E5%8D%95%E5%85%83%E6%B5%8B%E8%AF%95/1.htm">单元测试</a><a class="tag" taget="_blank" href="/search/JUnit/1.htm">JUnit</a><a class="tag" taget="_blank" href="/search/Rule/1.htm">Rule</a>
                                    <div>        在上一篇文章中，讨论了使用Runner扩展JUnit4的方式，即直接修改Test Runner的实现(BlockJUnit4ClassRunner)。但这种方法显然不便于灵活地添加或删除扩展功能。下面将使用JUnit4.7才开始引入的扩展方式——Rule来实现相同的扩展功能。 
1. Rule 
      &n</div>
                                </li>
                                <li><a href="/article/1558.htm"
                                       title="[Gson一]非泛型POJO对象的反序列化" target="_blank">[Gson一]非泛型POJO对象的反序列化</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/POJO/1.htm">POJO</a>
                                    <div>当要将JSON数据串反序列化自身为非泛型的POJO时，使用Gson.fromJson(String, Class)方法。自身为非泛型的POJO的包括两种： 
1. POJO对象不包含任何泛型的字段 
2. POJO对象包含泛型字段，例如泛型集合或者泛型类 
 Data类 a.不是泛型类， b.Data中的集合List和Map都是泛型的 c.Data中不包含其它的POJO   
 </div>
                                </li>
                                <li><a href="/article/1685.htm"
                                       title="【Kakfa五】Kafka Producer和Consumer基本使用" target="_blank">【Kakfa五】Kafka Producer和Consumer基本使用</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/kafka/1.htm">kafka</a>
                                    <div>0.Kafka服务器的配置 
一个Broker， 
一个Topic 
Topic中只有一个Partition（）   1. Producer： 
package kafka.examples.producers;


import kafka.producer.KeyedMessage;
import kafka.javaapi.producer.Producer;
impor</div>
                                </li>
                                <li><a href="/article/1812.htm"
                                       title="lsyncd实时同步搭建指南——取代rsync+inotify" target="_blank">lsyncd实时同步搭建指南——取代rsync+inotify</a>
                                    <span class="text-muted">ronin47</span>

                                    <div>1. 几大实时同步工具比较 1.1 inotify + rsync 
最近一直在寻求生产服务服务器上的同步替代方案，原先使用的是 inotify + rsync，但随着文件数量的增大到100W+，目录下的文件列表就达20M，在网络状况不佳或者限速的情况下，变更的文件可能10来个才几M，却因此要发送的文件列表就达20M，严重减低的带宽的使用效率以及同步效率；更为要紧的是，加入inotify</div>
                                </li>
                                <li><a href="/article/1939.htm"
                                       title="java-9. 判断整数序列是不是二元查找树的后序遍历结果" target="_blank">java-9. 判断整数序列是不是二元查找树的后序遍历结果</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class IsBinTreePostTraverse{
	
	static boolean isBSTPostOrder(int[] a){
		if(a==null){
			return false;
		}
		/*1.只有一个结点时，肯定是查找树
		 *2.只有两个结点时，肯定是查找树。例如{5,6}对应的BST是   6		{6,5}对应的BST是</div>
                                </li>
                                <li><a href="/article/2066.htm"
                                       title="MySQL的sum函数返回的类型" target="_blank">MySQL的sum函数返回的类型</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/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/jdbc/1.htm">jdbc</a>
                                    <div>今天项目切换数据库时，出错 
 
访问数据库的代码大概是这样： 
 

String sql =  "select sum(number) as sumNumberOfOneDay from tableName";
List<Map> rows = getJdbcTemplate().queryForList(sql);
for (Map row : rows</div>
                                </li>
                                <li><a href="/article/2193.htm"
                                       title="java设计模式之单例模式" target="_blank">java设计模式之单例模式</a>
                                    <span class="text-muted">chicony</span>
<a class="tag" taget="_blank" href="/search/java%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">java设计模式</a>
                                    <div>  
在阎宏博士的《JAVA与模式》一书中开头是这样描述单例模式的： 
　　作为对象的创建模式，单例模式确保某一个类只有一个实例，而且自行实例化并向整个系统提供这个实例。这个类称为单例类。  单例模式的结构
  
　　单例模式的特点： 
 
 单例类只能有一个实例。 
 单例类必须自己创建自己的唯一实例。 
 单例类必须给所有其他对象提供这一实例。 
 　　饿汉式单例类 
  
publ</div>
                                </li>
                                <li><a href="/article/2320.htm"
                                       title="javascript取当月最后一天" target="_blank">javascript取当月最后一天</a>
                                    <span class="text-muted">ctrain</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div>
<!--javascript取当月最后一天-->
<script   language=javascript>  
  var current = new Date();
  var year = current.getYear();
  var month = current.getMonth();
  showMonthLastDay(year, mont</div>
                                </li>
                                <li><a href="/article/2447.htm"
                                       title="linux tune2fs命令详解" target="_blank">linux tune2fs命令详解</a>
                                    <span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/tune2fs/1.htm">tune2fs</a><a class="tag" taget="_blank" href="/search/%E6%9F%A5%E7%9C%8B%E7%B3%BB%E7%BB%9F%E6%96%87%E4%BB%B6%E5%9D%97%E4%BF%A1%E6%81%AF/1.htm">查看系统文件块信息</a>
                                    <div>一.简介： 
tune2fs是调整和查看ext2/ext3文件系统的文件系统参数，Windows下面如果出现意外断电死机情况，下次开机一般都会出现系统自检。Linux系统下面也有文件系统自检，而且是可以通过tune2fs命令，自行定义自检周期及方式。 
二.用法： 
Usage: tune2fs [-c max_mounts_count] [-e errors_behavior] [-g grou</div>
                                </li>
                                <li><a href="/article/2574.htm"
                                       title="做有中国特色的程序员" target="_blank">做有中国特色的程序员</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E5%91%98/1.htm">程序员</a>
                                    <div>  
从出版业说起  网络作品排到靠前的，都不会太难看，一般人不爱看某部作品也是因为不喜欢这个类型，而此人也不会全不喜欢这些网络作品。究其原因，是因为网络作品都是让人先白看的，看的好了才出了头。而纸质作品就不一定了，排行榜靠前的，有好作品，也有垃圾。   许多大牛都是写了博客，后来出了书。这些书也都不次，可能有人让为不好，是因为技术书不像小说，小说在读故事，技术书是在学知识或温习知识，有</div>
                                </li>
                                <li><a href="/article/2701.htm"
                                       title="Android：TextView属性大全" target="_blank">Android：TextView属性大全</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/textview/1.htm">textview</a>
                                    <div>android:autoLink    设置是否当文本为URL链接/email/电话号码/map时，文本显示为可点击的链接。可选值(none/web/email/phone/map/all)  android:autoText    如果设置，将自动执行输入值的拼写纠正。此处无效果，在显示输入法并输</div>
                                </li>
                                <li><a href="/article/2828.htm"
                                       title="tomcat虚拟目录安装及其配置" target="_blank">tomcat虚拟目录安装及其配置</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/tomcat%E9%85%8D%E7%BD%AE%E8%AF%B4%E6%98%8E/1.htm">tomcat配置说明</a><a class="tag" taget="_blank" href="/search/tomca%E9%83%A8%E7%BD%B2web%E5%BA%94%E7%94%A8/1.htm">tomca部署web应用</a><a class="tag" taget="_blank" href="/search/tomcat%E8%99%9A%E6%8B%9F%E7%9B%AE%E5%BD%95%E5%AE%89%E8%A3%85/1.htm">tomcat虚拟目录安装</a>
                                    <div>转载请出自出处：http://eksliang.iteye.com/blog/2097184 
1.-------------------------------------------tomcat  目录结构 
 
 config：存放tomcat的配置文件 
 temp  ：存放tomcat跑起来后存放临时文件用的 
 work   ： 当第一次访问应用中的jsp</div>
                                </li>
                                <li><a href="/article/2955.htm"
                                       title="浅谈：APP有哪些常被黑客利用的安全漏洞" target="_blank">浅谈：APP有哪些常被黑客利用的安全漏洞</a>
                                    <span class="text-muted">gg163</span>
<a class="tag" taget="_blank" href="/search/APP/1.htm">APP</a>
                                    <div>首先，说到APP的安全漏洞，身为程序猿的大家应该不陌生；如果抛开安卓自身开源的问题的话，其主要产生的原因就是开发过程中疏忽或者代码不严谨引起的。但这些责任也不能怪在程序猿头上，有时会因为BOSS时间催得紧等很多可观原因。由国内移动应用安全检测团队爱内测（ineice.com）的CTO给我们浅谈关于Android 系统的开源设计以及生态环境。 
1. 应用反编译漏洞：APK 包非常容易被反编译成可读</div>
                                </li>
                                <li><a href="/article/3082.htm"
                                       title="C#根据网址生成静态页面" target="_blank">C#根据网址生成静态页面</a>
                                    <span class="text-muted">hvt</span>
<a class="tag" taget="_blank" href="/search/Web/1.htm">Web</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/asp.net/1.htm">asp.net</a><a class="tag" taget="_blank" href="/search/hovertree/1.htm">hovertree</a>
                                    <div>HoverTree开源项目中HoverTreeWeb.HVTPanel的Index.aspx文件是后台管理的首页。包含生成留言板首页，以及显示用户名，退出等功能。根据网址生成页面的方法： 
  
bool CreateHtmlFile(string url, string path)
{ 
//http://keleyi.com/a/bjae/3d10wfax.htm

stri</div>
                                </li>
                                <li><a href="/article/3209.htm"
                                       title="SVG 教程 （一）" target="_blank">SVG 教程 （一）</a>
                                    <span class="text-muted">天梯梦</span>
<a class="tag" taget="_blank" href="/search/svg/1.htm">svg</a>
                                    <div>SVG 简介   
SVG 是使用 XML 来描述二维图形和绘图程序的语言。  学习之前应具备的基础知识： 
继续学习之前，你应该对以下内容有基本的了解： 
 
 HTML 
 XML 基础 
 
如果希望首先学习这些内容，请在本站的首页选择相应的教程。  什么是SVG？ 
 
 SVG 指可伸缩矢量图形 (Scalable Vector Graphics) 
 SVG 用来定义用于网络的基于矢量</div>
                                </li>
                                <li><a href="/article/3336.htm"
                                       title="一个简单的java栈" target="_blank">一个简单的java栈</a>
                                    <span class="text-muted">luyulong</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a><a class="tag" taget="_blank" href="/search/%E6%A0%88/1.htm">栈</a>
                                    <div>
public class MyStack {
	private long[] arr;

	private int top;

	public MyStack() {
		arr = new long[10];
		top = -1;
	}

	public MyStack(int maxsize) {
		arr = new long[maxsize];
		top </div>
                                </li>
                                <li><a href="/article/3463.htm"
                                       title="基础数据结构和算法八：Binary search" target="_blank">基础数据结构和算法八：Binary search</a>
                                    <span class="text-muted">sunwinner</span>
<a class="tag" taget="_blank" href="/search/Algorithm/1.htm">Algorithm</a><a class="tag" taget="_blank" href="/search/Binary+search/1.htm">Binary search</a>
                                    <div>Binary search needs an ordered array so that it can use array indexing to dramatically reduce the number of compares required for each search, using the classic and venerable binary search algori</div>
                                </li>
                                <li><a href="/article/3590.htm"
                                       title="12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！" target="_blank">12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！</a>
                                    <span class="text-muted">刘星宇</span>
<a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a>
                                    <div>12个C语言面试题，涉及指针、进程、运算、结构体、函数、内存，看看你能做出几个！ 
1.gets()函数 
问：请找出下面代码里的问题： 
#include<stdio.h> 
int main(void) 
{ 
    char buff[10]; 
    memset(buff,0,sizeof(buff)); 
 
</div>
                                </li>
                                <li><a href="/article/3717.htm"
                                       title="ITeye 7月技术图书有奖试读获奖名单公布" target="_blank">ITeye 7月技术图书有奖试读获奖名单公布</a>
                                    <span class="text-muted">ITeye管理员</span>
<a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/ITeye/1.htm">ITeye</a><a class="tag" taget="_blank" href="/search/%E8%AF%95%E8%AF%BB/1.htm">试读</a>
                                    <div>ITeye携手人民邮电出版社图灵教育共同举办的7月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 
 
 
7月试读活动回顾： 
http://webmaster.iteye.com/blog/2092746 
 
 
本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）： 
 
 
《Java性能优化权威指南》 
 
 </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>