如何搭建单页面应用的LaravelAdmin


Logo

Packagist Total Downloads Awesome Laravel

LaravelAdmin

介绍

laravel-admin是一个可以快速帮你构建后台管理的工具,它提供丰富的页面组件和表单元素,还有即插即用的功能组件,通过简单的配置或使用少量的代码就实现完善的后台管理功能。

Demo || 阅读文档

QQ群: 391528810

QQ群

特点

  • Laravel+Vue组合
  • SPA单页面应用
  • 前后端分离,后台只提供API接口,前端负责视图渲染
  • 开箱即用的laravel后台管理系统
  • 海量Vue组件直接拿来即用

截图

laravel-admin

软件架构

基于laravel框架实现前后端分离的单页面应用架构

使用相关技术:vue+bootstrap+phpswoole+docker+laravel

Mac环境,Linux环境安装请查看 Linux安装

Windows环境安装请查看 Windows安装

安装环境要求

  1. php>=7.4(目前项目使用的laravel8)

  2. 已安装好mysql数据库

已有数据库请正确设置好数据库默认编码charset:utf8mb4;collation:utf8mb4_unicode_ci

  1. 安装好nodejs,cnpm(用于前端模板打包编译)

安装cnpm

npm install -g cnpm --registry=https://registry.npm.taobao.org && \
cnpm -v
  1. 安装好composer(用于下载php扩展包)

安装前准备

  1. 提前安装好git(整套部署流程使用git方式部署,请依照文档通过git clone命令安装)

  2. Windows环境请进入git bash命令行工具进行执行安装

进入git bash

安装教程

  1. 下载代码
git clone https://gitee.com/laravel-admin/laraveladmin.git
cd laraveladmin
git remote add laraveladmin https://gitee.com/laravel-admin/laraveladmin.git
  1. 参照.env.example配置.env文件(务必设置好mysql密码,redis密码)
  • 数据库连接用户请使用root,程序需要检查数据库是否存在并创建数据库,开发环境的代码生成是通过读取数据表结构进行代码生成的
cp .env.example .env
vi .env
  1. 安装composer相关扩展包及项目代码初始化(以下两种方式选一种进行安装即可)

windows安装请先直接下载vendor.zip解压在项目代码中

vendor.zip

composer install

phpstudy安装执行迁移命令出现如下错误时,可以升级mysql到8版本,或请参考解决方案执行迁移文件错误解决 执行迁移文件错误

3-1. 直接命令安装

cnpm install #前端编译扩展包安装
npm run prod #编译前端页面js
php artisan config:clear #清理配置缓存
php artisan cache:clear #清理缓存
php artisan key:generate --force #生成APP_KEY
php artisan storage:link #创建上传文件目录软连接
php artisan db:seed --class=CheckDatabaseSeeder --force #检查并创建数据库
php artisan migrate:all #创建数据表
php artisan db:seed --force #初始化数据

3-2. 通过envoy命令进行安装

如果安装"laravel/envoy"过程中失败请切换下全局镜像源,进行尝试

- 腾讯云composer镜像源:https://mirrors.cloud.tencent.com/composer
- 阿里云composer镜像源:https://mirrors.aliyun.com/composer
- 华为云composer镜像源:https://mirrors.huaweicloud.com/repository/php
- laravel(中国)composer镜像源:https://packagist.laravel-china.org
- phpcomposer:https://packagist.phpcomposer.com
composer config -g repo.packagist composer https://mirrors.cloud.tencent.com/composer #设置镜像源
composer global require laravel/envoy -vvv #该命令出错了请切换镜像源
composer global dump-autoload
cnpm install #前端编译扩展包安装
npm run prod #编译前端页面js
envoy run init --branch=master --self=1 #项目初始化

安装完成请在编辑器排除这两个目录防止编辑器被卡死

防止编辑器卡死

  1. 配置nginx访问请参照"docker/nginx/vhost_dev/local.laraveladmin.cn.conf"

  2. 访问

本地开发环境绑定hosts后就可以进行访问了

127.0.0.1 local.laraveladmin.cn

登录用户名及密码参照.env中的"ADMIN_USER_NAME","ADMIN_PASSWORD"设置项 登录验证码使用的极验滑块验证(免费的),注册后在.env中进行配置

  1. 开发环境前端实时编译启动
npm run watch
  1. 代码更新升级

Linux,Mac系统执行

envoy run update --branch=master --self=1
  1. 添加自己的代码仓库源
git remote remove origin
git remote add origin https://用户名:密码@gitee.com/自己代码仓库.git
  1. 本地开发环境更新到laraveladmin最新代码
git pull laraveladmin master
  1. 定时任务,队列,守护进程管理请自己手动添加

定时任务

队列,Supervisor

  1. 安装完成后的常见问题

    • 进入页面提示错误信息

      页面错误提示图片

      请检查.env中的APP_URL设置项是否设置正确(必须与浏览器访问地址路径一致且不要以"/"结尾)

    • 验证码一直处于加载中

      验证码一直处于加载中

      请设置.env中的APP_VERIFY_LOGIN_PASS_NUM值为更大的值,或者申请极验配置项配置在.env中

    • 极验配置流程

使用说明

  1. 官网及相关文档: https://www.laraveladmin.cn

  2. 在线示例演示环境: https://demo.laraveladmin.cn

用户名:demo_admin

密码:admin123456

参与贡献

  1. Fork 本仓库
  2. 新建 Feat_xxx 分支
  3. 提交代码
  4. 新建 Pull Request

Vote Vote Cancel Collect Collect Cancel

<< 上一篇: Redis Cluster 集群解决方案

>> 下一篇: 没有下一篇了