前端知识分享-前端权限管理
前端权限控制思路界面控制登录请求中获取权限数据,根据权限展示对应菜单。
用户未登录时,手动敲入管理界面地址,需跳转到登录界面
用户已登录时,手动敲入非权限地址,需跳转 404 界面
按钮控制仅显示有权操作的按钮,或禁用无权操作的按钮
请求与响应控制对于非常规操作,如通过浏览器调试工具将某些禁用的按钮变成启用状态,此时发请求也应该被前端拦截
Vue 前端实现界面控制界面控制的实现方法是动态路由。用户登录后获取用户有权操作的菜单列表,前端在进行路由构建的时候将用户有权操作的路由添加到 vue-router 中,这样即便用户手动输入无权界面的地址也会因为没有在 vue-router 中添加该路由而返回 not found。
1、用户登录获取菜单列表
2、将用户菜单列表存储到 pinia 中
3、通过 pinia 中的数据构建菜单栏
注意事项:网页刷新后 pinia 的数据也会被刷新,如果构建菜单栏时使用的 pinia 的数据,会出现菜单无法构建的情况。
解决方式:通过将用户菜单权限信息存储在 sessionstroage 中或通过 pinia 持久化来解决
登录成功后:
123456789c ...
Vite-插件
插件Vite会在生命周期的不同阶段调用不同的插件以达到不同的目的。
vite-aliases插件作用vite-aliases插件可以帮我们自动生成别名:帮我们检测src下的目录并生成别名,省去了自己配置alias的繁琐过程。
使用1234567891011121314import { ViteAliases } from 'vite-aliases'export default defineConfig(({ command, mode }) => { return { // resolve:{ // alias:{ // "@":path.resolve(__dirname,"./src"),//用@符号表示src目录 // "@assets":path.resolve(__dirname,"./src/assets") // } ...
Vite-静态资源与别名配置
静态资源vite对大多数静态资源都是开箱即用的
图片导入图片可以直接获取图片路径:
12import imageUrl from "./src/assets/images/1.webp"console.log(imageUrl) //为图片路径
json导入json可以直接得到反序列化后的对象:
123import adminConfig from "./src/assets/jsons/adminConfig.json"console.log(adminConfig)//得到一个反序列化的对象console.log(adminConfig.delete)
这种写法在生产环境性能差并且非常臃肿,因为导入了一个对象中的全部内容,不利于摇树优化。在生产环境应尽量控制导入的数量,可以使用以下写法:
12import { add } from "./src/assets/jsons/adminConfig.json"console.log(add)
svgsvg源码如下:
123<svg width=&qu ...
Vite-对CSS的支持
Vite处理CSS处理简单css当我们写出以下代码并通过vite启动:index.html
12<div class="name">秋华软创</div><script src="./main.js" type="module"></script>
main.js
1import "./index.css"
index.css
1234.name{ color: blue; font-size: large;}
vite会做以下内容:读取到main.js中引入了index.css通过fs读取index.css中的内容创建style标签包裹css文件中的内容将style标签插入html的head中将css中的文件替换为js脚本(方便热更新或css模块化),同时设置Content-Type为js(和读取vue文件同理),让浏览器以脚本方式执行css后缀的文件
CSS模块化1、当有多个css文件定义了相同的类名就会造成类名冲突,可以通过 ...
Vite-环境变量
更好的配置Vitevite.config.js文件是在node环境下运行的,vite会将es模块化语法替换为commonjs模块化语法,所以我们可以使用import xxx from xxx的方式来写。创建vite.config.js文件,文件内部写法如下:
12345678910111213import { defineConfig, optimizeDeps } from"vite";exportdefault defineConfig(({ command }) => { console.log(process.env) //command:"build/serve" if (command == "build") { //生产环境的配置 return { optimizeDeps: [], //写在数组里面的依赖不进行依赖预处理 }; } else { //开发环境的配置 ...
Vite-Vite做了什么事
构建工具是什么1、企业开发中可能涉及以下内容:TypeScript:tscVue/React:vue-complier、react-complierLess/Sass:less-loader、sass-loader语法降级:babel体积压缩:uglifyjs浏览器只认识css、js、html,每次修改代码都需要通过以上工具将所有代码重新编译一遍,非常麻烦,Vite帮我们解决了这个问题。2、直接支持从node_modles中引包,解决CommonJs模块化和ES6模块化不兼容的问题。3、热更新4、自带开发服务器,解决跨域问题。
Vite对比WebPackWebPack:分析出文件的所有导入与导出,将CommonJs模块化和ES6模块化通过webpack_require函数变成统一的模块化代码,并包裹成立即执行函数。这意味着它将所有的文件都读了一遍,项目启动速度会非常慢,但是可以兼容浏览器端和服务器端。Vite:基于ES6模块化不支持CommmonJs模块化(新版本好像支持了),所以不需要把所有文件都读一遍,启动速度非常快。
Vite脚手架和Vite的区别当执行:
1 ...
Python-Modbus通信
PyModbus库概念PyModbus广泛用于基于Python语言进行Modbus通信,该库支持使用异步和同步两种方式进行调用且函数使用方式没有任何区别。PyModbus支持ModbusRTU、ModbusTCP、ModbusTLS、ModbusUDP四种连接方式,本文主要介绍RTU与TCP的通信方式。
简单使用ModbusTCP通信方式如下:
12345678from pymodbus.client import ModbusTcpClientclient = ModbusTcpClient('MyDevice.lan') # Create client objectclient.connect() # connect to device, reconnect automaticallyclient.write_coil(1, True, slave=1) # set information in deviceresult = client.read_coils(2, 3, slave=1) ...
SQLite3-事务
事务 Transaction概念事务是一个对数据库执行工作单元。事务是以逻辑顺序完成的工作单位或序列,可以是由用户手动操作完成,也可以是由某种数据库程序自动完成。
事务是指一个或多个更改数据库的扩展。例如,如果您正在创建一个记录或者更新一个记录或者从表中删除一个记录,那么您正在该表上执行事务。重要的是要控制事务以确保数据的完整性和处理数据库错误。
实际上,您可以把许多的 SQLite 查询联合成一组,把所有这些放在一起作为事务的一部分进行执行
事务的属性事务(Transaction)具有以下四个标准属性,通常根据首字母缩写为 ACID:
原子性(Atomicity):确保工作单位内的所有操作都成功完成,否则,事务会在出现故障时终止,之前的操作也会回滚到以前的状态。
一致性(Consistency):确保数据库在成功提交的事务上正确地改变状态。
隔离性(Isolation):使事务操作相互独立和透明。
持久性(Durability):确保已提交事务的结果或效果在系统发生故障的情况下仍然存在。
事务控制使用下面的命令来控制事务:
BEGIN TRANSACTION:开始事务处理。
COMM ...
SQLite3-视图
视图概念视图只不过是通过相关的名称存储在数据库中的一个 SQLite 语句。视图(View)实际上是一个以预定义的 SQLite 查询形式存在的表的组合。
视图可以包含一个表的所有行或从一个或多个表选定行。视图(View)可以从一个或多个表创建,这取决于要创建视图的 SQLite 查询。、
视图是一种虚表,允许用户实现以下几点:
用户或用户组查找结构数据的方式更自然或直观。
限制数据访问,用户只能看到有限的数据,而不是完整的表。
汇总各种表中的数据,用于生成报告。
SQLite 视图是只读的,因此可能无法在视图上执行 DELETE、INSERT 或 UPDATE 语句。但是可以在视图上创建一个触发器,当尝试 DELETE、INSERT 或 UPDATE 视图时触发,需要做的动作在触发器内容中定义。
语法SQLite 的视图是使用 CREATE VIEW 语句创建的。SQLite 视图可以从一个单一的表、多个表或其他视图创建:
1234CREATE [TEMP | TEMPORARY] VIEW view_name ASSELECT column1, column2.....FROM t ...
SQLite3-索引
索引概念索引(Index)是一种特殊的查找表,数据库搜索引擎用来加快数据检索。简单地说,索引是一个指向表中数据的指针。一个数据库中的索引与一本书的索引目录是非常相似的。
拿汉语字典的目录页(索引)打比方,我们可以按拼音、笔画、偏旁部首等排序的目录(索引)快速查找到需要的字。
索引有助于加快 SELECT 查询和 WHERE 子句,但它会减慢使用 UPDATE 和 INSERT 语句时的数据输入。索引可以创建或删除,但不会影响数据。
使用 CREATE INDEX 语句创建索引,它允许命名索引,指定表及要索引的一列或多列,并指示索引是升序排列还是降序排列。
索引也可以是唯一的,与 UNIQUE 约束类似,在列上或列组合上防止重复条目。
语法单列索引:
12CREATE INDEX index_name ON table_name (column_name);
唯一索引:
12CREATE UNIQUE INDEX index_nameon table_name (column_name);
联合索引:
12CREATE INDEX index_nameon table_name (c ...