上篇介绍了云视频剪辑配齐工具的技术架构，对整个项目的构成有了大致的了解，本文将介绍在实现该系统的前端技术难点及解决方案。

该项目基于集团内部的平台实践，前端框架使用 Angular 实现，所以代码示例为 Angular 框架语法。

上传视频

常见的上传视频方式有两种：用户通过表单打开文件选择器选择需要上传的文件和直接拖拽文件到 Web 页面的指定区域，Web 应用检测可得对应视频文件的内容。

选择文件上传

伪代码实现：

1

<input multiple type="file" accept="video/mp4" (change)="handleVideoMaterialUpload" />

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import axios from 'axios';

function handleUpload(e) {
  const uploadUrl = 'https://upload-url.com/';
  const fileList = e.target.files;

  // 上传前校验
  // do something

  // do something 上传到指定服务
  const formData = new FormData();

  formData.append('file', filesList[0]);

  axios
    .post(uploadUrl, formData)
    .then(res => {
      console.log('上传成功', res);
    })
    .catch(err => {
      console.log('上传失败', err);
    });
}

在上传视频文件前不仅要检测视频文件的类型、大小等基础信息，还要对视频文件进行可播放性检测，并且在检测过程中获取视频文件时长、封面等再后续流程中使用到的信息（该部分实现请看下文章节），检测同过后添加到解析队列。

随着业务规模的扩大，业务方对提高生产效率的需求日加激烈。尤其笔者所在业务部门负责的 AI 录播课，主讲老师需在课前对录播视频进行上传、根据课程内容插入锚点和编辑相关互动的内容，因此在夏季课来临之前，我们针对用户的痛点提出改造现有的 AI 录播课视频配齐工具。

需求背景

1. 颗粒化需求

• 过去 AI 课视频都是以单个完整的视频（大小约 4GB 左右）一次性上传到云服务器，再通过 Web 网页的配齐工具根据播放器时间插入锚点。在公司网络下，由于各家分公司的经营情况不同，大概至少需要 30 分钟到 60 分钟不等。对于配齐的老师来说，在上传等待这段时间是无法处理其他工作的，唯有上传成功后，才能进行视频配齐的工作。
• 如果主讲老师在视频配齐阶段发现视频中出现错误或有课程内容需要修改，那么就需要视频编辑部门编辑后，重新上传和配齐，那么之前所完成的工作就需要重新开始，整个流程会让老师做了很多无用功，且消耗大量的时间。

2. 灵活度需求

• 全国不同省份地区的学生水平存在着差距，课堂老师希望通过增加附加题、白板讲解、拓展讲解等可灵活运用的环节，让课堂老师根据课堂实际情况，自行决定是否播放相关的片段。

最终产品提出上述需求的解决方案：分段上传 + 自由组合。

需求背景

最近在负责利用 Egret 白鹭游戏引擎开发一款课中互动游戏，其中一个功能需要将 HTML 字符串形式存库的题目内容应用在互动游戏中。但是白鹭引擎是通过 WebGL 进行渲染的，DOM 树中通过一个 <canvas> 标签承载，无法通过 innerHTML 的方式直接使用 HTML 字符串，当时花费了不少时间研究如何优雅地实现类似的需求。

內容分发网络（Content Delivery Network 或 Content Distribution Network，简称 CDN） 通过将源站内容分发至 最接近用户 的节点，从而 降低核心系统负载（系统、网络），使用户可就近取得所需内容，提高用户访问的响应速度。这种技术方案解决了因分布、带宽、服务器性能带来的访问延迟问题，适用于图片小文件、大文件下载、音视频点播、全站加速和安全加速等场景。

工作原理

通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络，CDN 系统能够实时地根据 网络流量 和 各节点的连接、负载状况 以及 到用户的距离 和 响应时间 等综合信息将用户的请求重新导向离用户最近的服务节点上。

利用公式简述 CDN 可表示为：

1

CDN = 更智能的镜像 + 缓存 + 流量导流;

简单地说，CDN 是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向 和 内容管理 4 个要件，而内容管理和全局的网络流量管理（Traffic Management）是 CDN 的核心所在。

工作流程

用户终端访问 CDN 的过程分为两个步骤，一是用户通过 DNS 找到最近的 CDN 边缘节点 IP，二是数据在网络中送达用户终端。

最简单的 CDN 网络由一个 DNS 服务器和几台缓存服务器组成，假设您的加速域名为 www.taobao.com，接入 CDN 网络，开始使用加速服务后，当终端用户（广州）发起 HTTP 请求时，处理流程如下：

登录鉴权是互联网信息交互中永恒的话题，毕竟在工作中几乎每天都会接触到，适逢最近需要对现有的系统平台进行 SSO 的流程改造，所以趁这个机会好好总结前端工程师接触到的登录方式。

鉴权也叫身份验证（Authentication），是指验证用户是否拥有访问系统的权利。在日常的生活中，身份验证随处可见，比如：进入高铁站候车室、机场候机楼需要检查票据和身份证件；游玩主题乐园、名胜风景区需要购买门票，并由入口处人员鉴定有效后方可拥有进入园区游玩的权利。

而在计算机领域中，身份验证的方法有很多种：基于共享密钥的身份验证、基于生物学特征的身份验证和基于公开密钥加密算法的身份验证。不同的身份验证方法，安全性也各自不同。

下面我将从前端开发工程师的角度出发，梳理 Web 应用前后端数据交互中的各种鉴权方案。

在科技繁荣的今天，计算机给现代社会带来的是信息化的变革，本质上打破的是原有社会人们地理、语言、人种等各维度上的差异，通过互联网人们能通过便捷的方式足不出户口，就可以购买到全国乃至全球的商品货物、享受到各式各样的差异化服务。因此，对于一家互联网企业来说，用户无疑是最重要的资产，让更多的用户知道、了解甚至享受企业的产品，是企业立足的前提条件，毕竟有了用户方有盈利的可能性，企业才能可持续发展。

对于国内很多大厂的来说，某种程度上在用户这个维度上会投入大量资源，诸如设立专门负责用户增长的组织单位。他们关注用户在产品终端的体验，相关从业人员需要懂得抓住用户心里，结合各种业务场景制定对应的营销策略，最终目的就是留住用户，让用户心甘情愿地消费。

笔者就职于与某互联网金融企业，由于最近经常需要和产品、推广、运营打交道，多多少少会接触到很多庞杂的知识边界外的领域，所以打算系统整理这段时间来的业务分析方法论和实践心得。

常用移动前端开发调试方式

因为日常开发经常需要在移动设备上调试测试开发的 H5 页面，但是一直都没怎么总结过移动前端开发相关的调试工具或方法，今天稍微总结一下比较好用的调试工具，也罗列了一些没有用过但是值得了解的工具

通用调试工具方法

Chrome 移动设备模拟器

Chrome 浏览器开发者工具内置了可用于模拟移动设备的功能，这也是最常用的调试方式，这里只是简单说明操作步骤：

1. 在 PC 端打开 Chrome 浏览器并打开目标页面，然后 F12 打开开发者工具
2. 点击开发者工具左上角的手机图标，刷新页面后即可调试
3. 页面顶部设备选择下拉菜单可选择默认的多种品牌机型，以及仿真的网络状态
4. 选择下来菜单中的 Edit 进入适配设备的机型选择，既有浏览器提供的机型，也可以根据需要设定自定义机型（主要是测试宽高比）

因为使用起来方便，所以开发调试的大部分都能满足需求，但是要更仿真更严谨还是需要在真机中调试。

vConsole 移动端网页上的调试控制台

vConsole 是一款轻量级、可拓展、针对手机网页的前端开发者调试面板。

通过该工具可以方便地在移动真机的 Web 页面中通过以下特性实现调试功能：

• 查看 console 日志
• 查看网络请求信息
• 查看页面 element 结构
• 查看 Cookie、localStorage 和 SessionStorage
• 手动执行 JavaScript 命令行
• 自定义插件

谈到权限控制，实际上在我们的生活中无处不在，例如我们无时无刻都在使用的智能手机，打开手机需要生物指纹或者人脸识别；当你进入公司的时候，你需要工卡在门禁滴一下；又如曾经的你是否有过半夜打开心仪女孩的 QQ 空间，欲一探究竟的时候，却告诉需要添加好友才能访问。这些都是我们日常生活中体现权限的地方，而在软件开发中，权限管理也是无处不在的产品设计功能，尤其是后台管理后台无法对权限管理避而不谈，今天尝试深入了解权限管理设计中最常用的 RBAC 模型。

权限模型

权限 二字从字面上可拆分为 权力+限制，从使用者的角度来说，也就是在限制的范围内正确地行驶权力，而站在设计者的角度来解读，则是通过合理的手段控制使用者能访问到他们能够访问到的资源。

在权限设计领域，最常见的权限模型有以下四种：

• ACL（Access Control List）：访问控制列表 用户 -> 权限
• RBAC（Role-Based Access Control）：基于 角色 的权限控制 用户 -> 角色 -> 权限
• ABAC（Attribute-Based Access Control）：基于 属性 的权限控制，该模型根据特殊的规则分配权限 （用户、资源、对象属性）-> 权限
• PBAC（Policy-Based Access Control）：基于 策略 的权限控制，用户（组）隶属于角色，角色隶属于资源（项目）用户 -> 角色 -> （资源/项目 + 权限）

第一种 ACL 模型，权限能直接赋予用户，例如将查看订单列表（权限）赋予某位运营人员（用户）。但是这种模式的缺点在于，但用户量达到一定量级的时候，那么就需要对每个用户都进行一次授权操作，那么这个工作量就会相当大。

因此就出现了 RBAC 模型，这是软件设计中最常用的权限管理模型，相比于 ACL 模型，RBAC 模型在用户与权限之间多了一个元素「角色」，通过权限关联角色、角色关联用户的方法来间接地赋予用户权限，从而实现用户与权限的解耦。

后两种大概知道就行，因为一般不会用到，详情可自行 Google 了解。

在人类社会大分工越来越精细的大背景下，各式各样的软件技术公司层出不穷，为各行各业提供着或大众化或具有特色的软件服务，大部分软件服务是公有性质的，也就是这些服务提供商内部单独的运营软件平台，使用者获取软件使用权后在其平台生产内容，并由服务商提供数据存储服务，这种性质的平台对于软件开发商来说需要考虑数据的隔离，对于使用者来说则减少了维护成本，但是数据并非私自存储无法确保安全性。而相对于公有性软件服务的就是私有化软件服务，这类型产品提供可部署至客户私自的服务器上的版本，数据由客户自身存储，某种程度上保证的了数据的安全性。

在 PPmoney 内部，龙猫 X 配置平台提供给理财及借贷两个技术团队使用，对于页面、模版、组件、素材都需要在公共空间进行共享存储，而现有的人员权限机制无法对这些要素进行筛选区分，无可避免出现管理混乱的局面。而根据不同的团队、不同的部署环境进行系统部署也是需求的关注点。考虑到对数据的隔离，以及未来龙猫 X 作为软件服务对外提供商业性质的服务，为龙猫 X 增强可独立部署的功能的事宜即提上开发的日程。

在对龙猫 X 的独立部署的技术选型上我们选择了 Docker 容器化技术。之所以选择 Docker 是因为容器技术对进程进行封装隔离，能够高效地在利用服务器资源以及便捷地在多平台间进行迁移。

在这篇文章中我尝试把容器化改造过程中遇到的坑位记录下来为后人提供借鉴，也是对整个坎坷的过程的记录。

大纲：

• 基于龙猫 X 事件机制生成事件链列表
• 使用 Egg 和 Socket.IO 搭建自动化测试服务
• 利用 Puppeteer 进行自动化测试
• 测试用例的执行方案研讨

龙猫 X 作为服务于产品、运营、开发的页面搭建平台，通过可视化的拖拽、配置生成业务所需的各种页面。在日常的开发中，大多数情况下都是由运营直接完成需求，或是运营产品直接提交工单后由开发进行完成，测试在评审阶段的参与率不高。这就导致测试在功能页面的测试中无法全方位地检测页面的功能效果，同时也由于龙猫 X 项目测试少有参与，测试参与的多是经由龙猫 X 生成的页面的功能测试，所以测试对于龙猫 X 页面的内在逻辑也缺乏了解。因此，为测试方提供能掌握龙猫 X 页面逻辑关系的工具对提升页面的运行质量具有重要意义。

本文针对上述情况，团队开发出针对龙猫 X 的事件链自动化测试方案，由于与业务耦合度极高，可能对其他公司团队未必具有通用性，权当技术方案参考与交流。