第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例

传奇开心果博文系列

  • 文章目录
    • Ant Design Mobile of React 开发移动应用示例博文系列
      • 第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始
      • 第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用
      • 第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪
      • 第四篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:数据存储的七种类型讲解和示例
      • 第五篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:基础页面制作介绍和示例代码
      • 第六篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:UI框架39个组件集中讲解和示例代码
      • 第七篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:安装配置node和npm避坑攻略
      • 第八篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:打包上架部署云服务托管等后期工作
      • 第九篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:使用内置组件实现响应式设计
      • 第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例
        • 前言
        • 一、会用到React相关的基础知识
        • 二、会用到HTML、CSS和JavaScript基础知识
        • 三、会用到Ant Design Mobile组件相关基础知识
        • 四、会用到到响应式设计相关基础知识
        • 五、会用到使用移动开发工具来环境配置、管理项目依赖、构建和打包等相关基础知识
        • 六、会用到使用不同的方式与后端服务进行数据交互,例如使用RESTful API、Ajax等进行数据请求和响应处理相关基础知识
        • 七、会用到调试、测试、定位、解决应用中出现的问题和bug相关基础知识
        • 八、会用到性能优化提升应用的加载速度和用户体验相关基础知识

文章目录

Ant Design Mobile of React 开发移动应用示例博文系列

第一篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:从helloworld开始

第二篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:天气应用

第三篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:健身追踪

第四篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:数据存储的七种类型讲解和示例

第五篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:基础页面制作介绍和示例代码

第六篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:UI框架39个组件集中讲解和示例代码

第七篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:安装配置node和npm避坑攻略

第八篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:打包上架部署云服务托管等后期工作

第九篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:使用内置组件实现响应式设计

第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例

前言

开发移动应用涉及到Ant Design Mobile时,您需要掌握以下相关方面的知识:

  1. React框架:Ant Design Mobile是基于React框架的UI组件库,因此需要熟悉React的基本概念和使用方法,如组件、状态管理、生命周期等。

  2. 前端开发基础:了解HTML、CSS和JavaScript等前端基础知识,掌握DOM操作、样式布局和事件处理等技能。

  3. Ant Design Mobile组件:详细了解Ant Design Mobile提供的各种移动端UI组件,包括按钮、表单、导航栏、列表等。理解这些组件的用法、属性和事件,能够正确地使用和定制它们来构建移动应用界面。

  4. 响应式设计:移动应用需要适配不同屏幕尺寸和设备,了解响应式设计的原理和实践,能够编写适应不同屏幕的布局和样式。

  5. 移动端开发工具:熟悉移动应用开发所使用的工具和环境,如Webpack、Babel等,能够配置和管理项目的依赖、构建和打包。

  6. 移动端网络通信:了解移动应用与后端服务之间的数据交互方式,如使用RESTful API、Ajax等进行数据请求和响应处理。

  7. 移动应用调试和测试:掌握移动应用调试和测试的方法和工具,能够定位和解决移动应用中出现的问题和bug。

  8. 移动端性能优化:了解移动应用性能优化的基本原则和技巧,如减少HTTP请求、图片优化、代码压缩等,以提升应用的加载速度和用户体验。

以上是开发移动应用涉及到Ant Design Mobile时的一些基本知识要求。当然,具体的开发需求和项目情况可能会有所不同,您可能还需要深入学习其他相关知识来满足实际的开发需求。

一、会用到React相关的基础知识

第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第1张图片1. 创建React组件示例代码:

import React from 'react';

const MyComponent = () => {
  return (
    

Hello, Ant Design Mobile!

); }; export default MyComponent;

在上述示例代码中,我们使用import React from 'react';语句引入React库,然后创建了一个简单的函数式组件MyComponent。在组件中,使用JSX语法定义了一个包含标题的

元素,并在返回语句中返回该元素。

  1. 使用组件示例代码:
import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(, document.getElementById('app'));

在上述示例代码中,我们使用import语句引入React和ReactDOM库,并导入了之前创建的MyComponent组件。然后,使用ReactDOM.render方法将MyComponent组件渲染到指定的DOM元素上,通过document.getElementById('app')获取到容器元素的引用。

  1. 使用props传递数据示例代码:
import React from 'react';

const Greeting = (props) => {
  return (
    

Hello, {props.name}!

); }; export default Greeting;

在上述示例代码中,我们定义了一个名为Greeting的函数式组件,并通过参数props接收传递过来的数据。在组件中,使用props.name来获取传递的name属性,并在标题中显示出来。

  1. 使用状态管理示例代码:
import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    

Counter: {count}

); }; export default Counter;

在上述示例代码中,我们使用useState钩子函数来定义了一个状态变量count和一个更新该状态的函数setCount。在组件中,通过count来展示当前计数值,并通过点击按钮触发increment函数来增加计数值。

这些示例代码展示了在Ant Design Mobile开发中所用到的React相关的基础知识的应用。通过灵活运用这些知识,你可以构建出更加复杂、交互性更强的Ant Design Mobile前端应用程序。

二、会用到HTML、CSS和JavaScript基础知识

在Ant Design Mobile开发中,你会用到以下HTML、CSS和JavaScript基础知识。下面是一些示例代码来演示它们的应用:

第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第2张图片1. HTML基础知识示例代码:

DOCTYPE html>
<html>
<head>
  <title>Ant Design Mobiletitle>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
head>
<body>
  <h1>Welcome to Ant Design Mobileh1>
  <div id="app">div>
body>
html>

在上述示例代码中,我们使用了HTML标签来创建一个简单的页面结构。通过</code>标签设置页面标题,<code><meta></code>标签设置字符编码和视口,<code><h1></code>标签创建一个标题,<code><div></code>标签创建一个容器用于渲染Ant Design Mobile组件。</p> <ol start="2"> <li>CSS基础知识示例代码:</li> </ol> <pre><code class="prism language-css"><span class="token selector">h1</span> <span class="token punctuation">{</span> <span class="token property">color</span><span class="token punctuation">:</span> #ff0000<span class="token punctuation">;</span> <span class="token property">font-size</span><span class="token punctuation">:</span> 24px<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">#app</span> <span class="token punctuation">{</span> <span class="token property">background-color</span><span class="token punctuation">:</span> #f0f0f0<span class="token punctuation">;</span> <span class="token property">padding</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <p>在上述示例代码中,我们使用CSS样式来设置HTML元素的外观。通过选择器和属性值,我们可以设置标题的颜色和字体大小,设置容器的背景颜色和内边距。</p> <ol start="3"> <li>JavaScript基础知识示例代码:</li> </ol> <pre><code class="prism language-javascript"><span class="token keyword">import</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> ReactDOM <span class="token keyword">from</span> <span class="token string">'react-dom'</span><span class="token punctuation">;</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> Button <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'antd-mobile'</span><span class="token punctuation">;</span> <span class="token keyword">const</span> <span class="token function-variable function">App</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token keyword">const</span> <span class="token function-variable function">handleClick</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">alert</span><span class="token punctuation">(</span><span class="token string">'Hello, Ant Design Mobile!'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token keyword">return</span> <span class="token punctuation">(</span> <span class="token operator"><</span>div<span class="token operator">></span> <span class="token operator"><</span>h1<span class="token operator">></span>Welcome to Ant Design Mobile<span class="token operator"><</span><span class="token operator">/</span>h1<span class="token operator">></span> <span class="token operator"><</span>Button type<span class="token operator">=</span><span class="token string">"primary"</span> onClick<span class="token operator">=</span><span class="token punctuation">{</span>handleClick<span class="token punctuation">}</span><span class="token operator">></span>Click Me<span class="token operator"><</span><span class="token operator">/</span>Button<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> ReactDOM<span class="token punctuation">.</span><span class="token function">render</span><span class="token punctuation">(</span><span class="token operator"><</span>App <span class="token operator">/</span><span class="token operator">></span><span class="token punctuation">,</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">'app'</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>在上述示例代码中,我们使用JavaScript来创建一个React组件。通过导入React和ReactDOM库,我们可以使用JSX语法创建组件,并使用Ant Design Mobile的Button组件。定义了一个点击事件处理函数,在点击按钮时弹出一个提示框。最后,使用ReactDOM.render将组件渲染到指定的DOM元素上。</p> <p>这些示例代码展示了在Ant Design Mobile开发中所用到的HTML、CSS和JavaScript基础知识的应用。通过灵活运用这些知识,你可以构建出更加丰富、交互性更强的Ant Design Mobile前端应用程序。</p> <h5>三、会用到Ant Design Mobile组件相关基础知识</h5> <p>在Ant Design Mobile开发中,你会用到一些Ant Design Mobile组件相关的基础知识。下面是一些示例代码来演示它们的应用:</p> <p><a href="http://img.e-com-net.com/image/info8/7c5daea695204cabab121dbbbb7f504e.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/7c5daea695204cabab121dbbbb7f504e.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第3张图片" width="650" height="571" style="border:1px solid black;"></a>1. Button按钮组件示例代码:</p> <pre><code class="prism language-jsx">import React from 'react'; import { Button } from 'antd-mobile'; const MyButton = () => { const handleClick = () => { alert('Button clicked!'); }; return ( <Button type="primary" onClick={handleClick}>Click Me</Button> ); }; export default MyButton; </code></pre> <p>在上述示例代码中,我们使用<code>import { Button } from 'antd-mobile';</code>语句引入Ant Design Mobile的Button组件。然后,我们创建了一个自定义的函数式组件<code>MyButton</code>,在组件中使用<code><Button></code>标签来创建一个按钮,并通过<code>type="primary"</code>属性设置按钮样式为主要按钮。同时,我们定义了一个点击事件处理函数<code>handleClick</code>,当按钮被点击时弹出一个提示框。</p> <ol start="2"> <li>List列表组件示例代码:</li> </ol> <pre><code class="prism language-jsx">import React from 'react'; import { List } from 'antd-mobile'; const MyList = () => { return ( <List> <List.Item>Item 1</List.Item> <List.Item>Item 2</List.Item> <List.Item>Item 3</List.Item> </List> ); }; export default MyList; </code></pre> <p>在上述示例代码中,我们使用<code>import { List } from 'antd-mobile';</code>语句引入Ant Design Mobile的List组件。然后,我们创建了一个自定义的函数式组件<code>MyList</code>,在组件中使用<code><List></code>标签来创建一个列表,并在列表中使用多个<code><List.Item></code>标签来创建列表项。</p> <ol start="3"> <li>Flex弹性布局组件示例代码:</li> </ol> <pre><code class="prism language-jsx">import React from 'react'; import { Flex } from 'antd-mobile'; const MyFlex = () => { return ( <Flex> <Flex.Item>Item 1</Flex.Item> <Flex.Item>Item 2</Flex.Item> <Flex.Item>Item 3</Flex.Item> </Flex> ); }; export default MyFlex; </code></pre> <p>在上述示例代码中,我们使用<code>import { Flex } from 'antd-mobile';</code>语句引入Ant Design Mobile的Flex组件。然后,我们创建了一个自定义的函数式组件<code>MyFlex</code>,在组件中使用<code><Flex></code>标签来创建一个弹性布局容器,并在容器中使用多个<code><Flex.Item></code>标签来创建布局项。</p> <p>这些示例代码展示了在Ant Design Mobile开发中所用到的一些组件相关的基础知识的应用。通过灵活运用这些知识,你可以构建出更加丰富、交互性更强的Ant Design Mobile前端应用程序。</p> <h5>四、会用到到响应式设计相关基础知识</h5> <p>在开发Ant Design Mobile应用程序时,你会用到一些响应式设计相关的基础知识。以下是一些示例代码,演示了这些知识的应用:</p> <p><a href="http://img.e-com-net.com/image/info8/96f2435f85b8488c8b5ae95a0fc44923.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/96f2435f85b8488c8b5ae95a0fc44923.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第4张图片" width="650" height="366" style="border:1px solid black;"></a>1. 使用媒体查询示例代码:</p> <pre><code class="prism language-css"><span class="token selector">.container</span> <span class="token punctuation">{</span> <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span> <span class="token property">flex-wrap</span><span class="token punctuation">:</span> wrap<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token selector">.item</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 768px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.item</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token atrule"><span class="token rule">@media</span> screen <span class="token keyword">and</span> <span class="token punctuation">(</span><span class="token property">min-width</span><span class="token punctuation">:</span> 1200px<span class="token punctuation">)</span></span> <span class="token punctuation">{</span> <span class="token selector">.item</span> <span class="token punctuation">{</span> <span class="token property">width</span><span class="token punctuation">:</span> 33.33%<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>在上述示例代码中,我们使用CSS的媒体查询来实现响应式布局。在默认情况下,<code>.item</code>元素的宽度设置为100%。当屏幕宽度达到768px时,媒体查询将应用,<code>.item</code>元素的宽度设置为50%。当屏幕宽度达到1200px时,另一个媒体查询将应用,<code>.item</code>元素的宽度设置为33.33%。通过这种方式,我们可以根据不同的屏幕尺寸设置不同的样式,实现响应式布局。</p> <ol start="2"> <li>使用Flex布局示例代码:</li> </ol> <pre><code class="prism language-jsx">import React from 'react'; import { Flex } from 'antd-mobile'; const MyComponent = () => { return ( <Flex wrap="wrap" justify="center" align="center"> <Flex.Item>Item 1</Flex.Item> <Flex.Item>Item 2</Flex.Item> <Flex.Item>Item 3</Flex.Item> </Flex> ); }; export default MyComponent; </code></pre> <p>在上述示例代码中,我们使用Ant Design Mobile的Flex组件来实现响应式布局。通过设置<code>wrap="wrap"</code>属性,当需要换行时,元素将自动换行。通过设置<code>justify="center"</code>属性,元素在主轴上居中对齐。通过设置<code>align="center"</code>属性,元素在交叉轴上居中对齐。这样,无论屏幕尺寸如何变化,元素都能够自适应地排列和对齐。</p> <ol start="3"> <li>使用Grid网格布局示例代码:</li> </ol> <pre><code class="prism language-jsx">import React from 'react'; import { Grid } from 'antd-mobile'; const MyComponent = () => { const data = Array.from({ length: 6 }).map((_, index) => ({ icon: `icon-${index}`, text: `Item ${index + 1}`, })); return ( <Grid data={data} columnNum={3} /> ); }; export default MyComponent; </code></pre> <p>在上述示例代码中,我们使用Ant Design Mobile的Grid组件来实现响应式网格布局。通过传递一个数据数组给<code>data</code>属性,我们可以自动生成网格项。通过设置<code>columnNum={3}</code>属性,每行显示3列。这样,不论屏幕尺寸如何变化,网格布局都能够自适应地展示。</p> <p>这些示例代码展示了在Ant Design Mobile开发中所用到的一些响应式设计相关的基础知识的应用。通过灵活运用这些知识,你可以构建出适应不同屏幕尺寸和设备的响应式Ant Design Mobile前端应用程序。</p> <h5>五、会用到使用移动开发工具来环境配置、管理项目依赖、构建和打包等相关基础知识</h5> <p>在移动应用开发中,你会用到一些工具和环境来配置和管理项目的依赖、构建和打包。以下是一些基础知识示例代码,演示了这些工具的应用:</p> <p><a href="http://img.e-com-net.com/image/info8/a4ed6dc5fbed45d1b48bca405a272b0d.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a4ed6dc5fbed45d1b48bca405a272b0d.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第5张图片" width="650" height="338" style="border:1px solid black;"></a>1. 使用Webpack进行项目构建示例代码:</p> <p>首先,确保已经全局安装了Webpack和Webpack CLI:</p> <pre><code class="prism language-bash"><span class="token function">npm</span> <span class="token function">install</span> <span class="token parameter variable">-g</span> webpack webpack-cli </code></pre> <p>然后,在项目根目录下创建一个<code>webpack.config.js</code>文件,配置Webpack的相关设置:</p> <pre><code class="prism language-javascript"><span class="token keyword">const</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> module<span class="token punctuation">.</span>exports <span class="token operator">=</span> <span class="token punctuation">{</span> <span class="token literal-property property">entry</span><span class="token operator">:</span> <span class="token string">'./src/index.js'</span><span class="token punctuation">,</span> <span class="token literal-property property">output</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">path</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'dist'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token literal-property property">filename</span><span class="token operator">:</span> <span class="token string">'bundle.js'</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(js|jsx)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'babel-loader'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.css$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'style-loader'</span><span class="token punctuation">,</span> <span class="token string">'css-loader'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token literal-property property">resolve</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">extensions</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'.js'</span><span class="token punctuation">,</span> <span class="token string">'.jsx'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> </code></pre> <p>在上述示例代码中,我们配置了Webpack的入口文件和输出文件路径。同时,我们使用<code>module.rules</code>配置了Babel和CSS加载器,以便处理JavaScript和CSS文件。最后,使用<code>resolve.extensions</code>配置了可以省略的文件扩展名。</p> <p><a href="http://img.e-com-net.com/image/info8/a33ac547b6e346e8a60744aa50262128.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/a33ac547b6e346e8a60744aa50262128.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第6张图片" width="650" height="325" style="border:1px solid black;"></a>2. 使用Babel进行JavaScript代码转换示例代码:</p> <p>首先,确保已经安装了Babel和相关插件:</p> <pre><code class="prism language-bash"><span class="token function">npm</span> <span class="token function">install</span> --save-dev @babel/core @babel/preset-env babel-loader </code></pre> <p>然后,在Webpack配置文件中添加对Babel的配置:</p> <pre><code class="prism language-javascript"><span class="token literal-property property">module</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token literal-property property">rules</span><span class="token operator">:</span> <span class="token punctuation">[</span> <span class="token punctuation">{</span> <span class="token literal-property property">test</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\.(js|jsx)$</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token literal-property property">exclude</span><span class="token operator">:</span> <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">node_modules</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token literal-property property">use</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">'babel-loader'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> </code></pre> <p>在项目根目录下创建一个<code>.babelrc</code>文件,配置Babel的预设:</p> <pre><code class="prism language-json"><span class="token punctuation">{</span> <span class="token string-property property">"presets"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"@babel/preset-env"</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> </code></pre> <p>这样,Webpack将会使用Babel加载器来处理JavaScript文件,通过Babel的预设将ES6+代码转换为浏览器可兼容的代码。</p> <ol start="3"> <li>使用npm进行依赖管理示例代码:</li> </ol> <p>在项目根目录下的<code>package.json</code>文件中,可以添加和管理项目的依赖:</p> <pre><code class="prism language-json"><span class="token punctuation">{</span> <span class="token string-property property">"name"</span><span class="token operator">:</span> <span class="token string">"my-app"</span><span class="token punctuation">,</span> <span class="token string-property property">"version"</span><span class="token operator">:</span> <span class="token string">"1.0.0"</span><span class="token punctuation">,</span> <span class="token string-property property">"dependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"react"</span><span class="token operator">:</span> <span class="token string">"^17.0.1"</span><span class="token punctuation">,</span> <span class="token string-property property">"react-dom"</span><span class="token operator">:</span> <span class="token string">"^17.0.1"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token string-property property">"devDependencies"</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token string-property property">"webpack"</span><span class="token operator">:</span> <span class="token string">"^5.10.0"</span><span class="token punctuation">,</span> <span class="token string-property property">"webpack-cli"</span><span class="token operator">:</span> <span class="token string">"^4.2.0"</span><span class="token punctuation">,</span> <span class="token string-property property">"babel-loader"</span><span class="token operator">:</span> <span class="token string">"^8.2.2"</span><span class="token punctuation">,</span> <span class="token string-property property">"@babel/core"</span><span class="token operator">:</span> <span class="token string">"^7.12.3"</span><span class="token punctuation">,</span> <span class="token string-property property">"@babel/preset-env"</span><span class="token operator">:</span> <span class="token string">"^7.12.1"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> </code></pre> <p>在上述示例代码中,我们可以在<code>dependencies</code>中添加生产环境依赖,例如React和ReactDOM。在<code>devDependencies</code>中添加开发环境依赖,例如Webpack、Webpack CLI、Babel Loader和Babel相关插件。通过运行<code>npm install</code>命令,可以安装并管理项目的依赖。</p> <p>这些示例代码展示了在移动端开发中所用到的一些工具和环境的基础知识的应用。通过灵活运用这些工具,你可以配置和管理项目的依赖、构建和打包,以满足移动应用开发的需求。</p> <h5>六、会用到使用不同的方式与后端服务进行数据交互,例如使用RESTful API、Ajax等进行数据请求和响应处理相关基础知识</h5> <p>在移动应用开发中,你会使用不同的方式与后端服务进行数据交互,例如使用RESTful API、Ajax等进行数据请求和响应处理。以下是一些基础知识示例代码,演示了这些数据交互方式的应用:</p> <p><a href="http://img.e-com-net.com/image/info8/db7e218a5af34503a8d6600424a53bf3.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/db7e218a5af34503a8d6600424a53bf3.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第7张图片" width="650" height="304" style="border:1px solid black;"></a>1. 使用RESTful API进行数据请求示例代码:</p> <pre><code class="prism language-javascript"><span class="token keyword">import</span> axios <span class="token keyword">from</span> <span class="token string">'axios'</span><span class="token punctuation">;</span> <span class="token comment">// 发送GET请求</span> axios<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">'/api/users'</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 发送POST请求</span> axios<span class="token punctuation">.</span><span class="token function">post</span><span class="token punctuation">(</span><span class="token string">'/api/users'</span><span class="token punctuation">,</span> <span class="token punctuation">{</span> <span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">'John'</span><span class="token punctuation">,</span> <span class="token literal-property property">age</span><span class="token operator">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token parameter">response</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>response<span class="token punctuation">.</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">catch</span><span class="token punctuation">(</span><span class="token parameter">error</span> <span class="token operator">=></span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>在上述示例代码中,我们使用axios库来发送HTTP请求。通过调用<code>axios.get</code>方法可以发送GET请求,传递请求的URL作为参数。通过调用<code>axios.post</code>方法可以发送POST请求,传递请求的URL和请求体作为参数。使用<code>.then</code>方法处理请求成功的响应,使用<code>.catch</code>方法处理请求失败的错误。</p> <p><a href="http://img.e-com-net.com/image/info8/0d6d164a5a434e29a452cabb334e6f5a.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/0d6d164a5a434e29a452cabb334e6f5a.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第8张图片" width="650" height="361" style="border:1px solid black;"></a>2. 使用Ajax进行数据请求示例代码:</p> <pre><code class="prism language-javascript"><span class="token keyword">const</span> xhr <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span><span class="token string">'GET'</span><span class="token punctuation">,</span> <span class="token string">'/api/users'</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> xhr<span class="token punctuation">.</span><span class="token function-variable function">onreadystatechange</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">===</span> XMLHttpRequest<span class="token punctuation">.</span><span class="token constant">DONE</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>status <span class="token operator">===</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span> console<span class="token punctuation">.</span><span class="token function">error</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>statusText<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>在上述示例代码中,我们使用XMLHttpRequest对象来发送HTTP请求。通过调用<code>xhr.open</code>方法设置请求的方法、URL和异步标志。通过设置<code>xhr.onreadystatechange</code>事件处理函数来监听请求状态的变化。当请求状态变为<code>XMLHttpRequest.DONE</code>时,可以通过<code>xhr.status</code>获取响应的状态码,通过<code>xhr.responseText</code>获取响应的文本数据。</p> <p>这些示例代码展示了在移动应用开发中所用到的一些数据交互方式的基础知识的应用。通过灵活运用这些方式,你可以与后端服务进行数据请求和响应处理,实现移动应用与后端服务之间的数据交互。</p> <h5>七、会用到调试、测试、定位、解决应用中出现的问题和bug相关基础知识</h5> <p>在移动应用开发中,调试和测试是非常重要的环节,可以帮助你定位和解决应用中出现的问题和bug。以下是一些基础知识示例代码,演示了一些常用的移动应用调试和测试方法和工具:</p> <p><a href="http://img.e-com-net.com/image/info8/e9f4b9ee5dca474fb037491e40ca9b04.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/e9f4b9ee5dca474fb037491e40ca9b04.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第9张图片" width="650" height="637" style="border:1px solid black;"></a>(一)使用Chrome开发者工具进行移动应用调试示例代码:</p> <p>将移动设备连接到电脑上,并打开Chrome浏览器。</p> <ol> <li> <p>打开开发者工具:在Chrome浏览器中,按下<code>Ctrl + Shift + I</code>(Windows)或<code>Command + Option + I</code>(Mac)打开开发者工具。</p> </li> <li> <p>切换到移动设备模式:在开发者工具窗口的左上角,点击手机图标按钮,进入移动设备模式。</p> </li> <li> <p>选择移动设备:在开发者工具窗口的顶部,点击设备选择框,选择你要模拟的移动设备。</p> </li> <li> <p>调试移动应用:在开发者工具中,可以使用各种调试工具和功能,例如查看元素、调试JavaScript代码、监控网络请求等,来定位和解决移动应用中的问题和bug。</p> </li> </ol> <p><a href="http://img.e-com-net.com/image/info8/3ed7f1892fbc4acf95e8047e541280b7.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/3ed7f1892fbc4acf95e8047e541280b7.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第10张图片" width="650" height="387" style="border:1px solid black;"></a>(二)使用移动端调试工具进行移动应用调试示例代码:</p> <p>对于移动应用的调试,你可以使用一些专门的移动端调试工具,例如:</p> <ul> <li> <p>Android Studio:适用于Android应用的集成开发环境,提供了丰富的调试工具和功能,例如Logcat日志查看器、调试器等。</p> </li> <li> <p>Xcode:适用于iOS应用的集成开发环境,提供了强大的调试工具和功能,例如调试器、Instruments性能分析器等。</p> </li> </ul> <p>通过使用这些移动端调试工具,你可以在真实设备或模拟器上进行应用调试,查看日志、检查变量、跟踪代码执行流程等,以便定位和解决移动应用中的问题和bug。</p> <p>(三)使用单元测试和集成测试进行移动应用测试示例代码:</p> <p>在移动应用开发中,你可以使用单元测试和集成测试来验证应用的各个部分是否按照预期工作。以下是一个基于Jest测试框架的单元测试示例代码:</p> <pre><code class="prism language-javascript"><span class="token comment">// calculator.js</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">+</span> b<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">export</span> <span class="token keyword">function</span> <span class="token function">subtract</span><span class="token punctuation">(</span><span class="token parameter">a<span class="token punctuation">,</span> b</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token keyword">return</span> a <span class="token operator">-</span> b<span class="token punctuation">;</span> <span class="token punctuation">}</span> </code></pre> <pre><code class="prism language-javascript"><span class="token comment">// calculator.test.js</span> <span class="token keyword">import</span> <span class="token punctuation">{</span> add<span class="token punctuation">,</span> subtract <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'./calculator'</span><span class="token punctuation">;</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'add function should add two numbers correctly'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">expect</span><span class="token punctuation">(</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">,</span> <span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token function">test</span><span class="token punctuation">(</span><span class="token string">'subtract function should subtract two numbers correctly'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span> <span class="token function">expect</span><span class="token punctuation">(</span><span class="token function">subtract</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">,</span> <span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toBe</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> </code></pre> <p>在上述示例代码中,我们定义了一个<code>calculator.js</code>文件,其中导出了<code>add</code>和<code>subtract</code>两个函数。然后,我们创建了一个<code>calculator.test.js</code>文件,在该文件中编写了针对<code>add</code>和<code>subtract</code>函数的单元测试。通过运行测试命令(例如<code>npm test</code>),可以执行这些测试并查看测试结果。</p> <p>这些示例代码展示了在移动应用开发中所用到的一些调试和测试的基础知识的应用。通过灵活运用这些方法和工具,你可以定位和解决移动应用中出现的问题和bug,并确保应用的质量和稳定性。</p> <h5>八、会用到性能优化提升应用的加载速度和用户体验相关基础知识</h5> <p>在移动应用开发中,性能优化是非常重要的,可以提升应用的加载速度和用户体验。以下是一些基本原则和技巧,可以帮助你进行移动应用性能优化:</p> <p><a href="http://img.e-com-net.com/image/info8/8d258c1a15f343bb81f8aba45c887022.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/8d258c1a15f343bb81f8aba45c887022.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第11张图片" width="400" height="285" style="border:1px solid black;"></a>1. 减少HTTP请求:</p> <ul> <li>合并文件:将多个CSS或JavaScript文件合并为一个,减少HTTP请求的数量。</li> <li>使用雪碧图:将多个小图标合并为一个大图,通过CSS的背景定位来显示不同的图标,减少HTTP请求的数量。</li> <li>使用字体图标:使用字体图标代替图像图标,减少HTTP请求的数量。</li> </ul> <ol start="2"> <li>图片优化:</li> </ol> <ul> <li>压缩图片:使用工具(例如ImageOptim、TinyPNG)压缩图片文件大小,减少下载时间。</li> <li>使用适当的图像格式:选择合适的图像格式,例如JPEG、PNG或WebP,以在图像质量和文件大小之间取得平衡。</li> </ul> <ol start="3"> <li>代码压缩和合并:</li> </ol> <ul> <li>压缩CSS和JavaScript代码:使用工具(例如UglifyJS、Terser)压缩代码文件大小,减少下载时间。</li> <li>合并CSS和JavaScript文件:将多个CSS或JavaScript文件合并为一个,减少HTTP请求的数量。</li> </ul> <p><a href="http://img.e-com-net.com/image/info8/321e263edc624a3b9d6507461f8148d1.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/321e263edc624a3b9d6507461f8148d1.jpg" alt="第十篇【传奇开心果系列】Ant Design Mobile of React 开发移动应用:涉及到的相关基础知识介绍和示例_第12张图片" width="337" height="299" style="border:1px solid black;"></a>4. 延迟加载和懒加载:</p> <ul> <li>延迟加载:延迟加载某些资源,例如图片、JavaScript库,直到它们真正需要时再加载。</li> <li>懒加载:只在用户滚动到可见区域时加载特定的内容,例如图片或其他资源。</li> </ul> <ol start="5"> <li>缓存机制:</li> </ol> <ul> <li>使用浏览器缓存:通过设置适当的HTTP响应头来启用浏览器缓存,减少重复的网络请求。</li> <li>使用缓存策略:将不经常变化的资源(例如静态文件)设置为永久缓存,将动态内容设置为可缓存但有限时间的缓存。</li> </ul> <ol start="6"> <li>DOM操作和重绘优化:</li> </ol> <ul> <li>减少DOM操作:减少对DOM的频繁操作,因为DOM操作是昂贵的,会引起重排和重绘。</li> <li>使用CSS动画:使用CSS动画代替JavaScript动画,因为CSS动画通常更高效。</li> </ul> <p>这些是一些基本的移动应用性能优化原则和技巧。通过遵循这些原则和运用这些技巧,你可以提升移动应用的加载速度和用户体验,使应用更加高效和流畅。</p> </div> </div> </div> </div> </div> <!--PC和WAP自适应版--> <div id="SOHUCS" sid="1748554150322388992"></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">你可能感兴趣的:(Ant,Design,Mobile,of,React,示例,react.js,javascript,前端框架,ui,node.js)</h4> <div id="paradigm-article-related"> <div class="recommend-post mb30"> <ul class="widget-links"> <li><a href="/article/1835513551142350848.htm" title="OC语言多界面传值五大方式" target="_blank">OC语言多界面传值五大方式</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ios/1.htm">ios</a><a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/objective-c/1.htm">objective-c</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>前言在完成暑假仿写项目时,遇到了许多需要用到多界面传值的地方,这篇博客来总结一下比较常用的五种多界面传值的方式。属性传值属性传值一般用前一个界面向后一个界面传值,简单地说就是通过访问后一个视图控制器的属性来为它赋值,通过这个属性来做到从前一个界面向后一个界面传值。首先在后一个界面中定义属性@interfaceBViewController:UIViewController@propertyNSSt</div> </li> <li><a href="/article/1835513424734416896.htm" title="UI学习——cell的复用和自定义cell" target="_blank">UI学习——cell的复用和自定义cell</a> <span class="text-muted">Magnetic_h</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>目录cell的复用手动(非注册)自动(注册)自定义cellcell的复用在iOS开发中,单元格复用是一种提高表格(UITableView)和集合视图(UICollectionView)滚动性能的技术。当一个UITableViewCell或UICollectionViewCell首次需要显示时,如果没有可复用的单元格,则视图会创建一个新的单元格。一旦这个单元格滚动出屏幕,它就不会被销毁。相反,它被添</div> </li> <li><a href="/article/1835512920797179904.htm" title="element实现动态路由+面包屑" target="_blank">element实现动态路由+面包屑</a> <span class="text-muted">软件技术NINI</span> <a class="tag" taget="_blank" href="/search/vue%E6%A1%88%E4%BE%8B/1.htm">vue案例</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> <div>el-breadcrumb是ElementUI组件库中的一个面包屑导航组件,它用于显示当前页面的路径,帮助用户快速理解和导航到应用的各个部分。在Vue.js项目中,如果你已经安装了ElementUI,就可以很方便地使用el-breadcrumb组件。以下是一个基本的使用示例:安装ElementUI(如果你还没有安装的话):你可以通过npm或yarn来安装ElementUI。bash复制代码npmi</div> </li> <li><a href="/article/1835509897106649088.htm" title="Long类型前后端数据不一致" target="_blank">Long类型前后端数据不一致</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题,尤其是当后端使用Java的Long类型(64位)与前端JavaScript的Number类型(最大安全整数为2^53-1,即16位)进行数据交互时,很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问</div> </li> <li><a href="/article/1835509770287673344.htm" title="swagger访问路径" target="_blank">swagger访问路径</a> <span class="text-muted">igotyback</span> <a class="tag" taget="_blank" href="/search/swagger/1.htm">swagger</a> <div>Swagger2.x版本访问地址:http://{ip}:{port}/{context-path}/swagger-ui.html{ip}是你的服务器IP地址。{port}是你的应用服务端口,通常为8080。{context-path}是你的应用上下文路径,如果应用部署在根路径下,则为空。Swagger3.x版本对于Swagger3.x版本(也称为OpenAPI3)访问地址:http://{ip</div> </li> <li><a href="/article/1835508130608410624.htm" title="html 中如何使用 uniapp 的部分方法" target="_blank">html 中如何使用 uniapp 的部分方法</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/uni-app/1.htm">uni-app</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>示例代码:Documentconsole.log(window);效果展示:好了,现在就可以uni.使用相关的方法了</div> </li> <li><a href="/article/1835504217729626112.htm" title="Python教程:一文了解使用Python处理XPath" target="_blank">Python教程:一文了解使用Python处理XPath</a> <span class="text-muted">旦莫</span> <a class="tag" taget="_blank" href="/search/Python%E8%BF%9B%E9%98%B6/1.htm">Python进阶</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</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.环境准备1.1安装lxml1.2验证安装2.XPath基础2.1什么是XPath?2.2XPath语法2.3示例XML文档3.使用lxml解析XML3.1解析XML文档3.2查看解析结果4.XPath查询4.1基本路径查询4.2使用属性查询4.3查询多个节点5.XPath的高级用法5.1使用逻辑运算符5.2使用函数6.实战案例6.1从网页抓取数据6.1.1安装Requests库6.1.2代</div> </li> <li><a href="/article/1835503712899002368.htm" title="linux中sdl的使用教程,sdl使用入门" target="_blank">linux中sdl的使用教程,sdl使用入门</a> <span class="text-muted">Melissa Corvinus</span> <a class="tag" taget="_blank" href="/search/linux%E4%B8%ADsdl%E7%9A%84%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/1.htm">linux中sdl的使用教程</a> <div>本文通过一个简单示例讲解SDL的基本使用流程。示例中展示一个窗口,窗口里面有个随机颜色快随机移动。当我们鼠标点击关闭按钮时间窗口关闭。基本步骤如下:1.初始化SDL并创建一个窗口。SDL_Init()初始化SDL_CreateWindow()创建窗口2.纹理渲染存储RGB和存储纹理的区别:比如一个从左到右由红色渐变到蓝色的矩形,用存储RGB的话就需要把矩形中每个点的具体颜色值存储下来;而纹理只是一</div> </li> <li><a href="/article/1835502282603589632.htm" title="509. 斐波那契数(每日一题)" target="_blank">509. 斐波那契数(每日一题)</a> <span class="text-muted">lzyprime</span> <div>lzyprime博客(github)创建时间:2021.01.04qq及邮箱:2383518170leetcode笔记题目描述斐波那契数,通常用F(n)表示,形成的序列称为斐波那契数列。该数列由0和1开始,后面的每一项数字都是前面两项数字的和。也就是:F(0)=0,F(1)=1F(n)=F(n-1)+F(n-2),其中n>1给你n,请计算F(n)。示例1:输入:2输出:1解释:F(2)=F(1)+</div> </li> <li><a href="/article/1835499615491813376.htm" title="四章-32-点要素的聚合" target="_blank">四章-32-点要素的聚合</a> <span class="text-muted">彩云飘过</span> <div>本文基于腾讯课堂老胡的课《跟我学Openlayers--基础实例详解》做的学习笔记,使用的openlayers5.3.xapi。源码见1032.html,对应的官网示例https://openlayers.org/en/latest/examples/cluster.htmlhttps://openlayers.org/en/latest/examples/earthquake-clusters.</div> </li> <li><a href="/article/1835498925755297792.htm" title="DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理" target="_blank">DIV+CSS+JavaScript技术制作网页(旅游主题网页设计与制作)云南大理</a> <span class="text-muted">STU学生网页设计</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/%E6%9C%9F%E6%9C%AB%E7%BD%91%E9%A1%B5%E4%BD%9C%E4%B8%9A/1.htm">期末网页作业</a><a class="tag" taget="_blank" href="/search/html%E9%9D%99%E6%80%81%E7%BD%91%E9%A1%B5/1.htm">html静态网页</a><a class="tag" taget="_blank" href="/search/html5%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">html5期末大作业</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E8%AE%BE%E8%AE%A1/1.htm">网页设计</a><a class="tag" taget="_blank" href="/search/web%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web大作业</a> <div>️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业:【HTML5网页期末作业(1000套)】程序员有趣的告白方式:【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程</div> </li> <li><a href="/article/1835497665337585664.htm" title="使用LLaVa和Ollama实现多模态RAG示例" target="_blank">使用LLaVa和Ollama实现多模态RAG示例</a> <span class="text-muted">llzwxh888</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</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%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>本文将详细介绍如何使用LLaVa和Ollama实现多模态RAG(检索增强生成),通过提取图像中的结构化数据、生成图像字幕等功能来展示这一技术的强大之处。安装环境首先,您需要安装以下依赖包:!pipinstallllama-index-multi-modal-llms-ollama!pipinstallllama-index-readers-file!pipinstallunstructured!p</div> </li> <li><a href="/article/1835496149843275776.htm" title="关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript" target="_blank">关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E6%97%85%E6%B8%B8/1.htm">旅游</a><a class="tag" taget="_blank" href="/search/%E9%A3%8E%E6%99%AF/1.htm">风景</a> <div>⛵源码获取文末联系✈Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业,Web大学生网页HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip</div> </li> <li><a href="/article/1835496148601761792.htm" title="HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动" target="_blank">HTML网页设计制作大作业(div+css) 云南我的家乡旅游景点 带文字滚动</a> <span class="text-muted">二挡起步</span> <a class="tag" taget="_blank" href="/search/web%E5%89%8D%E7%AB%AF%E6%9C%9F%E6%9C%AB%E5%A4%A7%E4%BD%9C%E4%B8%9A/1.htm">web前端期末大作业</a><a class="tag" taget="_blank" href="/search/web%E8%AE%BE%E8%AE%A1%E7%BD%91%E9%A1%B5%E8%A7%84%E5%88%92%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">web设计网页规划与设计</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>Web前端开发技术描述网页设计题材,DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML:结构CSS:样式在操作方面上运用了html5和css3,采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript:做与用户的交互行为文章目录前端学习路线</div> </li> <li><a href="/article/1835494538001608704.htm" title="121. 买卖股票的最佳时机" target="_blank">121. 买卖股票的最佳时机</a> <span class="text-muted">薄荷糖的味道_fb40</span> <div>给定一个数组,它的第i个元素是一支给定股票第i天的价格。如果你最多只允许完成一笔交易(即买入和卖出一支股票),设计一个算法来计算你所能获取的最大利润。注意你不能在买入股票前卖出股票。示例1:输入:[7,1,5,3,6,4]输出:5解释:在第2天(股票价格=1)的时候买入,在第5天(股票价格=6)的时候卖出,最大利润=6-1=5。注意利润不能是7-1=6,因为卖出价格需要大于买入价格。示例2:输入:</div> </li> <li><a href="/article/1835493626688401408.htm" title="Python快速入门 —— 第三节:类与对象" target="_blank">Python快速入门 —— 第三节:类与对象</a> <span class="text-muted">孤华暗香</span> <a class="tag" taget="_blank" href="/search/Python%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">Python快速入门</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>第三节:类与对象目标:了解面向对象编程的基础概念,并学会如何定义类和创建对象。内容:类与对象:定义类:class关键字。类的构造函数:__init__()。类的属性和方法。对象的创建与使用。示例:classStudent:def__init__(self,name,age,major):self.name&#</div> </li> <li><a href="/article/1835492740536823808.htm" title="node.js学习" target="_blank">node.js学习</a> <span class="text-muted">小猿L</span> <a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a> <div>node.js学习实操及笔记温故node.js,node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础,三大框架vuereactangular离不开node.jsnode.js是什么官网:node.js是一个开源的、跨平台的运行JavaScript的运行</div> </li> <li><a href="/article/1835491353451130880.htm" title="【华为OD技术面试真题 - 技术面】- python八股文真题题库(4)" target="_blank">【华为OD技术面试真题 - 技术面】- python八股文真题题库(4)</a> <span class="text-muted">算法大师</span> <a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BAod/1.htm">华为od</a><a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>华为OD面试真题精选专栏:华为OD面试真题精选目录:2024华为OD面试手撕代码真题目录以及八股文真题目录文章目录华为OD面试真题精选**1.Python中的`with`**用途和功能自动资源管理示例:文件操作上下文管理协议示例代码工作流程解析优点2.\_\_new\_\_和**\_\_init\_\_**区别__new____init__区别总结3.**切片(Slicing)操作**基本切片语法</div> </li> <li><a href="/article/1835481395884027904.htm" title="209. 长度最小的子数组(滑动窗口)" target="_blank">209. 长度最小的子数组(滑动窗口)</a> <span class="text-muted">追光者2020</span> <a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E5%8F%8C%E6%8C%87%E9%92%88%2F%E6%BB%91%E5%8A%A8%E7%AA%97%E5%8F%A3/1.htm">双指针/滑动窗口</a> <div>题目描述给定一个含有n个正整数的数组和一个正整数target。找出该数组中满足其和≥target的长度最小的连续子数组[numsl,numsl+1,…,numsr-1,numsr],并返回其长度。如果不存在符合条件的子数组,返回0。示例1:输入:target=7,nums=[2,3,1,2,4,3]输出:2解释:子数组[4,3]是该条件下的长度最小的子数组。示例2:输入:target=4,nums</div> </li> <li><a href="/article/1835479001825636352.htm" title="209. 长度最小的子数组(中等 数组 滑动窗口)" target="_blank">209. 长度最小的子数组(中等 数组 滑动窗口)</a> <span class="text-muted">风雨中de宁静</span> <a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a> <div>209.长度最小的子数组给定一个含有n个正整数的数组和一个正整数target。找出该数组中满足其和≥target的长度最小的连续子数组[numsl,numsl+1,…,numsr-1,numsr],并返回其长度。如果不存在符合条件的子数组,返回0。示例1:输入:target=7,nums=[2,3,1,2,4,3]输出:2解释:子数组[4,3]是该条件下的长度最小的子数组。示例2:输入:targe</div> </li> <li><a href="/article/1835471689929027584.htm" title="关于Mysql 中 Row size too large (> 8126) 错误的解决和理解" target="_blank">关于Mysql 中 Row size too large (> 8126) 错误的解决和理解</a> <span class="text-muted">秋刀prince</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>提示:啰嗦一嘴,数据库的任何操作和验证前,一定要记得先备份!!!不会有错;文章目录问题发现一、问题导致的可能原因1、页大小2、行格式2.1compact格式2.2Redundant格式2.3Dynamic格式2.4Compressed格式3、BLOB和TEXT列二、解决办法1、修改页大小(不推荐)2、修改行格式3、修改数据类型为BLOB和TEXT列4、其他优化方式(可以参考使用)4.1合理设置数据</div> </li> <li><a href="/article/1835471059135066112.htm" title="你可能遗漏的一些C#/.NET/.NET Core知识点" target="_blank">你可能遗漏的一些C#/.NET/.NET Core知识点</a> <span class="text-muted">追逐时光者</span> <a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a><a class="tag" taget="_blank" href="/search/.NET/1.htm">.NET</a><a class="tag" taget="_blank" href="/search/DotNetGuide%E7%BC%96%E7%A8%8B%E6%8C%87%E5%8D%97/1.htm">DotNetGuide编程指南</a><a class="tag" taget="_blank" href="/search/c%23/1.htm">c#</a><a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a><a class="tag" taget="_blank" href="/search/.netcore/1.htm">.netcore</a><a class="tag" taget="_blank" href="/search/microsoft/1.htm">microsoft</a> <div>前言在这个快速发展的技术世界中,时常会有一些重要的知识点、信息或细节被忽略或遗漏。《C#/.NET/.NETCore拾遗补漏》专栏我们将探讨一些可能被忽略或遗漏的重要知识点、信息或细节,以帮助大家更全面地了解这些技术栈的特性和发展方向。拾遗补漏GitHub开源地址https://github.com/YSGStudyHards/DotNetGuide/blob/main/docs/DotNet/D</div> </li> <li><a href="/article/1835467782687387648.htm" title="linux 发展史" target="_blank">linux 发展史</a> <span class="text-muted">种树的猴子</span> <a class="tag" taget="_blank" href="/search/%E5%86%85%E6%A0%B8/1.htm">内核</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E6%93%8D%E4%BD%9C%E7%B3%BB%E7%BB%9F/1.htm">操作系统</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%95%B0%E6%8D%AE/1.htm">大数据</a> <div>linux发展史说明此前对linux认识模糊一知半解,近期通过学习将自己对于linux的发展总结一下方便大家日后的学习。那Linux是目前一款非常火热的开源操作系统,可是linux是什么时候出现的,又是因为什么样的原因被开发出来的呢。以下将对linux的发展历程进行详细的讲解。目录一、Linux发展背景二、UINIX的诞生三、UNIX的重要分支-BSD的诞生四、Minix的诞生五、GNU与Free</div> </li> <li><a href="/article/1835466901216653312.htm" title="209. 长度最小的子数组-滑动窗口" target="_blank">209. 长度最小的子数组-滑动窗口</a> <span class="text-muted">hequnwang10</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/LeetCode/1.htm">LeetCode</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>一、题目描述给定一个含有n个正整数的数组和一个正整数target。找出该数组中满足其和≥target的长度最小的连续子数组[numsl,numsl+1,…,numsr-1,numsr],并返回其长度。如果不存在符合条件的子数组,返回0。示例1:输入:target=7,nums=[2,3,1,2,4,3]输出:2解释:子数组[4,3]是该条件下的长度最小的子数组。示例2:输入:target=4,nu</div> </li> <li><a href="/article/1835463117237219328.htm" title="2024.9.14 Python,差分法解决区间加法,消除游戏,压缩字符串" target="_blank">2024.9.14 Python,差分法解决区间加法,消除游戏,压缩字符串</a> <span class="text-muted">RaidenQ</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%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/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E5%8A%9B%E6%89%A3/1.htm">力扣</a> <div>1.区间加法假设你有一个长度为n的数组,初始情况下所有的数字均为0,你将会被给出k个更新的操作。其中,每个操作会被表示为一个三元组:[startIndex,endIndex,inc],你需要将子数组A[startIndex…endIndex](包括startIndex和endIndex)增加inc。请你返回k次操作后的数组。示例:输入:length=5,updates=[[1,3,2],[2,4,</div> </li> <li><a href="/article/1835462863683153920.htm" title="2024.8.22 Python,链表两数之和,链表快速反转,二叉树的深度,二叉树前中后序遍历,N叉树递归遍历,翻转二叉树" target="_blank">2024.8.22 Python,链表两数之和,链表快速反转,二叉树的深度,二叉树前中后序遍历,N叉树递归遍历,翻转二叉树</a> <span class="text-muted">RaidenQ</span> <a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E9%93%BE%E8%A1%A8/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>1.链表两数之和输入:l1=[2,4,3],l2=[5,6,4]输出:[7,0,8]解释:342+465=807.示例2:输入:l1=[0],l2=[0]输出:[0]示例3:输入:l1=[9,9,9,9,9,9,9],l2=[9,9,9,9]输出:[8,9,9,9,0,0,0,1]昨天的这个题,用自己的办法写的麻烦的要死,然后刚才一看chat归类的办法,感觉自己像个智障。classListNode</div> </li> <li><a href="/article/1835458199755517952.htm" title="spring如何整合druid连接池?" target="_blank">spring如何整合druid连接池?</a> <span class="text-muted">惜.己</span> <a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a><a class="tag" taget="_blank" href="/search/junit/1.htm">junit</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/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/idea/1.htm">idea</a><a class="tag" taget="_blank" href="/search/%E5%90%8E%E7%AB%AF/1.htm">后端</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a> <div>目录spring整合druid连接池1.新建maven项目2.新建mavenModule3.导入相关依赖4.配置log4j2.xml5.配置druid.xml1)xml中如何引入properties2)下面是配置文件6.准备jdbc.propertiesJDBC配置项解释7.配置druid8.测试spring整合druid连接池1.新建maven项目打开IDE(比如IntelliJIDEA,Ecl</div> </li> <li><a href="/article/1835454795712917504.htm" title="esp32开发快速入门 8 : MQTT 的快速入门,基于esp32实现MQTT通信" target="_blank">esp32开发快速入门 8 : MQTT 的快速入门,基于esp32实现MQTT通信</a> <span class="text-muted">z755924843</span> <a class="tag" taget="_blank" href="/search/ESP32%E5%BC%80%E5%8F%91%E5%BF%AB%E9%80%9F%E5%85%A5%E9%97%A8/1.htm">ESP32开发快速入门</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/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>MQTT介绍简介MQTT(MessageQueuingTelemetryTransport,消息队列遥测传输协议),是一种基于发布/订阅(publish/subscribe)模式的"轻量级"通讯协议,该协议构建于TCP/IP协议上,由IBM在1999年发布。MQTT最大优点在于,可以以极少的代码和有限的带宽,为连接远程设备提供实时可靠的消息服务。作为一种低开销、低带宽占用的即时通讯协议,使其在物联</div> </li> <li><a href="/article/1835452528599330816.htm" title="vue项目element-ui的table表格单元格合并" target="_blank">vue项目element-ui的table表格单元格合并</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/elementui/1.htm">elementui</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>一、合并效果二全部代码exportdefault{name:'CellMerge',data(){return{tableData:[{id:'1',name:'王小虎',amount1:'165',amount2:'3.2',amount3:10},{id:'1',name:'王小虎',amount1:'162',amount2:'4.43',amount3:12},{id:'1',name:'</div> </li> <li><a href="/article/1835450511071997952.htm" title="android 更改窗口的层次,浮窗开发之窗口层级" target="_blank">android 更改窗口的层次,浮窗开发之窗口层级</a> <span class="text-muted">Ms.Bu</span> <a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/%E6%9B%B4%E6%94%B9%E7%AA%97%E5%8F%A3%E7%9A%84%E5%B1%82%E6%AC%A1/1.htm">更改窗口的层次</a> <div>最近在项目中遇到了这样的需求:需要在特定的其他应用之上悬浮自己的UI交互(拖动、输入等复杂的UI交互),和九游的浮窗类似,不过我们的比九游的体验更好,我们越过了很多授权的限制。浮窗效果很多人都知道如何去实现一个简单的浮窗,但是却很少有人去深入的研究背后的流程机制,由于项目中浮窗交互比较复杂,遇到了些坑查看了很多资料,故总结浮窗涉及到的知识点:窗口层级关系(浮窗是如何“浮”的)?浮窗有哪些限制,如何</div> </li> <li><a href="/article/98.htm" title="微信开发者验证接口开发" target="_blank">微信开发者验证接口开发</a> <span class="text-muted">362217990</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1+%E5%BC%80%E5%8F%91%E8%80%85+token+%E9%AA%8C%E8%AF%81/1.htm">微信 开发者 token 验证</a> <div>微信开发者接口验证。 Token,自己随便定义,与微信填写一致就可以了。 根据微信接入指南描述 http://mp.weixin.qq.com/wiki/17/2d4265491f12608cd170a95559800f2d.html 第一步:填写服务器配置 第二步:验证服务器地址的有效性 第三步:依据接口文档实现业务逻辑 这里主要讲第二步验证服务器有效性。 建一个</div> </li> <li><a href="/article/225.htm" title="一个小编程题-类似约瑟夫环问题" target="_blank">一个小编程题-类似约瑟夫环问题</a> <span class="text-muted">BrokenDreams</span> <a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a> <div>        今天群友出了一题:         一个数列,把第一个元素删除,然后把第二个元素放到数列的最后,依次操作下去,直到把数列中所有的数都删除,要求依次打印出这个过程中删除的数。      &</div> </li> <li><a href="/article/352.htm" title="linux复习笔记之bash shell (5) 关于减号-的作用" target="_blank">linux复习笔记之bash shell (5) 关于减号-的作用</a> <span class="text-muted">eksliang</span> <a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E2%80%9C-%E2%80%9D%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于减号“-”的含义</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E2%80%9C-%E2%80%9D%E7%9A%84%E7%94%A8%E9%80%94/1.htm">linux关于减号“-”的用途</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E2%80%9C-%E2%80%9D%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于“-”的含义</a><a class="tag" taget="_blank" href="/search/linux%E5%85%B3%E4%BA%8E%E5%87%8F%E5%8F%B7%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">linux关于减号的含义</a> <div>    转载请出自出处: http://eksliang.iteye.com/blog/2105677        管道命令在bash的连续处理程序中是相当重要的,尤其在使用到前一个命令的studout(标准输出)作为这次的stdin(标准输入)时,就显得太重要了,某些命令需要用到文件名,例如上篇文档的的切割命令(split)、还有</div> </li> <li><a href="/article/479.htm" title="Unix(3)" target="_blank">Unix(3)</a> <span class="text-muted">18289753290</span> <a class="tag" taget="_blank" href="/search/unix+ksh/1.htm">unix ksh</a> <div>1)若该变量需要在其他子进程执行,则可用"$变量名称"或${变量}累加内容 什么是子进程?在我目前这个shell情况下,去打开一个新的shell,新的那个shell就是子进程。一般状态下,父进程的自定义变量是无法在子进程内使用的,但通过export将变量变成环境变量后就能够在子进程里面应用了。 2)条件判断: &&代表and  ||代表or&nbs</div> </li> <li><a href="/article/606.htm" title="关于ListView中性能优化中图片加载问题" target="_blank">关于ListView中性能优化中图片加载问题</a> <span class="text-muted">酷的飞上天空</span> <a class="tag" taget="_blank" href="/search/ListView/1.htm">ListView</a> <div>ListView的性能优化网上很多信息,但是涉及到异步加载图片问题就会出现问题。 具体参看上篇文章http://314858770.iteye.com/admin/blogs/1217594   如果每次都重新inflate一个新的View出来肯定会造成性能损失严重,可能会出现listview滚动是很卡的情况,还会出现内存溢出。 现在想出一个方法就是每次都添加一个标识,然后设置图</div> </li> <li><a href="/article/733.htm" title="德国总理默多克:给国人的一堂“震撼教育”课" target="_blank">德国总理默多克:给国人的一堂“震撼教育”课</a> <span class="text-muted">永夜-极光</span> <a class="tag" taget="_blank" href="/search/%E6%95%99%E8%82%B2/1.htm">教育</a> <div>http://bbs.voc.com.cn/topic-2443617-1-1.html德国总理默多克:给国人的一堂“震撼教育”课  安吉拉—默克尔,一位经历过社会主义的东德人,她利用自己的博客,发表一番来华前的谈话,该说的话,都在上面说了,全世界想看想传播——去看看默克尔总理的博客吧!   德国总理默克尔以她的低调、朴素、谦和、平易近人等品格给国人留下了深刻印象。她以实际行动为中国人上了一堂</div> </li> <li><a href="/article/860.htm" title="关于Java继承的一个小问题。。。" target="_blank">关于Java继承的一个小问题。。。</a> <span class="text-muted">随便小屋</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>今天看Java 编程思想的时候遇见一个问题,运行的结果和自己想想的完全不一样。先把代码贴出来! //CanFight接口 interface Canfight { void fight(); } //ActionCharacter类 class ActionCharacter { public void fight() { System.out.pr</div> </li> <li><a href="/article/987.htm" title="23种基本的设计模式" target="_blank">23种基本的设计模式</a> <span class="text-muted">aijuans</span> <a class="tag" taget="_blank" href="/search/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a> <div>Abstract Factory:提供一个创建一系列相关或相互依赖对象的接口,而无需指定它们具体的类。   Adapter:将一个类的接口转换成客户希望的另外一个接口。A d a p t e r模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。   Bridge:将抽象部分与它的实现部分分离,使它们都可以独立地变化。   Builder:将一个复杂对象的构建与它的表示分离,使得同</div> </li> <li><a href="/article/1114.htm" title="《周鸿祎自述:我的互联网方法论》读书笔记" target="_blank">《周鸿祎自述:我的互联网方法论》读书笔记</a> <span class="text-muted">aoyouzi</span> <a class="tag" taget="_blank" href="/search/%E8%AF%BB%E4%B9%A6%E7%AC%94%E8%AE%B0/1.htm">读书笔记</a> <div>从用户的角度来看,能解决问题的产品才是好产品,能方便/快速地解决问题的产品,就是一流产品.   商业模式不是赚钱模式 一款产品免费获得海量用户后,它的边际成本趋于0,然后再通过广告或者增值服务的方式赚钱,实际上就是创造了新的价值链.   商业模式的基础是用户,木有用户,任何商业模式都是浮云.商业模式的核心是产品,本质是通过产品为用户创造价值. 商业模式还包括寻找需求</div> </li> <li><a href="/article/1241.htm" title="JavaScript动态改变样式访问技术" target="_blank">JavaScript动态改变样式访问技术</a> <span class="text-muted">百合不是茶</span> <a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/style%E5%B1%9E%E6%80%A7/1.htm">style属性</a><a class="tag" taget="_blank" href="/search/ClassName%E5%B1%9E%E6%80%A7/1.htm">ClassName属性</a> <div>  一:style属性 格式:  HTML元素.style.样式属性="值";   创建菜单:在html标签中创建 或者 在head标签中用数组创建   <html> <head> <title>style改变样式</title> </head> &l</div> </li> <li><a href="/article/1368.htm" title="jQuery的deferred对象详解" target="_blank">jQuery的deferred对象详解</a> <span class="text-muted">bijian1013</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/deferred%E5%AF%B9%E8%B1%A1/1.htm">deferred对象</a> <div>        jQuery的开发速度很快,几乎每半年一个大版本,每两个月一个小版本。         每个版本都会引入一些新功能,从jQuery 1.5.0版本开始引入的一个新功能----deferred对象。    &nb</div> </li> <li><a href="/article/1495.htm" title="淘宝开放平台TOP" target="_blank">淘宝开放平台TOP</a> <span class="text-muted">Bill_chen</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c/1.htm">c</a><a class="tag" taget="_blank" href="/search/%E7%89%A9%E6%B5%81/1.htm">物流</a><a class="tag" taget="_blank" href="/search/C%23/1.htm">C#</a> <div>淘宝网开放平台首页:http://open.taobao.com/ 淘宝开放平台是淘宝TOP团队的产品,TOP即TaoBao Open Platform, 是淘宝合作伙伴开发、发布、交易其服务的平台。 支撑TOP的三条主线为:    1.开放数据和业务流程     * 以API数据形式开放商品、交易、物流等业务;  &</div> </li> <li><a href="/article/1622.htm" title="【大型网站架构一】大型网站架构概述" target="_blank">【大型网站架构一】大型网站架构概述</a> <span class="text-muted">bit1129</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%AB%99%E6%9E%B6%E6%9E%84/1.htm">网站架构</a> <div>大型互联网特点 面对海量用户、海量数据 大型互联网架构的关键指标 高并发 高性能 高可用 高可扩展性 线性伸缩性 安全性 大型互联网技术要点   前端优化 CDN缓存 反向代理 KV缓存 消息系统 分布式存储 NoSQL数据库 搜索 监控 安全 想到的问题: 1.对于订单系统这种事务型系统,如</div> </li> <li><a href="/article/1749.htm" title="eclipse插件hibernate tools安装" target="_blank">eclipse插件hibernate tools安装</a> <span class="text-muted">白糖_</span> <a class="tag" taget="_blank" href="/search/Hibernate/1.htm">Hibernate</a> <div> eclipse helios(3.6)版 1.启动eclipse 2.选择 Help > Install New Software...> 3.添加如下地址: http://download.jboss.org/jbosstools/updates/stable/helios/ 4.选择性安装:hibernate tools在All Jboss tool</div> </li> <li><a href="/article/1876.htm" title="Jquery easyui Form表单提交注意事项" target="_blank">Jquery easyui Form表单提交注意事项</a> <span class="text-muted">bozch</span> <a class="tag" taget="_blank" href="/search/jquery+easyui/1.htm">jquery easyui</a> <div>jquery easyui对表单的提交进行了封装,提交的方式采用的是ajax的方式,在开发的时候应该注意的事项如下:         1、在定义form标签的时候,要将method属性设置成post或者get,特别是进行大字段的文本信息提交的时候,要将method设置成post方式提交,否则页面会抛出跨域访问等异常。所以这个要</div> </li> <li><a href="/article/2003.htm" title="Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量" target="_blank">Trie tree(字典树)的Java实现及其应用-统计以某字符串为前缀的单词的数量</a> <span class="text-muted">bylijinnan</span> <a class="tag" taget="_blank" href="/search/java%E5%AE%9E%E7%8E%B0/1.htm">java实现</a> <div> import java.util.LinkedList; public class CaseInsensitiveTrie { /** 字典树的Java实现。实现了插入、查询以及深度优先遍历。 Trie tree's java implementation.(Insert,Search,DFS) Problem Description Igna</div> </li> <li><a href="/article/2130.htm" title="html css 鼠标形状样式汇总" target="_blank">html css 鼠标形状样式汇总</a> <span class="text-muted">chenbowen00</span> <a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a> <div>css鼠标手型cursor中hand与pointer  Example:CSS鼠标手型效果 <a href="#" style="cursor:hand">CSS鼠标手型效果</a><br/>  Example:CSS鼠标手型效果 <a href="#" style=&qu</div> </li> <li><a href="/article/2257.htm" title="[IT与投资]IT投资的几个原则" target="_blank">[IT与投资]IT投资的几个原则</a> <span class="text-muted">comsci</span> <a class="tag" taget="_blank" href="/search/it/1.htm">it</a> <div>       无论是想在电商,软件,硬件还是互联网领域投资,都需要大量资金,虽然各个国家政府在媒体上都给予大家承诺,既要让市场的流动性宽松,又要保持经济的高速增长....但是,事实上,整个市场和社会对于真正的资金投入是非常渴望的,也就是说,表面上看起来,市场很活跃,但是投入的资金并不是很充足的......    </div> </li> <li><a href="/article/2384.htm" title="oracle with语句详解" target="_blank">oracle with语句详解</a> <span class="text-muted">daizj</span> <a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/with/1.htm">with</a><a class="tag" taget="_blank" href="/search/with+as/1.htm">with as</a> <div>oracle with语句详解 转 在oracle中,select 查询语句,可以使用with,就是一个子查询,oracle 会把子查询的结果放到临时表中,可以反复使用 例子:注意,这是sql语句,不是pl/sql语句, 可以直接放到jdbc执行的 ----------------------------------------------------------------</div> </li> <li><a href="/article/2511.htm" title="hbase的简单操作" target="_blank">hbase的简单操作</a> <span class="text-muted">deng520159</span> <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/hbase/1.htm">hbase</a> <div>近期公司用hbase来存储日志,然后再来分析 ,把hbase开发经常要用的命令找了出来. 用ssh登陆安装hbase那台linux后 用hbase shell进行hbase命令控制台! 表的管理 1)查看有哪些表 hbase(main)> list 2)创建表   # 语法:create <table>, {NAME => <family&g</div> </li> <li><a href="/article/2638.htm" title="C语言scanf继续学习、算术运算符学习和逻辑运算符" target="_blank">C语言scanf继续学习、算术运算符学习和逻辑运算符</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/c/1.htm">c</a> <div>/* 2013年3月11日20:37:32 地点:北京潘家园 功能:完成用户格式化输入多个值 目的:学习scanf函数的使用 */ # include <stdio.h> int main(void) { int i, j, k; printf("please input three number:\n"); //提示用</div> </li> <li><a href="/article/2765.htm" title="2015越来越好" target="_blank">2015越来越好</a> <span class="text-muted">dcj3sjt126com</span> <a class="tag" taget="_blank" href="/search/%E6%AD%8C%E6%9B%B2/1.htm">歌曲</a> <div>越来越好 房子大了电话小了 感觉越来越好 假期多了收入高了 工作越来越好 商品精了价格活了 心情越来越好 天更蓝了水更清了 环境越来越好 活得有奔头人会步步高 想做到你要努力去做到 幸福的笑容天天挂眉梢 越来越好 婆媳和了家庭暖了 生活越来越好 孩子高了懂事多了 学习越来越好 朋友多了心相通了 大家越来越好 道路宽了心气顺了 日子越来越好 活的有精神人就不显</div> </li> <li><a href="/article/2892.htm" title="java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim" target="_blank">java.sql.SQLException: Value '0000-00-00' can not be represented as java.sql.Tim</a> <span class="text-muted">feiteyizu</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>数据表中有记录的time字段(属性为timestamp)其值为:“0000-00-00 00:00:00” 程序使用select 语句从中取数据时出现以下异常: java.sql.SQLException:Value '0000-00-00' can not be represented as java.sql.Date   java.sql.SQLException: Valu</div> </li> <li><a href="/article/3019.htm" title="Ehcache(07)——Ehcache对并发的支持" target="_blank">Ehcache(07)——Ehcache对并发的支持</a> <span class="text-muted">234390216</span> <a class="tag" taget="_blank" href="/search/%E5%B9%B6%E5%8F%91/1.htm">并发</a><a class="tag" taget="_blank" href="/search/ehcache/1.htm">ehcache</a><a class="tag" taget="_blank" href="/search/%E9%94%81/1.htm">锁</a><a class="tag" taget="_blank" href="/search/ReadLock/1.htm">ReadLock</a><a class="tag" taget="_blank" href="/search/WriteLock/1.htm">WriteLock</a> <div>Ehcache对并发的支持          在高并发的情况下,使用Ehcache缓存时,由于并发的读与写,我们读的数据有可能是错误的,我们写的数据也有可能意外的被覆盖。所幸的是Ehcache为我们提供了针对于缓存元素Key的Read(读)、Write(写)锁。当一个线程获取了某一Key的Read锁之后,其它线程获取针对于同</div> </li> <li><a href="/article/3146.htm" title="mysql中blob,text字段的合成索引" target="_blank">mysql中blob,text字段的合成索引</a> <span class="text-muted">jackyrong</span> <a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a> <div>  在mysql中,原来有一个叫合成索引的,可以提高blob,text字段的效率性能, 但只能用在精确查询,核心是增加一个列,然后可以用md5进行散列,用散列值查找 则速度快 比如: create table abc(id varchar(10),context blog,hash_value varchar(40)); insert into abc(1,rep</div> </li> <li><a href="/article/3273.htm" title="逻辑运算与移位运算" target="_blank">逻辑运算与移位运算</a> <span class="text-muted">latty</span> <a class="tag" taget="_blank" href="/search/%E4%BD%8D%E8%BF%90%E7%AE%97/1.htm">位运算</a><a class="tag" taget="_blank" href="/search/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97/1.htm">逻辑运算</a> <div>源码:正数的补码与原码相同例+7 源码:00000111 补码 :00000111 (用8位二进制表示一个数) 负数的补码: 符号位为1,其余位为该数绝对值的原码按位取反;然后整个数加1。   -7 源码: 10000111 ,其绝对值为00000111  取反加一:11111001 为-7补码 已知一个数的补码,求原码的操作分两种情况:</div> </li> <li><a href="/article/3400.htm" title="利用XSD 验证XML文件" target="_blank">利用XSD 验证XML文件</a> <span class="text-muted">newerdragon</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/xml/1.htm">xml</a><a class="tag" taget="_blank" href="/search/xsd/1.htm">xsd</a> <div>XSD文件 (XML Schema 语言也称作 XML Schema 定义(XML Schema Definition,XSD)。 具体使用方法和定义请参看: http://www.w3school.com.cn/schema/index.asp java自jdk1.5以上新增了SchemaFactory类 可以实现对XSD验证的支持,使用起来也很方便。 以下代码可用在J</div> </li> <li><a href="/article/3527.htm" title="搭建 CentOS 6 服务器(12) - Samba" target="_blank">搭建 CentOS 6 服务器(12) - Samba</a> <span class="text-muted">rensanning</span> <a class="tag" taget="_blank" href="/search/centos/1.htm">centos</a> <div>(1)安装 # yum -y install samba Installed: samba.i686 0:3.6.9-169.el6_5 # pdbedit -a rensn new password:123456 retype new password:123456 …… (2)Home文件夹 # mkdir /etc</div> </li> <li><a href="/article/3654.htm" title="Learn Nodejs 01" target="_blank">Learn Nodejs 01</a> <span class="text-muted">toknowme</span> <a class="tag" taget="_blank" href="/search/nodejs/1.htm">nodejs</a> <div>(1)下载nodejs https://nodejs.org/download/ 选择相应的版本进行下载     (2)安装nodejs 安装的方式比较多,请baidu下 我这边下载的是“node-v0.12.7-linux-x64.tar.gz”这个版本 (1)上传服务器 (2)解压 tar -zxvf  node-v0.12.</div> </li> <li><a href="/article/3781.htm" title="jquery控制自动刷新的代码举例" target="_blank">jquery控制自动刷新的代码举例</a> <span class="text-muted">xp9802</span> <a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a> <div>1、html内容部分  复制代码代码示例: <div id='log_reload'> <select name="id_s" size="1"> <option value='2'>-2s-</option> <option value='3'>-3s-</option</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>