签入版本
This commit is contained in:
@@ -36,8 +36,15 @@ features:
|
||||
link: /zh/architecture/database-design.html
|
||||
linkText: 查看更多
|
||||
rel: noreferrer
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
- title: 🚀 全新技术栈
|
||||
details: Laravel 13、PHP 8.2、Vue3、TypeScript、Vite、Pinia、ElementPlus 等技术栈,采用主流前后端分离架构实现。
|
||||
details: Laravel 13、PHP 8.3、Vue3、TypeScript、Vite、Pinia、ElementPlus 等技术栈,采用主流前后端分离架构实现。
|
||||
link: /zh/tech-stack.html
|
||||
linkText: 查看更多
|
||||
rel: noreferrer
|
||||
|
||||
@@ -164,11 +164,11 @@ Authorization: Bearer <access_token>
|
||||
|
||||
```bash
|
||||
# curl
|
||||
curl http://localhost:8000/api/user/page \
|
||||
curl http://admin.laravel13.elevue/api/user/page \
|
||||
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
|
||||
|
||||
# curl(带分页参数)
|
||||
curl "http://localhost:8000/api/user/page?pageNo=1&pageSize=10" \
|
||||
curl "http://admin.laravel13.elevue/api/user/page?pageNo=1&pageSize=10" \
|
||||
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
|
||||
```
|
||||
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
"ok": true,
|
||||
"msg": "上传成功",
|
||||
"data": {
|
||||
"fileUrl": "http://localhost:8000/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
|
||||
"fileUrl": "http://admin.laravel13.elevue/uploads/temp/20261002/123456_a1b2c3d4e5f6.jpg",
|
||||
"filePath": "temp/20261002/123456_a1b2c3d4e5f6.jpg",
|
||||
"originalName": "photo.jpg",
|
||||
"fileSize": 102400,
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
| 字段 | 类型 | 说明 | 示例 |
|
||||
|------|------|------|------|
|
||||
| `fileUrl` | string | 可访问 URL(`FILE_DOMAIN_URL` 为空时等于相对路径) | `http://localhost:8000/uploads/temp/...` |
|
||||
| `fileUrl` | string | 可访问 URL(`FILE_DOMAIN_URL` 为空时等于相对路径) | `http://admin.laravel13.elevue/uploads/temp/...` |
|
||||
| `filePath` | string | 相对存储路径(**提交表单建议用此字段**) | `temp/20261002/123456_a1b2....jpg` |
|
||||
| `originalName` | string | 原始文件名 | `photo.jpg` |
|
||||
| `fileSize` | number | 文件大小(字节) | `102400` |
|
||||
@@ -167,7 +167,7 @@ const res = await http.request({
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
});
|
||||
// res.filePath = "temp/20261002/123456_a1b2....jpg"
|
||||
// res.fileUrl = "http://localhost:8000/uploads/temp/20261002/..."
|
||||
// res.fileUrl = "http://admin.laravel13.elevue/uploads/temp/20261002/..."
|
||||
|
||||
// 上传图片(指定 type=image)
|
||||
const res2 = await http.request({
|
||||
|
||||
@@ -71,7 +71,7 @@
|
||||
|
||||
### 1. 前后端分离
|
||||
|
||||
前端 Vue3 应用通过 HTTP API 调用后端 Laravel 服务,两者独立开发、独立部署。前端开发阶段通过 Vite 的 `proxy` 配置将 `/api` 请求代理到后端 `http://localhost:8000`,生产环境由 Nginx 统一反向代理。
|
||||
前端 Vue3 应用通过 HTTP API 调用后端 Laravel 服务,两者独立开发、独立部署。前端开发阶段通过 Vite 的 `proxy` 配置将 `/api` 请求代理到后端 `http://admin.laravel13.elevue`,生产环境由 Nginx 统一反向代理。
|
||||
|
||||
### 2. 分层架构
|
||||
|
||||
|
||||
@@ -43,7 +43,7 @@ location / {
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000',
|
||||
target: 'http://admin.laravel13.elevue',
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
|
||||
@@ -257,7 +257,7 @@ data.forEach((group) => {
|
||||
# -----------------------------------------------------------------------------
|
||||
# 批量保存网站配置(key 为配置项编码)
|
||||
# -----------------------------------------------------------------------------
|
||||
curl -X POST http://localhost:8000/api/config/web/save \
|
||||
curl -X POST http://admin.laravel13.elevue/api/config/web/save \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer <token>" \
|
||||
-d '{
|
||||
|
||||
@@ -353,7 +353,7 @@ php artisan config:cache
|
||||
## 环境配置建议
|
||||
|
||||
```ini
|
||||
# 开发环境:允许所有来源(前端 localhost:8001,后端 localhost:8000)
|
||||
# 开发环境:允许所有来源(前端 localhost:8001,后端 admin.laravel13.elevue)
|
||||
CORS_ALLOW_ORIGIN=*
|
||||
|
||||
# 测试环境:指定测试域名,提前验证跨域配置
|
||||
|
||||
@@ -64,7 +64,7 @@ php artisan route:list --path=user/add --json
|
||||
# → "middleware": ["api", "auth.jwt", "tenant", "demo", "log.operation"]
|
||||
|
||||
# ③ 拦截生效(携带有效 token 发起写操作,期望 HTTP 403)
|
||||
curl -X POST http://localhost:8000/api/user/add \
|
||||
curl -X POST http://admin.laravel13.elevue/api/user/add \
|
||||
-H "Authorization: Bearer {access_token}" \
|
||||
-H "Accept: application/json" \
|
||||
-d '{"username":"demo"}'
|
||||
|
||||
@@ -191,7 +191,7 @@ INFO Server running on [http://127.0.0.1:8000].
|
||||
```
|
||||
|
||||
:::tip 温馨提示
|
||||
打开浏览器访问 `http://localhost:8000/` 可验证后端服务是否正常启动;健康检查接口为 `http://localhost:8000/up`。
|
||||
打开浏览器访问 `http://admin.laravel13.elevue/` 可验证后端服务是否正常启动;健康检查接口为 `http://admin.laravel13.elevue/up`。
|
||||
:::
|
||||
|
||||
## 第四步:前端启动
|
||||
@@ -247,7 +247,7 @@ pnpm dev
|
||||
```
|
||||
|
||||
:::tip 温馨提示
|
||||
前端默认运行在 `8001` 端口,后端默认 `8000` 端口。Vite 开发代理由 `ui/.env.development` 的 `VITE_PROXY` 决定(默认转发到 `http://admin.laravel13.elevue/api`;直连 `php artisan serve` 时改为 `http://localhost:8000/api`,改后重启生效)。登录后请立即修改默认密码。
|
||||
前端默认运行在 `8001` 端口,后端默认 `8000` 端口。Vite 开发代理由 `ui/.env.development` 的 `VITE_PROXY` 决定(默认转发到 `http://admin.laravel13.elevue/api`;直连 `php artisan serve` 时改为 `http://admin.laravel13.elevue/api`,改后重启生效)。登录后请立即修改默认密码。
|
||||
:::
|
||||
|
||||
## 第五步:功能验证
|
||||
@@ -267,7 +267,7 @@ pnpm dev
|
||||
也可直接用命令行验证接口链路(验证码接口同时验证 PHP → Redis 链路):
|
||||
|
||||
```bash
|
||||
curl http://localhost:8000/api/captcha
|
||||
curl http://admin.laravel13.elevue/api/captcha
|
||||
# → {"code":0,"ok":true,"msg":"操作成功","data":{...}}
|
||||
```
|
||||
|
||||
|
||||
@@ -347,7 +347,7 @@ services:
|
||||
|
||||
# JWT 密钥 / 文件域名 / 跨域(取自 --env-file)
|
||||
- JWT_SECRET=${JWT_SECRET}
|
||||
- FILE_DOMAIN_URL=${DOMAIN_URL:-http://localhost:8000}
|
||||
- FILE_DOMAIN_URL=${DOMAIN_URL:-http://admin.laravel13.elevue}
|
||||
- CORS_ALLOW_ORIGIN=${CORS_ALLOW_ORIGIN:-*}
|
||||
|
||||
depends_on:
|
||||
@@ -497,7 +497,7 @@ docker compose logs -f app
|
||||
|
||||
# 6. 验证
|
||||
curl https://your-domain/up
|
||||
curl http://localhost:8000/api/captcha # 返回 code=0 即成功
|
||||
curl http://admin.laravel13.elevue/api/captcha # 返回 code=0 即成功
|
||||
```
|
||||
|
||||
### 首次初始化与数据迁移
|
||||
|
||||
@@ -286,7 +286,7 @@ sudo chown -R www-data:www-data /www/api/public/uploads/
|
||||
# -----------------------------------------------------------------------------
|
||||
# -H "Authorization: Bearer <token>" → 在请求头中携带 JWT Token
|
||||
# <token> 替换为实际的 access_token 值
|
||||
curl -H "Authorization: Bearer <token>" http://localhost:8000/api/index/getUser
|
||||
curl -H "Authorization: Bearer <token>" http://admin.laravel13.elevue/api/index/getUser
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 检查 JWT 密钥配置(缺失或过短会 fail-close,拒绝签发/校验令牌)
|
||||
@@ -431,7 +431,7 @@ cd /www/api && php artisan job:daemon --stop
|
||||
# 测试后端路由是否正常(绕过前端,直接请求 API)
|
||||
# -----------------------------------------------------------------------------
|
||||
# -H → 设置请求头(携带 JWT Token)
|
||||
curl http://localhost:8000/api/example/page -H "Authorization: Bearer <token>"
|
||||
curl http://admin.laravel13.elevue/api/example/page -H "Authorization: Bearer <token>"
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 检查 Nginx 配置语法是否正确
|
||||
|
||||
@@ -57,7 +57,7 @@ VITE_GLOB_API_URL_PREFIX = /api
|
||||
```
|
||||
|
||||
:::tip 代理目标地址
|
||||
`VITE_PROXY` 当前默认指向 Laragon 虚拟主机 `http://admin.laravel13.elevue/api`;使用 `php artisan serve` 时改为直连 `http://localhost:8000/api`(见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html))。修改后需重启 `pnpm dev`。
|
||||
`VITE_PROXY` 当前默认指向 Laragon 虚拟主机 `http://admin.laravel13.elevue/api`;使用 `php artisan serve` 时改为直连 `http://admin.laravel13.elevue/api`(见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html))。修改后需重启 `pnpm dev`。
|
||||
:::
|
||||
|
||||
## 生产环境配置
|
||||
@@ -124,7 +124,7 @@ VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||||
VITE_PROXY=[["/api","http://admin.laravel13.elevue/api"]]
|
||||
|
||||
# 直连 artisan serve 时的写法
|
||||
VITE_PROXY=[["/api","http://localhost:8000/api"]]
|
||||
VITE_PROXY=[["/api","http://admin.laravel13.elevue/api"]]
|
||||
```
|
||||
|
||||
**格式:** JSON 数组,每项为 `[前缀, 目标地址]`
|
||||
@@ -134,7 +134,7 @@ VITE_PROXY=[["/api","http://localhost:8000/api"]]
|
||||
**多代理示例:**
|
||||
|
||||
```bash
|
||||
VITE_PROXY = [["/api","http://localhost:8000/api"],["/uploads","http://localhost:8000/uploads"]]
|
||||
VITE_PROXY = [["/api","http://admin.laravel13.elevue/api"],["/uploads","http://admin.laravel13.elevue/uploads"]]
|
||||
```
|
||||
|
||||
### VITE_GLOB_API_URL_PREFIX — API 前缀
|
||||
@@ -246,7 +246,7 @@ export function createProxy(list: ProxyList = []) {
|
||||
server: {
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000/api', // 目标地址(VITE_PROXY 驱动,含 /api 前缀)
|
||||
target: 'http://admin.laravel13.elevue/api', // 目标地址(VITE_PROXY 驱动,含 /api 前缀)
|
||||
changeOrigin: true, // 修改请求头 Origin
|
||||
ws: true, // 支持 WebSocket
|
||||
rewrite: (path) => path.replace(new RegExp('^/api'), ''), // 去掉前缀,由目标地址补回
|
||||
@@ -262,7 +262,7 @@ server: {
|
||||
│
|
||||
▼ Vite proxy
|
||||
│
|
||||
▼ 转发到: http://localhost:8000/api/user/page
|
||||
▼ 转发到: http://admin.laravel13.elevue/api/user/page
|
||||
```
|
||||
|
||||
## 构建命令
|
||||
@@ -376,7 +376,7 @@ pnpm build:prod # 生产环境构建
|
||||
|
||||
**原因:** 代理配置错误或后端未启动。
|
||||
|
||||
**解决:** 检查 `.env.development` 中 `VITE_PROXY` 的目标地址是否正确,`curl http://localhost:8000/api/captcha` 验证后端;改完配置重启 `pnpm dev`。
|
||||
**解决:** 检查 `.env.development` 中 `VITE_PROXY` 的目标地址是否正确,`curl http://admin.laravel13.elevue/api/captcha` 验证后端;改完配置重启 `pnpm dev`。
|
||||
|
||||
### 问题 2:生产环境 API 请求跨域
|
||||
|
||||
|
||||
@@ -154,7 +154,7 @@
|
||||
# GET /api/generator/preview
|
||||
# Content-Type: application/json
|
||||
# Authorization: Bearer <token>
|
||||
curl -X GET http://localhost:8000/api/generator/preview \
|
||||
curl -X GET http://admin.laravel13.elevue/api/generator/preview \
|
||||
-H "Content-Type: application/json" \
|
||||
-H "Authorization: Bearer <token>" \
|
||||
-d '{
|
||||
|
||||
@@ -123,5 +123,5 @@ Route::post('{模块}/import', [Api\XxxController::class, 'import']); //
|
||||
php artisan route:list
|
||||
|
||||
# 测试路由是否正确(需先登录获取 token,见 2.7 第一个接口调试)
|
||||
curl http://localhost:8000/api/example/page -H "Authorization: Bearer <token>"
|
||||
curl http://admin.laravel13.elevue/api/example/page -H "Authorization: Bearer <token>"
|
||||
```
|
||||
|
||||
@@ -65,8 +65,16 @@
|
||||
|
||||
| 版本名称 | 说明 | 地址 |
|
||||
|:---------|:-----|:-----|
|
||||
| ThinkPHP6+Layui混编版 | 基于 ThinkPHP6、Layui 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_Layui) |
|
||||
| ThinkPHP6+ElementPlus前后端分离版 | 基于 ThinkPHP6、Vue3、ElementPlus 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_EleVue) |
|
||||
| ThinkPHP6+AntDesign前后端分离版 | 基于 ThinkPHP6、Vue3、AntDesign 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_AntdVue) |
|
||||
| ThinkPHP6+NaiveUI前后端分离版 | 基于 ThinkPHP6、Vue3、NaiveUI 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp6_NaiveVue) |
|
||||
| ThinkPHP8+Layui混编版 | 基于 ThinkPHP8、Layui 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_Layui) |
|
||||
| ThinkPHP8+ElementPlus前后端分离版 | 基于 ThinkPHP8、Vue3、ElementPlus 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_EleVue) |
|
||||
| ThinkPHP8+AntDesign前后端分离版 | 基于 ThinkPHP8、Vue3、AntDesign 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_AntdVue) |
|
||||
| ThinkPHP8+NaiveUI前后端分离版 | 基于 ThinkPHP8、Vue3、NaiveUI 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_ThinkPhp8_NaiveVue) |
|
||||
| Laravel13+Layui混编版 | 基于 Laravel13、Layui 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_Laravel13_Layui) |
|
||||
| **Laravel13+ElementPlus前后端分离版** | **基于 Laravel13、Vue3、ElementPlus 等技术栈(当前文档)** | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_Laravel13_EleVue) |
|
||||
| Laravel13+ElementPlus前后端分离版 | 基于 Laravel13、Vue3、ElementPlus 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_Laravel13_EleVue) |
|
||||
| Laravel13+AntDesign前后端分离版 | 基于 Laravel13、Vue3、AntDesign 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_Laravel13_AntdVue) |
|
||||
| Laravel13+NaiveUI前后端分离版 | 基于 Laravel13、Vue3、NaiveUI 等技术栈 | [Gitee地址](https://gitee.com/rxthinkcmf/RXThinkCMF_Laravel13_NaiveVue) |
|
||||
|
||||
|
||||
@@ -118,7 +118,7 @@ composer dev
|
||||
# 方式二:单独启动 API 服务(内置 PHP 开发服务器,默认监听 127.0.0.1:8000)
|
||||
# -----------------------------------------------------------------------------
|
||||
# serve → 启动 Laravel 内置的 PHP 开发服务器
|
||||
# 启动后浏览器访问 http://localhost:8000 即可
|
||||
# 启动后浏览器访问 http://admin.laravel13.elevue 即可
|
||||
php artisan serve
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
@@ -156,13 +156,13 @@ INFO Press Ctrl-C to quit.
|
||||
# -----------------------------------------------------------------------------
|
||||
# 健康检查(Laravel 内置 /up 路由)
|
||||
# -----------------------------------------------------------------------------
|
||||
curl http://localhost:8000/up
|
||||
curl http://admin.laravel13.elevue/up
|
||||
# → {"status":"ok"}
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 验证码接口(公开接口,同时验证 PHP → Redis 链路)
|
||||
# -----------------------------------------------------------------------------
|
||||
curl http://localhost:8000/api/captcha
|
||||
curl http://admin.laravel13.elevue/api/captcha
|
||||
# → {"code":0,"ok":true,"msg":"操作成功","data":{"key":"...","captcha":"data:image/png;base64,..."}}
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
@@ -171,7 +171,7 @@ curl http://localhost:8000/api/captcha
|
||||
# -X POST → 使用 POST 方法
|
||||
# -H → 设置请求头(Content-Type: application/json)
|
||||
# -d → 发送 JSON 格式的请求体
|
||||
curl -X POST http://localhost:8000/api/login \
|
||||
curl -X POST http://admin.laravel13.elevue/api/login \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"username":"admin","password":"123456"}'
|
||||
|
||||
|
||||
@@ -280,7 +280,7 @@ DB_PREFIX=laravel_
|
||||
php artisan --version
|
||||
|
||||
# 方式二:手动测试登录接口(POST 请求 + JSON 参数)
|
||||
curl http://localhost:8000/api/login -X POST \
|
||||
curl http://admin.laravel13.elevue/api/login -X POST \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"username":"admin","password":"123456"}'
|
||||
```
|
||||
|
||||
@@ -7,7 +7,7 @@ Docker 方案适合快速体验项目功能,无需在本机手动安装 PHP、
|
||||
## 架构说明
|
||||
|
||||
```text
|
||||
浏览器 → localhost:8000 → [Nginx 容器:80] → [PHP-FPM 容器:9000] → Laravel 应用
|
||||
浏览器 → admin.laravel13.elevue → [Nginx 容器:80] → [PHP-FPM 容器:9000] → Laravel 应用
|
||||
↕
|
||||
[MySQL 容器:3306] + [Redis 容器:6379]
|
||||
```
|
||||
@@ -151,7 +151,7 @@ services:
|
||||
- JWT_SECRET=${JWT_SECRET:-your_random_jwt_secret_key_at_least_32_bytes_long}
|
||||
|
||||
# 文件访问域名(接口返回上传文件的完整地址)
|
||||
- FILE_DOMAIN_URL=${DOMAIN_URL:-http://localhost:8000}
|
||||
- FILE_DOMAIN_URL=${DOMAIN_URL:-http://admin.laravel13.elevue}
|
||||
|
||||
# 跨域来源(快速体验默认放开)
|
||||
- CORS_ALLOW_ORIGIN=${CORS_ALLOW_ORIGIN:-*}
|
||||
@@ -435,8 +435,8 @@ REDIS_PASSWORD=Your_Redis_Password_2024
|
||||
# 应用
|
||||
JWT_SECRET=<32 字符以上随机值,openssl rand -base64 32 生成>
|
||||
APP_DEBUG=false
|
||||
DOMAIN_URL=http://localhost:8000
|
||||
CORS_ALLOW_ORIGIN=http://localhost:8000
|
||||
DOMAIN_URL=http://admin.laravel13.elevue
|
||||
CORS_ALLOW_ORIGIN=http://admin.laravel13.elevue
|
||||
```
|
||||
|
||||
:::tip 与本地 .env 的关系
|
||||
@@ -460,8 +460,8 @@ CORS_ALLOW_ORIGIN=http://localhost:8000
|
||||
|
||||
| 服务 | 地址 | 说明 |
|
||||
|------|------|------|
|
||||
| 后端 API | http://localhost:8000 | Nginx → PHP-FPM → Laravel |
|
||||
| 健康检查 | http://localhost:8000/up | Laravel 内置健康路由 |
|
||||
| 后端 API | http://admin.laravel13.elevue | Nginx → PHP-FPM → Laravel |
|
||||
| 健康检查 | http://admin.laravel13.elevue/up | Laravel 内置健康路由 |
|
||||
| MySQL | localhost:3306 | 用户名 root,默认密码 root123 |
|
||||
| Redis | localhost:6379 | 默认密码 redis123 |
|
||||
|
||||
@@ -469,15 +469,15 @@ CORS_ALLOW_ORIGIN=http://localhost:8000
|
||||
|
||||
```bash
|
||||
# 健康检查
|
||||
curl http://localhost:8000/up
|
||||
curl http://admin.laravel13.elevue/up
|
||||
|
||||
# 验证码(同时验证 PHP→Redis 链路,返回 code=0 即成功)
|
||||
curl http://localhost:8000/api/captcha
|
||||
curl http://admin.laravel13.elevue/api/captcha
|
||||
# → {"code":0,"ok":true,"msg":"操作成功","data":{...}}
|
||||
|
||||
# 登录获取 Token(默认管理员账号 admin / 123456,登录后立即修改)
|
||||
# 验证码参数 key/code 与 /api/captcha 响应字段一致
|
||||
curl -X POST http://localhost:8000/api/login \
|
||||
curl -X POST http://admin.laravel13.elevue/api/login \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"username":"admin","password":"123456","key":"<captcha_key>","code":"<验证码字符>"}'
|
||||
```
|
||||
|
||||
@@ -88,7 +88,7 @@ pnpm install # 重新安装所有依赖
|
||||
|
||||
A: 检查以下几点:
|
||||
|
||||
1. 后端服务是否启动(`curl http://localhost:8000/api/captcha` 验证)
|
||||
1. 后端服务是否启动(`curl http://admin.laravel13.elevue/api/captcha` 验证)
|
||||
2. Vite 代理配置是否正确(`vite.config.ts` 中的 `target`,改完重启 `pnpm dev`)
|
||||
3. API 路径是否正确(应以 `/api` 开头)
|
||||
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
|
||||
```bash
|
||||
# GET 请求获取验证码(返回 Base64 编码的图片 + 验证码 key)
|
||||
curl http://localhost:8000/api/captcha
|
||||
curl http://admin.laravel13.elevue/api/captcha
|
||||
```
|
||||
|
||||
响应示例:
|
||||
@@ -52,7 +52,7 @@ curl http://localhost:8000/api/captcha
|
||||
# password → 密码
|
||||
# key → 步骤一返回的验证码 key(与 captcha 响应字段命名一致)
|
||||
# code → 验证码图片上显示的字符
|
||||
curl -X POST http://localhost:8000/api/login \
|
||||
curl -X POST http://admin.laravel13.elevue/api/login \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{
|
||||
"username": "admin",
|
||||
@@ -100,7 +100,7 @@ curl -X POST http://localhost:8000/api/login \
|
||||
# -----------------------------------------------------------------------------
|
||||
# pageNo=1\&pageSize=10 → 分页参数(\& 是 bash 转义,防止 & 被解释为后台运行符)
|
||||
# -H "Authorization: Bearer <token>" → 在请求头中携带 JWT Token
|
||||
curl "http://localhost:8000/api/user/page?pageNo=1&pageSize=10" \
|
||||
curl "http://admin.laravel13.elevue/api/user/page?pageNo=1&pageSize=10" \
|
||||
-H "Authorization: Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9..."
|
||||
```
|
||||
|
||||
@@ -136,33 +136,33 @@ curl "http://localhost:8000/api/user/page?pageNo=1&pageSize=10" \
|
||||
# -----------------------------------------------------------------------------
|
||||
# 获取当前登录用户信息
|
||||
# -----------------------------------------------------------------------------
|
||||
curl http://localhost:8000/api/index/getUser \
|
||||
curl http://admin.laravel13.elevue/api/index/getUser \
|
||||
-H "Authorization: Bearer <your_token>"
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 获取当前用户的菜单列表(用于前端动态路由)
|
||||
# -----------------------------------------------------------------------------
|
||||
curl http://localhost:8000/api/index/getMenus \
|
||||
curl http://admin.laravel13.elevue/api/index/getMenus \
|
||||
-H "Authorization: Bearer <your_token>"
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 获取字典项(gender = 性别字典的编码)
|
||||
# -----------------------------------------------------------------------------
|
||||
curl http://localhost:8000/api/dict/item/getDictItemList/gender \
|
||||
curl http://admin.laravel13.elevue/api/dict/item/getDictItemList/gender \
|
||||
-H "Authorization: Bearer <your_token>"
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 刷新 Token(access_token 过期后,用 refresh_token 换取新的令牌对)
|
||||
# -----------------------------------------------------------------------------
|
||||
# refresh 为公开接口(无需 access_token)
|
||||
curl -X POST http://localhost:8000/api/refresh \
|
||||
curl -X POST http://admin.laravel13.elevue/api/refresh \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"refresh_token": "<your_refresh_token>"}'
|
||||
|
||||
# -----------------------------------------------------------------------------
|
||||
# 登出(令牌即时失效,需携带 access_token)
|
||||
# -----------------------------------------------------------------------------
|
||||
curl -X POST http://localhost:8000/api/logout \
|
||||
curl -X POST http://admin.laravel13.elevue/api/logout \
|
||||
-H "Authorization: Bearer <your_token>"
|
||||
```
|
||||
|
||||
@@ -224,7 +224,7 @@ HTTP 状态码为 200,前端据 body `code=401` 触发跳转登录。
|
||||
## ApiFox 配置建议
|
||||
|
||||
1. 创建环境,设置变量:
|
||||
- `base_url` = `http://localhost:8000`
|
||||
- `base_url` = `http://admin.laravel13.elevue`
|
||||
- `token` = 登录后填入 access_token
|
||||
|
||||
2. 在请求头中使用变量:
|
||||
|
||||
@@ -40,57 +40,79 @@ npm config set registry https://registry.npmmirror.com
|
||||
|
||||
### `.env.development`(开发环境)
|
||||
|
||||
摘自前端项目 `ui/.env.development`:
|
||||
|
||||
```bash
|
||||
# 服务端口
|
||||
# 只在开发模式中被载入
|
||||
VITE_PORT = 8001
|
||||
|
||||
# 公共基础路径
|
||||
# 网站根目录
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 代理配置(JSON 数组格式:[["前缀","目标地址"]])
|
||||
VITE_PROXY = [["/api","http://localhost:8000/api"]]
|
||||
# 是否开启mock
|
||||
VITE_USE_MOCK = false
|
||||
|
||||
# API 接口基础路径(留空,由代理处理)
|
||||
# 是否删除console
|
||||
VITE_DROP_CONSOLE = true
|
||||
|
||||
# 跨域代理,可以配置多个,请注意不要换行
|
||||
VITE_PROXY=[["/api","http://admin.laravel13.elevue/api"]]
|
||||
|
||||
# API 接口地址
|
||||
VITE_GLOB_API_URL =
|
||||
|
||||
# API 前缀
|
||||
# 图片上传地址
|
||||
VITE_GLOB_UPLOAD_URL=
|
||||
|
||||
# 图片前缀地址
|
||||
VITE_GLOB_IMG_URL=
|
||||
# 是否启用gzip压缩或brotli压缩
|
||||
# 可选: gzip | brotli | none
|
||||
# 如果你需要多种形式,你可以用','来分隔
|
||||
VITE_BUILD_COMPRESS = 'none'
|
||||
|
||||
# 使用压缩时是否删除原始文件,默认为false
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||||
# 接口前缀
|
||||
VITE_GLOB_API_URL_PREFIX = /api
|
||||
|
||||
# 上传接口地址
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
|
||||
# 图片访问地址(附件域名,对应后端 FILE_DOMAIN_URL)
|
||||
VITE_GLOB_IMG_URL = http://file.laravel13.elevue
|
||||
|
||||
# 是否启用 Mock 数据(false = 使用真实后端 API)
|
||||
VITE_USE_MOCK = false
|
||||
```
|
||||
|
||||
:::tip 代理目标
|
||||
`VITE_PROXY` 默认指向 Laragon 虚拟主机 `http://admin.laravel13.elevue/api`(见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html));直连 `php artisan serve` 时改为 `[["/api","http://admin.laravel13.elevue/api"]]`。修改后需重启 `pnpm dev` 生效。
|
||||
:::
|
||||
|
||||
### `.env.production`(生产环境)
|
||||
|
||||
摘自前端项目 `ui/.env.production`:
|
||||
|
||||
```bash
|
||||
# 公共基础路径
|
||||
# 是否开启mock
|
||||
VITE_USE_MOCK = false
|
||||
|
||||
# 网站根目录
|
||||
VITE_PUBLIC_PATH = /
|
||||
|
||||
# 是否在生产环境删除 console
|
||||
# 是否删除console
|
||||
VITE_DROP_CONSOLE = true
|
||||
|
||||
# API 接口基础路径(留空,由 Nginx 代理处理)
|
||||
# API
|
||||
VITE_GLOB_API_URL =
|
||||
|
||||
# API 前缀
|
||||
# 图片上传地址
|
||||
VITE_GLOB_UPLOAD_URL=
|
||||
|
||||
# 图片前缀地址
|
||||
VITE_GLOB_IMG_URL=
|
||||
|
||||
# 接口前缀
|
||||
VITE_GLOB_API_URL_PREFIX = /api
|
||||
|
||||
# 上传接口地址
|
||||
VITE_GLOB_UPLOAD_URL = /api/upload
|
||||
# 是否启用gzip压缩或brotli压缩
|
||||
# 可选: gzip | brotli | none
|
||||
# 如果你需要多种形式,你可以用','来分隔
|
||||
VITE_BUILD_COMPRESS = 'none'
|
||||
|
||||
# 图片访问地址
|
||||
VITE_GLOB_IMG_URL = https://file.example.com
|
||||
|
||||
# 是否启用 gzip 压缩
|
||||
VITE_BUILD_COMPRESS = gzip
|
||||
|
||||
# 压缩后是否删除原文件
|
||||
# 使用压缩时是否删除原始文件,默认为false
|
||||
VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
|
||||
```
|
||||
|
||||
@@ -117,31 +139,33 @@ npm run dev
|
||||
|
||||
## 步骤四:配置 API 代理
|
||||
|
||||
开发环境下,前端通过 Vite 代理将 `/api` 请求转发到后端服务。
|
||||
开发环境下,前端通过 Vite 代理将 `/api` 请求转发到后端服务,代理规则由 `.env.development` 的 `VITE_PROXY` 驱动(并非写死在 `vite.config.ts` 中)。
|
||||
|
||||
在 `vite.config.ts` 中配置代理:
|
||||
`vite.config.ts` 读取 `VITE_PROXY` 并调用 `createProxy` 生成代理:
|
||||
|
||||
```typescript
|
||||
// ui/vite.config.ts
|
||||
server: {
|
||||
port: 8001, // 开发服务器端口(对应 VITE_PORT)
|
||||
proxy: {
|
||||
'/api': {
|
||||
target: 'http://localhost:8000/api', // 后端服务地址(对应 VITE_PROXY)
|
||||
changeOrigin: true, // 开启跨域(修改请求头的 Origin)
|
||||
rewrite: (path) => path, // 保持路径不变(不做路径替换)
|
||||
},
|
||||
},
|
||||
host: true,
|
||||
port: VITE_PORT, // 开发服务器端口(对应 VITE_PORT)
|
||||
proxy: createProxy(VITE_PROXY), // 由 .env.development 的 VITE_PROXY 生成
|
||||
}
|
||||
```
|
||||
|
||||
后端使用虚拟域名时(见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)),target 改为对应地址:
|
||||
`createProxy`(`build/vite/proxy.ts`)为每个 `[前缀, 目标地址]` 生成一条代理规则:
|
||||
|
||||
```typescript
|
||||
target: 'http://admin.laravel13.elevue/api',
|
||||
ret[prefix] = {
|
||||
target, // 目标地址(自带 /api,如 http://admin.laravel13.elevue/api)
|
||||
changeOrigin: true, // 修改请求头 Origin,解决跨域
|
||||
ws: true, // 支持 WebSocket
|
||||
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''), // 去掉 /api 前缀,由 target 中的 /api 补回
|
||||
};
|
||||
```
|
||||
|
||||
确保后端服务已启动(`php artisan serve`),然后访问 `http://localhost:8001`。
|
||||
更换后端地址时修改 `.env.development` 中的 `VITE_PROXY` 即可(直连 `php artisan serve` 时改为 `http://admin.laravel13.elevue/api`,见 [2.2 Laragon 环境搭建](/zh/quickstart/laragon.html)),改后重启 `pnpm dev` 生效。
|
||||
|
||||
确保后端服务已启动(Laragon 或 `php artisan serve`),然后访问 `http://localhost:8001`。
|
||||
|
||||
## 步骤五:验证前后端联调
|
||||
|
||||
@@ -151,7 +175,7 @@ target: 'http://admin.laravel13.elevue/api',
|
||||
4. 登录成功后进入控制台页面
|
||||
|
||||
:::tip 代理原理
|
||||
浏览器 → `http://localhost:8001/api/login` → Vite 代理 → `http://localhost:8000/api/login` → 后端处理
|
||||
浏览器 → `http://localhost:8001/api/login` → Vite 代理(rewrite 去掉 `/api`、target 补回)→ `http://admin.laravel13.elevue/api/login` → 后端处理
|
||||
|
||||
代理方式下前端无需关心跨域;若改为直连后端(`VITE_GLOB_API_URL` 配置完整地址),则依赖后端 CORS 配置(`.env` 中 `CORS_ALLOW_ORIGIN`)。
|
||||
:::
|
||||
@@ -205,12 +229,12 @@ server: {
|
||||
检查后端服务是否启动,以及代理配置是否正确:
|
||||
|
||||
```bash
|
||||
# 确认后端在运行(直接请求后端验证码接口)
|
||||
curl http://localhost:8000/api/captcha
|
||||
# 确认后端在运行(直接请求后端验证码接口,默认虚拟主机)
|
||||
curl http://admin.laravel13.elevue/api/captcha
|
||||
# → {"code":0,...} 即后端正常
|
||||
```
|
||||
|
||||
再检查 `vite.config.ts` 中 `proxy.target` 是否指向后端实际地址(改完需重启 `pnpm dev`)。
|
||||
再检查 `.env.development` 中 `VITE_PROXY` 的目标地址是否指向后端实际地址(改完需重启 `pnpm dev`)。
|
||||
|
||||
### 4. 登录报 401
|
||||
|
||||
|
||||
Reference in New Issue
Block a user