vue3后台管理系统

项目创建及代码规范化开发

vue脚手架创建项目

安装vue脚手架

npm install-g @vue/cli
npm update -g @vue/cli

终端输入vue create 项目名称 即可进入模板选择
//利用vue-cli创建项目
进入模板选择

Vue CLI v5.0.8
? Please pick a preset:
  Default ([Vue 3] babel, eslint)
  Default ([Vue 2] babel, eslint)

> Manually select features //选择手动配置

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and
<enter> to proceed)
>(*) Babel //使用babel
 ( ) TypeScript //不使用ts
 ( ) Progressive Web App (PWA) Support //不适用PWA
 (*) Router //添加vue-router
 (*) Vuex //添加vuex
 (*) CSS Pre-processors //使用css预处理器
 (*) Linter / Formatter //使用代码格式化
 ( ) Unit Testing //不配置测试
 ( ) E2E Testing //不配置测试

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with (Use arrow keys)
> 3.x //选择vue3版本
  2.x

这里是引用

> 这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) n //不使用history模式的路由

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass) //使用基于dart-sass的scss预处理器
  Less
  Stylus

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config:
  ESLint with error prevention only
  ESLint + Airbnb config
> ESLint + Standard config //使用ESLint标准化代码方案
  ESLint + Prettier

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to
proceed)
 (*) Lint on save 
>(*) Lint and fix on commit //保存时和提交时都进行lint

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files //单独的配置文件
  In package.json

这里是引用

Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS (with dart-sass)
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save, Lint and fix on commit
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? (y/N) n //不储存预设

等待片刻之后，项目创建成功

 $ cd my-vue3-admin
 $ npm run serve

执行成功后，即可运行项目。

更新vue相关版本

vuex

npm install vuex@next --save

vue-router

npm install vue-router@4

执行

如果页面报错就根据需要更新对应eslint插件版本后再更新vue版本

npm i eslint-plugin-vue@8.7.1   eslint-plugin-vue@7.20.0

在这里插入图片描述

在更新对应vue版本

npm i vue@3.2.8 vue-router@4 vuex@next

升级后，查看packge.json得到的版本应为：

 "vue": "^3.2.8",
 "vue-router": "^4.2.5",
 "vuex": "^4.0.2"

标准化开发规范

为什么需要标准化变成规范

有的地方有空格进行分割，有的地方却没有

有的地方是单引号，有的地方却是双引号

有的地方有分号，有的地方没有分号

规范分类：

  1. 编码规范
  2. git规范

ESlint

ESLint 是 2013年6月 创建的一个开源项目，它的目标非常简单，只有一个，那就是 提供一个插件化的 javascript 代码检测工具 ，说白了就是做 代码格式检测使用的

.eslintrc.js 文件，这个文件就是 eslint 的配置文件。

我们在创建项目时，就进行过这样的选择：

? Pick a linter / formatter config: 
  ESLint with error prevention only // 仅包含错误的 ESLint
  ESLint + Airbnb config // Airbnb 的 ESLint 延伸规则
  ESLint + Standard config // 标准的 ESLint 规则

我们当前选择了 标准的 ESLint 规则 ，那么接下来我们就在该规则之下，看一看 ESLint 它的一些配置都有什么？

打开项目中的 .eslintrc.js 文件

// ESLint 配置文件遵循 commonJS 的导出规则，所导出的对象就是 ESLint 的配置对象
// 文档：https://eslint.bootcss.com/docs/user-guide/configuring
module.exports = {
  // 表示当前目录即为根目录，ESLint 规则将被限制到该目录下
  root: true,
  // env 表示启用 ESLint 检测的环境
  env: {
    // 在 node 环境下启动 ESLint 检测
    node: true
  },
  // ESLint 中基础配置需要继承的配置
  extends: ["plugin:vue/vue3-essential", "@vue/standard"],
  // 解析器
  parserOptions: {
    parser: "babel-eslint"
  },
  // 需要修改的启用规则及其各自的错误级别
  /**
   * 错误级别分为三种：
   * "off" 或 0 - 关闭规则
   * "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
   * "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
   */
  rules: {
    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off"
  }
};

那么到这里咱们已经大致的了解了.eslintrc.js 文件，基于 ESLint 如果我们出现不符合规范的代码格式时，那么就会得到一个对应的错误。

比如：

我们可以把 Home.vue 中的 name 属性值，由单引号改为双引号

此时，只要我们一保存代码，那么就会得到一个对应的错误

在这里插入图片描述

这个错误表示：

  1. 此时我们触发了一个 《错误级别的错误》
  2. 触发该错误的位置是 在 Home.vue 的第 13 行 第九列 中
  3. 错误描述为：字符串必须使用单引号
  4. 错误规则为：quotes

那么想要解决这个错误，通常情况下我们有两种方式：

  1. 按照 ESLint 的要求修改代码
  2. 修改 ESLint 的验证规则

按照 ESLint 的要求修改代码：

在 Home.vue 的第 13 行中把双引号改为单引号

修改 ESLint 的验证规则：

  1. 在 .eslintrc.js 文件中，新增一条验证规则

    "quotes": "error" // 默认
"quotes": "warn" // 修改为警告
"quotes": "off" // 修改不校验

为了避免开发人员水平不齐以及时时刻刻 需要注意代码格式问题就需要搭配Prettier

遇到:类似错误可以重新安装后再重新运行试试
  0:0  error  Parsing error: Cannot find module 'babel-eslint'
  
  npm i babel-eslint

Prettier

prettier！（点击 这里 进入 prettier 中文官网！）

  1. 一个代码格式化工具
  2. 开箱即用
  3. 可以直接集成到 VSCode 之中
  4. 在保存时，让代码直接符合 ESLint 标准（需要通过一些简单配置）

ESLint与Prettier配合解决格式问题

  1. vscode安装prettier插件

在这里插入图片描述

  1. 在项目中新建 .prettierrc 文件，该文件为 perttier 默认配置文件

  2. 在该文件中写入如下配置：

{
  // 不尾随分号
  "semi": false,
  // 使用单引号
  "singleQuote": true,
  // 多行逗号分割的语法中，最后一行不加逗号
  "trailingComma": "none"
}
  1. 打开 VSCode 《设置面板》

在这里插入图片描述

  1. 在设置中，搜索 save ，勾选 Format On Save

在这里插入图片描述

但是！ 只做到这样还不够！

  1. VSCode 而言，默认一个 tab 等于 4 个空格，而 ESLint 希望一个 tab 为两个空格

  2. 如果大家的 VSCode 安装了多个代码格式化工具的化

  3. ESLint 和 prettier 之间的冲突问题

我们尝试在 Home.vue 中写入一个 created 方法，写入完成之后，打开我们的控制台我们会发现，此时代码抛出了一个 ESLint 的错误

在这里插入图片描述

这个错误的意思是说：created 这个方法名和后面的小括号之间，应该有一个空格！

但是当加入了这个空格之后，只要一保存代码，就会发现 prettier 会自动去除掉这个空格。

那么此时的这个问题就是 prettier 和 ESLint 的冲突问题。

针对于这个问题想要解决也非常简单：

  1. 打开 .eslintrc.js 配置文件

  2. 在 rules 规则下，新增一条规则

    'space-before-function-paren': 'off'

  3. 该规则表示关闭《方法名后增加空格》的规则

  4. 重启项目

约定式提交规范（git提交规范）

在现在的项目开发中，通常情况下，都会通过 git 来管理项目。只要通过 git 来管理项目，那么就必然会遇到使用 git 提交代码的场景

当执行 git commit -m "描述信息" 的时候，知道此时必须添加一个描述信息。但是不同的人去填写描述信息的时候，都会根据自己的理解来进行描述造成混乱。

git提交规范

约定式提交规范要求如下：

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

--------  翻译 -------------
    
<类型>[可选 范围]: <描述>

[可选 正文]

[可选 脚注]

其中 <type> 类型，必须是一个可选的值，比如：

  1. 新功能：feat
  2. 修复：fix
  3. 文档变更：docs
  4. …

Commitizen规范化提交代码

Commitizen：是一个命令行提示工具，它主要用于帮助我们更快地写出规范的commit message
Commitlint：用于校验填写的commit message是否符合设定的规范
Husky：是一个git hook工具，用于在提交过程中的某个特定时刻触发commitlint
————————————————

commitizen 仓库名为 cz-cli ，它提供了一个 git cz 的指令用于代替 git commit，简单一句话介绍它：

当你使用 commitizen 进行代码提交（git commit）时，commitizen 会提交你在提交时填写所有必需的提交字段！

安装流程

  1. 全局安装Commitizen

    npm install -g commitizen

  2. 全局安装Commitizen的适配器，一般是cz-conventional-changelog。

    npm install -g cz-conventional-changelog

    适配器的作用是按照某个指定的规范帮助我们生成commit message。cz-conventional-changelog 预设的是Angular团队规范。你也可以选择其他的适配器来切换不同的规范，甚至自定义一个适配器。

    如果你是mac用户，请运行下面这条命令，它会在你的home目录下，创建一个.czrc文件。路径指向刚才全局安装的适配器。

    echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

    如果你是windows用户，请把下面这条命令中的C:\Users\12105更换成你自己电脑上的\Users\username目录再运行。这条命令的本质其实就是在Users\username目录下创建一个内容为{ “path”: “cz-conventional-changelog” }的.czrc文件。

    echo { "path": "cz-conventional-changelog" } > C:\Users\username\.czrc

    至此，全局安装Commitizen完成。在任何一个git仓库中运行git cz，就可以通过Commitizen来填写commit message完成提交。

  3. 安装并配置 cz-customizable 插件

    1. 使用 npm 下载 cz-customizable

      npm i cz-customizable --save-dev

    2. 添加以下配置到 package.json 中

      ...
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

  4. 项目根目录下创建 .cz-config.js 自定义提示文件

    module.exports = {
  // 可选类型
  types: [
    { value: 'feat', name: 'feat:     新功能' },
    { value: 'fix', name: 'fix:      修复' },
    { value: 'docs', name: 'docs:     文档变更' },
    { value: 'style', name: 'style:    代码格式(不影响代码运行的变动)' },
    {
      value: 'refactor',
      name: 'refactor: 重构(既不是增加feature，也不是修复bug)'
    },
    { value: 'perf', name: 'perf:     性能优化' },
    { value: 'test', name: 'test:     增加测试' },
    { value: 'chore', name: 'chore:    构建过程或辅助工具的变动' },
    { value: 'revert', name: 'revert:   回退' },
    { value: 'build', name: 'build:    打包' }
  ],
  // 消息步骤
  messages: {
    type: '请选择提交类型:',
    customScope: '请输入修改范围(可选):',
    subject: '请简要描述提交(必填):',
    body: '请输入详细描述(可选):',
    footer: '请输入要关闭的issue(可选):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)'
  },
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  // subject文字长度默认是72
  subjectLimit: 72
}

  5. 使用 git cz 代替 git commit
    使用 git cz 代替 git commit，即可看到提示内容

Git Hooks

为了避免开发人员忘记使用git cz提交

我们希望：

当《提交描述信息》不符合 约定式提交规范 的时候，阻止当前的提交，并抛出对应的错误提示

了解一个概念，叫做 Git hooks（git 钩子 || git 回调方法）

也就是：git 在执行某个事件之前或之后进行一些其他额外的操作

而我们所期望的 阻止不合规的提交消息，那么就需要使用到 hooks 的钩子函数。

整理出来的所有的 hooks ，其中加粗的是常用到的 hooks：

Git Hook调用时机说明
pre-applypatchgit am执行前
applypatch-msggit am执行前
post-applypatchgit am执行后不影响git am的结果
pre-commitgit commit执行前可以用git commit --no-verify绕过
commit-msggit commit执行前可以用git commit --no-verify绕过
post-commitgit commit执行后不影响git commit的结果
pre-merge-commitgit merge执行前可以用git merge --no-verify绕过。
prepare-commit-msggit commit执行后，编辑器打开之前
pre-rebasegit rebase执行前
post-checkoutgit checkout或git switch执行后如果不使用--no-checkout参数，则在git clone之后也会执行。
post-mergegit commit执行后在执行git pull时也会被调用
pre-pushgit push执行前
pre-receivegit-receive-pack执行前
update
post-receivegit-receive-pack执行后不影响git-receive-pack的结果
post-update当 git-receive-pack对 git push 作出反应并更新仓库中的引用时
push-to-checkout当``git-receive-pack对git push做出反应并更新仓库中的引用时，以及当推送试图更新当前被签出的分支且receive.denyCurrentBranch配置被设置为updateInstead`时
pre-auto-gcgit gc --auto执行前
post-rewrite执行git commit --amend或git rebase时
sendemail-validategit send-email执行前
fsmonitor-watchman配置core.fsmonitor被设置为.git/hooks/fsmonitor-watchman或.git/hooks/fsmonitor-watchmanv2时
p4-pre-submitgit-p4 submit执行前可以用git-p4 submit --no-verify绕过
p4-prepare-changelistgit-p4 submit执行后，编辑器启动前可以用git-p4 submit --no-verify绕过
p4-changelistgit-p4 submit执行并编辑完changelist message后可以用git-p4 submit --no-verify绕过
p4-post-changelistgit-p4 submit执行后
post-index-change索引被写入到read-cache.c do_write_locked_index后

PS：详细的 HOOKS介绍 可点击这里查看

整体的 hooks 非常多，当时我们其中用的比较多的其实只有两个：

Git Hook调用时机说明
pre-commitgit commit执行前
它不接受任何参数，并且在获取提交日志消息并进行提交之前被调用。脚本git commit以非零状态退出会导致命令在创建提交之前中止。		可以用git commit --no-verify绕过
commit-msggit commit执行前
可用于将消息规范化为某种项目标准格式。
还可用于在检查消息文件后拒绝提交。		可以用git commit --no-verify绕过

简单来说这两个钩子：

  1. commit-msg：可以用来规范化标准格式，并且可以按需指定是否要拒绝本次提交
  2. pre-commit：会在提交前被调用，并且可以按需指定是否要拒绝本次提交

接下来要做的关键，就在这两个钩子上面。

使用 husky + commitlint 检查提交描述是否符合规范要求

husky

首先，在项目中安装husky：

npm install husky --save-dev

然后，启用git hooks：， 生成 .husky 文件夹 在这里插入图片描述

npx husky install

为了以后能在npm install之后自动地启用git hooks，我们可以在package.json中添加以下配置：（prepare脚本会在npm install之后自动执行，它是npm的一个生命周期脚本）

{
  ...
  "scripts": {
    "prepare": "husky install"
  }
}

或者，运行下面这条命令。注意：该命令要求npm版本在7及以上。

npm set-script prepare "husky install"
commitlint

首先，在项目中安装==@commitlint/cli和@commitlint/config-conventional==。

npm install --save-dev @commitlint/config-conventional @commitlint/cli

@commitlint/config-conventional，它配置了Commitlint使用的校验规则，要求commit message符合Angular团队规范。当然，也可以通过安装其他的配置包来切换不同的规范。

然后，在项目目录下添加commitlint.config.js配置文件。

echo module.exports = {extends: ['@commitlint/config-conventional']} > commitlint.config.js

最后，添加commit-msg hook配置，用于在commit-msg中校验commit message。commit-msg是一个git hook，它会在提交时被触发。

.\node_modules\.bin\husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

在这里插入图片描述

或：

npx husky add .husky/commit-msg 'npx --no commitlint --edit "$1"'

现在，你就可以通过git cz来代替git commit，借助Commitizen的提交完成提交。比如像这样：

  1. 打开 commitlint.config.js ， 增加配置项（ config-conventional 默认配置点击可查看 ）：

    module.exports = {
  // 继承的规则
  extends: ['@commitlint/config-conventional'],
  // 定义规则类型
  rules: {
    // type 类型定义，表示 git 提交的 type 必须在以下类型范围内
    'type-enum': [
      2,
      'always',
      [
        'feat', // 新功能 feature
        'fix', // 修复 bug
        'docs', // 文档注释
        'style', // 代码格式(不影响代码运行的变动)
        'refactor', // 重构(既不增加新功能，也不是修复bug)
        'perf', // 性能优化
        'test', // 增加测试
        'chore', // 构建过程或辅助工具的变动
        'revert', // 回退
        'build' // 打包
      ]
    ],
    // subject 大小写不做校验
    'subject-case': [0]
  }
}

注意：确保保存为 UTF-8 的编码格式，否则可能会出现错误

最后，添加commit-msg hook配置，用于在commit-msg中校验commit message。commit-msg是一个git hook，它会在提交时被触发。

.\node_modules\.bin\husky add .husky/commit-msg "npx --no -- commitlint --edit $1"

或：

npx husky add .husky/commit-msg 'npx --no commitlint --edit "$1"'

现在，就可以通过git cz来代替git commit，借助Commitizen的提交完成提交。已经可以处理好了 强制规范化的提交要求，到现在 不符合规范的提交信息，将不可在被提交！

pre-commit 检测提交时代码规范

在 ESLint 与 Prettier 配合解决代码格式问题 中了解了如何处理 本地！代码格式问题。

但是这样的一个格式处理问题，他只能够在本地进行处理，并且我们还需要 手动在 VSCode 中配置自动保存 才可以。那么这样就会存在一个问题，要是有人忘记配置这个东西了怎么办呢？他把代码写的乱七八糟的直接就提交了怎么办呢？

所以我们就需要有一种方式来规避这种风险。

那么想要完成这么一个操作就需要使用 husky 配合 eslint 才可以实现。

我们期望通过 husky 监测 pre-commit 钩子，在该钩子下执行 npx eslint --ext .js,.vue src 指令来去进行相关检测：

  1. 执行 npx husky add .husky/pre-commit "npx eslint --ext .js,.vue src" 添加 commit 时的 hook （npx eslint --ext .js,.vue src 会在执行到该 hook 时运行）

  2. 该操作会生成对应文件 pre-commit：
    在这里插入图片描述

  3. 关闭 VSCode 的自动保存操作

  4. 修改一处代码，使其不符合 ESLint 校验规则

  5. 执行 提交操作 会发现，抛出一系列的错误，代码无法提交

    PS E:\StudySpace\my-vue3-admin\src\views\HomeView.vue
  18:24  error  Extra semicolon  semi
  19:23  error  Extra semicolon  semi

✖ 2 problems (2 errors, 0 warnings)
  2 errors and 0 warnings potentially fixable with the `--fix` option.

husky - pre-commit hook exited with code 1 (error)

  6. 想要提交代码，必须处理完成所有的错误信息

lint-staged 自动修复格式错误

通过 pre-commit 处理了 检测代码的提交规范问题，当我们进行代码提交时，会检测所有的代码格式规范 。

但是这样会存在两个问题：

  1. 我们只修改了个别的文件，没有必要检测所有的文件代码格式
  2. 它只能给我们提示出对应的错误，我们还需要手动的进行代码修改

我们就需要处理这两个问题

那么想要处理这两个问题，就需要使用另外一个插件 lint-staged ！

lint-staged 可以让你当前的代码检查 只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

lint-staged 无需单独安装，我们生成项目时，vue-cli 已经帮助我们安装过了，所以我们直接使用就可以了

  1. 修改 package.json 配置

    "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix",
      "git add"
    ]
  }

  2. 如上配置，每次它只会在你本地 commit 之前，校验你提交的内容是否符合你本地配置的 eslint规则(这个见文档 ESLint )，校验会出现两种结果：

    1. 如果符合规则：则会提交成功。
    2. 如果不符合规则：它会自动执行 eslint --fix 尝试帮你自动修复，如果修复成功则会帮你把修复好的代码提交，如果失败，则会提示你错误，让你修好这个错误之后才能允许你提交代码。

  3. 修改 .husky/pre-commit 文件

    #!/bin/sh
. "$(dirname "$0")/_/husky.sh"

npx lint-staged

  4. 再次执行提交代码

  5. 发现 暂存区中 不符合 ESlint 的内容，被自动修复

总结

本章中处理了 编程格式规范的问题，整个规范大体可以分为两大类：

  1. 代码格式规范
  2. git 提交规范

代码格式规范：

对于 代码格式规范 而言，通过 ESLint + Prettier + VSCode 配置 配合进行了处理。

最终达到了在保存代码时，自动规范化代码格式的目的。

git 提交规范：

对于 git 提交规范 而言使用了 husky 来监测 Git hooks 钩子，并且通过以下插件完成了对应的配置：

  1. 约定式提交规范
  2. commitizen：git 提交规范化工具
  3. commitlint：用于检查提交信息
  4. pre-commit： git hooks 钩子
  5. lint-staged：只检查本次修改更新的代码，并在出现错误的时候，自动修复并且推送

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/107757.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Centos安装RabbitMQ，JavaSpring发送RabbitMQ延迟延时消息，JavaSpring消费RabbitMQ消息

Centos安装RabbitMQ，JavaSpring发送RabbitMQ延迟延时消息，JavaSpring消费RabbitMQ消息

1&#xff0c;版本说明 erlang 和 rabbitmq 版本说明 https://www.rabbitmq.com/which-erlang.html 确认需要安装的mq版本以及对应的erlang版本。 2&#xff0c;下载安装文件 RabbitMQ下载地址&#xff1a; https://packagecloud.io/rabbitmq/rabbitmq-server Erlang下载地…
阅读更多...
exFAT文件系统的目录与文件存储

exFAT文件系统的目录与文件存储

目录与文件存储的差异 在exFAT文件系统中&#xff0c;目录和文件的存储方式是不同的。 目录和文件都是以簇&#xff08;Cluster&#xff09;为单位进行存储&#xff0c;但它们的数据结构和用途不同。 目录的存储&#xff1a;目录&#xff08;子目录&#xff09;是用于组织和管…
阅读更多...
Spring Boot进阶(93)：体验式教程：手把手教你整合Spring Boot和Zipkin

Spring Boot进阶(93)：体验式教程：手把手教你整合Spring Boot和Zipkin

&#x1f4e3;前言 分布式系统开发中&#xff0c;服务治理是一个比较重要的问题。为了更好地实现服务治理&#xff0c;需要解决服务跟踪问题&#xff0c;即如何对分布式系统中的服务进行监控和追踪。本文将介绍如何使用Zipkin进行服务跟踪&#xff0c;并结合Spring Boot进行整合…
阅读更多...
解决cloudflare pages部署静态页面发生404错误的问题

解决cloudflare pages部署静态页面发生404错误的问题

cloudflare pages是一个非常方便的部署静态页面的sass工具。 但是很多人部署上去以后&#xff0c;访问服务会报404错误。什么原因&#xff1f; 原因如下图所示&#xff1a; 注意这个Build output directory, 这个是部署的关键&#xff01; 这个Build output directory目录的…
阅读更多...
JVM性能优化 —— 类加载器,手动实现类的热加载

JVM性能优化 —— 类加载器,手动实现类的热加载

一、类加载的机制的层次结构 每个编写的”.java”拓展名类文件都存储着需要执行的程序逻辑&#xff0c;这些”.java”文件经过Java编译器编译成拓展名为”.class”的文件&#xff0c;”.class”文件中保存着Java代码经转换后的虚拟机指令&#xff0c;当需要使用某个类时&#…
阅读更多...
虹科 | 解决方案 | 汽车示波器 索赔管理方案

虹科 | 解决方案 | 汽车示波器 索赔管理方案

索赔管理 Pico汽车示波器应用于主机厂/供应商与服务店/4S店的协作&#xff0c;实现产品索赔工作的高效管理&#xff1b;同时收集的故障波形数据&#xff0c;便于日后的产品优化和改进 故障记录 在索赔申请过程中&#xff0c;Pico汽车示波器的数据记录功能可以用于捕捉故障时的…
阅读更多...
异步请求池——池式组件

异步请求池——池式组件

前言 本文详细介绍异步请求池的实现过程&#xff0c;并使用DNS服务来测试异步请求池的性能。            两个必须牢记心中的概念&#xff1a; 同步&#xff1a;检测IO 与 读写IO 在同一个流程里异步&#xff1a;检测IO 与 读写IO 不在同一个流程 同步请求 与 异步请求…
阅读更多...
聊聊“JVM 调优JVM 性能优化”是怎么个事？

聊聊“JVM 调优JVM 性能优化”是怎么个事？

所谓“调优”就是一个诊断和处理手段&#xff0c;最终的目标是让系统的处理能力&#xff0c;也就是“性能”达到最优化。 计算机系统中&#xff0c;性能相关的资源主要分为这几类&#xff1a; CPU&#xff1a;CPU 是系统最关键的计算资源&#xff0c;在单位时间内有限&#xf…
阅读更多...
机器学习之查准率、查全率与F1

机器学习之查准率、查全率与F1

文章目录 查准率&#xff08;Precision&#xff09;&#xff1a;查全率&#xff08;Recall&#xff09;&#xff1a;F1分数&#xff08;F1 Score&#xff09;&#xff1a;实例P-R曲线F1度量python实现 查准率&#xff08;Precision&#xff09;&#xff1a; 定义&#xff1a; …
阅读更多...
Unity中从3D模型资产中批量提取材质

Unity中从3D模型资产中批量提取材质

如何使用 只需在“项目”窗口中创建一个名为“编辑器”的文件夹&#xff0c;然后在其中添加此脚本即可。然后&#xff0c;打开Window-Batch Extract Materials&#xff0c;配置参数并点击“ Extract&#xff01; ”。 在Unity 2019.1上&#xff0c;可以将默认材质重映射条件配…
阅读更多...
RSA:基于小加密指数的攻击方式与思维技巧

RSA:基于小加密指数的攻击方式与思维技巧

目录 目录 目录 零、前言 一、小加密指数爆破 [FSCTF]RSA签到 思路&#xff1a; 二、基于小加密指数的有限域开根 [NCTF 2019]easyRSA 思路&#xff1a; 三、基于小加密指数的CRT [0CTF 2016] rsa 思路&#xff1a; 零、前言 最近&#xff0c;发现自己做题思路比较…
阅读更多...
SpringCore完整学习教程5，入门级别

SpringCore完整学习教程5，入门级别

本章从第6章开始 6. JSON Spring Boot提供了三个JSON映射库的集成: Gson Jackson JSON-B Jackson是首选的和默认的库。 6.1. Jackson 为Jackson提供了自动配置&#xff0c;Jackson是spring-boot-starter-json的一部分。当Jackson在类路径上时&#xff0c;将自动配置Obj…
阅读更多...
Java 将数据导出到Excel并发送到在线文档

Java 将数据导出到Excel并发送到在线文档

一、需求 现将列表数据&#xff0c;导出到excel,并将文件发送到在线文档&#xff0c;摒弃了以往的直接在前端下载的老旧模式。 二、pom依赖 <!-- redission --><dependency><groupId>org.redisson</groupId><artifactId>redisson-spring-boot-…
阅读更多...
UE5 C++自定义Http节点获得Header数据

UE5 C++自定义Http节点获得Header数据

一、新建C文件 选择All Classes&#xff0c;选择父类BlueprintFunctionLibrary&#xff0c;命名为SendHttpRequest。 添加Http支持 代理回调的参数使用DECLARE_DYNAMIC_DELEGATE_TwoParam定义&#xff0c;第一参数是代理类型&#xff0c;后面是参数1类型&#xff0c;参数1&…
阅读更多...
APP自动化测试 ---- Appium介绍及运行原理

APP自动化测试 ---- Appium介绍及运行原理

在面试APP自动化时&#xff0c;有的面试官可能会问Appium的运行原理&#xff0c;以下介绍Appium运行原理。 一、Appium介绍 1.Appium概念 Appium是一个开源测试自动化框架&#xff0c;可用于原生&#xff0c;混合和移动Web应用程序测试。它使用WebDriver协议驱动IOS&#xf…
阅读更多...
33:深入浅出x86中断机制

33:深入浅出x86中断机制

背景 我们知道使用0x10号中断&#xff0c;可以在屏幕上打印一个字符。 问题 系统中的 中断 究竟是什么&#xff1f; 生活中的例子 来看一个生活中例子&#xff1a; 小狄的工作方式 在处理紧急事务的时候&#xff0c;不回应同事的技术求助。老板的召唤必须回应&#xff0c;…
阅读更多...
C/C++面试常见问题——const关键字的作用和用法

C/C++面试常见问题——const关键字的作用和用法

首先我们需要一下const关键字的定义&#xff0c;const名叫常量限定符&#xff0c;当const修饰变量时&#xff0c;就是在告诉编译器该变量只可访问不可修改&#xff0c;而编译器对于被const修饰的变量有一个优化&#xff0c;编译器不会专门为其开辟空间&#xff0c;而是将变量名…
阅读更多...
linux入门---多线程的控制

linux入门---多线程的控制

目录标题 线程库pthread_create如何一次性创建多个线程线程的终止线程的等待线程取消分离线程如何看待其他语言支持的多线程线程id的本质线程的局部存储线程的封装 线程库 要想控制线程就得使用原生线程库也可以将其称为pthread库&#xff0c;这个库是遵守posix标准的&#xf…
阅读更多...
【AD9361 数字接口CMOS LVDSSPI】B 并行数据之CMOS 续

【AD9361 数字接口CMOS LVDSSPI】B 并行数据之CMOS 续

续【AD9361 数字接口CMOS &LVDS&SPI】B 并行数据之CMOS 数据总线空闲和周转周期 &#xff08;CMOS&#xff09; P0_D[11&#xff1a;0]和P1_D[11&#xff1a;0]总线信号通常由BBP或AD9361有源驱动。在任何空闲期间&#xff0c;两个组件都会忽略数据总线值。但是&…
阅读更多...
【Linux】权限完结

【Linux】权限完结

个人主页点击直达&#xff1a;小白不是程序媛 系列专栏&#xff1a;Linux被操作记 目录 前言 chown指令 chgrp指令 文件类型 file指令 目录的权限 粘滞位 umask指令 权限总结 前言 上篇文章我们说到对于一个文件所属者和所属组都是同一个人时&#xff0c;使用所属者身…
阅读更多...
最新文章

Copyright @ 2022~2023