fix: remove useless components
This commit is contained in:
@@ -1,127 +0,0 @@
|
||||
/* eslint-disable */
|
||||
<template>
|
||||
<div class="connection-test">
|
||||
<el-card>
|
||||
<template #header>
|
||||
<span>前后端连接测试</span>
|
||||
</template>
|
||||
<div v-if="loading">
|
||||
<el-icon class="is-loading"><Loading /></el-icon>
|
||||
正在测试连接...
|
||||
</div>
|
||||
<div v-else>
|
||||
<el-result
|
||||
:icon="connectionStatus.success ? 'success' : 'error'"
|
||||
:title="connectionStatus.title"
|
||||
:sub-title="connectionStatus.message"
|
||||
>
|
||||
<template #extra>
|
||||
<el-button type="primary" @click="testConnection">重新测试</el-button>
|
||||
</template>
|
||||
</el-result>
|
||||
|
||||
<div v-if="connectionStatus.success && apiData">
|
||||
<h3>API数据示例：</h3>
|
||||
<el-descriptions :column="2" border>
|
||||
<el-descriptions-item label="API状态">正常</el-descriptions-item>
|
||||
<el-descriptions-item label="响应时间">{{ responseTime }}ms</el-descriptions-item>
|
||||
<el-descriptions-item label="数据格式">JSON</el-descriptions-item>
|
||||
<el-descriptions-item label="CORS配置">已启用</el-descriptions-item>
|
||||
</el-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { healthService } from '../services/api'
|
||||
import { ElMessage } from 'element-plus'
|
||||
|
||||
export default {
|
||||
name: 'ConnectionTest',
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
connectionStatus: {
|
||||
success: false,
|
||||
title: '未测试',
|
||||
message: '点击测试按钮检查连接'
|
||||
},
|
||||
apiData: null,
|
||||
responseTime: 0
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
await this.testConnection()
|
||||
},
|
||||
methods: {
|
||||
async testConnection() {
|
||||
this.loading = true
|
||||
const startTime = Date.now()
|
||||
|
||||
try {
|
||||
const response = await healthService.checkBackendConnection()
|
||||
this.responseTime = Date.now() - startTime
|
||||
|
||||
this.connectionStatus = {
|
||||
success: true,
|
||||
title: '连接成功！',
|
||||
message: '前后端连接正常，API可以正常访问'
|
||||
}
|
||||
|
||||
this.apiData = response.data
|
||||
ElMessage.success('后端连接测试成功')
|
||||
|
||||
} catch (error) {
|
||||
this.responseTime = Date.now() - startTime
|
||||
|
||||
if (error.code === 'ERR_NETWORK') {
|
||||
this.connectionStatus = {
|
||||
success: false,
|
||||
title: '网络错误',
|
||||
message: '无法连接到后端服务器，请检查Django服务器是否运行在 http://localhost:8000'
|
||||
}
|
||||
} else if (error.response?.status === 404) {
|
||||
this.connectionStatus = {
|
||||
success: false,
|
||||
title: 'API路径错误',
|
||||
message: '后端服务器正在运行，但API路径配置有误'
|
||||
}
|
||||
} else {
|
||||
this.connectionStatus = {
|
||||
success: false,
|
||||
title: '连接失败',
|
||||
message: `错误: ${error.message}`
|
||||
}
|
||||
}
|
||||
|
||||
console.error('连接测试失败:', error)
|
||||
ElMessage.error('后端连接测试失败')
|
||||
|
||||
} finally {
|
||||
this.loading = false
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.connection-test {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.is-loading {
|
||||
animation: rotating 2s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotating {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,58 +0,0 @@
|
||||
<template>
|
||||
<div class="hello">
|
||||
<h1>{{ msg }}</h1>
|
||||
<p>
|
||||
For a guide and recipes on how to configure / customize this project,<br>
|
||||
check out the
|
||||
<a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
|
||||
</p>
|
||||
<h3>Installed CLI Plugins</h3>
|
||||
<ul>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint" target="_blank" rel="noopener">eslint</a></li>
|
||||
</ul>
|
||||
<h3>Essential Links</h3>
|
||||
<ul>
|
||||
<li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
|
||||
<li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
|
||||
<li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
|
||||
<li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
|
||||
<li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
|
||||
</ul>
|
||||
<h3>Ecosystem</h3>
|
||||
<ul>
|
||||
<li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
|
||||
<li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
|
||||
<li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
|
||||
<li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
|
||||
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HelloWorld',
|
||||
props: {
|
||||
msg: String
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style scoped>
|
||||
h3 {
|
||||
margin: 40px 0 0;
|
||||
}
|
||||
ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
}
|
||||
li {
|
||||
display: inline-block;
|
||||
margin: 0 10px;
|
||||
}
|
||||
a {
|
||||
color: #42b983;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user