博客列表 >laravel \ layui 框架 (管理员管理、扩展数据类访问)

laravel \ layui 框架 (管理员管理、扩展数据类访问)

w™下載一個妳
w™下載一個妳原创
2020年07月14日 01:10:131357浏览

一.相关代码:

(1)login.blade.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  7. <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  8. <title>后台登录</title>
  9. </head>
  10. <body style="background-color: #1E9FFF;">
  11. <div style="position:absolute;left:50%;width:480px;top:50%;margin-left:-240px;
  12. background:#fff;margin-top:-200px;padding:20px;border-radius:4px;box-shadow:5px 5px 20px #444;">
  13. <div class="layui-form">
  14. @csrf
  15. <div class="layui-form-item" style="text-align: center;color:blue;font-weight:500;font-size:26px;">通用后台管理系统</div>
  16. <div class="layui-form-item">
  17. <label class="layui-form-label">用户名</label>
  18. <div class="layui-input-block">
  19. <input type="text" class="layui-input" name="username">
  20. </div>
  21. </div>
  22. <div class="layui-form-item">
  23. <label class="layui-form-label">密码</label>
  24. <div class="layui-input-block">
  25. <input type="password" class="layui-input" name="pwd">
  26. </div>
  27. </div>
  28. <div class="layui-form-item">
  29. <label class="layui-form-label">验证码</label>
  30. <div class="layui-input-inline">
  31. <input type="text" class="layui-input" name="vericode">
  32. </div>
  33. <img id="captcha" src="/admins/account/captcha" style="width: 168px;height:36px;border: 1px solid;color:#cdcdcd; cursor:pointer;" onclick="reload_captcha()">
  34. </div>
  35. <div class="layui-form-item">
  36. <div class="layui-input-block">
  37. <button class="layui-btn" onclick="dologin()">登录</button>
  38. </div>
  39. </div>
  40. </div>
  41. </div>
  42. </body>
  43. </html>
  44. <script type="text/javascript">
  45. layui.use(['layer'],function(){
  46. $ = layui.jquery;
  47. layer = layui.layer;
  48. });
  49. //登录
  50. function dologin(){
  51. var username = $.trim($('input[name="username"]').val());
  52. var pwd = $.trim($('input[name="pwd"]').val())
  53. var vericode = $.trim($('input[name="vericode"]').val());
  54. var _token = $('input[name="_token"]').val();
  55. if(username==''){
  56. return layer.alert('请输入用户名',{icon:2});
  57. }
  58. if(pwd==''){
  59. return layer.alert('请输入密码',{icon:2});
  60. }
  61. if(vericode==''){
  62. return layer.alert('请输入验证码',{icon:2});
  63. }
  64. $.post('/admins/account/dologin',{_token:_token,username:username,pwd:pwd,vericode:vericode},
  65. function(res){
  66. if(res.code>0){
  67. return layer.alert(res.msg,{icon:2});
  68. }
  69. layer.msg(res.msg);
  70. setTimeout(function(){window.location.href='/admins/home/index';},1000);
  71. },'json');
  72. }
  73. function reload_captcha(){
  74. $('#captcha').attr('src','/admins/account/captcha?rand='+Math.random());
  75. }
  76. </script>

(2)Account.php

  1. <?php
  2. namespace App\Http\Controllers\admins;
  3. use App\Http\Controllers\Controller;
  4. use Illuminate\Http\Request;
  5. use Illuminate\Support\Facades\Auth;
  6. //后台账号
  7. class Account extends Controller
  8. {
  9. //后台登录
  10. public function login(){
  11. return view('/admins/account/login');
  12. }
  13. public function dologin(Request $request){
  14. $username = $request->username;
  15. $pwd = $request->pwd;
  16. $VeriCode = $request->vericode;
  17. session_start();
  18. $sess_code = $_SESSION['code'];
  19. if($VeriCode!=$sess_code){
  20. exit(json_encode(array('code'=>1,'msg'=>'验证码错误')));
  21. }
  22. //查询数据库,校验用户名和密码
  23. if($username==''){
  24. exit(json_encode(array('code'=>1,'msg'=>'用户名不能为空')));
  25. }
  26. if($pwd==''){
  27. exit(json_encode(array('code'=>1,'msg'=>'密码不能为空')));
  28. }
  29. $res = Auth::attempt(['username'=>$username,'password'=>$pwd]);
  30. if(!$res){
  31. exit(json_encode(array('code'=>1,'msg'=>'帐号或密码错误')));
  32. }
  33. return json_encode(array('code'=>0,'msg'=>'登录成功'));
  34. }
  35. //验证码
  36. public function captcha(){
  37. VeriCode::create();
  38. }
  39. }
  40. /**
  41. * 验证码类
  42. */
  43. class VeriCode{
  44. // 获取验证码配置
  45. private static function _getCodeConfig(){
  46. return [
  47. // 验证码字符集
  48. 'codeStr' => 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789',
  49. // 验证码个数
  50. 'codeCount' => 4,
  51. // 字体大小
  52. 'fontsize' =>16,
  53. // 验证码的宽度
  54. 'width' => 100,
  55. // 验证码高度
  56. 'height' => 36,
  57. // 是否有干扰点?true有,false没有
  58. 'disturbPoint' => true,
  59. // 干扰点个数,disturbPoint开启后生效
  60. 'pointCount' => 200,
  61. // 是否有干扰条?true有,false没有
  62. 'disturbLine' => true,
  63. // 干扰条个数,disturbLine开启后生效
  64. 'lineCount' => 3
  65. ];
  66. }
  67. // 创建图片验证码
  68. public static function create(){
  69. // 配置
  70. $config = self::_getCodeConfig();
  71. //创建画布
  72. $image = imagecreatetruecolor($config['width'],$config['height']);
  73. //背景颜色
  74. $bgcolor=imagecolorallocate($image,255,255,255);
  75. imagefill($image,0,0,$bgcolor);
  76. $captch_code = '';//存储验证码
  77. $captchCodeArr = str_split($config['codeStr']);
  78. //随机选取4个候选字符
  79. for($i=0;$i<$config['codeCount'];$i++){
  80. $fontsize = $config['fontsize'];
  81. $fontcolor=imagecolorallocate($image,rand(0,120),rand(0,120),rand(0,120));//随机颜色
  82. $fontcontent = $captchCodeArr[rand(0,strlen($config['codeStr'])-1)];
  83. $captch_code.=$fontcontent;
  84. $_x = $config['width']/$config['codeCount'];
  85. $x=($i*(int)$_x)+rand(5,10); //随机坐标
  86. $y=rand(5,10);
  87. imagestring($image,$fontsize,$x,$y,$fontcontent,$fontcolor); // 水平地画一行字符串
  88. }
  89. session_start();
  90. $_SESSION['code']=$captch_code;
  91. //增加干扰点
  92. if($config['disturbPoint']){
  93. for($i=0;$i<$config['pointCount'];$i++){
  94. $pointcolor=imagecolorallocate($image,rand(50,200),rand(50,200),rand(50,200));
  95. imagesetpixel($image,rand(1,99),rand(1,29),$pointcolor);
  96. }
  97. }
  98. //增加干扰线
  99. if($config['disturbLine']){
  100. for($i=0;$i<$config['lineCount'];$i++){
  101. $linecolor=imagecolorallocate($image,rand(80,280),rand(80,220),rand(80,220));
  102. imageline($image,rand(1,99),rand(1,29),rand(1,99),rand(1,29),$linecolor);
  103. }
  104. }
  105. //输出格式
  106. header('content-type:image/png');
  107. imagepng($image);
  108. //销毁图片
  109. imagedestroy($image);
  110. }
  111. }

(3)home.php

  1. <?php
  2. namespace App\Http\Controllers\admins;
  3. use App\Http\Controllers\Controller;
  4. use Illuminate\Http\Request;
  5. use Illuminate\Support\Facades\Auth;
  6. use Illuminate\Support\Facades\DB;
  7. //后台主页
  8. class Home extends Controller
  9. {
  10. public function index(){
  11. $data['menus'] = DB::table('admin_menu')->where('pid',0)->where('ishidden',0)
  12. ->where('status',0)->get()->toArray();
  13. //echo '<pre>';
  14. // print_r($data['menus']);
  15. foreach($data['menus'] as $key => $val){
  16. $childs = DB::table('admin_menu')->where('pid',$val->mid)
  17. ->where('ishidden',0)->where('status',0)->get()->all();
  18. $data['menus'][$key]->child = $childs;
  19. }
  20. return view('/admins/home/index',$data);
  21. }
  22. //后台首页欢迎页面
  23. public function welcome(){
  24. return view('admins/home/welcome');
  25. }
  26. }

(3)index.blade.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" type="text/css" href="/static/plugins/layui/css/layui.css">
  7. <script type="text/javascript" src="/static/plugins/layui/layui.js"></script>
  8. <title>欢迎使用</title>
  9. <style>
  10. .top-header{height: 50px;background-color: #01AAED;line-height: 50px;color: #fff;padding: 0px 10px;}
  11. .top-header .top-title{font-size: 20px;}
  12. .top-header .top-account{float:right}
  13. .top-header a{color: blue;}
  14. .left-menu{position: absolute;width: 200px;background-color:#333744 ;}
  15. .left-menu .layui-colla-title{background-color: #393D49;color: #fff;font-size: 14px;}
  16. .left-menu .layui-colla-content{border-color:#393D49;padding: 0px;}
  17. .left-menu .layui-colla-item{border-color:#393D49 ;}
  18. .left-menu .layui-nav-tree{width: 198px;}
  19. .left-menu .layui-collapse{border: none;}
  20. .main{position:absolute;left:200px;right: 0px;}
  21. .main iframe{width:100%;height:100%;}
  22. </style>
  23. </head>
  24. <body>
  25. <!--header-->
  26. <div class="top-header">
  27. <span class="top-title">后台管理系统</span>
  28. <div class="top-account">
  29. <span style="font-size:20px;" class="layui-icon layui-icon-friends"></span>
  30. <span style="color:red" class="top-username">admin</span>
  31. <a href="javascript:;" onclick="logout()">退出</a>
  32. </div>
  33. </div>
  34. <!--left menu左侧菜单-->
  35. <div class="left-menu">
  36. <div class="layui-collapse">
  37. @foreach($menus as $menu)
  38. <div class="layui-colla-item">
  39. <h2 class="layui-colla-title">{{$menu->title}}</h2>
  40. <div class="layui-colla-content ">
  41. <ul class="layui-nav layui-nav-tree" id="L_demoNav" lay-filter="test">
  42. @foreach($menu->child as $chd)
  43. <li class="layui-nav-item">
  44. <a href="javascript:;" onclick="firemenu(this)" controller="{{$chd->controller}}"
  45. action="{{$chd->action}}">{{$chd->title}}</a>
  46. </li>
  47. @endforeach
  48. </ul>
  49. </div>
  50. </div>
  51. @endforeach
  52. <!-- <div class="layui-colla-item">
  53. <h2 class="layui-colla-title">权限管理</h2>
  54. <div class="layui-colla-content ">内容区域</div>
  55. </div>
  56. <div class="layui-colla-item">
  57. <h2 class="layui-colla-title">系统设置</h2>
  58. <div class="layui-colla-content ">内容区域</div>
  59. </div> -->
  60. </div>
  61. </div>
  62. <!--main 主操作区-->
  63. <div class="main">
  64. <iframe frameborder="0" src="/admins/home/welcome" onload="resetIframeHeight(this)"></iframe>
  65. </div>
  66. </body>
  67. </html>
  68. <script type="text/javascript">
  69. layui.use('element', function(){
  70. var element = layui.element;
  71. $ = layui.jquery;
  72. //设置菜单高度
  73. var left_height = document.documentElement.clientHeight - 50;
  74. console.log(left_height);
  75. $('.left-menu').height(left_height);
  76. });
  77. function resetIframeHeight(obj){
  78. var leftHeight = parent.document.documentElement.clientHeight - 50;
  79. $('.main').height(leftHeight);
  80. }
  81. function firemenu(obj){
  82. var controller = $(obj).attr('controller');
  83. var action = $(obj).attr('action');
  84. var url = '/admins/'+controller+'/'+action;
  85. $('.main iframe').attr('src',url);
  86. }
  87. </script>

(4)welcome.blade.php

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>欢迎使用</title>
  7. </head>
  8. <body>
  9. <div style="text-align: center;font-size:18px;margin-top:100px;color:blue"><h2>欢迎使用后台管理系统</h2></div>
  10. </body>
  11. </html>

(5)DBServiceProvider.php

  1. <?php
  2. namespace App\Providers;
  3. use Illuminate\Support\ServiceProvider;
  4. use Illuminate\Database\Query\Builder as QueryBuilder;
  5. class DBServiceProvider extends ServiceProvider
  6. {
  7. public function boot(){
  8. //返回数组列表
  9. QueryBuilder::macro('lists',function(){
  10. $data = $this->get()->toArray();
  11. $result = [];
  12. foreach($data as $val){
  13. $result[] = (array)$val;
  14. }
  15. return $result;
  16. });
  17. }
  18. }

(6)admin.php

  1. <?php
  2. namespace App\Http\Controllers\admins;
  3. use App\Http\Controllers\Controller;
  4. use Illuminate\Http\Request;
  5. use Illuminate\Support\Facades\Auth;
  6. use Illuminate\Support\Facades\DB;
  7. //管理员管理
  8. class admin extends Controller{
  9. //账号列表
  10. public function index(){
  11. $data['admins'] = DB::table('admin')->lists();
  12. foreach ($data['admins'] as $key => $val) {
  13. $group = DB::table('admin_group')->where('gid',$val['gid'])->first();
  14. $data['admins'][$key]['group_title'] = $group->title;
  15. }
  16. return view('admins.admin.index',$data);
  17. }
  18. }

(7)app.php

  1. <?php
  2. return [
  3. /*
  4. |--------------------------------------------------------------------------
  5. | Application Name
  6. |--------------------------------------------------------------------------
  7. |
  8. | This value is the name of your application. This value is used when the
  9. | framework needs to place the application's name in a notification or
  10. | any other location as required by the application or its packages.
  11. |
  12. */
  13. 'name' => env('APP_NAME', 'Laravel'),
  14. /*
  15. |--------------------------------------------------------------------------
  16. | Application Environment
  17. |--------------------------------------------------------------------------
  18. |
  19. | This value determines the "environment" your application is currently
  20. | running in. This may determine how you prefer to configure various
  21. | services the application utilizes. Set this in your ".env" file.
  22. |
  23. */
  24. 'env' => env('APP_ENV', 'production'),
  25. /*
  26. |--------------------------------------------------------------------------
  27. | Application Debug Mode
  28. |--------------------------------------------------------------------------
  29. |
  30. | When your application is in debug mode, detailed error messages with
  31. | stack traces will be shown on every error that occurs within your
  32. | application. If disabled, a simple generic error page is shown.
  33. |
  34. */
  35. 'debug' => (bool) env('APP_DEBUG', false),
  36. /*
  37. |--------------------------------------------------------------------------
  38. | Application URL
  39. |--------------------------------------------------------------------------
  40. |
  41. | This URL is used by the console to properly generate URLs when using
  42. | the Artisan command line tool. You should set this to the root of
  43. | your application so that it is used when running Artisan tasks.
  44. |
  45. */
  46. 'url' => env('APP_URL', 'http://localhost'),
  47. 'asset_url' => env('ASSET_URL', null),
  48. /*
  49. |--------------------------------------------------------------------------
  50. | Application Timezone
  51. |--------------------------------------------------------------------------
  52. |
  53. | Here you may specify the default timezone for your application, which
  54. | will be used by the PHP date and date-time functions. We have gone
  55. | ahead and set this to a sensible default for you out of the box.
  56. |
  57. */
  58. 'timezone' => 'UTC',
  59. /*
  60. |--------------------------------------------------------------------------
  61. | Application Locale Configuration
  62. |--------------------------------------------------------------------------
  63. |
  64. | The application locale determines the default locale that will be used
  65. | by the translation service provider. You are free to set this value
  66. | to any of the locales which will be supported by the application.
  67. |
  68. */
  69. 'locale' => 'en',
  70. /*
  71. |--------------------------------------------------------------------------
  72. | Application Fallback Locale
  73. |--------------------------------------------------------------------------
  74. |
  75. | The fallback locale determines the locale to use when the current one
  76. | is not available. You may change the value to correspond to any of
  77. | the language folders that are provided through your application.
  78. |
  79. */
  80. 'fallback_locale' => 'en',
  81. /*
  82. |--------------------------------------------------------------------------
  83. | Faker Locale
  84. |--------------------------------------------------------------------------
  85. |
  86. | This locale will be used by the Faker PHP library when generating fake
  87. | data for your database seeds. For example, this will be used to get
  88. | localized telephone numbers, street address information and more.
  89. |
  90. */
  91. 'faker_locale' => 'en_US',
  92. /*
  93. |--------------------------------------------------------------------------
  94. | Encryption Key
  95. |--------------------------------------------------------------------------
  96. |
  97. | This key is used by the Illuminate encrypter service and should be set
  98. | to a random, 32 character string, otherwise these encrypted strings
  99. | will not be safe. Please do this before deploying an application!
  100. |
  101. */
  102. 'key' => env('APP_KEY'),
  103. 'cipher' => 'AES-256-CBC',
  104. /*
  105. |--------------------------------------------------------------------------
  106. | Autoloaded Service Providers
  107. |--------------------------------------------------------------------------
  108. |
  109. | The service providers listed here will be automatically loaded on the
  110. | request to your application. Feel free to add your own services to
  111. | this array to grant expanded functionality to your applications.
  112. |
  113. */
  114. 'providers' => [
  115. /*
  116. * Laravel Framework Service Providers...
  117. */
  118. Illuminate\Auth\AuthServiceProvider::class,
  119. Illuminate\Broadcasting\BroadcastServiceProvider::class,
  120. Illuminate\Bus\BusServiceProvider::class,
  121. Illuminate\Cache\CacheServiceProvider::class,
  122. Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
  123. Illuminate\Cookie\CookieServiceProvider::class,
  124. Illuminate\Database\DatabaseServiceProvider::class,
  125. Illuminate\Encryption\EncryptionServiceProvider::class,
  126. Illuminate\Filesystem\FilesystemServiceProvider::class,
  127. Illuminate\Foundation\Providers\FoundationServiceProvider::class,
  128. Illuminate\Hashing\HashServiceProvider::class,
  129. Illuminate\Mail\MailServiceProvider::class,
  130. Illuminate\Notifications\NotificationServiceProvider::class,
  131. Illuminate\Pagination\PaginationServiceProvider::class,
  132. Illuminate\Pipeline\PipelineServiceProvider::class,
  133. Illuminate\Queue\QueueServiceProvider::class,
  134. Illuminate\Redis\RedisServiceProvider::class,
  135. Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
  136. Illuminate\Session\SessionServiceProvider::class,
  137. Illuminate\Translation\TranslationServiceProvider::class,
  138. Illuminate\Validation\ValidationServiceProvider::class,
  139. Illuminate\View\ViewServiceProvider::class,
  140. /*
  141. * Package Service Providers...
  142. */
  143. /*
  144. * Application Service Providers...
  145. */
  146. App\Providers\AppServiceProvider::class,
  147. App\Providers\AuthServiceProvider::class,
  148. // App\Providers\BroadcastServiceProvider::class,
  149. App\Providers\EventServiceProvider::class,
  150. App\Providers\RouteServiceProvider::class,
  151. //扩展DBServiceProvider
  152. App\Providers\DBServiceProvider::class,
  153. ],
  154. /*
  155. |--------------------------------------------------------------------------
  156. | Class Aliases
  157. |--------------------------------------------------------------------------
  158. |
  159. | This array of class aliases will be registered when this application
  160. | is started. However, feel free to register as many as you wish as
  161. | the aliases are "lazy" loaded so they don't hinder performance.
  162. |
  163. */
  164. 'aliases' => [
  165. 'App' => Illuminate\Support\Facades\App::class,
  166. 'Arr' => Illuminate\Support\Arr::class,
  167. 'Artisan' => Illuminate\Support\Facades\Artisan::class,
  168. 'Auth' => Illuminate\Support\Facades\Auth::class,
  169. 'Blade' => Illuminate\Support\Facades\Blade::class,
  170. 'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
  171. 'Bus' => Illuminate\Support\Facades\Bus::class,
  172. 'Cache' => Illuminate\Support\Facades\Cache::class,
  173. 'Config' => Illuminate\Support\Facades\Config::class,
  174. 'Cookie' => Illuminate\Support\Facades\Cookie::class,
  175. 'Crypt' => Illuminate\Support\Facades\Crypt::class,
  176. 'DB' => Illuminate\Support\Facades\DB::class,
  177. 'Eloquent' => Illuminate\Database\Eloquent\Model::class,
  178. 'Event' => Illuminate\Support\Facades\Event::class,
  179. 'File' => Illuminate\Support\Facades\File::class,
  180. 'Gate' => Illuminate\Support\Facades\Gate::class,
  181. 'Hash' => Illuminate\Support\Facades\Hash::class,
  182. 'Http' => Illuminate\Support\Facades\Http::class,
  183. 'Lang' => Illuminate\Support\Facades\Lang::class,
  184. 'Log' => Illuminate\Support\Facades\Log::class,
  185. 'Mail' => Illuminate\Support\Facades\Mail::class,
  186. 'Notification' => Illuminate\Support\Facades\Notification::class,
  187. 'Password' => Illuminate\Support\Facades\Password::class,
  188. 'Queue' => Illuminate\Support\Facades\Queue::class,
  189. 'Redirect' => Illuminate\Support\Facades\Redirect::class,
  190. 'Redis' => Illuminate\Support\Facades\Redis::class,
  191. 'Request' => Illuminate\Support\Facades\Request::class,
  192. 'Response' => Illuminate\Support\Facades\Response::class,
  193. 'Route' => Illuminate\Support\Facades\Route::class,
  194. 'Schema' => Illuminate\Support\Facades\Schema::class,
  195. 'Session' => Illuminate\Support\Facades\Session::class,
  196. 'Storage' => Illuminate\Support\Facades\Storage::class,
  197. 'Str' => Illuminate\Support\Str::class,
  198. 'URL' => Illuminate\Support\Facades\URL::class,
  199. 'Validator' => Illuminate\Support\Facades\Validator::class,
  200. 'View' => Illuminate\Support\Facades\View::class,
  201. ],
  202. ];

二.相关演练效果图:

1.登录后台跳转到欢迎页面:


2.管理员列表页面:


3.管理员列表信息页面:


4.中间件限制非登录访问页面:

三.学习总结:

这节课学习的对象转换数组还不是很熟,因为前面的基础没有学好,没有时间进行练习,照老师的录播课顺利通过,其中有出现小问题,自己把代码敲错了,现在学习进度还没有跟上节奏,需勤加练习,现在感觉越来越有趣,待跟上进度过后再从头反复练习,将基础打牢。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议