Electron + Vue3 开发桌面应用
目录
- 一、搭建项目
-
- 1、创建 Vue 项目
- 2、安装 Electron
- 3、运行 Electron
- 4、Vue 和 Electron 结合
- 5、其它配置
- 6、其它问题
-
- （1）热更新失效、控制台报错
- 二、打包
-
- 1、安装 electron-builder
- 2、打包配置
-
- （1）修改公共基础路径
- （2）修改 Electron 配置
- （3）打包配置
- （3）打包
- 3、其它问题
-
- （1）web和客户端同时部署
- （2）刷新页面后报错问题
- （3）不带协议的 url 被解析为 file 协议问题
- （4）存取 `cookie` 问题
- （5）限制只能打开一个窗口
- （6）关闭窗口时提示
- 三、代码签名
-
-
- （1）windows
- （2）mac
-
- 四、自动更新
相关文档
Vite: https://vitejs.cn
Vue : https://cn.vuejs.org
Electron: https://www.electronjs.org/
electron-builder: https://github.com/electron-userland/electron-builder
concurrently: https://github.com/open-cli-tools/concurrently
示例环境
电脑： MacBook Pro (13-inch, M1, 2020)
系统： macOS 11.6
Node 版本： v16.14.0
npm 版本： v7.1.2
一、搭建项目
1、创建 Vue 项目
参考：https://cn.vuejs.org/guide/quick-start.html
确保你安装了最新版本的 Node.js，然后在命令行中运行以下命令：
npm init vue@latest
这一指令将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。你将会看到一些诸如 TypeScript 和测试支持之类的可选功能提示，本项目只做示例，所以只选了 Vue Router ：
✔ Project name: … electron_vue3_test
✔ Add TypeScript? … No
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … Yes
✔ Add Pinia for state management? … No
✔ Add Vitest for Unit Testing? … No
✔ Add Cypress for both Unit and End-to-End testing? … No
✔ Add ESLint for code quality? … No
✔ Add Prettier for code formatting? … No
在项目被创建后，通过以下步骤安装依赖并启动开发服务器：
cd
npm install
npm run dev
执行后终端显示如下：
VITE v3.1.2 ready in 333 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
访问 http://localhost:5173/ 显示页面如下所示，Vue 项目创建成功
如果想要修改端口号，修改 vite.config.js 文件的 server.port 选项为你想要的端口号，这里我改成了 3004
export default defineConfig({
// ...
server: {
port: 3004
}
});
2、安装 Electron
参考：https://www.electronjs.org/zh/docs/latest/tutorial/installation
执行以下命令安装 Electron ：
npm install electron --save-dev
如果安装过程中卡住，可尝试设置以下环境变量
ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
mac 修改环境变量的方法：
在终端中输入vim ~/.zshrc打开文件
按i进入编辑模式
添加一行export ELECTRON_MIRROR="https://npmmirror.com/mirrors/electron/"
按esc退出编辑模式
输入:wq保存并退出
在终端输入source ~/.zshrc使刚才的修改生效
3、运行 Electron
参考：https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
在根目录创建 electron 文件夹，新建 index.html 文件，添加如下代码：
DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
http-equiv="Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<meta
http-equiv="X-Content-Security-Policy"
content="default-src 'self'; script-src 'self'"
/>
<title>Hello from Electron renderer!title>
head>
<body>
<h1>Hello from Electron renderer!h1>
<p>p>
body>
html>
在 electron 目录下新建文件 main.js，并添加如下代码：
const { app, BrowserWindow } = require('electron')
const path = require("path")
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
})
// 使用 loadFile 加载 electron/index.html 文件
mainWindow.loadFile(path.join(__dirname, "./index.html"));
}
// 在应用准备就绪时调用函数
app.whenReady().then(() => {
createWindow()
})
修改 package.json 文件，指定 electron/main.js 为 Electron 的入口文件，并添加 electron:dev 命令以开发模式运行 Electron：
{
"main": "electron/main.js",
"scripts": {
"electron:dev": "electron ."
}
}
然后打开终端，执行 npm run electron:dev ，显示窗口如下所示，Electron 运行成功
4、Vue 和 Electron 结合
删除 electron/index.html 文件，修改 electron/main.js 文件代码如下：
const { app, BrowserWindow } = require('electron')
// const path = require("path")
const createWindow = () => {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
})
// 主要改了这里
// mainWindow.loadFile(path.join(__dirname, "./index.html"));
// 使用 loadURL 加载 http://localhost:3004 ，也就是我们刚才创建的 Vue 项目地址
// 3004 改为你 Vue 项目的端口号
mainWindow.loadURL("http://localhost:3004/");
}
app.whenReady().then(() => {
createWindow()
})
有时开发需要，会使用 nginx 代理为线上地址，则将 loadURL 的参数改为代理的地址，并在 electron/main.js 中添加如下代码：
参考：https://stackoverflow.com/questions/49637026/mainwindow-loadurlhttps-localhost3000-show-white-screen-on-electron-app/49673272
// 证书的链接验证失败时，触发该事件
app.on(
"certificate-error",
function (event, webContents, url, error, certificate, callback) {
event.preventDefault();
callback(true);
}
);
打开终端，执行 npm run dev 启动 Vue 项目，再新建一个终端，执行 npm run electron:dev 启动 Electron ，即可成功启动，显示如下：
这样每次启动项目需要分别执行两个命令，有些麻烦，我们使用 concurrently把它们合并成一个命令。
参考：https://github.com/open-cli-tools/concurrently
执行以下命令，安装 concurrently：
npm install concurrently --save-dev
修改 package.json 文件中的 electron:dev 命令，同时执行 vite 和 electron . 两个命令，用引号将单独的命令括起来，并使用 \ 转义引号，代码如下：
// package.json
{
"scripts": {
"electron:dev": "concurrently vite \"electron .\""
}
}
重新执行 npm run electron:dev ，即可成功显示。
5、其它配置
以下是开发环境下，我的一些其它配置，可供参考：
// electron/main.js
const { app, BrowserWindow, Menu, screen } = require("electron");
const path = require("path");
// 是否是生产环境
const isPackaged = app.isPackaged;
// 禁止显示默认菜单
Menu.setApplicationMenu(null);
// 主窗口
let mainWindow;
const createWindow = () => {
// 创建浏览器窗口
mainWindow = new BrowserWindow({
// 默认窗口标题，如果由loadURL()加载的HTML文件中含有标签，此属性将被忽略。</span>
<span class="token literal-property property">title</span><span class="token operator">:</span> <span class="token string">"Electron + Vue3"</span><span class="token punctuation">,</span>
<span class="token comment">// width: 800,</span>
<span class="token comment">// height: 600,</span>
<span class="token comment">// 设置窗口尺寸为屏幕工作区尺寸</span>
<span class="token literal-property property">width</span><span class="token operator">:</span> screen<span class="token punctuation">.</span><span class="token function">getPrimaryDisplay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>workAreaSize<span class="token punctuation">.</span>width<span class="token punctuation">,</span>
<span class="token literal-property property">height</span><span class="token operator">:</span> screen<span class="token punctuation">.</span><span class="token function">getPrimaryDisplay</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>workAreaSize<span class="token punctuation">.</span>height<span class="token punctuation">,</span>
<span class="token comment">// 设置最小尺寸</span>
<span class="token literal-property property">minWidth</span><span class="token operator">:</span> <span class="token number">800</span><span class="token punctuation">,</span>
<span class="token literal-property property">minHeight</span><span class="token operator">:</span> <span class="token number">600</span><span class="token punctuation">,</span>
<span class="token comment">// 窗口图标。 在 Windows 上推荐使用 ICO 图标来获得最佳的视觉效果, 默认使用可执行文件的图标.</span>
<span class="token comment">// 在根目录中新建 build 文件夹存放图标等文件</span>
<span class="token literal-property property">icon</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">"../build/icon.ico"</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 keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isPackaged<span class="token punctuation">)</span> <span class="token punctuation">{</span>
mainWindow<span class="token punctuation">.</span>webContents<span class="token punctuation">.</span><span class="token function">openDevTools</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">// 使用 loadURL 加载 http://localhost:3004 ，也就是我们刚才创建的 Vue 项目地址</span>
<span class="token comment">// 3004 改为你 Vue 项目的端口号</span>
<span class="token comment">// mainWindow.loadURL("http://localhost:3004/");</span>
<span class="token comment">// 如果使用了 nginx 代理，url 改为代理地址</span>
mainWindow<span class="token punctuation">.</span><span class="token function">loadURL</span><span class="token punctuation">(</span><span class="token string">"https://example.com/"</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>
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><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></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>
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 comment">// 通常在 macOS 上，当点击 dock 中的应用程序图标时，如果没有其他</span>
<span class="token comment">// 打开的窗口，那么程序会重新创建一个窗口。</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 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>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 除了 macOS 外，当所有窗口都被关闭的时候退出程序。 因此，通常对程序和它们在任务栏上的图标来说，应当保持活跃状态，直到用户使用 Cmd + Q 退出。</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> 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>
<span class="token comment">// 如果开发环境使用了 nginx 代理，禁止证书报错</span>
<span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>isPackaged<span class="token punctuation">)</span> <span class="token punctuation">{</span>
<span class="token comment">// 证书的链接验证失败时，触发该事件</span>
app<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>
<span class="token string">"certificate-error"</span><span class="token punctuation">,</span>
<span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">event<span class="token punctuation">,</span> webContents<span class="token punctuation">,</span> url<span class="token punctuation">,</span> error<span class="token punctuation">,</span> certificate<span class="token punctuation">,</span> callback</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
event<span class="token punctuation">.</span><span class="token function">preventDefault</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token function">callback</span><span class="token punctuation">(</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 punctuation">}</span>
</code></pre>
<h2>6、其它问题</h2>
<h3>（1）热更新失效、控制台报错</h3>
<p>我使用了 <code>nginx</code> 代理，开发时出现了热更新失效的问题，并且控制台报了如下错误</p>
<pre><code>WebSocket connection to 'wss://example.com/' failed:
WebSocket connection to 'wss://localhost:3004/' failed:
[vite] failed to connect to websocket.
your current setup:
(browser) example.com/ <--[HTTP]--> localhost:3004/ (server)
(browser) example.com:/ <--[WebSocket (failing)]--> localhost:3004/ (server)
Check out your Vite / network configuration and https://vitejs.dev/config/server-options.html#server-hmr
</code></pre>
<p>已经通过在 <code>nginx</code> 的配置文件中添加如下代码解决：</p>
<blockquote>
<p>参考：https://blog.csdn.net/weixin_39621860/article/details/111490058</p>
</blockquote>
<pre><code>server {
# ...
location / {
# ...
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
}
}
</code></pre>
<hr>
<h1>二、打包</h1>
<h2>1、安装 electron-builder</h2>
<blockquote>
<p>参考：https://www.electron.build/#installation</p>
</blockquote>
<p>打开终端，执行一下命令安装：<br> 使用 <code>yarn</code> （官方推荐）：</p>
<pre><code>yarn add electron-builder --dev
</code></pre>
<p>或是 <code>npm</code> :</p>
<pre><code>npm install electron-builder --save-dev
</code></pre>
<h2>2、打包配置</h2>
<h3>（1）修改公共基础路径</h3>
<p>修改 <code>vite.config.js</code> 中的 <code>base</code> 选项为 “<code>./</code>”，如下所示：</p>
<pre><code>export default defineConfig({
base: "./"
// ...
});
</code></pre>
<h3>（2）修改 Electron 配置</h3>
<p>修改 <code>electron/main.js</code> 文件中 <code>mainWindow.loadURL</code> 的参数为 <code>vue</code> 打包后的文件路径</p>
<pre><code>// electron/main.js
const path = require("path");
const createWindow = () => {
//...
mainWindow.loadURL(`file://${path.join(__dirname, "../dist/index.html")}`);
};
</code></pre>
<h3>（3）打包配置</h3>
<p>在 <code>package.json</code> 中添加如下配置，可根据需求调整：</p>
<blockquote>
<p>参考：<br> https://www.electron.build/#quick-setup-guide<br> https://docs.npmjs.com/cli/v9/configuring-npm/package-json?v=true</p>
</blockquote>
<pre><code>{
"name": "electron_vue3_test",
"description": "Electron + Vue3 开发桌面应用",
"author": "喵喵喵",
"version": "1.0.0",
"scripts": {
// ...
"electron:build": "npm run build && electron-builder",
"postinstall": "electron-builder install-app-deps"
},
// ...
"build":{
"appId": "your.id",
"productName": "Electron + Vue3 开发桌面应用",
"copyright": "Copyright © year ${author}",
"directories": {
"output": "app_client"
},
"mac": {
"category": "public.app-category.music",
"icon": "build/icon.icns",
"target": [
{
"target": "dmg",
"arch": [
"x64"
]
},
{
"target": "zip",
"arch": [
"x64"
]
}
]
},
"win": {
"icon": "build/icon.ico",
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true,
"installerIcon": "build/icon.ico",
"uninstallerIcon": "build/icon.ico"
}
}
}
</code></pre>
<h3>（3）打包</h3>
<p>打开终端，执行 <code>npm run electron:build</code> 打包，打包后的应用程序在 <code>app_client</code> 目录下，<code>.dmg</code> 文件为 mac 的安装包，如下所示：<br> <a href="http://img.e-com-net.com/image/info8/62a486b7d99b43c9a3da71bdff337342.jpg" target="_blank"><img src="http://img.e-com-net.com/image/info8/62a486b7d99b43c9a3da71bdff337342.jpg" alt="Electron + Vue3 开发桌面应用_第4张图片" width="650" height="376" style="border:1px solid black;"></a></p>
<h2>3、其它问题</h2>
<h3>（1）web和客户端同时部署</h3>
<p>如果要一套代码部署在web端和客户端，还需要再做些处理。</p>
<p>在根目录下新增以下环境变量文件：<br> <code>.env.development</code> 文件，web 端开发环境配置，文件内容如下：</p>
<pre><code>VITE_PLATFORM = 'web'
</code></pre>
<p><code>.env.production</code> 文件，web 端生产环境配置，文件内容如下：</p>
<pre><code>VITE_PLATFORM = 'web'
</code></pre>
<p><code>.env.electron_production</code> 文件，客户端生产环境配置，文件内容如下：</p>
<pre><code>VITE_PLATFORM = 'electron'
</code></pre>
<p>修改 <code>package.json</code> 文件 <code>scripts</code> 下的 <code>electron:build</code> 命令为 <code>vite build --mode electron_production && electron-builder</code>。</p>
<p>修改 <code>vite.config.js</code> 文件如下：</p>
<pre><code>import { defineConfig, loadEnv } from "vite";
export default ({ mode }) => {
const isWeb = loadEnv(mode, process.cwd()).VITE_PLATFORM === "web";
const config = {
base: isWeb ? "/" : "./",
// ...
};
return defineConfig(config);
};
</code></pre>
<p>如果图片、css等资源文件需上传cdn，<code>vite.config.js</code> 文件还要增加如下代码：</p>
<pre><code>// ...
export default ({ mode }) => {
const isWeb = loadEnv(mode, process.cwd()).VITE_PLATFORM === "web";
const config = {
// ...
}
if (isWeb) {
config.experimental = {
renderBuiltUrl(filename: string, { type }: { type: "public" | "asset" }) {
if (type === "asset") {
return "https://example.com/" + filename;
}
},
};
}
return defineConfig(config);
};
</code></pre>
<h3>（2）刷新页面后报错问题</h3>
<p>我的方法是监听加载失败和导航事件，使用 <code>loadURL</code> 重新加载页面，并禁止刷新页面的快捷键。</p>
<p>在 <code>electron/main.js</code> 中判断如果是生产环境则做处理：</p>
<pre><code>// electron/main.js
const { app, BrowserWindow } = require("electron");
const isPackaged = app.isPackaged;
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
// ...
});
// 加载文件
function load() {
mainWindow.loadURL(
isPackaged
? `file://${path.join(__dirname, "../dist/index.html")}`
: "https://example.com/"
);
}
if (isPackaged) {
// 生产环境下，load 的是 html 文件，要做特殊处理。
// 加载失败之后触发
mainWindow.webContents.on("did-fail-load", () => {
load();
});
// 当用户或页面想要导航时触发。
// 它可能发生在 window.location 对象改变或用户点击页面上的链接时，可能会发生这种情况。
// 当使用如 webContents.loadURL 和 webContents.back APIs 以编程方式导航时，将不会触发此事件。
// 页面内导航也不会触发，例如点击锚点或更新 window.location.hash。 可使用 did-navigate-in-page 事件。
mainWindow.webContents.on("will-navigate", (event, url) => {
event.preventDefault();
load();
});
// 禁止使用快捷键刷新
mainWindow.webContents.on("before-input-event", (event, input) => {
mainWindow.webContents.setIgnoreMenuShortcuts(
input.key.toLowerCase() === "f5" ||
(input.control && input.key.toLowerCase() === "r") ||
(input.meta && input.key.toLowerCase() === "r")
);
});
}
load();
};
</code></pre>
<h3>（3）不带协议的 url 被解析为 file 协议问题</h3>
<p>项目接口中有很多不带协议名的 url 链接，应解析为 https 协议，但打包后被解析为 file 协议，在 <code>onBeforeRequest</code> 方法中对 url 做处理：</p>
<pre><code>// electron/main.js
const { app, BrowserWindow } = require("electron");
const isPackaged = app.isPackaged;
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
// ...
});
if (isPackaged) {
// 将 file://example.com/xxx 的 文件改为 https 协议
session.defaultSession.webRequest.onBeforeRequest((details, callback) => {
if (/^file:\/\/example\.com\//.test(details.url)) {
callback({ redirectURL: details.url.replace(/^file/, "https") });
} else {
callback(details);
}
});
}
};
</code></pre>
<h3>（4）存取 <code>cookie</code> 问题</h3>
<p>网站有些功能用到了 <code>cookie</code> ，但打包后的应用程序读取的 <code>html</code> 文件为 <code>file</code> 协议，存取 <code>cookie</code> 会有问题。</p>
<p>第一问题是请求接口时获取 cookie 和接收服务端响应时设置 cookie 的问题，我解决的办法是在 <code>onBeforeSendHeaders</code> 和 <code>onHeadersReceived</code> 方法中对 <code>cookie</code> 做处理，在网站域名下存取 <code>cookie</code>。</p>
<p>在 <code>electron</code> 目录下新建 <code>utils.js</code> 文件，内容如下：</p>
<pre><code>const { session } = require("electron");
// 将响应头中的 set-cookie 转成 set() 方法需要的 details 对象
function getCookieDetails(cookie) {
const details = {
url: "https://example.com/",
};
cookie = cookie.split("; ");
cookie.forEach((item, index) => {
item = item.split("=");
if (index === 0) {
details.name = item[0];
details.value = item[1];
} else if (["domain", "path"].includes(item[0])) {
details[item[0]] = item[1];
} else if (item[0] == "expires") {
details.expirationDate = new Date(item[1]).getTime() / 1000;
} else if (item[0] == "HttpOnly") {
details.httpOnly = true;
}
// HttpOnly 没有 item[1] value 设为 true
});
return details;
}
module.exports = {
// 是否是本站接口
isWeapi: /^https:\/\/example\.com\/api\//,
// 设置 cookies
setCookies: function (cookies) {
const setCookiePromise = [];
cookies.forEach((cookie) => {
const details = getCookieDetails(cookie);
setCookiePromise.push(session.defaultSession.cookies.set(details));
});
return Promise.all(setCookiePromise);
},
// 获取 cookies，传给后端
getCookies: async function () {
const cookies = await session.defaultSession.cookies.get({
domain: ".example.com"
});
const cookiesArr = [];
cookies.forEach((cookie) => {
cookiesArr.push(`${cookie.name}=${cookie.value}`);
});
return cookiesArr.join("; ");
},
};
</code></pre>
<p>在 <code>electron/main.js</code> 中添加如下代码：</p>
<pre><code>const { app, BrowserWindow, session } = require("electron");
const { isWeapi, setCookies, getCookies } = require("./utils.js");
const isPackaged = app.isPackaged;
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
// ...
});
if (isPackaged) {
// 请求接口时，如果是本站接口，则获取 .example.com 中的 cookie，添加到请求头中
session.defaultSession.webRequest.onBeforeSendHeaders(
async (details, callback) => {
if (isWeapi.test(details.url)) {
const cookies = await getCookies();
if (cookies) details.requestHeaders.cookie = cookies;
}
callback({ requestHeaders: details.requestHeaders });
}
);
// 接受到服务端响应时，如果是本站接口，则获取响应头中的 set-cookie，添加到 .example.com 的 cookie 中
session.defaultSession.webRequest.onHeadersReceived(
async (details, callback) => {
if (
isWeapi.test(details.url) &&
"responseHeaders" in details &&
"set-cookie" in details.responseHeaders
) {
await setCookies(details.responseHeaders["set-cookie"]);
}
callback({ responseHeaders: details.responseHeaders });
}
);
}
};
</code></pre>
<p>第二个问题是 <code>document.cookie</code> 获取不到，我在项目中使用的是 js-cookie 这个插件，我的解决方案是封装一个 Cookie对象，根据当前的协议类型判断使用哪种方法，如果是 <code>file</code> 协议，具体代码如下：</p>
<pre><code>// TODO: 待更新
</code></pre>
<h3>（5）限制只能打开一个窗口</h3>
<p>使用 <code>requestSingleInstanceLock</code> 方法判断是否已有实例在运行，并监听 <code>second-instance</code> ，当运行第二个实例时，聚焦到主窗口，在 <code>electron/main.js</code> 中添加如下代码：</p>
<pre><code>// 限制只能打开一个窗口
const gotTheLock = app.requestSingleInstanceLock();
if (!gotTheLock) {
app.quit();
} else {
app.on("second-instance", () => {
// 当运行第二个实例时,将会聚焦到 mainWindow 这个窗口
if (mainWindow) {
if (mainWindow.isMinimized()) mainWindow.restore();
mainWindow.focus();
// mainWindow.show();
}
});
app.whenReady().then(() => {
// ...
});
}
</code></pre>
<h3>（6）关闭窗口时提示</h3>
<p>监听 <code>close</code> 事件，使用 <code>dialog</code> 弹出提示，在 <code>electron/main.js</code> 中添加如下代码：</p>
<pre><code>// electron/main.js
const { app, BrowserWindow, dialog } = require("electron");
const isPackaged = app.isPackaged;
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
// ...
});
// 在窗口要关闭的时候触发
mainWindow.on("close", (e) => {
e.preventDefault();
dialog
.showMessageBox(mainWindow, {
type: "info",
title: "退出提示",
defaultId: 0,
cancelId: 1,
message: "确定要退出吗？",
buttons: ["退出", "取消"],
})
.then((res) => {
if (res.response === 0) {
// e.preventDefault();
// mainWindow.destroy();
app.exit(0);
}
});
});
};
</code></pre>
<hr>
<h1>三、代码签名</h1>
<blockquote>
<p>参考：https://www.electron.build/code-signing</p>
</blockquote>
<h3>（1）windows</h3>
<p>windows 的证书需要找有资质的商家购买，在此不做说明，只说一下签名配置。</p>
<p>在 <code>package.json</code> 的 <code>build</code> 中添加如下代码，设置使用的签名算法，我用的是 <code>sha256</code>:</p>
<pre><code>{
"build": {
"win": {
"signingHashAlgorithms": [
"sha256"
]
}
}
}
</code></pre>
<p>设置环境变量，<code>CSC_LINK</code>（证书地址） 和 <code>CSC_KEY_PASSWORD</code>（证书密码）。运行 <code>npm run electron:build</code> 即可打包签名的客户端。</p>
<h3>（2）mac</h3>
<blockquote>
<p>参考：Notarizing your Electron application</p>
</blockquote>
<p>mac 代码签名需要申请 Apple Developer Program ，具体流程可参考苹果开发者公司账号申请全流程以及出现的问题，有问题就在客服页面打电话咨询客服。</p>
<p>Apple Developer Program 申请完成后，要生成签名证书，参考Mac Electron 应用的签名（signature）和公证（notarization）。</p>
<p>证书生成后，需要修改一下配置，使用 Electron Notarize 公证应用程序，打开终端，执行以下命令安装 Electron Notarize：</p>
<pre><code> npm install @electron/notarize --save-dev
</code></pre>
<p>浏览器打开 https://appleid.apple.com/account/manage，生成 Apple 专用密码。</p>
<p>打开终端，输入如下命令，其中 <code><USERNAME></code> 替换为你的 Apple Id，<code><PASSWORD></code> 替换为刚才生成的专用密码：</p>
<pre><code>security add-generic-password -a "<USERNAME>" -w "<PASSWORD>" -s "AC_PASSWORD"
</code></pre>
<p>在 <code>build</code> 目录下新建 <code>notarize.js</code> 文件，并添加如下代码：</p>
<pre><code>const { notarize } = require("@electron/notarize");
exports.default = async function packageTask(context) {
const { electronPlatformName, appOutDir } = context;
if (electronPlatformName !== "darwin") {
return;
}
const appName = context.packager.appInfo.productFilename;
return await notarize({
appBundleId: "your.id",
appPath: `${appOutDir}/${appName}.app`,
appleId: "email@example.com",
appleIdPassword: `@keychain:AC_PASSWORD`,
});
};
</code></pre>
<p>在 <code>build</code> 目录下新建 <code>entitlements.mac.plist</code> 文件，并添加如下代码：</p>
<pre><code><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
<plist version="1.0">
<dict>
<key>com.apple.security.cs.allow-jit</key>
<true/>
<key>com.apple.security.cs.debugger</key>
<true/>
</dict>
</plist>
</code></pre>
<p>在 <code>package.json</code> 的 <code>build</code> 中添加如下代码：</p>
<pre><code>{
"build": {
"afterSign": "build/notarize.js",
"mac": {
"hardenedRuntime": true,
"gatekeeperAssess": false,
"entitlements": "build/entitlements.mac.plist",
"entitlementsInherit": "build/entitlements.mac.plist",
}
}
}
</code></pre>
<p>设置环境变量，<code>CSC_LINK</code>（证书地址） 和 <code>CSC_KEY_PASSWORD</code>（证书密码）。运行 <code>npm run electron:build</code> 即可打包签名的客户端。</p>
<hr>
<h1>四、自动更新</h1>
<blockquote>
<p>参考：Auto Update</p>
</blockquote>
<p>打开终端，执行以下命令安装 electron-updater：</p>
<pre><code>npm install electron-updater
</code></pre>
<p>在 <code>package.json</code> 的 <code>build</code> 中添加如下代码，其中 url 为客户端更新地址：</p>
<pre><code>{
"build": {
"publish": {
"provider": "generic",
"url": "https://example.com/app_client/",
"channel": "latest"
},
}
}
</code></pre>
<p>注：mac 必须进行代码签名、target 同时启用 dmg 和 zip，才能自动更新</p>
<p>在 <code>electron/main.js</code> 文件中添加如下代码：</p>
<pre><code>const { app, BrowserWindow, dialog } = require("electron");
const { autoUpdater } = require("electron-updater");
const isPackaged = app.isPackaged;
let mainWindow;
const createWindow = () => {
mainWindow = new BrowserWindow({
// ...
});
// 自动更新
function handleUpdate() {
// 更新地址
const updateURL = "https://js.houzi8.com/app_client/";
// 设置是否自动下载，默认是true,当点击检测到新版本时，会自动下载安装包，所以设置为false
autoUpdater.autoDownload = false;
// 如果安装包下载好了，那么当应用退出后是否自动安装更新
autoUpdater.autoInstallOnAppQuit = true;
// 是否接受开发版，测试版之类的版本号
autoUpdater.allowPrerelease = false;
// 是否可以回退版本，比如从开发版降到旧的稳定版
autoUpdater.allowDowngrade = false;
autoUpdater.setFeedURL(updateURL);
autoUpdater.on("error", function (error) {
// 检查更新出错
});
autoUpdater.on("checking-for-update", function () {
// 检查中
});
autoUpdater.on("update-not-available", function (info) {
// 已经是最新版
});
autoUpdater.on("update-available", function (info) {
// 检测到新版本
dialog
.showMessageBox(mainWindow, {
type: "info",
title: "更新提示",
defaultId: 0,
cancelId: 1,
message: "检测到新版本，是否立即更新？",
buttons: ["确定", "取消"],
})
.then((res) => {
if (res.response === 0) {
// 执行下载安装包
autoUpdater.downloadUpdate();
}
});
});
autoUpdater.on("download-progress", function (progress) {
// 下载进度
});
autoUpdater.on("update-downloaded", function (info) {
// 新安装包下载完成
dialog
.showMessageBox(mainWindow, {
type: "info",
title: "更新提示",
defaultId: 0,
cancelId: 1,
message: "新版本下载完成，是否立即安装？",
buttons: ["确定", "取消"],
})
.then((res) => {
if (res.response === 0) {
// 退出应用并安装更新
autoUpdater.quitAndInstall();
mainWindow.destroy();
}
});
});
// 执行自动更新检查
autoUpdater.checkForUpdates();
}
if (isPackaged) {
handleUpdate();
}
};
</code></pre>
<p>配置完成后，执行 <code>npm run electron:build</code> 打包，将打包生成的文件上传到 https://example.com/app_client/ 即可。<br> mac 下需上传的文件有：latest-mac.yml、Electron + Vue3 开发桌面应用-1.0.0-mac.zip、Electron + Vue3 开发桌面应用-1.0.0.dmg<br> windows 下需上传的文件有：latest.yml、Electron + Vue3 开发桌面应用 Setup 1.0.0.exe</p>
<hr>
<p><strong>参考文献：</strong></p>
<blockquote>
<p>Vite<br> Vue<br> Electron<br> electron-builder<br> concurrently<br> electron-vite-vue3-ts开发环境搭建<br> mainWindow.loadURL(“https://localhost:3000/”) show white screen on Electron app<br> vue热更新失效_vue-cli3热更新失效<br> package.json 文档<br> Notarizing your Electron application<br> Apple Developer Program<br> 苹果开发者公司账号申请全流程以及出现的问题<br> Mac Electron 应用的签名（signature）和公证（notarization）<br> Electron Notarize</p>
</blockquote>
</div>
</div>
</div>
</div>
</div>
<!--PC和WAP自适应版-->
<div id="SOHUCS" sid="1697922750951272448"></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">你可能感兴趣的:(Electron,electron,javascript,vue.js)</h4>
<div id="paradigm-article-related">
<div class="recommend-post mb30">
<ul class="widget-links">
<li><a href="/article/1892552587912212480.htm"
title="浅谈vue常用的状态管理库vuex、pinia" target="_blank">浅谈vue常用的状态管理库vuex、pinia</a>
<span class="text-muted">超绝前端乱学小白</span>
<a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/flutter/1.htm">flutter</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>Vuex和Pinia都是Vue.js应用程序中的状态管理库,虽然两种状态管理库的vue2，vue3都兼容，但是更推荐vue2（vuex），vue3（pinia）VuexVuex是Vue.js官方提供的状态管理库，它借鉴了Flux和Redux的设计思想，将应用的状态（state）集中管理于单个全局状态树中。核心概念State：存储应用程序的状态Getters：允许在Vuexstore中定义计算属性，</div>
</li>
<li><a href="/article/1892540346982789120.htm"
title="【vue 后台管理模板 ranAdmin 支持ant-design/ant-design/electron-plus/electron-plus-electron】" target="_blank">【vue 后台管理模板 ranAdmin 支持ant-design/ant-design/electron-plus/electron-plus-electron】</a>
<span class="text-muted">RanShakaLove</span>
<a class="tag" taget="_blank" href="/search/ranAdmin/1.htm">ranAdmin</a><a class="tag" taget="_blank" href="/search/vue/1.htm">vue</a><a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/electron/1.htm">electron</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a>
<div>【vue后台管理模板支持ant-design/ant-design/electron-plus/electron-plus-electron】个性化功能项目主要功能项目演示github地址vue-ant-designgitee地址vue-ant-design项目地址项目4个分支ant-designant-dessign-electronelement-pluselement-plus-electr</div>
</li>
<li><a href="/article/1892539841762095104.htm"
title="js的垃圾回收机制" target="_blank">js的垃圾回收机制</a>
<span class="text-muted">www.www</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a><a class="tag" taget="_blank" href="/search/%E7%9B%B8%E5%85%B3/1.htm">相关</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a><a class="tag" taget="_blank" href="/search/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>js中的垃圾回收机制JavaScript作为一种高级语言，开发者不需要手动管理内存的分配和释放。垃圾回收机制是JavaScript引擎中的一部分，负责自动回收那些不再被使用的内存，确保内存资源得到有效利用，避免内存泄漏。垃圾回收机制主要有两种算法：引用计数和标记清除引用计数基本原理：每个对象都有一个引用计数器，当有一个引用指向该对象时，计数器+1，当一个引用不再指向该对象时，计数器-1。如果某个对</div>
</li>
<li><a href="/article/1892536182668062720.htm"
title="前后端分离跨域问题解决方案" target="_blank">前后端分离跨域问题解决方案</a>
<span class="text-muted">慕容屠苏</span>
<a class="tag" taget="_blank" href="/search/%E5%A4%A7%E5%89%8D%E7%AB%AF%E7%88%AC%E5%9D%91%E4%B9%8B%E8%B7%AF/1.htm">大前端爬坑之路</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E5%90%8E%E7%AB%AF%E5%88%86%E7%A6%BB/1.htm">前后端分离</a><a class="tag" taget="_blank" href="/search/%E8%B7%A8%E5%9F%9F%E9%97%AE%E9%A2%98%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88/1.htm">跨域问题解决方案</a>
<div>前后端分离跨域问题解决方案现在的web开发中经常会用到前后分离技术，前后端分解技术，都会涉及到跨域问题。解决跨域问题的方法：第一种解决方案jsonp(不推荐使用)这种方案其实我是不赞同的，第一，在编码上jsonp会单独因为回调的关系，在传入传出还有定义回调函数上都会有编码的”不整洁”.简单阐述jsonp能够跨域是因为javascript的script标签，通过服务器返回script标签的code，</div>
</li>
<li><a href="/article/1892534920669097984.htm"
title="Vue.js 从新手到专家：第七章 高级渲染、动态组件和插件合成" target="_blank">Vue.js 从新手到专家：第七章 高级渲染、动态组件和插件合成</a>
<span class="text-muted">caifox菜狐狸</span>
<a class="tag" taget="_blank" href="/search/Vue.js/1.htm">Vue.js</a><a class="tag" taget="_blank" href="/search/%E4%BB%8E%E6%96%B0%E6%89%8B%E5%88%B0%E4%B8%93%E5%AE%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/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/vue.js/1.htm">vue.js</a><a class="tag" taget="_blank" href="/search/ecmascript/1.htm">ecmascript</a><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/vite/1.htm">vite</a>
<div>欢迎来到《Vue.js从新手到专家》的第七章！在这一章中，我们将深入探讨Vue.js的高级渲染技术、动态组件的使用以及如何通过插件扩展应用程序的功能。这些技能将帮助你构建更加灵活和可维护的应用程序。通过学习本章内容，你将掌握以下技能：理解Render函数和JSX的基本概念及其应用场景。学习函数式组件的定义及其实现方式。掌握如何为函数式组件定义Props和Emits。学习如何使用Vue插件全局地添加</div>
</li>
<li><a href="/article/1892532653761032192.htm"
title="CSS flex布局 列表单个元素点击 本行下插入详情独占一行" target="_blank">CSS flex布局 列表单个元素点击 本行下插入详情独占一行</a>
<span class="text-muted">Cxiaomu</span>
<a class="tag" taget="_blank" href="/search/CSS3/1.htm">CSS3</a><a class="tag" taget="_blank" href="/search/UI%E8%AE%BE%E8%AE%A1/1.htm">UI设计</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>技术栈：Vue2+javaScript简介在实际开发过程中有遇到一个场景：一个list，每行个数固定，点击单个元素后，在当前行与下一行之间插入一行元素详情，便于更直观的查看到对应的数据详情。这种情形，在移动端比较常见，比如用户列表，点击单个列表展示详情，可以考虑flex布局+positionrelative定位。实现思路对于需求重点和实现拆解列表元素：for遍历每行固定（3）个元素：flex布局、</div>
</li>
<li><a href="/article/1892529999513186304.htm"
title="AJAX使用和固定格式" target="_blank">AJAX使用和固定格式</a>
<span class="text-muted">乐多_L</span>
<a class="tag" taget="_blank" href="/search/ajax/1.htm">ajax</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>ajax的全称AsynchronousJavaScriptandXML(异步JavaScript和XML)。ajax是一种创建交互式网页应用的网页开发技术。其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新的情况下和服务器进行交互。方法描述newXMLHttpRequest()生成一个XMLHttpRequ</div>
</li>
<li><a href="/article/1892530000586928128.htm"
title="JavaScript的内置对象有哪些？" target="_blank">JavaScript的内置对象有哪些？</a>
<span class="text-muted">乐多_L</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>一、内置对象1、概念JavaScript中的对象共分为3种：自定义对象、浏览器对象和内置对象。之前我们自己创建的对象都属于自定义对象，而内置对象又称为API，是指JavaScript语言自己封装的一些对象，用来提供一些常用的基本功能，来帮助我们提高开发速度，例如：数学-Math、日期-Date、数组-Array、字符串-String等等。JavaScript的内置对象很多，我们不可能都记住，所以我</div>
</li>
<li><a href="/article/1892526340897304576.htm"
title="《JavaScript高级程序设计》——第四章：变量、作用域与内存管理" target="_blank">《JavaScript高级程序设计》——第四章：变量、作用域与内存管理</a>
<span class="text-muted">dorabighead</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高级程序设计》——第四章：变量、作用域与内存管理大家好！我是小哆啦，欢迎回到《JavaScript高级程序设计》的读书笔记大本营！在这章中，我们要聊的是两个让人头疼又迷人的话题——变量、作用域与内存管理。有些人一提到这些，就会感到一阵头晕目眩，恍若置身一场JavaScript版的迷宫大冒险！但今天，小哆啦会带你们轻松过关，深入了解这些概念，并且保持足够的幽默感，让你既能笑着学</div>
</li>
<li><a href="/article/1892499844677824512.htm"
title="IIS3DWBTR参数和电路参考设计" target="_blank">IIS3DWBTR参数和电路参考设计</a>
<span class="text-muted">鹿屿二向箔</span>
<a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a>
<div>以下是IIS3DWBTR（STMicroelectronics3轴数字振动传感器）的核心参数总结：1.基本特性类型：3轴数字振动传感器（加速度计），支持超宽带宽和低噪声特性。量程范围：用户可选±2g、±4g、±8g、±16g，适应不同振动检测需求。灵敏度：根据量程不同，灵敏度范围为2049LSB/g（±16g）至16393LSB/g（±2g）。带宽：平坦频率响应范围达DC至6kHz（±3dB点），</div>
</li>
<li><a href="/article/1892487492410601472.htm"
title="JavaScript 闭包与作用域的深度解析" target="_blank">JavaScript 闭包与作用域的深度解析</a>
<span class="text-muted">小钟H呀</span>
<a class="tag" taget="_blank" href="/search/JS%E7%9F%A5%E8%AF%86%E6%89%8B%E5%86%8C/1.htm">JS知识手册</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>引言在JavaScript世界里，闭包和作用域是两个核心概念，理解它们对于编写高效、可维护的代码至关重要。本文将深入探讨JavaScript闭包与作用域的原理、应用及注意事项。一、作用域的概念（一）什么是作用域作用域是指变量和函数的可访问范围。在JavaScript中，主要有全局作用域和局部作用域。全局作用域：在代码的任何地方都可以访问到的变量和函数，通常在脚本的最外层或通过全局对象（如windo</div>
</li>
<li><a href="/article/1892474879861649408.htm"
title="探索 TypeScript Redux：构建大规模JavaScript应用的终极指南" target="_blank">探索 TypeScript Redux：构建大规模JavaScript应用的终极指南</a>
<span class="text-muted">柳旖岭</span>
<div>探索TypeScriptRedux：构建大规模JavaScript应用的终极指南去发现同类优质开源项目:https://gitcode.com/在当今快速发展的前端开发领域中，组合正确工具集来应对复杂性和扩展性挑战至关重要。今天，我们将深入了解一个令人兴奋的开源项目——TypeScriptRedux，它结合了TypeScript、JSPM、typings、React和Redux的强大功能，为开发者</div>
</li>
<li><a href="/article/1892468952072777728.htm"
title="Vue.js 基础与实战指南：从入门到跑路" target="_blank">Vue.js 基础与实战指南：从入门到跑路</a>
<span class="text-muted">王嘉俊705</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/visual/1.htm">visual</a><a class="tag" taget="_blank" href="/search/studio/1.htm">studio</a><a class="tag" taget="_blank" href="/search/code/1.htm">code</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/vue.js/1.htm">vue.js</a>
<div>一、Vue的两种使用方式扩展核心包开发直接通过引入Vue.js，适用于简单页面或局部功能增强。优点：轻量，无需构建工具。缺点：难以管理复杂项目，缺少工程化支持。工程化开发使用VueCLI、Vite等工具创建项目，结合Webpack/Vite构建。支持单文件组件（.vue文件），结构清晰（`,,）。插件生态丰富（如VueRouter、Vuex、Pinia）。二、Vue实例的深入理解核心配置项 new</div>
</li>
<li><a href="/article/1892446115870076928.htm"
title="JavaScript网页设计案例：打造交互式个人简历网站" target="_blank">JavaScript网页设计案例：打造交互式个人简历网站</a>
<span class="text-muted">程序媛小果</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/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>
<div>在当今数字化时代，个人简历不再局限于纸质文档，而是越来越多地以网页形式呈现。JavaScript作为一种强大的客户端脚本语言，为网页设计提供了无限可能，使得网页不仅仅是静态的信息展示，而是具有丰富交互性的平台。本文将通过一个案例，展示如何使用HTML、CSS和JavaScript来设计一个交互式的个人简历网站。1.项目概述本案例的目标是创建一个个人简历网站，它不仅展示个人信息、工作经历、教育背景和</div>
</li>
<li><a href="/article/1892446114204938240.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/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>在Web开发的早期，JavaScript成为了客户端脚本语言的代名词，而随着时间的推移，JavaScript已经发展成为一个功能强大的语言，它的影响力远远超出了浏览器的范畴。在这场语言演进的过程中，ECMAScript扮演了一个关键角色。本文将深入探讨ECMAScript与JavaScript之间的关系，以及它们之间的主要区别。1.什么是ECMAScript？ECMAScript是由欧洲计算机制造</div>
</li>
<li><a href="/article/1892415446636883968.htm"
title="null和undefined的区别" target="_blank">null和undefined的区别</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/%E5%BC%80%E5%8F%91%E8%AF%AD%E8%A8%80/1.htm">开发语言</a>
<div>null和undefined是JavaScript中两个特殊的值，它们都表示“无”或“空”，但在语义和使用场景上有明显区别。以下是它们的详细对比：1.定义undefined表示变量已声明但未赋值，或函数没有返回值时的默认返回值。是JavaScript引擎默认赋予的初始值。类型为undefined。null表示一个空对象指针，通常用于显式表示“无”或“空”。是开发者主动赋值的值。类型为object（</div>
</li>
<li><a href="/article/1892413304811352064.htm"
title="dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)" target="_blank">dreamweaver html语言,Dreamweaver网页设计与制作(HTML+CSS+JavaScript)</a>
<span class="text-muted">weixin_39979245</span>
<a class="tag" taget="_blank" href="/search/dreamweaver/1.htm">dreamweaver</a><a class="tag" taget="_blank" href="/search/html%E8%AF%AD%E8%A8%80/1.htm">html语言</a>
<div>Dreamweaver网页设计与制作(HTML+CSS+JavaScript)编辑锁定讨论上传视频本词条缺少信息栏，补充相关内容使词条更完整，还能快速升级，赶紧来编辑吧！《Dreamweaver网页设计与制作(HTML+CSS+JavaScript)》是2014年清华大学出版社出版的图书。Dreamweaver网页设计与制作(HTML+CSS+JavaScript)图书详细信息编辑ISBN：978</div>
</li>
<li><a href="/article/1892412800781840384.htm"
title="html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作" target="_blank">html 5中css的含义,HTML 5+CSS+JavaScript网页设计与制作</a>
<span class="text-muted">律保阁-Michael</span>
<a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/5%E4%B8%ADcss%E7%9A%84%E5%90%AB%E4%B9%89/1.htm">5中css的含义</a>
<div>HTML5+CSS+JavaScript网页设计与制作编辑锁定讨论上传视频《HTML5+CSS+JavaScript网页设计与制作》是2019年4月清华大学出版社出版的图书，作者是彭进香、张茂红、王玉娟、叶娟、孙秀娟、万幸、刘英。书名HTML5+CSS+JavaScript网页设计与制作作者彭进香张茂红王玉娟叶娟作者孙秀娟展开作者孙秀娟万幸刘英收起出版社清华大学出版社出版时间2019年4月定价48</div>
</li>
<li><a href="/article/1892412295414345728.htm"
title="html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准" target="_blank">html+css+javascript实用详解,HTML+CSS+JavaScript 课程标准</a>
<span class="text-muted">vvv666s</span>
<div>②学会运用HTML语言中的标记设置颜色、文本格式和列表；熟练掌握颜色值的配置和背景图案的设置方法,熟练掌握字符、链接颜色的设置方法；③掌握在网页中添加CSS、嵌入图像、声音、多媒体信息的方法；④熟练掌握表格的使用方法，学会利用表格设布局网页；掌握框架制作网页的方法，会使用框架设计网页；掌握制作表单的方法，会利用表单建立交互式页面；⑤掌握JavaScript语言的语法；⑥掌握在HTML语言代码中嵌入</div>
</li>
<li><a href="/article/1892410529520087040.htm"
title="JavaScript的魔法世界：巧妙之处与实战技巧" target="_blank">JavaScript的魔法世界：巧妙之处与实战技巧</a>
<span class="text-muted">skyksksksksks</span>
<a class="tag" taget="_blank" href="/search/%E7%BB%BC%E5%90%88%E4%B8%AA%E4%BA%BA%E6%9D%82%E8%AE%B0/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/html5/1.htm">html5</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、从浏览器玩具到全栈利器的蜕变之路JavaScript诞生于1995年，原本只是网景公司为浏览器设计的"小脚本"。谁能想到这个曾被戏称为"玩具语言"的家伙，如今已蜕变成支撑现代Web开发的擎天柱？就像一只破茧成蝶的幼虫，JavaScript经历了ECMAScript标准的持续进化，在Node.js的加持下突破了浏览器的桎梏，实现了从客户端到服务端的华丽转身。V8引擎的涡轮增压让它跑得比猎豹还快，</div>
</li>
<li><a href="/article/1892407376435277824.htm"
title="前端开发入门指南：HTML、CSS和JavaScript基础知识" target="_blank">前端开发入门指南：HTML、CSS和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/css/1.htm">css</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>
<div>引言：大家好，我是一名简单的前端开发爱好者，对于网页设计和用户体验的追求让我深深着迷。在本篇文章中，我将带领大家探索前端开发的基础知识，涵盖HTML、CSS和JavaScript。如果你对这个领域感兴趣，或者想要了解如何开始学习前端开发，那么这篇文章将为你提供一个良好的起点。1.前端开发概述在我们深入了解前端开发的细节之前，让我们先了解一下前端开发的定义和作用。简而言之，前端开发涉及构建用户直接与</div>
</li>
<li><a href="/article/1892400189780586496.htm"
title="js如何直接下载文件流" target="_blank">js如何直接下载文件流</a>
<span class="text-muted">涔溪</span>
<a class="tag" taget="_blank" href="/search/js/1.htm">js</a><a class="tag" taget="_blank" href="/search/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%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中直接处理文件下载，尤其是在处理文件流的情况下，通常涉及到使用fetchAPI或者XMLHttpRequest来获取文件流，并通过创建一个临时的标签（锚点元素）触发下载。以下是使用fetchAPI的一个示例：fetch('你的文件URL',{method:'GET',headers:{//如果需要的话，可以在这里添加请求头}}).then(response=>response</div>
</li>
<li><a href="/article/1892398803407925248.htm"
title="部署前端项目2" target="_blank">部署前端项目2</a>
<span class="text-muted">augenstern416</span>
<a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>前端项目的部署是将开发完成的前端代码发布到服务器或云平台，使其能够通过互联网访问。以下是前端项目部署的常见步骤和工具：1.准备工作在部署之前，确保项目已经完成以下步骤：代码优化：压缩JavaScript、CSS和图片文件，减少文件体积。环境配置：区分开发环境和生产环境（如API地址、环境变量等）。测试：确保项目在本地测试通过，没有明显Bug。2.部署流程1.构建项目大多数前端项目（如React、V</div>
</li>
<li><a href="/article/1892398677004185600.htm"
title="对象的操作" target="_blank">对象的操作</a>
<span class="text-muted">augenstern416</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提供了许多内置对象和方法，用于处理数据、操作DOM、处理事件等。以下是一些常用对象及其方法和扩展技巧：1.Object对象Object是JavaScript中最基础的对象，几乎所有对象都继承自Object。常用方法Object.keys(obj)：返回对象的所有可枚举属性的键名数组。constobj={a:1,b:2};console.log(Object.key</div>
</li>
<li><a href="/article/1892390738520502272.htm"
title="前端基础入门：HTML、CSS 和 JavaScript" target="_blank">前端基础入门：HTML、CSS 和 JavaScript</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/%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/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/js/1.htm">js</a>
<div>在现代网页开发中，前端技术扮演着至关重要的角色。无论是个人网站、企业官网，还是复杂的Web应用程序，前端开发的基础技术HTML、CSS和JavaScript都是每个开发者必须掌握的核心技能。本文将详细介绍这三者的基本概念及其应用一、HTML——网页的骨架HTML（HyperTextMarkupLanguage）是构建网页的基础语言。它是网页的结构和内容的标记语言，决定了网页上的文本、图像、表单等元</div>
</li>
<li><a href="/article/1892389477767245824.htm"
title="网页制作03-html,css,javascript初认识のhtml的图像设置" target="_blank">网页制作03-html,css,javascript初认识のhtml的图像设置</a>
<span class="text-muted">Ama_tor</span>
<a class="tag" taget="_blank" href="/search/%E7%BD%91%E9%A1%B5%E5%88%B6%E4%BD%9C%E4%B8%93%E6%A0%8F/1.htm">网页制作专栏</a><a class="tag" taget="_blank" href="/search/html/1.htm">html</a><a class="tag" taget="_blank" href="/search/css/1.htm">css</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>一、图像格式网页中图像的格式有三种，Gif，Jpeg，PngGif：Graphicinterchangeformat图像交换格式，文件最多可使用256种颜色，最适合显示色调不连续或具有大面积单一颜色的图像，例如导航条、按钮、图标、徽标或其他具有统一色彩和色调的图像；还可以制作动态图像Jpeg：Giantphotographicexpectgroup，它是一种图像压缩格式，可包含数百万种颜色，不支持</div>
</li>
<li><a href="/article/1892386200312934400.htm"
title="JavaScript——操作浏览器窗口" target="_blank">JavaScript——操作浏览器窗口</a>
<span class="text-muted">yiqi_perss</span>
<a class="tag" taget="_blank" href="/search/JavaScript/1.htm">JavaScript</a>
<div>学习内容：今天学习了alert提示框，提示框中的内容，就是alert后边小括号中的内容例如：alert('我要学JavaScript!');alert('我要学习!');学习总结：日常小总结例如：后面的分号；可以随便去掉，不影响运行效果。不能去掉小括号，否则会报错，不信你可以试试。必须是英文引号，否则会报错。课外扩展：历史渊源例如：ECMAScript是一种语言标准，而JavaScript是网景公</div>
</li>
<li><a href="/article/1892348487345958912.htm"
title="STMicroelectronics 系列：STM32F1 系列_（8）.STM32F1系列的USART接口及编程" target="_blank">STMicroelectronics 系列：STM32F1 系列_（8）.STM32F1系列的USART接口及编程</a>
<span class="text-muted">kkchenkx</span>
<a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA%E5%BC%80%E5%8F%91/1.htm">单片机开发</a><a class="tag" taget="_blank" href="/search/stm32/1.htm">stm32</a><a class="tag" taget="_blank" href="/search/%E5%B5%8C%E5%85%A5%E5%BC%8F%E7%A1%AC%E4%BB%B6/1.htm">嵌入式硬件</a><a class="tag" taget="_blank" href="/search/%E5%8D%95%E7%89%87%E6%9C%BA/1.htm">单片机</a>
<div>STM32F1系列的USART接口及编程1.USART接口概述USART（UniversalSynchronousAsynchronousReceiverTransmitter）是一种串行通信接口，可以支持异步和同步通信模式。在STM32F1系列单片机中，USART接口用于实现与外部设备的串行数据通信，例如与其他单片机、计算机、传感器等设备进行数据交换。USART接口可以配置为多种通信模式，包括U</div>
</li>
<li><a href="/article/1892344959785299968.htm"
title="百度极速版APP 自动脚本 javascript代码" target="_blank">百度极速版APP 自动脚本 javascript代码</a>
<span class="text-muted">zaxjb123</span>
<a class="tag" taget="_blank" href="/search/dubbo/1.htm">dubbo</a>
<div>使用JavaScript编写针对百度极速版APP的自动化脚本通常涉及到使用WebView测试框架，比如Puppeteer或Selenium，这些工具允许你控制一个浏览器或WebView环境，从而与网页或APP中的Web内容进行交互。然而，对于原生APP（如百度极速版）的自动化测试，通常需要使用专门的移动应用自动化框架，如Appium。Appium支持多种编程语言，包括JavaScript。要使用J</div>
</li>
<li><a href="/article/1892333107923709952.htm"
title="JavaScript案例（简易ATM机）" target="_blank">JavaScript案例（简易ATM机）</a>
<span class="text-muted">fusheng_cn</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/javascript/1.htm">javascript</a><a class="tag" taget="_blank" href="/search/%E5%89%8D%E7%AB%AF/1.htm">前端</a>
<div>Documentvarnum=100;do{varoperate=prompt("请输入您需要的操作：\n1.存钱\n2.取钱\n3.显示余额\n4.退出");switch(parseInt(operate)){case1://存钱varmoney1=prompt("请输入您需要存入的钱数：");varsum1=num+parseInt(money1);alert("您的余额为："+sum1);n</div>
</li>
<li><a href="/article/15.htm"
title="Spring4.1新特性——Spring MVC增强" target="_blank">Spring4.1新特性——Spring MVC增强</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/spring+4.1/1.htm">spring 4.1</a>
<div>目录
Spring4.1新特性——综述
Spring4.1新特性——Spring核心部分及其他
Spring4.1新特性——Spring缓存框架增强
Spring4.1新特性——异步调用和事件机制的异常处理
Spring4.1新特性——数据库集成测试脚本初始化
Spring4.1新特性——Spring MVC增强
Spring4.1新特性——页面自动化测试框架Spring MVC T</div>
</li>
<li><a href="/article/142.htm"
title="mysql 性能查询优化" target="_blank">mysql 性能查询优化</a>
<span class="text-muted">annan211</span>
<a class="tag" taget="_blank" href="/search/java/1.htm">java</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E4%BC%98%E5%8C%96/1.htm">优化</a><a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a><a class="tag" taget="_blank" href="/search/%E5%BA%94%E7%94%A8%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">应用服务器</a>
<div>
1 时间到底花在哪了？
mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了
检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方
花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操</div>
</li>
<li><a href="/article/269.htm"
title="windows系统配置" target="_blank">windows系统配置</a>
<span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/windows/1.htm">windows</a>
<div>删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可：
http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html
类似的还有pagefile.sys
msconfig 配置启动项
shutdown 定时关机
ipconfig 查看网络配置
ipconfig /flushdns</div>
</li>
<li><a href="/article/396.htm"
title="人体的排毒时间" target="_blank">人体的排毒时间</a>
<span class="text-muted">Array_06</span>
<a class="tag" taget="_blank" href="/search/%E5%B7%A5%E4%BD%9C/1.htm">工作</a>
<div>========================
|| 人体的排毒时间是什么时候？||
========================
转载于：
http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR</div>
</li>
<li><a href="/article/523.htm"
title="ZooKeeper" target="_blank">ZooKeeper</a>
<span class="text-muted">cugfy</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
<div>Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea</div>
</li>
<li><a href="/article/650.htm"
title="网络爬虫的乱码处理" target="_blank">网络爬虫的乱码处理</a>
<span class="text-muted">随意而生</span>
<a class="tag" taget="_blank" href="/search/%E7%88%AC%E8%99%AB/1.htm">爬虫</a><a class="tag" taget="_blank" href="/search/%E7%BD%91%E7%BB%9C/1.htm">网络</a>
<div>下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。 网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理</div>
</li>
<li><a href="/article/777.htm"
title="Xcode常用快捷键" target="_blank">Xcode常用快捷键</a>
<span class="text-muted">张亚雄</span>
<a class="tag" taget="_blank" href="/search/xcode/1.htm">xcode</a>
<div>一、总结的常用命令：
隐藏xcode command+h
退出xcode command+q
关闭窗口 command+w
关闭所有窗口 command+option+w
关闭当前</div>
</li>
<li><a href="/article/904.htm"
title="mongoDB索引操作" target="_blank">mongoDB索引操作</a>
<span class="text-muted">adminjun</span>
<a class="tag" taget="_blank" href="/search/mongodb/1.htm">mongodb</a><a class="tag" taget="_blank" href="/search/%E7%B4%A2%E5%BC%95/1.htm">索引</a>
<div>一、索引基础： MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令： > db.test.ensureIndex({"username":1}) 可以通过下面的名称查看索引是否已经成功建立： &nbs</div>
</li>
<li><a href="/article/1031.htm"
title="成都软件园实习那些话" target="_blank">成都软件园实习那些话</a>
<span class="text-muted">aijuans</span>
<a class="tag" taget="_blank" href="/search/%E6%88%90%E9%83%BD+%E8%BD%AF%E4%BB%B6%E5%9B%AD+%E5%AE%9E%E4%B9%A0/1.htm">成都 软件园 实习</a>
<div>无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~
断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。
都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都</div>
</li>
<li><a href="/article/1158.htm"
title="Linux下FTP服务器安装及配置" target="_blank">Linux下FTP服务器安装及配置</a>
<span class="text-muted">ayaoxinchao</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/FTP%E6%9C%8D%E5%8A%A1%E5%99%A8/1.htm">FTP服务器</a><a class="tag" taget="_blank" href="/search/vsftp/1.htm">vsftp</a>
<div>检测是否安装了FTP
[root@localhost ~]# rpm -q vsftpd
如果未安装：package vsftpd is not installed 安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息
安装FTP
运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf</div>
</li>
<li><a href="/article/1285.htm"
title="使用mongo-java-driver获取文档id和查找文档" target="_blank">使用mongo-java-driver获取文档id和查找文档</a>
<span class="text-muted">BigBird2012</span>
<a class="tag" taget="_blank" href="/search/driver/1.htm">driver</a>
<div>注：本文所有代码都使用的mongo-java-driver实现。
在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在</div>
</li>
<li><a href="/article/1412.htm"
title="JSONObject以及json串" target="_blank">JSONObject以及json串</a>
<span class="text-muted">bijian1013</span>
<a class="tag" taget="_blank" href="/search/json/1.htm">json</a><a class="tag" taget="_blank" href="/search/JSONObject/1.htm">JSONObject</a>
<div>一.JAR包简介
要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：
1.commons-lang-2.0.jar
2.commons-beanutils-1.7.0.jar
3.commons-collections-3.1.jar
&n</div>
</li>
<li><a href="/article/1539.htm"
title="[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性" target="_blank">[Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a>
<div>为了说明问题，看个简单的代码，
import org.apache.zookeeper.*;
import java.io.IOException;
import java.util.concurrent.CountDownLatch;
import java.util.concurrent.ThreadLocal</div>
</li>
<li><a href="/article/1666.htm"
title="【Scala十二】Scala核心六：Trait" target="_blank">【Scala十二】Scala核心六：Trait</a>
<span class="text-muted">bit1129</span>
<a class="tag" taget="_blank" href="/search/scala/1.htm">scala</a>
<div>Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c</div>
</li>
<li><a href="/article/1793.htm"
title="weblogic version 10.3破解" target="_blank">weblogic version 10.3破解</a>
<span class="text-muted">ronin47</span>
<a class="tag" taget="_blank" href="/search/weblogic/1.htm">weblogic</a>
<div>版本：WebLogic Server 10.3
说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录
例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain
1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa</div>
</li>
<li><a href="/article/1920.htm"
title="求第n个斐波那契数" target="_blank">求第n个斐波那契数</a>
<span class="text-muted">BrokenDreams</span>
<div> 今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。
自己试了下，搞了好久。。。基础要加强了。
&nbs</div>
</li>
<li><a href="/article/2047.htm"
title="读《研磨设计模式》-代码笔记-访问者模式-Visitor" target="_blank">读《研磨设计模式》-代码笔记-访问者模式-Visitor</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/%E8%AE%BE%E8%AE%A1%E6%A8%A1%E5%BC%8F/1.htm">设计模式</a>
<div>声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/
import java.util.ArrayList;
import java.util.List;
interface IVisitor {
//第二次分派，Visitor调用Element
void visitConcret</div>
</li>
<li><a href="/article/2174.htm"
title="MatConvNet的excise 3改为网络配置文件形式" target="_blank">MatConvNet的excise 3改为网络配置文件形式</a>
<span class="text-muted">cherishLC</span>
<a class="tag" taget="_blank" href="/search/matlab/1.htm">matlab</a>
<div>MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。
主页：
http://www.vlfeat.org/matconvnet/
教程：
http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html
注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet：
http</div>
</li>
<li><a href="/article/2301.htm"
title="ZK Timeout再讨论" target="_blank">ZK Timeout再讨论</a>
<span class="text-muted">chenchao051</span>
<a class="tag" taget="_blank" href="/search/zookeeper/1.htm">zookeeper</a><a class="tag" taget="_blank" href="/search/timeout/1.htm">timeout</a><a class="tag" taget="_blank" href="/search/hbase/1.htm">hbase</a>
<div>http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息：
Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003</div>
</li>
<li><a href="/article/2428.htm"
title="CASE WHEN 用法介绍" target="_blank">CASE WHEN 用法介绍</a>
<span class="text-muted">daizj</span>
<a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/group+by/1.htm">group by</a><a class="tag" taget="_blank" href="/search/case+when/1.htm">case when</a>
<div>CASE WHEN 用法介绍
1. CASE WHEN 表达式有两种形式
--简单Case函数
CASE sex
WHEN '1' THEN '男'
WHEN '2' THEN '女'
ELSE '其他' END
--Case搜索函数
CASE
WHEN sex = '1' THEN </div>
</li>
<li><a href="/article/2555.htm"
title="PHP技巧汇总:提高PHP性能的53个技巧" target="_blank">PHP技巧汇总:提高PHP性能的53个技巧</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
<div>PHP技巧汇总:提高PHP性能的53个技巧 用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量， 单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注： PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。 1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍</div>
</li>
<li><a href="/article/2682.htm"
title="Yii框架中CGridView的使用方法以及详细示例" target="_blank">Yii框架中CGridView的使用方法以及详细示例</a>
<span class="text-muted">dcj3sjt126com</span>
<a class="tag" taget="_blank" href="/search/yii/1.htm">yii</a>
<div>CGridView显示一个数据项的列表中的一个表。
表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。 CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。
实例代码如下：</div>
</li>
<li><a href="/article/2809.htm"
title="Maven项目打包成可执行Jar文件" target="_blank">Maven项目打包成可执行Jar文件</a>
<span class="text-muted">dyy_gusi</span>
<a class="tag" taget="_blank" href="/search/assembly/1.htm">assembly</a>
<div>Maven项目打包成可执行Jar文件
在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下：
1、在项目中加入插件的依赖：
<plugin>
</div>
</li>
<li><a href="/article/2936.htm"
title="php常见错误" target="_blank">php常见错误</a>
<span class="text-muted">geeksun</span>
<a class="tag" taget="_blank" href="/search/PHP/1.htm">PHP</a>
<div>1. kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc</div>
</li>
<li><a href="/article/3063.htm"
title="修改linux的用户名" target="_blank">修改linux的用户名</a>
<span class="text-muted">hongtoushizi</span>
<a class="tag" taget="_blank" href="/search/linux/1.htm">linux</a><a class="tag" taget="_blank" href="/search/change+password/1.htm">change password</a>
<div>Change Linux Username
更改Linux用户名，需要修改4个系统的文件：
/etc/passwd
/etc/shadow
/etc/group
/etc/gshadow
古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替：
vipw
vipw -s
vigr
vigr -s
具体的操作顺</div>
</li>
<li><a href="/article/3190.htm"
title="第五章 常用Lua开发库1-redis、mysql、http客户端" target="_blank">第五章 常用Lua开发库1-redis、mysql、http客户端</a>
<span class="text-muted">jinnianshilongnian</span>
<a class="tag" taget="_blank" href="/search/nginx/1.htm">nginx</a><a class="tag" taget="_blank" href="/search/lua/1.htm">lua</a>
<div>对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。
一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。
Redis客户端
lua-resty-r</div>
</li>
<li><a href="/article/3317.htm"
title="zkClient 监控机制实现" target="_blank">zkClient 监控机制实现</a>
<span class="text-muted">liyonghui160com</span>
<a class="tag" taget="_blank" href="/search/zkClient+%E7%9B%91%E6%8E%A7%E6%9C%BA%E5%88%B6%E5%AE%9E%E7%8E%B0/1.htm">zkClient 监控机制实现</a>
<div>
直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举</div>
</li>
<li><a href="/article/3444.htm"
title="在Mysql 众多表中查找一个表名或者字段名的 SQL 语句" target="_blank">在Mysql 众多表中查找一个表名或者字段名的 SQL 语句</a>
<span class="text-muted">pda158</span>
<a class="tag" taget="_blank" href="/search/mysql/1.htm">mysql</a>
<div>在Mysql 众多表中查找一个表名或者字段名的 SQL 语句：
方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name';
方法二：SELECT column_name from information_schema.colum</div>
</li>
<li><a href="/article/3571.htm"
title="程序员对英语的依赖" target="_blank">程序员对英语的依赖</a>
<span class="text-muted">Smile.zeng</span>
<a class="tag" taget="_blank" href="/search/%E8%8B%B1%E8%AF%AD/1.htm">英语</a><a class="tag" taget="_blank" href="/search/%E7%A8%8B%E5%BA%8F%E7%8C%BF/1.htm">程序猿</a>
<div>1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。
2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。
3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。
4、写的程序至少能有一定的可读性，至少要人别人能懂吧...
以上一些问题，充分说明了英语对程序猿的重要性。骚年</div>
</li>
<li><a href="/article/3698.htm"
title="Oracle学习笔记(8) 使用PLSQL编写触发器" target="_blank">Oracle学习笔记(8) 使用PLSQL编写触发器</a>
<span class="text-muted">vipbooks</span>
<a class="tag" taget="_blank" href="/search/oracle/1.htm">oracle</a><a class="tag" taget="_blank" href="/search/sql/1.htm">sql</a><a class="tag" taget="_blank" href="/search/%E7%BC%96%E7%A8%8B/1.htm">编程</a><a class="tag" taget="_blank" href="/search/%E6%B4%BB%E5%8A%A8/1.htm">活动</a><a class="tag" taget="_blank" href="/search/Access/1.htm">Access</a>
<div> 时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！
这是第八章的学习笔记，学习完第七章的子程序和包之后</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>