第四部分：运行与部署
4.1 启动后端
cd travel-api
# 安装依赖
composer install
# 生成应用密钥
php artisan key:generate
# 生成JWT密钥
php artisan jwt:secret
# 运行数据库迁移
php artisan migrate
# 启动开发服务器
php artisan serve
后端API将运行在 http://localhost:8000/api
4.2 启动前端
cd travel-ui
# 安装依赖
npm install
# 启动开发服务器
npm run dev
前端将运行在 http://localhost:5173
4.3 Vite代理配置
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import path from 'path';
export default defineConfig({
plugins: [vue()],
resolve: {
alias: { '@': path.resolve(__dirname, 'src') }
},
server: {
port: 5173,
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
});
第五部分：运行与部署
5.1 开发环境准备详解
在开始运行项目之前，我们需要确保开发环境正确配置。以下是完整的环境配置指南：
5.1.1 PHP环境安装与配置
PHP是Laravel框架的运行基础，Laravel 10要求PHP版本不低于8.1。以下是不同操作系统的安装方法：
Windows系统：
下载并安装XAMPP或WampServer集成环境（推荐新手使用）
或者下载PHP 8.1+安装包，手动配置环境变量
将PHP安装目录添加到系统PATH环境变量中
macOS系统：
# 使用Homebrew安装PHP
brew install php@8.1
# 切换PHP版本
brew link --overwrite php@8.1
# 验证安装
php -v
Ubuntu/Debian系统：
# 添加PHP源
sudo add-apt-repository ppa:ondrej/php
sudo apt update
# 安装PHP 8.1及必要扩展
sudo apt install php8.1 php8.1-cli php8.1-common php8.1-mysql \
php8.1-zip php8.1-gd php8.1-mbstring php8.1-curl php8.1-xml php8.1-bcmath
# 验证安装
php -v
5.1.2 Composer安装
Composer是PHP的依赖管理工具，类似于前端的npm。
# 下载并安装Composer
php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
php composer-setup.php
php -r "unlink('composer-setup.php');"
# 全局安装（Linux/macOS）
sudo mv composer.phar /usr/local/bin/composer
# 验证安装
composer --version
5.1.3 MySQL安装与配置
# Ubuntu/Debian安装MySQL
sudo apt install mysql-server
sudo mysql_secure_installation
# 启动MySQL服务
sudo systemctl start mysql
sudo systemctl enable mysql
# 登录MySQL创建数据库
sudo mysql -u root -p
# 创建数据库和用户
CREATE DATABASE travel_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'travel_user'@'localhost' IDENTIFIED BY 'password123';
GRANT ALL PRIVILEGES ON travel_db.* TO 'travel_user'@'localhost';
FLUSH PRIVILEGES;
5.1.4 Node.js安装
# 使用nvm安装Node.js（推荐）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.0/install.sh | bash
source ~/.bashrc
nvm install 18
nvm use 18
# 验证安装
node -v
npm -v
5.2 后端项目配置与启动详解
5.2.1 克隆/创建项目后的初始化步骤
# 进入后端项目目录
cd travel-api
# 步骤1：安装Composer依赖
# 这会在vendor目录中安装Laravel框架及所有依赖包
composer install
# 如果在中国大陆，可以使用国内镜像加速
composer config -g repo.packagist composer https://packagist.phpcomposer.com
composer install
依赖安装说明：
laravel/framework：Laravel核心框架
tymon/jwt-auth：JWT认证扩展包
fruitcake/laravel-cors：跨域请求支持
5.2.2 环境配置文件配置
# 复制环境配置文件
cp .env.example .env
# 生成应用密钥（Laravel用于Session加密等）
php artisan key:generate
# 生成JWT密钥（用于签名和验证JWT令牌）
php artisan jwt:secret
# 生成配置文件缓存（可选，生产环境建议执行）
php artisan config:cache
.env文件关键配置详解：
# 应用基础配置
APP_NAME="旅游管理系统API" # 应用名称，将显示在日志和邮件中
APP_ENV=local # 环境：local(开发), staging(测试), production(生产)
APP_DEBUG=true # 调试模式：开启后错误会显示详细信息
APP_URL=http://localhost:8000 # 应用访问地址
# 数据库配置（必须与实际数据库信息一致）
DB_CONNECTION=mysql # 数据库类型
DB_HOST=127.0.0.1 # 数据库主机地址
DB_PORT=3306 # 数据库端口
DB_DATABASE=travel_db # 数据库名称
DB_USERNAME=root # 数据库用户名
DB_PASSWORD=123456 # 数据库密码
# JWT配置
JWT_SECRET=your-secret-key # 由php artisan jwt:secret生成
JWT_TTL=60 # Token有效期（分钟），设为null表示永不过期
# 前端地址（用于CORS跨域配置）
FRONTEND_URL=http://localhost:5173
5.2.3 数据库迁移与数据填充
# 执行数据库迁移（创建所有数据表）
php artisan migrate
# 如果迁移失败，可以回滚后重新执行
php artisan migrate:refresh
# 填充初始数据（管理员账户、测试分类等）
php artisan db:seed
# 如果需要单独执行某个Seeder
php artisan db:seed --class=DatabaseSeeder
迁移执行成功标志：
Migration table created successfully.
Migrating: 2014_10_12_000000_create_users_table
Migrated: 2014_10_12_000000_create_users_table (123.45ms)
Migrating: 2024_01_01_000000_create_categories_table
Migrated: 2024_01_01_000000_create_categories_table (89.23ms)
...
5.2.4 启动后端开发服务器
# 启动Laravel开发服务器
php artisan serve
# 指定端口启动（如果8000被占用）
php artisan serve --port=8080
# 指定主机启动（允许外部访问）
php artisan serve --host=0.0.0.0 --port=8000
启动成功标志：
Starting Laravel development server: http://127.0.0.1:8000
[Sun May 1 10:30:00 2024] PHP 8.1.2 Development Server (http://127.0.0.1:8000) started
5.3 前端项目配置与启动详解
5.3.1 安装依赖的详细说明
cd travel-ui
# 安装项目依赖
npm install
# 依赖安装过程说明：
# - node_modules目录将包含所有前端依赖
# - 主要依赖包括：vue@^3.3.0, element-plus, axios, vue-router@4, pinia
# - 首次安装可能需要3-5分钟
如果安装速度慢，可以使用国内镜像：
# 设置淘宝镜像
npm config set registry https://registry.npmmirror.com
# 重新安装
npm install
5.3.2 启动开发服务器
# 启动Vue开发服务器
npm run dev
# 指定端口启动
npm run dev -- --port=3000
启动成功标志：
VITE v4.5.0 ready in 500 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
