Node.js入门与 Webpack模块打包工具

news2025/1/11 10:00:27

目录

Node.js入门

fs模块-读写文件

path模块-路径处理 

压缩前端html

认识URL中的端口号

http模块-创建Web服务

体验 Web 服务除了接口数据以外，还能返回网页资源等 

Node.js模块化 

ECMAScript标准-默认导出和导入

ECMAScript标准-命名导出和导入 

包的概念

npm软件包管理器

npm安装所有依赖

 npm全局软件包-nodemon

Node.js概念和常用命令总结 

 Webpack模块打包工具

Webpack 修改入口和出口

 案例-用户登录-长度判断 Webpack 自动生成 html 文件

Webpack-打包 css 代码

优化-提取 css 代码

优化css压缩过程

Webpack-打包 less 代码

Webpack-打包图片

案例-用户登录-引入axios 包

Webpack 搭建开发环境

Webpack 打包模式

Webpack 打包模式的应用

Webpack 前端注入环境变量

Webpack 开发环境调错 source map

Webpack 设置解析别名路径

 优化-CDN使用

Webpack 多页面打包 

优化-分割公共代码

Node.js入门

  官方下载地址：https://nodejs.org/zh-cn/

配置环境变量

Node.js 是一个独立的 JavaScript 运行环境，能独立执行 JS 代码

Node.js 有什么用？

  • 编写后端程序，提供数据和网页资源，还可以作为前端工程化的工具，翻译压缩整合代码等，提高开发效率

Node.js 为何能执行 JS 代码？

  • 基于 Chrome 的 V8 引擎封装

Node.js 与浏览器环境的 JS 最大区别？

  • Node.js 环境中没有 BOM 和 DOM，但是也用 JS 语法

Node.js 如何执行代码？

  • 在 VSCode 终端中输入：node xxx.js 回车即可执行（注意路径）

fs模块-读写文件

  1. 模块：类似插件，封装了方法和属性供我们使用

  2. fs 模块：封装了与本机文件系统进行交互的，方法和属性

  3. fs 模块使用语法如下：

    • 加载 fs 模块，得到 fs 对象

      const fs = require('fs')

    • 写入文件内容语法：

      fs.writeFile('文件路径', '写入内容', err => {
  // 写入后的回调函数
})

    • 读取文件内容的语法：

      fs.readFile('文件路径', (err, data) => {
  // 读取后的回调函数
  // data 是文件内容的 Buffer 数据流
})

path模块-路径处理 

path.join() 方法有什么用？

  • 按照所在本机系统的分隔符作为定界符来链接你传入的路径

__dirname 模块内置变量的值是

  • 动态获取当前文件所在文件夹的绝对路径

压缩前端html

  1. 前端工程化：前端代码压缩，整合，转译，测试，自动部署等等工具的集成统称，为了提高前端开发项目的效率

认识URL中的端口号

  1. URL 是统一资源定位符，简称网址，用于访问网络上的资源
  2. 端口号的作用：标记服务器里对应的服务程序，值为（0-65535 之间的任意整数）
  3. 注意：http 协议，默认访问的是 80 端口
  4. Web服务：一个程序，用于提供网上信息浏览功能
  5. 注意：0-1023 和一些特定的端口号被占用，我们自己编写服务程序请避开使用

http模块-创建Web服务

基于 Node.js 环境，使用内置 http 模块，创建 Web 服务程序

  1. 步骤：

    1. 引入 http 模块，创建 Web 服务对象
    2. 监听 request 请求事件，对本次请求，做一些响应处理
    3. 启动 Web 服务监听对应端口号
    4. 运行本服务在终端进程中，用浏览器发起请求
  2. // 1.1 加载 http 模块，创建 Web 服务对象
const http = require('http')
const server = http.createServer()
// 1.2 监听 request 请求事件，设置响应头和响应体
server.on('request', (req, res) => {
  // 设置响应头-内容类型-普通文本以及中文编码格式
  res.setHeader('Content-Type', 'text/plain;charset=utf-8')
  // 设置响应体内容，结束本次请求与响应
  res.end('欢迎使用 Node.js 和 http 模块创建的 Web 服务')
})
// 1.3 配置端口号并启动 Web 服务
server.listen(3000, () => {
  console.log('Web 服务启动成功了')
})

 

体验 Web 服务除了接口数据以外，还能返回网页资源等 

  1. 步骤：

    1. 基于 http 模块，创建 Web 服务
    2. 使用 req.url 获取请求资源路径为 /index.html 的时候，读取 index.html 文件内容字符串返回给请求方
    3. 其他路径，暂时返回不存在的提示
    4. 运行 Web 服务，用浏览器发起请求
  2. const fs = require('fs')
const path = require('path')
// 1. 基于 http 模块，创建 Web 服务
const http = require('http')
const server = http.createServer()
server.on('request', (req, res) => {
  // 2. 使用 req.url 获取请求资源路径，并读取 index.html 里字符串内容返回给请求方
  if (req.url === '/index.html') {
    fs.readFile(path.join(__dirname, 'dist/index.html'), (err, data) => {
      res.setHeader('Content-Type', 'text/html;charset=utf-8')
      res.end(data.toString())
    })
  } else {
    // 3. 其他路径，暂时返回不存在提示
    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    res.end('你要访问的资源路径不存在')
  }
})
server.listen(8080, () => {
  console.log('Web 服务启动了')
})

Node.js模块化 

Node.js 中什么是模块化?

  • 每个文件都是独立的模块

模块之间

  • 使用特定语法，导出和导入使用

CommonJS 标准规定如何导出和导入模块?

  • 导出：module.exports = {},导入：require('模块名或路径')

模块名/路径如何选择?

  • 内置模块：写名字。例如：fs，path，http等。自定义模块：写模块文件路径，例如：./utils.js

ECMAScript标准-默认导出和导入

  1. 导出语法：

    export default {
  对外属性名: 模块内私有变量
}

  2. 导入语法：

    import 变量名 from '模块名或路径'

  1. 注意：Node.js 默认只支持 CommonJS 标准语法，如果想要在当前项目环境下使用 ECMAScript 标准语法，请新建 package.json 文件设置 type: 'module' 来进行设置

    { “type”: "module" }

 

ECMAScript标准-命名导出和导入 

  1. 命名导出语法：

    export 修饰定义语句

  2. 命名导入语法：

    import { 同名变量 } from '模块名或路径'

  1. 与默认导出如何选择：

    • 按需加载，使用命名导出和导入
    • 全部加载，使用默认导出和导入

 

包的概念

  1. 包：将模块，代码，其他资料整合成一个文件夹，这个文件夹就叫包

  2. 包分类：

    • 项目包：主要用于编写项目和业务逻辑
    • 软件包：封装工具和方法进行使用
  3. 包要求：根目录中，必须有 package.json 文件（记录包的清单信息）

  4. 包使用：在引入一个包文件夹到代码中，默认引入的是包文件节下的 index.js 模块文件里导出的对象，如果没有 index.js 文件，则会引入 package.json 里 main 属性指定的文件模块导出的对象

npm软件包管理器

npm 简介链接： 软件包管理器，用于下载和管理 Node.js 环境中的软件包

npm 使用步骤：

  1. 初始化清单文件： npm init -y （得到 package.json 文件，有则跳过此命令）

    注意 -y 就是所有选项用默认值，所在文件夹不要有中文/特殊符号，建议英文和数字组成，因为 npm 包名限制建议用英文和数字或者下划线中划线

  2. 下载软件包：npm i 软件包名称

  3. 使用软件包


npm安装所有依赖

如何得到需要的所有依赖软件包呢？

直接在项目目录下，运行终端命令：npm i 即可安装 package.json 里记录的所有包和对应版本到本项目中的 node_modules

 

 npm全局软件包-nodemon

  1. 软件包区别：

    • 本地软件包：当前项目内使用，封装属性和方法，存在于 node_modules
    • 全局软件包：本机所有项目使用，封装命令和工具，存在于系统设置的位置

  2. nodemon 作用：替代 node 命令，检测代码更改，自动重启程序

  3. nodemon 使用：

    1. 安装：npm i nodemon -g （-g 代表安装到全局环境中）
    2. 运行：nodemon 待执行的目标 js 文件

Node.js概念和常用命令总结 

  1. Node.js 模块化：把每个文件当做一个模块，独立作用域，按需加载，使用特定标准语法导出和导入使用

    CommonJS 标准：一般应用在 Node.js 项目环境中

    ECMAScript 标准：一般应用在前端工程化项目中

  2. Node.js 包：把模块文件，代码文件，其他资料聚合成一个文件夹就是包

    项目包：编写项目需求和业务逻辑的文件夹

    软件包：封装工具和方法进行使用的文件夹（一般使用 npm 管理）

    • 本地软件包：作用在当前项目，封装的属性/方法，供项目调用编写业务需求
    • 全局软件包：作用在所有项目，一般封装的命令/工具，支撑项目运行

  3. Node.js 常用命令：

  4.  

 Webpack模块打包工具

webpack | webpack 中文文档 | webpack 中文网 (webpackjs.com)

Webpack 是一个静态模块打包工具，从入口构建依赖图，打包有关的模块，最后用于展示你的内容

  1. Webpack 的作用：把静态模块内容，压缩，这个和，转译等（前端工程化）

    • 把 less/sass 转成 css 代码
    • 把 ES6+ 降级成 ES5 等
    • 支持多种模块文件类型，多种模块标准语法

步骤：

  1. 新建项目文件夹 Webpack_study，初始化包环境，得到 package.json 文件

    npm init -y
  2. 新建 src 源代码文件夹（书写代码）

  3. 下载 webpack webpack-cli 到项目（版本独立）

    npm i webpack webpack-cli --save-dev

    注意：虽然 webpack 是全局软件包，封装的是命令工具，但是为了保证项目之间版本分别独立，所以这次比较特殊，下载到某个项目环境下，但是需要把 webpack 命令配置到 package.json 的 scripts 自定义命令，作为局部命令使用

     

  4. 项目中运行工具命令，采用自定义命令的方式（局部命令）

    npm run build

    npm run 自定义命令名字

    注意：实际上在终端运行的是 build 右侧的具体命名

  5. 自动产生 dist 分发文件夹（压缩和优化后，用于最终运行的代码）

Webpack 修改入口和出口

  1. Webpack 配置：影响 Webpack 打包过程

  2. 步骤：

    1. 项目根目录，新建 Webpack.config.js 配置文件

    2. 导出配置对象，配置入口，出口文件路径（别忘了修改磁盘文件夹和文件的名字）

      const path = require('path')

module.exports = {
//入口
  entry: path.resolve(__dirname, 'src/login/index.js'),
//出口
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './login/index.js'  
    clean: true // 生成打包后内容之前，清空输出目录
  }
}

    3. 重新打包

 案例-用户登录-长度判断 Webpack 自动生成 html 文件

步骤：

  1. 新建 public/login.html 准备网页模板

  2. 核心 JS 代码写在 src/login/index.js 文件

  3. Webpack 自动生成 html 文件步骤：

    1. 下载 html-webpack-plugin 本地软件包到项目中

      npm i html-webpack-plugin --save-dev

    2. 配置 webpack.config.js 让 Webpack 拥有插件功能

      // ...
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  // ...
// 插件
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/login.html', // 模板文件
      filename: './login/index.html' // 输出文件
    })
  ]
}

    3. 指定以 public/login.html 为模板复制到 dist/login/index.html，并自动引入其他打包后资源

  4. 运行自定义命令，让 Webpack 打包 JS 代码

Webpack-打包 css 代码

介绍需要的 2 个加载器来辅助 Webpack 才能打包 css 代码

  • 加载器 css-loader：解析 css 代码
  • 加载器 style-loader：把解析后的 css 代码插入到 DOM（style 标签之间）

步骤：

  1.  准备 css 文件引入到 src/login/index.js  
    import 'bootstrap/dist/css/bootstrap.min.css'
import './index.css'

  2. 下载 css-loader 和 style-loader 本地软件包

    npm i css-loader style-loader --save-dev

  3. 配置 webpack.config.js 让 Webpack 拥有该加载器功能

    // ...

module.exports = {
  // ...
// 加载器
  module: { 
    rules: [ // 规则列表
      {
        test: /\.css$/i, // 匹配 .css 结尾的文件
        use: ['style-loader', 'css-loader'], // 使用从后到前的加载器来解析 css 代码和插入到 DOM
      }
    ]
  }
};

  4. 打包后运行

优化-提取 css 代码

  1. 需要：mini-css-extract-plugin 插件来实现

  2. 注意：不能和 style-loader 一起使用

步骤：

  1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

    npm i --save-dev mini-css-extract-plugin

  2. 配置 webpack.config.js 让 Webpack 拥有该插件功能

    // ...
const MiniCssExtractPlugin = require("mini-css-extract-plugin")

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.css$/i,
        //不能和 style-loader 一起使用 
        // use: ['style-loader', 'css-loader']
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // ...
    new MiniCssExtractPlugin({
      filename: './[name]/index.css' //输出的地址
    })
  ]
};

  3. 打包

优化css压缩过程

把单独提取的 css 文件内代码压缩

需要：css-minimizer-webpack-plugin 插件来实现

步骤：

  1. 下载 mini-css-extract-plugin 插件软件包到本地项目中

    npm i css-minimizer-webpack-plugin --save-dev

  2. 配置 webpack.config.js 让 Webpack 拥有该插件功能

    // ...
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  // ...
  // 优化
  optimization: {
    // 最小化
    minimizer: [
      // 在 webpack@5 中，你可以使用 `...` 语法来扩展现有的 minimizer（即 
      // `terser-webpack-plugin`），将下一行取消注释（保证 JS 代码还能被压缩处理）
      `...`,
      new CssMinimizerPlugin(),
    ],
  }
};

  3. 打包

Webpack-打包 less 代码

 加载器 less-loader：把 less 代码编译为 css 代码，还需要依赖 less 软件包

步骤：

  1. 新建 login/index.less 文件，设置背景图样式

  2. less 样式引入到 src/login/index.js 中

  3. 下载 less 和 less-loader 本地软件包

    npm i less less-loader --save-dev

  4. 配置 webpack.config.js 让 Webpack 拥有功能

    // ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.less$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader", "less-loader"]
      }
    ]
  }
}

  5. 打包

Webpack-打包图片

资源模块：Webpack 内置了资源模块的打包，无需下载额外 loader

步骤：

  1. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

    占位符 【hash】对模块内容做算法计算，得到映射的数字字母组合的字符串

    占位符 【ext】使用当前模块原本的占位符，例如：.png / .jpg 等字符串

    占位符 【query】保留引入文件时代码中查询参数（只有 URL 下生效）

  2. 注意：判断临界值默认为 8KB

    大于 8KB 文件：发送一个单独的文件并导出 URL 地址

    小于 8KB 文件：导出一个 data URI（base64字符串）

  3. 在 src/login/index.js 中给 img 标签添加 logo 图片

  4. 配置 webpack.config.js 让 Webpack 拥有打包图片功能

    // ...

module.exports = {
  // ...
  module: {
    rules: [
      // ...
      {
        test: /\.(png|jpg|jpeg|gif)$/i,
        type: 'asset',
        generator: {
          filename: 'assets/[hash][ext][query]'
        }
      }
    ]
  }
}

  5. 打包

案例-用户登录-引入axios 包

步骤：

  1. 使用 npm 下载 axios

    npm i axios

  2. 准备并修改 utils 工具包源代码导出实现函数    import axios from 'axios'   导出：export default axios

  3. 引入到 src/login/index.js 中编写业务实现 导入

    import myAxios from '../utils/request.js'

  4. 打包

Webpack 搭建开发环境

步骤；

  1. 下载 webpack-dev-server 软件包到当前项目

    npm i webpack-dev-server --save-dev

  2. 配置自定义命令，并设置打包的模式为开发模式   

    // ...

module.exports = {
  // ...
  mode: 'development'
}

    "scripts": {
  // ...
  "dev": "webpack serve --mode=development"
},
  3.    package.josn    下加   
    "scripts": {
   // 自动打开浏览器
    
    "dev": " webpack serve --open"
  },

  4. 使用 npm run dev 来启动开发服务器

  5. // 注意1：webpack-dev-server 借助 http 模块创建 8080 默认 Web 服务

    // 注意2：默认以 public 文件夹作为服务器根目录

    // 注意3：webpack-dev-server 根据配置，打包相关代码在内存当中，以 output.path 的值作为服务器根目录（所以可以直接自己拼接访问 dist 目录下内容）

Webpack 打包模式

  1. 如何设置影响 Webpack呢？

    • 方式1：在 webpack.config.js 配置文件设置 mode 选项

      // ...

module.exports = {
  // ...
  mode: 'production'
}

    • 方式2：在 package.json 命令行设置 mode 参数

      "scripts": {
  "build": "webpack --mode=production",
  "dev": "webpack serve --mode=development"
},

  2. 注意：命令行设置的优先级高于配置文件中的，推荐用命令行设置

  3. 体验：在 build 命令后 修改 mode 的值，打包输出观察打包后的 js 文件内容

Webpack 打包模式的应用

步骤：

1.下载 cross-env 软件包到当前项目

npm i cross-env --save-dev

2.配置自定义命令，传入参数名和值（会绑定到 process.env 对象下）

 

3.在 webpack.config.js 区分不同环境使用不同配置

module: {
    rules: [
      {
        test: /\.css$/i,
        // use: ['style-loader', "css-loader"],
        use: [process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader, "css-loader"]
      },
      {
        test: /\.less$/i,
        use: [
          // compiles Less to CSS
          process.env.NODE_ENV === 'development' ? 'style-loader' : MiniCssExtractPlugin.loader,
          'css-loader',
          'less-loader',
        ],
      }
    ],
  },

Webpack 前端注入环境变量

需求：前端项目中，开发模式下打印语句生效，生产模式下打印语句失效

  1. 配置 webpack.config.js 中给前端注入环境变量

    // ...
const webpack = require('webpack')

module.exports = {
  // ...
  plugins: [
    // ...
    new webpack.DefinePlugin({
      // key 是注入到打包后的前端 JS 代码中作为全局变量
      // value 是变量对应的值（在 corss-env 注入在 node.js 中的环境变量字符串）
      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
    })
  ]
}

 index.js中

if (process.env.NODE_ENV === 'production') {
  console.log = function() {}
}
console.log('开发模式下显示，生产模式下失效')

 

Webpack 开发环境调错 source map

问题：代码被压缩和混淆，无法正确定位源代码位置（行数和列数）

  1. 设置：webpack.config.js 配置 devtool 选项

    // ...

module.exports = {
  // ...
  devtool: 'inline-source-map'
}




// 开发环境下使用 sourcemap 选项
if (process.env.NODE_ENV === 'development') {
  config.devtool = 'inline-source-map'
}

    inline-source-map 选项：把源码的位置信息一起打包在 JS 文件内

  2. 注意：source map 适用于开发环境，不要在生产环境使用（防止被轻易查看源码位置）


Webpack 设置解析别名路径

  1. 配置解析别名：在 webpack.config.js 中设置

    // ...

const config = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src')
    }
  }
}

  2. 引入目标模块写的路径就更简单了

    import { checkPhone, checkCode } from '@/utils/check.js'

 优化-CDN使用

 

步骤：

1.在 html 中引入第三方库的 CDN 地址并用模板语法判断

<% if(htmlWebpackPlugin.options.useCdn){ %>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
<% } %>

2.配置 webpack.config.js 中 externals 外部扩展选项（防止某些 import 的包被打包）

// 生产环境下使用相关配置
if (process.env.NODE_ENV === 'production') {
  // 外部扩展（让 webpack 防止 import 的包被打包进来）
  config.externals = {
    // key：import from 语句后面的字符串
    // value：留在原地的全局变量（最好和 cdn 在全局暴露的变量一致）
    'bootstrap/dist/css/bootstrap.min.css': 'bootstrap',
    'axios': 'axios'
  }
}

// ...
const config = {
  // ...
  plugins: [
    new HtmlWebpackPlugin({
      // ...
      // 自定义属性，在 html 模板中 <%=htmlWebpackPlugin.options.useCdn%> 访问使用
      useCdn: process.env.NODE_ENV === 'production'
    })
  ]
}

Webpack 多页面打包 

步骤：

  1. 准备源码（html，css，js）放入相应位置，并改用模块化语法导出

  2. 下载 form-serialize 包并导入到核心代码中使用

  3. 配置 webpack.config.js 多入口和多页面的设置

    // ...
const config = {
  entry: {
    '模块名1': path.resolve(__dirname, 'src/入口1.js'),
    '模块名2': path.resolve(__dirname, 'src/入口2.js'),
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: './[name]/index.js'  
  }
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
    new HtmlWebpackPlugin({
      template: './public/页面2.html', // 模板文件
      filename: './路径/index.html', // 输出文件
      chunks: ['模块名2']
    })
  ]
}

  4. 重新打包

优化-分割公共代码

步骤：

1.配置 webpack.config.js 的 splitChunks 分割功能

// ...
const config = {
  // ...
  optimization: {
    // ...
    splitChunks: {
      chunks: 'all', // 所有模块动态非动态移入的都分割分析
      cacheGroups: { // 分隔组
        commons: { // 抽取公共模块
          minSize: 0, // 抽取的chunk最小大小字节
          minChunks: 2, // 最小引用数
          reuseExistingChunk: true, // 当前 chunk 包含已从主 bundle 中拆分出的模块，则它将被重用
          name(module, chunks, cacheGroupKey) { // 分离出模块文件名
            const allChunksNames = chunks.map((item) => item.name).join('~') // 模块名1~模块名2
            return `./js/${allChunksNames}` // 输出到 dist 目录下位置
          }
        }
      }
    }

2.打包

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

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

攻防世界-Reverse-Game

攻防世界-Reverse-Game

题目描述&#xff1a;下载附件&#xff0c;得到一个exe程序&#xff0c;运行该程序&#xff0c;可以看到如下的界面 根据描述信息说明&#xff1a; a. 这是一个电路&#xff0c;有8个开关&#xff0c;只有8个开关全部闭合&#xff0c;才能够获取到flag&#xff1b; b. 其中n表…
阅读更多...
Unity shader - 纹理采样

Unity shader - 纹理采样

目录 1.什么是UV 2.凹凸纹理 3.渐变纹理映射 4.遮罩纹理 1.什么是UV 对于三维模型&#xff0c;有两个最重要的坐标系统&#xff0c;一是顶点的位置&#xff08;X&#xff0c;Y&#xff0c;Z&#xff09;坐标&#xff0c;另一个就是UV坐标。什么是UV&#xff1f;简单的…
阅读更多...
关于机器人精度的总结（重复精度和绝对精度区分）

关于机器人精度的总结（重复精度和绝对精度区分）

ABB系列某款机器人精度参数表 机械臂是工业生产中的重要设备,在焊接码垛 以及 非 接触测量等 领域中有 着重要应 用。然而由于机械臂本体制造中存在机械制造公差装配误差导致的运动学参数误差以及电机转角与关节转角间减速比误差等,导致机械臂存在重复性定位精度较高(0.05 mm …
阅读更多...
EMQ的介绍及整合SpringBoot的使用

EMQ的介绍及整合SpringBoot的使用

首先先了解一下底层的协议: 1. MQTT MQTT&#xff08;Message Queuing Telemetry Transport&#xff0c;消息队列遥测传输协议&#xff09;&#xff0c;是一种基于发布/订阅 &#xff08;publish/subscribe&#xff09;模式的"轻量级"通讯协议&#xff0c;该协议构建…
阅读更多...
python实现递归算法解决年龄问题

python实现递归算法解决年龄问题

一、问题描述 有5个人坐在一起&#xff0c;问第5个人多少岁&#xff0c;他说比第4个人大2岁。问第4个人多少岁&#xff0c;他说比第3个人大2岁。问第3人多少岁&#xff0c;他说比第2个人大2岁。问第2个人多少岁&#xff0c;他说比第1个人大2岁。最后问第1个人多少岁&#xff0…
阅读更多...
ALLEGRO之SHAPE

ALLEGRO之SHAPE

ALLEGRO中的SHAPE菜单对应AD中的Polygon Pour&#xff0c;即铺铜操作。 1. Polygon&#xff1a;铺铜&#xff0c;在Options选择对应子层&#xff08;例如Etch-Top&#xff09;&#xff0c;选择Dynamic copper&#xff08;动态铺铜&#xff0c;会自动避让过孔&#xff0c;Static…
阅读更多...
MIT 6.S081 教材第五章内容 -- 中断与设备驱动--上

MIT 6.S081 教材第五章内容 -- 中断与设备驱动--上

MIT 6.S081 教材第五章内容 -- 中断与设备驱动--上 引言真实操作系统内存使用情况(上一节回顾)中断和设备驱动Interrupt硬件部分设备驱动概述在XV6中设置中断UART驱动的top部分UART驱动的bottom部分Interrupt相关的并发UART读取键盘输入Interrupt的演进小结代码&#xff1a;控制…
阅读更多...
VanillaNet 原理与代码解读

VanillaNet 原理与代码解读

paper&#xff1a;VanillaNet: the Power of Minimalism in Deep Learning official implementation&#xff1a; GitHub - huawei-noah/VanillaNet 存在的问题 虽然复杂网络的性能很好&#xff0c;但它们日益增加的复杂性给部署带来了挑战。例如&#xff0c;ResNets中的sh…
阅读更多...
浏览器工作原理

浏览器工作原理

浏览器&#xff08;也称为网络浏览器或互联网浏览器&#xff09;是安装在我们设备上的软件应用程序&#xff0c;使我们能够访问万维网。在阅读这篇文字时&#xff0c;你实际上正在使用一个浏览器。 有许多浏览器正在被使用&#xff0c;截至2022年&#xff0c;使用最多的是&…
阅读更多...
为了找到好工作，花2个月时间整理了3.5W字的自动化测试面试题（答案+学习路线）！

为了找到好工作，花2个月时间整理了3.5W字的自动化测试面试题（答案+学习路线）！

从5月初开始找工作到现在&#xff0c;先后面试了阿里巴巴、字节跳动、网易、快手的测试开发岗。 大公司对于测试开发的要求相比来说高很多&#xff0c;要求掌握的知识点的广度和深度层次也比较高&#xff0c;遂整理了这两个月的面试题目文档供大家参考&#xff0c;同时也是为了…
阅读更多...
基于java+swing+mysql商城购物系统

基于java+swing+mysql商城购物系统

基于javaswingmysql商城购物系统 一、系统介绍二、功能展示1.项目骨架2.主界面3.用户登陆4.添加商品类别5、添加商品6、商品管理 四、其它1.其他系统实现五.获取源码 一、系统介绍 项目类型&#xff1a;Java SE项目 项目名称&#xff1a;商城购物系统 用户类型&#xff1a;双…
阅读更多...
【C++学习】线程库 | IO流 | 空间配置器

【C++学习】线程库 | IO流 | 空间配置器

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《C学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 一、线程库 在C11之前&#xff0c;涉及到多线程问题&#xff0c;都是和平台相关的&#xff0c;比如w…
阅读更多...
【Python爬虫开发基础⑥】计算机网络基础（Web和HTTP）

【Python爬虫开发基础⑥】计算机网络基础（Web和HTTP）

专栏&#xff1a;python网络爬虫从基础到实战 欢迎订阅&#xff01;近期还会不断更新~ 另外&#xff1a;如果想要看更多的计算机网络知识&#xff0c;可以关注我的专栏&#xff1a;计算机网络 往期推荐&#xff1a; 【Python爬虫开发基础①】Python基础&#xff08;变量及其命名…
阅读更多...
【数据结构】特殊矩阵的压缩存储

【数据结构】特殊矩阵的压缩存储

&#x1f387;【数据结构】特殊矩阵的压缩存储&#x1f387; &#x1f308; 自在飞花轻似梦,无边丝雨细如愁 &#x1f308; &#x1f31f; 正式开始学习数据结构啦~此专栏作为学习过程中的记录&#x1f31f; 文章目录 &#x1f387;【数据结构】特殊矩阵的压缩存储&#x1f38…
阅读更多...
C语言学习（二十六）---指针练习题（二）

C语言学习（二十六）---指针练习题（二）

在上节的内容中&#xff0c;我们进一步学习了有关指针的内容&#xff0c;并做了一些关于指针的题目&#xff0c;今天我们将继续练习一些指针的题目&#xff0c;以便大家更好的理解和掌握指针的知识&#xff0c;好了&#xff0c;话不多说&#xff0c;开整&#xff01;&#xff0…
阅读更多...
【c++11】 左值引用和右值引用

【c++11】 左值引用和右值引用

c11特性 右值引用左值引用和右值引用左值引用右值引用比较 右值引用的应用左值引用的短处右值引用解决问题移动构造 STL的改动move()函数结语 右值引用 c从出现就有着引用的语法&#xff0c;但是在c11后又新增了右值引用的新特性&#xff0c;以往所学的引用成了左值引用。非左…
阅读更多...
代码随想录算法训练营第四十二天| 背包问题

代码随想录算法训练营第四十二天| 背包问题

标准背包问题 有n件物品和一个最多能背重量为w 的背包。 第i件物品的重量是weight[i]&#xff0c;得到的价值是value[i] 。每件物品只能用一次&#xff0c;求解将哪些物品装入背包里物品价值总和最大。 举一个例子&#xff1a; 背包最大重量为4。 物品为&#xff1a; 重量价…
阅读更多...
5.2.3目录与文件之权限意义

5.2.3目录与文件之权限意义

现在我们知道了Linux系统内文件的三种身份&#xff08;拥有者、群组与其他人&#xff09;&#xff0c;知道每种身份都有三种权限&#xff08;rwx&#xff09;&#xff0c; 已知道能够使用chown, chgrp, chmod去修改这些权限与属性&#xff0c;当然&#xff0c;利用ls -l去观察文…
阅读更多...
《C++高级编程》读书笔记（十：揭秘继承技术）

《C++高级编程》读书笔记（十：揭秘继承技术）

1、参考引用 C高级编程&#xff08;第4版&#xff0c;C17标准&#xff09;马克葛瑞格尔 2、建议先看《21天学通C》 这本书入门&#xff0c;笔记链接如下 21天学通C读书笔记&#xff08;文章链接汇总&#xff09; 1. 使用继承构建类 1.1 扩展类 当使用 C 编写类定义时&#xf…
阅读更多...
WMS中Choreographer 配合 VSYNC 中断信号

WMS中Choreographer 配合 VSYNC 中断信号

WMS中Choreographer 配合 VSYNC 中断信号 1、了解SurfaceFlinger中VSYNC信号刷新2、Choreographer 舞蹈编导2.1 Choreographer初始化2.2 FrameHandler中处理任务2.3 FrameDisplayEventReceiver初始化3.4 简易流程图 3、ViewRootImpl中scheduleTraversals3.1 postCallback 通过n…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023