欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

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

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

Laravel-Angular-Admin

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_IDGithub Oauth 客户端 id,点击这里创建
GITHUB_CLIENT_SECRETGithub Oauth 客户端 secret
GITHUB_REDIRECTGitHub认证回调地址,例如:http://yourdomain.com/auth/github/callback
GOOGLE_CLIENT_IDGoogle Oauth客户端id,点击这里创建
GOOGLE_CLIENT_SECRETGoogle Oauth 客户端 secret
GOOGLE_REDIRECTGoogle认证回调地址,例如:http://yourdomain.com/auth/google/callback
FACEBOOK_CLIENT_IDFacebook Oauth 客户端 id,点击这里创建
FACEBOOK_CLIENT_SECRETFacebook Oauth 客户端 secret
FACEBOOK_REDIRECTFacebook认证回调地址,例如:http://yourdomain.com/auth/facebook/callback

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

php artisan migrate
php artisan db:seed

3、使用

上手指南

$gulp && gulp watch

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

php artisan serve

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

Laravel-Angular-Admin-Login

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

Laravel-Angular-Admin

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/
学院君

学院君 has written 1259 articles

Laravel学院院长,终身学习者

积分:172762 等级:P12 职业:手艺人 城市:杭州

45 条回复

  1. 001 001 says:
    prefix the choice with! to persist it to bower.json ?Answer 写什么
  2. 001 001 says:
    prefix the choice with! to persist it to bower.json怎么回事 ,怎么没解决
  3. blueksy blueksy says:
    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" }
  4. blueksy blueksy says:
    安装成功后,显示以下信息: [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登录的信息。
  5. 谭娴我爱你 谭娴我爱你 says:
    可以了不过这个JQ的版本需要我选的2.之前选的5,6都失败了
  6. 谭娴我爱你 谭娴我爱你 says:
    Unable to find a suitable version for jquery, please choose one by typing one of the numbers below:需要选一个版本,然后就跑不下去了
  7. 谭娴我爱你 谭娴我爱你 says:
    file_get_contents(/Users/xuzihao/Desktop/larabelangularadmin/laravel-angular-admin/public/build/rev-manifest.json): failed to open stream: No such file or directory (View: /Users/xuzihao/Desktop/larabelangularadmin/laravel-angular-admin/resources/views/index.blade.php)这个开始就报错啊
  8. gzfljj gzfljj says:
    @ 探花乐园 根目录public

45 条回复

  1. 尭 尭 says:
    HelloWrod github上拉下来就行了,不过里面东西貌似没人维护了,上次更新几个月前
  2. 尭 张世平 says:
    @ Florence 哪个分支? 怎么会,模板里面全是用angular渲染的页面 你没看到?
  3. 尭 --剑凡 says:
    学院君 你好,我想请问下,我看了你的代码,但是对于laravel和angular之间的交互。。没有看到
  4. 尭 刘红波 says:
    请问 这个怎么做二次开发啊 求指导
  5. 尭 杨丰绩 says:
    @ 南京-前方 我的白屏。
  6. 尭 杨丰绩 says:
    @ 坑哈时代 怎么把权限全开呢

45 条回复

  1. never615 never615 says:
    @ 15836942 linux服务器设置目录的读写执行权限
  2. 尭 maksim789 says:
    @ 坑哈时代 具体是如何设置啊,在哪里?
  3. 尭 爱智慧 says:
    这么复杂,这么多框架一般人玩的动吗..我觉得好难
  4. never615 never615 says:
    学院君 权限,我部署到服务器,把public和子目录权限全开就好了,不过我现在又有新的问题了..去弄了
  5. 时光鸡 时光鸡 says:
    @ 南京-前方 请问有人解决了吗?遇到了同样的问题
  6. 尭 梁育权 says:
    @ 高傲的Jim_Chen 不是权限问题吧,我用的是window
  7. 尭 梁育权 says:
    我也出现这个错误file_get_contents(D:phpStudyWWWlaravel-angular-adminpublicbuild/rev-manifest.json): failed to open stream: No such file or directory (View: D:phpStudyWWWlaravel-angular-adminresourcesviewsindex.blade.php 谁解决了?



45 条回复

  1. 尭 ifhtei says:
    一片空白是怎么一回事呀?
  2. 王培 王培 says:
    我从上安装下来,也出来这个错误,http://localhost/laravel-angular-admin/public/ErrorException in helpers.php line 343: file_get_contents(D:xampphtdocslaravel-angular-adminpublicbuild/rev-manifest.json): failed to open stream: No such file or directory (View: D:xampphtdocslaravel-angular-adminresourcesviewsindex.blade.php)
  3. 尭 姜栋梁 says:
    请问 $user = User::whereEmail($credentials['email'])->first();这行代码里User::whereEmail是什么意思
  4. 尭 周旋江 says:
    我正在用5.2开发个后台系统,自己用
  5. 尭 杰 says:
    @ `NoCareFree` rev-manifest.json是不存在,你那边有没有完整的安装包?
  6. 学院君 学院君 says:
    @ Arty_moon 先看下这个文件是否存在:D:phpStudyWWWlaravel-angular-adminpublicbuild/rev-manifest.json 不存在肯定报错
  7. 尭 杰 says:
    怎么总是报file_get_contents(D:phpStudyWWWlaravel-angular-adminpublicbuild/rev-manifest.json): failed to open stream: No such file or directory (View: D:phpStudyWWWlaravel-angular-adminresourcesviewsindex.blade.php



45 条回复

  1. hisway hisway says:
    @ 卢松 我也造了一个这样的轮子
  2. 老了的金 老了的金 says:
    @ 卢松 自己开发自己的呗 
  3. 尭 张世平 says:
    这让我情以何堪,我正在开发这个
  4. 尭 排骨 says:
    5.2的文档少了Contracts这一节


来自 https://laravelacademy.org/post/4813.html/page/5#comments

普通分类: