<template>
|
<div class="api-example-container">
|
<div class="header">
|
<h1 class="title">API调用示例</h1>
|
<p class="subtitle">展示如何使用封装好的http工具和api模块调用后端接口</p>
|
</div>
|
|
<div class="content">
|
<!-- 示例1: 基础GET请求 -->
|
<div class="example-section">
|
<div class="section-title">
|
<el-icon><Document /></el-icon>
|
<span>示例1: 基础GET请求</span>
|
</div>
|
<div class="code-block">
|
<pre><code>// 方式一：使用 http 工具直接调用
|
import { http } from '@/utils/http'
|
|
const fetchData = async () => {
|
try {
|
const res = await http.get('/api/user/list', { page: 1, pageSize: 10 })
|
console.log('返回数据:', res.data)
|
} catch (error) {
|
console.error('请求失败:', error)
|
}
|
}
|
|
// 方式二：使用封装好的api模块
|
import { warehouseApi } from '@/api'
|
|
const fetchWarehouse = async () => {
|
try {
|
const res = await warehouseApi.getWarehouseStatus()
|
console.log('仓库状态:', res.data)
|
} catch (error) {
|
console.error('请求失败:', error)
|
}
|
}</code></pre>
|
</div>
|
<el-button type="primary" @click="example1" :loading="loading1">
|
运行示例1
|
</el-button>
|
<div v-if="result1" class="result-box">
|
<div class="result-title">返回结果:</div>
|
<pre>{{ JSON.stringify(result1, null, 2) }}</pre>
|
</div>
|
</div>
|
|
<!-- 示例2: POST请求 -->
|
<div class="example-section">
|
<div class="section-title">
|
<el-icon><Document /></el-icon>
|
<span>示例2: POST请求（创建数据）</span>
|
</div>
|
<div class="code-block">
|
<pre><code>// 使用 http 工具发送POST请求
|
import { http } from '@/utils/http'
|
|
const createData = async () => {
|
try {
|
const res = await http.post('/api/task/create', {
|
taskNo: 'RK001',
|
type: '入库',
|
material: '钢板',
|
quantity: 100
|
})
|
console.log('创建成功:', res.data)
|
return res.data
|
} catch (error) {
|
console.error('创建失败:', error)
|
}
|
}
|
|
// 使用封装的api
|
import { taskApi } from '@/api'
|
|
const createTask = async () => {
|
const res = await taskApi.createTask({
|
taskNo: 'RK001',
|
type: '入库',
|
material: '钢板',
|
quantity: 100
|
})
|
return res.data
|
}</code></pre>
|
</div>
|
<el-button type="success" @click="example2" :loading="loading2">
|
运行示例2
|
</el-button>
|
<div v-if="result2" class="result-box">
|
<div class="result-title">返回结果:</div>
|
<pre>{{ JSON.stringify(result2, null, 2) }}</pre>
|
</div>
|
</div>
|
|
<!-- 示例3: PUT/DELETE请求 -->
|
<div class="example-section">
|
<div class="section-title">
|
<el-icon><Document /></el-icon>
|
<span>示例3: PUT/DELETE请求</span>
|
</div>
|
<div class="code-block">
|
<pre><code>// PUT请求 - 更新数据
|
const updateTask = async (taskId) => {
|
const res = await http.put(`/api/task/${taskId}`, {
|
status: '已完成'
|
})
|
return res.data
|
}
|
|
// DELETE请求 - 删除数据
|
const deleteTask = async (taskId) => {
|
const res = await http.delete(`/api/task/${taskId}`)
|
return res.data
|
}
|
|
// 使用api模块
|
import { taskApi } from '@/api'
|
|
// 更新任务状态
|
await taskApi.updateTaskStatus('TASK001', { status: '已完成' })
|
|
// 获取任务详情
|
const detail = await taskApi.getTaskDetail('TASK001')</code></pre>
|
</div>
|
</div>
|
|
<!-- 示例4: 实际业务场景 -->
|
<div class="example-section">
|
<div class="section-title">
|
<el-icon><Document /></el-icon>
|
<span>示例4: 实际业务场景 - 组件中调用API</span>
|
</div>
|
<div class="code-block">
|
<pre><code>// 在Vue组件中使用
|
import { ref, onMounted } from 'vue'
|
import { warehouseApi, inventoryApi } from '@/api'
|
|
export default {
|
setup() {
|
const loading = ref(false)
|
const warehouseList = ref([])
|
const inventoryStats = ref({})
|
|
// 获取仓库列表
|
const fetchWarehouseList = async () => {
|
loading.value = true
|
try {
|
const res = await warehouseApi.getAreas()
|
warehouseList.value = res.data
|
} catch (error) {
|
ElMessage.error('获取仓库列表失败')
|
} finally {
|
loading.value = false
|
}
|
}
|
|
// 获取库存统计
|
const fetchInventoryStats = async () => {
|
try {
|
const res = await inventoryApi.getInventoryOverview()
|
inventoryStats.value = res.data
|
} catch (error) {
|
console.error('获取库存统计失败:', error)
|
}
|
}
|
|
// 页面加载时获取数据
|
onMounted(() => {
|
fetchWarehouseList()
|
fetchInventoryStats()
|
})
|
|
return {
|
loading,
|
warehouseList,
|
inventoryStats,
|
fetchWarehouseList
|
}
|
}
|
}</code></pre>
|
</div>
|
</div>
|
|
<!-- 示例5: 并发请求 -->
|
<div class="example-section">
|
<div class="section-title">
|
<el-icon><Document /></el-icon>
|
<span>示例5: 并发请求（使用Promise.all）</span>
|
</div>
|
<div class="code-block">
|
<pre><code>// 同时发起多个请求
|
import { http } from '@/utils/http'
|
|
const fetchDashboardData = async () => {
|
try {
|
const [warehouseRes, inventoryRes, taskRes] = await Promise.all([
|
http.get('/api/warehouse/status'),
|
http.get('/api/inventory/overview'),
|
http.get('/api/task/list', { status: '进行中' })
|
])
|
|
return {
|
warehouse: warehouseRes.data,
|
inventory: inventoryRes.data,
|
tasks: taskRes.data
|
}
|
} catch (error) {
|
console.error('获取看板数据失败:', error)
|
}
|
}
|
|
// 使用api模块
|
import { warehouseApi, inventoryApi, taskApi } from '@/api'
|
|
const fetchAllData = async () => {
|
const [warehouse, inventory, tasks] = await Promise.all([
|
warehouseApi.getWarehouseStatus(),
|
inventoryApi.getInventoryOverview(),
|
taskApi.getTaskList({ status: '进行中' })
|
])
|
|
return { warehouse, inventory, tasks }
|
}</code></pre>
|
</div>
|
<el-button type="warning" @click="example5" :loading="loading5">
|
运行示例5（并发请求）
|
</el-button>
|
<div v-if="result5" class="result-box">
|
<div class="result-title">返回结果:</div>
|
<pre>{{ JSON.stringify(result5, null, 2) }}</pre>
|
</div>
|
</div>
|
|
<!-- 实际演示 -->
|
<div class="example-section">
|
<div class="section-title">
|
<el-icon><Monitor /></el-icon>
|
<span>实际演示</span>
|
</div>
|
<div class="demo-buttons">
|
<el-button @click="fetchWarehouse" :loading="demoLoading.warehouse">
|
<el-icon><Box /></el-icon>
|
获取仓库状态
|
</el-button>
|
<el-button @click="fetchInventory" :loading="demoLoading.inventory">
|
<el-icon><List /></el-icon>
|
获取库存列表
|
</el-button>
|
<el-button @click="fetchTasks" :loading="demoLoading.tasks">
|
<el-icon><Document /></el-icon>
|
获取任务列表
|
</el-button>
|
<el-button @click="fetchDashboard" :loading="demoLoading.dashboard">
|
<el-icon><DataBoard /></el-icon>
|
获取看板数据（并发）
|
</el-button>
|
</div>
|
|
<div v-if="demoResult" class="result-box large">
|
<div class="result-title">API返回数据:</div>
|
<pre>{{ JSON.stringify(demoResult, null, 2) }}</pre>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { ref } from 'vue'
|
import { ElMessage } from 'element-plus'
|
import { http } from '@/utils/http'
|
import { warehouseApi, inventoryApi, taskApi, reportApi } from '@/api'
|
|
export default {
|
name: 'ApiExample',
|
setup() {
|
const loading1 = ref(false)
|
const loading2 = ref(false)
|
const loading5 = ref(false)
|
const result1 = ref(null)
|
const result2 = ref(null)
|
const result5 = ref(null)
|
|
const demoLoading = ref({
|
warehouse: false,
|
inventory: false,
|
tasks: false,
|
dashboard: false
|
})
|
const demoResult = ref(null)
|
|
// 示例1: GET请求
|
const example1 = async () => {
|
loading1.value = true
|
result1.value = null
|
try {
|
// 模拟API调用
|
// 实际使用时换成真实的API
|
const res = await new Promise(resolve => {
|
setTimeout(() => {
|
resolve({
|
code: 200,
|
data: {
|
total: 100,
|
list: [
|
{ id: 1, name: '仓库A', capacity: 1000, used: 600 },
|
{ id: 2, name: '仓库B', capacity: 800, used: 400 }
|
]
|
}
|
})
|
}, 1000)
|
})
|
result1.value = res.data
|
ElMessage.success('GET请求成功')
|
} catch (error) {
|
ElMessage.error('请求失败: ' + error.message)
|
} finally {
|
loading1.value = false
|
}
|
}
|
|
// 示例2: POST请求
|
const example2 = async () => {
|
loading2.value = true
|
result2.value = null
|
try {
|
const res = await new Promise(resolve => {
|
setTimeout(() => {
|
resolve({
|
code: 200,
|
data: {
|
id: 'TASK' + Date.now(),
|
status: 'success',
|
message: '创建成功'
|
}
|
})
|
}, 1000)
|
})
|
result2.value = res.data
|
ElMessage.success('POST请求成功')
|
} catch (error) {
|
ElMessage.error('请求失败: ' + error.message)
|
} finally {
|
loading2.value = false
|
}
|
}
|
|
// 示例5: 并发请求
|
const example5 = async () => {
|
loading5.value = true
|
result5.value = null
|
try {
|
// 模拟并发请求
|
const [res1, res2, res3] = await Promise.all([
|
new Promise(resolve => setTimeout(() => resolve({ code: 200, data: { warehouse: '正常' } }), 800)),
|
new Promise(resolve => setTimeout(() => resolve({ code: 200, data: { inventory: 12580 } }), 600)),
|
new Promise(resolve => setTimeout(() => resolve({ code: 200, data: { tasks: 48 } }), 1000))
|
])
|
|
result5.value = {
|
warehouse: res1.data,
|
inventory: res2.data,
|
tasks: res3.data
|
}
|
ElMessage.success('并发请求成功')
|
} catch (error) {
|
ElMessage.error('请求失败: ' + error.message)
|
} finally {
|
loading5.value = false
|
}
|
}
|
|
// 实际演示 - 获取仓库状态
|
const fetchWarehouse = async () => {
|
demoLoading.value.warehouse = true
|
demoResult.value = null
|
try {
|
// 实际使用时调用真实接口
|
// const res = await warehouseApi.getWarehouseStatus()
|
|
// 模拟数据
|
const res = {
|
code: 200,
|
data: {
|
totalAreas: 4,
|
totalPositions: 11000,
|
usedPositions: 7700,
|
utilization: 70
|
}
|
}
|
demoResult.value = res
|
ElMessage.success('获取仓库状态成功')
|
} catch (error) {
|
ElMessage.error('获取仓库状态失败')
|
} finally {
|
demoLoading.value.warehouse = false
|
}
|
}
|
|
// 获取库存列表
|
const fetchInventory = async () => {
|
demoLoading.value.inventory = true
|
demoResult.value = null
|
try {
|
const res = {
|
code: 200,
|
data: {
|
total: 12580,
|
items: [
|
{ code: 'M001', name: '钢板', quantity: 5000 },
|
{ code: 'M002', name: '铝板', quantity: 3000 },
|
{ code: 'M003', name: '螺丝', quantity: 4580 }
|
]
|
}
|
}
|
demoResult.value = res
|
ElMessage.success('获取库存列表成功')
|
} catch (error) {
|
ElMessage.error('获取库存列表失败')
|
} finally {
|
demoLoading.value.inventory = false
|
}
|
}
|
|
// 获取任务列表
|
const fetchTasks = async () => {
|
demoLoading.value.tasks = true
|
demoResult.value = null
|
try {
|
const res = {
|
code: 200,
|
data: {
|
total: 48,
|
list: [
|
{ taskNo: 'RK001', type: '入库', status: '进行中' },
|
{ taskNo: 'CK001', type: '出库', status: '已完成' },
|
{ taskNo: 'RK002', type: '入库', status: '待处理' }
|
]
|
}
|
}
|
demoResult.value = res
|
ElMessage.success('获取任务列表成功')
|
} catch (error) {
|
ElMessage.error('获取任务列表失败')
|
} finally {
|
demoLoading.value.tasks = false
|
}
|
}
|
|
// 并发获取看板数据
|
const fetchDashboard = async () => {
|
demoLoading.value.dashboard = true
|
demoResult.value = null
|
try {
|
// 实际使用时使用并发请求
|
// const [warehouse, inventory, tasks] = await Promise.all([
|
// warehouseApi.getWarehouseStatus(),
|
// inventoryApi.getInventoryOverview(),
|
// taskApi.getTaskList({ status: '进行中' })
|
// ])
|
|
// 模拟数据
|
const res = {
|
code: 200,
|
data: {
|
warehouse: { totalAreas: 4, utilization: 70 },
|
inventory: { total: 12580, lowStock: 8 },
|
tasks: { total: 48, inProgress: 15 }
|
}
|
}
|
demoResult.value = res
|
ElMessage.success('获取看板数据成功')
|
} catch (error) {
|
ElMessage.error('获取看板数据失败')
|
} finally {
|
demoLoading.value.dashboard = false
|
}
|
}
|
|
return {
|
loading1,
|
loading2,
|
loading5,
|
result1,
|
result2,
|
result5,
|
demoLoading,
|
demoResult,
|
example1,
|
example2,
|
example5,
|
fetchWarehouse,
|
fetchInventory,
|
fetchTasks,
|
fetchDashboard
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.api-example-container {
|
width: 100%;
|
min-height: 100vh;
|
max-height: 100vh;
|
padding: 20px;
|
padding-bottom: 50px;
|
background: #0a0e27;
|
color: #fff;
|
overflow-y: auto;
|
box-sizing: border-box;
|
}
|
|
.header {
|
text-align: center;
|
margin-bottom: 30px;
|
padding: 30px;
|
background: linear-gradient(135deg, rgba(79, 172, 254, 0.1) 0%, rgba(0, 242, 254, 0.1) 100%);
|
border-radius: 10px;
|
border: 1px solid rgba(79, 172, 254, 0.2);
|
}
|
|
.title {
|
font-size: 32px;
|
font-weight: bold;
|
background: linear-gradient(90deg, #4facfe 0%, #00f2fe 100%);
|
-webkit-background-clip: text;
|
-webkit-text-fill-color: transparent;
|
margin-bottom: 10px;
|
}
|
|
.subtitle {
|
font-size: 16px;
|
color: rgba(255, 255, 255, 0.6);
|
}
|
|
.content {
|
max-width: 1200px;
|
margin: 0 auto;
|
}
|
|
.example-section {
|
background: rgba(255, 255, 255, 0.03);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 10px;
|
padding: 20px;
|
margin-bottom: 20px;
|
}
|
|
.section-title {
|
display: flex;
|
align-items: center;
|
gap: 10px;
|
font-size: 18px;
|
font-weight: bold;
|
color: #4facfe;
|
margin-bottom: 15px;
|
}
|
|
.code-block {
|
background: rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
border-radius: 8px;
|
padding: 15px;
|
margin-bottom: 15px;
|
overflow-x: auto;
|
}
|
|
.code-block pre {
|
margin: 0;
|
font-size: 13px;
|
line-height: 1.6;
|
}
|
|
.code-block code {
|
color: #e6a23c;
|
font-family: 'Courier New', monospace;
|
}
|
|
.result-box {
|
margin-top: 15px;
|
padding: 15px;
|
background: rgba(0, 0, 0, 0.3);
|
border: 1px solid rgba(103, 194, 58, 0.3);
|
border-radius: 8px;
|
}
|
|
.result-box.large {
|
max-height: 400px;
|
overflow-y: auto;
|
}
|
|
.result-title {
|
font-size: 14px;
|
font-weight: bold;
|
color: #67c23a;
|
margin-bottom: 10px;
|
}
|
|
.result-box pre {
|
margin: 0;
|
font-size: 12px;
|
line-height: 1.5;
|
color: #fff;
|
overflow-x: auto;
|
}
|
|
.demo-buttons {
|
display: flex;
|
gap: 10px;
|
flex-wrap: wrap;
|
}
|
|
:deep(.el-button) {
|
margin: 0;
|
}
|
</style>
|
