JavaScript 基础 - 第20天_Node.js入门

news2024/12/26 23:09:30

文章目录

  • Day01_Node.js入门
    • 提前安装软件
    • 目录
    • 学习目标
    • 01.什么是 Node.js
      • 目标
      • 讲解
      • 小结
    • 02.fs模块-读写文件
      • 目标
      • 讲解
      • 小结
    • 03.path模块-路径处理
      • 目标
      • 讲解
      • 小结
    • 04.案例-压缩前端html
      • 目标
      • 讲解
      • 小结
    • 05.案例-压缩前端JS
      • 目标
      • 讲解
      • 小结
    • 06.认识URL中的端口号
      • 目标
      • 讲解
      • 小结
    • 07.http模块-创建Web服务
      • 目标
      • 讲解
      • 小结
    • 08.Web服务-支持中文字符
      • 目标
      • 讲解
      • 小结
    • 09.案例-省份列表接口
      • 目标
      • 讲解
      • 小结
    • 10.案例-城市列表接口
      • 目标
      • 讲解
      • 小结
    • 11.案例-浏览时钟
      • 目标
      • 讲解
      • 小结
    • 今日重点(必须会)
    • 今日作业(必完成)
    • 参考文献

Day01_Node.js入门

提前安装软件

在配套的资料文件夹中,先安装好 Node.js 环境,上课可以节省时间

具体安装过程可以参考 PPT 和 配套视频!

目录

  • Node.js 安装与使用
  • fs 模块
  • path 模块
  • 案例 - 前端项目压缩
  • http 模块 - 创建 Web 服务
  • 案例 - 省份列表接口
  • 案例 - 浏览时钟

学习目标

  1. 掌握 Node.js 的作用和使用
  2. 体验前端工程化压缩整合
  3. 掌握端口号的作用
  4. 掌握 Web 服务的功能

01.什么是 Node.js

目标

什么是 Node.js,有什么用,为何能独立执行 JS 代码,演示安装和执行 JS 文件内代码

讲解

  1. Node.js 是一个独立的 JavaScript 运行环境,能独立执行 JS 代码,因为这个特点,它可以用来编写服务器后端的应用程序

  2. Node.js 作用除了编写后端应用程序,也可以对前端代码进行压缩,转译,整合等等,提高前端开发和运行效率

  3. Node.js 基于Chrome V8 引擎封装,独立执行 JS 代码,但是语法和浏览器环境的 V8 有所不同,没有 document 和 window 但是都支持 ECMAScript 标准的代码语法

  4. 想要得到 Node.js 需要把这个软件安装到电脑,在素材里有安装程序(window 和 mac 环境的)参考 PPT 默认下一步安装即可

  5. Node.js 没有图形化界面,需要使用 cmd 终端命令行(利用一些命令来操控电脑执行某些程序软件)输入,node -v 检查是否安装成功

    node -v
    
  6. 需求:新建 index.js 文件,编写打印代码和 for 循环打印 3 个 6

    /**
     * 目标:编写 js 代码,用 node 命令执行
     * 终端作用:敲击命令,调用对应程序执行
     * 终端打开:目标文件->右键->在集成终端中打开
     * 命令:node xxx.js (注意路径)
     */
    console.log('Hello, World')
    for (let i = 0; i < 3; i++) {
      console.log(6)
    }
    
  7. Node.js 执行目标 JS 文件,需要使用 node xxx.js 命令来执行(我们可以借助 VSCode 集成终端使用,好处:可以快速切换到目标 JS 文件所在终端目录,利用相对路径找到要执行的目标 JS 文件

    在这里插入图片描述

小结

  1. Node.js 有什么用?

    答案
    • 编写后端程序,提供数据和网页资源,还可以作为前端工程化的工具,翻译压缩整合代码等,提高开发效率
  2. Node.js 为何能执行 JS 代码?

    答案
    • 基于 Chrome 的 V8 引擎封装
  3. Node.js 与浏览器环境的 JS 最大区别?

    答案
    • Node.js 环境中没有 BOM 和 DOM,但是也用 JS 语法
  4. Node.js 如何执行代码?

    答案
    • 在 VSCode 终端中输入:node xxx.js 回车即可执行(注意路径)

02.fs模块-读写文件

目标

了解模块概念,使用 fs 模块封装的方法读写文件内容

讲解

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

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

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

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

      const fs = require('fs')
      
    • 写入文件内容语法:

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

      fs.readFile('文件路径', (err, data) => {
        // 读取后的回调函数
        // data 是文件内容的 Buffer 数据流
      })
      
  4. 需求:向 test.txt 文件写入内容并读取打印

    /**
     * 目标:使用 fs 模块,读写文件内容
     * 语法:
     * 1. 引入 fs 模块
     * 2. 调用 writeFile 写入内容
     * 3. 调用 readFile  读取内容
     */
    // 1. 引入 fs 模块
    const fs = require('fs')
    // 2. 调用 writeFile 写入内容
    // 注意:建议写入字符串内容,会覆盖目标文件所有内容
    fs.writeFile('./text.txt', '欢迎使用 fs 模块读写文件内容', err => {
      if (err) console.log(err)
      else console.log('写入成功')
    })
    // 3. 调用 readFile  读取内容
    fs.readFile('./text.txt', (err, data) => {
      if (err) console.log(err)
      else console.log(data.toString()) // 把 Buffer 数据流转成字符串类型
    })
    

小结

  1. 什么是模块?

    答案
    • 类似插件,封装了方法和属性
  2. fs 模块的作用?

    答案
    • 读写本机文件内容

03.path模块-路径处理

目标

使用 path 模块来得到绝对路径

讲解

  1. 为什么在 Node.js 待执行的 JS 代码中要用绝对路径:

    Node.js 执行 JS 代码时,代码中的路径都是以终端所在文件夹出发查找相对路径,而不是以我们认为的从代码本身出发,会遇到问题,所以在 Node.js 要执行的代码中,访问其他文件,建议使用绝对路径

  2. 新建 03 文件夹编写待执行的 JS 代码,访问外层相对路径下的文件,然后在最外层终端路径来执行目标文件,造成问题

    在这里插入图片描述

    在这里插入图片描述

  3. 问题原因:就是从代码文件夹出发,使用../text.txt解析路径,找不到目标文件,报错了!

  4. 解决方案:使用模块内置变量 __dirname配合 path.join() 来得到绝对路径使用

    const fs = require('fs')
    console.log(__dirname) // D:\备课代码\2_node_3天\Node_代码\Day01_Node.js入门\代码\03
    
    // 1. 加载 path 模块
    const path = require('path')
    // 2. 使用 path.join() 来拼接路径
    const pathStr = path.join(__dirname, '..', 'text.txt')
    console.log(pathStr)
    
    fs.readFile(pathStr, (err, data) => {
      if (err) console.log(err)
      else console.log(data.toString())
    })
    
  5. 再次执行查看问题就被修复了!以后在 Node.js 要执行的 JS 代码中访问其他文件的路径,都建议使用绝度路径

小结

  1. path.join() 方法有什么用?

    答案
    • 按照所在本机系统的分隔符作为定界符来链接你传入的路径
  2. __dirname 模块内置变量的值是多少?

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

04.案例-压缩前端html

目标

压缩前端代码,体验前端工程化的例子

讲解

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

  2. 需求:把准备好的 html 文件里的回车符(\r)和换行符(\n)去掉进行压缩,写入到新 html 中

  3. 步骤:

    1. 读取源 html 文件内容
    2. 正则替换字符串
    3. 写入到新的 html 文件中,并运行查看是否能正常打开网页
  4. 代码如下:

    /**
     * 目标一:压缩 html 里代码
     * 需求:把 public/index.html 里的,回车/换行符去掉,写入到 dist/index.html 中
     *  1.1 读取 public/index.html 内容
     *  1.2 使用正则替换内容字符串里的,回车符\r 换行符\n
     *  1.3 确认后,写入到 dist/index.html 内
     */
    const fs = require('fs')
    const path = require('path')
    // 1.1 读取 public/index.html 内容
    fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
      const htmlStr = data.toString()
      // 1.2 使用正则替换内容字符串里的,回车符\r 换行符\n
      const resultStr = htmlStr.replace(/[\r\n]/g, '')
      // 1.3 确认后,写入到 dist/index.html 内
      fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr, err => {
        if (err) console.log(err)
        else console.log('压缩成功')
      })
    })
    

小结

  1. 前端工程化的理解?

    答案
    • 对前端代码进行优化,集成各种提高前端开发效率的工具等

05.案例-压缩前端JS

目标

体验前端工程化,压缩,转译,整合代码

讲解

  1. 需求:把准备好的 JS 文件代码的回车符,换行符,打印语句去掉,并插入到之前 html 内容之后

  2. 步骤:

    1. 读取 js 文件内容
    2. 正则表达式替换回车符,换行符,打印语句为空字符串
    3. 拼接 html 代码和 js 代码,写入到新的 html 文件中
  3. 代码如下:

    /**
     * 目标二:压缩 js 里代码,并整合到 html 中一起运行
     *  2.1 读取 public/index.js 内容
     *  2.2 使用正则替换内容字符串里的,回车符\r 换行符\n 打印语句console.log('xxx');
     *  2.3 确认后,拼接 html 内容写入到 dist/index.html 内
     */
    const fs = require('fs')
    const path = require('path')
    fs.readFile(path.join(__dirname, 'public', 'index.html'), (err, data) => {
      const htmlStr = data.toString()
      const resultStr = htmlStr.replace(/[\r\n]/g, '')
    
      // 2.1 读取 public/index.js 内容
      fs.readFile(path.join(__dirname, 'public', 'index.js'), (err, data) => {
        const jsStr = data.toString()
        // 2.2 使用正则替换内容字符串里的,回车符\r 换行符\n 打印语句console.log('xxx');
        const jsResultStr = jsStr.replace(/[\r\n]/g, '').replace(/console.log\('.+?'\);/g, '')
        const result = `<script>${jsResultStr}</script>`
        console.log(result)
    
        // 2.3 确认后,拼接 html 内容写入到 dist/index.html 内
        fs.writeFile(path.join(__dirname, 'dist', 'index.html'), resultStr + result, err => {
          if (err) console.log(err)
          else console.log('压缩成功')
        })
      })
    
    
    })
    

小结

  1. 正则表达式中如何匹配小括号字符?

    答案
    • 要使用转译字符,转换正则中小括号匹配的目标

06.认识URL中的端口号

目标

认识 URL 中端口号的作用,以及 Web 服务的作用

讲解

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

小结

  1. 端口号的作用?

    答案
    • 标记区分服务器里不同的服务程序
  2. 什么是 Web 服务?

    答案
    • 提供网上信息浏览的服务的一个程序

07.http模块-创建Web服务

目标

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

讲解

  1. 需求:引入 http 模块,使用相关语法,创建 Web 服务程序,响应返回给请求方一句提示 ‘hello,world’

  2. 步骤:

    1. 引入 http 模块,创建 Web 服务对象
    2. 监听 request 请求事件,对本次请求,做一些响应处理
    3. 启动 Web 服务监听对应端口号
    4. 运行本服务在终端进程中,用浏览器发起请求
  3. 注意:本机的域名叫做 localhost

  4. 代码如下:

    /**
     * 目标:使用 http 模块,创建 Web 服务
     * Web服务:一个程序,用于提供网上信息浏览服务
     * 步骤:
     *  1. 引入 http 模块,创建 Web 服务对象
     *  2. 监听 request 事件,对本次请求,做一些响应处理
     *  3. 启动 Web 服务监听对应端口号
     *  4. 运行本服务在终端,用浏览器访问 http://localhost:3000/ 发起请求(localhost 是本机域名)
     * 注意:终端里启动了服务,如果想要终止按 ctrl c 停止即可
     */
    // 1. 引入 http 模块,创建 Web 服务对象
    const http = require('http')
    const server = http.createServer()
    // 2. 监听 request 事件,对本次请求,做一些响应处理
    server.on('request', (req, res) => {
      res.end('hello, world') // 一次请求只能对应一次响应
    })
    // 3. 启动 Web 服务监听对应端口号
    server.listen(3000, () => {
      console.log('Web 服务启动了')
    })
    

小结

  1. 如何访问本机里运行的 Web 服务?

    答案
    • http://localhost:Web服务的端口号/资源路径

08.Web服务-支持中文字符

目标

让 Web 服务,返回中文字符,浏览器正确解析加载

讲解

  1. 需求:让 Web 服务返回中文字符,浏览器能正确加载解析

  2. 步骤:给 Web 服务程序添加响应头,设置内容类型和正确的编码格式,重启 Web 服务测试访问即可

    res.setHeader('Content-Type', 'text/html;charset=utf-8')
    
  3. 编码:编码是信息从一种形式或格式转换为另一种形式的过程,指的把文字在计算机里的二进制数据,用什么形式展示出来

  4. utf-8编码:是一种关系映射表,也叫 utf-8 编码表,可以把中文,英文等等很多字符准确的展示出来

小结

  1. 如何让 Web 服务支持中文字符的返回和展示?

    答案
    • 在响应头上设置指定的响应内容类型的标记和编码格式

09.案例-省份列表接口

目标

基于 Web 服务,编写代码,把省份列表数据响应给请求方

讲解

  1. 需求:基于 Web 服务,开发提供省份列表数据的接口,了解下后端的代码工作过程

    在这里插入图片描述

  2. 步骤:

    1. 基于 http 模块,创建 Web 服务
    2. 使用 req.url 获取请求资源路径,并读取 province.json 理论省份数据返回给请求方
    3. 其他路径,暂时返回不存在的提示
    4. 运行 Web 服务,用浏览器发起请求测试,看是否可以获取到省份列表数据
  3. 代码如下:

    /**
     * 目标:基于 Web 服务,开发-省份列表数据接口
     * 步骤:
     *  1. 创建 Web 服务
     *  2. 使用 req.url 获取请求的资源路径,读取 json 文件数据返回
     *  3. 其他请求的路径,暂时返回不存在的提示
     *  4. 运行 Web 服务,用浏览器请求地址查看效果
     */
    const fs = require('fs')
    const path = require('path')
    // 1. 创建 Web 服务
    const http = require('http')
    const server = http.createServer()
    server.on('request', (req, res) => {
      // 2. 使用 req.url 获取请求的资源路径,读取 json 文件数据返回
      if (req.url === '/api/province') {
        fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {
          res.setHeader('Content-Type', 'application/json;charset=utf-8')
          res.end(data.toString())
        })
      } else {
        // 3. 其他请求的路径,暂时返回不存在的提示
        res.setHeader('Content-Type', 'text/html;charset=utf-8')
        res.end('你要访问的资源路径不存在')
      }
    })
    server.listen(3000, () => {
      console.log('Web 服务启动了')
    })
    
    

小结

  1. 后端接口是如何运行的?

    答案
    • 判断前端请求的路径,执行对应的代码,并返回需要的数据

10.案例-城市列表接口

目标

体验城市列表接口开发效果,以及查询参数如何传递给后端,后端是如何找到对应的数据

讲解

  1. 需求:基于刚刚的 Web 服务,开发提供城市列表数据的接口,了解下后端代码的工作过程

    在这里插入图片描述

  2. 步骤:

    1. 判断 req.url 资源路径+查询字符串,路径前缀匹配 /api/city
    2. 借助 querystring 模块的方法,格式化查询字符串
    3. 读取 city.json 城市数据,匹配省份名字下属城市列表
    4. 返回城市列表,启动 Web 服务测试
  3. 代码如下:

    /**
     * 目标:基于 Web 服务,开发-城市列表数据接口
     * 步骤:
     *  1. 判断 req.url 资源路径+查询字符串,路径前缀匹配/api/city
     *  2. 借助 querystring 模块的方法,格式化查询参数字符串
     *  3. 读取 city.json 城市数据,匹配省份名字下属城市列表
     *  4. 返回城市列表,启动 Web 服务测试
     */
    const qs = require('querystring')
    const fs = require('fs')
    const path = require('path')
    const http = require('http')
    const server = http.createServer()
    server.on('request', (req, res) => {
      // 省份列表接口
      if (req.url === '/api/province') {
        fs.readFile(path.join(__dirname, 'data/province.json'), (err, data) => {
          res.setHeader('Content-Type', 'application/json;charset=utf-8')
          res.end(data.toString())
        })
        // 1. 判断 req.url 资源路径+查询字符串,路径前缀匹配/api/city
      } else if (req.url.startsWith('/api/city')) {
        // 城市列表接口
        // 2. 借助 querystring 模块的方法,格式化查询参数字符串
        // req.url: '/api/city?pname=辽宁省'
        // 以?分隔符分割,拿到'pname=辽宁省'查询参数字符串
        const str = req.url.split('?')[1]
        // 把查询参数字符串 转成 JS 对象结构
        const query = qs.parse(str)
        // 获取前端发来的省份名字
        const pname = query.pname
        // 3. 读取 city.json 城市数据,匹配省份名字下属城市列表
        fs.readFile(path.join(__dirname, 'data/city.json'), (err, data) => {
          // 把 JSON 文件内对象格式字符串,转成对象结构
          const obj = JSON.parse(data.toString())
          // 省份名字作为 key,去obj对象里取到对应城市列表 value 值
          const cityList = obj[pname]
          // 4. 返回城市列表,启动 Web 服务测试
          // 响应的是 JSON 字符串内容
          res.setHeader('Content-Type', 'application/json;charset=utf-8')
          res.end(JSON.stringify(cityList))
        })
      } else {
        res.setHeader('Content-Type', 'text/html;charset=utf-8')
        res.end('你要访问的资源路径不存在')
      }
    })
    server.listen(3000, () => {
      console.log('Web 服务启动了')
    })
    
    

小结

  1. 为什么查询参数的名字是后端规定的?

    答案
    • 因为后端访问对应的属性拿到前端,传递过来的数据

11.案例-浏览时钟

目标

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

讲解

  1. 需求:基于 Web 服务,开发提供网页资源的功能,了解下后端的代码工作过程

    在这里插入图片描述

  2. 步骤:

    1. 基于 http 模块,创建 Web 服务
    2. 使用 req.url 获取请求资源路径为 /index.html 的时候,读取 index.html 文件内容字符串返回给请求方
    3. 其他路径,暂时返回不存在的提示
    4. 运行 Web 服务,用浏览器发起请求
  3. 代码如下:

    /**
     * 目标:编写 web 服务,监听请求的是 /index.html 路径的时候,返回 dist/index.html 时钟案例页面内容
     * 步骤:
     *  1. 基于 http 模块,创建 Web 服务
     *  2. 使用 req.url 获取请求资源路径,并读取 index.html 里字符串内容返回给请求方
     *  3. 其他路径,暂时返回不存在提示
     *  4. 运行 Web 服务,用浏览器发起请求
     */
    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 服务启动了')
    })
    

小结

  1. Web 服务程序都有什么功能?

    答案
    • 提供数据和网页资源等等功能,其他它的功能远不止于此

今日重点(必须会)

  1. 前端工程化思想:基于 Node.js 环境对前端代码进行优化处理
  2. Web 服务程序的作用:返回 JSON 接口数据和网页资源等

今日作业(必完成)

参考作业文件夹的md要求

参考文献

介绍: MDN 是 Mozilla基金会的开发者网络平台。提供了大量关于各种HTML、CSS和JavaScript功能的开放、详细的文档,以及广泛的Web API参考资料。

MDN(Mozilla Developer Network)网站

MDN-JavaScript更多了解

node官方文档-中文站

node中文网

node更多了解-学习

fs模块-更多学习

path模块-更多学习

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

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

相关文章

花生壳、神卓互联等主流内网穿透技术分享

目录 贝锐花生壳 PHTunnel技术 神卓互联WanGooe Tunnel 技术 贝锐花生壳 PHTunnel技术 贝锐花生壳内网穿透服务商&#xff0c;(使用技术&#xff1a;底层采用自研 PHTunnel技术)除了具备无需公网IP&#xff0c;无需搭建专线、3步创建映射等优势&#xff0c;还拥有可靠、稳定的…

JAVA开源项目 图书馆管理系统 计算机毕业设计

本文项目编号 T 044 &#xff0c;文末自助获取源码 \color{red}{T044&#xff0c;文末自助获取源码} T044&#xff0c;文末自助获取源码 目录 一、系统介绍二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究现状5.3 可行性分析5.4 用例设计 六、核…

Go 语言框架接入阿里云的报警通知与日志实时追踪与监控

在现代应用开发中&#xff0c;实时监控和报警是确保系统稳定性和高可用性的重要组成部分。 本文将介绍如何使用 Go 语言框架接入阿里云的报警通知与日志追踪。 ## 1. 环境准备 ### 1.1 安装 Go 确保你的开发环境中已经安装了 Go 语言。可以从 [Go 官网](https://golang.org/d…

使用 Docker 部署 RStudio 的终极教程

一.介绍 在现代数据科学和统计分析领域&#xff0c;RStudio 是一个广受欢迎的集成开发环境&#xff08;IDE&#xff09;&#xff0c;为用户提供了强大的工具来编写、调试和可视化 R 代码。然而&#xff0c;传统的 RStudio 安装可能面临环境配置复杂、版本兼容性等问题。Docker…

SpringCloud Alibaba之Seata处理分布式事务

&#xff08;学习笔记&#xff0c;必用必考&#xff09; 问题&#xff1a;Transactional 的9种失效场景&#xff1f; 1、介绍 1.1、简介 官网地址&#xff1a;Apache Seata 源码地址&#xff1a;Releases apache/incubator-seata GitHub Seata是一款开源的分布式事务解决…

Redis面试真题总结(四)

文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ 文章收录在网站&#xff1a;http://hardyfish.top/ AOF 持久化&#xff1f; AOF&#xff08;Append Only File&#x…

基于机器学习的区域能源生产与消费的分析与预测系统实现,前端layui,后端flask,可视化echarts

1 绪论 1.1选题的意义 基于机器学习的区域能源生产与消费的分析与预测研究具有重要意义。随着能源需求不断增长和资源供给压力加大&#xff0c;能源生产与消费的合理规划和管理成为当务之急。通过机器学习技术&#xff0c;可以对大规模的能源数据进行深入挖掘和分析&#xff…

Qt-QTextEdit的输入类控件(30)

目录 描述 相关属性 相关信号 使用 文本内容改变时触发 选中内容时发生改变 光标位置发生改变时触发 可复制&#xff0c;可撤销&#xff0c;可恢复发生改变时触发 undo撤销 redo恢复 copy复制 描述 这是一个多行输入框 有两个很像的&#xff0c;需要注意一下&…

【软件工程】实体联系图

一、数据模型 二、实体联系图&#xff08;E-R图&#xff09; 例题 选择题

CSS-Grid布局详解

前言 Grid 栅格布局 是 CSS 语言中非常强大的种布局&#xff0c;它提供了丰富的工具属性&#xff0c;可以轻松实现复杂且灵活的布局设计&#xff0c;因此想要完美使用CSS Grid 也有一定的难度和复杂性&#xff0c;我自己也是花了不少时间才真正掌握它的使用&#xff0c;在这篇…

【软件造价咨询】工程活动工作量分布占比的统计分析

在软件项目管理中&#xff0c;准确估算工程活动的工作量是确保项目按时、按预算完成的关键。工程活动工作量分布基准数据明细提供了一种量化工作量的方法&#xff0c;可以帮助团队成员更好地预测和把控不同工程活动所需的工作量。本文将探讨工程活动工作量分布基准数据明细的意…

offsetX、offsetY...

文章目录 offsetX & offsetYclientX & clientYpageX & pageYscreenX & screenYinnerHeight & innerWidthoffsetHeight & offsetWidthoffsetTop & offsetLeftscrollHeight & scrollWidthscrollTop & scrollLeft:与scrollHeight和scrollWidt…

图为科技大模型一体机,智领未来社区服务

当AI与边缘计算相遇&#xff0c;一幅关于智慧生活的宏伟蓝图正缓缓展开。 今天&#xff0c;让我们一同探索&#xff0c;如何通过图为大模型一体机&#xff0c;为物业服务插上智能的翅膀。 通过整合采集物业数据&#xff0c;大模型一体机可全方位为物业行业赋能&#xff0c;实…

Vue3实现类ChatGPT聊天式流式输出(vue-sse实现)

1. 效果展示 流式输出 直接输出 2. 核心代码 找了一些示例与AI生成的代码&#xff0c;或多或少有些问题&#xff0c;搞了好久&#xff0c;郁闷~&#xff0c;在此记录下 2.1 依赖安装 npm install vue-sse2.2 改写main.ts import VueSSE from vue-sseconst app Vue.cre…

ubuntu+MobaXterm+ssh+运行Qt(成功版)

点击上方"蓝字"关注我们 01、ubuntu连接SSH >>> 通过串口工具连接ubuntu 登录 解决连接不上的问题 检查 SSH 服务:确保目标机器上 SSH 服务已启动。你可以在目标机器上运行以下命令: sudo systemctl status ssh 如果没有运行,可以使用以下命令启动 SSH …

解锁2024年翻译在线Top4,让每一次交流都精准无误

现在世界就像个大家庭&#xff0c;交流多了&#xff0c;语言不通就成了问题。有道翻译在线就像桥梁&#xff0c;帮我们和全世界的朋友沟通。对企业来说&#xff0c;翻译准确太重要了&#xff0c;一句话翻错可能损失巨大。有道翻译在线技术强&#xff0c;各种语言都能搞定&#…

简述混沌神经网络

混沌神经网络是一种结合了神经网络与混沌理论的新型智能信息处理系统。以下是对混沌神经网络的详细解析&#xff1a; 一、定义与背景 混沌神经网络是由于神经网络具有高度非线性动力学系统的特性&#xff0c;而混沌又具有无规则性、遍历性、随机性等特点&#xff0c;因此神经网…

快递物流查询-快递查询-快递单号查询-快递物流单号查询-快递物流轨迹查询-快递物流查询接口

快递物流查询接口&#xff08;API&#xff09;是一种允许开发者通过编程方式实时查询快递物流信息的服务。这些接口通常集成了多家快递公司的物流数据&#xff0c;为电商平台、物流管理系统、个人用户等提供便捷的物流查询服务。以下是关于快递物流查询接口的一些详细介绍&…

【通讯协议】S32K142芯片——LIN通信的学习和配置

文章目录 前言1.LIN是什么&#xff1f;2. LIN连接结构及节点构成3. 帧的组成3.1 帧头3.1.1 同步间隔场&#xff08;Break&#xff09;3.1.2 同步场&#xff08;Synch&#xff09;3.1.3 标识符场&#xff08;PID&#xff09; 3.2 帧响应3.2.1 数据场3.2.2 校验和场 3. 代码配置总…

「C++系列」动态内存

【人工智能教程】&#xff0c;前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。 点击跳转到网站&#xff1a;【人工智能教程】 文章目录 一、动态内存1. 使用new和delete①分配单个对象②分配对象数组 2. …