前端权限控制
管理系统之类的前端项目,权限控制几乎是标配,本文将以vue为例,稍微整理一下套路
路由权限: 用户登录后只能看到自己有权访问的菜单,也只能访问自己有权访问的路由地址,否则4xx初次加载只挂载无需权限的路由, 登陆后再挂载剩余的路由。
视图权限: 用户只能看到自己有权浏览的内容和有权操作的控件菜单与路由分开,由后端返回
接口权限: 路有可能配置失误,按钮可能忘加了权限,此时请求控制用来兜底,越权行为将在前端被拦截。一般使用JWT的方式验证,后端不通过直接401跳转登录。通过会返回token。前端拿到token后存储。之后的每一个请求都带上这个token即可。
React系列: 第一回(基础干货)
自本文开始,我们将逐步介绍react相关的所有内容。
是啥一个标准的数据驱动视图的前端开发框架。整体逻辑如下:
带来了啥?
声明式编码 + 虚拟dom + diff算法,一种编程范式,关注的是你要做什么,而不是如何做。主要区别之前jquery时代的开发模式,专注功能逻辑的开发,而无需关注dom实现。
组件化开发。基本标准:可组合、可维护、可复用
react-native中,使用js开发移动端应用
jsx语法JavaScript 中夹杂着 HTML 的语句在其中,称之为jsx语法,它是对 JavaScript 语法的扩展,jsx代码经过babel编译后,会生成React.createElement的调用,本质是React.createElement的语法糖。为了生成虚拟dom,两种写法:
// jsx
const element = <h1 className="title">Hello, React</h1>;
+ babel转换后,等同于下方 ↓
// React.createElement
const element = React.createElement( ...
HTTP版本演进:第四回
本文介绍HTTP3http1.x及http2都是基于tcp协议实现的应用层协议。同1.x比较,http2几乎解决了所有1.x的鸡肋点,除了必须的tcp三次握手。
HTTP/3的目标,是通过解决HTTP/2的传输相关问题,在所有形式的设备上提供快速、可靠和安全的Web连接。为此,它使用了一种不同的传输层网络协议,称为QUIC,该协议最初由Google开发的。
QUIC实际上就是在UDP基础上重写了TCP的功能,但是又比TCP更加智能,更高效的实现了TCP的核心功能。
四轴无人机研究:第二回
本文插个题外话,但是个人觉得很重要。电流供电后,电动机是怎么动起来的呢?即:电动机的工作原理
升力从何而来压强差。因为气流的高速流动,导致桨叶上方压强小于下方,形成压强差抬升飞机。一般四轴无人机斜角方向桨叶一致,两侧相反,负负得正。
方向如何控制一侧的压力高于另一侧。
Paperjs:坐标系相关
本文将详细介绍paperjs坐标相关的点在paperjs的坐标体系中,默认方向为右正下正,没记错的话,应该是同opencv一致。我们通常见到的右正上正的坐标系,是标准的笛卡尔坐标系。这是一点区别。那么如果现在我们要做一件事情,就是将paperjs的坐标系转换成标准笛卡尔坐标系,该如何实现呢?即使实现,对那些事件点击的操作有什么影响呢
首先我们老样子初始化那一套,然后把标准的缩放拖拽操作随意的加上,同时随意的加上图片、文本等:
图片、文本和矩形框位置信息如下:
showImg(new paper.Point(-200, -200), '@/assets/Sam.webp')
showText(new paper.Point(200, -200), '测试')
showRect(new paper.Point(-200, 200))
从坐标数据结合实际效果看出,这确实是标准的右正下正结构。
在上面的基础之上,我们借助matrix,将坐标系变更为标准的笛卡尔坐标系。关键代码:
this.project.view.matrix = new paper.Matrix().scale(1, -1 ...
前端数据库?sql.js
本文尽可能详细介绍sql.js。
sql.js为何方神圣?一个专门用于处理sqlite文件的前端数据处理库。它可以根据sqlite文件, 在内存中构造一个对象(虚拟数据库),然后我们可以使用类似sql语句的查询方式,输出我们想要的方式。示例代码如下:
import initSqlJs from 'sql.js'
export function openLocalSqliteDB(sqliteFileData, callback) {
const SQL = initSqlJs({
// TODO: replace with local file path
// locateFile: file => `https://sql.js.org/dist/${file}`
// should put `sql-wasm.wasm` to `public/dist/` folder
locateFile: file => `/dist/${file}`
}).then((SQL) ...
网络工程师:第一回
本系列文章开始,将会整理软考网络工程师的必备知识点,主要是为了拿下中级网工计算机分层结构物数网传会表应,各层各司其职,分工明确。详细如下所示:
一段信息从 A 机器到达 B 机器显示的过程,实质就是经历各层层层打标签,然后再层层去标签。当然上面分层结构主要是 OSI 的分层,在 tcpip 则分成了四层:物理层、网络层、传输层和应用层。核心概括:物理层传输比特流;数据链路层,提供节点到节点的传输, 将数据封装成数据帧;网络层主要是路由选择,将数据封装成数据包-package;传输层提供可靠或者不可靠的端到端的传输,将数据封装成数据报文,数据段;表示层,数据的压缩解压缩.
带宽相关计算
模拟信道: w = f2 - f1,单位 Hz.
数字信道无噪声:奈奎斯特定理 B = 2W(带宽),其中 B 为码元速率(单位时间内,传输的码元个数),单位为波特率。其中,B = 1 / T,T 为码元宽度(脉冲周期)。注意,若导线材质是确定,带宽就是确定的。无噪声情况下的极限速率:R(数据速率) = Blog2N = 2Wlog2N。其 ...
无线电研究:第二回
静噪电路:为了消除不同话或通话间歇时,音频输出端的噪音。静噪灵敏度: 能够使得静噪电路退出静噪状态的射频信号最小输入电频
频偏:调频波频率摆动的幅度“频偏就是调频波频率摆动的幅度,一般说的是最大频偏,它影响调频波的频谱带宽。
射频: 可以辐射到空间的电磁频率发射时产生射频能量辐射,接收或者待机不产生
短波传输是与电离层弹射实现,而米波和分米波是沿着地面传播。
纯前端处理yml文件数据
import yaml from 'js-yaml'
// 处理文件输出sql能接受的数据
async getFileToSqliteData(file) {
const rrr = await this.readFile(new Blob([file.raw]))
const parsedData = yaml.load(rrr) // 输出为 json 格式
return parsedData
},
async readFile(blob) {
const reader = new FileReader(blob)
const promise = new Promise((resolve, reject) => {
reader.onload = function() {
resolve(reader.result)
}
reader.onerror = functio ...
