当前位置: 首页 > news >正文

vue3+vite一个IP对站点名称的前端curd更新-会议系统优化

在这里插入图片描述
vue3-tailwind-todo
https://github.com/kgrg/vue3-tailwind-todo
基于这个项目,把ip到sta的映射做了前端管理.
核心代码是存储和获得的接口,需要flask提供.

def  redis2ipdic():global ipdicipdic.clear()tmdic=cl.hgetall(IPDIC_KEY)for k in tmdic.keys():ipdic[k.decode() ]=tmdic[k].decode()return ipdic>>>>baidu serch:python  hgetall  bytest  string. AI give this:
>>>> hash_data = {k.decode('utf-8'): v.decode('utf-8') for k, v in r.hgetall('myhash').items()}
print(hash_data)def ipdic2redis():global ipdic# 将字典保存到Redis的哈希中cl.delete(IPDIC_KEY)cl.hmset(IPDIC_KEY,ipdic)

本地变量ipdic,被flask使用,redis里的ipdic_key被rust使用,需要他们同步,不清楚flask多线程怎么安全,应该就是不安全的

@app.route('/api/getipdic')
def getipdic():return json.dumps(redis2ipdic())    
@app.route('/api/setipdic',methods=['POST'])    
def setipdic():global ipdicpostagr = request.get_json()    ipdic.clear()for i in postagr:ipdic[i['IP']]=i['sta']ipdic2redis()restartRust() # print(ipdic)    # ipdic=json.loads(postagr)return json.dumps({"OK":len(ipdic)})    

后端基本就完成了

在项目vite.config.ts,js加入

export default defineConfig({  server: {proxy: {// 字符串简写写法'/foo': 'http://localhost:4567',// 选项写法'^/api/.*': {target: 'http://myserver/',changeOrigin: true,rewrite: (path) => path },},
},

改变save 的和load的逻辑
在src/shared/server/index.ts

import type { Todo } from '@/modules/todo/types/todo'
import { promises } from 'dns'
import { json } from 'stream/consumers'
import { ref  } from 'vue'
const STORAGE_KEY = 'todos'export class StorageError extends Error {constructor(message: string, public code: string) {super(message)this.name = 'StorageError'}
}
// StorageService.getTodos().then(data=>
//   {
//     this.todos =data
//   }
async function fetchData(url:string): Promise<string> {try {const response = await fetch(url);if (!response.ok) {throw new Error('Network response was not ok');}return await response.text();// 等待JSON解析完成} catch (error) {console.error('Fetch error:', error);throw error; // 可以选择重新抛出错误以便上层调用者处理}
}
export const StorageService = {
async  getTodos(): Promise<Todo[]> {try {const datastr=await fetchData("/api/getipdic")const dic:Todo[]=[]const data=JSON.parse(datastr);    var id=1for (const  i in data){const me:Todo={ "id":String(id++),"IP":i, "sta":data[i]}  dic.push(me )}return dic// localStorage.setItem(STORAGE_KEY,JSON.stringify(dic))// return } catch (error) {const stored = localStorage.getItem(STORAGE_KEY) return  stored?JSON.parse(stored):[]throw new StorageError('Failed to load todos from storage','STORAGE_READ_ERROR')}},saveTodos(todos: Todo[]) {try {localStorage.setItem(STORAGE_KEY, JSON.stringify(todos))const re= fetch('./api/setipdic', { method: 'POST', body: JSON.stringify(todos), headers: { 'Content-Type': 'application/json' } }).then(re=>{if (re.ok)re.json().then(data=>{console.log(data)})elsealert ("同步失败saveTodos")});} catch (error) {throw new StorageError('Failed to save todos to storage','STORAGE_WRITE_ERROR')}}
}

运行.然后在src/App.vue去掉routeview.
换homeview.因为否则build的index.html无法改名.

<script setup lang="ts">
//import { RouterView } from 'vue-router'
//<RouterView />
import HomePage from '@/modules/todo/views/HomePage.vue'
</script><template><HomePage />
</template>

工作完成.

相关文章:

vue3+vite一个IP对站点名称的前端curd更新-会议系统优化

vue3-tailwind-todo https://github.com/kgrg/vue3-tailwind-todo 基于这个项目,把ip到sta的映射做了前端管理. 核心代码是存储和获得的接口,需要flask提供. def redis2ipdic():global ipdicipdic.clear()tmdiccl.hgetall(IPDIC_KEY)for k in tmdic.keys():ipdic[k.decode() …...

GraalVM完全指南:云原生时代下使用GraalVM将Spring Boot 3应用转换为高效Linux可执行文件

一、前言 在现代软件开发中,启动速度和资源利用率常常是衡量应用性能的关键指标。对于基于Spring Boot的应用来说,虽然它们易于开发和部署,但JVM的启动时间有时会成为一个瓶颈。本文介绍如何使用GraalVM将Spring Boot 3应用编译成原生Linux可执行文件,从而显著提高启动速度…...

《Swift 字面量》

《Swift 字面量》 介绍 在 Swift 编程语言中&#xff0c;字面量是一种表示源代码中固定值的表达方式。字面量可以直接表示数字、字符串、布尔值等基本数据类型&#xff0c;为编程提供了简洁和直观的方式。Swift 支持多种类型的字面量&#xff0c;包括整数字面量、浮点数字面量…...

国标GB28181平台EasyGBS在安防视频监控中的信号传输(电源/视频/音频)特性及差异

在现代安防视频监控系统中&#xff0c;国标GB28181协议作为公共安全视频监控联网系统的国家标准&#xff0c;该协议不仅规范了视频监控系统的信息传输、交换和控制技术要求&#xff0c;还为不同厂商设备之间的互联互通提供了统一的框架。EasyGBS平台基于GB28181协议&#xff0c…...

AlipayHK支付宝HK接入-商户收款(PHP)

一打开支付宝国际版 二、点开商户服务 三、下载源码...

CS!GO

CS&#xff08;computer science&#xff09;计算机科学&#xff0c;说实话&#xff0c;不是找工作面试&#xff0c;这些题谁会背啊&#xff0c;反正我不行&#xff0c;一问三不知。 咱也不管这些&#xff0c;这个系列&#xff0c;可能会时不时的给出一些计网和操作系统相关的东…...

全栈开发中的技术选型决策:快速上线与扩展的平衡

文章目录 摘要引言技术选型的重要性技术选型的关键考虑点项目需求团队技能技术生态性能与扩展性成本与复杂性 基于 Spring Boot 和 Vue.js 的全栈架构后端代码&#xff1a;Spring Boot 示例代码详解&#xff1a;运行原理&#xff1a; 前端代码&#xff1a;Vue.js 示例代码详解&…...

软件著作权申请教程(超详细)(2024新版)软著申请

目录 一、注册账号与实名登记 二、材料准备 三、申请步骤 1.办理身份 2.软件申请信息 3.软件开发信息 4.软件功能与特点 5.填报完成 一、注册账号与实名登记 首先我们需要在官网里面注册一个账号&#xff0c;并且完成实名认证&#xff0c;一般是注册【个人】的身份。中…...

【强化学习】Stable-Baselines3学习笔记

【强化学习】Stable-Baselines3学习笔记 Stable-Baselines3是什么安装ExampleReinforcement Learning Tips and TricksVecEnv相关 Stable-Baselines3是什么 Stable Baselines3&#xff08;简称SB3&#xff09;是一套基于PyTorch实现的强化学习算法的可靠工具集旨在为研究社区和…...

sqoop的参数有哪些?

Sqoop 是一款用于在 Hadoop 与关系型数据库之间进行数据传输的工具&#xff0c;它有很多参数&#xff0c;可分为通用参数、导入参数和导出参数等&#xff0c;以下是一些常见的参数介绍&#xff1a; 通用参数 --connect 说明&#xff1a;指定要连接的关系型数据库的 JDBC URL。…...

16×16LED点阵字符滚动显示-基于译码器与移位寄存器(设计报告+仿真+单片机源程序)

资料下载地址&#xff1a;​1616LED点阵字符滚动显示-基于译码器与移位寄存器(设计报告仿真单片机源程序)​ 1、功能介绍 设计1616点阵LED显示器的驱动电路&#xff0c;并编写程序实现在1616点阵LED显示器上的字符滚动显示。1616点阵LED显示器可由4块88点阵LED显示器构成。可采…...

后门移除方法和后门检测

1、后门移除方法 1.1、Fine-Pruning方法 [48]利用了这样一个观察结果&#xff1a;后门攻击会利用神经网络中的空闲容量。该方法通过消除在干净输入下处于休眠状态的神经元来减小网络的规模&#xff0c;然后对网络进行微调(使用干净数据继续训练)&#xff0c;以增强对抗修剪感…...

网络安全检测

实验目的与要求 (1) 帮助学生掌握木马和入侵的防护和检测方法、提高学习能力、应用能力和解决实际问题的能力。 (2) 要求学生掌握方法, 学会应用软件的安装和使用方法, 并能将应用结果展示出来。 实验原理与内容 入侵检测是通过对计算机网络或计算机系统中若干关键点收集信…...

FPGA(一)verilog语句基础

Verilog 是一种硬件描述语言&#xff08;HDL&#xff09;&#xff0c;常用于数字电路的设计、模拟和验证&#xff0c;特别是用于 FPGA 和 ASIC 的设计。Verilog 让设计者能够描述和模拟硬件系统的行为和结构&#xff0c;最终将其转化为硬件电路。 一、模块结构 Verilog 中的设计…...

istio配置重复的svc报错

现象&#xff1a; 两个vs中配置了同一个svc地址&#xff0c;导致其中的一个vs路由配置不生效&#xff0c;看到istiod服务的报错duplicate domain from service 解决&#xff1a; istiod服务报错日志 2024-11-13T14:54:50.39418167508:00 "pilot_vservice_dup_doma…...

springboot473基于web的物流管理系统(论文+源码)_kaic

摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统物流管理系统信息管理难度大&#xff0c;容错率低&#x…...

面试题整理7----Nginx的access.log被删除在不影响应用的情况下恢复日志的写入

面试题整理7----Nginx的access.log被删除在不影响应用的情况下恢复日志的写入 1. 问题2. 问题复现2. 释放空间2.1 确定nginx的pid2.2 确定文件描述符号2.3 清空文件 3. 恢复access.log的写入4. 后续改善 1. 问题 这是一个非常常见的故障处理. 应用负责人发现服务器磁盘满了,经…...

ip_forward函数

ip_forward 函数是 Linux 内核中用于处理 IP 数据包转发的重要函数。它负责将数据包从一个网络接口转发到另一个网络接口。以下是这个函数的一些关键点和工作流程的概述: 1. **数据包接收**:当一个数据包到达网络设备(如以太网卡)时,内核会首先接收到这个数据包。 2. **路…...

华院计算参与项目再次被《新闻联播》报道

12月17日&#xff0c;央视《新闻联播》播出我国推进乡村振兴取得积极进展。其中&#xff0c;华院计算参与的江西省防止返贫监测帮扶大数据系统被报道&#xff0c;该系统实现了由原来的“人找人”向“数据找人”的转变&#xff0c;有效提升监测帮扶及时性和有效性&#xff0c;守…...

postman关联接口用于登录(验证码会变情况)

目录 一、介绍 二、操作步骤 (一)Fiddler抓取到登录信息 (二)postman发送请求 新建请求一&#xff1a;登录值请求 (三)易变值赋值固定住 新建请求二&#xff1a;易变值验证码(uuid)请求 切换到请求一里面进行赋值绑定 一、介绍 接口有两种形式&#xff0c;一种是单…...

《探秘 Qt Creator Manual 4.11.1》

《探秘 Qt Creator Manual 4.11.1》 一、Qt Creator 4.11.1 概述二、功能特性全解析&#xff08;一&#xff09;跨平台能力展示&#xff08;二&#xff09;代码编辑优势&#xff08;三&#xff09;版本控制集成&#xff08;四&#xff09;特定 Qt 功能呈现&#xff08;五&#…...

linux(ubuntu )卡死怎么强制重启

&#xff08;公司的 ubuntu 跑个用例经常卡死&#xff09; 如果其他快捷键都没有反应&#xff0c;且不想按电源键进行硬重启&#xff0c;可以尝试以下方法&#xff1a; 1. 使用 Magic SysRq 键 Magic SysRq 键可以在系统完全卡死的情况下&#xff0c;执行一些强制操作来重启…...

优化程序中的数据:从数组到代数

前言 我们往往都希望优化我们的程序&#xff0c;使之达到一个更好的效果&#xff0c;程序优化的一个重点就是速度&#xff0c;加快速度的一个好办法就是使用并行技术&#xff0c;但是&#xff0c;并行时我们要考虑必须串行执行的任务&#xff0c;也就是有依赖关系的任务&#…...

图像配准有哪些技术?

目录 图像配准技术 1.基于特征的图像配准 2.基于强度的图像配准 3.基于模型的图像配准 4.基于学习的图像配准 5.混合方法 图像配准的应用 图像配准技术入门 常见问题解答 图像配准是计算机视觉和医学成像中的一项关键技术&#xff0c;用于将多幅图像对齐到一个共同的坐…...

第五节:GLM-4v-9b模型model加载源码解读(模型相关参数方法解读)

文章目录 前言一、GLM-4v-9b模型model加载源码解读1、GLM-4v-9b模型model加载主函数源码2、GLM-4v-9b模型model加载源码源码解读3、GLM-4v-9b自定义模型类源码解读 二、基于GLM-4v-9b模型获取模型输入参数等内容源码解读(from_pretrained-->huggingface)1、from_pretrained函…...

Unity3D仿星露谷物语开发7之事件创建动画

1、目标 掌握事件通知的Publisher - Subscriber设计模式&#xff0c;并通过事件通知触发动画。 2、发布者/订阅者模式 首先&#xff0c;定义事件Event 然后&#xff0c;Publisher触发事件 最后&#xff0c;Subscriber订阅事件并进行处理 &#xff08;1&#xff09;创建动作…...

学校知网中的加锁论文下载不了怎么办

最近有同学求助在学校下载知网论文&#xff0c;有加锁标识的论文下载不了。这是因为各高校订购的都不是数据库全库&#xff0c;加锁的论文是超出订购范围的资源所以下载不了。下面就来讲下解决办法&#xff1a; 首先选一个涵盖数据库多&#xff0c;各个数据库资源权限高的文献…...

算法 双指针技巧

文章目录 双指针[leetcode167 两数之和](https://leetcode.cn/problems/two-sum-ii-input-array-is-sorted/description/)分析题解 [leetcode88 合并两个有序数组](https://leetcode.cn/problems/merge-sorted-array/description/)分析题解 [leetcode142 环形链表](https://lee…...

Spring Boot注解总结大全【案例详解,一眼秒懂】

SpringBootApplication 功能&#xff1a;这是Spring Boot应用的核心注解&#xff0c;它是一个组合注解&#xff0c;实际上相当于同时使用了Configuration、EnableAutoConfiguration和ComponentScan。它标记在主应用类上&#xff0c;用于开启Spring Boot的自动配置功能&#xff…...

手动修改nginx-rtmp模块,让nginx-rtmp-module支持LLHLS

文章目录 1. 背景2. 开发环境搭建2.1 ffmpeg在ubuntu上安装2.2 nginx-rtmp-module在ubuntu上安装2.3 安装vscode环境2. 修改nginx-rtmp-module2.1 主要更新内容2.2 新增配置项2.3 代码更新3. LLHLS验证方法3.1 配置验证3.2 功能验证4. 注意事项5. 已知问题6. 后续计划1. 背景 …...

在Visual Studio 2022中配置C++计算机视觉库Opencv

本文主要介绍下载OpenCV库以及在Visual Studio 2022中配置、编译C计算机视觉库OpenCv的方法 1.Opencv库安装 ​ 首先&#xff0c;我们需要安装OpenCV库&#xff0c;作为一个开源库&#xff0c;我们可以直接在其官网下载Releases - OpenCV&#xff0c;如果官网下载过慢&#x…...

Unity全局雾效

1、全局雾效是什么 全局雾效&#xff08;Global Fog&#xff09;是一种视觉效果&#xff0c;用于在3D场景中模拟大气中的雾气对远处物体的遮挡 它通过在场景中加入雾的效果&#xff0c;使得距离摄像机较远的物体看起来逐渐被雾气覆盖&#xff0c;从而创造出一种朦胧、模糊的视…...

2024 高频 Java 面试合集整理 (1000 道附答案解析)

2024 年马上就快要过去了&#xff0c;总结了上半年各类 Java 面试题&#xff0c;初中级和中高级都有&#xff0c;包括 Java 基础&#xff0c;JVM 知识面试题库&#xff0c;开源框架面试题库&#xff0c;操作系统面试题库&#xff0c;多线程面试题库&#xff0c;Tcp 面试题库&am…...

Java CPU飙升 排查

一、概述 CPU 是整个电脑的核心计算资源&#xff0c;CPU的最小执行单元是 线程&#xff1b; 在现代操作系统中&#xff0c;进程和线程是两种主要的调度单位&#xff1b; 进程是程序中正在运行的一个应用程序&#xff0c;而线程是系统分配处理器时间资源的基本单位。一个进程至少…...

vue中的css深度选择器v-deep 配合!important

当 <style> 标签有 scoped 属性时&#xff0c;它的 CSS 只作用于当前组件中的元素&#xff0c;父组件的样式将不会渗透到子组件。 如果你希望 scoped 样式中的一个选择器能够作用得“更深”&#xff0c;例如影响子组件&#xff0c;你可以使用深度选择器。 ::v-deep { } 举…...

设计模式--工厂方法模式【创建型模式】

设计模式的分类 我们都知道有 23 种设计模式&#xff0c;这 23 种设计模式可分为如下三类&#xff1a; 创建型模式&#xff08;5 种&#xff09;&#xff1a;单例模式、工厂方法模式、抽象工厂模式、建造者模式、原型模式。结构型模式&#xff08;7 种&#xff09;&#xff1…...

K8S Ingress 服务配置步骤说明

部署Pod服务 分别使用kubectl run和kubectl apply 部署nginx和tomcat服务 # 快速启动一个nginx服务 kubectl run my-nginx --imagenginx --port80# 使用yaml创建tomcat服务 kubectl apply -f my-tomcat.yamlmy-tomcat.yaml apiVersion: apps/v1 kind: Deployment metadata:n…...

32. 线程、进程与协程

一、什么是多任务 如果一个操作系统上同时运行了多个程序&#xff0c;那么称这个操作系统就是 多任务的操作系统&#xff0c;例如&#xff1a;Windows、Mac、Android、IOS、Harmony 等。如果是一个程序&#xff0c;它可以同时执行多个事情&#xff0c;那么就称为 多任务的程序。…...

华为实训课笔记 2024 1223-1224

华为实训 12/2312/24 12/23 [Huawei]stp enable --开启STP display stp brief --查询STP MSTID Port Role STP State Protection 实例ID 端口 端口角色 端口状态 是否开启保护[Huawei]display stp vlan xxxx --查询制定vlan的生成树计算结…...

麒麟信安参编的《能源企业数字化转型能力评价 技术可控》团体标准发布

近日&#xff0c;中国能源研究会发布公告&#xff0c;《能源企业数字化转型能力评价 技术可控》团体标准发布。该标准由麒麟信安与国网湖北省电力有限公司武汉供电公司、国网智能电网研究院有限公司、中能国研&#xff08;北京&#xff09;电力科学研究院等单位联合编制。 《能…...

绿色环保木塑复合材料自动化生产线设计书

《绿色环保木塑复合材料自动化生产线设计书》 一、项目概述 随着全球对环境保护和可持续发展的日益重视,绿色环保材料的研发与生产成为了热门领域。木塑复合材料作为一种新型的绿色环保材料,它将木材纤维与塑料通过特定工艺复合而成,兼具木材与塑料的双重特性,具有防水、…...

渗透测试-前端加密分析之RSA加密登录(密钥来源服务器)

本文是高级前端加解密与验签实战的第6篇文章&#xff0c;本系列文章实验靶场为Yakit里自带的Vulinbox靶场&#xff0c;本文讲述的是绕过RSA加密来爆破登录。 分析 这里的代码跟上文的类似&#xff0c;但是加密的公钥是通过请求服务端获取的 http://127.0.0.1:8787/crypto/js/…...

数据应用与数据平台如何测试?与普通测试有什么不同?

首先我们一起了解一下数据应用测试的对象是什么。第一个是数据报表这一块&#xff0c;数据报表包含了我们常见的业务分析报表、经常能看到的一些数据大屏之类。 第二块是数据平台&#xff0c;数据应用平台主要有一些智能营销平台&#xff0c;比如说画像分析平台&#xff0c;自助…...

基于Qlearning强化学习的机器人路线规划matlab仿真

目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下&#xff08;完整代码运行后无水印&#xff09;&#xff1a; 训练过程 测试结果 仿真操作步骤可参考程序配套的操作视频。 2.算法涉及理论…...

零基础微信小程序开发——小程序的宿主环境(保姆级教程+超详细)

&#x1f3a5; 作者简介&#xff1a; CSDN\阿里云\腾讯云\华为云开发社区优质创作者&#xff0c;专注分享大数据、Python、数据库、人工智能等领域的优质内容 &#x1f338;个人主页&#xff1a; 长风清留杨的博客 &#x1f343;形式准则&#xff1a; 无论成就大小&#xff0c;…...

用Moninfo.exe轻松获取显示器EDID

我们天天在用显示器&#xff0c;但显示器的一些关键参数却总是记不住。有时为了配置电脑&#xff0c;有时为了发挥显示器的极限性能&#xff0c;有时为了定制驱动&#xff0c;等等&#xff0c;都需要获取显示器的EDID数据。有些工具虽然可以读出EDID&#xff0c;但难以解读那一…...

【开源库 | xlsxio】C/C++读写.xlsx文件,xlsxio 在 Linux(Ubuntu18.04)的编译、交叉编译

&#x1f601;博客主页&#x1f601;&#xff1a;&#x1f680;https://blog.csdn.net/wkd_007&#x1f680; &#x1f911;博客内容&#x1f911;&#xff1a;&#x1f36d;嵌入式开发、Linux、C语言、C、数据结构、音视频&#x1f36d; ⏰发布时间⏰&#xff1a; 2024-12-20 …...

全国青少年信息学奥林匹克竞赛(信奥赛)备考实战之分支结构(switch语句)

if语句处理多个分支时需要用if-else if结构&#xff0c;分支越多&#xff0c;嵌套的if语句层就越多&#xff0c;程序不但庞大、复杂&#xff0c;理解起来也比较困难。在C编程中&#xff0c;针对有些问题除了使用if-else if结构之外&#xff0c;还有switch语句也可以实现&#x…...

SQL Server数据库多主模式解决方案

SQL Server 本身并不直接支持多主模式(Multi-Master Replication),即多个数据库实例可以同时进行写操作,并且这些更改会自动同步到其他实例。不过,SQL Server 提供了多种高可用性和复制解决方案,可以实现类似多主模式的功能。以下是几种常见的方法: 1. Always On 可用性…...

如何训练Stable Diffusion 模型

训练Stable Diffusion模型是一个复杂且资源密集的过程&#xff0c;通常需要大量的计算资源&#xff08;如GPU或TPU&#xff09;和时间。Stable Diffusion是一种基于扩散模型的生成式AI&#xff0c;能够根据文本提示生成高质量的图像。它的训练过程涉及多个步骤&#xff0c;包括…...