React+Electron搭建桌面应用方法和步骤

React+Electron搭建桌面应用方法和步骤

步骤:

【一: 构建、配置入口】

  1. 创建react 项目应用
  2. 安装 Electron 依赖项
  3. 修改 package.json 文件
  4. 新建主线程文件 main.js 主线程文件
  5. 运行项目

【二: 改造配置、环境域名】

  1. 非必须:添加 合并启动执行命令 ,(有配置环境,不要用)
  2. 非必须:安装 cross-env 环境变量,(根据环境请求不同域名和内容)

具体步骤如下:

【一: 构建、配置入口】

【1.1】创建react 项目应用

创建 react 应用:

// 安装react脚手架
npm install -g create-react-app

// 创建项目(projectname替换自己的项目名,不能有横杠大写,可以用下划线)
create-react-app projectname

// 打开目录
cd projectname

//启动测试是否正常
npm start

详见我另一个博客:
react+js或react+ts(tsx)使用creat-react-app、yarn搭建步骤

【1.2】react 项目内安装 Electron 依赖项

// 优先使用这个
npm i --save-dev electron

// 或者(node版本过低的不能用):
npm install electron

【1.3】修改 package.json 文件

  • 添加 定义执行命令,详见【1.5】
  • 实际需要 删除package.json内的 所有注释。对象数组最后一个元素结尾不能有逗号
{
  "name": "my-electron",
  "version": "0.1.0",
  "private": true,
  "main": "main.js", // 配置启动文件 -- 需新建
  "homepage": ".", // 设置应用打包的根路径
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "react": "^17.0.1",
    "react-dom": "^18.0.0",
    "react-scripts": "4.0.1",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start", // 【原始】react 启动命令,需要额外执行 electron。同时启动这两个
    "electron": "electron .", // 【添加】electron 启动命令,需要额外执行 start。同时启动这两个
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "dev": "react-scripts start | electron . --debug", // 【2.1介绍】合并命令,若有环境变量配置,不能使用
    "dev:debug": "react-scripts start | electron . --debug", // 【2.1介绍】合并命令,debug 模式。若有环境变量配置,不能使用
    "start:dev": "cross-env MODE_ENV=development react-scripts start", // 【2.2介绍】配置环境变量
    "electron:dev": "cross-env MODE_ENV=development electron ." // 【2.2介绍】配置环境变量
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {
    "electron": "^18.1.0"
  }
}

【1.4】新建 main.js 主线程文件

路径:与package.json 同层次

// 导入app、BrowserWindow模块
// app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback),方法调用app.functionName(arg)
// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app
// Electron参考文档 https://www.electronjs.org/docs

const { app, BrowserWindow, nativeImage } = require('electron');
// const url = require('url');
// const path = require('path');

function createWindow () {
  let mainWindow = new BrowserWindow({
    width: 1000, // 窗口宽度
    height: 800, // 窗口高度
    title: "Electron", // 窗口标题,如果由loadURL()加载的HTML文件中含有标签,该属性可忽略</span>
    <span class="token literal-property property">icon</span><span class="token operator">:</span> nativeImage<span class="token punctuation">.</span><span class="token function">createFromPath</span><span class="token punctuation">(</span><span class="token string">'src/public/favicon.ico'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// "string" || nativeImage.createFromPath('src/image/icons/256x256.ico')从位于 path 的文件创建新的 NativeImage 实例</span>
    <span class="token literal-property property">webPreferences</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 网页功能设置</span>
      <span class="token literal-property property">nodeIntegration</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否启用node集成 渲染进程的内容有访问node的能力</span>
      <span class="token literal-property property">webviewTag</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否使用<webview>标签 在一个独立的 frame 和进程里显示外部 web 内容</span>
      <span class="token literal-property property">webSecurity</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用同源策略</span>
      <span class="token literal-property property">nodeIntegrationInSubFrames</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否允许在子页面(iframe)或子窗口(child window)中集成Node.js</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">// --------------------------------------------------------------------------------------------</span>

  <span class="token comment">// 【二选一:打包时候使用】__dirname为当前文件路径</span>
  <span class="token comment">// mainWindow.loadURL(url.format({</span>
  <span class="token comment">//   pathname: path.join(__dirname, './build/index.html'),</span>
  <span class="token comment">//   protocol: 'file:',</span>
  <span class="token comment">//   slashes: true</span>
  <span class="token comment">// }));</span>

  <span class="token comment">// 【二选一:开发时候使用】</span>
  <span class="token comment">//需要和本地项目启动会端口号一致,一般不需要改。多项目启动会有端口被占用而 改变情况</span>
  mainWindow<span class="token punctuation">.</span><span class="token function">loadURL</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/'</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 

<span class="token comment">// --------------------------------------------------------------------------------------------</span>

  <span class="token comment">// 解决应用启动白屏问题</span>
  mainWindow<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'ready-to-show'</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>
    mainWindow<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    mainWindow<span class="token punctuation">.</span><span class="token function">focus</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 comment">// 当窗口关闭时发出。在你收到这个事件后,你应该删除对窗口的引用,并避免再使用它。</span>
  mainWindow<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'closed'</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>
    mainWindow <span class="token operator">=</span> <span class="token keyword">null</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>

app<span class="token punctuation">.</span><span class="token function">whenReady</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>createWindow<span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'window-all-closed'</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 keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>platform <span class="token operator">!==</span> <span class="token string">'darwin'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span><span class="token function">quit</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>

app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'activate'</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 keyword">if</span> <span class="token punctuation">(</span>BrowserWindow<span class="token punctuation">.</span><span class="token function">getAllWindows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">createWindow</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><strong>【1.5】 运行项目</strong></p> 
  <p>【改造前】开发阶段,原本需要启动两个终端(react + electron),同时跑起来</p> 
  <pre><code class="prism language-javascript"><span class="token comment">// 第一个</span>
npm run start

<span class="token comment">// 第二个</span>
npm run electron
</code></pre> 
  <p>.</p> 
  <h2>【二: 改造配置、环境域名】</h2> 
  <p><strong>【2.1】<font color="red">非必须: 添加 合并启动执行命令</font></strong><br> 若配置环境变量【2.2】,此步骤忽略</p> 
  <p>位置:package.json / scripts。详见:【1.3】</p> 
  <pre><code class="prism language-javascript"><span class="token string-property property">"dev"</span><span class="token operator">:</span> <span class="token string">"react-scripts start | electron ."</span><span class="token punctuation">,</span> <span class="token comment">// 【2.1介绍】合并命令,若有环境变量配置,不能使用</span>
<span class="token string-property property">"dev:debug"</span><span class="token operator">:</span> <span class="token string">"react-scripts start | electron . --debug"</span> <span class="token comment">// 【2.1介绍】合并命令,debug 模式。若有环境变量配置,不能使用</span>
</code></pre> 
  <p><strong>执行命令</strong></p> 
  <pre><code class="prism language-javascript">npm run dev
<span class="token comment">// 或:</span>
npm run dev<span class="token operator">:</span>debug
</code></pre> 
  <p>若空白页刷新下,react的本地服务没有启动好就打开了客户端</p> 
  <p><strong>【2.2】<font color="red">非必须: 配置环境变量</font>,区分开发和打包模式,使用不同环境接口地址</strong></p> 
  <ul> 
   <li>若不嫌弃麻烦,自己手动注释切换也行</li> 
  </ul> 
  <blockquote> 
   <p>详见:我的另一个博客: React自定义node、cross-env、webpack等方式不同环境配置命令整理https://blog.csdn.net/weixin_44461275/article/details/122988359</p> 
  </blockquote> 
  <ul> 
   <li>安装:<font color="red">cross-env </font></li> 
  </ul> 
  <pre><code class="prism language-javascript">npm方式:
	npm install <span class="token operator">--</span>save cross<span class="token operator">-</span>env

cnpm方式:
	cnpm install <span class="token operator">--</span>save cross<span class="token operator">-</span>env

yarn方式:
	yarn add cross<span class="token operator">-</span>env
</code></pre> 
  <ul> 
   <li>配置执行命令:详见【1.3】package.json 文件</li> 
  </ul> 
  <pre><code class="prism language-javascript"><span class="token string-property property">"start:dev"</span><span class="token operator">:</span> <span class="token string">"cross-env MODE_ENV=development react-scripts start"</span><span class="token punctuation">,</span>
<span class="token string-property property">"electron:dev"</span><span class="token operator">:</span> <span class="token string">"cross-env MODE_ENV=development electron ."</span><span class="token punctuation">,</span>
</code></pre> 
  <ul> 
   <li>修改main.js</li> 
  </ul> 
  <pre><code class="prism language-javascript"><span class="token comment">// 导入app、BrowserWindow模块</span>
<span class="token comment">// app 控制应用程序的事件生命周期。事件调用app.on('eventName', callback),方法调用app.functionName(arg)</span>
<span class="token comment">// BrowserWindow 创建和控制浏览器窗口。new BrowserWindow([options]) 事件和方法调用同app</span>
<span class="token comment">// Electron参考文档 https://www.electronjs.org/docs</span>

<span class="token keyword">const</span> <span class="token punctuation">{</span> app<span class="token punctuation">,</span> BrowserWindow<span class="token punctuation">,</span> nativeImage <span class="token punctuation">}</span> <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'electron'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'url'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<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>

<span class="token keyword">function</span> <span class="token function">createWindow</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> mainWindow <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">BrowserWindow</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    <span class="token literal-property property">width</span><span class="token operator">:</span> <span class="token number">1000</span><span class="token punctuation">,</span> <span class="token comment">// 窗口宽度</span>
    <span class="token literal-property property">height</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span> <span class="token comment">// 窗口高度</span>
    <span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Electron"</span><span class="token punctuation">,</span> <span class="token comment">// 窗口标题,如果由loadURL()加载的HTML文件中含有标签<title>,该属性可忽略</span>
    <span class="token literal-property property">icon</span><span class="token operator">:</span> nativeImage<span class="token punctuation">.</span><span class="token function">createFromPath</span><span class="token punctuation">(</span><span class="token string">'src/public/favicon.ico'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token comment">// "string" || nativeImage.createFromPath('src/image/icons/256x256.ico')从位于 path 的文件创建新的 NativeImage 实例</span>
    <span class="token literal-property property">webPreferences</span><span class="token operator">:</span> <span class="token punctuation">{</span> <span class="token comment">// 网页功能设置</span>
      <span class="token literal-property property">nodeIntegration</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否启用node集成 渲染进程的内容有访问node的能力</span>
      <span class="token literal-property property">webviewTag</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token comment">// 是否使用<webview>标签 在一个独立的 frame 和进程里显示外部 web 内容</span>
      <span class="token literal-property property">webSecurity</span><span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span> <span class="token comment">// 禁用同源策略</span>
      <span class="token literal-property property">nodeIntegrationInSubFrames</span><span class="token operator">:</span> <span class="token boolean">true</span> <span class="token comment">// 是否允许在子页面(iframe)或子窗口(child window)中集成Node.js</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">// -----------------------------------------------------------------------------</span>

  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'process.env.MODE_ENV--------------'</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>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">MODE_ENV</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

  <span class="token keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>env<span class="token punctuation">.</span><span class="token constant">MODE_ENV</span> <span class="token operator">===</span> <span class="token string">'development'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 【开发时候使用】</span>
    <span class="token comment">//需要和本地项目启动会端口号一致,一般不需要改。多项目启动会有端口被占用而 改变情况</span>
    mainWindow<span class="token punctuation">.</span><span class="token function">loadURL</span><span class="token punctuation">(</span><span class="token string">'http://localhost:3000/'</span><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>
    <span class="token comment">// 【打包时候使用】__dirname为当前文件路径</span>
    mainWindow<span class="token punctuation">.</span><span class="token function">loadURL</span><span class="token punctuation">(</span>url<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
      <span class="token literal-property property">pathname</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./build/index.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
      <span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'file:'</span><span class="token punctuation">,</span>
      <span class="token literal-property property">slashes</span><span class="token operator">:</span> <span class="token boolean">true</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 comment">// -----------------------------------------------------------------------------</span>

  <span class="token comment">// 解决应用启动白屏问题</span>
  mainWindow<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'ready-to-show'</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>
    mainWindow<span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    mainWindow<span class="token punctuation">.</span><span class="token function">focus</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 comment">// 当窗口关闭时发出。在你收到这个事件后,你应该删除对窗口的引用,并避免再使用它。</span>
  mainWindow<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'closed'</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>
    mainWindow <span class="token operator">=</span> <span class="token keyword">null</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>

app<span class="token punctuation">.</span><span class="token function">whenReady</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>createWindow<span class="token punctuation">)</span><span class="token punctuation">;</span>

app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'window-all-closed'</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 keyword">if</span> <span class="token punctuation">(</span>process<span class="token punctuation">.</span>platform <span class="token operator">!==</span> <span class="token string">'darwin'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    app<span class="token punctuation">.</span><span class="token function">quit</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>

app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'activate'</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 keyword">if</span> <span class="token punctuation">(</span>BrowserWindow<span class="token punctuation">.</span><span class="token function">getAllWindows</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>length <span class="token operator">===</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">createWindow</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> 
  <ul> 
   <li>运行:(都要执行)</li> 
  </ul> 
  <pre><code class="prism language-javascript">npm run start<span class="token operator">:</span>dev
<span class="token comment">// +</span>
npm run electron<span class="token operator">:</span>dev
</code></pre> 
  <p>.</p> 
  <h2>【3】打包项目</h2> 
  <p><strong>【3.1】核对package.json中:<font color="red"> homepage: “.” </font>配置信息</strong>,若无则添加,详见【1.3】</p> 
  <ul> 
   <li>react项目打包后,所有资源文件路径都是 /static,而 Electron 调用的入口是 file :协议,/static<br> 就会定位到根目录去,所以找不到静态文件。</li> 
   <li>package.json 文件中 homepage 字段设置为"."后,静态文件的路径就变成了相对路径。</li> 
  </ul> 
  <p><strong>【3.2】修改<font color="red"> main.js</font> 打包项</strong></p> 
  <ul> 
   <li><font color="red"> <strong>若配置了【2.2】环境变量,此步骤省略</strong></font>。已经配置更好的方式,不需要手动注释解开代码再执行</li> 
   <li>详见:【1.4】</li> 
  </ul> 
  <pre><code class="prism language-javascript">  <span class="token comment">// 【二选一:打包时候使用】__dirname为当前文件路径</span>
   mainWindow<span class="token punctuation">.</span><span class="token function">loadURL</span><span class="token punctuation">(</span>url<span class="token punctuation">.</span><span class="token function">format</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
     <span class="token literal-property property">pathname</span><span class="token operator">:</span> path<span class="token punctuation">.</span><span class="token function">join</span><span class="token punctuation">(</span>__dirname<span class="token punctuation">,</span> <span class="token string">'./build/index.html'</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
     <span class="token literal-property property">protocol</span><span class="token operator">:</span> <span class="token string">'file:'</span><span class="token punctuation">,</span>
     <span class="token literal-property property">slashes</span><span class="token operator">:</span> <span class="token boolean">true</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">// 【二选一:开发时候使用】</span>
  <span class="token comment">//需要和本地项目启动会端口号一致,一般不需要改。多项目启动会有端口被占用而 改变情况</span>
  <span class="token comment">// mainWindow.loadURL('http://localhost:3000/'); </span>
</code></pre> 
  <p><strong>【3.3】 安装 electron-packager 打包依赖</strong></p> 
  <pre><code class="prism language-javascript">npm install electron<span class="token operator">-</span>packager <span class="token operator">--</span>save<span class="token operator">-</span>dev
或:
npm install electron<span class="token operator">-</span>packager <span class="token operator">-</span>g
</code></pre> 
  <p><strong>【3.4】 安装 electron-packager 打包依赖</strong></p> 
  <p>还没写完,待完结</p> 
 </div> 
</div>
                            </div>
                        </div>
                    </div>
                    <!--PC和WAP自适应版-->
                    <div id="SOHUCS" sid="1668676587249295360"></div>
                    <script type="text/javascript" src="/views/front/js/chanyan.js"></script>
                    <!-- 文章页-底部 动态广告位 -->
                    <div class="youdao-fixed-ad" id="detail_ad_bottom"></div>
                </div>
                <div class="col-md-3">
                    <div class="row" id="ad">
                        <!-- 文章页-右侧1 动态广告位 -->
                        <div id="right-1" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_1"> </div>
                        </div>
                        <!-- 文章页-右侧2 动态广告位 -->
                        <div id="right-2" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_2"></div>
                        </div>
                        <!-- 文章页-右侧3 动态广告位 -->
                        <div id="right-3" class="col-lg-12 col-md-12 col-sm-4 col-xs-4 ad">
                            <div class="youdao-fixed-ad" id="detail_ad_3"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="container">
        <h4 class="pt20 mb15 mt0 border-top">你可能感兴趣的:(react.js,electron,javascript)</h4>
        <div id="paradigm-article-related">
            <div class="recommend-post mb30">
                <ul class="widget-links">
                    <li><a href="/article/1895300854378983424.htm"
                           title="【现代前端框架中本地图片资源的处理方案】" target="_blank">【现代前端框架中本地图片资源的处理方案】</a>
                        <span class="text-muted">Gazer_S</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E7%BC%93%E5%AD%98/1.htm">缓存</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/chrome/1.htm">chrome</a>
                        <div>现代前端框架中本地图片资源的处理方案前言在前端开发中,正确引用本地图片资源是一个常见但容易被忽视的问题。我们不能像在HTML中那样简单地使用相对路径,因为JavaScript模块中的路径解析规则与HTML不同,且现代构建工具对静态资源有特殊的处理机制。本文将详细探讨在webpack和Vite等构建工具中处理本地图片引用的各种方法。传统方式的局限性在传统开发中,我们可能习惯这样引用图片:constl</div>
                    </li>
                    <li><a href="/article/1895297696474918912.htm"
                           title="通俗理解闭包" target="_blank">通俗理解闭包</a>
                        <span class="text-muted">yuren_xia</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E6%8A%80%E6%9C%AF/1.htm">前端技术</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>JavaScript在ES6之前并没有类的概念,但通过原型链和闭包,开发者可以实现类似继承和封装的功能(原型链实现继承,闭包实现封装)。ES6引入了类语法,但闭包仍然是实现私有数据封装的重要手段之一。另外,使用闭包还可用于保存上下文信息等场景。一、定义从函数角度闭包是指有权访问另一个函数作用域中的变量的函数。即使外部函数已经返回,闭包仍然可以访问外部函数内部的变量。例如:functionouter</div>
                    </li>
                    <li><a href="/article/1895282807299698688.htm"
                           title="前端开发中的常见问题与疑惑:解析与应对策略" target="_blank">前端开发中的常见问题与疑惑:解析与应对策略</a>
                        <span class="text-muted">lina_mua</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/es6/1.htm">es6</a>
                        <div>1.引言1.1前端开发的复杂性前端开发涉及HTML、CSS、JavaScript等多种技术,同时还需要考虑性能优化、跨浏览器兼容性、用户体验等问题。随着前端技术的快速发展,开发者面临的挑战也越来越多。1.2本文的目标本文旨在总结前端开发中常见的问题与疑惑,并提供相应的解决方案和应对策略,帮助开发者更好地应对挑战。2.HTML/CSS常见问题2.1布局问题:如何实现复杂的页面布局?问题描述:实现复杂</div>
                    </li>
                    <li><a href="/article/1895257960859365376.htm"
                           title="React vs Vue3深度对比与使用场景分析" target="_blank">React vs Vue3深度对比与使用场景分析</a>
                        <span class="text-muted">匹马夕阳</span>
<a class="tag" taget="_blank" href="/search/VUE%E6%8A%80%E6%9C%AF%E9%9B%86%E9%94%A6/1.htm">VUE技术集锦</a><a class="tag" taget="_blank" href="/search/react.js/1.htm">react.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/%E5%89%8D%E7%AB%AF%E6%A1%86%E6%9E%B6/1.htm">前端框架</a>
                        <div>在前端开发领域,React和Vue3是两个备受瞩目的框架。它们都提供了强大的功能和灵活的开发方式,但各自的设计理念、使用方式和适用场景有所不同。本文将深入探讨React和Vue3的区别,通过代码示例和具体的使用场景,帮助开发者更好地理解并选择适合自己的框架。一、核心概念与设计理念1.ReactReact是由Facebook开发的一个JavaScript库,主要用于构建用户界面。它的核心理念是组件化</div>
                    </li>
                    <li><a href="/article/1895242067475492864.htm"
                           title="JavaScript BOM(浏览器对象模型)与 `setTimeout` 函数:控制浏览器行为的利器" target="_blank">JavaScript BOM(浏览器对象模型)与 `setTimeout` 函数:控制浏览器行为的利器</a>
                        <span class="text-muted">人才程序员</span>
<a class="tag" taget="_blank" href="/search/%E6%9D%82%E8%B0%88/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><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><a class="tag" taget="_blank" href="/search/firefox/1.htm">firefox</a><a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/jquery/1.htm">jquery</a><a class="tag" taget="_blank" href="/search/safari/1.htm">safari</a>
                        <div>文章目录JavaScriptBOM(浏览器对象模型)与`setTimeout`函数:控制浏览器行为的利器⏳什么是BOM?`setTimeout`函数:实现延时操作⏳基本语法:示例:基本使用`setTimeout`返回值:定时器ID示例:取消定时器`setTimeout`的实际应用`setTimeout`的注意事项⚠️小结:BOM与`setTimeout`的妙用JavaScriptBOM(浏览器对象</div>
                    </li>
                    <li><a href="/article/1895180654044311552.htm"
                           title="Vue.js 深入解析:从基础到进阶" target="_blank">Vue.js 深入解析:从基础到进阶</a>
                        <span class="text-muted">sleepwalking450</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>Vue.js是一个渐进式JavaScript框架,专注于构建用户界面,尤其是单页面应用(SPA)。它的设计理念强调“渐进式框架”,即你可以从最基本的功能开始,逐步引入更多的功能以应对复杂的应用需求。Vue.js既可以作为一个简单的UI渲染引擎,也可以通过VueRouter和Vuex扩展为强大的全栈开发工具。本篇文章将对Vue.js的核心特性进行更加细致的分析,帮助你从基本的入门知识到更加复杂的高级</div>
                    </li>
                    <li><a href="/article/1895177756803657728.htm"
                           title="Vue.js 入门指南:从基础到实战" target="_blank">Vue.js 入门指南:从基础到实战</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/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>Vue.js是一款流行的渐进式JavaScript框架,广泛用于构建交互式Web界面。它具有简单易学、轻量级、高性能的特点,适合前端新手入门。本文将从Vue的基本概念入手,详细介绍Vue的生命周期及常见用法,帮助你快速上手Vue开发官网:https://cn.vuejs.org/1.Vue.js介绍1.1Vue的特点易学易用:Vue采用直观的模板语法,降低了学习成本响应式数据绑定:使用双向绑定(v</div>
                    </li>
                    <li><a href="/article/1895170064504647680.htm"
                           title="JavaScript系列(89)--前端模块化工程详解" target="_blank">JavaScript系列(89)--前端模块化工程详解</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/%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/%E7%8A%B6%E6%80%81%E6%A8%A1%E5%BC%8F/1.htm">状态模式</a>
                        <div>前端模块化工程详解前端模块化是现代Web开发的核心理念之一,它帮助我们组织和管理日益复杂的前端代码。本文将详细探讨前端模块化工程的各个方面,从基础概念到实际应用。模块化概述小知识:模块化是指将一个复杂的系统分解为独立的、可复用的模块。在前端开发中,模块化有助于提高代码的可维护性、可测试性和可重用性,同时促进团队协作和大型应用的开发。模块化标准与演进//1.CommonJS规范classCommon</div>
                    </li>
                    <li><a href="/article/1895164392857726976.htm"
                           title="js的some函数" target="_blank">js的some函数</a>
                        <span class="text-muted">小华0000</span>
<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>在JavaScript中,some()是一个数组的方法,用于测试数组中是否至少有一个元素满足提供的函数。如果数组中有至少一个元素通过由提供的函数实现的测试,则它返回true;否则返回false。以下是some()函数的基本语法:javascript复制代码arr.some(function(currentValue,index,arr),thisArg);currentValue:必需。当前元素的</div>
                    </li>
                    <li><a href="/article/1895164393289740288.htm"
                           title="js的includes函数" target="_blank">js的includes函数</a>
                        <span class="text-muted">小华0000</span>
<a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
                        <div>在JavaScript中,includes()是一个数组(Array)和字符串(String)对象的方法,用于确定一个数组是否包含一个特定的值,或者一个字符串是否包含一个特定的子串。如果找到该值或子串,则返回true;否则返回false。数组中的includes()对于数组,includes()方法用于判断一个数组是否包含一个指定的值,根据情况,如果需要,可以指定开始搜索的位置。语法:arr.in</div>
                    </li>
                    <li><a href="/article/1895159594808832000.htm"
                           title="JS:IntersectionObserver(监听目标元素是否出现在窗口中)" target="_blank">JS:IntersectionObserver(监听目标元素是否出现在窗口中)</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/%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>一、简介IntersectionObserver是JavaScript中的一个API,用于异步观察目标元素与其祖先元素或顶级文档视口的交叉状态。当目标元素的可见性发生变化时,你可以使用IntersectionObserver来执行某些操作,比如懒加载图片、无限滚动等。newIntersectionObserver()是用于创建一个新的IntersectionObserver实例的构造函数。当你调用</div>
                    </li>
                    <li><a href="/article/1895158835904049152.htm"
                           title="Intersection Observer API 详解" target="_blank">Intersection Observer API 详解</a>
                        <span class="text-muted">Rkcy</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/html/1.htm">html</a>
                        <div>当我们滚动网页时,可能会遇到需要实现一些动态效果或监测元素的可见性等业务需求。以前,我们通常需要基于JavaScript来编写自己的监测逻辑,这样会对浏览器的性能产生一定的影响。现在,有一种新的浏览器API——IntersectionObserverAPI,它可以帮助我们精确地监测指定元素是否出现在浏览器的视口中,而且不会对性能产生明显影响。IntersectionObserverAPI核心原理I</div>
                    </li>
                    <li><a href="/article/1895154791793881088.htm"
                           title="JavaScript中的IntersectionObserver使用" target="_blank">JavaScript中的IntersectionObserver使用</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/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a><a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                        <div>IntersectionObserver是一个JavaScriptAPI,用于异步观察目标元素与其祖先元素或视口的交叉状态。它可以帮助我们判断一个元素是否进入或离开视口,以及元素与其他元素的交叉情况。在本文中,我将向您详细介绍如何使用IntersectionObserver,并提供相应的源代码示例。创建IntersectionObserver对象要使用IntersectionObserver,首先</div>
                    </li>
                    <li><a href="/article/1895149491246395392.htm"
                           title="深入理解 JavaScript 的 IntersectionObserver API" target="_blank">深入理解 JavaScript 的 IntersectionObserver API</a>
                        <span class="text-muted">小华0000</span>
<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>现代Web开发中,性能和用户体验是不可忽视的两个核心。为了实现页面的高效滚动加载、懒加载图片、观察元素是否进入视口等功能,JavaScript提供了一个强大的工具——IntersectionObserverAPI。在这篇博客中,我们将深入解析IntersectionObserver的核心功能、使用方法,以及最佳实践。一、什么是IntersectionObserver?IntersectionObs</div>
                    </li>
                    <li><a href="/article/1895130955891404800.htm"
                           title="JavaScript和HTML5游戏:从愤怒的小鸟到ZX Spectrum" target="_blank">JavaScript和HTML5游戏:从愤怒的小鸟到ZX Spectrum</a>
                        <span class="text-muted">dingshi7798</span>
<a class="tag" taget="_blank" href="/search/%E7%A7%BB%E5%8A%A8%E5%BC%80%E5%8F%91/1.htm">移动开发</a><a class="tag" taget="_blank" href="/search/%E6%B8%B8%E6%88%8F/1.htm">游戏</a><a class="tag" taget="_blank" href="/search/php/1.htm">php</a>
                        <div>最近,HTML5/JavaScript游戏领域发生了一些爆炸。浏览器游戏的受欢迎程度迅速增加,开发人员开始寻找一套方便使用的API和其他工具。罗伯·霍克斯(RobHawkes)热衷于赞扬HTML5和JavaScript及其在浏览器游戏中的应用。Rob是Mozilla的视觉程序员,作家和技术布道者,在开发人员社区中领导Mozilla工作的游戏方面。他在5月份在墨尔本举行的WebDirectionsC</div>
                    </li>
                    <li><a href="/article/1895130199394152448.htm"
                           title="一周学会Flask3 Python Web开发-Jinja2模版中加载静态文件" target="_blank">一周学会Flask3 Python Web开发-Jinja2模版中加载静态文件</a>
                        <span class="text-muted">java1234_小锋</span>
<a class="tag" taget="_blank" href="/search/Flask3%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B/1.htm">Flask3视频教程</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/flask/1.htm">flask</a><a class="tag" taget="_blank" href="/search/flask3/1.htm">flask3</a>
                        <div>锋哥原创的Flask3PythonWeb开发Flask3视频教程:2025版Flask3Pythonweb开发视频教程(无废话版)玩命更新中~_哔哩哔哩_bilibili一个Web项目不仅需要HTML模板,还需要许多静态文件,比如CSS、JavaScript文件、图片以及音频等。在Flask程序中,默认我们需要将静态文件存储在与主脚本(包含程序实例的脚本)同级目录的static文件夹中。在Jinj</div>
                    </li>
                    <li><a href="/article/1895128301169602560.htm"
                           title="【地图视界-Leaflet1】快速搭建你的第一个地图" target="_blank">【地图视界-Leaflet1】快速搭建你的第一个地图</a>
                        <span class="text-muted">Anchenry</span>
<a class="tag" taget="_blank" href="/search/GIS%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">GIS可视化</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/%E5%9C%B0%E5%9B%BE%E8%A7%86%E7%95%8C/1.htm">地图视界</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/%E4%BF%A1%E6%81%AF%E5%8F%AF%E8%A7%86%E5%8C%96/1.htm">信息可视化</a>
                        <div>引言随着Web技术的飞速发展,交互式地图已经成为网站不可或缺的一部分。无论是位置定位、数据可视化,还是复杂的空间分析,地图应用都在现代互联网应用中占据着重要地位。而Leaflet作为一款轻量级、开源的JavaScript库,凭借其极简的设计、高效的性能和易于上手的特性,成为了开发交互式地图应用的首选工具之一。本文将通过详细介绍Leaflet的使用,帮助你从零基础开始,逐步构建出自己的地图应用。什么</div>
                    </li>
                    <li><a href="/article/1895107094953127936.htm"
                           title="浅谈HTML5" target="_blank">浅谈HTML5</a>
                        <span class="text-muted"></span>
<a class="tag" taget="_blank" href="/search/html5/1.htm">html5</a>
                        <div>HTML5的时代已经到来,它对所有做前端搭建制作设计开发人员来说是一种福音。HTML5致力于解决跨浏览器问题,可以部分取代JavaScript,HTML5致力于把浏览器变成一个前端执行菠菜程序环境,而不是简单地视图工具。第一部分,了解HTML和XHTMLHTML——HyperTextMarkupLanguage(超文本标记语言),它的发展史比较复杂,从1991年年底推出HTML,当时HTML并没有</div>
                    </li>
                    <li><a href="/article/1895094626910531584.htm"
                           title="html标签及属性 详解,常用的HTML标签详解与总结" target="_blank">html标签及属性 详解,常用的HTML标签详解与总结</a>
                        <span class="text-muted">释宣导</span>
<a class="tag" taget="_blank" href="/search/html%E6%A0%87%E7%AD%BE%E5%8F%8A%E5%B1%9E%E6%80%A7/1.htm">html标签及属性</a><a class="tag" taget="_blank" href="/search/%E8%AF%A6%E8%A7%A3/1.htm">详解</a>
                        <div>对于很多HTML初学者来说,记忆和掌握标签是一门很难搞的功课。今天,我们就来详细介绍常用的HTML标签。对于标签的掌握,更多的是要通过练习,熟能生巧。stlye标签用于定义元素的CSS样式/*这里写css样式*/script标签用于定义页面的JavaScript代码,也可以引入外部的JavaScript文件。/*这里写JavaScript代码*/link标签引入外部样式css文件。HTML注释又叫</div>
                    </li>
                    <li><a href="/article/1895083396053397504.htm"
                           title="LangChain入门:使用Python和通义千问打造免费的Qwen大模型聊天机器人" target="_blank">LangChain入门:使用Python和通义千问打造免费的Qwen大模型聊天机器人</a>
                        <span class="text-muted">闯江湖50年</span>
<a class="tag" taget="_blank" href="/search/langchain/1.htm">langchain</a><a class="tag" taget="_blank" href="/search/python/1.htm">python</a><a class="tag" taget="_blank" href="/search/%E6%9C%BA%E5%99%A8%E4%BA%BA/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>
                        <div>前言LangChain是一个用于开发由大型语言模型(LargeLanguageModels,简称LLMs)驱动的应用程序的框架。它提供了一个灵活的框架,使得开发者可以构建具有上下文感知能力和推理能力的应用程序,这些应用程序可以利用公司的数据和APIs。这个框架由几个部分组成。LangChain库:Python和JavaScript库。包含了各种组件的接口和集成,一个基本的运行时,用于将这些组件组合</div>
                    </li>
                    <li><a href="/article/1895077975678840832.htm"
                           title="从ECMAScript到JavaScript:前端编程的基石" target="_blank">从ECMAScript到JavaScript:前端编程的基石</a>
                        <span class="text-muted">大雨淅淅</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF%E5%BC%80%E5%8F%91/1.htm">前端开发</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</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>目录一、什么是ECMAScript二、发展历程回顾三、核心特性解析3.1基础类型与数据结构3.2函数的进阶用法3.3对象的操作与扩展3.4类与面向对象编程3.5异步编程四、实际应用场景4.1Web前端开发4.2Node.js后端开发4.3移动应用开发五、未来展望一、什么是ECMAScriptECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会)通过ECMA-262标准化的脚本程序设</div>
                    </li>
                    <li><a href="/article/1895068896512241664.htm"
                           title="react-native入门之核心组件与原生组件" target="_blank">react-native入门之核心组件与原生组件</a>
                        <span class="text-muted">crayon-shin-chan</span>
<a class="tag" taget="_blank" href="/search/surprise/1.htm">surprise</a><a class="tag" taget="_blank" href="/search/%23/1.htm">#</a><a class="tag" taget="_blank" href="/search/react-native/1.htm">react-native</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/react/1.htm">react</a>
                        <div>文档:核心组件与原生组件·ReactNative中文网1.简介ReactNative是一个使用React和应用平台的原生功能来构建Android和iOS应用的开源框架。可以使用JavaScript来访问移动平台的API,使用React组件来描述UI的外观和行为2.视图在Android和iOS开发中,一个视图是UI的基本组成部分屏幕上的一个小矩形元素、可用于显示文本、图像或响应用户输入。甚至应用程序</div>
                    </li>
                    <li><a href="/article/1895061465270906880.htm"
                           title="使用NestJS的控制器与业务逻辑结合的入门教程" target="_blank">使用NestJS的控制器与业务逻辑结合的入门教程</a>
                        <span class="text-muted">XymkMl</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                        <div>NestJS是一个用于构建高效、可扩展的Node.js应用程序的框架。它采用了现代化的JavaScript或TypeScript语言,并提供了强大的依赖注入、模块化和面向切面编程等功能。本教程将介绍如何在NestJS应用程序中结合控制器和业务逻辑,以实现灵活且可维护的代码结构。步骤1:创建NestJS应用程序首先,我们需要安装NestJSCLI工具,用于创建和管理NestJS应用程序。打开终端并执</div>
                    </li>
                    <li><a href="/article/1895060331219185664.htm"
                           title="Vue.js 详细介绍" target="_blank">Vue.js 详细介绍</a>
                        <span class="text-muted">DOMINICHZL</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a>
                        <div>1.引言在前端开发领域,Vue.js无疑是一个备受瞩目的框架。它以其轻量、易用和高效的特点,迅速成为开发者们的首选。无论你是前端新手,还是有一定经验的开发者,Vue.js都能为你提供强大的支持。本文将带你从零开始,深入了解Vue.js的核心概念、使用方法以及最佳实践。2.Vue.js简介2.1什么是Vue.js?Vue.js是一套用于构建用户界面的渐进式JavaScript框架。与其他大型框架不同</div>
                    </li>
                    <li><a href="/article/1895047204045910016.htm"
                           title="Vue学习教程-16html标签元素绑定事件" target="_blank">Vue学习教程-16html标签元素绑定事件</a>
                        <span class="text-muted">番茄番茄君</span>
<a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
                        <div>文章目录前言一、表单数据绑定事件二、多媒体元素绑定1.图片img和视频元素video三、容器元素绑定事件前言在Vue中,你可以通过v-on指令(或在Vue2.x中简写为@)来绑定事件。这种方式允许你监听DOM事件,并在触发时执行一些JavaScript代码。常见的元素主要是表单数据元素、多媒体元素和容器元素。一、表单数据绑定事件常见的表单数据元素1.文本输入框元素3.多选框元素4.下拉框元素5.按</div>
                    </li>
                    <li><a href="/article/1895045940692185088.htm"
                           title="Node.js使用教程" target="_blank">Node.js使用教程</a>
                        <span class="text-muted">m0_74823408</span>
<a class="tag" taget="_blank" href="/search/%E9%9D%A2%E8%AF%95/1.htm">面试</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E8%B7%AF%E7%BA%BF/1.htm">学习路线</a><a class="tag" taget="_blank" href="/search/%E9%98%BF%E9%87%8C%E5%B7%B4%E5%B7%B4/1.htm">阿里巴巴</a><a class="tag" taget="_blank" href="/search/node.js/1.htm">node.js</a><a class="tag" taget="_blank" href="/search/vim/1.htm">vim</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E8%BE%91%E5%99%A8/1.htm">编辑器</a>
                        <div>Node.js使用教程Node.js是一个基于ChromeV8引擎的JavaScript运行环境,它让JavaScript运行在服务器端。以下是一个简单的Node.js使用教程:一、Node.js开发环境和编译1.1安装Node.js访问Node.js官网下载并安装适合您操作系统的Node.js版本。1.2创建一个Node.js项目在您的工作目录中,创建一个新的文件夹作为项目目录,例如命名为my_</div>
                    </li>
                    <li><a href="/article/1895037368008765440.htm"
                           title="2025年前端开发者必学的技术" target="_blank">2025年前端开发者必学的技术</a>
                        <span class="text-muted">倔强青铜3</span>
<a class="tag" taget="_blank" href="/search/JavaScript%E6%88%90%E7%A5%9E%E4%B9%8B%E8%B7%AF/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/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/react/1.htm">react</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>2025年前端开发者必学的技术原文链接:ImportantTopicsforFrontendDeveloperstoMasterin2025作者:moibra译者:倔强青铜三前言大家好,我是倔强青铜三。是一名热情的软件工程师,我热衷于分享和传播IT技术,致力于通过我的知识和技能推动技术交流与创新,欢迎关注我,微信公众号:倔强青铜三。欢迎点赞、收藏、关注,一键三连!!!1.现代JavaScript(</div>
                    </li>
                    <li><a href="/article/1895028788270526464.htm"
                           title="web安全——分析应用程序" target="_blank">web安全——分析应用程序</a>
                        <span class="text-muted">PT_silver</span>
<a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8%E7%90%86%E8%AE%BA/1.htm">web安全理论</a><a class="tag" taget="_blank" href="/search/web%E5%AE%89%E5%85%A8/1.htm">web安全</a><a class="tag" taget="_blank" href="/search/%E5%AE%89%E5%85%A8/1.htm">安全</a>
                        <div>文章目录一、确定用户输入入口点二、确定服务端技术三、解析受攻击面一、确定用户输入入口点在检查枚举应用程序功能时生成的HTTP请求的过程中,用户输入入口点包括:URL文件路径通常,在查询字符?之前的URL部分并不视为用户输入入口,但在REST风格的URL中,查询字符之前的URL部分实际上可作为数据参数。例如:http://eis/shop/browse/electronics/iphone其中的el</div>
                    </li>
                    <li><a href="/article/1895003311485022208.htm"
                           title="深入解析 Vue 3 编译宏:揭开 `<script setup>` 的魔法面纱" target="_blank">深入解析 Vue 3 编译宏:揭开 `<script setup>` 的魔法面纱</a>
                        <span class="text-muted">斯~内克</span>
<a class="tag" taget="_blank" href="/search/vue%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">vue知识点</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
                        <div>一、编译宏的本质与设计哲学1.1什么是编译宏在Vue3的CompositionAPI生态中,编译宏(CompilerMacros)是一组特殊的语法结构,它们在代码编译阶段被Vue编译器处理,最终转换为标准的JavaScript代码。这些宏函数是Vue3语法糖的核心组成部分,主要包含:defineProps:声明组件propsdefineEmits:定义自定义事件defineExpose:暴露组件公</div>
                    </li>
                    <li><a href="/article/1895003310700687360.htm"
                           title="深入探讨 Vue 3 响应式 API:为什么 ref/reactive 需要类型匹配?" target="_blank">深入探讨 Vue 3 响应式 API:为什么 ref/reactive 需要类型匹配?</a>
                        <span class="text-muted">斯~内克</span>
<a class="tag" taget="_blank" href="/search/vue%E7%9F%A5%E8%AF%86%E7%82%B9/1.htm">vue知识点</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0/1.htm">学习</a><a class="tag" taget="_blank" href="/search/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>一、Vue3响应式系统基础在Vue3的CompositionAPI中,ref和reactive是构建响应式数据的核心工具。它们的定位差异源于JavaScript语言特性:ref设计初衷:处理基础类型(primitivetypes)的响应式包装reactive设计初衷:处理引用类型(referencetypes)的深度响应代理技术实现差异:ref通过对象包装({value:...})+reactiv</div>
                    </li>
                                <li><a href="/article/52.htm"
                                       title="解读Servlet原理篇二---GenericServlet与HttpServlet" target="_blank">解读Servlet原理篇二---GenericServlet与HttpServlet</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/HttpServlet/1.htm">HttpServlet</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%90%86/1.htm">源理</a><a class="tag" taget="_blank" href="/search/GenericService/1.htm">GenericService</a><a class="tag" taget="_blank" href="/search/%E6%BA%90%E7%A0%81/1.htm">源码</a>
                                    <div>在上一篇《解读Servlet原理篇一》中提到,要实现javax.servlet.Servlet接口(即写自己的Servlet应用),你可以写一个继承自javax.servlet.GenericServletr的generic Servlet ,也可以写一个继承自java.servlet.http.HttpServlet的HTTP Servlet(这就是为什么我们自定义的Servlet通常是exte</div>
                                </li>
                                <li><a href="/article/179.htm"
                                       title="MySQL性能优化" target="_blank">MySQL性能优化</a>
                                    <span class="text-muted">bijian1013</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/mysql/1.htm">mysql</a>
                                    <div>        性能优化是通过某些有效的方法来提高MySQL的运行速度,减少占用的磁盘空间。性能优化包含很多方面,例如优化查询速度,优化更新速度和优化MySQL服务器等。本文介绍方法的主要有: 
        a.优化查询 
        b.优化数据库结构 
  </div>
                                </li>
                                <li><a href="/article/306.htm"
                                       title="ThreadPool定时重试" target="_blank">ThreadPool定时重试</a>
                                    <span class="text-muted">dai_lm</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/ThreadPool/1.htm">ThreadPool</a><a class="tag" taget="_blank" href="/search/thread/1.htm">thread</a><a class="tag" taget="_blank" href="/search/timer/1.htm">timer</a><a class="tag" taget="_blank" href="/search/timertask/1.htm">timertask</a>
                                    <div>项目需要当某事件触发时,执行http请求任务,失败时需要有重试机制,并根据失败次数的增加,重试间隔也相应增加,任务可能并发。 
由于是耗时任务,首先考虑的就是用线程来实现,并且为了节约资源,因而选择线程池。 
为了解决不定间隔的重试,选择Timer和TimerTask来完成 
 
 

package threadpool;

public class ThreadPoolTest {

</div>
                                </li>
                                <li><a href="/article/433.htm"
                                       title="Oracle 查看数据库的连接情况" target="_blank">Oracle 查看数据库的连接情况</a>
                                    <span class="text-muted">周凡杨</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/oracle+%E8%BF%9E%E6%8E%A5/1.htm">oracle 连接</a>
                                    <div>首先要说的是,不同版本数据库提供的系统表会有不同,你可以根据数据字典查看该版本数据库所提供的表。 
 
select * from dict where table_name like '%SESSION%'; 
就可以查出一些表,然后根据这些表就可以获得会话信息 
 
select sid,serial#,status,username,schemaname,osuser,terminal,ma</div>
                                </li>
                                <li><a href="/article/560.htm"
                                       title="类的继承" target="_blank">类的继承</a>
                                    <span class="text-muted">朱辉辉33</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>类的继承可以提高代码的重用行,减少冗余代码;还能提高代码的扩展性。Java继承的关键字是extends 
格式:public class 类名(子类)extends 类名(父类){ } 
子类可以继承到父类所有的属性和普通方法,但不能继承构造方法。且子类可以直接使用父类的public和 
protected属性,但要使用private属性仍需通过调用。 
子类的方法可以重写,但必须和父类的返回值类</div>
                                </li>
                                <li><a href="/article/687.htm"
                                       title="android 悬浮窗特效" target="_blank">android 悬浮窗特效</a>
                                    <span class="text-muted">肆无忌惮_</span>
<a class="tag" taget="_blank" href="/search/android/1.htm">android</a>
                                    <div>最近在开发项目的时候需要做一个悬浮层的动画,类似于支付宝掉钱动画。但是区别在于,需求是浮出一个窗口,之后边缩放边位移至屏幕右下角标签处。效果图如下: 
  
一开始考虑用自定义View来做。后来发现开线程让其移动很卡,ListView+动画也没法精确定位到目标点。 
  
后来想利用Dialog的dismiss动画来完成。 
  
自定义一个Dialog后,在styl</div>
                                </li>
                                <li><a href="/article/814.htm"
                                       title="hadoop伪分布式搭建" target="_blank">hadoop伪分布式搭建</a>
                                    <span class="text-muted">林鹤霄</span>
<a class="tag" taget="_blank" href="/search/hadoop/1.htm">hadoop</a>
                                    <div>要修改4个文件    1: vim hadoop-env.sh  第九行    2: vim core-site.xml            <configuration>     &n</div>
                                </li>
                                <li><a href="/article/941.htm"
                                       title="gdb调试命令" target="_blank">gdb调试命令</a>
                                    <span class="text-muted">aigo</span>
<a class="tag" taget="_blank" href="/search/gdb/1.htm">gdb</a>
                                    <div>原文:http://blog.csdn.net/hanchaoman/article/details/5517362 
  
一、GDB常用命令简介 
     r run 运行.程序还没有运行前使用   c             cuntinue </div>
                                </li>
                                <li><a href="/article/1068.htm"
                                       title="Socket编程的HelloWorld实例" target="_blank">Socket编程的HelloWorld实例</a>
                                    <span class="text-muted">alleni123</span>
<a class="tag" taget="_blank" href="/search/socket/1.htm">socket</a>
                                    <div>public class Client
{
	
	
	public static void main(String[] args)
	{	
		Client c=new Client();
	 	c.receiveMessage();
	}
	
	public void receiveMessage(){
		Socket s=null;
		
		BufferedRea</div>
                                </li>
                                <li><a href="/article/1195.htm"
                                       title="线程同步和异步" target="_blank">线程同步和异步</a>
                                    <span class="text-muted">百合不是茶</span>
<a class="tag" taget="_blank" href="/search/%E7%BA%BF%E7%A8%8B%E5%90%8C%E6%AD%A5/1.htm">线程同步</a><a class="tag" taget="_blank" href="/search/%E5%BC%82%E6%AD%A5/1.htm">异步</a>
                                    <div>多线程和同步 : 如进程、线程同步,可理解为进程或线程A和B一块配合,A执行到一定程度时要依靠B的某个结果,于是停下来,示意B运行;B依言执行,再将结果给A;A再继续操作。  所谓同步,就是在发出一个功能调用时,在没有得到结果之前,该调用就不返回,同时其它线程也不能调用这个方法  
  
多线程和异步:多线程可以做不同的事情,涉及到线程通知 
  
  
&</div>
                                </li>
                                <li><a href="/article/1322.htm"
                                       title="JSP中文乱码分析" target="_blank">JSP中文乱码分析</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/jsp/1.htm">jsp</a><a class="tag" taget="_blank" href="/search/%E4%B8%AD%E6%96%87%E4%B9%B1%E7%A0%81/1.htm">中文乱码</a>
                                    <div>        在JSP的开发过程中,经常出现中文乱码的问题。 
        首先了解一下Java中文问题的由来: 
        Java的内核和class文件是基于unicode的,这使Java程序具有良好的跨平台性,但也带来了一些中文乱码问题的麻烦。原因主要有两方面,</div>
                                </li>
                                <li><a href="/article/1449.htm"
                                       title="js实现页面跳转重定向的几种方式" target="_blank">js实现页面跳转重定向的几种方式</a>
                                    <span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E9%87%8D%E5%AE%9A%E5%90%91/1.htm">重定向</a>
                                    <div>        js实现页面跳转重定向有如下几种方式: 
一.window.location.href 
<script language="javascript"type="text/javascript"> 
	window.location.href="http://www.baidu.c</div>
                                </li>
                                <li><a href="/article/1576.htm"
                                       title="【Struts2三】Struts2 Action转发类型" target="_blank">【Struts2三】Struts2 Action转发类型</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/struts2/1.htm">struts2</a>
                                    <div> 在【Struts2一】 Struts Hello World http://bit1129.iteye.com/blog/2109365中配置了一个简单的Action,配置如下 
  
<!DOCTYPE struts PUBLIC  
        "-//Apache Software Foundation//DTD Struts Configurat</div>
                                </li>
                                <li><a href="/article/1703.htm"
                                       title="【HBase十一】Java API操作HBase" target="_blank">【HBase十一】Java API操作HBase</a>
                                    <span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a>
                                    <div>Admin类的主要方法注释: 
  1. 创建表 
 /**
   * Creates a new table. Synchronous operation.
   *
   * @param desc table descriptor for table
   * @throws IllegalArgumentException if the table name is res</div>
                                </li>
                                <li><a href="/article/1830.htm"
                                       title="nginx gzip" target="_blank">nginx gzip</a>
                                    <span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/nginx+gzip/1.htm">nginx gzip</a>
                                    <div>Nginx GZip 压缩  
Nginx GZip 模块文档详见:http://wiki.nginx.org/HttpGzipModule 
常用配置片段如下:  
gzip on; gzip_comp_level 2; # 压缩比例,比例越大,压缩时间越长。默认是1 gzip_types text/css text/javascript; # 哪些文件可以被压缩 gzip_disable &q</div>
                                </li>
                                <li><a href="/article/1957.htm"
                                       title="java-7.微软亚院之编程判断俩个链表是否相交 给出俩个单向链表的头指针,比如 h1 , h2 ,判断这俩个链表是否相交" target="_blank">java-7.微软亚院之编程判断俩个链表是否相交 给出俩个单向链表的头指针,比如 h1 , h2 ,判断这俩个链表是否相交</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a>
                                    <div>

public class LinkListTest {

	/**
	 * we deal with two main missions:
	 * 
	 * A.
	 * 1.we create two joined-List(both have no loop)
	 * 2.whether list1 and list2 join
	 * 3.print the join</div>
                                </li>
                                <li><a href="/article/2084.htm"
                                       title="Spring源码学习-JdbcTemplate batchUpdate批量操作" target="_blank">Spring源码学习-JdbcTemplate batchUpdate批量操作</a>
                                    <span class="text-muted">bylijinnan</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>Spring JdbcTemplate的batch操作最后还是利用了JDBC提供的方法,Spring只是做了一下改造和封装 
 
JDBC的batch操作: 
 
 


String sql = "INSERT INTO CUSTOMER " +
				  "(CUST_ID, NAME, AGE) VALUES (?, ?, ?)";
				</div>
                                </li>
                                <li><a href="/article/2211.htm"
                                       title="[JWFD开源工作流]大规模拓扑矩阵存储结构最新进展" target="_blank">[JWFD开源工作流]大规模拓扑矩阵存储结构最新进展</a>
                                    <span class="text-muted">comsci</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C%E6%B5%81/1.htm">工作流</a>
                                    <div>    生成和创建类已经完成,构造一个100万个元素的矩阵模型,存储空间只有11M大,请大家参考我在博客园上面的文档"构造下一代工作流存储结构的尝试",更加相信的设计和代码将陆续推出......... 
 
    竞争对手的能力也很强.......,我相信..你们一定能够先于我们推出大规模拓扑扫描和分析系统的....</div>
                                </li>
                                <li><a href="/article/2338.htm"
                                       title="base64编码和url编码" target="_blank">base64编码和url编码</a>
                                    <span class="text-muted">cuityang</span>
<a class="tag" taget="_blank" href="/search/base64/1.htm">base64</a><a class="tag" taget="_blank" href="/search/url/1.htm">url</a>
                                    <div>import java.io.BufferedReader; 
import java.io.IOException; 
import java.io.InputStreamReader; 
import java.io.PrintWriter; 
import java.io.StringWriter; 
import java.io.UnsupportedEncodingException; </div>
                                </li>
                                <li><a href="/article/2465.htm"
                                       title="web应用集群Session保持" target="_blank">web应用集群Session保持</a>
                                    <span class="text-muted">dalan_123</span>
<a class="tag" taget="_blank" href="/search/session/1.htm">session</a>
                                    <div>关于使用 memcached 或redis 存储 session ,以及使用 terracotta 服务器共享。建议使用 redis,不仅仅因为它可以将缓存的内容持久化,还因为它支持的单个对象比较大,而且数据类型丰富,不只是缓存 session,还可以做其他用途,一举几得啊。1、使用 filter 方法存储这种方法比较推荐,因为它的服务器使用范围比较多,不仅限于tomcat ,而且实现的原理比较简</div>
                                </li>
                                <li><a href="/article/2719.htm"
                                       title="Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式']" target="_blank">Yii 框架里数据库操作详解-[增加、查询、更新、删除的方法 'AR模式']</a>
                                    <span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/%E6%95%B0%E6%8D%AE%E5%BA%93/1.htm">数据库</a>
                                    <div>    public function getMinLimit () {        $sql = "...";        $result = yii::app()->db->createCo</div>
                                </li>
                                <li><a href="/article/2846.htm"
                                       title="solr StatsComponent(聚合统计)" target="_blank">solr StatsComponent(聚合统计)</a>
                                    <span class="text-muted">eksliang</span>
<a class="tag" taget="_blank" href="/search/solr%E8%81%9A%E5%90%88%E6%9F%A5%E8%AF%A2/1.htm">solr聚合查询</a><a class="tag" taget="_blank" href="/search/solr+stats/1.htm">solr stats</a>
                                    <div>StatsComponent 
转载请出自出处:http://eksliang.iteye.com/blog/2169134 
http://eksliang.iteye.com/ 一、概述 
       Solr可以利用StatsComponent 实现数据库的聚合统计查询,也就是min、max、avg、count、sum的功能 
  二、参数</div>
                                </li>
                                <li><a href="/article/2973.htm"
                                       title="百度一道面试题" target="_blank">百度一道面试题</a>
                                    <span class="text-muted">greemranqq</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/%E7%99%BE%E5%BA%A6%E9%9D%A2%E8%AF%95/1.htm">百度面试</a><a class="tag" taget="_blank" href="/search/%E5%AF%BB%E6%89%BE%E5%A5%87%E6%95%B0%E7%AE%97%E6%B3%95/1.htm">寻找奇数算法</a><a class="tag" taget="_blank" href="/search/bitmap+%E7%AE%97%E6%B3%95/1.htm">bitmap 算法</a>
                                    <div>那天看朋友提了一个百度面试的题目:怎么找出{1,1,2,3,3,4,4,4,5,5,5,5}  找出出现次数为奇数的数字. 
  
我这里复制的是原话,当然顺序是不一定的,很多拿到题目第一反应就是用map,当然可以解决,但是效率不高。 
  
还有人觉得应该用算法xxx,我是没想到用啥算法好...! 
  
还有觉得应该先排序... 
  
还有觉</div>
                                </li>
                                <li><a href="/article/3100.htm"
                                       title="Spring之在开发中使用SpringJDBC" target="_blank">Spring之在开发中使用SpringJDBC</a>
                                    <span class="text-muted">ihuning</span>
<a class="tag" taget="_blank" href="/search/spring/1.htm">spring</a>
                                    <div>  
在实际开发中使用SpringJDBC有两种方式: 
  
1. 在Dao中添加属性JdbcTemplate并用Spring注入; 
    JdbcTemplate类被设计成为线程安全的,所以可以在IOC 容器中声明它的单个实例,并将这个实例注入到所有的 DAO 实例中。JdbcTemplate也利用了Java 1.5 的特定(自动装箱,泛型,可变长度</div>
                                </li>
                                <li><a href="/article/3227.htm"
                                       title="JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节" target="_blank">JSON API 1.0 核心开发者自述 | 你所不知道的那些技术细节</a>
                                    <span class="text-muted">justjavac</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a>
                                    <div>2013年5月,Yehuda Katz 完成了JSON API(英文,中文) 技术规范的初稿。事情就发生在 RailsConf 之后,在那次会议上他和 Steve Klabnik 就 JSON 雏形的技术细节相聊甚欢。在沟通单一 Rails 服务器库—— ActiveModel::Serializers 和单一 JavaScript 客户端库——&</div>
                                </li>
                                <li><a href="/article/3354.htm"
                                       title="网站项目建设流程概述" target="_blank">网站项目建设流程概述</a>
                                    <span class="text-muted">macroli</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a>
                                    <div>一.概念 
网站项目管理就是根据特定的规范、在预算范围内、按时完成的网站开发任务。 
二.需求分析 
项目立项 
  我们接到客户的业务咨询,经过双方不断的接洽和了解,并通过基本的可行性讨论够,初步达成制作协议,这时就需要将项目立项。较好的做法是成立一个专门的项目小组,小组成员包括:项目经理,网页设计,程序员,测试员,编辑/文档等必须人员。项目实行项目经理制。 
客户的需求说明书 
  第一步是需</div>
                                </li>
                                <li><a href="/article/3481.htm"
                                       title="AngularJs 三目运算 表达式判断" target="_blank">AngularJs 三目运算 表达式判断</a>
                                    <span class="text-muted">qiaolevip</span>
<a class="tag" taget="_blank" href="/search/%E6%AF%8F%E5%A4%A9%E8%BF%9B%E6%AD%A5%E4%B8%80%E7%82%B9%E7%82%B9/1.htm">每天进步一点点</a><a class="tag" taget="_blank" href="/search/%E5%AD%A6%E4%B9%A0%E6%B0%B8%E6%97%A0%E6%AD%A2%E5%A2%83/1.htm">学习永无止境</a><a class="tag" taget="_blank" href="/search/%E4%BC%97%E8%A7%82%E5%8D%83%E8%B1%A1/1.htm">众观千象</a><a class="tag" taget="_blank" href="/search/AngularJS/1.htm">AngularJS</a>
                                    <div>事件回顾:由于需要修改同一个模板,里面包含2个不同的内容,第一个里面使用的时间差和第二个里面名称不一样,其他过滤器,内容都大同小异。希望杜绝If这样比较傻的来判断if-show or not,继续追究其源码。 
var b = "{{",
      a = "}}";
        this.startSymbol = function(a) {
</div>
                                </li>
                                <li><a href="/article/3608.htm"
                                       title="Spark算子:统计RDD分区中的元素及数量" target="_blank">Spark算子:统计RDD分区中的元素及数量</a>
                                    <span class="text-muted">superlxw1234</span>
<a class="tag" taget="_blank" href="/search/spark/1.htm">spark</a><a class="tag" taget="_blank" href="/search/spark%E7%AE%97%E5%AD%90/1.htm">spark算子</a><a class="tag" taget="_blank" href="/search/Spark+RDD%E5%88%86%E5%8C%BA%E5%85%83%E7%B4%A0/1.htm">Spark RDD分区元素</a>
                                    <div>关键字:Spark算子、Spark RDD分区、Spark RDD分区元素数量 
  
  
Spark RDD是被分区的,在生成RDD时候,一般可以指定分区的数量,如果不指定分区数量,当RDD从集合创建时候,则默认为该程序所分配到的资源的CPU核数,如果是从HDFS文件创建,默认为文件的Block数。 
  
可以利用RDD的mapPartitionsWithInd</div>
                                </li>
                                <li><a href="/article/3735.htm"
                                       title="Spring 3.2.x将于2016年12月31日停止支持" target="_blank">Spring 3.2.x将于2016年12月31日停止支持</a>
                                    <span class="text-muted">wiselyman</span>
<a class="tag" taget="_blank" href="/search/Spring+3/1.htm">Spring 3</a>
                                    <div>      
        Spring 团队公布在2016年12月31日停止对Spring Framework 3.2.x(包含tomcat 6.x)的支持。在此之前spring团队将持续发布3.2.x的维护版本。 
  
       请大家及时准备及时升级到Spring </div>
                                </li>
                                <li><a href="/article/3862.htm"
                                       title="fis纯前端解决方案fis-pure" target="_blank">fis纯前端解决方案fis-pure</a>
                                    <span class="text-muted">zccst</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
                                    <div>作者:zccst 
 
FIS通过插件扩展可以完美的支持模块化的前端开发方案,我们通过FIS的二次封装能力,封装了一个功能完备的纯前端模块化方案pure。 
 
 
1,fis-pure的安装 
$ fis install -g fis-pure 
$ pure -v 
0.1.4 
 
 
2,下载demo到本地 
git clone https://github.com/hefangshi/f</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>