ssts-hospital-web-master项目实战记录八：App.vue组件实现

标签：web vue ssts value GetTerminalConfig API MainPage1 errormsg 组件

记录时间：2024-02-23

App.vue

<script setup lang="ts"> import { defineComponent, ref, computed, onMounted, onUnmounted } from 'vue' import MainPage1 from '@/views/main-page/main-page1.vue' import MainPage2 from '@/views/main-page/main-page2.vue' import MainPage3 from '@/views/main-page/main-page3.vue' import { clientWebApi, serveWebApi } from './service'
const errormsg = ref('') const mainpage = ref('MainPage1.html') const terminalIp = ref('') const terminalObject = ref() let retryIntervalId = 0 // 用于存储定时器的ID
// 定义获取终端配置的函数 async function GetTerminalConfig() {   try {     terminalIp.value = await clientWebApi('/api/System/GetIpAddress', {})     const terminalResponse = await serveWebApi(       '/api/Terminal/GetTerminalByTerminalIp',       {         terminalIp: terminalIp.value       }     )
    if (terminalResponse != null && terminalResponse.length > 0) {       terminalObject.value = terminalResponse[0]       mainpage.value = terminalResponse[0].MainPageUrl
      errormsg.value = ''       clearInterval(retryIntervalId) // 成功获取后清除定时器     } else {       errormsg.value = `IP地址：${terminalIp.value}设置错误或没有访问权限！`     }   } catch (error) {     errormsg.value = '获取终端配置时发生错误！'   }
  if (errormsg.value != '') {     retryIntervalId = setInterval(GetTerminalConfig, 60000) // 设置每分钟重试一次   } }
// 在组件加载时调用GetTerminalConfig onMounted(GetTerminalConfig)
// 在组件卸载时清除定时器 onUnmounted(() => {   if (retryIntervalId) {     clearInterval(retryIntervalId)   } })
const currentComponent = computed(() => {   switch (mainpage.value) {     case 'MainPage1.html':       return MainPage1     case 'MainPage2.html':       return MainPage2     case 'MainPage3.html':       return MainPage3     default:       return MainPage1   } })
defineComponent({   name: 'App',   components: {     MainPage1,     MainPage2,     MainPage3   },   methods: {     GetTerminalConfig // 将方法暴露给模板或其他方法调用   } }) </script>
<template>   <div>     {{ errormsg }}     <component       :is="currentComponent"       :terminalIp="terminalIp"       :terminalObject="terminalObject"     />   </div> </template>
<style scoped></style>   【使用“文心一言”给出的说明】

说明阶段

以上代码是一个 Vue 3 的单文件组件 (Single File Component, SFC)，它定义了一个名为 "App" 的 Vue 组件。这个组件的主要功能是动态加载和显示不同的子页面（MainPage1, MainPage2, MainPage3），同时负责从后端API获取终端配置信息。组件使用了 Vue 3 的 Composition API 来组织和管理其逻辑。

细节分析阶段

1. 导入依赖
   • defineComponent, ref, computed, onMounted, onUnmounted 是从 Vue 库中导入的，用于定义组件、创建响应式数据、计算属性以及处理组件的生命周期钩子。
   • MainPage1, MainPage2, MainPage3 是子组件的导入，这些组件可能定义了具体的页面内容。
   • clientWebApi, serveWebApi 可能是自定义的API调用函数，用于从后端获取数据。
2. 定义响应式变量
   • errormsg 用于显示错误信息。
   • mainpage 存储当前应显示的主页面名称。
   • terminalIp 存储终端的IP地址。
   • terminalObject 存储从API获取的终端对象信息。
   • retryIntervalId 用于存储定时器的ID，以便在失败后重试。
3. GetTerminalConfig 函数
   • 这是一个异步函数，用于从后端API获取终端配置信息。
   • 函数内部使用 await 关键字等待 clientWebApi 和 serveWebApi 的异步调用结果。
   • 根据获取的数据更新响应式变量，并设置错误消息。
   • 如果获取成功，则清除重试定时器；如果失败，则设置重试定时器，每分钟尝试一次。
4. 生命周期钩子
   • onMounted(GetTerminalConfig) 在组件挂载后调用 GetTerminalConfig 函数，尝试获取终端配置。
   • onUnmounted 钩子在组件卸载时清除可能存在的重试定时器。
5. 计算属性 currentComponent
   • 这是一个计算属性，根据 mainpage 的值动态返回应显示的子组件。
6. 组件定义
   • 使用 defineComponent 定义组件，并注册组件名称和子组件。
   • methods 中注册了 GetTerminalConfig 函数，使其可以在模板或其他组件逻辑中被调用。
7. 模板部分
   • 模板中使用了插值表达式 {{ errormsg }} 来显示错误消息。
   • <component :is="currentComponent" ... /> 是动态组件，它的 is 属性绑定到计算属性 currentComponent，这样可以根据条件动态渲染不同的子组件。
   • 动态组件接收 terminalIp 和 terminalObject 作为 props，这些值从组件的响应式变量中传递。

总结阶段

总的来说，这个 Vue 组件通过异步获取后端API的终端配置信息，根据配置动态加载和渲染不同的子页面。组件利用 Vue 3 的 Composition API 来组织和管理状态逻辑，包括响应式数据、计算属性和生命周期钩子。此外，组件还处理了错误情况，并在获取配置失败时设置了重试机制。代码在逻辑上是完整和自洽的，没有明显的逻辑或语法错误。

翻译

搜索

复制

<iframe></iframe>

标签：web,vue,ssts,value,GetTerminalConfig,API,MainPage1,errormsg,组件
From： https://www.cnblogs.com/lizhigang/p/18028837