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

记录时间：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 来组织和管理状态逻辑，包括响应式数据、计算属性和生命周期钩子。此外，组件还处理了错误情况，并在获取配置失败时设置了重试机制。代码在逻辑上是完整和自洽的，没有明显的逻辑或语法错误。

翻译

搜索

复制