第十篇【传奇开心果系列】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/1950232820773351424.htm" title="移动端城市区县二级联动选择功能实现包" target="_blank">移动端城市区县二级联动选择功能实现包</a> <span class="text-muted">good2know</span> <div>本文还有配套的精品资源,点击获取简介:本项目是一套为移动端设计的jQuery实现方案,用于简化用户在选择城市和区县时的流程。它包括所有必需文件:HTML、JavaScript、CSS及图片资源。通过动态更新下拉菜单选项,实现城市到区县的联动效果,支持数据异步加载。开发者可以轻松集成此功能到移动网站或应用,并可基于需求进行扩展和优化。1.jQuery移动端解决方案概述jQuery技术简介jQuery</div> </li> <li><a href="/article/1950232190038110208.htm" title="day15|前端框架学习和算法" target="_blank">day15|前端框架学习和算法</a> <span class="text-muted">universe_01</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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/%E7%AC%94%E8%AE%B0/1.htm">笔记</a> <div>T22括号生成先把所有情况都画出来,然后(在满足什么情况下)把不符合条件的删除。T78子集要画树状图,把思路清晰。可以用暴力法、回溯法和DFS做这个题DFS深度搜索:每个边都走完,再回溯应用:二叉树搜索,图搜索回溯算法=DFS+剪枝T200岛屿数量(非常经典BFS宽度把树状转化成队列形式,lambda匿名函数“一次性的小函数,没有名字”setup语法糖:让代码更简洁好写的语法ref创建:基本类型的</div> </li> <li><a href="/article/1950231308781285376.htm" title="力扣热题100-------54. 螺旋矩阵" target="_blank">力扣热题100-------54. 螺旋矩阵</a> <span class="text-muted">海航Java之路</span> <a class="tag" taget="_blank" href="/search/%E5%8A%9B%E6%89%A3/1.htm">力扣</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/1.htm">矩阵</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a> <div>给你一个m行n列的矩阵matrix,请按照顺时针螺旋顺序,返回矩阵中的所有元素。示例1:输入:matrix=[[1,2,3],[4,5,6],[7,8,9]]输出:[1,2,3,6,9,8,7,4,5]示例2:输入:matrix=[[1,2,3,4],[5,6,7,8],[9,10,11,12]]输出:[1,2,3,4,8,12,11,10,9,5,6,7]提示:m==matrix.lengthn</div> </li> <li><a href="/article/1950229040682037248.htm" title="48. 旋转图像 - 力扣(LeetCode)" target="_blank">48. 旋转图像 - 力扣(LeetCode)</a> <span class="text-muted">Fiee-77</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E7%BB%84/1.htm">数组</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><a class="tag" taget="_blank" href="/search/python/1.htm">python</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%95%B0%E7%BB%84/1.htm">数组</a> <div>题目:给定一个n×n的二维矩阵matrix表示一个图像。请你将图像顺时针旋转90度。你必须在原地旋转图像,这意味着你需要直接修改输入的二维矩阵。请不要使用另一个矩阵来旋转图像。示例1:输入:matrix=[[1,2,3],[4,5,6],[7,8,9]]输出:[[7,4,1],[8,5,2],[9,6,3]]示例2:输入:matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,</div> </li> <li><a href="/article/1950225255557558272.htm" title="力扣面试题07 - 旋转矩阵" target="_blank">力扣面试题07 - 旋转矩阵</a> <span class="text-muted">茶猫_</span> <a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a><a class="tag" taget="_blank" href="/search/%E7%9F%A9%E9%98%B5/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/c%E8%AF%AD%E8%A8%80/1.htm">c语言</a> <div>题目:给你一幅由N×N矩阵表示的图像,其中每个像素的大小为4字节。请你设计一种算法,将图像旋转90度。不占用额外内存空间能否做到?示例1:给定matrix=[[1,2,3],[4,5,6],[7,8,9]],原地旋转输入矩阵,使其变为:[[7,4,1],[8,5,2],[9,6,3]]示例2:给定matrix=[[5,1,9,11],[2,4,8,10],[13,3,6,7],[15,14,12,</div> </li> <li><a href="/article/1950218819616174080.htm" title="基于redis的Zset实现作者的轻量级排名" target="_blank">基于redis的Zset实现作者的轻量级排名</a> <span class="text-muted">周童學</span> <a class="tag" taget="_blank" href="/search/Java/1.htm">Java</a><a class="tag" taget="_blank" href="/search/redis/1.htm">redis</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>基于redis的Zset实现轻量级作者排名系统在今天的技术架构中,Redis是一种广泛使用的内存数据存储系统,尤其在需要高效检索和排序的场景中表现优异。在本篇博客中,我们将深入探讨如何使用Redis的有序集合(ZSet)构建一个高效的笔记排行榜系统,并提供相关代码示例和详细的解析。1.功能背景与需求假设我们有一个笔记分享平台,用户可以发布各种笔记,系统需要根据用户发布的笔记数量来生成一个实时更新的</div> </li> <li><a href="/article/1950214964396486656.htm" title="js操作样式" target="_blank">js操作样式</a> <span class="text-muted">郝加升</span> <div>DOM样式属性和方法:指定的元素,它的style有这么几个属性和方法:cssText:通过这个属性可以访问到元素的特性style设置的属性,并且可以直接赋值设置。removeProperty(属性名称):从样式中删除给定属性。setProperty(属性名称,值,权重):可以通过这个方法设置给定样式的同时设置其权重,可以传入”important”或者一个空字符串。获取计算后样式:window.ge</div> </li> <li><a href="/article/1950212516172853248.htm" title="旧系统UI焕新陷阱:保留业务习惯与引入新交互的平衡点把控" target="_blank">旧系统UI焕新陷阱:保留业务习惯与引入新交互的平衡点把控</a> <span class="text-muted">贝格前端工场</span> <a class="tag" taget="_blank" href="/search/ui/1.htm">ui</a><a class="tag" taget="_blank" href="/search/%E4%BA%A4%E4%BA%92/1.htm">交互</a> <div>摘要**想给老旧系统换上“高颜值新衣”,却遭遇员工集体吐槽“不会用”?满心期待新交互能提升效率,结果用户操作频频出错,业务进度反而被拖慢?旧系统UI焕新本是优化体验的好机会,可在保留多年养成的业务操作习惯,与引入更先进便捷的新交互方式之间,却横亘着巨大鸿沟。稍有不慎,就会陷入“改了不如不改”的尴尬境地。这场关于“守旧”与“创新”的博弈,究竟该如何破局?一、旧系统UI焕新:一场甜蜜又棘手的改造工程旧</div> </li> <li><a href="/article/1950209116165173248.htm" title="uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程,uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录(提供完整示例代码,一键复制开箱即用)" target="_blank">uniapp微信小程序 - 详解微信小程序平台用户授权登录全流程,uniapp v3版本中小程序端开发下用户点击登录后获取手机号/昵称/性别/头像等信息完成登录(提供完整示例代码,一键复制开箱即用)</a> <span class="text-muted">十一猫咪爱养鱼</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E7%BB%84%E4%BB%B6%E4%B8%8E%E5%8A%9F%E8%83%BD%28%E5%BC%80%E7%AE%B1%E5%8D%B3%E7%94%A8%29/1.htm">前端组件与功能(开箱即用)</a><a class="tag" taget="_blank" href="/search/uniapp%E5%B8%B8%E8%A7%81%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3/1.htm">uniapp常见问题解决</a><a class="tag" taget="_blank" href="/search/uniapp/1.htm">uniapp</a><a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/uniapp3%E5%B0%8F%E7%A8%8B%E5%BA%8F%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95/1.htm">uniapp3小程序授权登录</a><a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%99%BB%E5%BD%95%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E4%BF%A1%E6%81%AF%E6%95%99%E7%A8%8B/1.htm">微信小程序登录获取用户信息教程</a><a class="tag" taget="_blank" href="/search/%E8%8E%B7%E5%8F%96%E7%94%A8%E6%88%B7%E6%98%B5%E7%A7%B0%E6%89%8B%E6%9C%BA%E5%8F%B7%E5%A4%B4%E5%83%8F%E4%BF%A1%E6%81%AF%E7%99%BB%E5%BD%95/1.htm">获取用户昵称手机号头像信息登录</a><a class="tag" taget="_blank" href="/search/vue3%E7%89%88%E6%9C%AC%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0%E6%8E%88%E6%9D%83%E7%99%BB%E5%BD%95/1.htm">vue3版本小程序平台授权登录</a><a class="tag" taget="_blank" href="/search/uniap%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%AB%AF%E7%94%A8%E6%88%B7%E7%99%BB%E5%BD%95%E6%B5%81%E7%A8%8B/1.htm">uniap小程序端用户登录流程</a><a class="tag" taget="_blank" href="/search/uni%E5%AE%8C%E6%95%B4%E7%9A%84%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%B9%B3%E5%8F%B0%E7%99%BB%E5%BD%95%E6%BA%90%E7%A0%81/1.htm">uni完整的小程序平台登录源码</a> <div>效果图在uniapp微信小程序端开发中,超详细实现用户授权登录完整功能源码,用户授权后获取手机号/昵称/头像/性别等,提供完整思路流程及逻辑讲解。uniappVue3和Vue2都能用,你也可以直接复制粘贴,然后改下参数放到你的项目中去就行。整体思路做功能之前,先来看一下整体流程是</div> </li> <li><a href="/article/1950208989954371584.htm" title="Selenium 特殊控件操作与 ActionChains 实践详解" target="_blank">Selenium 特殊控件操作与 ActionChains 实践详解</a> <span class="text-muted">小馋喵知识杂货铺</span> <a class="tag" taget="_blank" href="/search/selenium/1.htm">selenium</a><a class="tag" taget="_blank" href="/search/%E6%B5%8B%E8%AF%95%E5%B7%A5%E5%85%B7/1.htm">测试工具</a> <div>1.下拉框单选操作(a)使用SeleniumSelect类(标准HTML标签)Selenium提供了内置的Select类用于操作标准下拉框,这种方式简单且直观。fromselenium.webdriver.support.uiimportSelect#定位下拉框dropdown=Select(driver.find_element("id","dropdown_id"))#通过以下三种方式选择单个</div> </li> <li><a href="/article/1950202936449626112.htm" title="Qwen3 大模型实战:使用 vLLM 部署与函数调用(Function Call)全攻略" target="_blank">Qwen3 大模型实战:使用 vLLM 部署与函数调用(Function Call)全攻略</a> <span class="text-muted">曦紫沐</span> <a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B/1.htm">大模型</a><a class="tag" taget="_blank" href="/search/%E5%A4%A7%E6%A8%A1%E5%9E%8B%E9%83%A8%E7%BD%B2/1.htm">大模型部署</a><a class="tag" taget="_blank" href="/search/Qwen3/1.htm">Qwen3</a><a class="tag" taget="_blank" href="/search/vLLM/1.htm">vLLM</a><a class="tag" taget="_blank" href="/search/%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8/1.htm">函数调用</a> <div>文章摘要本文将带你从零开始,深入掌握如何使用Qwen3-8B大语言模型,结合vLLM进行高性能部署,并通过函数调用(FunctionCall)实现模型与外部工具的智能联动。我们将详细讲解部署命令、调用方式、代码示例及实际应用场景,帮助你快速构建基于Qwen3的智能应用。一、Qwen3简介与部署环境准备Qwen3是通义千问系列的最新一代大语言模型,具备强大的自然语言理解和生成能力,尤其在函数调用、工</div> </li> <li><a href="/article/1950198522972270592.htm" title="Java8 Stream流的sorted()的排序【正序、倒序、多字段排序】" target="_blank">Java8 Stream流的sorted()的排序【正序、倒序、多字段排序】</a> <span class="text-muted">Tony666688888</span> <a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>针对集合排序,java8可以用Stream流的sorted()进行排序。示例Bean以下我们会使用这个Bean来做示例。publicclassOrder{privateStringweight;privateDoubleprice;privateStringdateStr;//忽略getter、setter、构造方法、toString}字段排序首先是比较器Comparator,形式如下:Compa</div> </li> <li><a href="/article/1950196906563006464.htm" title="Unity学习笔记1" target="_blank">Unity学习笔记1</a> <span class="text-muted">zy_777</span> <div>通过一个星期的简单学习,初步了解了下unity,unity的使用,以及场景的布局,UI,以及用C#做一些简单的逻辑。好记性不如烂笔头,一些关键帧还是记起来比较好,哈哈,不然可能转瞬即逝了,(PS:纯小白观点,unity大神可以直接忽略了)一:MonoBehaviour类的初始化1,Instantiate()创建GameObject2,通过Awake()和Start()来做初始化3,Update、L</div> </li> <li><a href="/article/1950194742100815872.htm" title="用代码生成艺术字:设计个性化海报的秘密" target="_blank">用代码生成艺术字:设计个性化海报的秘密</a> <span class="text-muted"></span> <div>本文围绕“用代码生成艺术字:设计个性化海报的秘密”展开,先概述代码生成艺术字在海报设计中的独特价值,接着介绍常用的代码工具(如HTML、CSS、JavaScript等),详细阐述从构思到实现的完整流程,包括字体样式设计、动态效果添加等,还分享了提升艺术字质感的技巧及实际案例。最后总结代码生成艺术字的优势,为设计师提供打造个性化海报的实用指南,助力提升海报设计的独特性与吸引力,符合搜索引擎SEO标准</div> </li> <li><a href="/article/1950193455162519552.htm" title="19.0-《超越感觉》-说服他人" target="_blank">19.0-《超越感觉》-说服他人</a> <span class="text-muted">SAM52</span> <div>Becausethoughtfuljudgmentsdeservetobeshared,andthewaytheyarepresentedcanstronglyinfluencethewayothersreacttothem.因为经过深思熟虑的判断值得分享,而这些判断的呈现方式会强烈影响其他人对它们的反应。Bylearningtheprinciplesofpersuasionandapplying</div> </li> <li><a href="/article/1950192849786040320.htm" title="AI人工智能中的数据挖掘:提升智能决策能力" target="_blank">AI人工智能中的数据挖掘:提升智能决策能力</a> <span class="text-muted"></span> <div>AI人工智能中的数据挖掘:提升智能决策能力关键词:数据挖掘、人工智能、机器学习、智能决策、数据分析、特征工程、模型优化摘要:本文深入探讨了数据挖掘在人工智能领域中的核心作用,重点分析了如何通过数据挖掘技术提升智能决策能力。文章从基础概念出发,详细介绍了数据挖掘的关键算法、数学模型和实际应用场景,并通过Python代码示例展示了数据挖掘的全流程。最后,文章展望了数据挖掘技术的未来发展趋势和面临的挑战</div> </li> <li><a href="/article/1950181127176122368.htm" title="C++中std::variant的使用详解和实战代码示例" target="_blank">C++中std::variant的使用详解和实战代码示例</a> <span class="text-muted">点云SLAM</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</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/variant/1.htm">variant</a><a class="tag" taget="_blank" href="/search/C%2B%2B%E6%B3%9B%E5%9E%8B%E7%BC%96%E7%A8%8B/1.htm">C++泛型编程</a><a class="tag" taget="_blank" href="/search/%E8%81%94%E5%90%88%E4%BD%93/1.htm">联合体</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/%E7%B1%BB%E5%9E%8B%E6%93%A6%E9%99%A4%E6%9C%BA%E5%88%B6/1.htm">类型擦除机制</a><a class="tag" taget="_blank" href="/search/C%2B%2B17/1.htm">C++17</a> <div>std::variant是C++17引入的一个类型安全的联合体(type-safeunion),它可以在多个类型之间存储一个值,并在编译时进行类型检查。它是现代C++类型擦除与泛型编程的核心工具之一,适用于构建可变类型结构、消息传递系统、状态机等。一、基本概念#includestd::variantv;类似于联合体union,但类型安全。std::variant只能存储其中一个类型的值。默认构造时</div> </li> <li><a href="/article/1950181126731526144.htm" title="[Ljava.lang.Object; cannot be cast to [Ljava.lang.String;" target="_blank">[Ljava.lang.Object; cannot be cast to [Ljava.lang.String;</a> <span class="text-muted">这些不会的</span> <div>解释:这个错误是很常见的错误,错误的提示已经很清楚了就是java的Object数组不能转换成为String[]数组,这就说明你要转换的数组它本身是Object类型的数组,但是你却非要把它转换为String类的数组,这当然是错误的。示例:[java]viewplaincopypackagecom.dada;importjava.util.ArrayList;importjava.util.List;</div> </li> <li><a href="/article/1950178478011772928.htm" title="全面解析:Spring Gateway如何优雅处理微服务的路由转发?" target="_blank">全面解析:Spring Gateway如何优雅处理微服务的路由转发?</a> <span class="text-muted">万猫学社</span> <a class="tag" taget="_blank" href="/search/gateway/1.htm">gateway</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a> <div>SpringGateway简介SpringGateway,这是一个基于Spring5、SpringBoot2和ProjectReactor的API网关。它旨在为微服务架构提供一个简单、有效的统一的API路由、限流、熔断等功能。在微服务的世界里,SpringGateway就像一个交通警察,负责指挥和引导各个微服务之间的交通。相较于其他的网关技术,比如Nginx、Zuul等,SpringGateway</div> </li> <li><a href="/article/1950177595232415744.htm" title="探索高效文档转换新路径:Aspose.Words v18.7助力Word无缝变PDF" target="_blank">探索高效文档转换新路径:Aspose.Words v18.7助力Word无缝变PDF</a> <span class="text-muted">邴卉露Robust</span> <div>探索高效文档转换新路径:Aspose.Wordsv18.7助力Word无缝变PDF【下载地址】Aspose.Wordsv18.7C示例源码Word转PDF无需安装Office本仓库提供了一个使用Aspose.Wordsv18.7将Word文档转换为PDF文档的C#示例源码。Aspose.Words是一个强大的.NET控件,允许开发者在不安装MicrosoftOffice的情况下读写Word文档,并</div> </li> <li><a href="/article/1950175200347746304.htm" title="深入剖析 boost::unique_lock<boost::mutex>" target="_blank">深入剖析 boost::unique_lock<boost::mutex></a> <span class="text-muted">程序员乐逍遥</span> <a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/Boost%E5%BA%93/1.htm">Boost库</a><a class="tag" taget="_blank" href="/search/C%2FC%2B%2B%E5%A4%9A%E7%BA%BF%E7%A8%8B%E7%BC%96%E7%A8%8B%E4%B8%93%E9%A2%98/1.htm">C/C++多线程编程专题</a><a class="tag" taget="_blank" href="/search/C%2B%2B/1.htm">C++</a><a class="tag" taget="_blank" href="/search/boost/1.htm">boost</a><a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B/1.htm">线程</a><a class="tag" taget="_blank" href="/search/%E9%94%81/1.htm">锁</a> <div>在高并发的C++程序中,线程安全是永恒的主题。而boost::unique_lock作为Boost.Thread库中的核心组件,为开发者提供了强大、灵活且异常安全的互斥量管理机制。它不仅是RAII(ResourceAcquisitionIsInitialization)设计模式的典范,更是实现复杂线程同步逻辑的基石。一、从lock_guard的说起在介绍unique_lock之前,我们先回顾其“简</div> </li> <li><a href="/article/1950174315609649152.htm" title="Python Gradio:实现交互式图像编辑" target="_blank">Python Gradio:实现交互式图像编辑</a> <span class="text-muted">PythonAI编程架构实战家</span> <a class="tag" taget="_blank" href="/search/Python%E7%BC%96%E7%A8%8B%E4%B9%8B%E9%81%93/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><a class="tag" taget="_blank" href="/search/ai/1.htm">ai</a> <div>PythonGradio:实现交互式图像编辑关键词:Python,Gradio,交互式图像编辑,计算机视觉,深度学习,图像处理,Web应用摘要:本文将深入探讨如何使用Python的Gradio库构建交互式图像编辑应用。我们将从基础概念开始,逐步介绍Gradio的核心功能,并通过实际代码示例展示如何实现各种图像处理功能。文章将涵盖图像滤镜应用、对象检测、风格迁移等高级功能,同时提供完整的项目实战案例</div> </li> <li><a href="/article/1950174063116742656.htm" title="数据可视化:数据世界的直观呈现" target="_blank">数据可视化:数据世界的直观呈现</a> <span class="text-muted">卢政权1</span> <a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%88%86%E6%9E%90/1.htm">数据分析</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E6%8C%96%E6%8E%98/1.htm">数据挖掘</a> <div>在当今数字化浪潮中,数据呈爆炸式增长。数据可视化作为一种强大的技术手段,能够将复杂的数据转化为直观的图形、图表等形式,让数据背后的信息一目了然。无论是在商业决策、科学研究还是日常数据分析中,数据可视化都发挥着极为重要的作用。它帮助我们快速理解数据的分布、趋势、关联等特征,从而为进一步的分析和行动提供有力支持。接下来,我们将深入探讨数据可视化的奥秘,并通过代码示例展示其实际应用。一、Python数据</div> </li> <li><a href="/article/1950171826709655552.htm" title="旅游英语【家庭聚餐风波】" target="_blank">旅游英语【家庭聚餐风波】</a> <span class="text-muted">Cavin1005</span> <div>Reed,Ihopeyou'rehungry.Thelobsterhereisfantastic!Dad,Idon'twantlobster...It'sthespecialty!Justtryit!Butldon'twantto...You'veneverevenhadit!Becauseit'sgross!Oops.Areyoureadytoorder?Um,almost.Couldyoure</div> </li> <li><a href="/article/1950170537007312896.htm" title=".net平台的跨平台桌面应用开发的技术方案总结对比" target="_blank">.net平台的跨平台桌面应用开发的技术方案总结对比</a> <span class="text-muted">yuanpan</span> <a class="tag" taget="_blank" href="/search/.net/1.htm">.net</a> <div>目前,.NET平台提供了多种跨平台桌面应用开发的技术方案,主要包括.NETMAUI、AvaloniaUI、UnoPlatform、Eto.Forms等。以下是它们的核心特点及优缺点对比:1..NETMAUI(.NETMulti-platformAppUI)支持平台:Windows、macOS、iOS、Android核心特点:微软官方维护,继承自Xamarin.Forms,支持XAML和C#开发。提</div> </li> <li><a href="/article/1950169526440095744.htm" title="从零到一:打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战" target="_blank">从零到一:打造基于GigaChat AI的艺术创作平台 | 笙囧同学的全栈开发实战</a> <span class="text-muted"></span> <div>作者简介:笙囧同学,中科院计算机大模型方向硕士,全栈开发爱好者联系方式:3251736703@qq.com各大平台账号:笙囧同学座右铭:偷懒是人生进步的阶梯前言在AI技术飞速发展的今天,如何将前沿的大模型技术与实际应用相结合,一直是我们开发者关注的焦点。今天,笙囧同学将带大家从零开始,构建一个基于GigaChatAI的艺术创作平台,实现React前端+Django后端的完整全栈解决方案。这不仅仅是</div> </li> <li><a href="/article/1950167255027347456.htm" title="qt报错说no suitable kits found" target="_blank">qt报错说no suitable kits found</a> <span class="text-muted"></span> <div>看起来你的QtCreator在试图找一个"kit"来编译你的程序,但是没有找到合适的kit.Kit是QtCreator中用来配置编译环境的一种东西,它包含了编译器、编译选项、以及所要使用的Qt库等信息.当QtCreator试图找一个kit来编译你的程序时,如果没有找到合适的kit,就会出现这个错误.要解决这个问题,你需要在QtCreator中配置一个合适的kit.具体来说,你需要安装Qt库和编译器</div> </li> <li><a href="/article/1950164482621763584.htm" title="彻底搞懂Cache-Control" target="_blank">彻底搞懂Cache-Control</a> <span class="text-muted">qu木木</span> <a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a><a class="tag" taget="_blank" href="/search/http/1.htm">http</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a> <div>文章目录一、是什么?二、核心作用三、指令详解(常用)四、常见场景配置示例五、重要注意事项一、是什么?Cache-Control是HTTP头部中最关键、最灵活的控制缓存的字段,用于定义在客户端(浏览器)和代理服务器(如CDN)上的缓存策略。它取代了HTTP/1.0时代较为简单的Expires和Pragma头部,提供了更精细的控制。二、核心作用是否缓存:明确支出响应是否可以缓存,以及可以被谁缓存(浏览</div> </li> <li><a href="/article/1950164356310298624.htm" title="c#分层设计介绍" target="_blank">c#分层设计介绍</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/java/1.htm">java</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> <div>领域驱动分层介绍UI(表示层)最容易理解,这一层负责显示信息给用户,并解释用户的命令。有时,用户不是人,而是另一个系统。应用层用于协调领域模型对象的动作。不建议这一层包含业务规则或领域知识,即使是维护状态也不行——这是领域模型做的事情。应用层对于协调任务和把动作委托给领域模型非常有用。虽然不用于维护业务实体的状态,单应用层可以维护跟踪用户或者系统所执行的当前任务的状态。应用层不干涉阻碍领域模型,这</div> </li> <li><a href="/article/1950164355706318848.htm" title="001 Configuration结构体构造" target="_blank">001 Configuration结构体构造</a> <span class="text-muted">盖世灬英雄z</span> <a class="tag" taget="_blank" href="/search/DramSys/1.htm">DramSys</a><a class="tag" taget="_blank" href="/search/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>目录DramSys代码分析1Configuration结构体构造1.1`from_path`函数详解1.2构造过程总结这种设计的好处2Simulator例化过程2.1instantiateInitiatorDramSys代码分析1Configuration结构体构造好的,我们来详细解释一下DRAMSysConfiguration.cpp文件中from_path函数的配置构造过程。这个文件是DRAM</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>