73 lines
1.7 KiB
Markdown
73 lines
1.7 KiB
Markdown
# 省市区数据加载说明
|
|
|
|
## 问题
|
|
省市区下拉框显示为空
|
|
|
|
## 原因
|
|
1. Vite代理配置需要重启开发服务器才能生效
|
|
2. 如果代理加载失败，会使用后备数据
|
|
|
|
## 解决步骤
|
|
|
|
### 1. 重启开发服务器
|
|
```bash
|
|
# 停止当前运行的开发服务器 (Ctrl+C)
|
|
# 然后重新启动
|
|
cd admin
|
|
npm run dev
|
|
```
|
|
|
|
### 2. 检查控制台日志
|
|
打开浏览器开发者工具的Console标签，应该能看到：
|
|
- "开始加载省市区数据..."
|
|
- "响应状态: 200"
|
|
- "加载的数据条数: XX"
|
|
- "regionOptions 已设置，条数: XX"
|
|
|
|
### 3. 如果代理失败
|
|
如果看到错误信息，会自动使用后备数据，包含：
|
|
- 四川省（成都市、绵阳市）
|
|
- 北京市
|
|
- 上海市
|
|
- 广东省（广州市、深圳市）
|
|
|
|
## 配置说明
|
|
|
|
### Vite代理配置 (admin/vite.config.ts)
|
|
```typescript
|
|
server: {
|
|
proxy: {
|
|
'/api-proxy': {
|
|
target: 'https://admin.zhenyangtang.com.cn',
|
|
changeOrigin: true,
|
|
rewrite: (path) => path.replace(/^\/api-proxy/, '')
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
### 前端请求 (admin/src/views/consumer/prescription/index.vue)
|
|
```javascript
|
|
const response = await fetch('/api-proxy/area/ChinaCitys.json')
|
|
```
|
|
|
|
## 生产环境配置
|
|
|
|
生产环境需要在nginx配置代理：
|
|
|
|
```nginx
|
|
location /api-proxy/ {
|
|
proxy_pass https://admin.zhenyangtang.com.cn/;
|
|
proxy_set_header Host admin.zhenyangtang.com.cn;
|
|
proxy_set_header X-Real-IP $remote_addr;
|
|
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
|
|
}
|
|
```
|
|
|
|
## 测试
|
|
1. 打开创建订单对话框
|
|
2. 查看"省市区"下拉框
|
|
3. 应该能看到省份列表
|
|
4. 选择省份后能看到城市列表
|
|
5. 选择城市后能看到区县列表
|