🎮 MCJPG 服务器列表

<script setup>
import { ref, onMounted } from 'vue'

const servers = ref([])
const types = ref([])
const versions = ref([])
const loading = ref(true)

onMounted(async () => {
  try {
    const response = await fetch('https://serverlist.mcjpg.org/servers.json')
    const data = await response.json()
    
    servers.value = data.servers
    types.value = data.types
    versions.value = data.versions
  } catch (error) {
    console.error('获取失败：', error)
  } finally {
    loading.value = false
  }
})
</script>

<template>
  <div v-if="loading">加载中...</div>
  <div v-else>
    <h2>共有 {{ servers.length }} 个服务器</h2>
    <div v-for="server in servers" :key="server.id">
      {{ server.name }}
    </div>
  </div>
</template>

import { useState, useEffect } from 'react'

function ServerList() {
  const [data, setData] = useState({ 
    servers: [], 
    types: [], 
    versions: [] 
  })
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    fetch('https://serverlist.mcjpg.org/servers.json')
      .then(res => res.json())
      .then(data => {
        setData(data)
        setLoading(false)
      })
      .catch(err => console.error(err))
  }, [])

  if (loading) return <div>加载中...</div>

  return (
    <div>
      <h1>服务器列表</h1>
      <p>共有 {data.servers.length} 个服务器</p>
      {data.servers.map(server => (
        <div key={server.id}>{server.name}</div>
      ))}
    </div>
  )
}