dwe

用户4936275041298
103 阅读7分钟

H5可视化编辑器

1、注册实现

  1. 前端写一个form，让用户填写name和password
  2. 前端监听submit事件
  3. 前端发送post请求，数据位于请求体
  4. 后端接收post请求，获取请求体中name和password，存储数据

1、登录(token)，JWT原理

image.png

image.png

二、JWT 的原理

JWT 的原理是，服务器认证以后，生成一个 JSON 对象，发回给用户，就像下面这样。

{
"姓名": "张三",
"角色": "管理员",
"到期时间": "2018年7月1日0点0分"
}

以后，用户与服务端通信的时候，都要发回这个 JSON 对象。服务器完全只靠这个对象认定用户身份。为了防止用户篡改数据，服务器在生成这个对象的时候，会加上签名（详见后文）。

服务器就不保存任何 session 数据了，也就是说，服务器变成无状态了，从而比较容易实现扩展。

三、JWT 的数据结构 实际的 JWT 大概就像下面这样。

image-20210824155840325

它是一个很长的字符串，中间用点（.）分隔成三个部分。注意，JWT 内部是没有换行的，这里只是为了便于展示，将它写成了几行。

JWT 的三个部分依次如下。

  • Header（头部）
  • Payload（负载）
  • Signature（签名）

写成一行，就是下面的样子。 下面依次介绍这三个部分。

3.1 Header

Header 部分是一个 JSON 对象，描述 JWT 的元数据，通常是下面的样子。

{
"alg": "HS256",
"typ": "JWT"
}

上面代码中，alg属性表示签名的算法（algorithm），默认是 HMAC SHA256（写成 HS256）；typ属性表示这个令牌（token）的类型（type），JWT 令牌统一写为JWT。

最后，将上面的 JSON 对象使用 Base64URL 算法（详见后文）转成字符串。

3.2 Payload

Payload 部分也是一个 JSON 对象，用来存放实际需要传递的数据。JWT 规定了7个官方字段，供选用。

  • iss (issuer)：签发人
  • exp (expiration time)：过期时间
  • sub (subject)：主题
  • aud (audience)：受众
  • nbf (Not Before)：生效时间
  • iat (Issued At)：签发时间
  • jti (JWT ID)：编号

除了官方字段，你还可以在这个部分定义私有字段，下面就是一个例子。

{
"sub": "1234567890",
"name": "John Doe",
"admin": true
}

注意，JWT 默认是不加密的，任何人都可以读到，所以不要把秘密信息放在这个部分。

这个 JSON 对象也要使用 Base64URL 算法转成字符串。

3.3 Signature

Signature 部分是对前两部分的签名，防止数据篡改。

首先，需要指定一个密钥（secret）。这个密钥只有服务器才知道，不能泄露给用户。然后，使用 Header 里面指定的签名算法（默认是 HMAC SHA256），按照下面的公式产生签名。

HMACSHA256(
base64UrlEncode(header) + "." +
base64UrlEncode(payload),
secret)

算出签名以后，把 Header、Payload、Signature 三个部分拼成一个字符串，每个部分之间用"点"（.）分隔，就可以返回给用户。

3.4 Base64URL

前面提到，Header 和 Payload 串型化的算法是 Base64URL。这个算法跟 Base64 算法基本类似，但有一些小的不同。

JWT 作为一个令牌（token），有些场合可能会放到 URL（比如 api.example.com/?token=xxx）。Base64 有三个字符+、/和=，在 URL 里面有特殊含义，所以要被替换掉：=被省略、+替换成-，/替换成_ 。这就是 Base64URL 算法。

四、JWT 的使用方式

客户端收到服务器返回的 JWT，可以储存在 localStorage。

具体使用见第三部分

此后，客户端每次与服务器通信，都要带上这个 JWT。你可以把它放在 Cookie 里面自动发送，但是这样不能跨域，所以更好的做法是放在 HTTP 请求的头信息Authorization字段里面。

Authorization: Bearer <token>

另一种做法是，跨域的时候，JWT 就放在 POST 请求的数据体里面。

五、JWT 的几个特点

（1）JWT 默认是不加密，但也是可以加密的。生成原始 Token 以后，可以用密钥再加密一次。

（2）JWT 不加密的情况下，不能将秘密数据写入 JWT。

（3）JWT 不仅可以用于认证，也可以用于交换信息。有效使用 JWT，可以降低服务器查询数据库的次数。

（4）JWT 的最大缺点是，由于服务器不保存 session 状态，因此无法在使用过程中废止某个 token，或者更改 token 的权限。也就是说，一旦 JWT 签发了，在到期之前就会始终有效，除非服务器部署额外的逻辑。

（5）JWT 本身包含了认证信息，一旦泄露，任何人都可以获得该令牌的所有权限。为了减少盗用，JWT 的有效期应该设置得比较短。对于一些比较重要的权限，使用时应该再次对用户进行认证。

（6）为了减少盗用，JWT 不应该使用 HTTP 协议明码传输，要使用 HTTPS 协议传输。

2、为什么用token，cookie、session的缺陷

一定要答出来，session会有分布式一致性这个问题，就是多台机器的session如何共享

image.png

6、组件拖拉（监听移动）

就是给每个组件上绑定 @mousedown的事件监听

也就是说先监听 鼠标按下的事件，这个事件是一个回调

image.png 接下来就是这个handleMouseDownOnElement 函数体里面是啥东西

      handleMouseDownOnElement(e) {
        //这里就是获取到这个组件的信息pos，pos里面就有 top，left
                const pos = {...this.defaultStyle}
        //你一旦mousedown，就会产生一个现在的 clientx，clienty
                let startY = e.clientY
                let startX = e.clientX
        //这里的top其实就是 原生 的offsetTop
                let startTop = pos.top
                let startLeft = pos.left
                let firstTime='',lastTime='';
                firstTime = new Date().getTime();
                let move = moveEvent => {
                    let currX = moveEvent.clientX
                    let currY = moveEvent.clientY
                    //实时的更新坐标
                    pos.top = currY - startY + startTop
                    pos.left = currX - startX + startLeft
                }
                let up = () => {
                    document.removeEventListener('mousemove', move, true)
                    document.removeEventListener('mouseup', up, true)
                }
        //下面就是监听事件，只要鼠标动就回调move这个函数
                document.addEventListener('mousemove', move, true)
        //只要鼠标松开了，就回调up
                document.addEventListener('mouseup', up, true)
                return true
            },

image.png

7、图层上移下移

这块的原理其实就是 ，每个组件初始都有一个 z-index

然后 图层上移就是 z-index ++

图层的下移就是 z-index --

8、快捷键撤销

@click 先去监听

image.png

image.png

image.png

9、预览模板

1、首先就是预览功能的设计，不希望首屏加载时间过长，单页面应用是等待前端js编译完成才渲染页面

浏览器两大核心：渲染引擎+JavaScript引擎

浏览器将HTML解析成DOM，CSS解析成CSSOM，一边下载文件一边解析，遇到script元素时候把网页渲染的权力转交给 JavaScript引擎，处理完毕后再恢复到渲染引擎上。

采用服务端渲染，时间会更短，

2、大概流程

1、首先是一个iframe，动态的引入 src ，

image.png

9、ejs

ejs是一个模板引擎产品， 就是 用来分离模板和数据

这里说的模板 ，也就是我们服务端渲染的时候 存储在服务端的 html 模板，也可以理解为界面

说的数据，也就是我们前端传过来的数据，这里就是你要预览哪个用户的哪个作品，这个 id，然后后端拿到这个id去数据库查询，然后返回这个作品一些其他的数据，就是详细信息，有多少组件，动画信息，

然后看代码就是

../views下面的ejs 代码，就会接受到前端的数据，并最后 加入到这个html模板里面，最后返回给前端

数据就是只有这一个 pageData

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
  <meta name="keywords" content="">
  <meta name="description" content="">
  <meta name="renderer" content="webkit">
  <meta name="robots" content="index, follow">
  <meta name="format-detection" content="telephone=no">
  <script src="/third-libs/vue.js"></script>
  <link rel="stylesheet" href="/third-libs/animate.min.css">
  <link rel="stylesheet" href="/third-libs/swiper.min.css">
  <script src="/third-libs/swiper.min.js"></script>
  <!--引入模板-->
  <script src="/engine_libs/h5-swiper/page-engine.umd.js"></script>
  <link rel="stylesheet" href="/engine_libs/h5-swiper/page-engine.css">
  <style>
    * {
      padding: 0;
      margin: 0;
      box-sizing: border-box;
    }
    html, body, #app{
      position: relative;
      width: 100%;
      height: 100%;
    }
  </style>
  <script>
      //ejs 引擎原理
      window._pageData = <%- JSON.stringify(pageData) %>
  </script>
</head>
<body>
<div id="app">
  <engine-h5-swiper  />
</div>
<script>
  new Vue({
      el:"#app"
  })
</script>
<script>
    eval(window._pageData.script);
</script>
</body>
</html>

用到的ejs就是只有这一句

window._pageData = <%- JSON.stringify(pageData) %>

这就是他的语法

原理

  • 把html中的<%%>中的<%%>中的js保留执行，<%=%>替换成${xxx}拼接到模板字符串上，test一执行返回的字符串就是我们要的html

ejs其实就是类似于 放到<%-%> 里面是字符串，但是他会 解析完 ，并执行js代码

\

avatar
文章
阅读
粉丝