Web前端105天day61-HTML5_CORE

news2025/7/10 4:16:03

HTML5CORE01

目录

前言

一、拖拽上传文件

1.1.文件上传

二、跨域

三、跨域解决方案

四、查看网站接口

五、文件上传服务

总结


前言

HTML5CORE01学习开始


  • HTML5 : 目前主流的 HTML 版本, 其中增加了很多新特性
  • 例如: 音视频, 网页存储技术 - webStorage

一、拖拽上传文件

  • 把 文件拖拽到 浏览器上, 浏览器可以识别到此文件
  • 通过上传操作, 把图片传递到服务器进行保存 -- 适合 自定义头像

1.1.文件上传

Express 服务器的 multer 模块提供了 处理上传文件的功能

搭建 Express 服务器

  • 安装node环境, 推荐使用最新的长期稳定版本
    • 查看已安装的node版本, 命令: node -v
    • Node.js

  •  设置中国镜像
    • 设置中国镜像: npm set registry https://registry.npmmirror.com
    • 查看当前镜像: npm get registry

  • 创建文件夹: my-server

  • 在文件夹下执行初始化命令: npm init -y

  • 安装模块: express cors uuid multer express-http-proxy

  • 安装失败的原因: 检查中国镜像是否正确

  • 基础代码

const express = require('express')

const app = express()

app.listen(3000, () => {
  console.log('服务器已开启!')
})
// 指定静态文件夹
app.use(express.static('public'))

// 启动服务器有两种方式
// 1. node app.js
//  -- 每次JS文件有变更, 都要重启服务器才能生效

// 2. 使用 nodemon 模块, 会自动监听文件变更 自动重启服务器
//  -- 前提: 全局安装  npm i -g nodemon
// -- nodemon app.js
  • 启动

  • 访问: localhost:3000


二、跨域

  • 典型的跨域报错, 报错关键词: CORS, Access-Control-Allow-Origin

  • 跨域: 跨越域名的访问
    • 在网页中, 利用 JS 向 服务器 请求数据, 要求必须是同一个服务器
    • 3个相同: 域名 协议 端口号
    • 协议://域名:端口号 例如 http://localhsot:3000
  • 开发网站的两种方案
    • 前后端不分离 -- 服务器渲染
      • 服务器要承载更多的操作 -- 把数据拼接成HTML
      • 曾经的年代 -- 用户的电脑性能差, 把HTML的合并操作让服务器统一完成
      • 但是: 随着访问量的变大, 服务器合并HTML的操作 消耗过多的性能

  •    
    • 前后端分离 
      • 优点:分担压力 -- 把HTML的拼接操作 分担给每个用户自己完成

  • 跨域场景
    • 进一步的分担服务器压力

  • 之前的场景模拟中
    • live server的 127.0.0.1:5500 相当于A服务器
    • localhost:3000/names 相当于B服务器
  • 比喻:
    • 你在 京东买了个 华为的笔记本电脑, 电脑出问题了
    • 你到 淘宝的华为专卖店 找人家维修, 跨域报错

三、跨域解决方案

常见的解决方案有3种:

  • CORS -- 最推荐
    • 由服务器来进行解决, 服务器安装cors模块即可

    • 原理: 通过请求头, 告诉浏览器此次访问是安全可靠的 即可

    • 类似于: 京东买电脑 到淘宝维修 -- 淘宝店铺声明: 我和京东是同一个商铺

const express = require('express')
const cors = require('cors');

const app = express()
// 加载 cors 模块, 解决跨域
app.use(cors())

 

  • 白名单模式
const express = require('express')
const cors = require('cors');

const app = express()
// 加载 cors 模块, 解决跨域

// 默认: 允许所有来源的访问
// app.use(cors())

// 白名单模式: 指定允许的访问来源
app.use(cors({
  // ctrl+F5: 刷新网页, 可以清空缓存
  origin: ['http://127.0.0.1:3000', 'http://localhost:5500']
}))

app.listen(3000, () => {
  console.log('服务器已开启!')
})
// 指定静态文件夹
app.use(express.static('public'))

// 启动服务器有两种方式
// 1. node app.js
//  -- 每次JS文件有变更, 都要重启服务器才能生效

// 2. 使用 nodemon 模块, 会自动监听文件变更 自动重启服务器
//  -- 前提: 全局安装  npm i -g nodemon
// -- nodemon app.js

//
// 数据接口: 通常用来与数据库进行交互
app.get('/names', (req, res) => {
  res.send(['凯凯', '泡泡', '亮亮', '铭铭'])
})
  • PROXY: 代理模式
    • 适合 无法给服务器添加 CORS 的场景, 用于临时解决跨域问题

  •  创建 proxy-server 文件夹        
  • 初始化: npm init -y
  • 安装模块: npm i express cors express-http-proxy

const express = require('express');
const cors = require('cors');
const proxy = require('express-http-proxy');

const app = express()

app.use(cors())
// https://m.douyu.com/api/cate/recList

// 访问 localhost:3000/dy
app.use('/dy', proxy('https://m.douyu.com'))

// 访问 localhost:3000/baidu
// 请求到 百度首页的 代码
app.use('/baidu', proxy('https://www.baidu.com'))

// nodemon app.js
app.listen(3000, () => {
  console.log('服务器已开启')
})
  • JSONP
    • 利用脚本script 的 src 不跨域的特征, 来解决跨域问题

四、查看网站接口

  • 前提: 网站属于前后端分离项目, 通过 AJAX 发送请求
  • 通过浏览器后台提供的 网络 功能, 可以查看网站发送的所有接口地址


五、文件上传服务

服务器创建

  • 文件夹: upload-server
  • 初始化: npm init -y
  • 模块安装: npm i express cors multer uuid
const express = require('express');
const cors = require('cors');
// multer: 负责处理上传文件
const multer = require('multer');

// uuid: 用于生成唯一名称
const uuid = require('uuid');

const app = express()

app.use(cors())

// 静态文件夹: 代表可以通过服务器访问的
app.use(express.static('public'))
// 允许通过服务器访问 保存上传文件的文件夹
app.use(express.static('upload'))


// nodemon app.js
app.listen(3000, () => {
  console.log('服务器已开启');
})

// 初始化文件上传操作
const upload = multer({
  // 配置项 -- ctrl + i  弹提示
  // destination: 目标, 目的地
  // 设置 上传文件 要保存到的目录
  // dest 指定存放的目录, 其他设定都按照默认设定处理 -- 不够人性化 
  // dest: 'upload'

  // storage: 可以详细的对上传文件进行自定义设置
  storage: multer.diskStorage({
    destination: 'upload', // 存放的位置
    // 携带3个参数
    // req: 请求的信息
    // file: 当前上传文件的信息
    // cb: callback缩写, 回调函数 -- 用于返回要存放到upload文件夹下的文件名
    filename(req, file, cb) {
      console.log('file', file)
      // 参数1: 代表是否有错误, null--没有
      // 参数2: 代表存放到upload中的文件名

      // 缺点: 直接用文件名, 会带来两个问题
      // 1. 中文会乱码
      // 2. 同名会覆盖
      // cb(null, file.originalname)

      // 截取原文件名中的后缀名部分, 例如 .jpg .png .txt
      // 最后一个 . 的序号
      var dian_index = file.originalname.lastIndexOf('.')
      // substr: 从指定序号开始截取字符串
      var ext = file.originalname.substr(dian_index)

      // uuid.v4 : 第4种生成唯一标识的方案, 最常用
      cb(null, uuid.v4() + ext)
    }
  })
})

// 接收单文件上传的接口
// 1. 接收post请求
// 2. upload.single : 代表接收单文件上传
// 3. 'avatar' 指定接收的 参数名
//  -- <input type="file" name="avatar" />
app.post('/upload', upload.single('avatar'), (req, res) => {
  // req: request -- 存放请求时传递的值
  // req.file : 代表文件的信息
  console.log(req.file)
  res.send(req.file)
})
  • Form方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>文件上传</title>
</head>

<body>
  <h1>欢迎使用 文件上传</h1>

  <!-- 文件上传: 分 form表单 和 DOM 两种方案 -->
  <!-- 1. 必须 POST 请求方式 -->
  <!-- 2. 编码类型, 必须是  multipart/form-data -->
  <!-- 3. action : 代表提交的接口地址 -->
  <!-- 4. target : 提交后的信息 显示在哪里 -->
  <form target="msg" action="/upload" method="post" enctype="multipart/form-data">
    <input type="file" name="avatar" id="">
    <button>上传</button>
  </form>

  <!-- 利用 iframe 指定上传后的信息显示位置 -->
  <!-- 可以隐藏 iframe, 达到隐藏信息的效果 -->
  <iframe frameborder="1" name="msg" style="display: none;"></iframe>

  <!-- 不要用 live server, 自带热更新 会导致结果消失 -->
  <!-- 用 localhost:3000 访问 -->
</body>

</html>
  • DOM方式

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>DOM方式上传文件</title>
  <style>
    .percent {
      width: 300px;
      height: 30px;
      border-radius: 6px;
      overflow: hidden;
      background-color: #eee;
    }

    .percent>div {
      background-color: orange;
      height: 100%;
      width: 0;
      transition: 0.2s;
    }
  </style>
</head>

<body>
  <div id="box">
    <input type="file" name="avatar" id="">
    <button>上传</button>
  </div>

  <img src="" alt="" height="300">

  <div class="percent">
    <div></div>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#box>button').click(function () {
      // JQ封装了两个简单的方法: $.get()  和 $.post()  适合处理数据相关的请求

      // 读取文件选择标签中的文件信息, 组合成 Form 表单类型的数据
      var files = $(this).prev().prop('files')
      console.log(files)

      // 关于对 准备上传的文件 的检查
      if (files.length == 0) {
        alert("请选择文件后, 再上传")
        return
      }
      // 超过2m
      // 1KB = 1024 Byte
      // 1MB = 1024 KB
      if (files[0].size > 2 * 1024 * 1024) {
        alert("文件大小不允许超过2MB")
        return
      }

      // 文件类型只允许图片
      // type 中包含  image 字符
      // indexOf : 查找指定字符 在字符串中的序号
      if (files[0].type.indexOf('image') == -1) {
        alert("只支持图片类型的文件!")
        return
      }

      var fd = new FormData() // form表单类型的数据格式
      fd.append('avatar', files[0])

      // 文件上传需要使用 更加自定义的 ajax 方式
      $.ajax({
        // ctrl+i :查看配置项
        url: 'http://localhost:3000/upload', //接口地址
        type: 'post', // 请求方式
        data: fd, //发送的数据
        contentType: false, // 不允许更改 数据的内容类型;  默认会自动改成文本
        processData: false, // 不允许对数据自动编码,  默认会把数据当做文本编码
        success(res) {
          console.log('上传完毕:', res)
          // filename: 保存在 upload 文件夹中的文件名
          $('img').prop('src', `http://localhost:3000/${res.filename}`)
        },
        // xhr: 可以监听网络操作的过程
        xhr() {
          var xhr = new XMLHttpRequest()
          // upload: 监听上传过程
          // progress: 上传进度变化时, 触发的事件
          xhr.upload.addEventListener('progress', e => {
            // console.log(e)
            //   总大小     当前已加载大小
            const { total, loaded } = e
            // 计算出完成的百分比
            var percent = (loaded / total).toFixed(2) * 100 + '%'
            console.log(percent);

            $('.percent>div').css('width', percent)
          })

          return xhr
        }
      })
    })
  </script>
</body>

</html>


总结

HTML5CORE01学习结束

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

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

相关文章

TensorRT学习笔记 1 - 概述

TensorRT系列笔记是作者半年来学习和使用TensorRT(后称trt)积累笔记 整理和心得。包含trt的基本概念&#xff0c;相关资料&#xff0c;实践笔记&#xff0c;踩坑记录等等。 本篇博客希望可以初步说清楚 trt是什么&#xff1b;模型部署为什么使用trt&#xff0c;以及使用trt的…

渗透攻击MS08-067

学校课程关于Metasploit有基础的几个小实验&#xff0c;把它整理分享在这里。 实训目的&#xff1a; 熟悉Metasploit终端的使用方法&#xff0c;了解MS08-067漏洞&#xff0c;掌握对MS08-067漏洞攻击的方法。 场景描述&#xff1a; 在虚拟机环境下配置 “WinXP1”和“Kali …

华为机试_HJ63 DNA序列【中等】

目录 描述 输入描述&#xff1a; 输出描述&#xff1a; 解题过程 提交代码 学习代码 代码一 收藏点 描述 一个 DNA 序列由 A/C/G/T 四个字母的排列组合组成。 G 和 C 的比例&#xff08;定义为 GC-Ratio &#xff09;是序列中 G 和 C 两个字母的总的出现次数除以总的字…

公开竞价与封闭式竞价有什么不同?

电子竞价是电子采购的一种形式。电子采购是指通过信息和网络系统在线进行的招标采购过程。 电子竞价是指一种基于网络的系统&#xff0c;允许潜在供应商在网上实时竞争商品/服务的价格。电子竞价的使用方式类似于e-bay平台&#xff0c;出价最高者获胜。在建筑业&#xff0c;这…

前端_Vue_7.表单输入绑定

文章目录一、 表单输入绑定1.0. 表单&表单元素1.0.1. 表单1.0.2. 表单元素1.1. 基本用法1.1.1. 文本1.1.2. 多行文本1.1.3. 复选框1.1.4. 单选按钮1.1.5. 选择器1.2. 值绑定1.2.1. 复选框1.2.2. 单选按钮1.2.3. 选择器选项1.3. 修饰符1.3.1. .lazy1.3.2. .number1.3.3. .tr…

三角函数公式

三角函数的定义 锐角三角函数任意角三角函数正弦sin⁡Aac\sin A\dfrac acsinAca​sin⁡θyr\sin \theta\dfrac yrsinθry​余弦cos⁡Abc\cos A\dfrac bccosAcb​cos⁡θxr\cos \theta\dfrac xrcosθrx​正切tan⁡Aab\tan A\dfrac abtanAba​tan⁡θyx\tan \theta\dfrac yxtanθ…

mysql中常用命令完整大全 适用于mysql8.0

关于安装部分就去看其他人的一些文章即可网上太多&#xff0c;这篇文章主要就是记录本人的一些关于mysql操作上的笔记。 mysql中常用命令1.登录数据库2.查看当前数据库3.创建数据库4.删除数据库5.创建表user基于以下条件6.使用主键约束7.指定非空8.唯一约束9.默认约束10.设置表…

物联网时代下的5G融合定位,可以实现哪些功能?

5G具有高带宽、高频谱&#xff08;毫米波&#xff09;、多天线阵列等特性&#xff0c;通过提升无线定位算法的能力、室内数字系统建设、完善5G定位服务流程以及与其它定位技术和平台的结合&#xff0c;可提高5G定位精度。室内高精度定位服务为5G定位扩展到更多应用场景和领域构…

C++:类和对象:运算符重载

前言&#xff1a; 运算符重载概念&#xff1a;对已有的运算符重新进行定义&#xff0c;赋予其另一种功能&#xff0c;以适应不同的数据类型。 1&#xff1a;加号运算符重载 对于内置的数据类型&#xff0c; 编译器知道如何运算&#xff0c;可以很直观的得到结果 int a 10; …

西瓜书-支持向量机

支持向量机 支持向量:距离超平面最近的这几个训练样本点。 支持向量机的核心思想是最大化间隔γ2∣∣w∣∣\gamma \frac{2}{||w||}γ∣∣w∣∣2​。 求极大转换为求极小&#xff0c;转化为凸规划问题。 对偶问题 利用拉格朗日乘子法&#xff0c;对于不等式约束&#xff0c;…

安全网络身份认证系统的设计与实现

本文章源码地址&#xff1a;https://gitee.com/sukels/shirohttps://gitee.com/sukels/shiro 摘 要 随着互联网的飞速发展,Web应用的安全问题日益凸显。为了保护Web应用中用户和企业的敏感信息,认证授权加密已经成为了Web应用中不可缺少的部分。但是随之而来是巨大的代码工作…

欧科云链半年报解读Final

欧科云链半年报解读&#xff1a;净利润同比扭亏为盈&#xff0c;区块链大数据等创新业务贡献新增长曲线 日前&#xff0c;欧科云链控股&#xff08;01499.HK&#xff09;发布2022年度截至9月30日止的六个月中期报告。报告显示&#xff0c;公司在2022年4月1日至2022年9月30日实现…

【idea插件】EasyCode介绍与使用

1.简介 EasyCode是idea的一个插件,主要功能是代码生成,类似的插件还有jpa support EasyCode是idea的一个插件&#xff0c;可以采用图形化的方式对数据的表生成entity,controller,service,dao,mapper……无 需任何编码&#xff0c;简单而强大。可以大幅度的提高开发效率.下面来…

UG/NX二次开发Siemens官方NXOPEN实例解析—2.7 DiameterSymbol

列文章目录 UG/NX二次开发Siemens官方NXOPEN实例解析—2.1 AssemblyViewer UG/NX二次开发Siemens官方NXOPEN实例解析—2.2 Selection UG/NX二次开发Siemens官方NXOPEN实例解析—2.3 Selection_UIStyler UG/NX二次开发Siemens官方NXOPEN实例解析—2.4 File2Points UG/NX二次…

第三章:远程登陆Linux系统-[实操篇]

一&#xff1a;为什么需要远程登陆Linux 1.1示意图 1.2说明 说明: 公司开发时候&#xff0c; 具体的情况是这样的 1) linux 服务器是开发小组共享的. 2) 正式上线的项目是运行在公网的. 3) 因此程序员需要远程登录到 centos 进行项目管理或者开发. 4) 画出简单的网络拓扑…

Vue3——路由的query参数和命名路由以及默认插槽slot的使用

这里主要在message页面组件和detail页面组件介绍 看一个案例&#xff0c;当一个二级路由下面又有许多个不同的跳转页面的时候&#xff0c;比如下图的about/message/detail , 需要分别展示多条信息&#xff0c;这里不能给每一条信息都配置一个组件&#xff0c;那样当信息的数量…

RocketMQ-RocketMQ 系统架构以及消息的概念

文章目录一、RocketMQ的消息模型1、RocketMQ的基础消息模型&#xff0c;一个简单的Pub/Sub模型2、RocketMQ 扩展后的消息模型3、RocketMQ的部署模型二、RocketMQ的系统架构2、Consumer3、Name Server3.1、路由注册3.2、路由剔除3.3、路由发现3.4、Client 对 NameServer选择策略…

Spring5框架总结学习(从入门到进阶)-AOP

文章目录AOP1、基本概念2、底层原理3、底层原理实现4、AOP&#xff08;术语&#xff09;5、准备工作6、基于注解实现AOP 1、基本概念 面向切面编程可用对各个业务逻辑各个部分进行隔离 2、底层原理 AOP底层使用动态代理 有2种情况动态代理 有接口 使用JDK动态代理无接口 使…

ffmpeg编译安装

ffmpeg编译安装前言一、下载ffmpeg二、编译安装2.1 Linux编译ffmpeg2.2 Windows编译ffmpeg总结前言 Fmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。它包含…

154. SAP UI5 Smart Table 和 Smart Filter Bar 的联合使用方法介绍

本教程第 147 个步骤,我们介绍了 SAP UI5 Smart Table 控件的用法: SAP UI5 应用开发教程之一百四十七 - SAP UI5 SmartTable 控件的使用介绍如下图所示: 本步骤我们在 Smart Table 本身的基础上再进一步,学习如何将 Smart Table 配合 Smart Filter Bar 共同使用。 先看一…