测试游记
测试游记

Electron自动化测试技术选型调研

Electron简介

Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它由GitHub开发并于2013年首次发布。Electron允许开发人员使用Web技术（如HTML、CSS和JavaScript）来构建桌面应用程序，同时可以在Windows、macOS和Linux等操作系统上运行。

以下是一些关键特点和优势：

  1. 跨平台：Electron可以在多个操作系统上运行，包括Windows、macOS和Linux。这意味着开发人员可以使用相同的代码库构建应用程序，并在不同的平台上进行部署。

  2. 基于Web技术：Electron使用Web技术作为应用程序的构建基础。开发人员可以使用HTML、CSS和JavaScript来构建用户界面和应用逻辑，这使得开发过程更加熟悉和容易上手。

  3. 强大的生态系统：Electron拥有庞大的开发者社区和丰富的第三方库和插件。开发人员可以利用这些资源来加速开发过程、解决问题和扩展应用程序功能。

  4. 自定义能力：Electron提供了丰富的API，可以访问底层操作系统的功能。开发人员可以利用这些API来实现与操作系统交互、访问文件系统、创建系统托盘应用等功能。

  5. 调试和工具支持：Electron集成了开发者工具，包括Chrome开发者工具，可以帮助开发人员进行调试和性能优化。此外，还有许多第三方工具和库可以用于构建、测试和部署Electron应用程序。

  6. 应用程序分发：Electron提供了打包和分发应用程序的工具。开发人员可以将应用程序打包为可执行文件或安装程序，并将其发布到应用商店或通过其他方式分发给用户。

Electron已经被广泛应用于各种领域，包括代码编辑器、聊天应用程序、桌面客户端等。许多知名的应用程序，如Visual Studio Code、Slack和GitHub Desktop，都是使用Electron构建的。

总之，Electron提供了一种简化和加速桌面应用程序开发的方式，使开发人员能够利用熟悉的Web技术构建跨平台的应用程序。

是当前酷家乐桌面客户端的底层技术

框架简介

在官方文档中介绍了3种(使用 WebDriver 接口,使用 Playwright,使用自定义测试驱动)进行自动化测试的方式:

https://www.electronjs.org/zh/docs/latest/tutorial/automated-testing

根据实际操作后发现,官网的操作的省略了很多关键步骤,而且无法直接跑通我们自己项目,需要一定的调研

查阅puppeteer-electron相关仓库:

https://github.com/peterdanis/electron-puppeteer-demo

https://github.com/nondanee/puppeteer-electron

方式 框架 star数量 GPT给出的优点 GPT给出的缺点
使用 WebDriver 接口 WebdriverIO 8.2k WebdriverIO是一个成熟的Web自动化测试框架，支持多种浏览器和平台。它提供了丰富的API和插件，使得测试编写更加方便和灵活。具有强大的等待机制，可确保元素可见性和页面加载完成。支持并行测试执行，提高测试效率。社区活跃，文档丰富，易于学习和使用。 由于WebdriverIO是基于WebDriver协议的，因此执行速度可能相对较慢。在处理某些特殊情况下，如处理模态对话框和桌面应用程序时，可能会遇到一些困难。
Selenium /
 27.2k Selenium是最广泛使用的Web自动化测试框架，支持多种编程语言和浏览器。具有强大的定位元素的能力，能够灵活地与页面交互。支持并行执行测试，提高了测试效率。社区庞大，可以获得广泛的支持和资源。 Selenium不是为桌面应用程序设计的，因此在测试Electron应用程序时可能会遇到一些限制和问题。对于某些高级功能，如处理模态对话框和文件上传，可能需要编写自定义逻辑。
使用 Playwright playwright 53.6k Playwright是一个新兴的跨浏览器自动化测试框架，支持多个浏览器和平台。它提供了一个简洁的API，可以轻松地与页面交互和操作元素。具有强大的等待机制，可以等待元素出现和页面加载完成。支持截图、录屏等高级功能。 相对于Selenium和WebdriverIO，Playwright的社区规模较小，可能会找到较少的资源和支持。在某些特殊情况下，如处理桌面应用程序和模态对话框时，可能会遇到一些限制。
使用自定义测试驱动 node 96.9k / /
远程debug Puppeteer 84.1k 强大的浏览器自动化：Puppeteer提供了一套简洁而强大的API，可以用于模拟用户在浏览器中进行各种操作，如点击、填写表单、截图等。完全控制浏览器环境：Puppeteer可以控制底层的Chromium浏览器实例，从而能够修改和监控浏览器的各个方面，例如网络请求、用户代理、存储等，使得测试更加灵活和可靠。支持调试和错误排查：Puppeteer具有调试工具，可以帮助开发人员定位和修复测试中的问题，包括视觉回归问题、性能问题等。多平台支持：Puppeteer可以运行在多个平台上，包括Windows、Mac和Linux，适用于跨平台的Electron应用程序的自动化测试。 学习曲线陡峭：Puppeteer的API相对复杂，需要一定的学习成本，特别是对于没有过多浏览器自动化经验的人来说。执行速度相对较慢：由于需要通过启动浏览器、模拟用户交互等步骤，使用Puppeteer进行自动化测试可能会比其他测试框架的执行速度慢一些。测试环境配置：使用Puppeteer进行Electron自动化测试需要配置好相关环境，包括安装正确版本的Chromium浏览器和Puppeteer库，这可能会带来一些麻烦。

前置准备

使用navigator.appVersion查看当前客户端使用的chromedriver版本

> navigator.appVersion
< '104.0.5112.124 qunheclient/1.0.0 kujialesoft/12.3.9 kujialeclient/12.3.9 utm_industry=kujiale/12.3.9 utm_campaign=autoUpdate'

使用process.versions.electron查看当前客户端electron版本

> process.versions.electron
< '20.3.8'

设置国内ELECTRON源

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

框架试用Demo

WebdriverIO

相关文档:https://webdriver.io/docs/desktop-testing/electron/

需要node版本为16+

使用脚手架安装:

yarn create wdio .

选择:


Electron自动化测试技术选型调研_第1张图片

zhongxin@zhongxindeMacBook-Pro demo2 % yarn create wdio .
 yarn create v1.22.19
 [1/4]   Resolving packages...
 [2/4]   Fetching packages...
 [3/4]   Linking dependencies...
 [4/4]   Building fresh packages...

 success Installed "[email protected]" with binaries:
       - create-wdio
 [#####################################################] 53/53
                  -:...........................-:.
                  +                              +
               `` +      `...`        `...`      + `
             ./+/ +    .:://:::`    `::///::`  ` + ++/.
            .+oo+ +    /:+ooo+-/    /-+ooo+-/ ./ + +oo+.
            -ooo+ +    /-+ooo+-/    /-+ooo+-/ .: + +ooo.
             -+o+ +    `::///:-`    `::///::`    + +o+-
              ``. /.     `````        `````     .: .``
                   .----------------------------.
            `-::::::::::::::::::::::::::::::::::::::::-`
           .+oooo/:------------------------------:/oooo+.
       `.--/oooo-                                  :oooo/--.`     .::-``:oooo`                                  .oooo-``-::.
   ./-`    -oooo`--.: :.--                         .oooo-    `-/.
  -/`    `-/oooooooo/.`    `/-
 `+`   `/+oooooooooooooooooooooooooooooooooooooooooooooooo+:`   .+`
 -/    +o/.:oooooooooooooooooooooooooooooooooooooooooooo:-/o/    +.
 -/   .o+  -oooosoooososssssooooo------------------:oooo- `oo`   +.
 -/   .o+  -oooodooohyyssosshoooo`                 .oooo-  oo.   +.
 -/   .o+  -oooodooysdooooooyyooo` `.--.``     .:::-oooo-  oo.   +.
 -/   .o+  -oooodoyyodsoooooyyooo.//-..-:/:.`.//.`./oooo-  oo.   +.
 -/   .o+  -oooohsyoooyysssysoooo+-`     `-:::.    .oooo-  oo.   +.
 -/   .o+  -ooooosooooooosooooooo+//oooo-  oo.   +.
 -/   .o+  -oooooooooooooooooooooooooooooooooooooooooooo-  oo.   +.
 -/   .o+  -oooooooooooooooooooooooooooooooooooooooooooo-  oo.   +.
 -+o+` -oooo---:///:----://::------------------:oooo- `oo+-
 +ooooooo/`-oooo``:-```.:`.:.`.+/-    .::::::::::` .oooo-`+ooooooo+ oooooooo+`-oooo`-- `/` .:+  -/-`/`   .::::::::::  .oooo-.+oooooooo
 +-/+://-/ -oooo-`:`.o-`:.:-````.:    .///:``````  -oooo-`/-//:+:-+
 : :..--:-:.+ooo+/://o+/-.-::-....-::::-....--/+ooo+.:.:--.-- /
 - /./`-:-` .:///+/ooooo/+///+++ooooo/+///:. .-:.`+./ :
 :-:/.           :`ooooo`/`              .:.ooooo :           ./---
                 :`ooooo`/`              .:.ooooo :
                 :`ooooo./`              .:-ooooo :
                 :`ooooo./`              .:-ooooo :
             `...:-+++++:/.              ./:+++++-:...`
            :-.````````/../              /.-:````````.:-
           -/::::::::://:/+             `+/:+::::::::::+.
           :oooooooooooo++/              +++oooooooooooo-                            Webdriver.IO
               Next-gen browser and mobile automation
                     test framework for Node.js


 Installing @wdio/cli to initialize project...
 ✔ Success!

 ===============================  WDIO Configuration Wizard
 ===============================

 ? What type of testing would you like to do? Desktop Testing - of Electron Applications
     > https://webdriver.io/docs/desktop-testing/electron
 ? What is the path to your compiled Electron app? ./dist
 ? Which framework do you want to use? Jasmine (https://jasmine.github.io/)
 ? Do you want to use a compiler? No!
 ? Do you want WebdriverIO to autogenerate some test files? Yes
 ? Where should these files be located? /Users/zhongxin/gitproject/desktopui/demo2/test/specs/**/*.js
 ? Which reporter do you want to use? spec, allure
 ? Do you want to add a plugin to your test setup?
 ? Do you want to add a service to your test setup? electron
 ? Do you want me to run `npm install` Yes


 Installing wdio packages:
 - @wdio/local-runner@latest
 - @wdio/jasmine-framework@latest
 - @wdio/spec-reporter@latest
 - @wdio/allure-reporter@latest
 - wdio-electron-service

 added 78 packages, and changed 1 package in 11s

 97 packages are looking for funding
   run `npm fund` for details
 ✔ Success! Creating a WebdriverIO config file...
 ✔ Success! Autogenerating test files...
 ✔ Success! Adding "wdio" script to package.json.
 ✔ Success! Successfully setup project at /Users/zhongxin/gitproject/desktopui/demo2

 Join our Discord Community Server and instantly find answers to your issues or queries. Or just join and say hi !    https://discord.webdriver.io

 Visit the project on GitHub to report bugs  or raise feature requests :    https://github.com/webdriverio/webdriverio

 To run your tests, execute:
 $ cd /Users/zhongxin/gitproject/desktopui/demo2
 $ npm run wdio

   Done in 72.80s.

安装chromedriver

npm i -D chromedriver@104

修改wdio.conf.js文件

capabilities: [{
        browserName: 'chrome',        'goog:chromeOptions': {
            binary: 'chromedriver/bin/chromedriver', // Electron 二进制文件的路径
            args: [/* 命令行参数 */] // 可选, 比如 'app=' + /path/to/your/app/
        }
    }],

services: [[        'electron',
        {
            appPath: '/Users/zhongxin/Downloads',
            appName: "酷家乐",
            appArgs: ['foo', 'bar=baz'],
            chromedriver: {
                port: 9519,
                logFileName: 'wdio-chromedriver.log',
                chromedriverCustomPath: 'chromedriver/bin/chromedriver' // resolves to chromedriver binary
            },
            electronVersion: '20.3.8',
        }
    ]],

以mac m1电脑为例,从官网下载客户端后,打开dmg文件,将酷家乐.app放到/Users/zhongxin/Downloads/mac-arm64/酷家乐.app位置

修改一下测试脚本test.e2e.js,完成登录

import { browser } from '@wdio/globals'describe('Electron Testing', () => {
    it('should print application metadata', async () => {        console.log('听白测试')
        await browser.$('//*[text()="账号登录"]').click()
        await browser.$('//input[@placeholder="输入手机号/邮箱"]').setValue("[email protected]")
        await browser.$('//input[@placeholder="输入密码"]').setValue("xxxx")
        await browser.$('//button[text()="登录"]').click()
        await browser.pause(5000)
        await browser.saveScreenshot('./test.png')
    })
})

运行测试wdio run ./wdio.conf.js后会唤起客户端并完成登录操作,然后进行截图

Selenium

新建一个空文件夹,使用npm进行初始化

npm init
zhongxin@zhongxindeMacBook-Pro demo2 % npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install ` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (demo2)version: (1.0.0)description:entry point: (index.js)test command:git repository:keywords:author:license: (ISC)About to write to /Users/zhongxin/gitproject/desktopui/demo2/package.json:

{
  "name": "demo2",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}Is this OK? (yes)

安装&运行chromedriver

npm install --save-dev [email protected]./node_modules/.bin/chromedriver

安装selenium

npm install --save-dev selenium-webdriver

编写测试脚本

const webdriver = require('selenium-webdriver')const { Builder } = require('selenium-webdriver');

(async function myTest() {    let driver = await new Builder()
        .usingServer('http://localhost:9515')
        .withCapabilities({            'goog:chromeOptions': {
                binary: '/Users/zhongxin/Downloads/mac-arm64/酷家乐.app/Contents/MacOS/酷家乐'
            }
        })
        .forBrowser('chrome') // 注意: 使用 .forBrowser('electron') for selenium-webdriver <= 3.6.0
        .build()    console.log('听白测试')
    await driver.sleep(5000)
    await driver.findElement(webdriver.By.xpath('//*[text()="账号登录"]')).click()
    await driver.findElement(webdriver.By.xpath('//input[@placeholder="输入手机号/邮箱"]')).sendKeys("[email protected]")
    await driver.findElement(webdriver.By.xpath('//input[@placeholder="输入密码"]')).sendKeys("xxxx")
    await driver.findElement(webdriver.By.xpath('//button[text()="登录"]')).click()
    await driver.sleep(5000)
    await driver.takeScreenshot().then(        function (image, err) {            require('fs').writeFile('test.png', image, 'base64', function (err) {                console.log(err)
            })
        })
    await driver.quit()
})();

playwright

官方文档:https://playwright.dev/docs/api/class-electron

安装

npm init playwright@latest

Electron自动化测试技术选型调研_第2张图片

zhongxin@zhongxindeMacBook-Pro demo3 % npm init playwright@latest
Need to install the following packages:
  [email protected] to proceed? (y)
Getting started with writing end-to-end tests with Playwright:
Initializing project in '.'
✔ Do you want to use TypeScript or JavaScript? · JavaScript
✔ Where to put your end-to-end tests? · tests
✔ Add a GitHub Actions workflow? (y/N) · false
✔ Install Playwright browsers (can be done manually via 'npx playwright install')? (Y/n) · true
Initializing NPM project (npm init -y)…
Wrote to /Users/zhongxin/gitproject/desktopui/demo3/package.json:

{
  "name": "demo3",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}


Installing Playwright Test (npm install --save-dev @playwright/test)…

added 3 packages in 5s
Downloading browsers (npx playwright install)…
Writing playwright.config.js.
Writing tests/example.spec.js.
Writing tests-examples/demo-todo-app.spec.js.
Writing package.json.
✔ Success! Created a Playwright Test project at /Users/zhongxin/gitproject/desktopui/demo3

Inside that directory, you can run several commands:

  npx playwright test
    Runs the end-to-end tests.

  npx playwright test --ui
    Starts the interactive UI mode.

  npx playwright test --project=chromium
    Runs the tests only on Desktop Chrome.

  npx playwright test example
    Runs the tests in a specific file.

  npx playwright test --debug
    Runs the tests in debug mode.

  npx playwright codegen
    Auto generate tests with Codegen.

We suggest that you begin by typing:

    npx playwright test

And check out the following files:
  - ./tests/example.spec.js - Example end-to-end test
  - ./tests-examples/demo-todo-app.spec.js - Demo Todo App end-to-end tests
  - ./playwright.config.js - Playwright Test configuration

Visit https://playwright.dev/docs/intro for more information. ✨

Happy hacking!

安装electron

npm i [email protected]

运行开发项目:

https://gitlab.qunhequnhe.com/fe/up/desktop

https://gitlab.qunhequnhe.com/desktop/base/main

生成入口文件:/Users/zhongxin/gitproject/main/app/dist/main.js

测试脚本:

const {_electron: electron} = require('@playwright/test');

(async () => {    const electronApp = await electron.launch({
        cwd: '/Users/zhongxin/gitproject/main/app/dist',
        args: ['main.js']
    });    console.log('开始测试')    const window = await electronApp.firstWindow();
    await window.waitForTimeout(3000)    window.on('console', console.log);    console.log(await window.title());
    await window.screenshot({path: 'intro.png'});
    await window.click('text=账号登录');
    await window.fill('input[placeholder="输入手机号/邮箱"]', '[email protected]')
    await window.fill('input[placeholder="输入密码"]', 'xxxx')
    await window.click('button[title="账密登录"]');
    await window.waitForTimeout(3000)
    await window.locator('text=登录').last().click();
    await window.waitForTimeout(3000)
    await window.screenshot({path: 'test.png'});
    await electronApp.close();
})();

这种方式非常的麻烦,比较适合在开发阶段进行测试

Puppeteer

新建一个空文件夹,使用npm进行初始化

npm init

安装相关包

npm i [email protected] puppeteer-core

运行本地electron并开启调试

const {spawn} = require("child_process");const port = 9200;

spawn(    "/Users/zhongxin/Downloads/mac-arm64/酷家乐.app/Contents/MacOS/酷家乐",
    [`--remote-debugging-port=${port}`],
    {shell: true}
);

编写测试脚本

const puppeteer = require("puppeteer-core");const port = 9200;

(async () => {    let app = await puppeteer.connect({
        browserURL: `http://localhost:${port}`,
    });    const pages = await app.pages();    const [page] = pages;
    await (await page.$x('//button[text()="账号登录"]'))[0].click();
    await (await page.$x('//input[@placeholder="输入手机号/邮箱"]'))[0].type('[email protected]')
    await (await page.$x('//input[@placeholder="输入密码"]'))[0].type('xxxx');
    await (await page.$x('//button[text()="登录"]'))[0].click();
    await page.screenshot({path: 'test.png'});
    setTimeout(async () => await app.close(), 5000)
})()

总结

框架 环境准备 支持情况
WebdriverIO 简单:将下载到的安装包放到指定路径下即可 支持较好
Selenium 中等:将下载到的安装包放到指定路径+启动chromedriver 支持一般
playwright 困难:部署&运行代码 实验性质
Puppeteer 中等:将下载到的安装包放到指定路径+启动应用 支持一般

由于Hades采用的是Puppeteer,优先考虑使用Puppeteer

后续封装一个启动electron的操作,将它加在beforeAll里,就可以复用之前旧的UI自动化测试代码了

你可能感兴趣的:(electron,javascript,前端,ecmascript,前端框架)

  • Long类型前后端数据不一致 igotyback 前端
    响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
  • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
    ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
  • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
    加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
  • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
    ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
  • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
    Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
  • node.js学习 小猿L node.jsnode.js学习vim
    node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
  • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
    这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
  • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
    在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
  • 博客网站制作教程 2401_85194651 javamaven
    首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
  • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
    在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
  • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
    最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
  • 补充元象二面 Redstone Monstrosity 前端面试
    1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
  • 微信小程序开发注意事项 jun778895 微信小程序小程序
    微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
  • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
    切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
  • 字节二面 Redstone Monstrosity 前端面试
    1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
  • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
    点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
  • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
    第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
  • 高性能javascript--算法和流程控制 海淀萌狗
    -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • Vue + Express实现一个表单提交 九旬大爷的梦
    最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
  • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
    我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
  • Nginx从入门到实践(三) 听你讲故事啊
    动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
  • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
    Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
  • 前端知识点 ZhangTao_zata 前端javascriptcss
    下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
  • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
    1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
  • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
    1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
  • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
    数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
  • 分布式锁和spring事务管理 暴躁的鱼 锁及事务分布式springjava
    最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
  • 前端CSS面试常见题 剑亦未配妥 前端面试前端css面试
    边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
  • 2024年最全Flutter如何和Native通信-Android视角，Electron开发Android界面 2401_84544531 程序员android面试学习
    总结【Android详细知识点思维脑图（技能树）】其实Android开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。虽然Android没有前几年火热了，已经过去了会四大组件就能找到高薪职位的时代了。这只能说明Android中级以下的岗位饱和了，现在高级工程师还是比较缺少的，很多高级职位给的薪
  • java的(PO,VO,TO,BO,DAO,POJO) Cb123456 VOTOBOPOJODAO
    转: http://www.cnblogs.com/yxnchinahlj/archive/2012/02/24/2366110.html   -------------------------------------------------------------------  O/R Mapping 是 Object Relational Mapping（对象关系映
  • spring ioc原理（看完后大家可以自己写一个spring） aijuans spring
             最近，买了本Spring入门书：spring In Action 。大致浏览了下感觉还不错。就是入门了点。Manning的书还是不错的，我虽然不像哪些只看Manning书的人那样专注于Manning,但怀着崇敬 的心情和激情通览了一遍。又一次接受了IOC 、DI、AOP等Spring核心概念。 先就IOC和DI谈一点我的看法。IO
  • MyEclipse 2014中Customize Persperctive设置无效的解决方法 Kai_Ge MyEclipse2014
    高高兴兴下载个MyEclipse2014，发现工具条上多了个手机开发的按钮，心生不爽就想弄掉他！ 结果发现Customize Persperctive失效！！ 有说更新下就好了，可是国内Myeclipse访问不了，何谈更新... so~这里提供了更新后的一下jar包，给大家使用！ 1、将9个jar复制到myeclipse安装目录\plugins中 2、删除和这9个jar同包名但是版本号较
  • SpringMvc上传 120153216 springMVC
      @RequestMapping(value = WebUrlConstant.UPLOADFILE) @ResponseBody public Map<String, Object> uploadFile(HttpServletRequest request,HttpServletResponse httpresponse) { try { //
  • Javascript----HTML DOM 事件 何必如此 JavaScripthtmlWeb
    HTML DOM 事件允许Javascript在HTML文档元素中注册不同事件处理程序。 事件通常与函数结合使用，函数不会在事件发生前被执行！ 注：DOM： 指明使用的 DOM 属性级别。 1.鼠标事件 属性               
  • 动态绑定和删除onclick事件 357029540 JavaScriptjquery
    因为对JQUERY和JS的动态绑定事件的不熟悉，今天花了好久的时间才把动态绑定和删除onclick事件搞定!现在分享下我的过程。      在我的查询页面，我将我的onclick事件绑定到了tr标签上同时传入当前行(this值)参数，这样可以在点击行上的任意地方时可以选中checkbox，但是在我的某一列上也有一个onclick事件是用于下载附件的，当
  • HttpClient|HttpClient请求详解 7454103 apache应用服务器网络协议网络应用Security
    HttpClient 是 Apache Jakarta Common 下的子项目，可以用来提供高效的、最新的、功能丰富的支持 HTTP 协议的客户端编程工具包，并且它支持 HTTP 协议最新的版本和建议。本文首先介绍 HTTPClient，然后根据作者实际工作经验给出了一些常见问题的解决方法。HTTP 协议可能是现在 Internet 上使用得最多、最重要的协议了，越来越多的 Java 应用程序需
  • 递归 逐层统计树形结构数据 darkranger 数据结构
    将集合递归获取树形结构: /** * * 递归获取数据 * @param alist:所有分类 * @param subjname:对应统计的项目名称 * @param pk:对应项目主键 * @param reportList: 最后统计的结果集 * @param count:项目级别 */ public void getReportVO(Arr
  • 访问WEB-INF下使用frameset标签页面出错的原因 aijuans struts2
    <frameset rows="61,*,24" cols="*" framespacing="0" frameborder="no" border="0">        
  • MAVEN常用命令 avords
    Maven库： http://repo2.maven.org/maven2/ Maven依赖查询： http://mvnrepository.com/ Maven常用命令： 1. 创建Maven的普通java项目：    mvn archetype:create    -DgroupId=packageName 
  • PHP如果自带一个小型的web服务器就好了 houxinyou apache应用服务器WebPHP脚本
    最近单位用PHP做网站，感觉PHP挺好的，不过有一些地方不太习惯，比如，环境搭建。PHP本身就是一个网站后台脚本，但用PHP做程序时还要下载apache，配置起来也不太很方便，虽然有好多配置好的apache+php+mysq的环境，但用起来总是心里不太舒服，因为我要的只是一个开发环境，如果是真实的运行环境，下个apahe也无所谓，但只是一个开发环境，总有一种杀鸡用牛刀的感觉。如果php自己的程序中
  • NoSQL数据库之Redis数据库管理(list类型) bijian1013 redis数据库NoSQL
    3.list类型及操作         List是一个链表结构，主要功能是push、pop、获取一个范围的所有值等等，操作key理解为链表的名字。Redis的list类型其实就是一个每个子元素都是string类型的双向链表。我们可以通过push、pop操作从链表的头部或者尾部添加删除元素，这样list既可以作为栈，又可以作为队列。   &nbs
  • 谁在用Hadoop？ bingyingao hadoop数据挖掘公司应用场景
    Hadoop技术的应用已经十分广泛了，而我是最近才开始对它有所了解，它在大数据领域的出色表现也让我产生了兴趣。浏览了他的官网，其中有一个页面专门介绍目前世界上有哪些公司在用Hadoop，这些公司涵盖各行各业，不乏一些大公司如alibaba,ebay,amazon,google,facebook,adobe等，主要用于日志分析、数据挖掘、机器学习、构建索引、业务报表等场景,这更加激发了学习它的热情。
  • 【Spark七十六】Spark计算结果存到MySQL bit1129 mysql
    package spark.examples.db import java.sql.{PreparedStatement, Connection, DriverManager} import com.mysql.jdbc.Driver import org.apache.spark.{SparkContext, SparkConf} object SparkMySQLInteg
  • Scala: JVM上的函数编程 bookjovi scalaerlanghaskell
        说Scala是JVM上的函数编程一点也不为过，Scala把面向对象和函数型编程这两种主流编程范式结合了起来，对于熟悉各种编程范式的人而言Scala并没有带来太多革新的编程思想，scala主要的有点在于Java庞大的package优势，这样也就弥补了JVM平台上函数型编程的缺失，MS家.net上已经有了F#，JVM怎么能不跟上呢？     对本人而言
  • jar打成exe bro_feng java jar exe
    今天要把jar包打成exe，jsmooth和exe4j都用了。 遇见几个问题。记录一下。 两个软件都很好使，网上都有图片教程，都挺不错。 首先肯定是要用自己的jre的，不然不能通用，其次别忘了把需要的lib放到classPath中。 困扰我很久的一个问题是，我自己打包成功后，在一个同事的没有装jdk的电脑上运行，就是不行，报错jvm.dll为无效的windows映像，如截图 最后发现
  • 读《研磨设计模式》-代码笔记-策略模式-Strategy bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ /* 策略模式定义了一系列的算法，并将每一个算法封装起来，而且使它们还可以相互替换。策略模式让算法独立于使用它的客户而独立变化 简单理解： 1、将不同的策略提炼出一个共同接口。这是容易的，因为不同的策略，只是算法不同，需要传递的参数
  • cmd命令值cvfM命令 chenyu19891124 cmd
         cmd命令还真是强大啊。今天发现jar -cvfM aa.rar @aaalist 就这行命令可以根据aaalist取出相应的文件   例如：      在d：\workspace\prpall\test.java 有这样一个文件，现在想要将这个文件打成一个包。运行如下命令即可比如在d：\wor
  • OpenJWeb(1.8) Java Web应用快速开发平台 comsci java框架Web项目管理企业应用
        OpenJWeb(1.8) Java Web应用快速开发平台的作者是我们技术联盟的成员，他最近推出了新版本的快速应用开发平台  OpenJWeb(1.8)，我帮他做做宣传   OpenJWeb快速开发平台以快速开发为核心，整合先进的java 开源框架，本着自主开发+应用集成相结合的原则，旨在为政府、企事业单位、软件公司等平台用户提供一个架构透
  • Python 报错：IndentationError: unexpected indent daizj pythontab空格缩进
        IndentationError: unexpected indent 是缩进的问题，也有可能是tab和空格混用啦     Python开发者有意让违反了缩进规则的程序不能通过编译，以此来强制程序员养成良好的编程习惯。并且在Python语言里，缩进而非花括号或者某种关键字，被用于表示语句块的开始和退出。增加缩进表示语句块的开
  • HttpClient 超时设置 dongwei_6688 httpclient
    HttpClient中的超时设置包含两个部分： 1. 建立连接超时，是指在httpclient客户端和服务器端建立连接过程中允许的最大等待时间 2. 读取数据超时，是指在建立连接后，等待读取服务器端的响应数据时允许的最大等待时间   在HttpClient 4.x中如下设置：   HttpClient httpclient = new DefaultHttpC
  • 小鱼与波浪 dcj3sjt126com
    一条小鱼游出水面看蓝天，偶然间遇到了波浪。　　小鱼便与波浪在海面上游戏，随着波浪上下起伏、汹涌前进。　　小鱼在波浪里兴奋得大叫：“你每天都过着这么刺激的生活吗？简直太棒了。”　　波浪说：“岂只每天过这样的生活，几乎每一刻都这么刺激！还有更刺激的，要有潮汐变化，或者狂风暴雨，那才是兴奋得心脏都会跳出来。”　　小鱼说：“真希望我也能变成一个波浪，每天随着风雨、潮汐流动，不知道有多么好！”　　很快，小鱼
  • Error Code: 1175 You are using safe update mode and you tried to update a table dcj3sjt126com mysql
    快速高效用：SET SQL_SAFE_UPDATES = 0；下面的就不要看了！ 今日用MySQL Workbench进行数据库的管理更新时，执行一个更新的语句碰到以下错误提示： Error Code: 1175 You are using safe update mode and you tried to update a table without a WHERE that
  • 枚举类型详细介绍及方法定义 gaomysion enumjavaee
    转发 http://developer.51cto.com/art/201107/275031.htm 枚举其实就是一种类型，跟int, char 这种差不多，就是定义变量时限制输入的，你只能够赋enum里面规定的值。建议大家可以看看，这两篇文章，《java枚举类型入门》和《C++的中的结构体和枚举》，供大家参考。 枚举类型是JDK5.0的新特征。Sun引进了一个全新的关键字enum
  • Merge Sorted Array hcx2013 array
    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:You may assume that nums1 has enough space (size that is
  • Expression Language 3.0新特性 jinnianshilongnian el 3.0
    Expression Language 3.0表达式语言规范最终版从2013-4-29发布到现在已经非常久的时间了；目前如Tomcat 8、Jetty 9、GlasshFish 4已经支持EL 3.0。新特性包括：如字符串拼接操作符、赋值、分号操作符、对象方法调用、Lambda表达式、静态字段/方法调用、构造器调用、Java8集合操作。目前Glassfish 4/Jetty实现最好，对大多数新特性
  • 超越算法来看待个性化推荐 liyonghui160com 超越算法来看待个性化推荐
             一提到个性化推荐，大家一般会想到协同过滤、文本相似等推荐算法，或是更高阶的模型推荐算法，百度的张栋说过，推荐40%取决于UI、30%取决于数据、20%取决于背景知识，虽然本人不是很认同这种比例，但推荐系统中，推荐算法起的作用起的作用是非常有限的。       就像任何
  • 写给Javascript初学者的小小建议 pda158 JavaScript
    　　一般初学JavaScript的时候最头痛的就是浏览器兼容问题。在Firefox下面好好的代码放到IE就不能显示了，又或者是在IE能正常显示的代码在firefox又报错了。 　　如果你正初学JavaScript并有着一样的处境的话建议你：初学JavaScript的时候无视DOM和BOM的兼容性，将更多的时间花在 了解语言本身（ECMAScript）。只在特定浏览器编写代码（Chrome/Fi
  • Java 枚举 ShihLei javaenum枚举
    注：文章内容大量借鉴使用网上的资料，可惜没有记录参考地址，只能再传对作者说声抱歉并表示感谢！   一 基础 1）语法      枚举类型只能有私有构造器（这样做可以保证客户代码没有办法新建一个enum的实例）      枚举实例必须最先定义 2）特性     &nb
  • Java SE 6 HotSpot虚拟机的垃圾回收机制 uuhorse javaHotSpotGC垃圾回收VM
    官方资料，关于Java SE 6 HotSpot虚拟机的garbage Collection，非常全，英文。 http://www.oracle.com/technetwork/java/javase/gc-tuning-6-140523.html   Java SE 6 HotSpot[tm] Virtual Machine Garbage Collection Tuning &
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他