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

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

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

def  redis2ipdic():
    global ipdic
    ipdic.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 ipdic
    postagr = 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=1
  for (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)
        })
        else
        alert ("同步失败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>

工作完成.


http://www.kler.cn/a/450154.html

相关文章:

  • 美国加州房价数据分析01
  • springboot项目对数据库密码加解密
  • 图像处理-Ch6-彩色图像处理
  • WebDavClient 安装和配置指南
  • 华为ensp--BGP路由反射器
  • 【魅力golang】之-通道
  • Spark-Streaming receiver模式源码解析
  • Redis实现延迟任务 + RedisUtil升级
  • 音频接口:PDM TDM128 TDM256
  • QT-简单视觉框架代码
  • Spring Security 自动踢掉前一个登录用户,一个配置搞定!,网易前端社招面经
  • 前端框架Vue的路由机制
  • 【已解决】黑马点评项目Redis版本替换过程中误删数据库后前端显示出现的问题
  • 基于 SOME/IP 的动态服务发现与调用:原理、实现与示例全解析
  • selenium学习笔记(一)
  • 软件测试之非功能测试设计
  • 自然语言编写的prompt为啥比不上编程语言prompt高效?
  • LeetCode 209. 长度最小的子数组 (C++实现)
  • 编译libtorch时报错:NvToolsExt Could not open input file ***nvToolsExt64_1.lib
  • javaScript中slice()和splice()的用法与区别
  • 重温设计模式--职责链模式
  • Android基于Path的addRoundRect,Canvas剪切clipPath简洁的圆角矩形实现,Kotlin(1)
  • CS!GO
  • 灰度测试是什么
  • 【NLP 17、NLP的基础——分词】
  • 用套接字的UDP,TCP知道什么是HTTP吗?