Laravel-admin 如何安装?

laravel-admin

Packagist
Total Downloads
Awesome Laravel

laravel-admin 是一个可以快速帮你构建后台管理的工具,它提供的页面组件和表单元素等功能,能帮助你使用很少的代码就实现功能完善的后台管理功能。

Demo || 阅读文档 或者 Demo || 阅读文档

Screenshots

laravel-admin

安装

要求:

一. php >=7.0

二. 安装好composer

三. 安装好npm(建议使用国内镜像cnpm,安装速度更快)

四. 安装好laravel/framework: 5.5.*

相关软件下载

步骤

先安装laravel项目代码库

laravel new laravel-admin

cd laravel-admin

通过composer进行安装laravel-admin

composer require zsping1989/laravel-admin

安装完成后执行发布代码命令(该命令将在项目中生成控制器,模型,迁移,初始填充数据等)

php artisan laravel-admin:publish

下一步参照.env.example配置文件配置.env,
执行生成配置文件中的APP_KEY命令

php artisan key:generate

下一步执行

composer dump

系统安装(数据库建表及数据填充)

php artisan migrate --seed

前端js组件下载安装

npm install

对前端页面组件进行编译

npm run production

安装好后在编辑器里将public和node_modules目录标记为排除,不然编辑器会卡死,到此laravel-admin已经安装完成了

快速代码生成实例

数据表

navicat建表

CREATE TABLE `tests` (
`id` int(10) unsigned NOT NULL AUTO_INCREMENT COMMENT 'ID',
`user_id` int(11) unsigned NOT NULL DEFAULT '0' COMMENT '用户ID$select2',
`name` varchar(255) NOT NULL DEFAULT '' COMMENT '名称',
`password` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT '密码$password@sometimes|required|digits_between:6,18',
`email` varchar(100) CHARACTER SET utf8 COLLATE utf8_unicode_ci DEFAULT '' COMMENT '电子邮箱$email@sometimes|required|email|unique:tests,email',
`is_page` int(11) NOT NULL DEFAULT '0' COMMENT '是否为页面:0-否,1-是$radio@in:0,1',
`status` tinyint(4) NOT NULL DEFAULT '2' COMMENT '状态:1-显示,2-不显示$select@in:1,2',
`icons` varchar(255) CHARACTER SET utf8 COLLATE utf8_unicode_ci NOT NULL DEFAULT '' COMMENT '图标$icon@nullable|alpha_dash',
`method` int(11) NOT NULL DEFAULT '1' COMMENT '请求方式:1-get,2-post,4-put,8-delete,16-head,32-options,64-trace,128-connect$checkbox@required|array',
`date_at` date DEFAULT NULL COMMENT '日期$date',
`month_at` date DEFAULT NULL COMMENT '月份$month',
`time` varchar(255) NOT NULL DEFAULT '' COMMENT '时间选择器$timeSelect',
`time_picker` varchar(255) NOT NULL DEFAULT '' COMMENT '时间到秒$timePicker',
`color` varchar(255) NOT NULL DEFAULT '' COMMENT '颜色选择器$color',
`switch` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '开关$switch',
`slider` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '滑块$slider',
`rate` double(10,0) unsigned NOT NULL DEFAULT '0' COMMENT '评分星星$rate',
`num` int(11) NOT NULL DEFAULT '0' COMMENT '数字$num',
`description` varchar(255) NOT NULL DEFAULT '' COMMENT '描述$textarea',
`img` varchar(255) NOT NULL DEFAULT '' COMMENT '图片$upload',
`ueditor` text COMMENT '百度编辑器$ueditor',
`parent_id` int(11) NOT NULL DEFAULT '0' COMMENT '父级ID$ztree@nullable|exists:tests,id',
`level` smallint(6) NOT NULL DEFAULT '0' COMMENT '层级',
`left_margin` int(11) NOT NULL DEFAULT '0' COMMENT '左边界',
`right_margin` int(11) NOT NULL DEFAULT '0' COMMENT '右边界',
`created_at` timestamp NULL DEFAULT NULL,
`updated_at` timestamp NULL DEFAULT NULL,
`deleted_at` timestamp NULL DEFAULT NULL,
PRIMARY KEY (`id`),
KEY `tests_parent_id_index` (`parent_id`),
KEY `tests_left_margin_index` (`left_margin`),
KEY `tests_right_margin_index` (`right_margin`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='测试$softDeletes,timestamps,treeModel@belongsTo:user';

生成结果

编辑页面
列表页面

本帖已被设为精华帖!
本帖由系统于 6年前 自动加精
《L04 微信小程序从零到发布》
从小程序个人账户申请开始,带你一步步进行开发一个微信小程序,直到提交微信控制台上线发布。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 23

@無铭 是有所区别的哈,这个可以前后端分离,验证都使用滑块验证,自动生成代码可以简洁的生成组件,新加了三方登录,短信发送,各各页面均是vue组件,也可快速自定义组件,生成的页面自动生成验证规则,筛选页面也只需要简单配置即可实现基本功能

6年前 评论

请教一个问题,我想使用 Laravel-Admin 的 $grid->switch 功能,文档中有说到需要这么设置

在grid中对某字段设置了switch,同时需要在form里面对该字段设置同样的switch

但是一直不明其所以,没有鼓捣出来实际效果,这里是需要怎么设置呀?

6年前 评论

@無铭 相关文档,很直接点的代码生成功能直接通过表备注就可以生成对应的列表页面及编辑页面

6年前 评论
巴啦啦

真的要用吗?

6年前 评论

@無铭 创建表用navicat工具创建,重点是通过字段备注,表备注 实现页面的增删改查,字段验证等
生成的迁移文件可通过模型指定的数据库分库安装创建sql....

6年前 评论

@LittleLittleBig 我这个laravel-admin不是你用的那个 这个里面没有$grid->switch 这个要使用switch组件只需要在创建的表备注这样既可,文档

`switch` tinyint(3) unsigned NOT NULL DEFAULT '0' COMMENT '开关$switch',

创建编辑页面

php artisan create:view Admin/Test edit
6年前 评论

本来我也以为是原来的轮子,但是安装的时候可以看得出来是有货的。有一个问题是,不太懂怎么在vscode里面把public和npm的目录排除掉,现在果然卡在npm run production这里了

6年前 评论

@necodon 百度一下嘛 ,因为node的扩展包很多先排除 我的是phpstorm排除方法是 鼠标放在对应目录上点右键->标记目录为->排除(红色)

6年前 评论
嘉宝君

php artisan migrate --seed 卡在这一步
[Illuminate\Database\QueryException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was t
oo long; max key length is 767 bytes (SQL: alter table users add unique users_email_unique(email))

[PDOException]
SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was t
oo long; max key length is 767 bytes

6年前 评论

@Torankusu
修改设置数据库类型utf8 -- UTF-8 Unicode 排序规则utf8_general_ci ;

先执行

composer remove zsping1989/laravel-admin

再执行

composer clear-cache 

然后执行

composer require zsping1989/laravel-admin
php artisan migrate --seed 
6年前 评论

@Torankusu 加个命令再执行 migrate --seed

php artisan laravel-admin:publish
6年前 评论
嘉宝君

然后报错这个
[Illuminate\Database\QueryException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes (SQL: alter table jobs add index jobs_q ueue_index(queue))

[PDOException] SQLSTATE[42000]: Syntax error or access violation: 1071 Specified key was too long; max key length is 767 bytes
@zsping1989
@zsping1989

6年前 评论

按照文档来可以安装好,后台全英文的 如何汉化 'locale' => 'zh_CN',这里面已修改

5年前 评论

卡到这一步了
vagrant@homestead:~/Code/homesteadtest$ sudo php artisan laravel-admin:publish
报错如下
In Filesystem.php line 228:

symlink(): Protocol error
求解...

5年前 评论

ERROR Failed to compile with 2 errors 15:30:38

error in ./resources/assets/sass/app.scss

Module build failed:
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
^
Incompatible units: 'px' and 'rem'.
in /srv/webroot/laravel_admin/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss (line 214, column 35)

@ ./resources/assets/sass/app.scss 4:14-253
@ multi ./resources/assets/js/admin/app.js ./resources/assets/sass/app.scss

error in ./resources/assets/sass/app.scss

Module build failed: ModuleBuildError: Module build failed:
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
^
Incompatible units: 'px' and 'rem'.
in /srv/webroot/laravel_admin/node_modules/bootstrap-sass/assets/stylesheets/bootstrap/_variables.scss (line 214, column 35)
at runLoaders (/srv/webroot/laravel_admin/node_modules/webpack/lib/NormalModule.js:192:19)
at /srv/webroot/laravel_admin/node_modules/loader-runner/lib/LoaderRunner.js:364:11
at /srv/webroot/laravel_admin/node_modules/loader-runner/lib/LoaderRunner.js:230:18
at context.callback (/srv/webroot/laravel_admin/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at Object.asyncSassJobQueue.push [as callback] (/srv/webroot/laravel_admin/node_modules/sass-loader/lib/loader.js:55:13)
at Object.done [as callback] (/srv/webroot/laravel_admin/node_modules/neo-async/async.js:7974:18)
at options.error (/srv/webroot/laravel_admin/node_modules/node-sass/lib/index.js:294:32)

5年前 评论

大佬,安装完成后滑块验证显示不出来,js报错

file

@zsping1989

5年前 评论
YLR

按照文档一步一步的安装最后 npm run production 报错啦 内容如下:
D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\cli.js:244
throw err;
^

TypeError: Cannot read property 'webpackConfig' of undefined
at Object. (D:\phpstudy\PHPTutorial\WWW\laravel-admin\webpack.mix.js:13:5)
at Module._compile (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at Object. (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\laravel-mix\setup\webpack.config.js:12:1)
at Module._compile (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\v8-compile-cache\v8-compile-cache.js:178:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\v8-compile-cache\v8-compile-cache.js:159:20)
at WEBPACK_OPTIONS (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\convert-argv.js:133:13)
at requireConfig (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\convert-argv.js:135:6)
at D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\convert-argv.js:142:17
at Array.forEach ()
at module.exports (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\convert-argv.js:140:15)
at yargs.parse (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\cli.js:241:39)
at Object.parse (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\yargs\yargs.js:567:18)
at D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\cli.js:219:8
at Object. (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack-cli\bin\cli.js:530:3)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
at tryModuleLoad (module.js:506:12)
at Function.Module._load (module.js:498:3)
at Module.require (module.js:597:17)
at require (internal/module.js:11:18)
at Object. (D:\phpstudy\PHPTutorial\WWW\laravel-admin\node_modules\webpack\bin\webpack.js:155:2)
at Module._compile (module.js:653:30)
at Object.Module._extensions..js (module.js:664:10)
at Module.load (module.js:566:32)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\RYL\AppData\Roaming\npm-cache_logs\2019-01-16T10_06_11_738Z-debug.log

5年前 评论
YLR

@qufo 知道啊,webpackage打包的时候报的错。我根据提示 输入了 npm audit fix 什么的还是不行,捣鼓了半天还是问下旁边的前端吧,等人家不忙了问下。

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!