Skip to main content

快速上手

技术栈概览

XinAdmin 项目采用现代全栈技术架构:

  • 后端框架:Laravel (PHP)
  • 前端框架:React + UmiJS
  • UI 组件库:Ant Design

在开始之前,请确保您具备以下基础知识:

  • HTML、CSS、JavaScript 基础
  • PHP 开发基础
  • 数据库基础知识

推荐学习资源

技术栈说明官方文档
React前端核心框架React 文档
UmiJSReact 应用开发框架UmiJS 文档
Ant DesignReact UI 组件库Ant Design 文档
LaravelPHP 后端框架Laravel 文档
重要提示

获取项目

方式一:Git 克隆(推荐)

git clone https://github.com/xin-admin/xin-laravel.git
tip

推荐先 Fork 项目到自己的仓库,这样可以方便接收上游更新。

方式二:直接下载

访问 XinAdmin 项目主页 下载最新版本的源码压缩包。

# 下载地址
https://github.com/xin-admin/xin-laravel

项目结构

启动安装服务

1、新建数据库

请先使用数据库管理工具,链接到数据库,并新建一个空数据库。

2、配置环境变量

修改项目文件 .example.env 中的配置,确保数据库配置正确,如果你没有数据库,请先新建一个空数据库

# 数据库配置
DB_CONNECTION=mysql # 数据库类型
DB_HOST=127.0.0.1 # 数据库地址
DB_PORT=3306 # 数据库端口号
DB_DATABASE=xin_laravel # 数据库名称
DB_USERNAME=root # 数据库用户名
DB_PASSWORD=root # 数据库密码

3、安装 PHP 依赖

# 切换到项目根目录
cd xin-laravel

# 执行依赖安装命令
composer install

# 如果安装速度较慢可以先切换阿里镜像源,安装失败或提示版本不存在请多换几个镜像重试!!!
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/ # 切换阿里云镜像
# 镜像地址
# composer https://packagist.org 官方镜像
# phpcomposer https://packagist.phpcomposer.com 中文镜像
# aliyun https://mirrors.aliyun.com/composer 阿里云镜像
# tencent https://mirrors.cloud.tencent.com/composer 腾讯云镜像
# huawei https://mirrors.huaweicloud.com/repository/php 华为云镜像
# 其它镜像
# laravel-china https://packagist.laravel-china.org
# cnpkg https://php.cnpkg.org cnpkg
# sjtug https://packagist.mirrors.sjtug.sjtu.edu.cn

4、环境变量配置与数据导入

# 依赖安装完成后,你可以通过执行 以下命令来完成 XinLaravel 的安装

# 复制环境变量文件
php -r "file_exists('.env') || copy('.env.example', '.env');"

# 创建文件储存链接 (用于文件存储的本地公共目录链接)
php artisan storage:link

# 执行数据库迁移 (执行前请确保 .env 文件存在 并且已经配置好数据库 )
php artisan migrate

# 执行数据导入
php artisan db:seed

5、运行后端项目

安装完成后你就可以使用命令来运行后端项目

# Linux下推荐使用:sudo php artisan serve
# Linux下若加sudo后仍然异常,请确保 xin admin 目录的所有者和执行此命令的用户一致,推荐root
php artisan serve

上述 命令执行成功后输出类似:

INFO  Server running on [http://127.0.0.1:8000].

Press Ctrl+C to stop the server

测试访问 http://loaclhost:8000 或者 http://127.0.0.1:8000 出现 响应 JSON 即可

6、安装前端依赖

# 打开新命令行窗口并切换到 前端 项目目录
cd ./web

# 使用 pnpm 安装依赖 ,如果你没有安装 pnpm 请参阅环境准备一章安装环境变量
pnpm install

# 如果安装速度较慢可以切换npm和pnpm镜像
# 切换 npm 镜像
npm config set registry https://registry.npmmirror.com
# 切换 pnpm 镜像
pnpm config set registry https://registry.npmmirror.com

7、运行前端项目

# 你可以执行以下命令来启动前端项目
pnpm run dev

# 运行成功后输出类似以下内容
# ╔════════════════════════════════════════════════════╗
# ║ App listening at: ║
# ║ > Local: http://localhost:3000 ║
# ready - ║ > Network: http://17.128.181.104:3000 ║
# ║ ║
# ║ Now you can open browser with the above addresses↑ ║
# ╚════════════════════════════════════════════════════╝

自此,你可以通过 http://127.0.0.1:3000 来访问你的项目

info

在前后端分离开发的模式下,我们建议你保持本地环境作为开发环境,并通过 php artisan servepnpm run dev 来启动本地项目作为开发环境,如果需要部署请参考部署环节

warning

在服务器端使用 php artisan servepnpm run dev 启动项目会造成服务器性能浪费,请打包前端代码,并使用 nginx 或者 apache 来部署。具体参考部署环节

常见问题

1. 提示 composer install 命令不存在?

如果您已完成了 Composer 的安装,但还是找不到 composer 命令,可以尝试 composer.phar install 命令,如果命令还不存在,那么请检查您电脑的环境变量设置。

你已经创建过了符号链接,请不要重复执行 php artisan storage:link 命令。

3. 提示 SQLSTATE[HY000] [1045] Access denied for user 'root'@'localhost' (using password: NO)

请检查 .env 文件中的数据库配置。当前配置链接与端口号是否正确,数据表是否存在。

4. Composer 提示 Your requirements could not be resolved to an installable set of packages.

请检查报错下方的 Problem,依次解决即可,比如提示laravel/framework 11.9.0 requires ext-fileinfo * -> it is missing from your system. Install or enable PHP's fileinfo extension.,那么请为 PHP 安装 fileinfo 扩展。