Web前端105天-day62-HTML5_CORE

HTML5CORE02

目录

前言

一、复习

二、拖拽

三、上传服务器

四、Canvas

五、地图

总结

---

前言

HTML5CORE02学习开始

---

一、复习

• 跨域
  • 浏览器的同源策略导致
  • 在网页中, 通过 AJAX 发送网络请求时, 默认只能向同源的服务器请求
  • 同源: 协议 端口号 域名 三者都相同
• 产生跨域的原因: 目前流行前后端分离 开发模式
• 由于 静态网页服务器 和 接口服务器 非同源, 所以产生跨域问题
• 解决方案:
  • CORS: 最佳的解决方案
    • 在服务器利用 cors 模块解决即可
    • 原理: 接口服务器告知浏览器, 允许其他来源的访问
  • PROXY: 代理模式 -- 适合临时解决
    • 服务器无法添加cors 的场景
    • 采用 express-http-proxy模块 转发请求
  • JSONP
    • 利用 script 的 src 获取数据没有跨域限定
    • 需要 服务器 和 前端配合, 共同解决跨域问题
• 文件上传
  • 服务器端
  • 使用 multer 模块实现

const upload = multer({
    storage: multer.diskStorage({
        desctination: 'upload', // 存放上传文件的目录
        filename(req, file, cb){
            // 根据上传的文件信息, 提供存储时 对应的文件名
        }
    })
})

• 前端
  • Form表单模式
    • 由于功能过于单一, 使用较少
  • DOM模式
    • 通过DOM操作, 手动制作 FormData 对象
      • 验证数据大小
      • 验证数据的格式
    • 利用 AJAX 实现文件上传
      • 监听上传进度, 来实现进度条

---

二、拖拽

  
  
  
  

  



  
  
  
  百度一下
  
  
Hello P!

  


  

• 文件拖拽

  
  
  
  

  



  上传
  


  

---

三、上传服务器

• 1.制作文件夹:upload-server
• 2.初始化命令: npm init -y
• 3.安装模块: npm i express uuid multer cors
• 4.制作 app.js 文件, 完成基本服务器的启动代码, 端口3000
• 5.制作静态文件夹 public
  • app.js 中, 指定 public 为静态托管文件夹
  • 在 public 下创建 index.html , 书写 h1 标签, 显示 欢迎 文字
  • 把 jquery.min.js 引入到 public 目录中
• 6.在 app.js 中添加 multer 模块, 完成单文件的一系列操作
  • 指定 upload 目录保存上传文件
  • 个性化 配置上传文件的名字
  • 添加 post方式的 /upload 接口, 用于接收单文件

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

const app = express()
app.listen(3000, () => {
  console.log('服务器启动');
})

app.use(express.static('public'))

app.use(cors())

const upload = multer({
  storage: multer.diskStorage({
    destination: 'upload',
    filename(req, file, cb) {
      var dian_index = file.originalname.lastIndexOf('.')
      var ext = file.originalname.substr(dian_index)

      cb(null, uuid.v4() + ext)
    }
  })
})

// 单文件
app.post('/upload', upload.single('avatar'), (req, res) => {
  res.send(req.file)
})

// 多文件
// 变化1: upload.array  代表收到的文件是多个
// 变化2: req.files 代表多个文件的信息
app.post('/uploads', upload.array('avatars'), (req, res) => {
  res.send(req.files)
})

• 单文件

  
  
  
  
  



  
欢迎使用文件上传
  
  

  上传

  
  

• 多文件

  
  
  
  
  



  
欢迎使用文件上传
  
  

  上传

  
  

---

四、Canvas

• 入门

• 柱状图

• 文本绘制

---

五、地图

• 文档地址：高德开放平台 | 高德地图API

•  按照教程的 准备进行操作
  • 登录账号以后, 在控制台中创建新应用
  • 名称和类型 根据实际情况填写, 可以随便写

•  添加一个key: 类似玩游戏时 要先新建角色

---

总结

HTML5CORE02学习结束