基于Laravel+Angularjs+Bootstrap+AdminLTE实现的后台模板 —— Laravel Angular Admin

Created 9 years ago by 学院君, Updated 5 years ago Revision #3 92124 views 20 likes 0 collects

1、简介

Laravel Angular Admin 是一个基于Laravel + Angularjs + Bootstrap + AdminLTE 实现的后台模板，使用了Gulp工作流，并且支持 OAuth 和 JWT 认证，此外使用 Dingo API 实现了RESTful API，还用到了 Restangular 和 UI-Router，在权限控制方面，使用了 Romanbican/Roles 和 Angular ACL。

2、安装

执行下面安装命令之前，先参考设置 Linux/Mac 本地开发环境或设置 Windows 本地开发环境安装好必备软件和工具。

你可能还需要安装的前端组件：

npm install phantomjs-prebuilt
npm install --save-dev run-sequence
npm install gulp-sass

做好以上准备工作后开始安装本应用：

git clone https://github.com/silverbux/laravel-angular-admin.git
cd laravel-angular-admin
composer install && npm install && bower install

编辑.env中的数据库配置（如果没有的话拷贝.env.example并重命名为.env）和OAuth认证配置。.env文件中很多配置都是Laravel默认提供的，这里我们罗列了一些新增的配置项：

配置项	描述
MAIL_FROM	系统邮件地址
MAIL_FROM_NAME	系统邮件名称
GITHUB_CLIENT_ID	Github Oauth 客户端 id，点击这里创建
GITHUB_CLIENT_SECRET	Github Oauth 客户端 secret
GITHUB_REDIRECT	GitHub认证回调地址，例如:`http://yourdomain.com/auth/github/callback`
GOOGLE_CLIENT_ID	Google Oauth客户端id，点击这里创建
GOOGLE_CLIENT_SECRET	Google Oauth 客户端 secret
GOOGLE_REDIRECT	Google认证回调地址，例如:`http://yourdomain.com/auth/google/callback`
FACEBOOK_CLIENT_ID	Facebook Oauth 客户端 id，点击这里创建
FACEBOOK_CLIENT_SECRET	Facebook Oauth 客户端 secret
FACEBOOK_REDIRECT	Facebook认证回调地址，例如:`http://yourdomain.com/auth/facebook/callback`

最后运行如下命令创建数据表并填充数据：

php artisan migrate
php artisan db:seed

3、使用

上手指南

$gulp && gulp watch

然后在终端中启用PHP自带的服务器：

php artisan serve

在浏览器中访问 http://localhost:8000/，这会跳转到登录页面：

默认的用户名/密码是： admin@example.com / password，如果你要使用社交媒体账号登录需要在.env中配置相应选项。这里我们使用用户名/密码登录，登录成功后即可跳转到后台：

Angular生成器

$ artisan ng:page name       #New page inside angular/app/pages/
$ artisan ng:dialog name     #New custom dialog inside angular/dialogs/
$ artisan ng:component name  #New component inside angular/app/components/
$ artisan ng:service name    #New service inside angular/services/
$ artisan ng:filter name     #New filter inside angular/filters/
$ artisan ng:config name     #New config inside angular/config/

Vote Vote Cancel

Collect Collect Cancel

Donate

46 Comments

安装成功后，显示以下信息： [14:33:19] Starting 'watch'... [14:33:19] Finished 'watch' after 132 ms [Browsersync] Proxying: http://localhost:8000 [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.1.108:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://192.168.1.108:3001 1）打开http://localhost:3001，是个BrowserSync的管理界面 2）打开http://localhost:8000，是个空页面，没有看到Admin-LTE登录的信息。

npm install过程中会报错，原因是有一个json文件内容有问题。错误信息： Unexpected string in JSON at position 469 npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! undefined postinstall: `bower install && gulp --production` npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the undefined postinstall 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! /Users/bluesky/.npm/_logs/2018-03-30T06_16_36_574Z-debug.log wyqtekiMacBook-Pro:laravelAngularAdmin bluesky$ vi /Users/bluesky/h5/laravelAngularAdmin/bower_components/Chart.js/.bower.json 文件名：bower_components/Chart.js/.bower.json 正确的内容如下： { "name": "Chart.js", "version": "1.0.2", "description": "Simple HTML5 Charts using the canvas element", "homepage": "https://github.com/nnnick/Chart.js", "author": "nnnick", "main": [ "Chart.js" ], "dependencies": {}, "_release": "1.0.2", "_resolution": { "type": "version", "tag": "v1.0.2", "commit": "930b16a0af59201dcfcd1594b0e7540db4d04c9f" }, "_source": "https://github.com/chartjs/Chart.js.git", "_target": "1.0.*", "tag": "v1.1.1", "commit": "a62537a80029cd5a2e230769a652904e2de2d5d4", "_source": "https://github.com/nnnick/Chart.js.git", "_target": "~1.1.1" }

prefix the choice with! to persist it to bower.json怎么回事，怎么没解决

prefix the choice with! to persist it to bower.json ?Answer 写什么

npm install 一直卡着装不动

这个后台框架不错，就用它构建自己的后台吧

登录后即可添加评论

基于Laravel+Angularjs+Bootstrap+AdminLTE实现的后台模板 —— Laravel Angular Admin

快速构建 RESTful API 以及现代化 Web 应用的 Laravel 原型项目 —— Someline

使用 Laravel 快速构建网站系列 —— 内容管理系统：Laravel 5 Boilerplate

使用 Laravel 快速构建网站系列 —— Laravel 5 Angular Material Starter

基于 Laravel 5.5 的内容管理和 API 服务系统 —— LaraCMS

使用 Laravel 快速构建网站系列 —— 内容管理系统：Bootstrap CMS

使用 Laravel 快速构建网站系列 —— 内容管理系统：October

使用 Laravel 快速构建网站系列 —— 内容管理系统：TypiCMS

使用 Laravel 快速构建网站系列 —— 内容管理系统：LavaLite

使用 Laravel 快速构建网站系列 —— 内容管理系统：PyroCMS

使用 Laravel 快速构建网站系列 —— Laravel and AngularJS CMS

基于 Laravel 5 构建的、支持模块化和多语言的 CMS —— AsgardCMS

基于 Laravel 5.3 开发的下一代 CMS系统 —— Coaster CMS，干货还是噱头？

基于 Laravel 5.4 开发的简单模块化开源 CMS 系统 —— Borgert

基于 Laravel 开发的自带前后端主题模板的 CMS 系统 —— WebEd

lucms —— 基于 Vue 和 Laravel 开发的后台管理系统

基于 Laravel + Vue 构建一个带前后台的类似知乎的问答社区

使用 Laravel 快速构建网站系列 —— 论坛系统：Laravel.io

使用 Laravel 快速构建网站系列 —— 论坛系统：Flarum

使用 Laravel 快速构建网站系列 —— 中文社区网站：PHPHub

基于 Laravel + Vue.js 构建的开源电商系统 —— Bagisto

基于 Laravel 开源项目 Laracom 快速构建在线商城系统

使用 Laravel 快速构建网站系列 —— 拖拽式生成CMS和在线商店：Microweber

使用 Laravel 快速构建网站系列 —— 开源电子商务网站：Antvel

基于 Laravel + Vue.js 开发的全新社交系统 —— ThinkSNS+

基于 Laravel 实现的类似 Reddit 的实时社交论坛系统 —— Voten

基于 Laravel 开源项目 Pixelfed 构建照片上传和分享平台

使用 Laravel 快速构建网站系列 —— Laravel 技巧站：Laravel Tricks

MeEdu - 基于Laravel开发的在线点播系统

基于 Laravel 开源项目 BookStack 构建知识管理与服务平台

使用 Laravel 快速构建网站系列 —— Laravel 官网：Laravel.com

使用 Laravel 快速构建网站系列 —— 播客网站：Podcastwala

使用 Laravel 快速构建网站系列 —— 开源音乐流媒体应用：Koel

基于 Laravel 开发的轻量级博客系统 —— Canvas

基于Laravel 5.4 开发的博客系统 —— MyPersimmon

使用 Laravel 快速构建网站系列 —— 静态站点/博客生成器：Katana

使用 Laravel 快速构建网站系列 —— 博客平台：Wardrobe

基于 Laravel 和 Vue.js 构建的博客平台 —— Vuedo

基于 Laravel 5.8 支持 Markdown 的开源博客 Vien Blog

一款基于 Laravel 5.1 和 Vue.js 的项目管理系统 —— Ribbbon

基于 Laravel 开源项目 Goodwork 快速构建项目管理和团队协作应用

使用 Laravel 快速构建网站系列 —— 项目管理应用：Scrumwala

使用 Laravel 快速构建网站系列 —— 项目管理应用：92five app

基于 Laravel 构建的免费、开源 CRM 平台 —— Flarepoint

基于 Laravel 开源项目 Monica 构建个人关系管理（CRM）应用

基于 Laravel 构建的适用于小公司和自由职业者的免费在线财务会计系统 —— Akaunting

造个轮子：基于 Laravel 的下一代 PHP 开发框架

基于 Laravel + Vue 实现的 Web OS 系统 —— 积木云

基于 Apiato 在 Laravel 5.6 中快速构建可扩展易测试的、API 驱动的应用

基于 Laravel + Botman 轻松实现微信公众号聊天机器人

f-admin是一套基于Laravel框架开发的基础权限后台系统

基于 Laravel 5.5 开发的开源校园管理系统 —— Unifiedtransform

laravel-admin码的B2B电子商务行业门户网站后台系统

基于 Laravel 开源项目 WebStack 快速构建网址导航应用

通过 Laravue 快速构建基于 Laravel + Vue + Element 的管理后台

使用 Laravel 快速构建网站系列 —— 笔记&归档应用：Paperwork

使用 Laravel 快速构建网站系列 —— 状态页系统：Cachet

使用 Laravel 快速构建网站系列 —— 发票&时间跟踪应用：Invoice Ninja

使用 Laravel 快速构建网站系列 —— 分类聚合网站：webshowu

使用 Laravel 快速构建网站系列 —— 开源门票及活动管理平台：Attendize

使用 Laravel 快速构建网站系列 —— RSS 聚合器 & 阅读器：RSS Monster（基于Lumen）

使用 Laravel 快速构建网站系列 —— StyleCI

使用 Laravel 快速构建网站系列 —— 应用部署工具：Deployer

基于 Laravel 5.5 + Vue 2.1 构建的开发笔记记录系统 —— Code 好事

LaravelPlus —— 基于 Laravel 魔改，为方便实际业务使用

在 Mac 开发环境 Laravel Valet 中配置运行 Flarum 论坛系统

在 Windows 上快速安装 Flarum 指南

如何在Windows上快速安装配置PyroCMS

基于Laravel+Angularjs+Bootstrap+AdminLTE实现的后台模板 —— Laravel Angular Admin

1、简介

2、安装

3、使用

上手指南

Angular生成器

46 Comments