【Chrome插件开发】ReRes和request-interceptor源码赏析+复现+插件开发完整解决方案

引言

这个项目主要目的是用前端工程化技术栈复现ReRes和request-interceptor，希望将两者的功能结合起来。request-interceptor是前端开发调试常用工具，提供了多种修改请求的功能，但无法将请求映射到本地的文件。ReRes是JS逆向工程师常用工具，可以用来更改页面请求响应的内容。可以把请求映射到其他的url，也可以映射到本机的文件或者目录。因为manifest version 3无法实现这两个插件的功能，所以这个项目仍然使用manifest version 2。本文假设你了解：

• Chrome插件开发的manifest.json常见字段，尤其是browser_action（popup页面）、options_page（options页面，扩展程序选项）和background（background.js）。

修改请求的代码都是在background.js中实现的。background.js实际上也在一个独立的页面运行。在chrome://extensions/点击插件的“背景页”链接即可对background.js进行调试。

亮点

1. 赏析了若干源码：ReRes、request-interceptor、husky……
2. 探讨了jest配置的若干问题。如：使用“鸭子类型”技巧解决模块不可测试的问题、配置路径别名……
3. 编写构建脚本scripts/build.ts使得构建过程更为灵活。
4. 使用react + vite展示了一套完整的Chrome插件开发的解决方案。包括：开发时预览、单元测试、构建。
5. 对useLocalStorageStatehook源码进行了少量修改，并增加了配套的单元测试用例，以适应Chrome插件开发的需求。

本文52pojie：https://www.52pojie.cn/thread-1757481-1-1.html

本文CSDN：https://blog.csdn.net/hans774882968/article/details/129483966

本文juejin：https://juejin.cn/post/7209625823581601848

作者：hans774882968以及hans774882968以及hans774882968

后续还会更新：仿request-interceptor规则组、批量导入规则、react + vite项目引入OB混淆……

Chrome插件ReRes源码赏析

popup页面和options页面和background.js唯一的联系就是，其他页面需要将数据写入背景页的localStorage：

    var bg = chrome.extension.getBackgroundPage();

    //保存规则数据到localStorage
    function saveData() {
        $scope.rules = groupBy($scope.maps, 'group');
        bg.localStorage.ReResMap = angular.toJson($scope.maps);
    }

background.js注释版源码如下：

var ReResMap = [];
var typeMap = {
    "txt"   : "text/plain",
    "html"  : "text/html",
    "css"   : "text/css",
    "js"    : "text/javascript",
    "json"  : "text/json",
    "xml"   : "text/xml",
    "jpg"   : "image/jpeg",
    "gif"   : "image/gif",
    "png"   : "image/png",
    "webp"  : "image/webp"
}
// 从背景页的localStorage读取ReResMap
function getLocalStorage() {
    ReResMap = window.localStorage.ReResMap ? JSON.parse(window.localStorage.ReResMap) : ReResMap;
}

// xhr请求本地文件的url，进行文本拼接，转为data url
function getLocalFileUrl(url) {
    var arr = url.split('.');
    var type = arr[arr.length-1];
    var xhr = new XMLHttpRequest();
    xhr.open('get', url, false);
    xhr.send(null);
    var content = xhr.responseText || xhr.responseXML;
    if (!content) {
        return false;
    }
    content = encodeURIComponent(
        type === 'js' ?
        content.replace(/[\u0080-\uffff]/g, function($0) {
            var str = $0.charCodeAt(0).toString(16);
            return "\\u" + '00000'.substr(0, 4 - str.length) + str;
        }) : content
    );
    return ("data:" + (typeMap[type] || typeMap.txt) + ";charset=utf-8," + content);
}

// 看MDN即可，https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
chrome.webRequest.onBeforeRequest.addListener(function (details) {
        // 这个url会在循环中被修改
        var url = details.url;
        for (var i = 0, len = ReResMap.length; i < len; i++) {
            var reg = new RegExp(ReResMap[i].req, 'gi');
            if (ReResMap[i].checked && typeof ReResMap[i].res === 'string' && reg.test(url)) {
                if (!/^file:\/\//.test(ReResMap[i].res)) {
                    // 普通url，只进行正则替换
                    do {
                        url = url.replace(reg, ReResMap[i].res);
                    } while (reg.test(url))
                } else {
                    do {
                        // file协议url，先正则替换，再转为data url
                        url = getLocalFileUrl(url.replace(reg, ReResMap[i].res));
                    } while (reg.test(url))
                }
            }
        }
        return url === details.url ? {} : { redirectUrl: url };
    },
    {urls: [""]},
    ["blocking"]
);

getLocalStorage();
window.addEventListener('storage', getLocalStorage, false);

Chrome插件request-interceptor background.js源码赏析

request-interceptor作者说没有开源，但我们仍然能轻易找到其background.js地址。幸好没有特意进行混淆

1. 安装插件。
2. 以macOS为例，执行命令：open ~/Library/Application\ Support/Google/Chrome/Default/Extensions，打开Chrome插件安装路径。
3. 根据插件ID找到对应的文件夹。

如何获得request-interceptor的background.js所使用的数据结构：阅读源码后知道，只需要在background.js控制台运行以下代码即可：

let dataSet1 = {};
let storageKey1 = '__redirect__chrome__extension__configuration__vk__';
chrome.storage.local.get(storageKey1, config => {
    dataSet1 = {};
    Object.assign(dataSet1, (config || {})[storageKey1] || {});
});

代码比较长就不完整贴出啦。带注释版源码地址，注释中包含对数据结构的讲解～

可以学到什么：

1. 作者设计规则所执行的操作的时候，借鉴了http状态码设计的思想。add-request-header、add-response-header等操作的类型都是“add”，于是可以有下面的代码：

const modifyHeaders = (headers, action, name, value) => {
  if (!headers || !action) {
    return;
  }
  if (action === 'add') {
    headers.set(name, value);
  } else if (action === 'modify') {
    if (headers.has(name)) {
      headers.set(name, value);
    }
  } else if (action === 'delete') {
    headers.delete(name);
  }
};
// 调用
actionType = type.split('-')[0];
modifyHeaders(obj.responseHeaders, actionType, updatedName, updatedValue);

这一技巧可以减少一些重复的if-else。

技术选型

React Hooks + vite + jest。使用下面的命令来创建：

npm init @vitejs/app

如果对这条命令所做的事感兴趣，可以看参考链接4

但这条命令创建出的项目的文件结构是为构建单页应用而服务的，并不符合Chrome插件开发的需要，我们需要进行改造。我们期望的Chrome插件的manifest.json如下：

{
  "manifest_version": 2,
  "name": "hans-reres",
  "version": "0.0.0",
  "description": "hans-reres旨在用前端工程化技术栈复现ReRes。ReRes是JS逆向工程师常用工具，可以用来更改页面请求响应的内容。通过指定规则，您可以把请求映射到其他的url，也可以映射到本机的文件或者目录。ReRes支持单个url映射，也支持目录映射。",
  "browser_action": {
    "default_icon": "assets/icon.png",
    "default_title": "hans-reres-popup",
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "assets/icon.png",
    "48": "assets/icon48.png"
  },
  "options_page": "options.html",
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "permissions": [
    "tabs",
    "webRequest",
    "webRequestBlocking",
    "",
    "unlimitedStorage"
  ],
  "homepage_url": "https://github.com/Hans774882968/hans-reres"
}

所以我们需要：

1. manifest.json。
2. background.ts。
3. popup.html和它引用的src/popup/popup.tsx。
4. options.html和它引用的src/options/options.tsx。
5. 一系列供tsx文件和background.ts共同使用的代码。
6. 静态文件，放在src/assets文件夹下。

核心是希望构建流程用到这些文件，生成符合Chrome插件结构的产物，详见下文《构建流程》一节。

配置stylelint

根据参考链接1，首先

npm install stylelint stylelint-config-standard stylelint-order postcss-less -D

然后添加.stylelintrc.cjs和.stylelintignore，最后package.json scripts添加一条命令：

"lint:s": "stylelint \"**/*.{css,scss,less}\" --fix",

即可通过npm run lint:sformat less文件了。

更多stylelint规则介绍见参考链接2

vscode配置保存自动修复

vscode打开设置，再打开settings.json：

{
    "editor.codeActionsOnSave": {
        "source.fixAll.eslint": true,
        "source.fixAll.stylelint": true,
    },
}

若不生效，尝试重启vscode。

配置postcss、CSS Modules

react + vite项目已经内置postcss，可以从package-lock.json中看出：

    "vite": {
      "requires": {
        "esbuild": "^0.16.14",
        // 省略其他
        "postcss": "^8.4.21",
      },
      "dependencies": {
        "rollup": {
          "requires": {
            "fsevents": "~2.3.2"
          }
        }
      }
    },

postcss-preset-env

装一下postcss-preset-env插件，这个插件支持css变量、一些未来css语法以及自动补全：

npm i postcss-preset-env -D

添加postcss.config.cjs：

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
  plugins: [postcssPresetEnv()]
};

配置postcss-preset-env插件前：

._app_1afpm_1 {
    padding: 20px;
    user-select: none;
}

配置该插件后：

._app_1afpm_1 {
    padding: 20px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

flex-gap-polyfill

这个插件的配置步骤和上面的一样，不赘述。

代码：

.app {
  padding: 20px;
  display: flex;
  gap: 20px;
}

效果：

._app_13518_1 {
    padding: 20px;
    display: flex;
    --fgp-gap: var(--has-fgp, 20px);
    gap: 20px;
    gap: var(--fgp-gap, 0px);
    margin-top: var(--fgp-margin-top, var(--orig-margin-top));
    margin-left: var(--fgp-margin-left, var(--orig-margin-left));
}
._app_13518_1 {
    --has-fgp: ;
    --element-has-fgp: ;
    pointer-events: none;
    pointer-events: var(--has-fgp) none;
    --fgp-gap-row: 20px;
    --fgp-gap-column: 20px;
}
._app_13518_1 {
    --fgp-margin-top: var(--has-fgp) calc(var(--fgp-parent-gap-row, 0px) / (1 + var(--fgp--parent-gap-as-decimal, 0)) - var(--fgp-gap-row) + var(--orig-margin-top, 0px)) !important;
    --fgp-margin-left: var(--has-fgp) calc(var(--fgp-parent-gap-column, 0px) / (1 + var(--fgp--parent-gap-as-decimal, 0)) - var(--fgp-gap-column) + var(--orig-margin-left, 0px)) !important;
}

flex-gap-polyfill踩坑

但要注意flex-gap-polyfill使用上有些坑：

1. 当你有这样的结构：
   ，那么.flex-and-gap会因为使用了负margin，导致它右侧的div错位。解决方案：在.flex-and-gap外面再套一层div，让.flex-and-gap的负margin不产生影响。
2. 打包体积增大。在只使用了3处flex-gap的情况下，css大小3.17kb -> 11.0kb。

CSS Modules VSCode中点击查看样式

react + vite项目使用less + CSS Modules很简单。但使用VSCode时如何在不跳到less文件的前提下方便地查看样式？根据参考链接12，安装VSCode CSS Modules插件后，用小驼峰命名styles.xxContainer即可点击查看样式，但类名也要一起更改为小驼峰命名法。

另外，如果配置了stylelint，还需要修改selector-class-pattern：

{ 'selector-class-pattern': '^[a-z]([A-Z]|[a-z]|[0-9]|-)+$' }

配置husky + commitlint

根据参考链接8

（1）项目级安装commitlint

npm i -D @commitlint/config-conventional @commitlint/cli

（2）添加commitlint.config.cjs（如果package.json配置了"type": "module"就需要.cjs，否则git commit时会报错）

module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {}
};

（3）安装husky：npm i -D husky

（4）对于husky版本>=5.0.0，根据官方文档，首先安装git钩子：npx husky install，运行后会生成.husky/_文件夹，下面有.gitignore和husky.sh文件，都是被忽略的。接下来添加几个钩子：

npx husky add .husky/pre-commit "npm run lint"
npx husky add .husky/pre-commit "npm run lint:s"
npx husky add .husky/commit-msg 'npx commitlint --edit $1'

会生成.husky/commit-msg和.husky/pre-commit两个文件。不用命令，自己手动编辑也是可行的，分析过程见下文《husky add、install命令解析》。

接下来可以尝试提交了。效果：

⧗   input: README添加husky + commitlint
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]

husky add、install命令解析

vscode调试node cli程序

创建.vscode/launch.json：

{
  // 使用 IntelliSense 了解相关属性。 
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node-terminal",
      "request": "launch",
      "command": "npx husky add .husky/pre-commit 'npm run lint:s'",
      "name": "npx husky add",
      "skipFiles": [
        "/**"
      ],
    }
  ]
}

之后可以直接在“运行和调试”选择要执行的命令了。

husky add

命令举例：npx husky add .husky/commit-msg 'npx commitlint --edit $1'

cli的入口node_modules/husky/lib/bin.js：

const [, , cmd, ...args] = process.argv;
const ln = args.length;
const [x, y] = args;
const hook = (fn) => () => !ln || ln > 2 ? help(2) : fn(x, y);
const cmds = {
    install: () => (ln > 1 ? help(2) : h.install(x)),
    uninstall: h.uninstall,
    set: hook(h.set),
    add: hook(h.add),
    ['-v']: () => console.log(require(p.join(__dirname, '../package.json')).version),
};
try {
    cmds[cmd] ? cmds[cmd]() : help(0);
}

x, y分别表示文件名.husky/commit-msg和待添加的命令npx commitlint --edit $1。h就是node_modules/husky/lib/index.js。找到相关函数：

function set(file, cmd) {
    const dir = p.dirname(file);
    if (!fs.existsSync(dir)) {
        throw new Error(`can't create hook, ${dir} directory doesn't exist (try running husky install)`);
    }
    fs.writeFileSync(file, `#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

${cmd}
`, { mode: 0o0755 });
    l(`created ${file}`); // 创建文件后会输出 husky - created .husky/pre-commit
}

function add(file, cmd) {
    if (fs.existsSync(file)) {
        fs.appendFileSync(file, `${cmd}\n`);
        l(`updated ${file}`); // 在已有文件后添加后则会输出 husky - updated .husky/pre-commit
    }
    else {
        set(file, cmd);
    }
}

总而言之，不执行这条命令，直接在.husky/commit-msg之后加命令是等效的。

husky install

此时我们也可以快速了解npx husky install所做的事。

const git = (args) => cp.spawnSync('git', args, { stdio: 'inherit' });
function install(dir = '.husky') {
    if (process.env.HUSKY === '0') {
        l('HUSKY env variable is set to 0, skipping install');
        return;
    }
    /* 执行 git rev-parse 命令，正常情况下无输出
    git(['rev-parse']){
      output: (3) [null, null, null]
      pid: 90205
      signal: null
      status: 0
      stderr: null
      stdout: null
    }
    */
    if (git(['rev-parse']).status !== 0) {
        l(`git command not found, skipping install`);
        return;
    }
    const url = 'https://typicode.github.io/husky/#/?id=custom-directory';
    // npx husky install 的dir参数不能跳出项目根目录
    if (!p.resolve(process.cwd(), dir).startsWith(process.cwd())) {
        throw new Error(`.. not allowed (see ${url})`);
    }
    if (!fs.existsSync('.git')) {
        throw new Error(`.git can't be found (see ${url})`);
    }
    try {
        // 创建“.husky/_”文件夹
        fs.mkdirSync(p.join(dir, '_'), { recursive: true });
        // 创建“.husky/_/.gitignore”文件
        fs.writeFileSync(p.join(dir, '_/.gitignore'), '*');
        // .husky/_/husky.sh 来源于 node_modules
        fs.copyFileSync(p.join(__dirname, '../husky.sh'), p.join(dir, '_/husky.sh'));
        // 执行 git config core.hooksPath .husky 命令
        // 同理取消githooks只需要执行 git config --unset core.hooksPath
        const { error } = git(['config', 'core.hooksPath', dir]);
        if (error) {
            throw error;
        }
    }
    catch (e) {
        l('Git hooks failed to install');
        throw e;
    }
    l('Git hooks installed');
}

配置jest

根据参考链接3：

1、安装jest：

npm install jest @types/jest -D

2、生成jest配置文件：

npx jest --init

生成的jest.config.ts：

import { Config } from '@jest/types';
/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/configuration
 */

const config: Config.InitialOptions = {
  // Automatically clear mock calls, instances, contexts and results before every test
  clearMocks: true,
  // A preset that is used as a base for Jest's configuration
  preset: 'ts-jest',
  restoreMocks: true,
  testEnvironment: 'jsdom'
};

export default config;

注意：

1. 即使指定测试环境是jsdom，我们发起向本地文件的XHR请求时仍会报跨域错误，所以发起XHR请求的模块必须mock。
2. 对于use-local-storage-state包的测试文件test/useLocalStorageStateBrowser.test.tsx（我将use-local-storage-state包的代码复制到自己的项目里，进行了更改，以满足Chrome插件开发的需求），必须指定测试环境是jsdom。
3. 指定测试环境是jsdom时需要npm install jest-environment-jsdom -D。

3、配置babel：

npm install babel-jest @babel/core @babel/preset-env @babel/preset-typescript -D

4、创建babel.config.cjs

module.exports = {
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' }}],
    '@babel/preset-typescript'
  ]
};

5、如果你在第2步创建的jest配置文件是ts，则还需要装ts-node，否则会报错：Jest: 'ts-node' is required for the TypeScript configuration files.。抛出这个错误的代码可以自己顺着stack trace往上找一下~

npm install ts-jest ts-node -D

总的来说，只需要：（1）安装若干devDependencies的npm包。（2）创建babel.config.cjs和jest.config.ts。

jest不支持es模块的npm包（如：lodash-es）如何解决？

根据参考链接17，这是因为lodash-es是一个es module且没有被jest转换。

（1）安装相关依赖：

npm install -D babel-jest @babel/core @babel/preset-env babel-plugin-transform-es2015-modules-commonjs

（2）jest.config.ts配置：

import { Config } from '@jest/types';
/*
 * For a detailed explanation regarding each configuration property and type check, visit:
 * https://jestjs.io/docs/configuration
 */

const config: Config.InitialOptions = {
  preset: 'ts-jest', // 这个和以前一样，保持不变
  // 对于js文件用babel-jest转换，ts、tsx还是用ts-jest转换
  transform: {
    '^.+\\.(ts|tsx)$': 'ts-jest',
    '^.+\\.js$': 'babel-jest'
  },
  // 为了效率，默认是忽略node_modules里的文件的，因此要声明不忽略 lodash-es
  transformIgnorePatterns: [
    '/node_modules/(?!lodash-es)'
  ]
}

（3）含泪把之前的babel.config.ts改为babel.config.cjs，配置babel插件babel-plugin-transform-es2015-modules-commonjs：

module.exports = {
  plugins: ['transform-es2015-modules-commonjs'], // 刚刚安装的
  presets: [
    ['@babel/preset-env', { targets: { node: 'current' }}],
    '@babel/preset-typescript'
  ]
};

为什么要改成.cjs？相同的内容，只不过后缀名为.js不行嘛？亲测不行，报错You appear to be using a native ECMAScript module configuration file, which is only supported when running Babel asynchronously.。这是因为vite脚手架创建的项目package.json有一句万恶的声明："type": "module"。

构建流程

《技术选型》一节提到，我们需要打包出manifest.json；popup.html及其配套CSS、JS；options.html及其配套CSS、JS；background.js；静态资源。这就是一个典型Chrome插件的构成。我们需要设计一个构建流程，生成上述产物。下面列举我遇到的几个基本问题和解决方案：

1. 静态资源：直接用rollup-plugin-copy复制到manifest.json定义的位置即可。
2. manifest.json需要修改某些字段：vite没有loader的概念，所以需要想其他办法。可以尝试构造一个专门import 'xx.json'导入json文件的入口ts文件，然后匹配xx.json进行处理，但这种写法获得的文件内容，是json文本转化为js对象的结果，不是很简洁。最终我的做法是：在writeBundle阶段，先读入manifest.json，再进行修改，最后写入目标位置，类似于rollup-plugin-copy。代码实现传送门
3. background.ts和popup.html / options.html依赖的tsx文件希望共享某些代码，但不希望background.js打包结果出现import语句，因为这会导致插件无法工作：我们发现background.ts的可靠性可以靠单测来保证，于是只需要保证popup.html / options.html的本地预览功能可用。所以解决方案异常简单，构建2次即可。构建命令修改为tsc && vite build && vite build --config vite-bg.config.ts。

至此，Chrome插件开发与普通的⌨️前端开发没有任何区别。

shell脚本：输出构建耗时

令人震惊的是，vite缺乏一个输出构建耗时的可靠插件（0 star的插件还是有的）！这个小需求可以自己写vite插件来解决，也可以用一个更简单的方式来解决：写一个shell脚本。

我们在配置jest时安装了ts-node，因此这里可以直接写ts脚本。scripts/build.ts传送门：

import spawn from 'cross-spawn';
import chalk from 'chalk';

function main () {
  const startTime = new Date().valueOf();
  const cmds = [
    'npx tsc',
    'npx vite build',
    'npx vite build --config vite-bg.config.ts'
  ];
  const buildCmd = cmds.join(' && ');
  console.log(chalk.greenBright('Build command:', buildCmd));
  const spawnReturn = spawn.sync(buildCmd, [], { stdio: 'inherit', shell: true });
  if (spawnReturn.error) {
    console.error(chalk.redBright('Build failed with error'), spawnReturn.error);
    return;
  }
  const duration = ((new Date().valueOf() - startTime) / 1000).toFixed(2);
  console.log(chalk.greenBright(`✨  Done in ${duration}s.`));
}

main();

1. cross-spawn可以理解成一个跨平台版的child_process.spawn，避免自己处理跨平台适配。spawn.sync就是child_process.spawnSync。参考链接5
2. chalk用来输出彩色文本。
3. 添加shell: true可解决MAC上运行报错Error: spawnSync ENOENT导致无法构建的问题，参考链接7

根据参考链接6，构建命令要相应地修改为：

node --loader ts-node/esm ./scripts/build.ts

命令并不能直接使用ts-node scripts/build.ts，因为会报错TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".ts"。

相关依赖：

npm install chalk cross-spawn @types/cross-spawn ts-node -D

ES6 import json：–experimental-json-modules 选项

vite.config.ts可以直接import pkg from './package.json';但我们用ts-node运行的脚本不能。为了解决这个问题，可以尝试：

1. import assertion。import pkg from '../package.json' assert { type: 'json' };。但只能运行于高版本的node。
2. --experimental-json-modules选项。把构建命令改为：node --loader ts-node/esm --experimental-json-modules scripts/build.ts即可。这样低版本node也支持了～

项目配置路径别名

根据参考链接15，配置路径别名一般分为：cli支持、IDE支持两部分，逐个击破即可。

vite配置路径别名

cli支持：vite.config.ts配置resolve.alias。

defineConfig({
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  }
});

IDE支持：tsconfig.json配置compilerOptions.paths。

{
  "compilerOptions": {
    "paths": {
      "@/*": [
        "./src/*"
      ],
    }
  }
}

jest配置路径别名

cli支持：jest.config.ts

const config: Config.InitialOptions = {
  moduleNameMapper: {
    '^@/(.*)$': '/src/$1'
  },
};

IDE支持：依旧是配置tsconfig.json的compilerOptions.paths。但有一个问题：VSCode只认tsconfig.json，不认自己指定的tsconfig.test.json。最后还是让ts-jest直接读tsconfig.json配置了，又不是不能用

引入i18n

根据参考链接9，我们可以用react-i18next快速为react项目引入i18n。

（1）安装依赖

npm i i18next react-i18next i18next-browser-languagedetector

• react-i18next是一个i18next插件，用来降低 react 的使用成本。
• i18next-browser-languagedetector是一个i18next插件，它会自动检测浏览器的语言。

（2）我们建一个文件夹src/i18n存放i18n相关的代码。i18n需要考虑的一个核心问题是：资源文件的加载、使用策略。为了简单，我们直接使用.ts文件。创建src/i18n/i18n-init.ts如下。

1. i18n.use注册i18next插件。
2. 这里封装了一个$gt函数，期望能直接调用$gt而不需要在组件里多写一句const { t } = useTranslation()。但麻烦的是，t函数必须直接在组件中引用，甚至不能在组件内定义的函数里调用，否则它会直接抛出错误让我们整个应用崩溃……幸好本插件规模很小，这个问题可以容忍。

import i18n from 'i18next';
import { initReactI18next, useTranslation } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import en from './en';
import zh from './zh';

i18n
  .use(LanguageDetector)
  .use(initReactI18next)
  .init({
    debug: true,
    fallbackLng: 'en',
    interpolation: {
      escapeValue: false
    },
    resources: {
      en: {
        translation: en
      },
      zh: {
        translation: zh
      }
    }
  });

export const $gt = (key: string | string[]) => {
  const { t } = useTranslation();
  return t(key);
};

export const langOptions = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: '中文' }
];

export default i18n;

（3）语言切换功能。useTranslation()也会返回一个i18n对象，我们调用i18n.changeLanguage即可切换语言。

/*
export const langOptions = [
  { value: 'en', label: 'English' },
  { value: 'zh', label: '中文' }
];
*/
const changeLang = (langValue: string) => {
  i18n.changeLanguage(langValue);
};

 
  
动态切换暗黑主题
 
  
根据参考链接10，antd5提供了动态切换主题的能力，只需要使用ConfigProvider：
 
  
import theme from 'antd/es/theme';
import ConfigProvider from 'antd/es/config-provider';

    

 
  
使用预设算法是成本最低的方式，当然功能也最局限。为简单起见，我们就采用这种方式。
 
  
首先需要一个bool来控制当前是暗色主题还是灰色主题：
 
  
const [preferDarkTheme, setPreferDarkTheme] = useLocalStorageState('preferDarkTheme', {
  defaultValue: true
});
 
  
导航栏的开关只需要调用setPreferDarkTheme即可切换主题。
 
  
另外，项目有一些组件没有用antd，不在预设算法的覆盖范围内，比如导航栏。不优美但肯定最简单的解决方案就是：我们在根组件定义各个主题的类名prefix：
 
  
enum ClassNamePrefix {
  DARK = 'custom-theme-dark',
  DEFAULT = 'custom-theme-default'
}
const curClassNamePrefix = preferDarkTheme ? ClassNamePrefix.DARK : ClassNamePrefix.DEFAULT;
 
  
然后通过Context传给子组件：
 
  


 
  
子组件直接消费即可：
 
  

 
  
插件核心功能：数据结构设计
 
  
我们希望这个插件支持：
 
  
 
   
重定向到某URL，包括file://这种指向本地文件的（来自ReRes）。
 
   
对于GET请求，可以进行URLSearchParams的增删改。
 
   
对请求头进行增删改。
 
   
对响应头进行增删改。
 
   
拦截请求。
 
   
……
 
  
 
  
拟定这些需求是参考了Chrome插件request-interceptor的background.js的核心代码，如下：
 
  
const applyRuleActions = (rule, details, obj) => {
    if (!rule.actions || !rule.enabled) {
        return;
    }

    // const count = countMap.get(rule.id) ?? 0;
    // countMap.set(rule.id, count + 1);

    const matches = getMatches(rule, details);

    (rule.actions || []).forEach((action) => {
        if (!action.details) {
            action.details = {};
        }

        const {type, details: {name, value}} = action;
        const updatedName = patternMatchingReplace(name, matches);
        const updatedValue = patternMatchingReplace(value, matches);

        let actionType;

        switch (type) {
            case 'block-request':
                obj.cancel = true; break;
            case 'add-request-header':
            case 'modify-request-header':
            case 'delete-request-header':
                actionType = type.split('-')[0];
                modifyHeaders(obj.requestHeaders, actionType, updatedName, updatedValue);
                obj.requestHeadersModified = true;
                break;
            case 'add-response-header':
            case 'modify-response-header':
            case 'delete-response-header':
                actionType = type.split('-')[0];
                modifyHeaders(obj.responseHeaders, actionType, updatedName, updatedValue);
                obj.responseHeadersModified = true;
                break;
            case 'add-query-param':
            case 'modify-query-param':
            case 'delete-query-param':
                actionType = type.split('-')[0];
                modifyQueryParams(obj.queryParams, actionType, updatedName, updatedValue);
                obj.queryParamsModified = true;
                break;
            case 'redirect-to':
                // Preflight requests can not be redirected
                if (details.method.toLowerCase() !== 'options') {
                    obj.redirectUrl = updatedValue;
                }

                break;
            case 'throttle':
                obj.redirectUrl = `https://deelay.me/${updatedValue}/${details.url}`; break;
        }

    });
};
 
  
对需求进行简单分析后，我认为background.ts的一条规则这样描述看上去还算合理，完整代码：
 
  
// 为节省篇幅，只展示了一部分
export enum RewriteType {
  SET_UA = 'Set UA',
  REDIRECT = 'Redirect',
  ADD_QUERY_PARAM = 'Add Query Param'
}
// localStorage中的核心数据结构：{ hansReResMap: RequestMappingRule[] }
export interface RequestMappingRule {
  req: string
  action: Action
  checked: boolean
}

export interface Action {
  type: RewriteType
}

export interface RedirectAction extends Action {
  res: string
}

export interface SetUAAction extends Action {
  newUA: string
}

export interface AddQueryParamAction extends Action {
  name: string
  value: string
}

export interface ModifyQueryParamAction extends Action {
  name: string
  value: string
}

export interface DeleteQueryParamAction extends Action {
  name: string
}
// 在此仅展示对 URLSearchParams 的操作
export type QueryParamAction = AddQueryParamAction | ModifyQueryParamAction | DeleteQueryParamAction;

export function isAddQueryParamAction (o: Action): o is AddQueryParamAction {
  return o.type === RewriteType.ADD_QUERY_PARAM;
}

export type ReqHeaderAction = AddReqHeaderAction | ModifyReqHeaderAction | DeleteReqHeaderAction;

export function isReqHeaderAction (o: Action): o is ReqHeaderAction {
  return isAddReqHeaderAction(o) ||
    isModifyReqHeaderAction(o) ||
    isDeleteReqHeaderAction(o);
}
 
  
前文提到，request-interceptor源码设计描述操作的常量(add|modify|delete)-response-header时，借鉴了http状态码的思想，第一个词表示操作类型。但我不打算这么写，而是采用类型安全但比较啰嗦的写法。
 
  
popup、options页面需要用到的，各类型Action提供的默认值如下：
 
  
export const actionDefaultResultValueMap = {
  [RewriteType.REDIRECT]: { res: 'https://baidu.com' },
  [RewriteType.SET_UA]: { newUA: 'Mozilla/5.0 (iPhone; CPU iPhone OS 9_0 like Mac OS X) AppleWebKit/601.1.46 (KHTML, like Gecko) Version/9.0 Mobile/13B143 Safari/601.1 FingerBrowser/1.5' },
  [RewriteType.BLOCK_REQUEST]: {},
  [RewriteType.ADD_QUERY_PARAM]: { name: 'role', value: 'acmer' },
  [RewriteType.MODIFY_QUERY_PARAM]: { name: 'rate', value: '2400' },
  [RewriteType.DELETE_QUERY_PARAM]: { name: 'param_to_delete' },
  [RewriteType.ADD_REQ_HEADER]: { name: 'X-Role', value: 'ctfer' },
  [RewriteType.MODIFY_REQ_HEADER]: { name: 'X-Rate', value: '2400' },
  [RewriteType.DELETE_REQ_HEADER]: { name: 'Request-Header' },
  [RewriteType.ADD_RESP_HEADER]: { name: 'Y-Role', value: 'acmer' },
  [RewriteType.MODIFY_RESP_HEADER]: { name: 'Y-Rate', value: '2400' },
  [RewriteType.DELETE_RESP_HEADER]: { name: 'Response-Header' }
};
 
  
RequestMappingRule的数据结构设计符合直觉，但这个设计对象里有对象，引入了一个问题：如果想直接使用antd的Form组件，Form.useForm()里的action属性（是Action接口）应该是无法直接映射到表单的字段。如何解决呢？借鉴适配器模式，我引入了以下数据结构（有更好的做法请佬们教教！）：
 
  
export interface FlatRequestMappingRule {
  req: string
  checked: boolean
  action: RewriteType
  res: string
  newUA: string
  name: string
  value: string
}
 
  
然后在Form组件onFinish事件里将FlatRequestMappingRule翻译为RequestMappingRule，这样就能顺利写入localStorage啦。同理，从localStorage加载RequestMappingRule后，也要翻译为FlatRequestMappingRule才能顺利输入Form组件，渲染Edit对话框。两者相互转化的函数如下：
 
  
export function transformIntoRequestMappingRule (o: FlatRequestMappingRule): RequestMappingRule {
  const action: Action = (() => {
    if (o.action === RewriteType.REDIRECT) return { type: o.action, res: o.res };
    if (o.action === RewriteType.SET_UA) return { type: o.action, newUA: o.newUA };
    return { type: o.action, name: o.name, value: o.value };
  })();
  return {
    req: o.req,
    checked: o.checked,
    action
  };
}

export function transformIntoFlatRequestMappingRule (o: RequestMappingRule): FlatRequestMappingRule {
  const ret: FlatRequestMappingRule = {
    req: o.req,
    checked: o.checked,
    action: o.action.type,
    res: '',
    newUA: '',
    name: '',
    value: ''
  };
  return { ...ret, ...o.action };
}
 
  
缺点：
 
  
 
   
对于新增的Action类型，不鼓励新增字段名，因为改动会更大，一般都是直接使用已有的name, value属性。这恰好和request-interceptor的源码一致。
 
  
 
  
插件核心功能：正式实现
 
  
赏析ReRes和request-interceptor两个插件的源码，并结合typescript进行数据结构设计后，我们就可以开始实现本插件的核心功能了。代码传送门
 
  
模仿ReRes写一个加载数据结构的函数：
 
  
function getMapFromLocalStorage (): RequestMappingRule[] {
  const hansReResMap = window.localStorage.getItem(hansReResMapName);
  return hansReResMap ? JSON.parse(hansReResMap) : [];
}
 
  
值得注意的是，ReRes源码使用了
 
  
window.addEventListener('storage', getLocalStorage, false);
 
  
在popup, options页面更新localStorage后更新数据结构，于是可以直接将ReResMap作为全局变量，理论上可以提高性能。但我这边尝试使用这行代码发现并没有及时更新，因此没有使用全局变量，而是退而求其次，在每个listener执行时都重新调用getMapFromLocalStorage加载。
 
  
因为测试是保证background.ts可靠性的唯一手段，所以为了可测性，我把大部分代码都移动到src/utils.ts了。期间遇到了一个typescript中才有的问题：chrome在测试环境中不存在，因此在不mock的情况下，只有将代码移动到其他文件，才能测试。但有些类型依赖chrome变量，如：import HttpHeader = chrome.webRequest.HttpHeader;。因为HttpHeader字段少，所以可以使用“鸭子类型”的技巧来解决这个问题：
 
  
export interface MockHttpHeader {
  name: string;
  value?: string | undefined;
  binaryValue?: ArrayBuffer | undefined;
}
 
  
PS：鸭子类型的介绍，来自《JavaScript设计模式与开发实践》Chap1。
 
  
 
   
JavaScript 是动态语言，无需进行类型检测，可以调用对象的任意方法。这一切都建立在鸭子类型上，即：如果它走起路来像鸭子，叫起来像鸭子，那它就是鸭子。
 
  
 
  
 
   
鸭子模型指导我们关注对象的行为，而不是对象本身，也就是关注 Has-A，而不是 Is-A。利用鸭子模式就可以实现动态类型语言一个原则"面向接口编程而不是面向实现编程"。
 
  
 
  
之后HttpHeader类型的变量都可以用MockHttpHeader代替，而两者是兼容的，所以ts不会报类型错误。
 
  
onBeforeRequest的入口，我模仿了request-interceptor的写法，优先级cancel > redirect > queryParamsModified。唯一不同点是，request-interceptor为了简化代码，实现为一个对returnObject的副作用；而我实现的processRequest是一个纯函数：
 
  
const onBeforeRequestListener = (details: WebRequestBodyDetails) => {
  const hansReResMap = getMapFromLocalStorage();
  const actionDescription = processRequest(details.url, hansReResMap);

  const { redirectUrl = '', cancel, queryParamsModified } = actionDescription;
  // 约定优先级：cancel > redirect > queryParamsModified
  if (cancel) {
    return { cancel: true };
  }
  if (redirectUrl) {
    try {
      // Unchecked runtime.lastError: redirectUrl 'baidu.com/' is not a valid URL.
      // 针对Chrome的这种报错，我们只会尝试给出一个友好点的报错提示，不会擅自阻止报错的产生
      new URL(redirectUrl);
    } catch (e) {
      console.error(`Please make sure that redirectURL '${redirectUrl}' is a valid url when using hans-reres. For example, 'baidu.com' is not a valid url.`);
    }
    return redirectUrl === details.url ? {} : { redirectUrl };
  }
  if (queryParamsModified) {
    const { urlObject } = actionDescription;
    urlObject.search = actionDescription.queryParams.toString();
    return { redirectUrl: urlObject.toString() };
  }
  return {};
};

chrome.webRequest.onBeforeRequest.addListener(
  onBeforeRequestListener,
  { urls: [''] },
  ['blocking']
);
 
  
获取到actionDescription后，就按照优先级来决定操作。这里引入了一个限制：读取一系列规则后，对一个请求只有一个操作。request-interceptor引入这个限制是为了简化代码，但这个限制也是合理的。因为用户希望重定向URL时，一般不会希望在重定向后再对新URL的URLSearchParams进行增删改。
 
  
重定向时保持URLSearchParams的功能
 
  
考虑一个场景：前端开发过程中，希望把GET请求转发到YAPI，来方便地使用Mock数据。但是在request-interceptor中配置重定向规则后，发现会丢失查询字符串。而我在实现重定向规则时，是模仿ReRes，对请求URL进行replace，所以看起来可以保留查询字符串。但面对响应URL有查询字符串的情况，新URL的查询字符串会不符合预期。所以我们在此引入一个小功能：对于重定向规则，在popup, options页面可以勾选是否需要保持查询字符串。若某条重定向规则指出需要保持，则把新URL的查询字符串覆盖为原始URL（未读取规则前的URL）的查询字符串。
 
  
首先给RedirectAction加个选项：
 
  
export interface RedirectAction extends Action {
  res: string
  keepQueryParams: boolean
}
 
  
最后只需要在每次循环获取redirectUrl后，对其进行一个后置处理。
 
  
export function overrideQueryParams (urlObject: URL, redirectUrl: string, action: RedirectAction) {
  if (!action.keepQueryParams) return redirectUrl;
  try {
    const redirectUrlObject = new URL(redirectUrl);
    redirectUrlObject.search = urlObject.search;
    redirectUrl = redirectUrlObject.toString();
  } catch (e) {
    console.error('overrideQueryParams() error', e);
  }
  return redirectUrl;
}
 
  
Mock Response功能
 
  
我的插件的Mock Response功能可以说是前端开发的利器——从此Mock接口返回数据没有任何门槛。这一节就讲述这个功能的实现思路。我们已经从ReRes源码学到：为了实现将请求重定向到本机（即file协议URL），需要先发XHR请求获取本机文件内容，再将其拼接为data协议的URL。于是我们可以在ReRes和我的插件的重定向功能中，直接指定重定向URL为data协议URL，来实现Mock Response功能。但这样不太方便，所以在此我引入一个新的操作类型MockResponseAction：
 
  
export interface MockResponseAction extends Action {
  dataType: ResponseType // necessary，background.js 用不到但编辑对话框要用到
  value: string
}
 
  
接下来在表单中加一个下拉框，可以选择编程语言。对于选中的编程语言，展示的组件为对应语言的编辑器（可以附加一个“格式化”按钮）。代码传送门
 
  
这一块在交互方面的想象空间不小，比如：每种语言提供一个功能强大的编辑器。可惜这里（IDE）空白处太小，写不下
 
  
另外，为了可测试性，应该把负责格式化操作的代码和与UI有关的代码隔离开。格式化相关代码
 
  
请求头、响应头的处理
 
  
listener的代码结构和上述processRequest类似：（1）一个纯函数。（2）返回值包括：要使用到的数据和一系列是否需要进行某操作的bool变量。定义如下：
 
  
export type HeadersMap = Map<string, string>;

export interface ProcessHeadersReturn {
  headersModified: boolean
  requestHeadersMap: HeadersMap
  responseHeadersMap: HeadersMap
}
 
  
实现难度较低，不再赘述。相关代码传送门：background.ts、utils.ts
 
  
details.requestHeaders和details.responseHeaders的类型是chrome.webRequest.HttpHeader[] | undefined，这个数据结构对修改操作不友好。request-interceptor为了降低修改操作的时间复杂度，引入了转化为Map的前置操作和重新转为数组的后置操作。咱们用TS模仿实现时，需要再次使用“鸭子类型”的技巧，相关代码如下：
 
  
export interface MockHttpHeader {
  name: string;
  value?: string | undefined;
  binaryValue?: ArrayBuffer | undefined;
}

export type HeadersMap = Map<string, string>;

export function mapToHttpHeaderArray (mp: HeadersMap): MockHttpHeader[] {
  return [...mp.entries()].map(([name, value]) => ({ name, value }));
}
// getHeadersMap 直接在 listener 中调用
export function getHeadersMap (headers: MockHttpHeader[]) {
  return new Map(headers.map(header => [header.name, header.value || '']));
}
 
  
读取POST请求体内容
 
  
遗憾的是，根据参考链接14，Chrome永远不会支持POST请求体的修改。但我们依旧可以读取请求体，所以仍然可以定这么一个需求：若请求体的JSON某字段包含特定的name，则拦截请求。
 
  
查看MDN可知，请求体类型定义如下：
 
  
export interface UploadData {
    /** Optional. An ArrayBuffer with a copy of the data. */
    bytes?: ArrayBuffer | undefined;
    /** Optional. A string with the file's path and name. */
    file?: string | undefined;
}

export interface WebRequestBody {
    /** Optional. Errors when obtaining request body data. */
    error?: string | undefined;
    /**
     * Optional.
     * If the request method is POST and the body is a sequence of key-value pairs encoded in UTF8, encoded as either multipart/form-data, or application/x-www-form-urlencoded, this dictionary is present and for each key contains the list of all values for that key. If the data is of another media type, or if it is malformed, the dictionary is not present. An example value of this dictionary is {'key': ['value1', 'value2']}.
     */
    formData?: { [key: string]: string[] } | undefined;
    /**
     * Optional.
     * If the request method is PUT or POST, and the body is not already parsed in formData, then the unparsed request body elements are contained in this array.
     */
    raw?: UploadData[] | undefined;
}
 
  
这给我们读取请求体的JSON制造了不少困难。我们有必要写一个方法，负责从ArrayBuffer中读取到请求体的JSON对象。实现如下：
 
  
// 调用
const postBodyList = parsePostBody(details.requestBody?.raw);

export function parsePostBody (rawData: MockUploadData[] | undefined): plainObject[] {
  if (!rawData) return [];
  return rawData.filter((item) => {
    let strData = '';
    try {
      strData = new TextDecoder().decode(item.bytes);
    } catch (e) {
      return false;
    }
    if (!isValidJson(strData)) return false;
    const obj = JSON.parse(strData);
    if (!isPlainObject(obj)) return false;
    return true;
  }).map((item) => JSON.parse(new TextDecoder().decode(item.bytes)));
}
 
  
这里为了避免引入chrome导致无法测试，再次使用了“鸭子类型”的技巧：
 
  
export type plainObject = Record<string, unknown>;

export interface MockUploadData {
  bytes?: ArrayBuffer | undefined;
  file?: string | undefined;
}
 
  
有读取JSON对象的能力后，其他部分的实现都很简单，看相关代码实现即可：background.ts、utils.ts。
 
  
另外，为了读取请求体数据，需要添加requestBody权限：
 
  
chrome.webRequest.onBeforeRequest.addListener(
  onBeforeRequestListener,
  { urls: [''] },
  ['blocking', 'requestBody']
);
 
  
lodash按需导入：tree-shaking
 
  
一般我们只使用lodash的少数函数，但构建时会将所有模块打包进来。可以按需导入嘛？根据参考链接18和参考链接19，可以使用lodash-es。vite项目基本上正常import，比如：import { isPlainObject } from 'lodash-es';，就可以获得tree-shaking的能力了。我遇到的问题见上文《jest不支持es模块的npm包（如：lodash-es）如何解决？》
 
  
jest如何测试使用了TextEncoder和TextDecoder的模块？
 
  
如果用到了TextEncoder和TextDecoder，那么jest运行会报错。目前我使用的是一个workaround（参考链接16）：
 
  
（1）jest.config.ts
 
  
const config: Config.InitialOptions = {
  setupFilesAfterEnv: ['/test/setupTests.ts'],
  // npm install jest-environment-jsdom -D
  testEnvironment: 'jsdom'
}
 
  
（2）test/setupTests.ts
 
  
// npm i @testing-library/jest-dom -D
import '@testing-library/jest-dom';
import { TextDecoder, TextEncoder } from 'util';

global.TextEncoder = TextEncoder;
// 不转为any会报类型不匹配的错误
global.TextDecoder = TextDecoder as any;
 
  
后记
 
  
配置难度（一生之敌）排名：1、jestyyds。2、eslint暂时的神。
 
  
参考资料
 
  
 
   
https://juejin.cn/post/7185920750765735973
 
   
stylelint规则文档：https://ask.dcloud.net.cn/article/36067
 
   
https://juejin.cn/post/7078330175145902110
 
   
npm init @vitejs/app到底干了什么：https://juejin.cn/post/6948202986573135908
 
   
https://www.cnblogs.com/cangqinglang/p/14761536.html
 
   
使用ts-node运行ts脚本及踩过的坑：https://juejin.cn/post/6939538768911138823
 
   
https://stackoverflow.com/questions/27688804/how-do-i-debug-error-spawn-enoent-on-node-js
 
   
使用commitlint规范commit格式：https://juejin.cn/post/6990307028162281508
 
   
https://juejin.cn/post/7139855730105942030
 
   
antd5定制主题官方文档：https://ant-design.gitee.io/docs/react/customize-theme-cn
 
   
onBeforeRequest MDN：https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/webRequest/onBeforeRequest
 
   
https://juejin.cn/post/7097312790511091719
 
   
jest jsdom环境TextEncoder和TextDecoder未定义：https://stackoverflow.com/questions/68468203/why-am-i-getting-textencoder-is-not-defined-in-jest
 
   
https://bugs.chromium.org/p/chromium/issues/detail?id=91191
 
   
vite配置路径别名：https://juejin.cn/post/7051507089574723620
 
   
jest如何测试使用了TextEncoder和TextDecoder的模块：https://github.com/inrupt/solid-client-authn-js/issues/1676
 
   
解决jest处理es模块：https://www.cnblogs.com/xueyoucd/p/10495922.html
 
   
lodash按需引入：https://www.cnblogs.com/fancyLee/p/10932050.html
 
   
https://blog.battlefy.com/tree-shaking-lodash-with-vite
 
  
 
  

                            
                        
                    
                    
                    

                    
                    
                    

                
                

                    

                        
                        

                            
 
                        
                        
                        

                            

                        
                        
                        

                            

                        
                    
                
            
        
    
    

        
你可能感兴趣的:(web&CTF,chrome,前端,typescript)
        

            

                

                    
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：做与用户的交互行为文章目录前端学习路线
                    
                    
ARM驱动学习之4小结
                        JT灬新一
嵌入式C++arm开发学习linux
                        
ARM驱动学习之4小结#include#include#include#include#include#defineDEVICE_NAME"hello_ctl123"MODULE_LICENSE("DualBSD/GPL");MODULE_AUTHOR("TOPEET");staticlonghello_ioctl(structfile*file,unsignedintcmd,unsignedlo
                    
                    
springboot+vue项目实战一-创建SpringBoot简单项目
                        苹果酱0567
面试题汇总与解析springboot后端java中间件开发语言
                        
这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
                    
                    
react-intl——react国际化使用方案
                        苹果酱0567
面试题汇总与解析java开发语言中间件springboot后端
                        
国际化介绍i18n：internationalization国家化简称，首字母+首尾字母间隔的字母个数+尾字母，类似的还有k8s(Kubernetes)React-intl是React中最受欢迎的库。使用步骤安装#usenpmnpminstallreact-intl-D#useyarn项目入口文件配置//index.tsximportReactfrom"react";importReactDOMf
                    
                    
博客网站制作教程
                        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
                    
                    
最简单将静态网页挂载到服务器上(不用nginx)
                        全能全知者
服务器nginx运维前端html笔记
                        
最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
                    
                    
补充元象二面
                        Redstone Monstrosity
前端面试
                        
1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
                    
                    
微信小程序开发注意事项
                        jun778895
微信小程序小程序
                        
微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
                    
                    
Linux CTF逆向入门
                        蚁景网络安全
linux运维CTF
                        
1.ELF格式我们先来看看ELF文件头，如果想详细了解，可以查看ELF的manpage文档。关于ELF更详细的说明：e_shoff：节头表的文件偏移量（字节）。如果文件没有节头表，则此成员值为零。sh_offset：表示了该section（节）离开文件头部位置的距离+-------------------+|ELFheader|---++--------->+-------------------
                    
                    
字节二面
                        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
                    
                    
详解“c:/work/src/components/a/b.vue“‘ has no default export报错原因
                        hw_happy
开发语言前端vue.jsjavascript
                        
前情提要在一个vue文件中需要引入定义的b.vue文件，但是提示b文件没有默认导出，对于vue2文件来说有exportdefault，在中，所有定义的变量、函数和组件都会自动被视为默认导出的组件内容。因此，不需要显式地使用exportdefault来导出组件。但是在我引用这个文件的时候还是提示了这个错误，原来是我的项目使用了ts和vite\webpack，因为TypeScript和Vue的默认导出
                    
                    
uniapp实现动态标记效果详细步骤【前端开发】
                        2401_85123349
uni-app
                        
第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
                    
                    
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
                    
                    
vant-element-ts一起使用存在的问题
                        flynn_
问题总结vue
                        
由于vant-ui与element-ui部分组件存在冲突，导致在vue-typescript中出现错误:Subsequentpropertydeclarationsmusthavethesametype.Property'$notify'mustbeoftype'ElNotification',butherehastype'Notify'.方案：一个全局导入，一个按需导入,避免冲突的组件同时使用，
                    
                    
前端知识点
                        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
                    
                    
Windows安装ciphey编码工具，附一道ciscn编码题例
                        im-Miclelson
CTF工具网络安全
                        
TA是什么一款智能化的编码分析解码工具，对于CTF中复杂性编码类题目可以快速攻破。编码自动分析解码的神器。如何安装Windows环境Python3.864位（最新的版本不兼容，32位的也不行）PIP直接安装pipinstallciphey-ihttps://pypi.mirrors.ustc.edu.cn/simple/安装后若是出现报错请根据错误代码行数找到对应文件，r修改成rb即可。使用标准语
                    
                    
分布式锁和spring事务管理
                        暴躁的鱼
锁及事务分布式springjava
                        
最近开发一个小程序遇到一个需求需要实现分布式事务管理业务需求用户在使用小程序的过程中可以查看景点，对景点地区或者城市标记是否想去，那么需要统计一个地点被标记的人数，以及记录某个用户对某个地点是否标记为想去，用两个表存储数据，一个地点表记录改地点被标记的次数，一个用户意向表记录某个用户对某个地点是否标记为想去。由于可能有多个用户同时标记一个地点，每个用户在前端点击想去按钮之后，后台接收到请求，从数据
                    
                    
前端CSS面试常见题
                        剑亦未配妥
前端面试前端css面试
                        
边界塌陷盒模型有两种：W3C盒模型和IE盒模型，区别在于宽度是否包含边框定义：同时给兄弟/父子盒模型设置上下边距，理论上边距值是两者之和，实际上不是注意：浮动和定位不会产生边界塌陷；只有块级元素垂直方向才会产生margin合并margin计算方案margin同为正负：取绝对值大的值一正一负：求和父子元素边界塌陷解决父元素可以通过调整padding处理；设置overflowhidden，触发BFC子
                    
                    
【JS】前端文件读取FileReader操作总结
                        程序员-张师傅
前端前端javascript开发语言
                        
前端文件读取FileReader操作总结FileReader是JavaScript中的一个WebAPI，它允许web应用程序异步读取用户计算机上的文件（或原始数据缓冲区）的内容，例如读取文件以获取其内容，并在不将文件发送到服务器的情况下在客户端使用它。这对于处理图片、文本文件等非常有用，尤其是当你想要在用户界面中即时显示文件内容或进行文件预览时。创建FileReader对象首先，你需要创建一个Fi
                    
                    
【前端】vue 报错:The template root requires exactly one element
                        程序员-张师傅
前端前端vue.jsjavascript
                        
【前端】vue报错:Thetemplaterootrequiresexactlyoneelement在Vue.js中，当你遇到错误“Thetemplaterootrequiresexactlyoneelement”时，这通常意味着你的Vue组件的模板（template）根节点不是单一的元素。Vue要求每个组件的模板必须有一个根元素来包裹所有的子元素。这个错误通常出现在以下几种情况：模板中有多个并行
                    
                    
2005年高考英语北京卷 - 阅读理解C
                        让文字更美

                        
Howcouldwepossiblythinkthatkeepinganimalsincagesinunnaturalenvironments-mostlyforentertainmentpurposes-isfairandrespectful?我们怎么可能认为把动物关在非自然环境的笼子里——主要是为了娱乐目的——是公平和尊重的呢？Zooofficialssaytheyareconcernedab
                    
                                
对股票分析时要注意哪些主要因素？
                                    会飞的奇葩猪
股票 分析 云掌股吧
                                    
 
　　众所周知，对散户投资者来说，股票技术分析是应战股市的核心武器，想学好股票的技术分析一定要知道哪些是重点学习的，其实非常简单，我们只要记住三个要素：成交量、价格趋势、振荡指标。 
 
    一、成交量 
 
　　大盘的成交量状态。成交量大说明市场的获利机会较多，成交量小说明市场的获利机会较少。当沪市的成交量超过150亿时是强市市场状态，运用技术找综合买点较准；
                                
                                
【Scala十八】视图界定与上下文界定
                                    bit1129
scala
                                    
Context Bound，上下文界定，是Scala为隐式参数引入的一种语法糖，使得隐式转换的编码更加简洁。 
  
隐式参数 
首先引入一个泛型函数max，用于取a和b的最大值 
  def max[T](a: T, b: T) = {
    if (a > b) a else b
  } 
 因为T是未知类型，只有运行时才会代入真正的类型，因此调用a > 
                                
                                
C语言的分支——Object-C程序设计阅读有感
                                    darkblue086
applec框架cocoa
                                    
自从1972年贝尔实验室Dennis Ritchie开发了C语言，C语言已经有了很多版本和实现，从Borland到microsoft还是GNU、Apple都提供了不同时代的多种选择，我们知道C语言是基于Thompson开发的B语言的，Object-C是以SmallTalk-80为基础的。和C++不同的是，Object C并不是C的超集，因为有很多特性与C是不同的。 
Object-C程序设计这本书
                                
                                
去除浏览器对表单值的记忆
                                    周凡杨
html记忆autocompleteform浏览
                                    
  
                                   &n
                                
                                
java的树形通讯录
                                    g21121
java
                                    
最近用到企业通讯录，虽然以前也开发过，但是用的是jsf，拼成的树形，及其笨重和难维护。后来就想到直接生成json格式字符串，页面上也好展现。 
	// 首先取出每个部门的联系人
			for (int i = 0; i < depList.size(); i++) {
				List<Contacts> list = getContactList(depList.get(i
                                
                                
Nginx安装部署
                                    510888780
nginxlinux
                                    
Nginx ("engine x") 是一个高性能的 HTTP 和 反向代理 服务器，也是一个 IMAP/POP3/SMTP 代理服务器。 Nginx 是由 Igor Sysoev 为俄罗斯访问量第二的 Rambler.ru 站点开发的，第一个公开版本0.1.0发布于2004年10月4日。其将源代码以类BSD许可证的形式发布，因它的稳定性、丰富的功能集、示例配置文件和低系统资源
                                
                                
java servelet异步处理请求
                                    墙头上一根草
ｊａｖａ异步返回ｓｅｒｖｌｅｔ
                                    
servlet3.0以后支持异步处理请求，具体是使用AsyncContext ，包装httpservletRequest以及httpservletResponse具有异步的功能， 
   
  
  final AsyncContext ac = request.startAsync(request, response); 
  ac.s
                                
                                
我的spring学习笔记8-Spring中Bean的实例化
                                    aijuans
Spring 3
                                    
在Spring中要实例化一个Bean有几种方法： 
 
1、最常用的（普通方法） 
 
 
<bean id="myBean" class="www.6e6.org.MyBean" /> 
 
使用这样方法，按Spring就会使用Bean的默认构造方法，也就是把没有参数的构造方法来建立Bean实例。 
 
（有构造方法的下个文细说） 
 
2、还
                                
                                
为Mysql创建最优的索引
                                    annan211
mysql索引
                                    



	索引对于良好的性能非常关键，尤其是当数据规模越来越大的时候，索引的对性能的影响越发重要。
	索引经常会被误解甚至忽略，而且经常被糟糕的设计。
	索引优化应该是对查询性能优化最有效的手段了，索引能够轻易将查询性能提高几个数量级，最优的索引会比
	较好的索引性能要好2个数量级。
	
	1 索引的类型
	  (1) B-Tree
	    不出意外，这里提到的索引都是指 B-
                                
                                
日期函数
                                    百合不是茶
oraclesql日期函数查询
                                    
  
ORACLE日期时间函数大全

   TO_DATE格式(以时间:2007-11-02   13:45:25为例)
   
        Year:      
        yy two digits 两位年                显示值:07
        yyy three digits 三位年                显示值:007
   
                                
                                
线程优先级
                                    bijian1013
javathread多线程java多线程
                                    
多线程运行时需要定义线程运行的先后顺序。 
线程优先级是用数字表示，数字越大线程优先级越高，取值在1到10，默认优先级为5。 
实例： 
package com.bijian.study;

/**
 * 因为在代码段当中把线程B的优先级设置高于线程A,所以运行结果先执行线程B的run()方法后再执行线程A的run()方法
 * 但在实际中，JAVA的优先级不准，强烈不建议用此方法来控制执
                                
                                
适配器模式和代理模式的区别
                                    bijian1013
java设计模式
                                    
一.简介        适配器模式：适配器模式（英语：adapter pattern）有时候也称包装样式或者包装。将一个类的接口转接成用户所期待的。一个适配使得因接口不兼容而不能在一起工作的类工作在一起，做法是将类别自己的接口包裹在一个已存在的类中。      &nbs
                                
                                
【持久化框架MyBatis3三】MyBatis3 SQL映射配置文件
                                    bit1129
Mybatis3
                                    
 SQL映射配置文件一方面类似于Hibernate的映射配置文件，通过定义实体与关系表的列之间的对应关系。另一方面使用<select>,<insert>,<delete>，<update>元素定义增删改查的SQL语句， 
这些元素包含三方面内容 
1. 要执行的SQL语句 
2. SQL语句的入参，比如查询条件 
3. SQL语句的返回结果
                                
                                
oracle大数据表复制备份个人经验
                                    bitcarter
oracle大表备份大表数据复制
                                    
前提： 
   数据库仓库A（就拿oracle11g为例）中有两个用户user1和user2,现在有user1中有表ldm_table1,且表ldm_table1有数据5千万以上，ldm_table1中的数据是从其他库B（数据源）中抽取过来的，前期业务理解不够或者需求有变，数据有变动需要重新从B中抽取数据到A库表ldm_table1中。 
    
                                
                                
HTTP加速器varnish安装小记
                                    ronin47
http varnish 加速
                                    
上午共享的那个varnish安装手册，个人看了下，有点不知所云，好吧~看来还是先安装玩玩！ 
苦逼公司服务器没法连外网，不能用什么wget或yum命令直接下载安装，每每看到别人博客贴出的在线安装代码时，总有一股羡慕嫉妒“恨”冒了出来。。。好吧，既然没法上外网，那只能麻烦点通过下载源码来编译安装了！ 
Varnish 3.0.4下载地址： http://repo.varnish-cache.org/
                                
                                
java-73-输入一个字符串，输出该字符串中对称的子字符串的最大长度
                                    bylijinnan
java
                                    


public class LongestSymmtricalLength {

	/*
	 * Q75题目：输入一个字符串，输出该字符串中对称的子字符串的最大长度。
	 * 比如输入字符串“google”，由于该字符串里最长的对称子字符串是“goog”，因此输出4。
	 */
	
	public static void main(String[] args) {
		Str
                                
                                
学习编程的一点感想
                                    Cb123456
编程感想Gis
                                    
       写点感想，总结一些，也顺便激励一些自己.现在就是复习阶段，也做做项目. 
  
   本专业是GIS专业，当初觉得本专业太水，靠这个会活不下去的，所以就报了培训班。学习的时候，进入状态很慢，而且当初进去的时候，已经上到Java高级阶段了，所以.....，呵呵，之后有点感觉了，不过，还是不好好写代码，还眼高手低的，有
                                
                                
[能源与安全]美国与中国
                                    comsci
能源
                                    
 
 
     现在有一个局面：地球上的石油只剩下N桶，这些油只够让中国和美国这两个国家中的一个顺利过渡到宇宙时代，但是如果这两个国家为争夺这些石油而发生战争，其结果是两个国家都无法平稳过渡到宇宙时代。。。。而且在战争中，剩下的石油也会被快速消耗在战争中，结果是两败俱伤。。。 
 
 
      在这个大
                                
                                
SEMI-JOIN执行计划突然变成HASH JOIN了 的原因分析
                                    cwqcwqmax9
oracle
                                    
甲说： 
A B两个表总数据量都很大，在百万以上。 
idx1  idx2字段表示是索引字段 
A B 两表上都有 
col1字段表示普通字段 
 
select xxx from A 
where A.idx1 between mmm and nnn 
     and exists (select 1 from B where B.idx2 =
                                
                                
SpringMVC-ajax返回值乱码解决方案
                                    dashuaifu
AjaxspringMVCresponse中文乱码
                                    
  
SpringMVC-ajax返回值乱码解决方案 
  
一：（自己总结，测试过可行） 
ajax返回如果含有中文汉字，则使用：（如下例：） 
@RequestMapping(value="/xxx.do")       public @ResponseBody void getPunishReasonB
                                
                                
Linux系统中查看日志的常用命令
                                    dcj3sjt126com
OS
                                    
因为在日常的工作中，出问题的时候查看日志是每个管理员的习惯，作为初学者，为了以后的需要，我今天将下面这些查看命令共享给各位 
cat 
tail -f 
日 志 文 件 说 明 
/var/log/message 系统启动后的信息和错误日志，是Red Hat Linux中最常用的日志之一 
/var/log/secure 与安全相关的日志信息 
/var/log/maillog 与邮件相关的日志信
                                
                                
[应用结构]应用
                                    dcj3sjt126com
PHPyii2
                                    
应用主体 
应用主体是管理 Yii 应用系统整体结构和生命周期的对象。 每个Yii应用系统只能包含一个应用主体，应用主体在 入口脚本中创建并能通过表达式 \Yii::$app 全局范围内访问。 
 
 补充: 当我们说"一个应用"，它可能是一个应用主体对象，也可能是一个应用系统，是根据上下文来决定[译：中文为避免歧义，Application翻译为应
                                
                                
assertThat用法
                                    eksliang
JUnitassertThat
                                    
junit4.0  assertThat用法 
一般匹配符1、assertThat( testedNumber, allOf( greaterThan(8), lessThan(16) ) ); 
注释： allOf匹配符表明如果接下来的所有条件必须都成立测试才通过，相当于“与”（&&） 
2、assertThat( testedNumber, anyOf( g
                                
                                
android点滴2
                                    gundumw100
应用服务器android网络应用OSHTC
                                    
如何让Drawable绕着中心旋转？ 
 

Animation a = new RotateAnimation(0.0f, 360.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,0.5f);
a.setRepeatCount(-1);
a.setDuration(1000);
 
 
如何控制Andro
                                
                                
超简洁的CSS下拉菜单
                                    ini
htmlWeb工作html5css
                                    
效果体验：http://hovertree.com/texiao/css/3.htmHTML文件： 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁的HTML+CSS下拉菜单-HoverTree</title>
                                
                                
kafka consumer防止数据丢失
                                    kane_xie
kafkaoffset commit
                                    
kafka最初是被LinkedIn设计用来处理log的分布式消息系统，因此它的着眼点不在数据的安全性（log偶尔丢几条无所谓），换句话说kafka并不能完全保证数据不丢失。 
  
尽管kafka官网声称能够保证at-least-once，但如果consumer进程数小于partition_num，这个结论不一定成立。 
  
考虑这样一个case，partiton_num=2
                                
                                
@Repository、@Service、@Controller 和 @Component
                                    mhtbbx
DAOspringbeanprototype
                                    
@Repository、@Service、@Controller 和 @Component 将类标识为Bean 
Spring 自 2.0 版本开始，陆续引入了一些注解用于简化 Spring 的开发。@Repository注解便属于最先引入的一批，它用于将数据访问层 (DAO 层 ) 的类标识为 Spring Bean。具体只需将该注解标注在 DAO类上即可。同时，为了让 Spring 能够扫描类
                                
                                
java 多线程高并发读写控制 误区
                                    qifeifei
java thread
                                    
先看一下下面的错误代码，对写加了synchronized控制，保证了写的安全，但是问题在哪里呢？ 
public class testTh7 {
	private String data;
	public String read(){
		System.out.println(Thread.currentThread().getName() + "read data " 
                                
                                
mongodb replica set(副本集)设置步骤
                                    tcrct
javamongodb
                                    
网上已经有一大堆的设置步骤的了，根据我遇到的问题，整理一下，如下： 
 
首先先去下载一个mongodb最新版，目前最新版应该是2.6 
 

cd /usr/local/bin
wget http://fastdl.mongodb.org/linux/mongodb-linux-x86_64-2.6.0.tgz
tar -zxvf  mongodb-linux-x86_64-2.6.0.t
                                
                                
rust学习笔记
                                    wudixiaotie
学习笔记
                                    
1.rust里绑定变量是let，默认绑定了的变量是不可更改的，所以如果想让变量可变就要加上mut。 
let x = 1; let mut y = 2; 
2.match 相当于erlang中的case，但是case的每一项后都是分号，但是rust的match却是逗号。 
3.match 的每一项最后都要加逗号，但是最后一项不加也不会报错，所有结尾加逗号的用法都是类似。 
4.每个语句结尾都要加分
                                
                
            
        
    


    

        

            按字母分类：
            ABCDEFGHIJKLMNOPQRSTUVWXYZ其他
        
    


    

        

            首页 -
            关于我们 -
            站内搜索 -
            Sitemap -
            侵权投诉
        
        
版权所有 IT知识库 CopyRight © 2000-2050 E-COM-NET.COM , All Rights Reserved.