第十篇【传奇开心果系列】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/1773609370521763840.htm" title="微信小程序监听用户经纬度变化" target="_blank">微信小程序监听用户经纬度变化</a> <span class="text-muted">某公司摸鱼前端</span> <a class="tag" taget="_blank" href="/search/%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">微信小程序</a><a class="tag" taget="_blank" href="/search/%E5%B0%8F%E7%A8%8B%E5%BA%8F/1.htm">小程序</a> <div>一些打卡App需要根据用户的位置来完成打卡那么就需要监听用户位置变化情况:示例://在某个生命周期函数中,如onLoad中onLoad:function(options){//开始监听位置变化wx.startLocationUpdate({success:function(){console.log('开始更新位置');},fail:function(){console.log('开始更新位置失败</div> </li> <li><a href="/article/1773605468367814656.htm" title="数据结构奇妙旅程之深入解析快速排序" target="_blank">数据结构奇妙旅程之深入解析快速排序</a> <span class="text-muted">山间漫步人生路</span> <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%8E%92%E5%BA%8F%E7%AE%97%E6%B3%95/1.htm">排序算法</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a> <div>快速排序(QuickSort)是一种高效的排序算法,它使用了分治法的策略来将一个数组排序。其基本思想是选择一个基准元素,通过一趟排序将待排序的数据分割成独立的两部分,其中一部分的所有数据都比基准元素小,另一部分的所有数据都比基准元素大,然后再按此方法对这两部分数据分别进行快速排序,整个排序过程可以递归进行,以此达到整个数据变成有序序列。工作原理选择基准:从待排序的序列中选一个元素作为基准(pivo</div> </li> <li><a href="/article/1773603578330546176.htm" title="Flink中的SQL Client和SQL Gateway" target="_blank">Flink中的SQL Client和SQL Gateway</a> <span class="text-muted">BigDataMLApplication</span> <a class="tag" taget="_blank" href="/search/flink/1.htm">flink</a><a class="tag" taget="_blank" href="/search/flink/1.htm">flink</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/gateway/1.htm">gateway</a> <div>Flink中的SQLClient和SQLGateway对比目录定义基本原理适用场景主要区别常用运维命令示例官方链接正文1.定义SQLClient:FlinkSQLClient是一种用于提交和执行FlinkSQL语句的命令行界面或图形界面工具。SQLGateway:FlinkSQLGateway是一个独立的服务,它允许客户端通过RESTfulAPI将SQL查询提交到Flink集群。2.基本原理SQL</div> </li> <li><a href="/article/1773594892119900160.htm" title="LeetCode1047:删除字符串中的所有相邻重复项" target="_blank">LeetCode1047:删除字符串中的所有相邻重复项</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%AE%97%E6%B3%95/1.htm">算法</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/c%2B%2B/1.htm">c++</a><a class="tag" taget="_blank" href="/search/leetcode/1.htm">leetcode</a> <div>题目描述给出由小写字母组成的字符串S,重复项删除操作会选择两个相邻且相同的字母,并删除它们。在S上反复执行重复项删除操作,直到无法继续删除。在完成所有重复项删除操作后返回最终的字符串。答案保证唯一。示例:输入:“abbaca”输出:“ca”解释:例如,在“abbaca”中,我们可以删除“bb”由于两字母相邻且相同,这是此时唯一可以执行删除操作的重复项。之后我们得到字符串“aaca”,其中又只有“a</div> </li> <li><a href="/article/1773588094755340288.htm" title="美团自动配送车2024春季招聘 | 社招专场" target="_blank">美团自动配送车2024春季招聘 | 社招专场</a> <span class="text-muted">美团技术团队</span> <div>关于美团自动配送团队美团自动配送以自研L4级自动驾驶软硬件技术为核心,与美团即时零售业务结合,形成满足公开道路、校园、社区、工业园区等室外全场景下的自动配送整体解决方案。美团自动配送团队成立于2016年,团队成员来自于Waymo、Cruise、Pony.ai、泛亚等自动驾驶行业头部公司,自动驾驶技术团队博士占比高达30%,依靠视觉、激光等传感器,实时感知预测周围环境,通过高精地图定位和智能决策规划</div> </li> <li><a href="/article/1773571984861495296.htm" title="llama.cpp 编译安装@Ubuntu" target="_blank">llama.cpp 编译安装@Ubuntu</a> <span class="text-muted">skywalk8163</span> <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E5%AE%9E%E8%B7%B5/1.htm">项目实践</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a><a class="tag" taget="_blank" href="/search/llama/1.htm">llama</a><a class="tag" taget="_blank" href="/search/ubuntu/1.htm">ubuntu</a><a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/%E4%BA%BA%E5%B7%A5%E6%99%BA%E8%83%BD/1.htm">人工智能</a> <div>在Kylin和Ubuntu编译llama.cpp,具体参考:llama模型c语言推理@FreeBSD-CSDN博客现在代码并编译:gitclonehttps://github.com/ggerganov/llama.cppcdllama.cppmkdirbuildcdbuildcmake..cmake--build.--configRelease#可选安装makeinstall#或可选添加路径ex</div> </li> <li><a href="/article/1773565312734658560.htm" title="【算法分析与设计】去除重复字母" target="_blank">【算法分析与设计】去除重复字母</a> <span class="text-muted">五敷有你</span> <a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95%E5%88%86%E6%9E%90%E4%B8%8E%E8%AE%BE%E8%AE%A1/1.htm">算法分析与设计</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/%E7%AE%97%E6%B3%95/1.htm">算法</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E7%BB%93%E6%9E%84/1.htm">数据结构</a> <div>个人主页:五敷有你系列专栏:算法分析与设计⛺️稳中求进,晒太阳题目给你一个字符串s,请你去除字符串中重复的字母,使得每个字母只出现一次。需保证返回结果的字典序最小(要求不能打乱其他字符的相对位置)。示例示例1:输入:s="bcabc"输出:"abc"示例2:输入:s="cbacdcbc"输出:"acdb"思路贪心+单调栈实现【字符串删除一个字符使其字典序最小的贪心策略】:对于两个长度相同的字符串,</div> </li> <li><a href="/article/1773518990962917376.htm" title="chrome扩展,“manifest_version“: 3, chrome 扩展图标点击事件" target="_blank">chrome扩展,“manifest_version“: 3, chrome 扩展图标点击事件</a> <span class="text-muted">徐同保</span> <a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>在Chrome扩展中,从ManifestV3开始,后台脚本(backgroundscripts)被服务工作线程(serviceworkers)所取代。这改变了扩展图标点击事件(通常称为浏览器操作或者页面操作)的处理方式。在ManifestV3中,您需要使用chrome.action.onClicked监听器来处理扩展图标的点击事件。下面是一个如何设置扩展图标点击事件处理器的示例:在manifest</div> </li> <li><a href="/article/1773515340869861376.htm" title="npm 搭建 Vite 项目" target="_blank">npm 搭建 Vite 项目</a> <span class="text-muted">渺小的虫子</span> <a class="tag" taget="_blank" href="/search/viter/1.htm">viter</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>兼容性注意Vite需要Node.js版本>=12.0.0。1、使用npm安装Viter$npminitvite@latest使用npm初始化项目#npm6.xnpminitvite@latestmy-vue-app--templatevue#npm7+,需要额外的双横线:npminitvite@latestmy-vue-app----templatevue2、配置路由:npminstallvue-</div> </li> <li><a href="/article/1773504028425125888.htm" title="4.24 使用计算命令制作图像合成艺术效果 [Ps教程]" target="_blank">4.24 使用计算命令制作图像合成艺术效果 [Ps教程]</a> <span class="text-muted">互动教程网</span> <div>1.本节课程将为您演示,如何使用[计算]命令,将两张示例图片,制作成超酷的图像合成特效。首先点击顶部的文档标签,切换至另一张示例图片。image2.接着依次点击[图像>计算]命令,弹出[计算]窗口。image3.[计算]命令,用于混合两个来自一个或多个源图像的单个通道。然后可以将结果应用到新图像、新通道或当前图像的选区中。image4.在弹出的计算窗口中,点击下拉箭头,选择[计算]命令的源图片。i</div> </li> <li><a href="/article/1773501994674225152.htm" title="虚拟 DOM 的优缺点有哪些" target="_blank">虚拟 DOM 的优缺点有哪些</a> <span class="text-muted">咕噜签名分发</span> <a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>虚拟DOM(VirtualDOM)技术作为现代前端开发中的重要组成部分,已经成为了众多流行前端框架的核心特性。它的引入为前端开发带来了诸多优势,同时也需要我们认真思考其潜在的考量。下面简单的介绍一下虚拟DOM技术的优势与缺点,深入探讨其在实际应用中的影响。提升性能虚拟DOM的最大优势之一是提升页面性能。通过比较前后两次虚拟DOM树的差异,最小化实际DOM操作,从而减少页面重渲染时的性能消耗。这种优</div> </li> <li><a href="/article/1773495574226599936.htm" title="3、JavaWeb-Ajax/Axios-前端工程化-Element" target="_blank">3、JavaWeb-Ajax/Axios-前端工程化-Element</a> <span class="text-muted">所谓远行Misnearch</span> <a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/JavaWeb/1.htm">JavaWeb</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a> <div>P34Ajax介绍Ajax:AsynchroousJavaScriptAndXML,异步的JS和XMLJS网页动作,XML一种标记语言,存储数据,作用:数据交换:通过Ajax给服务器发送请求,并获取服务器响应的数据异步交互:在不重新加载整个页面的情况下,与服务器交换数据并实现更新部分网页的技术,例如:搜索联想、用户名是否可用的校验等等。同步与异步:同步:服务器在处理中客户端要处于等待状态,输入域名</div> </li> <li><a href="/article/1773495447948689408.htm" title="docker怎么端口映射" target="_blank">docker怎么端口映射</a> <span class="text-muted">Lance_mu</span> <a class="tag" taget="_blank" href="/search/docker/1.htm">docker</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E8%BF%90%E7%BB%B4/1.htm">运维</a> <div>1、默认固定的端口#Web服务器:WebApache或Nginx通常使用80端口HTTP:80HTTPS:443#数据库服务器MySQL:3306PostgreSQL:5432MongoDB:27017Redis:6379#邮件服务器SMTP:25POP3:110IMAP:143#其他服务SSH:22FTP:21DNS(域名解析):53代理服务器Squid:3128版本控制系统Git:9418(S</div> </li> <li><a href="/article/1773475938193965056.htm" title="golang 加密" target="_blank">golang 加密</a> <span class="text-muted">大鲤余</span> <a class="tag" taget="_blank" href="/search/Golang/1.htm">Golang</a><a class="tag" taget="_blank" href="/search/golang/1.htm">golang</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/%E5%90%8E%E7%AB%AF/1.htm">后端</a> <div>代码示例packageutilsimport("crypto/md5""encoding/hex""golang.org/x/crypto/bcrypt")//BcryptHash使用bcrypt对数据进行加密funcBcryptHash(passwordstring)string{bytes,_:=bcrypt.GenerateFromPassword([]byte(password),bcry</div> </li> <li><a href="/article/1773465740763004928.htm" title="第一次用eclipse,导入项目错误Plug-in “org.eclipse.m2e.editor“ was unable to instantiate MavenPomEditor" target="_blank">第一次用eclipse,导入项目错误Plug-in “org.eclipse.m2e.editor“ was unable to instantiate MavenPomEditor</a> <span class="text-muted">zhangfeng1133</span> <a class="tag" taget="_blank" href="/search/eclipse/1.htm">eclipse</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ide/1.htm">ide</a> <div>第一次用eclipse,导入项目错误Plug-in"org.eclipse.m2e.editor"wasunabletoinstantiateMavenPomEditor。各种项目包,都不存在,maven应该能自动载入类包,比Php的composer方便太多Thecontainer'MavenDependencies'referencesnonexistinglibrary'C:\Users\Ad</div> </li> <li><a href="/article/1773458565772673024.htm" title="【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总(更新中)" target="_blank">【鸿蒙HarmonyOS开发笔记】ArkUI常用组件介绍汇总(更新中)</a> <span class="text-muted">温、</span> <a class="tag" taget="_blank" href="/search/%E9%B8%BF%E8%92%99HarmonyOS%E5%BC%80%E5%8F%91%E7%AC%94%E8%AE%B0/1.htm">鸿蒙HarmonyOS开发笔记</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%AE%B0%E5%BD%95/1.htm">学习记录</a><a class="tag" taget="_blank" href="/search/harmonyos/1.htm">harmonyos</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/%E5%8D%8E%E4%B8%BA/1.htm">华为</a> <div>概述此文总结开发中用到的一些常用组件,便于查阅,此文持续更新,闲的没事就更线性布局(Row/Column)不多介绍了,最常用的布局组件,两者除了方向不一样,别的都一样方便起见下面只写Column常用属性排列方向上的间距:spaceColumn({space:20}){Row().width('90%').height(50).backgroundColor(0xF5DEB3)Row().width</div> </li> <li><a href="/article/1773420547133210624.htm" title="ruoyi使用笔记" target="_blank">ruoyi使用笔记</a> <span class="text-muted">万变不离其宗_8</span> <a class="tag" taget="_blank" href="/search/%E9%A1%B9%E7%9B%AE%E7%AC%94%E8%AE%B0/1.htm">项目笔记</a><a class="tag" taget="_blank" href="/search/%E4%BB%A3%E7%A0%81%E5%8F%82%E8%80%83%E7%AC%94%E8%AE%B0/1.htm">代码参考笔记</a><a class="tag" taget="_blank" href="/search/%E7%AC%94%E8%AE%B0/1.htm">笔记</a><a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>1.限流处理@RateLimiter@PostMapping("/createOrder")@ApiOperation("创建充值订单")@RateLimiter(key=CacheConstants.REPEAT_SUBMIT_KEY,time=10,count=1,limitType=LimitType.IP)publicRcreateOrder(@RequestBodyFormform){/</div> </li> <li><a href="/article/1773408210510741504.htm" title="webpack.prod.js(webpack生产环境配置文件)" target="_blank">webpack.prod.js(webpack生产环境配置文件)</a> <span class="text-muted">门板_</span> <a class="tag" taget="_blank" href="/search/webpack/1.htm">webpack</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a> <div>生产环境:只打包不运行本地服务器对于在config目录下的webpack.prod.js1.在根目录下运行npxwebpack--config./config/webpack.prod.js2.在package.json文件中配置"build":"npxwebpack--config./config/webpack.prod.js"constpath=require('path')constESL</div> </li> <li><a href="/article/1773403175781466112.htm" title="Python dict字符串转json对象,小数精度丢失问题" target="_blank">Python dict字符串转json对象,小数精度丢失问题</a> <span class="text-muted">朝如青丝 暮成雪</span> <a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a> <div>一前言JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式,dict是Python的一种数据格式。本篇介绍一个float数据转换时精度丢失的案例。二问题描述importjsontest_str1='{"π":3.1415926535897932384626433832795028841971}'test_str2='{"value":10.00000}'print</div> </li> <li><a href="/article/1773366674838323200.htm" title="k8s入门到实战(十)—— CronJob详细介绍及使用示例" target="_blank">k8s入门到实战(十)—— CronJob详细介绍及使用示例</a> <span class="text-muted">一弓虽</span> <a class="tag" taget="_blank" href="/search/k8s%E5%AD%A6%E4%B9%A0/1.htm">k8s学习</a><a class="tag" taget="_blank" href="/search/kubernetes/1.htm">kubernetes</a><a class="tag" taget="_blank" href="/search/%E5%AE%B9%E5%99%A8/1.htm">容器</a><a class="tag" taget="_blank" href="/search/%E4%BA%91%E5%8E%9F%E7%94%9F/1.htm">云原生</a> <div>CronJob什么是CronJob在k8s中,CronJob是一种用于定期执行任务的资源对象。它基于Cron表达式,允许您在指定的时间间隔内自动运行容器化的任务。CronJob可以定义以下属性:schedule:指定任务执行的时间表,使用标准的Cron表达式语法。例如,“0****”表示每小时执行一次任务。jobTemplate:定义要执行的任务的模板,通常是一个Pod模板。这个模板包含了任务所需</div> </li> <li><a href="/article/1773363905746239488.htm" title="Element-UI中el-time-picker时间选择器无法选择" target="_blank">Element-UI中el-time-picker时间选择器无法选择</a> <span class="text-muted">爱健身的小刘同学</span> <a class="tag" taget="_blank" href="/search/bug/1.htm">bug</a><a class="tag" taget="_blank" href="/search/Element/1.htm">Element</a><a class="tag" taget="_blank" href="/search/Vue%E7%B3%BB%E5%88%97/1.htm">Vue系列</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/elementui/1.htm">elementui</a> <div>前言前几天开发时,在做一个时间选择时,遇到了无法选中时间的问题在网络上找了解决方法,特此记录一下解决方法我的代码结构营业时间时间选择不上的原因是因为初始值问题很有可能是最开始赋值为空数组了所以有3个解决方法1.设置为nullbusinessTimeInfo:null2.设置当前时间businessTimeInfo:[newDate(newDate()),newDate(newDate())](默认</div> </li> <li><a href="/article/1773353080805457920.htm" title="Android 系统应用 pk8签名文件转jks或keystore教程" target="_blank">Android 系统应用 pk8签名文件转jks或keystore教程</a> <span class="text-muted">蜗牛、Z</span> <a class="tag" taget="_blank" href="/search/AOSP/1.htm">AOSP</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/Framework/1.htm">Framework</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/aosp/1.htm">aosp</a><a class="tag" taget="_blank" href="/search/%E7%B3%BB%E7%BB%9F%E5%BA%94%E7%94%A8%E5%BC%80%E5%8F%91/1.htm">系统应用开发</a> <div>一、介绍签名文件对于我们在做应用开发中,经常遇到,且签名文件不仅仅是保护应用安全,还会涉及到应用与底层之间的数据共享和API文件等问题。在Android中,签名文件同样也存在这个问题。但是android中又区分系统应用和普通应用。系统应用可以通过android:sharedUserId="android.uid.system"同享系统uid,可以获取更高的权限。所以在做系统应用开发的时候,经常需要</div> </li> <li><a href="/article/1773288759735943168.htm" title="lua 判断字符串是否包含指定字符" target="_blank">lua 判断字符串是否包含指定字符</a> <span class="text-muted">笨死de猪</span> <a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a> <div>一、string.find在Lua中,如果你想判断一个字符串是否包含特定的子字符串(例如a),你可以使用string.find函数。string.find函数会搜索第一个参数(字符串)中第二个参数(子字符串)出现的位置。如果找到了子字符串,它会返回子字符串开始和结束的位置(两个索引);如果没有找到,它会返回nil。以下是一个示例,展示如何判断一个字符串是否包含a:functioncontainsD</div> </li> <li><a href="/article/1773279695408791552.htm" title="Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)" target="_blank">Thinkphp - 详细实现网站系统登录功能,附带 Mysql 数据库设置、Web 前端展示界面、信息校验等(详细代码,即设计过程)</a> <span class="text-muted">王佳斌</span> <a class="tag" taget="_blank" href="/search/%2B/1.htm">+</a><a class="tag" taget="_blank" href="/search/Thinkphp/1.htm">Thinkphp</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a> <div>前言登录功能,是我们几乎开发每个系统都必须的模块。登录功能设计思路,主要包括几个方面。用户输入网址展示登录页面用户输入用户名,密码等点击登录进行信息校验校验通过之后,记录用户登录信息,跳转指定页面用户校验失败,提示失败信息页面目录具体功能实现为了快速搭建可用、美观的页面,我们采用一个比较成熟的前端框架Bootstrap。下面我们到Bootstrap的官网Bootsrap官网下载bootstrap。</div> </li> <li><a href="/article/1773256158274977792.htm" title="javascript 日期转换为时间戳,时间戳转换为日期的函数" target="_blank">javascript 日期转换为时间戳,时间戳转换为日期的函数</a> <span class="text-muted">cdcdhj</span> <a class="tag" taget="_blank" href="/search/javascript%E5%AD%A6%E4%B9%A0%E6%97%A5%E8%AE%B0/1.htm">javascript学习日记</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a> <div>日期转化为时间戳,主要用valueOf()来进行转化为毫秒时间戳,getTime()IOS系统无法解析转换,所以都有valueOf()letgetTimestampOrDate=function(timestamp){lettimeStamp='';constregex=/^\d{4}(-|\/)\d{2}(-|\/)\d{2}$/;constregex2=/^\d{4}(-|\/)\d{2}(-</div> </li> <li><a href="/article/1773240552423227392.htm" title="react native 总结" target="_blank">react native 总结</a> <span class="text-muted">一切顺势而行</span> <a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>reactapp.js相当与vueapp.vueimportReactfrom'react';import'./App.css';importReactRoutefrom'./router'import{HashRouterasRouter,Link}from'react-router-dom'classAppextendsReact.Component{constructor(props){su</div> </li> <li><a href="/article/1773239671145431040.htm" title="python项目练习——7.网站访问日志分析器" target="_blank">python项目练习——7.网站访问日志分析器</a> <span class="text-muted">F——</span> <a class="tag" taget="_blank" href="/search/python%E9%A1%B9%E7%9B%AE%E7%BB%83%E4%B9%A0/1.htm">python项目练习</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a><a class="tag" taget="_blank" href="/search/%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><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/%E5%AD%A6%E4%B9%A0/1.htm">学习</a> <div>项目功能分析:这个项目可以读取网站的访问日志文件,统计访问量、独立访客数、访问来源等信息,并以图表或表格的形式展示出来。这个项目涉及到文件操作、数据处理、数据可视化等方面的技术。示例代码:importrefromcollectionsimportCounterimportmatplotlib.pyplotaspltdefparse_log_file(log_file):#读取日志文件内容witho</div> </li> <li><a href="/article/1773229094205456384.htm" title="ReactNative应用打包后无网络解决方案" target="_blank">ReactNative应用打包后无网络解决方案</a> <span class="text-muted">程序猿也会飞</span> <a class="tag" taget="_blank" href="/search/%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5/1.htm">最佳实践</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/native/1.htm">native</a><a class="tag" taget="_blank" href="/search/android/1.htm">android</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</a> <div>ReactNative打包应用后,应用没有网络解决方案:在android\app\src\main\res下创建xml文件夹在xml文件夹中创建network_security_config.xml文件network_security_config.xml内容:在android\app\src\main文件夹AndroidManifest.xml文件内的Application标签中添加属性andr</div> </li> <li><a href="/article/1773218897500110848.htm" title="深入理解 React 中的 children props 和 render props" target="_blank">深入理解 React 中的 children props 和 render props</a> <span class="text-muted">JudithHuang</span> <a class="tag" taget="_blank" href="/search/React/1.htm">React</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E5%85%A5%E9%97%A8%E5%88%B0%E6%94%BE%E5%BC%83/1.htm">从入门到放弃</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.js</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>深入理解React中的childrenprops和renderprops在React中,childrenprops和renderprops是两种常见的组件复用模式,它们都可以帮助我们更好地组织和复用组件代码。虽然它们的实现方式有所不同,但都能够有效地实现组件之间的数据传递和功能共享。childrenpropschildrenprops是React中最常见的一种组件复用模式。通过childrenpr</div> </li> <li><a href="/article/1773212227294265344.htm" title="reactive和ref的异同、toRef和toRefs的使用" target="_blank">reactive和ref的异同、toRef和toRefs的使用</a> <span class="text-muted">Niucode</span> <a class="tag" taget="_blank" href="/search/vue3/1.htm">vue3</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a> <div>一、reactive和ref有了reactive为什么还要ref?ref处理起基本数据类型来更加的方便快捷,性能要更好。ref内部值的变化只会触发订阅它的副作用函数(effect)更新,而reactive(Proxy)内部对象的任何属性变化都会触发整个对象的重新渲染。相同点:都是Vue3提供的用于创建响应式数据的函数;在组件中都能够触发视图更新,实现数据的双向绑定。不同点:数据类型:reactiv</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>