Add files via upload
This commit is contained in:
hotbob011
169
使用说明.md
Normal file
169
使用说明.md
Normal file
@@ -0,0 +1,169 @@
|
|||||||
|
# MockAddress Core 使用说明
|
||||||
|
|
||||||
|
## 快速开始
|
||||||
|
|
||||||
|
### 方式一：直接使用（适合简单场景）
|
||||||
|
|
||||||
|
如果你的网站结构和 mockaddress.com 类似（有 `data/` 目录），可以直接使用，无需配置：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./src/css/main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="module">
|
||||||
|
import { generateUSAddress } from './src/js/address-generator.js';
|
||||||
|
|
||||||
|
// 直接使用，会自动检测 data/ 目录
|
||||||
|
const address = await generateUSAddress('CA');
|
||||||
|
console.log(address);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
### 方式二：自定义数据路径（推荐）
|
||||||
|
|
||||||
|
如果你的数据文件放在其他位置，需要先配置：
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" href="./src/css/main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<script type="module">
|
||||||
|
// 1. 先导入配置模块
|
||||||
|
import { configure } from './src/js/config.js';
|
||||||
|
import { generateUSAddress } from './src/js/address-generator.js';
|
||||||
|
|
||||||
|
// 2. 配置你的数据路径
|
||||||
|
configure({
|
||||||
|
dataBasePath: 'my-custom-data/', // 你的数据目录
|
||||||
|
autoDetectPaths: false // 禁用自动检测，只使用你指定的路径
|
||||||
|
});
|
||||||
|
|
||||||
|
// 3. 现在可以正常使用了
|
||||||
|
const address = await generateUSAddress('CA');
|
||||||
|
console.log(address);
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 配置选项
|
||||||
|
|
||||||
|
### `dataBasePath`（字符串，可选）
|
||||||
|
|
||||||
|
你的数据文件的基础路径。例如：
|
||||||
|
- `'my-data/'` - 相对路径
|
||||||
|
- `'/static/data/'` - 绝对路径
|
||||||
|
- `'https://cdn.example.com/data/'` - CDN 路径
|
||||||
|
|
||||||
|
**注意**：如果不设置，代码会自动检测路径（适合 mockaddress.com 的多语言结构）。
|
||||||
|
|
||||||
|
### `autoDetectPaths`（布尔值，默认 `true`）
|
||||||
|
|
||||||
|
是否启用自动路径检测。如果设为 `false`，则只使用 `dataBasePath` 指定的路径。
|
||||||
|
|
||||||
|
**建议**：
|
||||||
|
- 如果你的网站结构简单，设置 `dataBasePath` 并关闭 `autoDetectPaths`
|
||||||
|
- 如果你的网站有多语言目录结构（类似 mockaddress.com），保持 `autoDetectPaths: true`
|
||||||
|
|
||||||
|
## 数据文件结构
|
||||||
|
|
||||||
|
你需要准备以下 JSON 数据文件（放在你配置的 `dataBasePath` 目录下）：
|
||||||
|
|
||||||
|
- `usData.json` - 美国地址数据
|
||||||
|
- `hkData.json` - 香港地址数据
|
||||||
|
- `ukData.json` - 英国地址数据
|
||||||
|
- `caData.json` - 加拿大地址数据
|
||||||
|
- `jpData.json` - 日本地址数据
|
||||||
|
- `jpNamesData.json` - 日本姓名数据
|
||||||
|
- `inData.json` - 印度地址数据
|
||||||
|
- `twData.json` - 台湾地址数据
|
||||||
|
- `sgData.json` - 新加坡地址数据
|
||||||
|
- `deData.json` - 德国地址数据
|
||||||
|
- `namesData.json` - 通用姓名数据
|
||||||
|
- `macOuiData.json` - MAC OUI 数据（用于 MAC 工具）
|
||||||
|
|
||||||
|
> **注意**：本开源仓库不包含这些数据文件。你需要自己准备数据，或者参考 mockaddress.com 的数据格式。
|
||||||
|
|
||||||
|
## 完整示例
|
||||||
|
|
||||||
|
```html
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>我的地址生成器</title>
|
||||||
|
<link rel="stylesheet" href="./src/css/main.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app">
|
||||||
|
<button id="generate-btn">生成美国地址</button>
|
||||||
|
<div id="result"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script type="module">
|
||||||
|
// 导入配置和生成函数
|
||||||
|
import { configure } from './src/js/config.js';
|
||||||
|
import { generateUSAddress } from './src/js/address-generator.js';
|
||||||
|
|
||||||
|
// 配置数据路径（根据你的实际情况修改）
|
||||||
|
configure({
|
||||||
|
dataBasePath: 'data/', // 你的数据目录
|
||||||
|
autoDetectPaths: false // 只使用指定路径
|
||||||
|
});
|
||||||
|
|
||||||
|
// 绑定按钮事件
|
||||||
|
document.getElementById('generate-btn').addEventListener('click', async () => {
|
||||||
|
try {
|
||||||
|
const address = await generateUSAddress('CA');
|
||||||
|
document.getElementById('result').innerHTML = `
|
||||||
|
<p>姓名: ${address.firstName} ${address.lastName}</p>
|
||||||
|
<p>地址: ${address.fullAddress}</p>
|
||||||
|
<p>电话: ${address.phone}</p>
|
||||||
|
`;
|
||||||
|
} catch (error) {
|
||||||
|
console.error('生成失败:', error);
|
||||||
|
alert('生成失败，请检查数据文件路径是否正确');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
```
|
||||||
|
|
||||||
|
## 重要提示
|
||||||
|
|
||||||
|
1. **数据文件格式**：确保你的 JSON 文件格式与 mockaddress.com 使用的格式一致
|
||||||
|
2. **CORS 问题**：如果数据文件在不同域名，需要配置 CORS 头
|
||||||
|
3. **路径问题**：使用相对路径时，注意当前页面的位置
|
||||||
|
4. **缓存**：代码会自动缓存数据到 localStorage，如需清除缓存，可以调用 `localStorage.clear()`
|
||||||
|
|
||||||
|
## 不影响正式站点
|
||||||
|
|
||||||
|
- 如果你不调用 `configure()`，代码会使用默认的自动路径检测逻辑，**完全不影响 mockaddress.com 的正常运行**
|
||||||
|
- 配置是独立的，每个页面可以有自己的配置
|
||||||
|
- 配置不会持久化，每次页面加载都需要重新设置（如果需要）
|
||||||
|
|
||||||
|
## 更多功能
|
||||||
|
|
||||||
|
查看 `README.md` 了解所有可用的生成函数：
|
||||||
|
- `generateUSAddress()` - 美国地址
|
||||||
|
- `generateHKAddress()` - 香港地址
|
||||||
|
- `generateUKAddress()` - 英国地址
|
||||||
|
- `generateCAAddress()` - 加拿大地址
|
||||||
|
- `generateJPAddress()` - 日本地址
|
||||||
|
- `generateINAddress()` - 印度地址
|
||||||
|
- `generateTWAddress()` - 台湾地址
|
||||||
|
- `generateSGAddress()` - 新加坡地址
|
||||||
|
- `generateDEAddress()` - 德国地址
|
||||||
|
- `generateTaxFreeAddress()` - 美国免税州地址
|
||||||
|
- `generateIdentityInfo()` - 身份信息
|
||||||
|
- `generateCreditCardInfo()` - 信用卡信息（测试用）
|
||||||
Reference in New Issue
Block a user