<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Laravel在线教育平台 &#8211; 个人随笔</title>
	<atom:link href="/classify/%E5%90%8E%E5%8F%B0%E6%A1%86%E6%9E%B6/laravel/laravel%E5%9C%A8%E7%BA%BF%E6%95%99%E8%82%B2%E5%B9%B3%E5%8F%B0/feed" rel="self" type="application/rss+xml" />
	<link>/</link>
	<description></description>
	<lastBuildDate>Sat, 19 May 2018 15:59:47 +0000</lastBuildDate>
	<language>zh-CN</language>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	<generator>https://wordpress.org/?v=6.6.1</generator>

<image>
	<url>/wp-content/uploads/2022/01/cropped-截屏2022-01-01-18.57.09-32x32.png</url>
	<title>Laravel在线教育平台 &#8211; 个人随笔</title>
	<link>/</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Laravel在线教育平台（一）开发背景、涉及技术点、开发周期、项目初始化、后台登录功能、路由、防翻墙、注册激活</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/6025.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/6025.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:59:47 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[后台登录功能]]></category>
		<category><![CDATA[开发周期]]></category>
		<category><![CDATA[开发背景]]></category>
		<category><![CDATA[注册激活]]></category>
		<category><![CDATA[涉及技术点]]></category>
		<category><![CDATA[路由]]></category>
		<category><![CDATA[防翻墙]]></category>
		<category><![CDATA[项目初始化]]></category>
		<guid isPermaLink="false">/?p=6025</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（1） 一、项目说明 1、开发背景 现在社会流行视频直播，应用场景：在线教 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-6025-_Toc487731707"></a>Laravel框架实战-在线教育平台（1）</h1>
<h1><a id="post-6025-_Toc487731708"></a>一、项目说明</h1>
<h2><a id="post-6025-_Toc487731709"></a>1、开发背景</h2>
<p>
  现在社会流行视频直播，应用场景：在线教育、主播大秀、游戏直播等
</p>
<p>
  现在社会非常重视教育，各种教育机构层出不穷，教育形式多种多样，大班授课，中班
</p>
<p>
  授课，小班授课，1对1授课，但是有的学员由于地域、时间、条件、经济的限制并适合面授形式接受教育，故出现在线教育形式，即在网上就可以完成学习的过程，是一种非常灵活的学习方式。我们开发的线上教育系统，集成视频授课、试卷作答、直播课程、等功能。
</p>
<p>
  在线教育涉略的领域也非常广泛，基本上所有的教育内容都可以搬到网上进行。
</p>
<h2><a id="post-6025-_Toc487731713"></a>2、涉及到的技术点</h2>
<p>
  Datatables（无刷新分页插件）、webuploader（无刷新上传插件）、
</p>
<p>
  zyupload（多文件无刷新上传）、播放器插件、七牛接口、支付宝支付等等。
</p>
<h2><a id="post-6025-_Toc487731710"></a>3、项目开发周期规划</h2>
<ul>
<li>
    开发周期：6天（2天前台+4天后台）
  </li>
<li>
    开发框架：Laravel框架
  </li>
<li>
    开发功能：
  </li>
<li>
    后台4天：
  </li>
<li>
    后台登录功能、RBAC、专业管理、课程管理、课时管理、会员管理、试卷管理
  </li>
<li>
    前台2天：
  </li>
<li>
    登录、首页显示课程、课程详情页面、视频点播页面、视频直播页面、答题功能
  </li>
</ul>
<h1><a id="post-6025-_Toc487731715"></a>二、项目初始化</h1>
<h2><a id="post-6025-_Toc487731716"></a>1、创建项目</h2>
<p>
  步骤1：切换国内镜像
</p>
<p>
  composer config -g repo.packagist composer https://packagist.phpcomposer.com/
</p>
<p>
  步骤2：通过composer创建项目
</p>
<p>
  composer create-project laravel/laravel=5.4.* edu
</p>
<p><img fetchpriority="high" decoding="async" width="908" height="473" src="/wp-content/uploads/2018/05/word-image-5478.png" class="wp-image-6026" srcset="/wp-content/uploads/2018/05/word-image-5478.png 908w, /wp-content/uploads/2018/05/word-image-5478-300x156.png 300w, /wp-content/uploads/2018/05/word-image-5478-768x400.png 768w" sizes="(max-width: 908px) 100vw, 908px" /><br />
<img decoding="async" width="1096" height="467" src="/wp-content/uploads/2018/05/word-image-5479.png" class="wp-image-6027" srcset="/wp-content/uploads/2018/05/word-image-5479.png 1096w, /wp-content/uploads/2018/05/word-image-5479-300x128.png 300w, /wp-content/uploads/2018/05/word-image-5479-768x327.png 768w, /wp-content/uploads/2018/05/word-image-5479-1024x436.png 1024w" sizes="(max-width: 1096px) 100vw, 1096px" /></p>
<h2><a id="post-6025-_Toc487731717"></a>开发前的准备工作</h2>
<h3><a id="post-6025-_Toc491186203"></a><a id="post-6025-_Toc493776230"></a><a id="post-6025-_Toc498268261"></a><a id="post-6025-_Toc499911971"></a>1）建立数据库开发前的准备工作</h3>
<p>
  步骤1：创建edu数据库
</p>
<p><img decoding="async" width="600" height="288" src="/wp-content/uploads/2018/05/word-image-5480.png" class="wp-image-6028" srcset="/wp-content/uploads/2018/05/word-image-5480.png 600w, /wp-content/uploads/2018/05/word-image-5480-300x144.png 300w" sizes="(max-width: 600px) 100vw, 600px" /></p>
<p>
  步骤2：修改.env配置文件
</p>
<p><img loading="lazy" decoding="async" width="787" height="455" src="/wp-content/uploads/2018/05/word-image-5481.png" class="wp-image-6029" srcset="/wp-content/uploads/2018/05/word-image-5481.png 787w, /wp-content/uploads/2018/05/word-image-5481-300x173.png 300w, /wp-content/uploads/2018/05/word-image-5481-768x444.png 768w" sizes="(max-width: 787px) 100vw, 787px" /></p>
<p>
  多学一招：utf8升级版本utf8mb4一个字符支持4个字节
</p>
<p><img loading="lazy" decoding="async" width="222" height="196" src="/wp-content/uploads/2018/05/word-image-5482.png" class="wp-image-6030" /></p>
<h3>2）设置语言包</h3>
<p>
  步骤1：下载（<a href="https://github.com/caouecs/Laravel-lang">https://github.com/caouecs/Laravel-lang</a>）
</p>
<p>
  步骤2：将zh-CH移动到resources\lang目录中
</p>
<p><img loading="lazy" decoding="async" width="763" height="424" src="/wp-content/uploads/2018/05/word-image-5483.png" class="wp-image-6031" srcset="/wp-content/uploads/2018/05/word-image-5483.png 763w, /wp-content/uploads/2018/05/word-image-5483-300x167.png 300w" sizes="(max-width: 763px) 100vw, 763px" /></p>
<p>
  步骤3：修改配置config\app.php
</p>
<p><img loading="lazy" decoding="async" width="773" height="566" src="/wp-content/uploads/2018/05/word-image-5484.png" class="wp-image-6032" srcset="/wp-content/uploads/2018/05/word-image-5484.png 773w, /wp-content/uploads/2018/05/word-image-5484-300x220.png 300w, /wp-content/uploads/2018/05/word-image-5484-768x562.png 768w" sizes="(max-width: 773px) 100vw, 773px" /></p>
<h3><a id="post-6025-_Toc499911973"></a><a id="post-6025-_Toc491186205"></a><a id="post-6025-_Toc498268263"></a><a id="post-6025-_Toc493776232"></a>设置时区为中国（config/app.php文件）</h3>
<p><img loading="lazy" decoding="async" width="713" height="285" src="/wp-content/uploads/2018/05/word-image-5485.png" class="wp-image-6033" srcset="/wp-content/uploads/2018/05/word-image-5485.png 713w, /wp-content/uploads/2018/05/word-image-5485-300x120.png 300w" sizes="(max-width: 713px) 100vw, 713px" /></p>
<h3><a id="post-6025-_Toc491186206"></a><a id="post-6025-_Toc498268264"></a><a id="post-6025-_Toc499911974"></a><a id="post-6025-_Toc493776233"></a>4）清理项目</h3>
<ul>
<li>
    删除app/Http/Controllers/Auth目录，因为需要自定义登录逻辑
  </li>
<li>
    删除
  </li>
</ul>
<p>
  database/migrations/2014_10_12_000000_create_users_table.php
</p>
<p>
  database/migrations/2014_10_12_100000_create_password_resets_table.php
</p>
<ul>
<li>
    删除resources/views/welcome.blade.php欢迎页面
  </li>
</ul>
<h3>5）session机制</h3>
<p><img loading="lazy" decoding="async" width="922" height="417" src="/wp-content/uploads/2018/05/word-image-5486.png" class="wp-image-6034" srcset="/wp-content/uploads/2018/05/word-image-5486.png 922w, /wp-content/uploads/2018/05/word-image-5486-300x136.png 300w, /wp-content/uploads/2018/05/word-image-5486-768x347.png 768w" sizes="(max-width: 922px) 100vw, 922px" /></p>
<h1><a id="post-6025-_Toc487731721"></a>后台登录功能</h1>
<h2><a id="post-6025-_Toc487731718"></a>1、创建管理员数据表</h2>
<h3><a id="post-6025-_Toc487731719"></a>1）创建管理员的数据表</h3>
<p>
  create table admin (
</p>
<p>
  id int unsigned primary key auto_increment comment &#8216;管理员ID&#8217;,
</p>
<p>
  username varchar(20) not null comment &#8216;用户名&#8217;,
</p>
<p>
  password varchar(255) not null comment &#8216;密码&#8217;,
</p>
<p>
  sex tinyint(1) unsigned not null default 1 comment &#8216;性别:1-男,2-女,3-未知&#8217;,
</p>
<p>
  mobile char(11) not null default &#8221; comment &#8216;手机号&#8217;,
</p>
<p>
  email varchar(40) not null default &#8221; comment &#8216;邮箱&#8217;,
</p>
<p>
  role_id tinyint  unsigned not null comment &#8216;角色ID&#8217;,
</p>
<p>
  created_at int unsigned not null default 0 comment &#8216;创建于&#8217;,
</p>
<p>
  updated_at int unsigned not null default 0 comment &#8216;更新于&#8217;,
</p>
<p>
  state tinyint unsigned not null default 1 comment &#8216;用户状态:0-禁用,1启动&#8217;,
</p>
<p>
  remember_token varchar(255) not null default &#8221; comment &#8216;记住密码TOKEN&#8217;
</p>
<p>
  )engine=myisam charset=utf8mb4;
</p>
<p>
  &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;
</p>
<p><img loading="lazy" decoding="async" width="1217" height="638" src="/wp-content/uploads/2018/05/word-image-5487.png" class="wp-image-6035" srcset="/wp-content/uploads/2018/05/word-image-5487.png 1217w, /wp-content/uploads/2018/05/word-image-5487-300x157.png 300w, /wp-content/uploads/2018/05/word-image-5487-768x403.png 768w, /wp-content/uploads/2018/05/word-image-5487-1024x537.png 1024w" sizes="(max-width: 1217px) 100vw, 1217px" /></p>
<p>
  Schema::create(&#8216;admin&#8217;, function (Blueprint $table) {
</p>
<p>
      $table-&gt;engine = &#8216;myisam&#8217;;
</p>
<p>
      $table-&gt;increments(&#8216;id&#8217;)-&gt;comment(&#8216;管理员ID&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;username&#8217;, 20)-&gt;comment(&#8216;用户名&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;password&#8217;, 255)-&gt;comment(&#8216;密码&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;sex&#8217;)-&gt;default(1)-&gt;comment(&#8216;性别:1-男,2-女,3-未知&#8217;);
</p>
<p>
      $table-&gt;char(&#8216;mobile&#8217;, 11)-&gt;default(&#8221;)-&gt;comment(&#8216;手机号&#8217;);
</p>
<p>
      $table-&gt;string(&#8217;email&#8217;, 40)-&gt;default(&#8221;)-&gt;comment(&#8216;邮箱&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;role_id&#8217;)-&gt;comment(&#8216;角色ID&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;更新于&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;state&#8217;)-&gt;default(1)-&gt;comment(&#8216;用户状态:0-禁用,1-启动&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;remember_token&#8217;, 255)-&gt;default(&#8221;)-&gt;comment(&#8216;记住密码TOKEN&#8217;);
</p>
<p>
  });
</p>
<p>
  效果图
</p>
<p><img loading="lazy" decoding="async" width="1036" height="297" src="/wp-content/uploads/2018/05/word-image-5488.png" class="wp-image-6036" srcset="/wp-content/uploads/2018/05/word-image-5488.png 1036w, /wp-content/uploads/2018/05/word-image-5488-300x86.png 300w, /wp-content/uploads/2018/05/word-image-5488-768x220.png 768w, /wp-content/uploads/2018/05/word-image-5488-1024x294.png 1024w" sizes="(max-width: 1036px) 100vw, 1036px" /></p>
<h3><a id="post-6025-_Toc487731720"></a>2）插入测试数据（填充器 + Faker）</h3>
<p>
  步骤1：创建填充器
</p>
<p><img loading="lazy" decoding="async" width="1294" height="535" src="/wp-content/uploads/2018/05/word-image-5489.png" class="wp-image-6037" srcset="/wp-content/uploads/2018/05/word-image-5489.png 1294w, /wp-content/uploads/2018/05/word-image-5489-300x124.png 300w, /wp-content/uploads/2018/05/word-image-5489-768x318.png 768w, /wp-content/uploads/2018/05/word-image-5489-1024x423.png 1024w" sizes="(max-width: 1294px) 100vw, 1294px" /></p>
<p>
  public function run()
</p>
<p>
  {
</p>
<p>
      $faker = Faker\Factory::create(&#8216;zh_CN&#8217;);
</p>
<p>
      for ($i = 1; $i&lt;30; $i++) {
</p>
<p>
          DB::table(&#8216;admin&#8217;)-&gt;insert([
</p>
<p>
              &#8216;username&#8217; =&gt; $faker-&gt;userName,
</p>
<p>
              &#8216;password&#8217; =&gt; bcrypt($faker-&gt;password),
</p>
<p>
              &#8216;sex&#8217; =&gt; mt_rand(1,3),
</p>
<p>
              &#8216;mobile&#8217; =&gt; $faker-&gt;phoneNumber,
</p>
<p>
              &#8217;email&#8217; =&gt; $faker-&gt;email,
</p>
<p>
              &#8216;role_id&#8217; =&gt; mt_rand(1,150),
</p>
<p>
              &#8216;created_at&#8217; =&gt; time(),
</p>
<p>
              &#8216;updated_at&#8217; =&gt; time()
</p>
<p>
          ]);
</p>
<p>
      }
</p>
<p>
  }
</p>
<p>
  步骤2：执行填充器
</p>
<p><img loading="lazy" decoding="async" width="944" height="404" src="/wp-content/uploads/2018/05/word-image-5490.png" class="wp-image-6038" srcset="/wp-content/uploads/2018/05/word-image-5490.png 944w, /wp-content/uploads/2018/05/word-image-5490-300x128.png 300w, /wp-content/uploads/2018/05/word-image-5490-768x329.png 768w" sizes="(max-width: 944px) 100vw, 944px" /></p>
<h2><a id="post-6025-_Toc487731722"></a>2、显示登录页</h2>
<h3>1）后台静态模板介绍</h3>
<ul>
<li>
    模版文件：H-ui Admin后台模版
  </li>
<li>
    下载地址：http://www.h-ui.net/H-ui.admin.shtml
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="711" height="167" src="/wp-content/uploads/2018/05/word-image-5491.png" class="wp-image-6039" srcset="/wp-content/uploads/2018/05/word-image-5491.png 711w, /wp-content/uploads/2018/05/word-image-5491-300x70.png 300w" sizes="(max-width: 711px) 100vw, 711px" /></p>
<h3>2）显示登录页</h3>
<p>
  步骤1：
</p>
<p>
  创建路由，访问/admin/login就通过Admin\LoginController@login加载视图
</p>
<p><img loading="lazy" decoding="async" width="1198" height="324" src="/wp-content/uploads/2018/05/word-image-5492.png" class="wp-image-6040" srcset="/wp-content/uploads/2018/05/word-image-5492.png 1198w, /wp-content/uploads/2018/05/word-image-5492-300x81.png 300w, /wp-content/uploads/2018/05/word-image-5492-768x208.png 768w, /wp-content/uploads/2018/05/word-image-5492-1024x277.png 1024w" sizes="(max-width: 1198px) 100vw, 1198px" /></p>
<p>
  步骤2：创建登录控制器和方法，并在方法中加载视图
</p>
<p><img loading="lazy" decoding="async" width="1057" height="509" src="/wp-content/uploads/2018/05/word-image-5493.png" class="wp-image-6041" srcset="/wp-content/uploads/2018/05/word-image-5493.png 1057w, /wp-content/uploads/2018/05/word-image-5493-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5493-768x370.png 768w, /wp-content/uploads/2018/05/word-image-5493-1024x493.png 1024w" sizes="(max-width: 1057px) 100vw, 1057px" /></p>
<p>
  步骤3：创建视图
</p>
<p><img loading="lazy" decoding="async" width="892" height="691" src="/wp-content/uploads/2018/05/word-image-5494.png" class="wp-image-6042" srcset="/wp-content/uploads/2018/05/word-image-5494.png 892w, /wp-content/uploads/2018/05/word-image-5494-300x232.png 300w, /wp-content/uploads/2018/05/word-image-5494-768x595.png 768w" sizes="(max-width: 892px) 100vw, 892px" /></p>
<p>
  效果
</p>
<p><img loading="lazy" decoding="async" width="811" height="546" src="/wp-content/uploads/2018/05/word-image-5495.png" class="wp-image-6043" srcset="/wp-content/uploads/2018/05/word-image-5495.png 811w, /wp-content/uploads/2018/05/word-image-5495-300x202.png 300w, /wp-content/uploads/2018/05/word-image-5495-768x517.png 768w" sizes="(max-width: 811px) 100vw, 811px" /></p>
<h2>登录数据处理（用户认证，使用Auth做登录和退出功能）</h2>
<h3>用户认证（Auth）相关语法</h3>
<p>
  验证信息并登陆：Auth::guard(参数)-&gt;attempt（用户名和密码数组，是否保存用户状态:true-是,false-否）
</p>
<p>
  检查状态：Auth::guard(参数)-&gt;check（）
</p>
<p>
  获得登陆用户：Auth::guard(参数)-&gt;user（）-&gt;键
</p>
<p>
  退出登录：Auth::guard(参数)-&gt;logout（）
</p>
<h3>2）准备</h3>
<p><strong>步骤1：创建模型（注：因为该模型需要使用Auth类所以必须实现指定接口）</strong>
</p>
<p><img loading="lazy" decoding="async" width="1172" height="523" src="/wp-content/uploads/2018/05/word-image-5496.png" class="wp-image-6044" srcset="/wp-content/uploads/2018/05/word-image-5496.png 1172w, /wp-content/uploads/2018/05/word-image-5496-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5496-768x343.png 768w, /wp-content/uploads/2018/05/word-image-5496-1024x457.png 1024w" sizes="(max-width: 1172px) 100vw, 1172px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Auth\Authenticatable;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Admin extends Model implements \Illuminate\Contracts\Auth\Authenticatable
</p>
<p>
  {
</p>
<p>
      use Authenticatable;
</p>
<p>
      /**
</p>
<p>
       * 声明表名
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;admin&#8217;;
</p>
<p>
  }
</p>
<p>
  步骤2：修改config/auth.php用户认证配置文件，目的设置（验证用户信息并登陆语法中的参数 Auth::guard(参数)）
</p>
<p><img loading="lazy" decoding="async" width="1086" height="457" src="/wp-content/uploads/2018/05/word-image-5497.png" class="wp-image-6045" srcset="/wp-content/uploads/2018/05/word-image-5497.png 1086w, /wp-content/uploads/2018/05/word-image-5497-300x126.png 300w, /wp-content/uploads/2018/05/word-image-5497-768x323.png 768w, /wp-content/uploads/2018/05/word-image-5497-1024x431.png 1024w" sizes="(max-width: 1086px) 100vw, 1086px" /><br />
<img loading="lazy" decoding="async" width="1005" height="271" src="/wp-content/uploads/2018/05/word-image-5498.png" class="wp-image-6046" srcset="/wp-content/uploads/2018/05/word-image-5498.png 1005w, /wp-content/uploads/2018/05/word-image-5498-300x81.png 300w, /wp-content/uploads/2018/05/word-image-5498-768x207.png 768w" sizes="(max-width: 1005px) 100vw, 1005px" /></p>
<h3>代码1：身份验证</h3>
<p>
  步骤1：修改路由，既可以get又可以post
</p>
<p><img loading="lazy" decoding="async" width="1124" height="370" src="/wp-content/uploads/2018/05/word-image-5499.png" class="wp-image-6047" srcset="/wp-content/uploads/2018/05/word-image-5499.png 1124w, /wp-content/uploads/2018/05/word-image-5499-300x99.png 300w, /wp-content/uploads/2018/05/word-image-5499-768x253.png 768w, /wp-content/uploads/2018/05/word-image-5499-1024x337.png 1024w" sizes="(max-width: 1124px) 100vw, 1124px" /></p>
<p>
  步骤2：修改登录form表单参数
</p>
<p><img loading="lazy" decoding="async" width="1129" height="588" src="/wp-content/uploads/2018/05/word-image-5500.png" class="wp-image-6048" srcset="/wp-content/uploads/2018/05/word-image-5500.png 1129w, /wp-content/uploads/2018/05/word-image-5500-300x156.png 300w, /wp-content/uploads/2018/05/word-image-5500-768x400.png 768w, /wp-content/uploads/2018/05/word-image-5500-1024x533.png 1024w" sizes="(max-width: 1129px) 100vw, 1129px" /></p>
<p>
  步骤3：在login方法中增加判断是否post提交，否-则加载视图，是-则接受数据，并调用Auth类的验证信息并登录方法实现登录功能
</p>
<p><img loading="lazy" decoding="async" width="1211" height="603" src="/wp-content/uploads/2018/05/word-image-5501.png" class="wp-image-6049" srcset="/wp-content/uploads/2018/05/word-image-5501.png 1211w, /wp-content/uploads/2018/05/word-image-5501-300x149.png 300w, /wp-content/uploads/2018/05/word-image-5501-768x382.png 768w, /wp-content/uploads/2018/05/word-image-5501-1024x510.png 1024w" sizes="(max-width: 1211px) 100vw, 1211px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p><strong>use Illuminate\Support\Facades\Auth;</strong>
</p>
<p>
  class LoginController extends Controller
</p>
<p>
  {
</p>
<p>
      //加载登录视图
</p>
<p>
      public function login(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only([&#8216;username&#8217;, &#8216;password&#8217;]);
</p>
<p>
              //3.验证身份 并 登录（注：也就是调用Auth类的方法会自动帮我们验证数据并且保存session）
</p>
<p>
              //语法；Auth::guard(参数)-&gt;attempt(用户名和密码数组，是否保存用户状态:true-是,false-否)
</p>
<p>
                                                                   //true-后期相当于cookie存储，false-session
</p>
<p>
           <strong>  $rs = Auth::guard(&#8216;admin&#8217;)-&gt;attempt($postData, $request-&gt;only(&#8216;online&#8217;)[&#8216;online&#8217;]);</strong>
</p>
<p>
             //4.判断用户是否登录成功
</p>
<p>
              if ($rs) {
</p>
<p>
                  return redirect(&#8216;admin/index/index&#8217;);
</p>
<p>
              } else {
</p>
<p>
                  return redirect(&#8216;admin/login&#8217;);
</p>
<p>
              }
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图
</p>
<p>
              return view(&#8216;admin.login.login&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h3>代码2：数据过滤</h3>
<p>
  用户名：必须，3~2个字符
</p>
<p>
  密码：必须，6~32个字符
</p>
<p>
  验证码：必须，5个字符
</p>
<p><strong>步骤1：控制器通过validate方法进行数据过滤</strong>
</p>
<p><img loading="lazy" decoding="async" width="1230" height="335" src="/wp-content/uploads/2018/05/word-image-5502.png" class="wp-image-6050" srcset="/wp-content/uploads/2018/05/word-image-5502.png 1230w, /wp-content/uploads/2018/05/word-image-5502-300x82.png 300w, /wp-content/uploads/2018/05/word-image-5502-768x209.png 768w, /wp-content/uploads/2018/05/word-image-5502-1024x279.png 1024w" sizes="(max-width: 1230px) 100vw, 1230px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  use Illuminate\Support\Facades\Auth;
</p>
<p>
  class LoginController extends Controller
</p>
<p>
  {
</p>
<p>
      //加载登录视图
</p>
<p>
      public function login(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
            <strong>  //数据过滤，发送HTTP请求进行验证：成功-则不管，失败-重定向到来源页面，并给视图传递$errors变量</strong>
</p>
<p><strong>            $this-&gt;validate($request, [</strong>
</p>
<p><strong>                &#8216;username&#8217; =&gt; &#8216;required|min:2|max:10&#8217;,</strong>
</p>
<p><strong>                &#8216;password&#8217; =&gt; &#8216;required|min:6|max:32&#8217;,</strong>
</p>
<p><strong>                &#8216;captcha&#8217; =&gt; &#8216;required|size:5&#8217;,</strong>
</p>
<p><strong>            ]);</strong>
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only([&#8216;username&#8217;, &#8216;password&#8217;]);
</p>
<p>
              //3.验证身份 并 登录（注：也就是调用Auth类的方法会自动帮我们验证数据并且保存session）
</p>
<p>
              //语法；Auth::guard(参数)-&gt;attempt(用户名和密码数组，是否保存用户状态:true-是,false-否)
</p>
<p>
              //true-后期相当于cookie存储，false-session
</p>
<p>
              $rs = Auth::guard(&#8216;admin&#8217;)-&gt;attempt($postData, $request-&gt;only(&#8216;online&#8217;)[&#8216;online&#8217;]);
</p>
<p>
              //4.判断用户是否登录成功
</p>
<p>
              if ($rs) {
</p>
<p>
                  return redirect(&#8216;admin/index/index&#8217;);
</p>
<p>
              } else {
</p>
<p>
                  return redirect(&#8216;admin/login&#8217;);
</p>
<p>
              }
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图
</p>
<p>
              return view(&#8216;admin.login.login&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<p>
  &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8211;
</p>
<p><strong>步骤2：视图弹出错误信息</strong>
</p>
<p><img loading="lazy" decoding="async" width="878" height="363" src="/wp-content/uploads/2018/05/word-image-5503.png" class="wp-image-6051" srcset="/wp-content/uploads/2018/05/word-image-5503.png 878w, /wp-content/uploads/2018/05/word-image-5503-300x124.png 300w, /wp-content/uploads/2018/05/word-image-5503-768x318.png 768w" sizes="(max-width: 878px) 100vw, 878px" /></p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  @if (count($errors) &gt; 0)
</p>
<p>
      var errors = &#8221;;
</p>
<p>
      @foreach ($errors-&gt;all() as $error)
</p>
<p>
          errors += &#8220;{{ $error }} \n&#8221;;
</p>
<p>
      @endforeach
</p>
<p>
      alert(errors);
</p>
<p>
  @endif
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;&#8212;
</p>
<p><strong>步骤3：发现验证码captcha不能被识别</strong>
</p>
<p><img loading="lazy" decoding="async" width="941" height="284" src="/wp-content/uploads/2018/05/word-image-5504.png" class="wp-image-6052" srcset="/wp-content/uploads/2018/05/word-image-5504.png 941w, /wp-content/uploads/2018/05/word-image-5504-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5504-768x232.png 768w" sizes="(max-width: 941px) 100vw, 941px" /><br />
<img loading="lazy" decoding="async" width="954" height="417" src="/wp-content/uploads/2018/05/word-image-5505.png" class="wp-image-6053" srcset="/wp-content/uploads/2018/05/word-image-5505.png 954w, /wp-content/uploads/2018/05/word-image-5505-300x131.png 300w, /wp-content/uploads/2018/05/word-image-5505-768x336.png 768w" sizes="(max-width: 954px) 100vw, 954px" /><br />
<img loading="lazy" decoding="async" width="1007" height="341" src="/wp-content/uploads/2018/05/word-image-5506.png" class="wp-image-6054" srcset="/wp-content/uploads/2018/05/word-image-5506.png 1007w, /wp-content/uploads/2018/05/word-image-5506-300x102.png 300w, /wp-content/uploads/2018/05/word-image-5506-768x260.png 768w" sizes="(max-width: 1007px) 100vw, 1007px" /></p>
<h2><a id="post-6025-_Toc487731724"></a>4、登录验证码（mews/captcha）</h2>
<h3>1）通过composer下载验证码类库 并 激活</h3>
<p>
  步骤1：下载
</p>
<p><img loading="lazy" decoding="async" width="776" height="401" src="/wp-content/uploads/2018/05/word-image-5507.png" class="wp-image-6055" srcset="/wp-content/uploads/2018/05/word-image-5507.png 776w, /wp-content/uploads/2018/05/word-image-5507-300x155.png 300w, /wp-content/uploads/2018/05/word-image-5507-768x397.png 768w" sizes="(max-width: 776px) 100vw, 776px" /></p>
<p>
  步骤2：打开config\app.php进行机会
</p>
<p><img loading="lazy" decoding="async" width="1029" height="313" src="/wp-content/uploads/2018/05/word-image-5508.png" class="wp-image-6056" srcset="/wp-content/uploads/2018/05/word-image-5508.png 1029w, /wp-content/uploads/2018/05/word-image-5508-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5508-768x234.png 768w, /wp-content/uploads/2018/05/word-image-5508-1024x311.png 1024w" sizes="(max-width: 1029px) 100vw, 1029px" /><br />
<img loading="lazy" decoding="async" width="985" height="248" src="/wp-content/uploads/2018/05/word-image-5509.png" class="wp-image-6057" srcset="/wp-content/uploads/2018/05/word-image-5509.png 985w, /wp-content/uploads/2018/05/word-image-5509-300x76.png 300w, /wp-content/uploads/2018/05/word-image-5509-768x193.png 768w" sizes="(max-width: 985px) 100vw, 985px" /></p>
<p>
  步骤3：打开视图显示验证码
</p>
<p><img loading="lazy" decoding="async" width="828" height="276" src="/wp-content/uploads/2018/05/word-image-5510.png" class="wp-image-6058" srcset="/wp-content/uploads/2018/05/word-image-5510.png 828w, /wp-content/uploads/2018/05/word-image-5510-300x100.png 300w, /wp-content/uploads/2018/05/word-image-5510-768x256.png 768w" sizes="(max-width: 828px) 100vw, 828px" /></p>
<p>
  效果
</p>
<p><img loading="lazy" decoding="async" width="503" height="239" src="/wp-content/uploads/2018/05/word-image-5511.png" class="wp-image-6059" srcset="/wp-content/uploads/2018/05/word-image-5511.png 503w, /wp-content/uploads/2018/05/word-image-5511-300x143.png 300w" sizes="(max-width: 503px) 100vw, 503px" /></p>
<h3>视图显示验证码，并实现点击切换</h3>
<p><img loading="lazy" decoding="async" width="1216" height="261" src="/wp-content/uploads/2018/05/word-image-5512.png" class="wp-image-6060" srcset="/wp-content/uploads/2018/05/word-image-5512.png 1216w, /wp-content/uploads/2018/05/word-image-5512-300x64.png 300w, /wp-content/uploads/2018/05/word-image-5512-768x165.png 768w, /wp-content/uploads/2018/05/word-image-5512-1024x220.png 1024w" sizes="(max-width: 1216px) 100vw, 1216px" /></p>
<p>
  &lt;img src=&#8221;{{ Captcha::src() }}&#8221; onclick=&#8221;this.src = &#8216;{{ Captcha::src() }}&#8217; + &#8216;&amp;_=&#8217;+Math.random()&#8221;&gt;
</p>
<h3>控制器判断验证码是否正确</h3>
<p>
  步骤1：直接在validate方法中使用captcha验证规则即可
</p>
<p><img loading="lazy" decoding="async" width="939" height="299" src="/wp-content/uploads/2018/05/word-image-5513.png" class="wp-image-6061" srcset="/wp-content/uploads/2018/05/word-image-5513.png 939w, /wp-content/uploads/2018/05/word-image-5513-300x96.png 300w, /wp-content/uploads/2018/05/word-image-5513-768x245.png 768w" sizes="(max-width: 939px) 100vw, 939px" /></p>
<p>
   步骤2：提示汉化
</p>
<p><img loading="lazy" decoding="async" width="957" height="293" src="/wp-content/uploads/2018/05/word-image-5514.png" class="wp-image-6062" srcset="/wp-content/uploads/2018/05/word-image-5514.png 957w, /wp-content/uploads/2018/05/word-image-5514-300x92.png 300w, /wp-content/uploads/2018/05/word-image-5514-768x235.png 768w" sizes="(max-width: 957px) 100vw, 957px" /></p>
<h1><a id="post-6025-_Toc487731727"></a>四、后台首页展示</h1>
<h2>1、显示后台首页</h2>
<p>
  步骤1：定义路由  /admin/index/index  对应  Admin\IndexController@index
</p>
<p><img loading="lazy" decoding="async" width="1025" height="356" src="/wp-content/uploads/2018/05/word-image-5515.png" class="wp-image-6063" srcset="/wp-content/uploads/2018/05/word-image-5515.png 1025w, /wp-content/uploads/2018/05/word-image-5515-300x104.png 300w, /wp-content/uploads/2018/05/word-image-5515-768x267.png 768w, /wp-content/uploads/2018/05/word-image-5515-1024x356.png 1024w" sizes="(max-width: 1025px) 100vw, 1025px" /></p>
<p>
  步骤2：创建控制器和方法并调用视图
</p>
<p><img loading="lazy" decoding="async" width="1098" height="522" src="/wp-content/uploads/2018/05/word-image-5516.png" class="wp-image-6064" srcset="/wp-content/uploads/2018/05/word-image-5516.png 1098w, /wp-content/uploads/2018/05/word-image-5516-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5516-768x365.png 768w, /wp-content/uploads/2018/05/word-image-5516-1024x487.png 1024w" sizes="(max-width: 1098px) 100vw, 1098px" /></p>
<p>
  步骤3：创建视图
</p>
<p><img loading="lazy" decoding="async" width="1098" height="660" src="/wp-content/uploads/2018/05/word-image-5517.png" class="wp-image-6065" srcset="/wp-content/uploads/2018/05/word-image-5517.png 1098w, /wp-content/uploads/2018/05/word-image-5517-300x180.png 300w, /wp-content/uploads/2018/05/word-image-5517-768x462.png 768w, /wp-content/uploads/2018/05/word-image-5517-1024x616.png 1024w" sizes="(max-width: 1098px) 100vw, 1098px" /></p>
<h2>2、显示后台欢迎页</h2>
<p>
  步骤1：定义路由
</p>
<p><img loading="lazy" decoding="async" width="1100" height="355" src="/wp-content/uploads/2018/05/word-image-5518.png" class="wp-image-6066" srcset="/wp-content/uploads/2018/05/word-image-5518.png 1100w, /wp-content/uploads/2018/05/word-image-5518-300x97.png 300w, /wp-content/uploads/2018/05/word-image-5518-768x248.png 768w, /wp-content/uploads/2018/05/word-image-5518-1024x330.png 1024w" sizes="(max-width: 1100px) 100vw, 1100px" /></p>
<p>
  步骤2：创建控制器和方法
</p>
<p><img loading="lazy" decoding="async" width="858" height="519" src="/wp-content/uploads/2018/05/word-image-5519.png" class="wp-image-6067" srcset="/wp-content/uploads/2018/05/word-image-5519.png 858w, /wp-content/uploads/2018/05/word-image-5519-300x181.png 300w, /wp-content/uploads/2018/05/word-image-5519-768x465.png 768w" sizes="(max-width: 858px) 100vw, 858px" /></p>
<p>
  步骤3：创建视图
</p>
<p><img loading="lazy" decoding="async" width="1044" height="556" src="/wp-content/uploads/2018/05/word-image-5520.png" class="wp-image-6068" srcset="/wp-content/uploads/2018/05/word-image-5520.png 1044w, /wp-content/uploads/2018/05/word-image-5520-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5520-768x409.png 768w, /wp-content/uploads/2018/05/word-image-5520-1024x545.png 1024w" sizes="(max-width: 1044px) 100vw, 1044px" /></p>
<p>
  步骤4：修改后台首页的iframe的src地址
</p>
<p><img loading="lazy" decoding="async" width="1143" height="334" src="/wp-content/uploads/2018/05/word-image-5521.png" class="wp-image-6069" srcset="/wp-content/uploads/2018/05/word-image-5521.png 1143w, /wp-content/uploads/2018/05/word-image-5521-300x88.png 300w, /wp-content/uploads/2018/05/word-image-5521-768x224.png 768w, /wp-content/uploads/2018/05/word-image-5521-1024x299.png 1024w" sizes="(max-width: 1143px) 100vw, 1143px" /></p>
<p>
  效果
</p>
<p><img loading="lazy" decoding="async" width="1072" height="476" src="/wp-content/uploads/2018/05/word-image-5522.png" class="wp-image-6070" srcset="/wp-content/uploads/2018/05/word-image-5522.png 1072w, /wp-content/uploads/2018/05/word-image-5522-300x133.png 300w, /wp-content/uploads/2018/05/word-image-5522-768x341.png 768w, /wp-content/uploads/2018/05/word-image-5522-1024x455.png 1024w" sizes="(max-width: 1072px) 100vw, 1072px" /></p>
<h2>3、显示后台首页右上角（当前登录用户名称）</h2>
<p><img loading="lazy" decoding="async" width="1317" height="467" src="/wp-content/uploads/2018/05/word-image-5523.png" class="wp-image-6071" srcset="/wp-content/uploads/2018/05/word-image-5523.png 1317w, /wp-content/uploads/2018/05/word-image-5523-300x106.png 300w, /wp-content/uploads/2018/05/word-image-5523-768x272.png 768w, /wp-content/uploads/2018/05/word-image-5523-1024x363.png 1024w" sizes="(max-width: 1317px) 100vw, 1317px" /></p>
<h2>退出功能</h2>
<p>
  步骤1：定义路由
</p>
<p><img loading="lazy" decoding="async" width="1153" height="398" src="/wp-content/uploads/2018/05/word-image-5524.png" class="wp-image-6072" srcset="/wp-content/uploads/2018/05/word-image-5524.png 1153w, /wp-content/uploads/2018/05/word-image-5524-300x104.png 300w, /wp-content/uploads/2018/05/word-image-5524-768x265.png 768w, /wp-content/uploads/2018/05/word-image-5524-1024x353.png 1024w" sizes="(max-width: 1153px) 100vw, 1153px" /></p>
<p>
  步骤2：书写退出功能代码
</p>
<p><img loading="lazy" decoding="async" width="1134" height="393" src="/wp-content/uploads/2018/05/word-image-5525.png" class="wp-image-6073" srcset="/wp-content/uploads/2018/05/word-image-5525.png 1134w, /wp-content/uploads/2018/05/word-image-5525-300x104.png 300w, /wp-content/uploads/2018/05/word-image-5525-768x266.png 768w, /wp-content/uploads/2018/05/word-image-5525-1024x355.png 1024w" sizes="(max-width: 1134px) 100vw, 1134px" /></p>
<p>
  步骤3：设置退出连接
</p>
<p><img loading="lazy" decoding="async" width="1012" height="333" src="/wp-content/uploads/2018/05/word-image-5526.png" class="wp-image-6074" srcset="/wp-content/uploads/2018/05/word-image-5526.png 1012w, /wp-content/uploads/2018/05/word-image-5526-300x99.png 300w, /wp-content/uploads/2018/05/word-image-5526-768x253.png 768w" sizes="(max-width: 1012px) 100vw, 1012px" /></p>
<h1>五、防翻墙</h1>
<h2>1、创建中间件，并书写过滤代码</h2>
<p><img loading="lazy" decoding="async" width="1284" height="617" src="/wp-content/uploads/2018/05/word-image-5527.png" class="wp-image-6075" srcset="/wp-content/uploads/2018/05/word-image-5527.png 1284w, /wp-content/uploads/2018/05/word-image-5527-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5527-768x369.png 768w, /wp-content/uploads/2018/05/word-image-5527-1024x492.png 1024w" sizes="(max-width: 1284px) 100vw, 1284px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Middleware;
</p>
<p>
  use Closure;
</p>
<p>
  use Illuminate\Support\Facades\Auth;
</p>
<p>
  class CheckAdminLogin
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Handle an incoming request.
</p>
<p>
       *
</p>
<p>
       * @param  \Illuminate\Http\Request  $request
</p>
<p>
       * @param  \Closure  $next
</p>
<p>
       * @return mixed
</p>
<p>
       */
</p>
<p>
      public function handle($request, Closure $next)
</p>
<p>
      {
</p>
<p>
          if (!Auth::guard(&#8216;admin&#8217;)-&gt;check()) {
</p>
<p>
              return redirect(&#8216;admin/login&#8217;)-&gt;withErrors([&#8216;errors&#8217; =&gt; &#8216;登录超时，请重新登录&#8217;]);
</p>
<p>
          }
</p>
<p>
          return $next($request);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h2>注册激活</h2>
<p><img loading="lazy" decoding="async" width="1199" height="422" src="/wp-content/uploads/2018/05/word-image-5528.png" class="wp-image-6076" srcset="/wp-content/uploads/2018/05/word-image-5528.png 1199w, /wp-content/uploads/2018/05/word-image-5528-300x106.png 300w, /wp-content/uploads/2018/05/word-image-5528-768x270.png 768w, /wp-content/uploads/2018/05/word-image-5528-1024x360.png 1024w" sizes="(max-width: 1199px) 100vw, 1199px" /></p>
<h2>3、路由使用</h2>
<p><img loading="lazy" decoding="async" width="1219" height="446" src="/wp-content/uploads/2018/05/word-image-5529.png" class="wp-image-6077" srcset="/wp-content/uploads/2018/05/word-image-5529.png 1219w, /wp-content/uploads/2018/05/word-image-5529-300x110.png 300w, /wp-content/uploads/2018/05/word-image-5529-768x281.png 768w, /wp-content/uploads/2018/05/word-image-5529-1024x375.png 1024w" sizes="(max-width: 1219px) 100vw, 1219px" /></p>
<p>
  &lt;?php
</p>
<p>
  //后台登录
</p>
<p>
  Route::match([&#8216;get&#8217;, &#8216;post&#8217;], &#8216;admin/login&#8217;, &#8216;Admin\LoginController@login&#8217;);
</p>
<p>
  Route::group([&#8216;middleware&#8217; =&gt; &#8216;CheckAdminLogin&#8217;], function(){
</p>
<p>
  //退出功能
</p>
<p>
      Route::get(&#8216;admin/loginout&#8217;, &#8216;Admin\LoginController@loginout&#8217;);
</p>
<p>
  //后台首页
</p>
<p>
      Route::get(&#8216;admin/index/index&#8217;, &#8216;Admin\IndexController@index&#8217;);
</p>
<p>
      Route::get(&#8216;admin/index/welcome&#8217;, &#8216;Admin\IndexController@welcome&#8217;);
</p>
<p>
  });
</p>
<h1><a id="post-6025-_Toc487731728"></a>六、管理员管理</h1>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/6025.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5944.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5944.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:54:11 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[Datatables表格插件]]></category>
		<category><![CDATA[RBAC]]></category>
		<category><![CDATA[中间件鉴权]]></category>
		<category><![CDATA[权限分配数据处理]]></category>
		<guid isPermaLink="false">/?p=5944</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（2） 一、管理员管理 Datatables说明 Datatables是一 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-5944-_Toc487817413"></a>Laravel框架实战-在线教育平台（2）<a id="post-5944-_Toc487817414"></a></h1>
<h1>一、管理员管理</h1>
<h2>Datatables说明 </h2>
<p>
  Datatables是一款基于jQuery表格插件
</p>
<h2>管理员列表</h2>
<h3>︴效果</h3>
<p><img loading="lazy" decoding="async" width="1344" height="418" src="/wp-content/uploads/2018/05/word-image-5403.png" class="wp-image-5945" srcset="/wp-content/uploads/2018/05/word-image-5403.png 1344w, /wp-content/uploads/2018/05/word-image-5403-300x93.png 300w, /wp-content/uploads/2018/05/word-image-5403-768x239.png 768w, /wp-content/uploads/2018/05/word-image-5403-1024x318.png 1024w" sizes="(max-width: 1344px) 100vw, 1344px" /></p>
<h3>显示视图</h3>
<ul>
<li>
    步骤1：定义路由  admin\admin\index   AdminController@index
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1010" height="444" src="/wp-content/uploads/2018/05/word-image-5404.png" class="wp-image-5946" srcset="/wp-content/uploads/2018/05/word-image-5404.png 1010w, /wp-content/uploads/2018/05/word-image-5404-300x132.png 300w, /wp-content/uploads/2018/05/word-image-5404-768x338.png 768w" sizes="(max-width: 1010px) 100vw, 1010px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法  并且 调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1007" height="476" src="/wp-content/uploads/2018/05/word-image-5405.png" class="wp-image-5947" srcset="/wp-content/uploads/2018/05/word-image-5405.png 1007w, /wp-content/uploads/2018/05/word-image-5405-300x142.png 300w, /wp-content/uploads/2018/05/word-image-5405-768x363.png 768w" sizes="(max-width: 1007px) 100vw, 1007px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1249" height="668" src="/wp-content/uploads/2018/05/word-image-5406.png" class="wp-image-5948" srcset="/wp-content/uploads/2018/05/word-image-5406.png 1249w, /wp-content/uploads/2018/05/word-image-5406-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5406-768x411.png 768w, /wp-content/uploads/2018/05/word-image-5406-1024x548.png 1024w" sizes="(max-width: 1249px) 100vw, 1249px" /></p>
<h3>数据处理：使用datatables插件展示数据（客户端分页）</h3>
<ul>
<li>
    步骤1：修改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1161" height="320" src="/wp-content/uploads/2018/05/word-image-5407.png" class="wp-image-5949" srcset="/wp-content/uploads/2018/05/word-image-5407.png 1161w, /wp-content/uploads/2018/05/word-image-5407-300x83.png 300w, /wp-content/uploads/2018/05/word-image-5407-768x212.png 768w, /wp-content/uploads/2018/05/word-image-5407-1024x282.png 1024w" sizes="(max-width: 1161px) 100vw, 1161px" /></p>
<ul>
<li>
    步骤2：更改控制器方法
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1191" height="566" src="/wp-content/uploads/2018/05/word-image-5408.png" class="wp-image-5950" srcset="/wp-content/uploads/2018/05/word-image-5408.png 1191w, /wp-content/uploads/2018/05/word-image-5408-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5408-768x365.png 768w, /wp-content/uploads/2018/05/word-image-5408-1024x487.png 1024w" sizes="(max-width: 1191px) 100vw, 1191px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AdminController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.获取数据
</p>
<p>
              $admins = Admin::select(&#8216;id&#8217;, &#8216;username&#8217;, &#8216;mobile&#8217;, &#8217;email&#8217;, &#8216;role_id&#8217;, &#8216;state&#8217;, &#8216;created_at&#8217;)-&gt;get();
</p>
<p>
              //3.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;data&#8217; =&gt; $admins
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图并传递数据
</p>
<p>
              return view(&#8216;admin.admin.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图显示数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1233" height="684" src="/wp-content/uploads/2018/05/word-image-5409.png" class="wp-image-5951" srcset="/wp-content/uploads/2018/05/word-image-5409.png 1233w, /wp-content/uploads/2018/05/word-image-5409-300x166.png 300w, /wp-content/uploads/2018/05/word-image-5409-768x426.png 768w, /wp-content/uploads/2018/05/word-image-5409-1024x568.png 1024w" sizes="(max-width: 1233px) 100vw, 1233px" /></p>
<p>
  $(&#8216;table&#8217;).dataTable({
</p>
<p>
      ajax: {
</p>
<p>
  		url: &#8220;{{ url(&#8216;admin/admin/index&#8217;) }}&#8221;,
</p>
<p>
          &#8220;type&#8221;: &#8220;post&#8221;,
</p>
<p>
          &#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },
</p>
<p>
  		&#8220;data&#8221;: function (data) {
</p>
<p>
  			// data.startTime = $(&#8216;#datemin&#8217;).val();
</p>
<p>
  			// data.endTime = $(&#8216;#datemax&#8217;).val();
</p>
<p>
  			// data.username = $(&#8216;#username&#8217;).val();
</p>
<p>
  		}
</p>
<p>
  	},
</p>
<p>
      //columns
</p>
<p>
      //作用：设置服务端返回数据填充规则
</p>
<p>
      //语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}
</p>
<p>
      &#8220;columns&#8221;: [
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;占位，复选框&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;username&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;mobile&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;email&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;role_id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;created_at&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;state&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;占位，操作&#8221; },
</p>
<p>
      ],
</p>
<p>
      //createdRow
</p>
<p>
      //作用：创建tr时回调
</p>
<p>
      //row:创建好的tr的dom对象
</p>
<p>
      //data:数据源，代表服务器端返回的每条记录的实体信息
</p>
<p>
      //dataIndex:数据源的索引号码
</p>
<p>
      &#8220;createdRow&#8221;: function(row, data, dataIndex) {
</p>
<p>
  		//匹配每一行的第一列
</p>
<p>
  		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)
</p>
<p>
  		//匹配每一行的第八列
</p>
<p>
  		if (data.state == 1) {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label label-success radius&#8221;&gt;已启用&lt;/span&gt;&#8217;);
</p>
<p>
  		} else {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label radius&#8221;&gt;已停用&lt;/span&gt;&#8217;);
</p>
<p>
  		}
</p>
<p>
  		//匹配每一行的最后一列
</p>
<p>
  		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;
</p>
<p>
  		$(row).find(&#8220;td:last&#8221;).html(lastHtml);
</p>
<p>
  	},
</p>
<p>
  	searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  响应json数据：return response()-&gt;json([&#8216;data&#8217; =&gt; $admins]);
</p>
<h3>数据处理：使用datatables插件展示数据（服务端分页）</h3>
<ul>
<li>
    步骤1：修改视图（搜索的id和name， datatables）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1146" height="423" src="/wp-content/uploads/2018/05/word-image-5410.png" class="wp-image-5952" srcset="/wp-content/uploads/2018/05/word-image-5410.png 1146w, /wp-content/uploads/2018/05/word-image-5410-300x111.png 300w, /wp-content/uploads/2018/05/word-image-5410-768x283.png 768w, /wp-content/uploads/2018/05/word-image-5410-1024x378.png 1024w" sizes="(max-width: 1146px) 100vw, 1146px" /><br />
<img loading="lazy" decoding="async" width="911" height="337" src="/wp-content/uploads/2018/05/word-image-5411.png" class="wp-image-5953" srcset="/wp-content/uploads/2018/05/word-image-5411.png 911w, /wp-content/uploads/2018/05/word-image-5411-300x111.png 300w, /wp-content/uploads/2018/05/word-image-5411-768x284.png 768w" sizes="(max-width: 911px) 100vw, 911px" /><br />
<img loading="lazy" decoding="async" width="709" height="390" src="/wp-content/uploads/2018/05/word-image-5412.png" class="wp-image-5954" srcset="/wp-content/uploads/2018/05/word-image-5412.png 709w, /wp-content/uploads/2018/05/word-image-5412-300x165.png 300w" sizes="(max-width: 709px) 100vw, 709px" /></p>
<p>
  var table  = $(&#8216;table&#8217;).dataTable({
</p>
<p>
      //开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）
</p>
<p>
      &#8220;serverSide&#8221;: true,
</p>
<p>
      ajax: {
</p>
<p>
  		url: &#8220;{{ url(&#8216;admin/admin/index&#8217;) }}&#8221;,
</p>
<p>
          &#8220;type&#8221;: &#8220;post&#8221;,
</p>
<p>
          &#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },
</p>
<p>
  		&#8220;data&#8221;: function (data) {
</p>
<p>
  			data.startTime = $(&#8216;#startTime&#8217;).val();
</p>
<p>
  			data.endTime = $(&#8216;#endTime&#8217;).val();
</p>
<p>
  			data.username = $(&#8216;#username&#8217;).val();
</p>
<p>
  		}
</p>
<p>
  	},
</p>
<p>
      //columns
</p>
<p>
      //作用：设置服务端返回数据填充规则
</p>
<p>
      //语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}
</p>
<p>
      &#8220;columns&#8221;: [
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;username&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;mobile&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;email&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;role_id&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;created_at&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;state&#8221; },
</p>
<p>
          { &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;操作&#8221; },
</p>
<p>
      ],
</p>
<p>
      //createdRow
</p>
<p>
      //作用：创建tr时回调
</p>
<p>
      //row:创建好的tr的dom对象
</p>
<p>
      //data:数据源，代表服务器端返回的每条记录的实体信息
</p>
<p>
      //dataIndex:数据源的索引号码
</p>
<p>
      &#8220;createdRow&#8221;: function(row, data, dataIndex) {
</p>
<p>
  		//匹配每一行的第一列
</p>
<p>
  		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)
</p>
<p>
  		//匹配每一行的第八列
</p>
<p>
  		if (data.state == 1) {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label label-success radius&#8221;&gt;已启用&lt;/span&gt;&#8217;);
</p>
<p>
  		} else {
</p>
<p>
  			$(row).find(&#8220;td:eq(7)&#8221;).html(&#8216;&lt;span class=&#8221;label radius&#8221;&gt;已停用&lt;/span&gt;&#8217;);
</p>
<p>
  		}
</p>
<p>
  		//匹配每一行的最后一列
</p>
<p>
  		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;
</p>
<p>
  		$(row).find(&#8220;td:last&#8221;).html(lastHtml);
</p>
<p>
  	},
</p>
<p>
  	searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  //点击按钮后重新发送HTTP请求
</p>
<p>
  $(&#8216;#searchd&#8217;).click(function(){
</p>
<p>
      //需要重新带参数请求数据
</p>
<p>
      table.api().ajax.reload();
</p>
<p>
  });
</p>
<ul>
<li>
    步骤2：控制器方法（接受起始位置和结束位置）增加limit过滤
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1120" height="639" src="/wp-content/uploads/2018/05/word-image-5413.png" class="wp-image-5955" srcset="/wp-content/uploads/2018/05/word-image-5413.png 1120w, /wp-content/uploads/2018/05/word-image-5413-300x171.png 300w, /wp-content/uploads/2018/05/word-image-5413-768x438.png 768w, /wp-content/uploads/2018/05/word-image-5413-1024x584.png 1024w" sizes="(max-width: 1120px) 100vw, 1120px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AdminController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only([&#8216;start&#8217;, &#8216;length&#8217;, &#8216;startTime&#8217;, &#8216;endTime&#8217;, &#8216;username&#8217;, &#8216;draw&#8217;]);
</p>
<p>
              //3.组装模型
</p>
<p>
              <strong>$admins = Admin::select(&#8216;id&#8217;, &#8216;username&#8217;, &#8216;mobile&#8217;, &#8217;email&#8217;, &#8216;role_id&#8217;, &#8216;state&#8217;, &#8216;created_at&#8217;);</strong>
</p>
<p>
              //4.模型过滤组装
</p>
<p>
              if ($postData[&#8216;username&#8217;]) $admins-&gt;where(&#8216;username&#8217;, &#8216;like&#8217;, &#8216;%&#8217;. $postData[&#8216;username&#8217;] .&#8217;%&#8217;);
</p>
<p>
              if ($postData[&#8216;startTime&#8217;]) $admins-&gt;where(&#8216;created_at&#8217;, &#8216;&gt;&#8217;, strtotime($postData[&#8216;startTime&#8217;]));
</p>
<p>
              if ($postData[&#8216;endTime&#8217;]) $admins-&gt;where(&#8216;created_at&#8217;, &#8216;&lt;&#8216;, strtotime($postData[&#8216;endTime&#8217;]));
</p>
<p>
              //5.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;draw&#8217; =&gt; (int)$postData[&#8216;draw&#8217;],       //必须，HTTP请求发送什么就响应什么
</p>
<p>
                  &#8216;recordsTotal&#8217; =&gt; Admin::count(),       //必须，admin表总记录数
</p>
<p>
                  &#8216;recordsFiltered&#8217; =&gt; $admins-&gt;count(),  //必须，admin表总记录数（增加where条件）
</p>
<p>
                  &#8216;data&#8217; =&gt; $admins-&gt;offset($postData[&#8216;start&#8217;])-&gt;limit($postData[&#8216;length&#8217;])-&gt;get()
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图并传递数据
</p>
<p>
              return view(&#8216;admin.admin.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1><a id="post-5944-_Toc487817417"></a>RBAC准备</h1>
<h2>说明</h2>
<p>
  RBAC：role-based access control（角色权限控制）
</p>
<p>
  在很多网站的后台会使用RBAC去实现权限管理。
</p>
<p>
  常见的RBAC实现方式有：三表方式、五表方式。
</p>
<p>
  三表：管理员表、角色表、权限表。
</p>
<p>
  五表：管理员表、角色表、权限表、管理员和角色表、角色和权限表
</p>
<p><img loading="lazy" decoding="async" width="956" height="356" src="/wp-content/uploads/2018/05/word-image-5414.png" class="wp-image-5956" srcset="/wp-content/uploads/2018/05/word-image-5414.png 956w, /wp-content/uploads/2018/05/word-image-5414-300x112.png 300w, /wp-content/uploads/2018/05/word-image-5414-768x286.png 768w" sizes="(max-width: 956px) 100vw, 956px" /></p>
<h2><a id="post-5944-_Toc487817418"></a>设计角色表和权限表</h2>
<h3>1）设计角色表</h3>
<p><strong>后台角色表</strong>
</p>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="7">
<p>
  role
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  role_name
</p>
</td>
<td>
<p>
  varchar(20)
</p>
</td>
<td>
<p>
  角色名称，如：超级管理员
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  auth_ids
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  权限表主键id集合，如1,2,3
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  auth_ac
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  权限对应的控制器方法集合,如：
</p>
<p>
  admincontroller@index,indexcontroller@index
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  update_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<p>
  步骤1：创建迁移文件并书写
</p>
<p><img loading="lazy" decoding="async" width="1277" height="573" src="/wp-content/uploads/2018/05/word-image-5415.png" class="wp-image-5957" srcset="/wp-content/uploads/2018/05/word-image-5415.png 1277w, /wp-content/uploads/2018/05/word-image-5415-300x135.png 300w, /wp-content/uploads/2018/05/word-image-5415-768x345.png 768w, /wp-content/uploads/2018/05/word-image-5415-1024x459.png 1024w" sizes="(max-width: 1277px) 100vw, 1277px" /></p>
<p>
  Schema::create(&#8216;role&#8217;, function (Blueprint $table) {
</p>
<p>
      $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;role_name&#8217;, 20)-&gt;comment(&#8216;角色名称&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;auth_ids&#8217;)-&gt;comment(&#8216;权限表ID集合,如:1,2,3&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;auth_ac&#8217;)-&gt;comment(&#8216;权限表对应控制器方法集合,如:admincontroller@index,indexcontroller@index&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  });
</p>
<p>
  步骤2：执行
</p>
<p><img loading="lazy" decoding="async" width="516" height="321" src="/wp-content/uploads/2018/05/word-image-5416.png" class="wp-image-5958" srcset="/wp-content/uploads/2018/05/word-image-5416.png 516w, /wp-content/uploads/2018/05/word-image-5416-300x187.png 300w" sizes="(max-width: 516px) 100vw, 516px" /></p>
<h3>2）设计权限表</h3>
<p><strong>后台权限表</strong>
</p>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  auth
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  auth_name
</p>
</td>
<td>
<p>
  varchar(20)
</p>
</td>
<td>
<p>
  权限名称，如：管理员管理
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  controller
</p>
</td>
<td>
<p>
  varchar(40)
</p>
</td>
<td>
<p>
  控制器名
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  action
</p>
</td>
<td>
<p>
  varchar(30)
</p>
</td>
<td>
<p>
  权限对应的方法名称
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  pid
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  等级：0-顶级，其他-子级（最多2级）
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  is_nav
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  是否菜单显示：1-是，0-否
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  1
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  update_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<p>
  步骤1：创建数据迁移并书写代码
</p>
<p><img loading="lazy" decoding="async" width="1236" height="432" src="/wp-content/uploads/2018/05/word-image-5417.png" class="wp-image-5959" srcset="/wp-content/uploads/2018/05/word-image-5417.png 1236w, /wp-content/uploads/2018/05/word-image-5417-300x105.png 300w, /wp-content/uploads/2018/05/word-image-5417-768x268.png 768w, /wp-content/uploads/2018/05/word-image-5417-1024x358.png 1024w" sizes="(max-width: 1236px) 100vw, 1236px" /></p>
<p>
  Schema::create(&#8216;auth&#8217;, function (Blueprint $table) {
</p>
<p>
      $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;auth_name&#8217;, 20)-&gt;comment(&#8216;权限名称&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;controller&#8217;, 40)-&gt;comment(&#8216;控制器名&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;action&#8217;, 30)-&gt;comment(&#8216;方法名&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;pid&#8217;)-&gt;default(0)-&gt;comment(&#8216;等级:0-顶级,其他-子级（最多2级）&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;is_nav&#8217;)-&gt;default(1)-&gt;comment(&#8216;是否菜单显示:1-是,0-否&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  });
</p>
<p>
  步骤2：执行
</p>
<p><img loading="lazy" decoding="async" width="598" height="349" src="/wp-content/uploads/2018/05/word-image-5418.png" class="wp-image-5960" srcset="/wp-content/uploads/2018/05/word-image-5418.png 598w, /wp-content/uploads/2018/05/word-image-5418-300x175.png 300w" sizes="(max-width: 598px) 100vw, 598px" /></p>
<h2><a id="post-5944-_Toc487817419"></a>3、了解三张表之间的关系</h2>
<p><img loading="lazy" decoding="async" width="854" height="238" src="/wp-content/uploads/2018/05/word-image-5419.png" class="wp-image-5961" srcset="/wp-content/uploads/2018/05/word-image-5419.png 854w, /wp-content/uploads/2018/05/word-image-5419-300x84.png 300w, /wp-content/uploads/2018/05/word-image-5419-768x214.png 768w" sizes="(max-width: 854px) 100vw, 854px" /></p>
<h2><a id="post-5944-_Toc487817420"></a>4、模拟数据</h2>
<p><img loading="lazy" decoding="async" width="888" height="130" src="/wp-content/uploads/2018/05/word-image-5420.png" class="wp-image-5962" srcset="/wp-content/uploads/2018/05/word-image-5420.png 888w, /wp-content/uploads/2018/05/word-image-5420-300x44.png 300w, /wp-content/uploads/2018/05/word-image-5420-768x112.png 768w" sizes="(max-width: 888px) 100vw, 888px" /></p>
<p>
  INSERT INTO `admin` VALUES (null, &#8216;@php12&#8217;, &#8216;$2y$10$SZ50r80SEK4zMaHVkODqVupVLufzQuZQ4lHBm46QDsGwY5yeXL3lK&#8217;, &#8216;1&#8217;, &#8216;18888888888&#8217;, &#8216;8@itcast.cn&#8217;, &#8216;1&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;, &#8216;1&#8217;, &#8221;);
</p>
<p><strong>#密码是：admin888</strong>
</p>
<p><img loading="lazy" decoding="async" width="1239" height="178" src="/wp-content/uploads/2018/05/word-image-5421.png" class="wp-image-5963" srcset="/wp-content/uploads/2018/05/word-image-5421.png 1239w, /wp-content/uploads/2018/05/word-image-5421-300x43.png 300w, /wp-content/uploads/2018/05/word-image-5421-768x110.png 768w, /wp-content/uploads/2018/05/word-image-5421-1024x147.png 1024w" sizes="(max-width: 1239px) 100vw, 1239px" /></p>
<p>
  INSERT INTO `role` VALUES (&#8216;1&#8217;, &#8216;超级管理员&#8217;, &#8216;1,2,3,4,5,6,7,8,10,9&#8217;, &#8216;OrderController@add,OrderController@update,OrderController@update,MemberController@add,MemberController@update,ArticleController@update,ArticleController@add&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p>
  INSERT INTO `role` VALUES (&#8216;2&#8217;, &#8216;网站编辑&#8217;, &#8216;8,10,9&#8217;, &#8216;ArticleController@add,ArticleController@update&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p>
  INSERT INTO `role` VALUES (&#8216;3&#8217;, &#8216;水电费&#8217;, &#8216;1,2,4,5,6,7,8,9&#8217;, &#8216;OrderController@add,OrderController@update,MemberController@add,MemberController@update,ArticleController@add&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p><img loading="lazy" decoding="async" width="749" height="327" src="/wp-content/uploads/2018/05/word-image-5422.png" class="wp-image-5964" srcset="/wp-content/uploads/2018/05/word-image-5422.png 749w, /wp-content/uploads/2018/05/word-image-5422-300x131.png 300w" sizes="(max-width: 749px) 100vw, 749px" /></p>
<p>
  INSERT INTO `auth` VALUES
</p>
<p>
  (&#8216;1&#8217;, &#8216;订单管理&#8217;, &#8216;OrderController&#8217;, &#8221;, &#8216;0&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;2&#8217;, &#8216;订单添加&#8217;, &#8216;OrderController&#8217;, &#8216;add&#8217;, &#8216;1&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;3&#8217;, &#8216;订单修改&#8217;, &#8216;OrderController&#8217;, &#8216;update&#8217;, &#8216;1&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;4&#8217;, &#8216;订单列表&#8217;, &#8216;OrderController&#8217;, &#8216;update&#8217;, &#8216;1&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;5&#8217;, &#8216;会员管理&#8217;, &#8216;MemberController&#8217;, &#8221;, &#8216;0&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;6&#8217;, &#8216;会员添加&#8217;, &#8216;MemberController&#8217;, &#8216;add&#8217;, &#8216;5&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;7&#8217;, &#8216;会员修改&#8217;, &#8216;MemberController&#8217;, &#8216;update&#8217;, &#8216;5&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;8&#8217;, &#8216;文章管理&#8217;, &#8216;ArticleController&#8217;, &#8221;, &#8216;0&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8216;9&#8217;, &#8216;文章添加&#8217;, &#8216;ArticleController&#8217;, &#8216;add&#8217;, &#8216;8&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;),
</p>
<p>
  (&#8217;10&#8217;, &#8216;文章修改&#8217;, &#8216;ArticleController&#8217;, &#8216;update&#8217;, &#8216;8&#8217;, &#8216;0&#8217;, &#8216;1515464653&#8217;, &#8216;1515464653&#8217;);
</p>
<p>
  补充：在有数据的基础上，将之前遗留的管理员身份显示完全
</p>
<p><img loading="lazy" decoding="async" width="254" height="61" src="/wp-content/uploads/2018/05/word-image-5423.png" class="wp-image-5965" /></p>
<p><strong>通过ORM解决这个问题</strong>（<strong>关联模型</strong>）：
</p>
<p>
  用户表和角色表是一对一的关系：使用hasOne方法
</p>
<p><img loading="lazy" decoding="async" width="460" height="48" src="/wp-content/uploads/2018/05/word-image-5424.png" class="wp-image-5966" srcset="/wp-content/uploads/2018/05/word-image-5424.png 460w, /wp-content/uploads/2018/05/word-image-5424-300x31.png 300w" sizes="(max-width: 460px) 100vw, 460px" /></p>
<p>
  需要在Admin模型中关联Role模型：
</p>
<p><img loading="lazy" decoding="async" width="655" height="181" src="/wp-content/uploads/2018/05/word-image-5425.png" class="wp-image-5967" srcset="/wp-content/uploads/2018/05/word-image-5425.png 655w, /wp-content/uploads/2018/05/word-image-5425-300x83.png 300w" sizes="(max-width: 655px) 100vw, 655px" /></p>
<p>
  创建Role模型：
</p>
<p><img loading="lazy" decoding="async" width="405" height="82" src="/wp-content/uploads/2018/05/word-image-5426.png" class="wp-image-5968" srcset="/wp-content/uploads/2018/05/word-image-5426.png 405w, /wp-content/uploads/2018/05/word-image-5426-300x61.png 300w" sizes="(max-width: 405px) 100vw, 405px" /><br />
<img loading="lazy" decoding="async" width="794" height="317" src="/wp-content/uploads/2018/05/word-image-5427.png" class="wp-image-5969" srcset="/wp-content/uploads/2018/05/word-image-5427.png 794w, /wp-content/uploads/2018/05/word-image-5427-300x120.png 300w, /wp-content/uploads/2018/05/word-image-5427-768x307.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></p>
<p>
  去显示用户身份（模版文件admin/inedx/index.blade.php）：
</p>
<p>
  在之前调用guard的时候其实已经实例化了Admin模型，所以可以直接调用Admin模型中的关联方法，取出结果集中的第1条记录，显示出角色名称：
</p>
<p><img loading="lazy" decoding="async" width="670" height="122" src="/wp-content/uploads/2018/05/word-image-5428.png" class="wp-image-5970" srcset="/wp-content/uploads/2018/05/word-image-5428.png 670w, /wp-content/uploads/2018/05/word-image-5428-300x55.png 300w" sizes="(max-width: 670px) 100vw, 670px" /></p>
<p>
  显示效果：
</p>
<p><img loading="lazy" decoding="async" width="183" height="67" src="/wp-content/uploads/2018/05/word-image-5429.png" class="wp-image-5971" /></p>
<h1><a id="post-5944-_Toc487817421"></a>三、权限管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1311" height="629" src="/wp-content/uploads/2018/05/word-image-5430.png" class="wp-image-5972" srcset="/wp-content/uploads/2018/05/word-image-5430.png 1311w, /wp-content/uploads/2018/05/word-image-5430-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5430-768x368.png 768w, /wp-content/uploads/2018/05/word-image-5430-1024x491.png 1024w" sizes="(max-width: 1311px) 100vw, 1311px" /></p>
<p>
  添加
</p>
<p><img loading="lazy" decoding="async" width="931" height="480" src="/wp-content/uploads/2018/05/word-image-5431.png" class="wp-image-5973" srcset="/wp-content/uploads/2018/05/word-image-5431.png 931w, /wp-content/uploads/2018/05/word-image-5431-300x155.png 300w, /wp-content/uploads/2018/05/word-image-5431-768x396.png 768w" sizes="(max-width: 931px) 100vw, 931px" /></p>
<h2>列表功能</h2>
<h3>1）显示列表（模板文件：admin-permission.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1117" height="263" src="/wp-content/uploads/2018/05/word-image-5432.png" class="wp-image-5974" srcset="/wp-content/uploads/2018/05/word-image-5432.png 1117w, /wp-content/uploads/2018/05/word-image-5432-300x71.png 300w, /wp-content/uploads/2018/05/word-image-5432-768x181.png 768w, /wp-content/uploads/2018/05/word-image-5432-1024x241.png 1024w" sizes="(max-width: 1117px) 100vw, 1117px" /></p>
<p>
  Route::get(&#8216;admin/auth/index&#8217;, &#8216;Admin\AuthController@index&#8217;);
</p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="978" height="491" src="/wp-content/uploads/2018/05/word-image-5433.png" class="wp-image-5975" srcset="/wp-content/uploads/2018/05/word-image-5433.png 978w, /wp-content/uploads/2018/05/word-image-5433-300x151.png 300w, /wp-content/uploads/2018/05/word-image-5433-768x386.png 768w" sizes="(max-width: 978px) 100vw, 978px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1165" height="651" src="/wp-content/uploads/2018/05/word-image-5434.png" class="wp-image-5976" srcset="/wp-content/uploads/2018/05/word-image-5434.png 1165w, /wp-content/uploads/2018/05/word-image-5434-300x168.png 300w, /wp-content/uploads/2018/05/word-image-5434-768x429.png 768w, /wp-content/uploads/2018/05/word-image-5434-1024x572.png 1024w" sizes="(max-width: 1165px) 100vw, 1165px" /></p>
<h3>数据处理</h3>
<ul>
<li>
    步骤1：创建Auth模型
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="967" height="577" src="/wp-content/uploads/2018/05/word-image-5435.png" class="wp-image-5977" srcset="/wp-content/uploads/2018/05/word-image-5435.png 967w, /wp-content/uploads/2018/05/word-image-5435-300x179.png 300w, /wp-content/uploads/2018/05/word-image-5435-768x458.png 768w" sizes="(max-width: 967px) 100vw, 967px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Auth extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;auth&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;auth_name&#8217;, &#8216;controller&#8217;, &#8216;action&#8217;, &#8216;pid&#8217;, &#8216;is_nav&#8217;];
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：修改控制器方法查询所有数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1076" height="478" src="/wp-content/uploads/2018/05/word-image-5436.png" class="wp-image-5978" srcset="/wp-content/uploads/2018/05/word-image-5436.png 1076w, /wp-content/uploads/2018/05/word-image-5436-300x133.png 300w, /wp-content/uploads/2018/05/word-image-5436-768x341.png 768w, /wp-content/uploads/2018/05/word-image-5436-1024x455.png 1024w" sizes="(max-width: 1076px) 100vw, 1076px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Auth;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AuthController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.查询所有数据（注；因为权限节点数据不是很多所以直接显示）
</p>
<p>
          $auths = Auth::get();
</p>
<p>
          //2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.auth.index&#8217;, compact(&#8216;auths&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤1：实现视图客户端分页
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1270" height="387" src="/wp-content/uploads/2018/05/word-image-5437.png" class="wp-image-5979" srcset="/wp-content/uploads/2018/05/word-image-5437.png 1270w, /wp-content/uploads/2018/05/word-image-5437-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5437-768x234.png 768w, /wp-content/uploads/2018/05/word-image-5437-1024x312.png 1024w" sizes="(max-width: 1270px) 100vw, 1270px" /><br />
<img loading="lazy" decoding="async" width="1253" height="539" src="/wp-content/uploads/2018/05/word-image-5438.png" class="wp-image-5980" srcset="/wp-content/uploads/2018/05/word-image-5438.png 1253w, /wp-content/uploads/2018/05/word-image-5438-300x129.png 300w, /wp-content/uploads/2018/05/word-image-5438-768x330.png 768w, /wp-content/uploads/2018/05/word-image-5438-1024x440.png 1024w" sizes="(max-width: 1253px) 100vw, 1253px" /><br />
<img loading="lazy" decoding="async" width="861" height="511" src="/wp-content/uploads/2018/05/word-image-5439.png" class="wp-image-5981" srcset="/wp-content/uploads/2018/05/word-image-5439.png 861w, /wp-content/uploads/2018/05/word-image-5439-300x178.png 300w, /wp-content/uploads/2018/05/word-image-5439-768x456.png 768w" sizes="(max-width: 861px) 100vw, 861px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;权限管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 权限管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;权限名称&#8221; id=&#8221;search_content&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;button&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;search&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜权限节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt; &lt;span class=&#8221;l&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加权限节点&#8217;,&#8217;admin-permission-add.html&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加权限节点&lt;/a&gt;&lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;8&#8243;&gt;权限节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;权限名称&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;控制器名&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;方法名&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;上级权限ID&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;是否作为导航&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($auths as $auth)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;{{ $auth-&gt;id }}&#8221; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;auth_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;controller }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;action }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $auth-&gt;pid }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;
</p>
<p>
  					@if ($auth-&gt;is_nav)
</p>
<p>
  						是
</p>
<p>
  					@else
</p>
<p>
  						否
</p>
<p>
  					@endif
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  var table = $(&#8216;table&#8217;).DataTable({
</p>
<p>
      iDisplayLength:2,	    //限制每页显示条数
</p>
<p>
      // searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  //客户端搜索功能更
</p>
<p>
  $(&#8216;#search&#8217;).click(function(){
</p>
<p>
      var search_content = $(&#8216;#search_content&#8217;).val();
</p>
<p>
      table.search(search_content).draw();
</p>
<p>
  });
</p>
<p>
  $(function(){
</p>
<p>
      $(&#8216;#DataTables_Table_0_filter&#8217;).hide();
</p>
<p>
  });
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-权限-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-权限-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-权限-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>添加功能</h2>
<h3>1）显示添加页（模板文件：admin-add.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1027" height="269" src="/wp-content/uploads/2018/05/word-image-5440.png" class="wp-image-5982" srcset="/wp-content/uploads/2018/05/word-image-5440.png 1027w, /wp-content/uploads/2018/05/word-image-5440-300x79.png 300w, /wp-content/uploads/2018/05/word-image-5440-768x201.png 768w, /wp-content/uploads/2018/05/word-image-5440-1024x268.png 1024w" sizes="(max-width: 1027px) 100vw, 1027px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法、并获取所有顶级传递传递给视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="865" height="373" src="/wp-content/uploads/2018/05/word-image-5441.png" class="wp-image-5983" srcset="/wp-content/uploads/2018/05/word-image-5441.png 865w, /wp-content/uploads/2018/05/word-image-5441-300x129.png 300w, /wp-content/uploads/2018/05/word-image-5441-768x331.png 768w" sizes="(max-width: 865px) 100vw, 865px" /></p>
<p>
  //添加
</p>
<p>
  public function add()
</p>
<p>
  {
</p>
<p>
      //1.查询所有顶级权限
</p>
<p>
      $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
      //2.加载视图并传递数据
</p>
<p>
      return view(&#8216;admin.auth.add&#8217;, compact(&#8216;topAuths&#8217;));
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1210" height="662" src="/wp-content/uploads/2018/05/word-image-5442.png" class="wp-image-5984" srcset="/wp-content/uploads/2018/05/word-image-5442.png 1210w, /wp-content/uploads/2018/05/word-image-5442-300x164.png 300w, /wp-content/uploads/2018/05/word-image-5442-768x420.png 768w, /wp-content/uploads/2018/05/word-image-5442-1024x560.png 1024w" sizes="(max-width: 1210px) 100vw, 1210px" /><br />
<img loading="lazy" decoding="async" width="799" height="532" src="/wp-content/uploads/2018/05/word-image-5443.png" class="wp-image-5985" srcset="/wp-content/uploads/2018/05/word-image-5443.png 799w, /wp-content/uploads/2018/05/word-image-5443-300x200.png 300w, /wp-content/uploads/2018/05/word-image-5443-768x511.png 768w" sizes="(max-width: 799px) 100vw, 799px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;添加管理员 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-add&#8221;&gt;
</p>
<p>
  		{{ csrf_field() }}
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;权限名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; value=&#8221;&#8221; placeholder=&#8221;&#8221; id=&#8221;auth_name&#8221; name=&#8221;auth_name&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;控制器名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; autocomplete=&#8221;off&#8221; value=&#8221;&#8221; placeholder=&#8221;控制器名称&#8221; id=&#8221;controller&#8221; name=&#8221;controller&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;方法名：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; autocomplete=&#8221;off&#8221;  placeholder=&#8221;方法名&#8221; id=&#8221;action&#8221; name=&#8221;action&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;作为导航：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9 skin-minimal&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;is_nav&#8221; value=&#8221;1&#8243; id=&#8221;sex-1&#8243; checked&gt;
</p>
<p>
  				&lt;label for=&#8221;sex-1&#8243;&gt;是&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;is_nav&#8221; value=&#8221;0&#8243; id=&#8221;sex-2&#8243; &gt;
</p>
<p>
  				&lt;label for=&#8221;sex-2&#8243;&gt;否&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;上级权限：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt; &lt;span class=&#8221;select-box&#8221; style=&#8221;width:150px;&#8221;&gt;
</p>
<p>
  			&lt;select class=&#8221;select&#8221; name=&#8221;pid&#8221; size=&#8221;1&#8243;&gt;
</p>
<p>
  				&lt;option value=&#8221;0&#8243;&gt;顶级权限&lt;/option&gt;
</p>
<p>
  				@foreach ($topAuths as $topAuths)
</p>
<p>
  				&lt;option value=&#8221;{{ $topAuths-&gt;id }}&#8221;&gt;{{ $topAuths-&gt;auth_name }}&lt;/option&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/select&gt;
</p>
<p>
  			&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;input class=&#8221;btn btn-primary radius&#8221; type=&#8221;submit&#8221; value=&#8221;&amp;nbsp;&amp;nbsp;提交&amp;nbsp;&amp;nbsp;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8216;.skin-minimal input&#8217;).iCheck({
</p>
<p>
  		checkboxClass: &#8216;icheckbox-blue&#8217;,
</p>
<p>
  		radioClass: &#8216;iradio-blue&#8217;,
</p>
<p>
  		increaseArea: &#8216;20%&#8217;
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			atuh_name:{
</p>
<p>
  				required:true,
</p>
<p>
  				minlength:4,
</p>
<p>
  				maxlength:16
</p>
<p>
  			},
</p>
<p>
  			controller:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  			action:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit({
</p>
<p>
  				type: &#8216;post&#8217;,
</p>
<p>
  				url: &#8220;{{ url(&#8216;admin/auth/add&#8217;) }}&#8221;,
</p>
<p>
  				success: function(data){
</p>
<p>
  				    //在父元素提示
</p>
<p>
                      parent.layer.msg(&#8216;添加成功!&#8217;,{icon:1,time:1000});
</p>
<p>
  					//成功则关闭窗口
</p>
<p>
                      var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
                      parent.$(&#8216;.btn-refresh&#8217;).click();
</p>
<p>
                      parent.layer.close(index);
</p>
<p>
  				},
</p>
<p>
                  error: function(XmlHttpRequest, textStatus, errorThrown){
</p>
<p>
  					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});
</p>
<p>
  				}
</p>
<p>
  			});
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤4：打开列表页设置添加按钮连接
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="805" height="469" src="/wp-content/uploads/2018/05/word-image-5444.png" class="wp-image-5986" srcset="/wp-content/uploads/2018/05/word-image-5444.png 805w, /wp-content/uploads/2018/05/word-image-5444-300x175.png 300w, /wp-content/uploads/2018/05/word-image-5444-768x447.png 768w" sizes="(max-width: 805px) 100vw, 805px" /><br />
<img loading="lazy" decoding="async" width="1207" height="424" src="/wp-content/uploads/2018/05/word-image-5445.png" class="wp-image-5987" srcset="/wp-content/uploads/2018/05/word-image-5445.png 1207w, /wp-content/uploads/2018/05/word-image-5445-300x105.png 300w, /wp-content/uploads/2018/05/word-image-5445-768x270.png 768w, /wp-content/uploads/2018/05/word-image-5445-1024x360.png 1024w" sizes="(max-width: 1207px) 100vw, 1207px" /></p>
<p>
  &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加权限节点&#8217;,'{{ url(&#8216;admin/auth/add&#8217;) }}&#8217;,&#8217;400&#8242;,&#8217;360&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;
</p>
<p>
  	&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加权限节点
</p>
<p>
  &lt;/a&gt;
</p>
<h3>1）添加数据处理</h3>
<ul>
<li>
    步骤1：修改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1015" height="423" src="/wp-content/uploads/2018/05/word-image-5446.png" class="wp-image-5988" srcset="/wp-content/uploads/2018/05/word-image-5446.png 1015w, /wp-content/uploads/2018/05/word-image-5446-300x125.png 300w, /wp-content/uploads/2018/05/word-image-5446-768x320.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></p>
<ul>
<li>
    步骤2：更改控制器方法代码
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1171" height="546" src="/wp-content/uploads/2018/05/word-image-5447.png" class="wp-image-5989" srcset="/wp-content/uploads/2018/05/word-image-5447.png 1171w, /wp-content/uploads/2018/05/word-image-5447-300x140.png 300w, /wp-content/uploads/2018/05/word-image-5447-768x358.png 768w, /wp-content/uploads/2018/05/word-image-5447-1024x477.png 1024w" sizes="(max-width: 1171px) 100vw, 1171px" /></p>
<p>
  //添加
</p>
<p>
  public function add(Request $request)
</p>
<p>
  {
</p>
<p>
      //1.判断HTTP请求类型
</p>
<p>
      if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
          //2.接受数据
</p>
<p>
          $postData = $request-&gt;only([&#8216;auth_name&#8217;, &#8216;controller&#8217;, &#8216;action&#8217;, &#8216;is_nav&#8217;, &#8216;pid&#8217;]);
</p>
<p>
          //3.调用模型批量设置属性创建数据
</p>
<p>
          $rs = Auth::create($postData);
</p>
<p>
          //4.判断状态
</p>
<p>
          echo $rs ? 1 : 0;
</p>
<p>
      } else {
</p>
<p>
          //2.查询所有顶级权限
</p>
<p>
          $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
          //3.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.auth.add&#8217;, compact(&#8216;topAuths&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1><a id="post-5944-_Toc487817425"></a>四、角色管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1329" height="288" src="/wp-content/uploads/2018/05/word-image-5448.png" class="wp-image-5990" srcset="/wp-content/uploads/2018/05/word-image-5448.png 1329w, /wp-content/uploads/2018/05/word-image-5448-300x65.png 300w, /wp-content/uploads/2018/05/word-image-5448-768x166.png 768w, /wp-content/uploads/2018/05/word-image-5448-1024x222.png 1024w" sizes="(max-width: 1329px) 100vw, 1329px" /></p>
<p>
  添加
</p>
<p><img loading="lazy" decoding="async" width="1184" height="306" src="/wp-content/uploads/2018/05/word-image-5449.png" class="wp-image-5991" srcset="/wp-content/uploads/2018/05/word-image-5449.png 1184w, /wp-content/uploads/2018/05/word-image-5449-300x78.png 300w, /wp-content/uploads/2018/05/word-image-5449-768x198.png 768w, /wp-content/uploads/2018/05/word-image-5449-1024x265.png 1024w" sizes="(max-width: 1184px) 100vw, 1184px" /></p>
<h2>1、列表功能</h2>
<h3>1）显示列表（模板文件：admin-role.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1003" height="304" src="/wp-content/uploads/2018/05/word-image-5450.png" class="wp-image-5992" srcset="/wp-content/uploads/2018/05/word-image-5450.png 1003w, /wp-content/uploads/2018/05/word-image-5450-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5450-768x233.png 768w" sizes="(max-width: 1003px) 100vw, 1003px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="848" height="540" src="/wp-content/uploads/2018/05/word-image-5451.png" class="wp-image-5993" srcset="/wp-content/uploads/2018/05/word-image-5451.png 848w, /wp-content/uploads/2018/05/word-image-5451-300x191.png 300w, /wp-content/uploads/2018/05/word-image-5451-768x489.png 768w" sizes="(max-width: 848px) 100vw, 848px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1040" height="590" src="/wp-content/uploads/2018/05/word-image-5452.png" class="wp-image-5994" srcset="/wp-content/uploads/2018/05/word-image-5452.png 1040w, /wp-content/uploads/2018/05/word-image-5452-300x170.png 300w, /wp-content/uploads/2018/05/word-image-5452-768x436.png 768w, /wp-content/uploads/2018/05/word-image-5452-1024x581.png 1024w" sizes="(max-width: 1040px) 100vw, 1040px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：创建模型
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="977" height="615" src="/wp-content/uploads/2018/05/word-image-5453.png" class="wp-image-5995" srcset="/wp-content/uploads/2018/05/word-image-5453.png 977w, /wp-content/uploads/2018/05/word-image-5453-300x189.png 300w, /wp-content/uploads/2018/05/word-image-5453-768x483.png 768w" sizes="(max-width: 977px) 100vw, 977px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Role extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;role&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;role_name&#8217;, &#8216;auth_ids&#8217;, &#8216;auth_ac&#8217;];
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：控制器调用数据，并传递给视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="781" height="467" src="/wp-content/uploads/2018/05/word-image-5454.png" class="wp-image-5996" srcset="/wp-content/uploads/2018/05/word-image-5454.png 781w, /wp-content/uploads/2018/05/word-image-5454-300x179.png 300w, /wp-content/uploads/2018/05/word-image-5454-768x459.png 768w" sizes="(max-width: 781px) 100vw, 781px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Role;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class RoleController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.通过内置分页功能获取数据，每页显示2条
</p>
<p>
          $roles = Role::paginate(2);
</p>
<p>
          //2.加载视图
</p>
<p>
          return view(&#8216;admin.role.index&#8217;, compact(&#8216;roles&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：循环显示
  </li>
<li><a href="https://www.cnblogs.com/lamp01/p/6869762.html">https://www.cnblogs.com/lamp01/p/6869762.html</a>
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="889" height="582" src="/wp-content/uploads/2018/05/word-image-5455.png" class="wp-image-5997" srcset="/wp-content/uploads/2018/05/word-image-5455.png 889w, /wp-content/uploads/2018/05/word-image-5455-300x196.png 300w, /wp-content/uploads/2018/05/word-image-5455-768x503.png 768w" sizes="(max-width: 889px) 100vw, 889px" /><br />
<img loading="lazy" decoding="async" width="1184" height="530" src="/wp-content/uploads/2018/05/word-image-5456.png" class="wp-image-5998" srcset="/wp-content/uploads/2018/05/word-image-5456.png 1184w, /wp-content/uploads/2018/05/word-image-5456-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5456-768x344.png 768w, /wp-content/uploads/2018/05/word-image-5456-1024x458.png 1024w" sizes="(max-width: 1184px) 100vw, 1184px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;style type=&#8221;text/css&#8221;&gt;
</p>
<p>
  	/*分页CSS样式*/
</p>
<p>
  	#pull_right{
</p>
<p>
  		text-align:center;
</p>
<p>
  	}
</p>
<p>
  	.pull-right {
</p>
<p>
  		/*float: left!important;*/
</p>
<p>
  	}
</p>
<p>
  	.pagination {
</p>
<p>
  		display: inline-block;
</p>
<p>
  		padding-left: 0;
</p>
<p>
  		margin: 20px 0;
</p>
<p>
  		border-radius: 4px;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li {
</p>
<p>
  		display: inline;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li &gt; a,
</p>
<p>
  	.pagination &gt; li &gt; span {
</p>
<p>
  		position: relative;
</p>
<p>
  		float: left;
</p>
<p>
  		padding: 6px 12px;
</p>
<p>
  		margin-left: -1px;
</p>
<p>
  		line-height: 1.42857143;
</p>
<p>
  		color: #428bca;
</p>
<p>
  		text-decoration: none;
</p>
<p>
  		background-color: #fff;
</p>
<p>
  		border: 1px solid #ddd;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li:first-child &gt; a,
</p>
<p>
  	.pagination &gt; li:first-child &gt; span {
</p>
<p>
  		margin-left: 0;
</p>
<p>
  		border-top-left-radius: 4px;
</p>
<p>
  		border-bottom-left-radius: 4px;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li:last-child &gt; a,
</p>
<p>
  	.pagination &gt; li:last-child &gt; span {
</p>
<p>
  		border-top-right-radius: 4px;
</p>
<p>
  		border-bottom-right-radius: 4px;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; li &gt; a:hover,
</p>
<p>
  	.pagination &gt; li &gt; span:hover,
</p>
<p>
  	.pagination &gt; li &gt; a:focus,
</p>
<p>
  	.pagination &gt; li &gt; span:focus {
</p>
<p>
  		color: #2a6496;
</p>
<p>
  		background-color: #eee;
</p>
<p>
  		border-color: #ddd;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; .active &gt; a,
</p>
<p>
  	.pagination &gt; .active &gt; span,
</p>
<p>
  	.pagination &gt; .active &gt; a:hover,
</p>
<p>
  	.pagination &gt; .active &gt; span:hover,
</p>
<p>
  	.pagination &gt; .active &gt; a:focus,
</p>
<p>
  	.pagination &gt; .active &gt; span:focus {
</p>
<p>
  		z-index: 2;
</p>
<p>
  		color: #fff;
</p>
<p>
  		cursor: default;
</p>
<p>
  		background-color: #428bca;
</p>
<p>
  		border-color: #428bca;
</p>
<p>
  	}
</p>
<p>
  	.pagination &gt; .disabled &gt; span,
</p>
<p>
  	.pagination &gt; .disabled &gt; span:hover,
</p>
<p>
  	.pagination &gt; .disabled &gt; span:focus,
</p>
<p>
  	.pagination &gt; .disabled &gt; a,
</p>
<p>
  	.pagination &gt; .disabled &gt; a:hover,
</p>
<p>
  	.pagination &gt; .disabled &gt; a:focus {
</p>
<p>
  		color: #777;
</p>
<p>
  		cursor: not-allowed;
</p>
<p>
  		background-color: #fff;
</p>
<p>
  		border-color: #ddd;
</p>
<p>
  	}
</p>
<p>
  	.clear{
</p>
<p>
  		clear: both;
</p>
<p>
  	}
</p>
<p>
  &lt;/style&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;角色管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 角色管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray&#8221;&gt; &lt;span class=&#8221;l&#8221;&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a class=&#8221;btn btn-primary radius&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_add(&#8216;添加角色&#8217;,&#8217;admin-role-add.html&#8217;,&#8217;800&#8242;)&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加角色&lt;/a&gt; &lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-hover table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;6&#8243;&gt;角色管理&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;200&#8243;&gt;角色名&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;70&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($roles as $role)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;{{ $role-&gt;id }}&#8221; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $role-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $role-&gt;role_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td class=&#8221;f-14&#8243;&gt;
</p>
<p>
  					&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_edit(&#8216;角色编辑&#8217;,&#8217;admin-role-add.html&#8217;,&#8217;1&#8242;)&#8221; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  						&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;
</p>
<p>
  					&lt;/a&gt;
</p>
<p>
  					&lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  						&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;
</p>
<p>
  					&lt;/a&gt;
</p>
<p>
  					&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  						分配权限
</p>
<p>
  					&lt;/a&gt;
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  	&lt;div id=&#8221;pull_right&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;pull-right&#8221;&gt;
</p>
<p>
  			{!! $roles-&gt;links() !!}
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  /*管理员-角色-添加*/
</p>
<p>
  function admin_role_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-角色-编辑*/
</p>
<p>
  function admin_role_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-角色-删除*/
</p>
<p>
  function admin_role_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;角色删除须谨慎，确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>2、权限分配数据处理【难点】</h2>
<h3>1）显示分配视图（模板文件：admin-role-add.html）</h3>
<ul>
<li>
    步骤1：打开角色列表，点击分配权限按钮弹框设置
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1149" height="188" src="/wp-content/uploads/2018/05/word-image-5457.png" class="wp-image-5999" srcset="/wp-content/uploads/2018/05/word-image-5457.png 1149w, /wp-content/uploads/2018/05/word-image-5457-300x49.png 300w, /wp-content/uploads/2018/05/word-image-5457-768x126.png 768w, /wp-content/uploads/2018/05/word-image-5457-1024x168.png 1024w" sizes="(max-width: 1149px) 100vw, 1149px" /></p>
<p>
  &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_role_assign(&#8216;分配权限&#8217;,'{{ url(&#8216;admin/role/assignAuth&#8217;) }}?role_id={{$role-&gt;id}}&#8217;,860,400)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;
</p>
<p>
  分配权限
</p>
<p>
  &lt;/a&gt;
</p>
<p><img loading="lazy" decoding="async" width="647" height="232" src="/wp-content/uploads/2018/05/word-image-5458.png" class="wp-image-6000" srcset="/wp-content/uploads/2018/05/word-image-5458.png 647w, /wp-content/uploads/2018/05/word-image-5458-300x108.png 300w" sizes="(max-width: 647px) 100vw, 647px" /></p>
<p>
  /*管理员-角色-权限分配*/
</p>
<p>
  function admin_role_assign(title,url,w,h){
</p>
<p>
      layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1144" height="160" src="/wp-content/uploads/2018/05/word-image-5459.png" class="wp-image-6001" srcset="/wp-content/uploads/2018/05/word-image-5459.png 1144w, /wp-content/uploads/2018/05/word-image-5459-300x42.png 300w, /wp-content/uploads/2018/05/word-image-5459-768x107.png 768w, /wp-content/uploads/2018/05/word-image-5459-1024x143.png 1024w" sizes="(max-width: 1144px) 100vw, 1144px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="905" height="481" src="/wp-content/uploads/2018/05/word-image-5460.png" class="wp-image-6002" srcset="/wp-content/uploads/2018/05/word-image-5460.png 905w, /wp-content/uploads/2018/05/word-image-5460-300x159.png 300w, /wp-content/uploads/2018/05/word-image-5460-768x408.png 768w" sizes="(max-width: 905px) 100vw, 905px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Auth;
</p>
<p>
  use App\Http\Model\Role;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class RoleController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.通过内置分页功能获取数据，每页显示2条
</p>
<p>
          $roles = Role::paginate(2);
</p>
<p>
          //2.加载视图
</p>
<p>
          return view(&#8216;admin.role.index&#8217;, compact(&#8216;roles&#8217;));
</p>
<p>
      }
</p>
<p>
      //分配权限
</p>
<p>
      public function assignAuth(Request $request)
</p>
<p>
      {
</p>
<p>
          return view(&#8216;admin.role.assignAuth&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1147" height="612" src="/wp-content/uploads/2018/05/word-image-5461.png" class="wp-image-6003" srcset="/wp-content/uploads/2018/05/word-image-5461.png 1147w, /wp-content/uploads/2018/05/word-image-5461-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5461-768x410.png 768w, /wp-content/uploads/2018/05/word-image-5461-1024x546.png 1024w" sizes="(max-width: 1147px) 100vw, 1147px" /></p>
<p>
  &lt;!&#8211;_meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;Bookmark&#8221; href=&#8221;/favicon.ico&#8221; &gt;
</p>
<p>
  &lt;link rel=&#8221;Shortcut Icon&#8221; href=&#8221;/favicon.ico&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;!&#8211;/meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;title&gt;新建网站角色 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form action=&#8221;&#8221; method=&#8221;post&#8221; class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-role-add&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;权限名称：&lt;/label&gt;
</p>
<p>
  			&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  				&lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  					&lt;dt&gt;
</p>
<p>
  						&lt;label&gt;
</p>
<p>
  							&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0&#8243; id=&#8221;user-Character-0&#8243;&gt;
</p>
<p>
  							资讯管理&lt;/label&gt;
</p>
<p>
  					&lt;/dt&gt;
</p>
<p>
  					&lt;dd&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0&#8243; id=&#8221;user-Character-0-0&#8243;&gt;
</p>
<p>
  									栏目管理&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-0&#8243;&gt;
</p>
<p>
  									添加&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-1&#8243;&gt;
</p>
<p>
  									修改&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-2&#8243;&gt;
</p>
<p>
  									删除&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-3&#8243;&gt;
</p>
<p>
  									查看&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-4&#8243;&gt;
</p>
<p>
  									审核&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;c-orange&#8221;&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-0-0&#8243; id=&#8221;user-Character-0-0-5&#8243;&gt; 只能操作自己发布的&lt;/label&gt;
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1&#8243; id=&#8221;user-Character-0-1&#8243;&gt;
</p>
<p>
  									文章管理&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-0&#8243;&gt;
</p>
<p>
  									添加&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-1&#8243;&gt;
</p>
<p>
  									修改&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-2&#8243;&gt;
</p>
<p>
  									删除&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-3&#8243;&gt;
</p>
<p>
  									查看&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-1-0&#8243; id=&#8221;user-Character-0-1-4&#8243;&gt;
</p>
<p>
  									审核&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;c-orange&#8221;&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0-2-0&#8243; id=&#8221;user-Character-0-2-5&#8243;&gt; 只能操作自己发布的&lt;/label&gt;
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  					&lt;/dd&gt;
</p>
<p>
  				&lt;/dl&gt;
</p>
<p>
  				&lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  					&lt;dt&gt;
</p>
<p>
  						&lt;label&gt;
</p>
<p>
  							&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-0&#8243; id=&#8221;user-Character-1&#8243;&gt;
</p>
<p>
  							用户中心&lt;/label&gt;
</p>
<p>
  					&lt;/dt&gt;
</p>
<p>
  					&lt;dd&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0&#8243; id=&#8221;user-Character-1-0&#8243;&gt;
</p>
<p>
  									用户管理&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-0&#8243;&gt;
</p>
<p>
  									添加&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-1&#8243;&gt;
</p>
<p>
  									修改&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-2&#8243;&gt;
</p>
<p>
  									删除&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-3&#8243;&gt;
</p>
<p>
  									查看&lt;/label&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input type=&#8221;checkbox&#8221; value=&#8221;&#8221; name=&#8221;user-Character-1-0-0&#8243; id=&#8221;user-Character-1-0-4&#8243;&gt;
</p>
<p>
  									审核&lt;/label&gt;
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  					&lt;/dd&gt;
</p>
<p>
  				&lt;/dl&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  				&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success radius&#8221; id=&#8221;admin-role-save&#8221; name=&#8221;admin-role-save&#8221;&gt;&lt;i class=&#8221;icon-ok&#8221;&gt;&lt;/i&gt; 确定&lt;/button&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8220;.permission-list dt input:checkbox&#8221;).click(function(){
</p>
<p>
  		$(this).closest(&#8220;dl&#8221;).find(&#8220;dd input:checkbox&#8221;).prop(&#8220;checked&#8221;,$(this).prop(&#8220;checked&#8221;));
</p>
<p>
  	});
</p>
<p>
  	$(&#8220;.permission-list2 dd input:checkbox&#8221;).click(function(){
</p>
<p>
  		var l =$(this).parent().parent().find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		var l2=$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;.permission-list2 dd&#8221;).find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		if($(this).prop(&#8220;checked&#8221;)){
</p>
<p>
  			$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  			$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  		}
</p>
<p>
  		else{
</p>
<p>
  			if(l==0){
</p>
<p>
  				$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  			if(l2==0){
</p>
<p>
  				$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  		}
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-role-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			roleName:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit();
</p>
<p>
  			var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
  			parent.layer.close(index);
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h3>2）数据数据动态化（显示所有权限，和默认选中权限）</h3>
<ul>
<li>
    步骤1：查询所有顶级权限和子级权限
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="901" height="217" src="/wp-content/uploads/2018/05/word-image-5462.png" class="wp-image-6004" srcset="/wp-content/uploads/2018/05/word-image-5462.png 901w, /wp-content/uploads/2018/05/word-image-5462-300x72.png 300w, /wp-content/uploads/2018/05/word-image-5462-768x185.png 768w" sizes="(max-width: 901px) 100vw, 901px" /></p>
<p>
  //分配权限
</p>
<p>
  public function assignAuth(Request $request)
</p>
<p>
  {
</p>
<p>
      //【显示所有权限节点功能】
</p>
<p>
      //1.查询所有顶级权限
</p>
<p>
      $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
      //2.查询所有子级权限
</p>
<p>
      $sonAuths = Auth::where(&#8216;pid&#8217;, &#8216;&lt;&gt;&#8217;, 0)-&gt;get();
</p>
<p>
      //4.加载视图
</p>
<p>
      return view(&#8216;admin.role.assignAuth&#8217;, compact(&#8216;topAuths&#8217;, &#8216;sonAuths&#8217;));
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图循环显示所有权限（规则：先老子后儿子）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="893" height="584" src="/wp-content/uploads/2018/05/word-image-5463.png" class="wp-image-6005" srcset="/wp-content/uploads/2018/05/word-image-5463.png 893w, /wp-content/uploads/2018/05/word-image-5463-300x196.png 300w, /wp-content/uploads/2018/05/word-image-5463-768x502.png 768w" sizes="(max-width: 893px) 100vw, 893px" /></p>
<p>
  &lt;form action=&#8221;&#8221; method=&#8221;post&#8221; class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-role-add&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;权限名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			<strong>@foreach($topAuths as $topAuth)</strong>
</p>
<p><strong>			&lt;dl class=&#8221;permission-list&#8221;&gt;</strong>
</p>
<p><strong>				&lt;dd&gt;</strong>
</p>
<p><strong>					&lt;dl class=&#8221;cl permission-list2&#8243;&gt;</strong>
</p>
<p><strong>						&lt;dt&gt;</strong>
</p>
<p><strong>							&lt;label class=&#8221;&#8221;&gt;</strong>
</p>
<p><strong>								&lt;input </strong>
</p>
<p><strong>									type=&#8221;checkbox&#8221; </strong>
</p>
<p><strong>									value=&#8221;&#8221; </strong>
</p>
<p><strong>									name=&#8221;user-Character-1-0&#8243; </strong>
</p>
<p><strong>									id=&#8221;user-Character-1-0&#8243;</strong>
</p>
<p><strong>								&gt;</strong>
</p>
<p><strong>								{{ $topAuth-&gt;auth_name}}</strong>
</p>
<p><strong>							&lt;/label&gt;</strong>
</p>
<p><strong>						&lt;/dt&gt;</strong>
</p>
<p><strong>						&lt;dd&gt;</strong>
</p>
<p><strong>							@foreach($sonAuths as $sonAuth)</strong>
</p>
<p><strong>								&lt;!&#8211; 父元素的ID  == 子元素PID &#8211;&gt;</strong>
</p>
<p><strong>								@if ($topAuth-&gt;id == $sonAuth-&gt;pid) </strong>
</p>
<p><strong>								&lt;label class=&#8221;&#8221;&gt;</strong>
</p>
<p><strong>									&lt;input </strong>
</p>
<p><strong>										type=&#8221;checkbox&#8221; </strong>
</p>
<p><strong>										value=&#8221;&#8221; </strong>
</p>
<p><strong>										name=&#8221;user-Character-1-0-0&#8243; </strong>
</p>
<p><strong>										id=&#8221;user-Character-1-0-0&#8243;</strong>
</p>
<p><strong>									&gt;</strong>
</p>
<p><strong>									{{ $sonAuth-&gt;auth_name}}</strong>
</p>
<p><strong>								&lt;/label&gt;</strong>
</p>
<p><strong>								@endif</strong>
</p>
<p><strong>							@endforeach</strong>
</p>
<p><strong>						&lt;/dd&gt;</strong>
</p>
<p><strong>					&lt;/dl&gt;</strong>
</p>
<p><strong>				&lt;/dd&gt;</strong>
</p>
<p><strong>			&lt;/dl&gt;</strong>
</p>
<p><strong>			@endforeach</strong>
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success radius&#8221; id=&#8221;admin-role-save&#8221; name=&#8221;admin-role-save&#8221;&gt;&lt;i class=&#8221;icon-ok&#8221;&gt;&lt;/i&gt; 确定&lt;/button&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/form&gt;
</p>
<ul>
<li>
    步骤3：根据角色ID获取所有权限，默认选中已有权限
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1165" height="323" src="/wp-content/uploads/2018/05/word-image-5464.png" class="wp-image-6006" srcset="/wp-content/uploads/2018/05/word-image-5464.png 1165w, /wp-content/uploads/2018/05/word-image-5464-300x83.png 300w, /wp-content/uploads/2018/05/word-image-5464-768x213.png 768w, /wp-content/uploads/2018/05/word-image-5464-1024x284.png 1024w" sizes="(max-width: 1165px) 100vw, 1165px" /></p>
<p>
  //分配权限
</p>
<p>
  public function assignAuth(Request $request)
</p>
<p>
  {
</p>
<p>
      //【显示所有权限节点功能】
</p>
<p>
      //1.查询所有顶级权限
</p>
<p>
      $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
      //2.查询所有子级权限
</p>
<p>
      $sonAuths = Auth::where(&#8216;pid&#8217;, &#8216;&lt;&gt;&#8217;, 0)-&gt;get();
</p>
<p>
      <strong>//【根据角色ID获取角色的所有权限】</strong>
</p>
<p><strong>    $role = Role::where(&#8216;id&#8217;, $request-&gt;input(&#8216;role_id&#8217;))-&gt;first();</strong>
</p>
<p><strong>    $authArr = !empty($role-&gt;auth_ids) ? explode(&#8216;,&#8217;, $role-&gt;auth_ids) : [];</strong>
</p>
<p>
      //4.加载视图
</p>
<p>
      return view(&#8216;admin.role.assignAuth&#8217;, compact(&#8216;topAuths&#8217;, &#8216;sonAuths&#8217;, <strong>&#8216;authArr&#8217;</strong>));
</p>
<p>
  }
</p>
<p><img loading="lazy" decoding="async" width="855" height="646" src="/wp-content/uploads/2018/05/word-image-5465.png" class="wp-image-6007" srcset="/wp-content/uploads/2018/05/word-image-5465.png 855w, /wp-content/uploads/2018/05/word-image-5465-300x227.png 300w, /wp-content/uploads/2018/05/word-image-5465-768x580.png 768w" sizes="(max-width: 855px) 100vw, 855px" /></p>
<p>
  @foreach($topAuths as $topAuth)
</p>
<p>
  &lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  	&lt;dd&gt;
</p>
<p>
  		&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  			&lt;dt&gt;
</p>
<p>
  				&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  					&lt;input
</p>
<p>
  						type=&#8221;checkbox&#8221;
</p>
<p>
  						value=&#8221;&#8221;
</p>
<p>
  						name=&#8221;user-Character-1-0&#8243;
</p>
<p>
  						id=&#8221;user-Character-1-0&#8243;
</p>
<p>
  						<strong>@if(in_array($topAuth-&gt;id, $authArr)) </strong>
</p>
<p><strong>							checked=checked</strong>
</p>
<p><strong>						@endif</strong>
</p>
<p>
  					&gt;
</p>
<p>
  					{{ $topAuth-&gt;auth_name}}
</p>
<p>
  				&lt;/label&gt;
</p>
<p>
  			&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				@foreach($sonAuths as $sonAuth)
</p>
<p>
  					&lt;!&#8211; 父元素的ID  == 子元素PID &#8211;&gt;
</p>
<p>
  					@if ($topAuth-&gt;id == $sonAuth-&gt;pid)
</p>
<p>
  					&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  						&lt;input
</p>
<p>
  							type=&#8221;checkbox&#8221;
</p>
<p>
  							value=&#8221;&#8221;
</p>
<p>
  							name=&#8221;user-Character-1-0-0&#8243;
</p>
<p>
  							id=&#8221;user-Character-1-0-0&#8243;
</p>
<p>
  							<strong>@if(in_array($sonAuth-&gt;id, $authArr)) </strong>
</p>
<p><strong>								checked=checked</strong>
</p>
<p><strong>							@endif</strong>
</p>
<p>
  						&gt;
</p>
<p>
  						{{ $sonAuth-&gt;auth_name}}
</p>
<p>
  					&lt;/label&gt;
</p>
<p>
  					@endif
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/dd&gt;
</p>
<p>
  		&lt;/dl&gt;
</p>
<p>
  	&lt;/dd&gt;
</p>
<p>
  &lt;/dl&gt;
</p>
<p>
  @endforeach
</p>
<h3>3）保存更改角色权限</h3>
<ul>
<li>
    步骤1：更改表单
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="865" height="606" src="/wp-content/uploads/2018/05/word-image-5466.png" class="wp-image-6008" srcset="/wp-content/uploads/2018/05/word-image-5466.png 865w, /wp-content/uploads/2018/05/word-image-5466-300x210.png 300w, /wp-content/uploads/2018/05/word-image-5466-768x538.png 768w" sizes="(max-width: 865px) 100vw, 865px" /><br />
<img loading="lazy" decoding="async" width="964" height="502" src="/wp-content/uploads/2018/05/word-image-5467.png" class="wp-image-6009" srcset="/wp-content/uploads/2018/05/word-image-5467.png 964w, /wp-content/uploads/2018/05/word-image-5467-300x156.png 300w, /wp-content/uploads/2018/05/word-image-5467-768x400.png 768w" sizes="(max-width: 964px) 100vw, 964px" /></p>
<p>
  &lt;!&#8211;_meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;Bookmark&#8221; href=&#8221;/favicon.ico&#8221; &gt;
</p>
<p>
  &lt;link rel=&#8221;Shortcut Icon&#8221; href=&#8221;/favicon.ico&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;!&#8211;/meta 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;title&gt;新建网站角色 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form action=&#8221;&#8221; method=&#8221;post&#8221; class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-role-add&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;权限名称：&lt;/label&gt;
</p>
<p>
  			&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  				@foreach($topAuths as $topAuth)
</p>
<p>
  				&lt;dl class=&#8221;permission-list&#8221;&gt;
</p>
<p>
  					&lt;dd&gt;
</p>
<p>
  						&lt;dl class=&#8221;cl permission-list2&#8243;&gt;
</p>
<p>
  							&lt;dt&gt;
</p>
<p>
  								&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  									&lt;input
</p>
<p>
  										type=&#8221;checkbox&#8221;
</p>
<p><strong>										value=&#8221;{{ $topAuth-&gt;id }}&#8221; </strong>
</p>
<p><strong>										name=&#8221;auth[]&#8221; </strong>
</p>
<p>
  										id=&#8221;user-Character-1-0&#8243;
</p>
<p>
  										@if(in_array($topAuth-&gt;id, $authArr))
</p>
<p>
  											checked=checked
</p>
<p>
  										@endif
</p>
<p>
  									&gt;
</p>
<p>
  									{{ $topAuth-&gt;auth_name}}
</p>
<p>
  								&lt;/label&gt;
</p>
<p>
  							&lt;/dt&gt;
</p>
<p>
  							&lt;dd&gt;
</p>
<p>
  								@foreach($sonAuths as $sonAuth)
</p>
<p>
  									&lt;!&#8211; 父元素的ID  == 子元素PID &#8211;&gt;
</p>
<p>
  									@if ($topAuth-&gt;id == $sonAuth-&gt;pid)
</p>
<p>
  									&lt;label class=&#8221;&#8221;&gt;
</p>
<p>
  										&lt;input
</p>
<p>
  											type=&#8221;checkbox&#8221;
</p>
<p><strong>											value=&#8221;{{ $sonAuth-&gt;id }}&#8221; </strong>
</p>
<p><strong>											name=&#8221;auth[]&#8221; </strong>
</p>
<p>
  											id=&#8221;user-Character-1-0-0&#8243;
</p>
<p>
  											@if(in_array($sonAuth-&gt;id, $authArr))
</p>
<p>
  												checked=checked
</p>
<p>
  											@endif
</p>
<p>
  										&gt;
</p>
<p>
  										{{ $sonAuth-&gt;auth_name}}
</p>
<p>
  									&lt;/label&gt;
</p>
<p>
  									@endif
</p>
<p>
  								@endforeach
</p>
<p>
  							&lt;/dd&gt;
</p>
<p>
  						&lt;/dl&gt;
</p>
<p>
  					&lt;/dd&gt;
</p>
<p>
  				&lt;/dl&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  				&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success radius&#8221; id=&#8221;admin-role-save&#8221; name=&#8221;admin-role-save&#8221;&gt;&lt;i class=&#8221;icon-ok&#8221;&gt;&lt;/i&gt; 确定&lt;/button&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8220;.permission-list dt input:checkbox&#8221;).click(function(){
</p>
<p>
  		$(this).closest(&#8220;dl&#8221;).find(&#8220;dd input:checkbox&#8221;).prop(&#8220;checked&#8221;,$(this).prop(&#8220;checked&#8221;));
</p>
<p>
  	});
</p>
<p>
  	$(&#8220;.permission-list2 dd input:checkbox&#8221;).click(function(){
</p>
<p>
  		var l =$(this).parent().parent().find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		var l2=$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;.permission-list2 dd&#8221;).find(&#8220;input:checked&#8221;).length;
</p>
<p>
  		if($(this).prop(&#8220;checked&#8221;)){
</p>
<p>
  			$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  			$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,true);
</p>
<p>
  		}
</p>
<p>
  		else{
</p>
<p>
  			if(l==0){
</p>
<p>
  				$(this).closest(&#8220;dl&#8221;).find(&#8220;dt input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  			if(l2==0){
</p>
<p>
  				$(this).parents(&#8220;.permission-list&#8221;).find(&#8220;dt&#8221;).first().find(&#8220;input:checkbox&#8221;).prop(&#8220;checked&#8221;,false);
</p>
<p>
  			}
</p>
<p>
  		}
</p>
<p>
  	});
</p>
</p>
<p>
  	<strong>$(&#8220;#form-admin-role-add&#8221;).validate({</strong>
</p>
<p><strong>		rules:{</strong>
</p>
<p><strong>		},</strong>
</p>
<p><strong>		onkeyup:false,</strong>
</p>
<p><strong>		focusCleanup:true,</strong>
</p>
<p><strong>		success:&#8221;valid&#8221;,</strong>
</p>
<p><strong>		submitHandler:function(form){</strong>
</p>
<p><strong>			$(form).ajaxSubmit({</strong>
</p>
<p><strong>				type: &#8216;post&#8217;,</strong>
</p>
<p><strong>				url: window.location,</strong>
</p>
<p><strong>				success: function(data){</strong>
</p>
<p><strong>				    //在父元素提示</strong>
</p>
<p><strong>                    parent.layer.msg(&#8216;更新成功!&#8217;,{icon:1,time:1000});</strong>
</p>
<p><strong>					//成功则关闭窗口</strong>
</p>
<p><strong>                    var index = parent.layer.getFrameIndex(window.name);</strong>
</p>
<p><strong>                    parent.$(&#8216;.btn-refresh&#8217;).click();</strong>
</p>
<p><strong>                    parent.layer.close(index);</strong>
</p>
<p><strong>				},</strong>
</p>
<p><strong>                error: function(XmlHttpRequest, textStatus, errorThrown){</strong>
</p>
<p><strong>					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});</strong>
</p>
<p><strong>				}</strong>
</p>
<p><strong>			});</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>	});</strong>
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤2：更改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1217" height="267" src="/wp-content/uploads/2018/05/word-image-5468.png" class="wp-image-6010" srcset="/wp-content/uploads/2018/05/word-image-5468.png 1217w, /wp-content/uploads/2018/05/word-image-5468-300x66.png 300w, /wp-content/uploads/2018/05/word-image-5468-768x168.png 768w, /wp-content/uploads/2018/05/word-image-5468-1024x225.png 1024w" sizes="(max-width: 1217px) 100vw, 1217px" /></p>
<ul>
<li>
    步骤3：控制器方法接受处理数据
  </li>
</ul>
<p><strong>控制器</strong>
</p>
<p><img loading="lazy" decoding="async" width="1136" height="649" src="/wp-content/uploads/2018/05/word-image-5469.png" class="wp-image-6011" srcset="/wp-content/uploads/2018/05/word-image-5469.png 1136w, /wp-content/uploads/2018/05/word-image-5469-300x171.png 300w, /wp-content/uploads/2018/05/word-image-5469-768x439.png 768w, /wp-content/uploads/2018/05/word-image-5469-1024x585.png 1024w" sizes="(max-width: 1136px) 100vw, 1136px" /></p>
<p>
  //分配权限
</p>
<p>
  public function assignAuth(Request $request)
</p>
<p>
  {
</p>
<p>
      //1.判断HTTP请求类型
</p>
<p>
      if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
          //2.获取数据
</p>
<p>
          $postData = $request-&gt;only([&#8216;auth&#8217;]);
</p>
<p>
          //3.更新数据
</p>
<p>
          $rs = Role::updateAuth($request-&gt;input(&#8216;role_id&#8217;), $postData[&#8216;auth&#8217;]);
</p>
<p>
          //4.判断状态
</p>
<p>
          echo $rs ? 1 : 0;
</p>
<p>
      } else {
</p>
<p>
          //【显示所有权限节点功能】
</p>
<p>
          //1.查询所有顶级权限
</p>
<p>
          $topAuths = Auth::where(&#8216;pid&#8217;, 0)-&gt;get();
</p>
<p>
          //2.查询所有子级权限
</p>
<p>
          $sonAuths = Auth::where(&#8216;pid&#8217;, &#8216;&lt;&gt;&#8217;, 0)-&gt;get();
</p>
<p>
          //【根据角色ID获取角色的所有权限】
</p>
<p>
          $role = Role::where(&#8216;id&#8217;, $request-&gt;input(&#8216;role_id&#8217;))-&gt;first();
</p>
<p>
          $authArr = !empty($role-&gt;auth_ids) ? explode(&#8216;,&#8217;, $role-&gt;auth_ids) : [];
</p>
<p>
          //4.加载视图
</p>
<p>
          return view(&#8216;admin.role.assignAuth&#8217;, compact(&#8216;topAuths&#8217;, &#8216;sonAuths&#8217;, &#8216;authArr&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<p><strong>模型</strong>
</p>
<p><img loading="lazy" decoding="async" width="1086" height="537" src="/wp-content/uploads/2018/05/word-image-5470.png" class="wp-image-6012" srcset="/wp-content/uploads/2018/05/word-image-5470.png 1086w, /wp-content/uploads/2018/05/word-image-5470-300x148.png 300w, /wp-content/uploads/2018/05/word-image-5470-768x380.png 768w, /wp-content/uploads/2018/05/word-image-5470-1024x506.png 1024w" sizes="(max-width: 1086px) 100vw, 1086px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Role extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;role&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;role_name&#8217;, &#8216;auth_ids&#8217;, &#8216;auth_ac&#8217;];
</p>
<p>
     <strong> /**</strong>
</p>
<p><strong>     * 更改角色权限</strong>
</p>
<p><strong>     * @param  int   $role_id  角色ID</strong>
</p>
<p><strong>     * @param  array $authArr  权限数组</strong>
</p>
<p><strong>     * @return bool</strong>
</p>
<p><strong>     */</strong>
</p>
<p><strong>    public static function updateAuth($role_id, $authArr)</strong>
</p>
<p><strong>    {</strong>
</p>
<p><strong>        //1.将选中的权限划分为字符串，逗号分隔</strong>
</p>
<p><strong>        $data[&#8216;auth_ids&#8217;] = implode(&#8216;,&#8217;, $authArr);</strong>
</p>
<p><strong>        //2.根据权限ID获取对应控制器方法</strong>
</p>
<p><strong>        $auths = Auth::select(&#8216;controller&#8217;, &#8216;action&#8217;)-&gt;whereIn(&#8216;id&#8217;, $authArr)-&gt;get();</strong>
</p>
<p><strong>        foreach ($auths as $auth) {</strong>
</p>
<p><strong>            $temp[] = $auth-&gt;controller .&#8217;@&#8217;.$auth-&gt;action;</strong>
</p>
<p><strong>        }</strong>
</p>
<p><strong>        //3.划分控制器和方法</strong>
</p>
<p><strong>        $data[&#8216;auth_ac&#8217;] = implode(&#8216;,&#8217;, $temp);</strong>
</p>
<p><strong>        //4.更新数据库</strong>
</p>
<p><strong>        return self::where(&#8216;id&#8217;, $role_id)-&gt;update($data);</strong>
</p>
<p><strong>    }</strong>
</p>
<p>
  }
</p>
<h1>管理员登录系统显示所属角色</h1>
<h2>︴效果（后台首页右上角）</h2>
<p><img loading="lazy" decoding="async" width="819" height="176" src="/wp-content/uploads/2018/05/word-image-5471.png" class="wp-image-6013" srcset="/wp-content/uploads/2018/05/word-image-5471.png 819w, /wp-content/uploads/2018/05/word-image-5471-300x64.png 300w, /wp-content/uploads/2018/05/word-image-5471-768x165.png 768w" sizes="(max-width: 819px) 100vw, 819px" /></p>
<h2>︴步骤</h2>
<ul>
<li>
    步骤1：admin模型关联角色表
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="941" height="497" src="/wp-content/uploads/2018/05/word-image-5472.png" class="wp-image-6014" srcset="/wp-content/uploads/2018/05/word-image-5472.png 941w, /wp-content/uploads/2018/05/word-image-5472-300x158.png 300w, /wp-content/uploads/2018/05/word-image-5472-768x406.png 768w" sizes="(max-width: 941px) 100vw, 941px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Auth\Authenticatable;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Admin extends Model implements \Illuminate\Contracts\Auth\Authenticatable
</p>
<p>
  {
</p>
<p>
      use Authenticatable;
</p>
<p>
      /**
</p>
<p>
       * 声明表名
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;admin&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 关联角色表（1:1）
</p>
<p>
       * @return \Illuminate\Database\Eloquent\Relations\HasOne
</p>
<p>
       */
</p>
<p>
      public function role()
</p>
<p>
      {
</p>
<p>
          return $this -&gt; hasOne(&#8216;App\Http\Model\Role&#8217;, &#8216;id&#8217;, &#8216;role_id&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图修改显示角色
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1205" height="267" src="/wp-content/uploads/2018/05/word-image-5473.png" class="wp-image-6015" srcset="/wp-content/uploads/2018/05/word-image-5473.png 1205w, /wp-content/uploads/2018/05/word-image-5473-300x66.png 300w, /wp-content/uploads/2018/05/word-image-5473-768x170.png 768w, /wp-content/uploads/2018/05/word-image-5473-1024x227.png 1024w" sizes="(max-width: 1205px) 100vw, 1205px" /></p>
<p>
  {{ Auth::guard(&#8216;admin&#8217;)-&gt;user()-&gt;role()-&gt;first()-&gt;role_name }}
</p>
<p>
  脚下留心：role()对应模型中的方法名
</p>
<h1><a id="post-5944-_Toc487817428"></a>使用中间件鉴权</h1>
<h2>︴效果</h2>
<p><img loading="lazy" decoding="async" width="881" height="229" src="/wp-content/uploads/2018/05/word-image-5474.png" class="wp-image-6016" srcset="/wp-content/uploads/2018/05/word-image-5474.png 881w, /wp-content/uploads/2018/05/word-image-5474-300x78.png 300w, /wp-content/uploads/2018/05/word-image-5474-768x200.png 768w" sizes="(max-width: 881px) 100vw, 881px" /></p>
<h2>1、说明</h2>
<p>
  在ThinkPHP中使用RBAC鉴权的时候会创建一个基础/中间控制器的控制器，然后在其中的构造/初始化方法中来进行权限判断。
</p>
<p>
  在laravel中可以通过中间件的方法来实现rbac鉴权，其原理和ThinkPHP中的原理是一样的，使用中间件可以省去更改控制器的继承关系。
</p>
<h2>2、使用</h2>
<ul>
<li>
    步骤1：创建中间件并书写代码
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1262" height="600" src="/wp-content/uploads/2018/05/word-image-5475.png" class="wp-image-6017" srcset="/wp-content/uploads/2018/05/word-image-5475.png 1262w, /wp-content/uploads/2018/05/word-image-5475-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5475-768x365.png 768w, /wp-content/uploads/2018/05/word-image-5475-1024x487.png 1024w" sizes="(max-width: 1262px) 100vw, 1262px" /></p>
<p>
  public function handle($request, Closure $next)
</p>
<p>
  {
</p>
<p>
      //1.获取当前的路由（包含控制器和方法的地址）
</p>
<p>
      $route = strtolower(Route::currentRouteAction()); //&#8221;App\Http\Controllers\Admin\IndexController@index&#8221;
</p>
<p>
      //2.获取当前角色权限
</p>
<p>
      $ac = Auth::guard(&#8216;admin&#8217;)-&gt;user()-&gt;role()-&gt;first()-&gt;auth_ac;
</p>
<p>
      //3.组装权限：默认全部用户都有后台首页路由的权限
</p>
<p>
      $ac = strtolower($ac . &#8216;,IndexController@index,IndexController@welcome&#8217;);
</p>
<p>
      //4.比较范围是否存在包含关系,可以使用strpos进行比较，也可以转化成数组进行in_array
</p>
<p>
      $array = explode(&#8216;\\&#8217;,$route);
</p>
<p>
      //dd(prev($array));
</p>
<p>
      if(strpos($ac,end($array)) === false){    //end是将数组的指针移向最后一个元素并且返回其值
</p>
<p>
          //echo &#8216;您没有访问权限&#8217;;die;
</p>
<p>
          return redirect(&#8216;admin/login&#8217;)-&gt;withErrors([&#8216;errors&#8217; =&gt; &#8216;您没有访问权限&#8217;]);
</p>
<p>
      }
</p>
<p>
      return $next($request);
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：激活中间件
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1035" height="402" src="/wp-content/uploads/2018/05/word-image-5476.png" class="wp-image-6018" srcset="/wp-content/uploads/2018/05/word-image-5476.png 1035w, /wp-content/uploads/2018/05/word-image-5476-300x117.png 300w, /wp-content/uploads/2018/05/word-image-5476-768x298.png 768w, /wp-content/uploads/2018/05/word-image-5476-1024x398.png 1024w" sizes="(max-width: 1035px) 100vw, 1035px" /></p>
<ul>
<li>
    步骤3：使用
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1217" height="606" src="/wp-content/uploads/2018/05/word-image-5477.png" class="wp-image-6019" srcset="/wp-content/uploads/2018/05/word-image-5477.png 1217w, /wp-content/uploads/2018/05/word-image-5477-300x149.png 300w, /wp-content/uploads/2018/05/word-image-5477-768x382.png 768w, /wp-content/uploads/2018/05/word-image-5477-1024x510.png 1024w" sizes="(max-width: 1217px) 100vw, 1217px" /></p>
<h1><a id="post-5944-_Toc487817429"></a>︴作业</h1>
<p>
  1）实现今天的代码；
</p>
<p>
  2）完善RBAC三部分管理模块的后续CURD操作；</p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5944.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel在线教育平台（三）专业分类管理、课程管理、课时管理</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5892.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5892.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:47:15 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[专业分类管理]]></category>
		<category><![CDATA[课时管理]]></category>
		<category><![CDATA[课程管理]]></category>
		<guid isPermaLink="false">/?p=5892</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（3） ︴准备 1、说明 专业分类数据表 前段 后端 web开发、编程、开 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-5892-_Toc487817413"></a>Laravel框架实战-在线教育平台（3）<a id="post-5892-_Toc487817414"></a></h1>
<h1>︴准备</h1>
<h2>1、说明  </h2>
<p>
  专业分类数据表
</p>
<p>
  前段 后端  web开发、编程、开发、数据库、大数据
</p>
<p>
  专业数据表（学科表）
</p>
<p>
  PHP  Java   C++  Python    全栈   UI专业
</p>
<p>
  课程数据表
</p>
<p>
  如PHP专业下面有PHP核心编程，Javascript，jquery，ajax，商城项目,TP框架课程，等等
</p>
<p>
  课时数据表
</p>
<p>
  如PHP专业下面的PHP核心编程课程下面有，php的函数，PHP的数组，php的文件上传。
</p>
<p>
  它们的关系如下图：
</p>
<p><img loading="lazy" decoding="async" width="862" height="391" src="/wp-content/uploads/2018/05/word-image-5353.png" class="wp-image-5893" srcset="/wp-content/uploads/2018/05/word-image-5353.png 862w, /wp-content/uploads/2018/05/word-image-5353-300x136.png 300w, /wp-content/uploads/2018/05/word-image-5353-768x348.png 768w" sizes="(max-width: 862px) 100vw, 862px" /></p>
<p>
  点播: 点击课时直接播放视频
</p>
<p>
  直播：对面有人和你试试互动看到的画面
</p>
<h2>数据字典</h2>
<h3>后台专业分类表（protype）</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  protype
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  protype_name
</p>
</td>
<td>
<p>
  varchar(20)
</p>
</td>
<td>
<p>
  分类名
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  sort
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  排序编号
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  state
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  状态：0-禁用，1-启用
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  启用
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  记录创建时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  记录更新时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
</table>
<h3>后台专业表（profession）</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  profession
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  protype_id
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  专业分类表的主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  profession_name
</p>
</td>
<td>
<p>
  varchar(32)
</p>
</td>
<td>
<p>
  专业名称
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  profession_desc
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  专业描述
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  img
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  在列表页面展示的图片地址
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<h3>后台课程表（course）</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  course
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  profession_id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  关联专业id
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  course_name
</p>
</td>
<td>
<p>
  varchar(30)
</p>
</td>
<td>
<p>
  课程名称
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  course_price
</p>
</td>
<td>
<p>
  decimal(9,2)
</p>
</td>
<td>
<p>
  课程的价格
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  img
</p>
</td>
<td>
<p>
  varchar(120)
</p>
</td>
<td>
<p>
  封面地址
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  course_desc
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  课程描述
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  记录创建时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  记录更新时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<h3>后台课时点播表（lession）</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  lession
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  course_id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  所属的课程id，关联课程表
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  img
</p>
</td>
<td>
<p>
  varchar(120)
</p>
</td>
<td>
<p>
  封面图
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  lession_name
</p>
</td>
<td>
<p>
  varchar(50)
</p>
</td>
<td>
<p>
  点播记录名
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  video_address
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  点播视频的地址
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  video_time
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  视频的长度，单位秒
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  teacher_name
</p>
</td>
<td>
<p>
  varchar(32)
</p>
</td>
<td>
<p>
  讲师名称
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  lesson_desc
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  课时描述
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  9
</p>
</td>
<td>
<p>
  state
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  状态：0-禁用，1-启用
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  启用
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  10
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  记录创建时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  11
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  记录更新时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
</table>
<h2>3、迁移</h2>
<p>
  步骤1：创建迁移文件 并复制下属代码
</p>
<p><img loading="lazy" decoding="async" width="1294" height="593" src="/wp-content/uploads/2018/05/word-image-5354.png" class="wp-image-5894" srcset="/wp-content/uploads/2018/05/word-image-5354.png 1294w, /wp-content/uploads/2018/05/word-image-5354-300x137.png 300w, /wp-content/uploads/2018/05/word-image-5354-768x352.png 768w, /wp-content/uploads/2018/05/word-image-5354-1024x469.png 1024w" sizes="(max-width: 1294px) 100vw, 1294px" /></p>
<p>
  步骤2：运行
</p>
<p><img loading="lazy" decoding="async" width="1112" height="467" src="/wp-content/uploads/2018/05/word-image-5355.png" class="wp-image-5895" srcset="/wp-content/uploads/2018/05/word-image-5355.png 1112w, /wp-content/uploads/2018/05/word-image-5355-300x126.png 300w, /wp-content/uploads/2018/05/word-image-5355-768x323.png 768w, /wp-content/uploads/2018/05/word-image-5355-1024x430.png 1024w" sizes="(max-width: 1112px) 100vw, 1112px" /></p>
<p>
  /**
</p>
<p>
   * Run the migrations.
</p>
<p>
   *
</p>
<p>
   * @return void
</p>
<p>
   */
</p>
<p>
  public function up()
</p>
<p>
  {
</p>
<p>
  	//创建专业分类表
</p>
<p>
  	Schema::create(&#8216;protype&#8217;,function($table){
</p>
<p>
  		$table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;protype_name&#8217;,20)-&gt;comment(&#8216;分类名&#8217;);
</p>
<p>
  		$table-&gt;tinyInteger(&#8216;sort&#8217;)-&gt;default(0);
</p>
<p>
  		$table-&gt;unsignedTinyInteger(&#8216;state&#8217;)-&gt;default(1)-&gt;comment(&#8216;状态:0停用1开启&#8217;);
</p>
<p>
  		$table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  		$table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  	});
</p>
<p>
  	//创建专业表
</p>
<p>
  	Schema::create(&#8216;profession&#8217;, function (Blueprint $table) {
</p>
<p>
  		$table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;profession_name&#8217;,32)-&gt;comment(&#8216;专业名称&#8217;);
</p>
<p>
  		$table-&gt;unsignedTinyInteger(&#8216;protype_id&#8217;)-&gt;comment(&#8216;专业分类表的主键&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;img&#8217;,120)-&gt;default(&#8221;)-&gt;comment(&#8216;封面图&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;profession_desc&#8217;)-&gt;default(&#8221;)-&gt;comment(&#8216;描述&#8217;);
</p>
<p>
             $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
             $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  	});
</p>
<p>
  	//创建课程表
</p>
<p>
  	Schema::create(&#8216;course&#8217;, function (Blueprint $table) {
</p>
<p>
  		$table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;course_name&#8217;,32)-&gt;comment(&#8216;课程名称&#8217;);
</p>
<p>
  		$table-&gt;integer(&#8216;profession_id&#8217;)-&gt;comment(&#8216;课程所属专业的id&#8217;);
</p>
<p>
  		$table-&gt;decimal(&#8216;course_price&#8217;,9,2)-&gt;default(0)-&gt;comment(&#8216;课程的价格&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;img&#8217;,120)-&gt;default(&#8221;)-&gt;comment(&#8216;封面图&#8217;);
</p>
<p>
  		$table-&gt;string(&#8216;course_desc&#8217;)-&gt;default(&#8221;)-&gt;comment(&#8216;课程描述&#8217;);
</p>
<p>
             $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
             $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  	});
</p>
<p>
  	//创建课时表
</p>
<p>
  	Schema::create(&#8216;lesson&#8217;, function (Blueprint $table) {
</p>
<p>
  		$table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
  $table-&gt;integer(&#8216;course_id&#8217;)-&gt;comment(&#8216;课时所属课程的id&#8217;);
</p>
<p>
  $table-&gt;string(&#8216;img&#8217;,120)-&gt;default(&#8221;)-&gt;comment(&#8216;封面图&#8217;);
</p>
<p>
  $table-&gt;string(&#8216;lesson_name&#8217;,32)-&gt;comment(&#8216;课时名称&#8217;);
</p>
<p>
  $table-&gt;string(&#8216;video_address&#8217;,120)-&gt;default(&#8221;)-&gt;comment(&#8216;视频的地址&#8217;);
</p>
<p>
  $table-&gt;integer(&#8216;video_time&#8217;)-&gt;default(10)-&gt;comment(&#8216;课时的时长&#8217;);
</p>
<p>
  $table-&gt;string(&#8216;teacher_name&#8217;,32)-&gt;default(&#8221;)-&gt;comment(&#8216;讲师名称&#8217;);
</p>
<p>
  $table-&gt;string(&#8216;lesson_desc&#8217;)-&gt;default(&#8221;)-&gt;comment(&#8216;课时描述&#8217;);
</p>
<p>
  $table-&gt;unsignedTinyInteger(&#8216;state&#8217;)-&gt;default(1)-&gt;comment(&#8216;状态:0停用1开启&#8217;);
</p>
<p>
  $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  /**
</p>
<p>
   * Reverse the migrations.
</p>
<p>
   *
</p>
<p>
   * @return void
</p>
<p>
   */
</p>
<p>
  public function down()
</p>
<p>
  {
</p>
<p>
      Schema::drop(&#8216;protype&#8217;);
</p>
<p>
  	Schema::drop(&#8216;profession&#8217;);
</p>
<p>
  	Schema::drop(&#8216;course&#8217;);
</p>
<p>
  	Schema::drop(&#8216;lesson&#8217;);
</p>
<p>
  }
</p>
<h2>4、填充</h2>
<h3>1）专业分类表（php artisan make:seeder ProtypeTableSeeder）</h3>
<p>
  &lt;?php
</p>
<p>
  use Illuminate\Database\Seeder;
</p>
<p>
  class ProtypeTableSeeder extends Seeder
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Run the database seeds.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function run()
</p>
<p>
      {
</p>
<p>
          DB::table(&#8216;protype&#8217;)-&gt;insert([
</p>
<p>
                  [
</p>
<p>
                      &#8216;protype_name&#8217;=&gt;&#8217;后端&#8217;
</p>
<p>
                  ],
</p>
<p>
                  [
</p>
<p>
                      &#8216;protype_name&#8217;=&gt;&#8217;web开发&#8217;
</p>
<p>
                  ],
</p>
<p>
                  [
</p>
<p>
                      &#8216;protype_name&#8217;=&gt;&#8217;运维&#8217;
</p>
<p>
                  ],
</p>
<p>
                  [
</p>
<p>
                      &#8216;protype_name&#8217;=&gt;&#8217;数据库&#8217;
</p>
<p>
                  ],
</p>
<p>
                  [
</p>
<p>
                      &#8216;protype_name&#8217;=&gt;&#8217;大数据&#8217;
</p>
<p>
                  ]
</p>
<p>
          ]);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h3>2）专业表（php artisan make:seeder ProfessionTableSeeder ）</h3>
<p>
  &lt;?php
</p>
<p>
  use Illuminate\Database\Seeder;
</p>
<p>
  class ProfessionTableSeeder extends Seeder
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Run the database seeds.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function run()
</p>
<p>
      {
</p>
<p>
          DB::table(&#8216;profession&#8217;)-&gt;insert([
</p>
<p>
          		[
</p>
<p>
                      &#8216;protype_id&#8217;=&gt; 1,
</p>
<p>
                      &#8216;profession_name&#8217;=&gt;&#8217;PHP学科&#8217;,
</p>
<p>
          			&#8216;profession_desc&#8217;=&gt;&#8217;是世界上最好的语言&#8217;
</p>
<p>
          		],
</p>
<p>
          		[
</p>
<p>
                      &#8216;protype_id&#8217;=&gt; 2,
</p>
<p>
          			&#8216;profession_name&#8217;=&gt;&#8217;HTML5&amp;全栈&#8217;,
</p>
<p>
          			&#8216;profession_desc&#8217;=&gt;&#8217;是世界上最好的语言&#8217;
</p>
<p>
          		],
</p>
<p>
          		[
</p>
<p>
                      &#8216;protype_id&#8217;=&gt; 3,
</p>
<p>
          			&#8216;profession_name&#8217;=&gt;&#8217;Python全栈&#8217;,
</p>
<p>
          			&#8216;profession_desc&#8217;=&gt;&#8217;是世界上最好的语言&#8217;
</p>
<p>
          		]
</p>
<p>
          ]);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h3>3）课程表（php artisan make:seeder CourseTableSeeder ）</h3>
<p>
  &lt;?php
</p>
<p>
  use Illuminate\Database\Seeder;
</p>
<p>
  class CourseTableSeeder extends Seeder
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Run the database seeds.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function run()
</p>
<p>
      {
</p>
<p>
         	DB::table(&#8216;course&#8217;)-&gt;insert([
</p>
<p>
         		[
</p>
<p>
         			&#8216;course_name&#8217;=&gt;&#8217;PHP核心编程&#8217;,
</p>
<p>
         			&#8216;profession_id&#8217;=&gt;1,
</p>
<p>
         			&#8216;course_price&#8217;=&gt;12.34,
</p>
<p>
         			&#8216;course_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
         		],
</p>
<p>
         		[
</p>
<p>
         			&#8216;course_name&#8217;=&gt;&#8217;LInux环境安装&#8217;,
</p>
<p>
         			&#8216;profession_id&#8217;=&gt;2,
</p>
<p>
         			&#8216;course_price&#8217;=&gt;4512.34,
</p>
<p>
         			&#8216;course_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
         		],
</p>
<p>
         		[
</p>
<p>
         			&#8216;course_name&#8217;=&gt;&#8217;PHP文件上传&#8217;,
</p>
<p>
         			&#8216;profession_id&#8217;=&gt;3,
</p>
<p>
         			&#8216;course_price&#8217;=&gt;6712.34,
</p>
<p>
         			&#8216;course_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
         		],
</p>
<p>
         	]);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h3>4）课时点播表（php artisan make:seeder LessonTableSeeder ）</h3>
<p>
  &lt;?php
</p>
<p>
  use Illuminate\Database\Seeder;
</p>
<p>
  class LessonTableSeeder extends Seeder
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Run the database seeds.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function run()
</p>
<p>
      {
</p>
<p>
          //填充lesson表里面的数据
</p>
<p>
          DB::table(&#8216;lesson&#8217;)-&gt;insert([
</p>
<p>
          	[
</p>
<p>
          		&#8216;lesson_name&#8217;=&gt;&#8217;PHP文件上传&#8217;,
</p>
<p>
          		&#8216;course_id&#8217;=&gt;1,
</p>
<p>
          		&#8216;video_time&#8217;=&gt;20,
</p>
<p>
          		&#8216;teacher_name&#8217;=&gt;&#8217;李白&#8217;,
</p>
<p>
          		&#8216;lesson_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
          	],
</p>
<p>
          	[
</p>
<p>
          		&#8216;lesson_name&#8217;=&gt;&#8217;PHP数组&#8217;,
</p>
<p>
          		&#8216;course_id&#8217;=&gt;2,
</p>
<p>
          		&#8216;video_time&#8217;=&gt;30,
</p>
<p>
          		&#8216;teacher_name&#8217;=&gt;&#8217;刘备&#8217;,
</p>
<p>
          		&#8216;lesson_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
          	],
</p>
<p>
          	[
</p>
<p>
          		&#8216;lesson_name&#8217;=&gt;&#8217;ajax的前生今世&#8217;,
</p>
<p>
          		&#8216;course_id&#8217;=&gt;1,
</p>
<p>
          		&#8216;video_time&#8217;=&gt;10,
</p>
<p>
          		&#8216;teacher_name&#8217;=&gt;&#8217;曹操&#8217;,
</p>
<p>
          		&#8216;lesson_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
          	],
</p>
<p>
          	[
</p>
<p>
          		&#8216;lesson_name&#8217;=&gt;&#8217;linux的环境安装&#8217;,
</p>
<p>
          		&#8216;course_id&#8217;=&gt;1,
</p>
<p>
          		&#8216;video_time&#8217;=&gt;15,
</p>
<p>
          		&#8216;teacher_name&#8217;=&gt;&#8217;李逵&#8217;,
</p>
<p>
          		&#8216;lesson_desc&#8217;=&gt;&#8217;非常经典的课程&#8217;
</p>
<p>
          	],
</p>
<p>
          ]);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h3>︴操作步骤</h3>
<ul>
<li>
    步骤1：创建上述4个填充器
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="862" height="430" src="/wp-content/uploads/2018/05/word-image-5356.png" class="wp-image-5896" srcset="/wp-content/uploads/2018/05/word-image-5356.png 862w, /wp-content/uploads/2018/05/word-image-5356-300x150.png 300w, /wp-content/uploads/2018/05/word-image-5356-768x383.png 768w" sizes="(max-width: 862px) 100vw, 862px" /></p>
<ul>
<li>
    步骤2：创建完毕后将上述代码赋值粘贴到对应填充器中即可
  </li>
<li>
    步骤3：执行所有填充器即可（插入数据）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="700" height="317" src="/wp-content/uploads/2018/05/word-image-5357.png" class="wp-image-5897" srcset="/wp-content/uploads/2018/05/word-image-5357.png 700w, /wp-content/uploads/2018/05/word-image-5357-300x136.png 300w" sizes="(max-width: 700px) 100vw, 700px" /></p>
<p>
  php artisan db:seed &#8211;class=ProtypeTableSeeder
</p>
<p>
  php artisan db:seed &#8211;class=ProfessionTableSeeder
</p>
<p>
  php artisan db:seed &#8211;class=CourseTableSeeder
</p>
<p>
  php artisan db:seed &#8211;class=LessonTableSeeder
</p>
<h2>5、创建模型</h2>
<h3>1）专业分类表</h3>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Protype extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;protype&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;protype_name&#8217;, &#8216;sort&#8217;, &#8216;state&#8217;];
</p>
<p>
  }
</p>
<h3>2）专业表</h3>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Profession extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;profession&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;profession_name&#8217;, &#8216;protype_id&#8217;, &#8216;img&#8217;, &#8216;profession_desc&#8217;];
</p>
<p>
  }
</p>
<h3>3）课程表</h3>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Course extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;course&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;course_name&#8217;, &#8216;profession_id&#8217;, &#8216;course_price&#8217;, &#8216;img&#8217;, &#8216;course_desc&#8217;];
</p>
<p>
  }
</p>
<h3>4）课时点播</h3>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Lession extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;lession&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [
</p>
<p>
          &#8216;course_id&#8217;,
</p>
<p>
          &#8216;img&#8217;,
</p>
<p>
          &#8216;lesson_name&#8217;,
</p>
<p>
          &#8216;video_address&#8217;,
</p>
<p>
          &#8216;video_time&#8217;,
</p>
<p>
          &#8216;teacher_name&#8217;,
</p>
<p>
          &#8216;lesson_desc&#8217;,
</p>
<p>
          &#8216;state&#8217;
</p>
<p>
      ];
</p>
<p>
  }
</p>
<h1><a id="post-5892-_Toc487989197"></a>一、专业分类管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1365" height="554" src="/wp-content/uploads/2018/05/word-image-5358.png" class="wp-image-5898" srcset="/wp-content/uploads/2018/05/word-image-5358.png 1365w, /wp-content/uploads/2018/05/word-image-5358-300x122.png 300w, /wp-content/uploads/2018/05/word-image-5358-768x312.png 768w, /wp-content/uploads/2018/05/word-image-5358-1024x416.png 1024w" sizes="(max-width: 1365px) 100vw, 1365px" /></p>
<h2>列表功能</h2>
<h3>1）显示列表（模板文件：admin-permission.html）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="992" height="260" src="/wp-content/uploads/2018/05/word-image-5359.png" class="wp-image-5899" srcset="/wp-content/uploads/2018/05/word-image-5359.png 992w, /wp-content/uploads/2018/05/word-image-5359-300x79.png 300w, /wp-content/uploads/2018/05/word-image-5359-768x201.png 768w" sizes="(max-width: 992px) 100vw, 992px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法，并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="883" height="509" src="/wp-content/uploads/2018/05/word-image-5360.png" class="wp-image-5900" srcset="/wp-content/uploads/2018/05/word-image-5360.png 883w, /wp-content/uploads/2018/05/word-image-5360-300x173.png 300w, /wp-content/uploads/2018/05/word-image-5360-768x443.png 768w" sizes="(max-width: 883px) 100vw, 883px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class ProtypeController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //2.加载视图
</p>
<p>
          return view(&#8216;admin.protype.index&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1322" height="589" src="/wp-content/uploads/2018/05/word-image-5361.png" class="wp-image-5901" srcset="/wp-content/uploads/2018/05/word-image-5361.png 1322w, /wp-content/uploads/2018/05/word-image-5361-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5361-768x342.png 768w, /wp-content/uploads/2018/05/word-image-5361-1024x456.png 1024w" sizes="(max-width: 1322px) 100vw, 1322px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：修改路由（注：datatables客户端分页也得发送一步请求）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1131" height="292" src="/wp-content/uploads/2018/05/word-image-5362.png" class="wp-image-5902" srcset="/wp-content/uploads/2018/05/word-image-5362.png 1131w, /wp-content/uploads/2018/05/word-image-5362-300x77.png 300w, /wp-content/uploads/2018/05/word-image-5362-768x198.png 768w, /wp-content/uploads/2018/05/word-image-5362-1024x264.png 1024w" sizes="(max-width: 1131px) 100vw, 1131px" /></p>
<ul>
<li>
    步骤2：更改视图设置datatables
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1272" height="536" src="/wp-content/uploads/2018/05/word-image-5363.png" class="wp-image-5903" srcset="/wp-content/uploads/2018/05/word-image-5363.png 1272w, /wp-content/uploads/2018/05/word-image-5363-300x126.png 300w, /wp-content/uploads/2018/05/word-image-5363-768x324.png 768w, /wp-content/uploads/2018/05/word-image-5363-1024x431.png 1024w" sizes="(max-width: 1272px) 100vw, 1272px" /><br />
<img loading="lazy" decoding="async" width="1044" height="506" src="/wp-content/uploads/2018/05/word-image-5364.png" class="wp-image-5904" srcset="/wp-content/uploads/2018/05/word-image-5364.png 1044w, /wp-content/uploads/2018/05/word-image-5364-300x145.png 300w, /wp-content/uploads/2018/05/word-image-5364-768x372.png 768w, /wp-content/uploads/2018/05/word-image-5364-1024x496.png 1024w" sizes="(max-width: 1044px) 100vw, 1044px" /><br />
<img loading="lazy" decoding="async" width="1090" height="608" src="/wp-content/uploads/2018/05/word-image-5365.png" class="wp-image-5905" srcset="/wp-content/uploads/2018/05/word-image-5365.png 1090w, /wp-content/uploads/2018/05/word-image-5365-300x167.png 300w, /wp-content/uploads/2018/05/word-image-5365-768x428.png 768w, /wp-content/uploads/2018/05/word-image-5365-1024x571.png 1024w" sizes="(max-width: 1090px) 100vw, 1090px" /><br />
<img loading="lazy" decoding="async" width="716" height="164" src="/wp-content/uploads/2018/05/word-image-5366.png" class="wp-image-5906" srcset="/wp-content/uploads/2018/05/word-image-5366.png 716w, /wp-content/uploads/2018/05/word-image-5366-300x69.png 300w" sizes="(max-width: 716px) 100vw, 716px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;专业分类管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 专业分类管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;专业分类名称&#8221; id=&#8221;<strong>search_content</strong>&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;button&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;<strong>search</strong>&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜专业分类节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt; &lt;span class=&#8221;l&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加专业分类节点&#8217;,&#8217;admin-permission-add.html&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加专业分类节点&lt;/a&gt;&lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			<strong>&lt;tr&gt;</strong>
</p>
<p><strong>				&lt;th scope=&#8221;col&#8221; colspan=&#8221;8&#8243;&gt;专业分类节点&lt;/th&gt;</strong>
</p>
<p><strong>			&lt;/tr&gt;</strong>
</p>
<p><strong>			&lt;tr class=&#8221;text-c&#8221;&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;200&#8243;&gt;分类名称&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;排序&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;状态&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;创建于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;更新于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;</strong>
</p>
<p><strong>			&lt;/tr&gt;</strong>
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			<strong>{{&#8211;&lt;tr class=&#8221;text-c&#8221;&gt;&#8211;}}</strong>
</p>
<p><strong>				{{&#8211;&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;1&#8243; name=&#8221;&#8221;&gt;&lt;/td&gt;&#8211;}}</strong>
</p>
<p><strong>				{{&#8211;&lt;td&gt;1&lt;/td&gt;&#8211;}}</strong>
</p>
<p><strong>				{{&#8211;&lt;td&gt;栏目添加&lt;/td&gt;&#8211;}}</strong>
</p>
<p><strong>				{{&#8211;&lt;td&gt;&lt;/td&gt;&#8211;}}</strong>
</p>
<p><strong>				{{&#8211;&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;&#8211;}}</strong>
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p><strong>//客户端分页大DD  服务端分页小DD</strong>
</p>
<p><strong>var table  = $(&#8216;table&#8217;).DataTable({</strong>
</p>
<p><strong>	//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）</strong>
</p>
<p><strong>	//&#8221;serverSide&#8221;: true,</strong>
</p>
<p><strong>	ajax: {</strong>
</p>
<p><strong>		url: &#8220;{{ url(&#8216;admin/protype/index&#8217;) }}&#8221;,</strong>
</p>
<p><strong>		&#8220;type&#8221;: &#8220;post&#8221;,</strong>
</p>
<p><strong>		&#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },</strong>
</p>
<p><strong>		&#8220;data&#8221;: function (data) {</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>	},</strong>
</p>
<p><strong>	//columns</strong>
</p>
<p><strong>	//作用：设置服务端返回数据填充规则</strong>
</p>
<p><strong>	//语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}</strong>
</p>
<p><strong>	&#8220;columns&#8221;: [</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;占位，复选框&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;id&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;protype_name&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;sort&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;state&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;created_at&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;updated_at&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;占位，操作&#8221; },</strong>
</p>
<p><strong>	],</strong>
</p>
<p><strong>	//createdRow</strong>
</p>
<p><strong>	//作用：创建tr时回调</strong>
</p>
<p><strong>	//row:创建好的tr的dom对象</strong>
</p>
<p><strong>	//data:数据源，代表服务器端返回的每条记录的实体信息</strong>
</p>
<p><strong>	//dataIndex:数据源的索引号码</strong>
</p>
<p><strong>	&#8220;createdRow&#8221;: function(row, data, dataIndex) {</strong>
</p>
<p><strong>		//匹配每一行的第一列</strong>
</p>
<p><strong>		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)</strong>
</p>
<p><strong>		//匹配每一行的第八列</strong>
</p>
<p><strong>		if (data.state == 1) {</strong>
</p>
<p><strong>			$(row).find(&#8220;td:eq(4)&#8221;).html(&#8216;&lt;span class=&#8221;label label-success radius&#8221;&gt;已启用&lt;/span&gt;&#8217;);</strong>
</p>
<p><strong>		} else {</strong>
</p>
<p><strong>			$(row).find(&#8220;td:eq(4)&#8221;).html(&#8216;&lt;span class=&#8221;label radius&#8221;&gt;已停用&lt;/span&gt;&#8217;);</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>		//匹配每一行的最后一列</strong>
</p>
<p><strong>		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;</strong>
</p>
<p><strong>		$(row).find(&#8220;td:last&#8221;).html(lastHtml);</strong>
</p>
<p><strong>        //让每一行居中</strong>
</p>
<p><strong>        $(row).addClass(&#8216;text-c&#8217;);</strong>
</p>
<p><strong>	},</strong>
</p>
<p><strong>	// searching : false, 		 //禁用搜索</strong>
</p>
<p><strong>	bLengthChange: false,   //去掉每页显示多少条数据方法</strong>
</p>
<p><strong>    // iDisplayLength:2,	    //限制每页显示条数</strong>
</p>
<p><strong>});</strong>
</p>
<p><strong>//客户端搜索功能更</strong>
</p>
<p><strong>$(&#8216;#search&#8217;).click(function(){</strong>
</p>
<p><strong>    var search_content = $(&#8216;#search_content&#8217;).val();</strong>
</p>
<p><strong>    table.search(search_content).draw();</strong>
</p>
<p><strong>});</strong>
</p>
<p><strong>$(&#8216;#DataTables_Table_0_filter&#8217;).hide();</strong>
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-专业分类-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-专业分类-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-专业分类-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤3：更改控制器方法
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1009" height="572" src="/wp-content/uploads/2018/05/word-image-5367.png" class="wp-image-5907" srcset="/wp-content/uploads/2018/05/word-image-5367.png 1009w, /wp-content/uploads/2018/05/word-image-5367-300x170.png 300w, /wp-content/uploads/2018/05/word-image-5367-768x435.png 768w" sizes="(max-width: 1009px) 100vw, 1009px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Protype;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class ProtypeController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型（脚下留心：客户端分页直接向所有数据响应即可）
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.查询所有数据
</p>
<p>
              $protypes = Protype::get();
</p>
<p>
              //3.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;data&#8217; =&gt; $protypes
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图
</p>
<p>
              return view(&#8216;admin.protype.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1>专业管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1359" height="635" src="/wp-content/uploads/2018/05/word-image-5368.png" class="wp-image-5908" srcset="/wp-content/uploads/2018/05/word-image-5368.png 1359w, /wp-content/uploads/2018/05/word-image-5368-300x140.png 300w, /wp-content/uploads/2018/05/word-image-5368-768x359.png 768w, /wp-content/uploads/2018/05/word-image-5368-1024x478.png 1024w" sizes="(max-width: 1359px) 100vw, 1359px" /></p>
<h2>1、列表功能（模板文件：admin-permission.html）</h2>
<h3>1）显示页面</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1176" height="256" src="/wp-content/uploads/2018/05/word-image-5369.png" class="wp-image-5909" srcset="/wp-content/uploads/2018/05/word-image-5369.png 1176w, /wp-content/uploads/2018/05/word-image-5369-300x65.png 300w, /wp-content/uploads/2018/05/word-image-5369-768x167.png 768w, /wp-content/uploads/2018/05/word-image-5369-1024x223.png 1024w" sizes="(max-width: 1176px) 100vw, 1176px" /></p>
<ul>
<li>
    步骤2：创建控制器方法 并 加载视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="841" height="510" src="/wp-content/uploads/2018/05/word-image-5370.png" class="wp-image-5910" srcset="/wp-content/uploads/2018/05/word-image-5370.png 841w, /wp-content/uploads/2018/05/word-image-5370-300x182.png 300w, /wp-content/uploads/2018/05/word-image-5370-768x466.png 768w" sizes="(max-width: 841px) 100vw, 841px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1109" height="593" src="/wp-content/uploads/2018/05/word-image-5371.png" class="wp-image-5911" srcset="/wp-content/uploads/2018/05/word-image-5371.png 1109w, /wp-content/uploads/2018/05/word-image-5371-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5371-768x411.png 768w, /wp-content/uploads/2018/05/word-image-5371-1024x548.png 1024w" sizes="(max-width: 1109px) 100vw, 1109px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：修改路由（客户端分页）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="892" height="105" src="/wp-content/uploads/2018/05/word-image-5372.png" class="wp-image-5912" srcset="/wp-content/uploads/2018/05/word-image-5372.png 892w, /wp-content/uploads/2018/05/word-image-5372-300x35.png 300w, /wp-content/uploads/2018/05/word-image-5372-768x90.png 768w" sizes="(max-width: 892px) 100vw, 892px" /></p>
<ul>
<li>
    步骤2：修改视图，设置datatables插件
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1201" height="418" src="/wp-content/uploads/2018/05/word-image-5373.png" class="wp-image-5913" srcset="/wp-content/uploads/2018/05/word-image-5373.png 1201w, /wp-content/uploads/2018/05/word-image-5373-300x104.png 300w, /wp-content/uploads/2018/05/word-image-5373-768x267.png 768w, /wp-content/uploads/2018/05/word-image-5373-1024x356.png 1024w" sizes="(max-width: 1201px) 100vw, 1201px" /><br />
<img loading="lazy" decoding="async" width="921" height="669" src="/wp-content/uploads/2018/05/word-image-5374.png" class="wp-image-5914" srcset="/wp-content/uploads/2018/05/word-image-5374.png 921w, /wp-content/uploads/2018/05/word-image-5374-300x218.png 300w, /wp-content/uploads/2018/05/word-image-5374-768x558.png 768w" sizes="(max-width: 921px) 100vw, 921px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;专业管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 专业管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;专业名称&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜专业节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt; &lt;span class=&#8221;l&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加专业节点&#8217;,&#8217;admin-permission-add.html&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加专业节点&lt;/a&gt;&lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;7&#8243;&gt;专业节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p><strong>				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;200&#8243;&gt;封面&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;专业分类名称&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;专业名称&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;更新于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;创建于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;</strong>
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			&lt;!&#8211; &lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;1&#8243; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;1&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;栏目添加&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt; &#8211;&gt;
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p><strong>&lt;script type=&#8221;text/javascript&#8221;&gt;</strong>
</p>
<p><strong>//客户端分页大DD  服务端分页小DD</strong>
</p>
<p><strong>var table  = $(&#8216;table&#8217;).DataTable({</strong>
</p>
<p><strong>    //开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）</strong>
</p>
<p><strong>    //&#8221;serverSide&#8221;: true,</strong>
</p>
<p><strong>    ajax: {</strong>
</p>
<p><strong>        url: &#8220;{{ url(&#8216;admin/profession/index&#8217;) }}&#8221;,</strong>
</p>
<p><strong>        &#8220;type&#8221;: &#8220;post&#8221;,</strong>
</p>
<p><strong>        &#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },</strong>
</p>
<p><strong>        &#8220;data&#8221;: function (data) {</strong>
</p>
<p><strong>        }</strong>
</p>
<p><strong>    },</strong>
</p>
<p><strong>    //columns</strong>
</p>
<p><strong>    //作用：设置服务端返回数据填充规则</strong>
</p>
<p><strong>    //语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}</strong>
</p>
<p><strong>    &#8220;columns&#8221;: [</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;占位，复选框&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;id&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;img&#8221;,  defaultContent: &#8220;占位，图片&#8221; },</strong>
</p>
<p><strong>        // { &#8220;data&#8221;: &#8220;protype_id&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;protype.protype_name&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;profession_name&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;created_at&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;updated_at&#8221; },</strong>
</p>
<p><strong>        { &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;占位，操作&#8221; },</strong>
</p>
<p><strong>    ],</strong>
</p>
<p><strong>    //createdRow</strong>
</p>
<p><strong>    //作用：创建tr时回调</strong>
</p>
<p><strong>    //row:创建好的tr的dom对象</strong>
</p>
<p><strong>    //data:数据源，代表服务器端返回的每条记录的实体信息</strong>
</p>
<p><strong>    //dataIndex:数据源的索引号码</strong>
</p>
<p><strong>    &#8220;createdRow&#8221;: function(row, data, dataIndex) {</strong>
</p>
<p><strong>        //匹配每一行的第一列</strong>
</p>
<p><strong>        $(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)</strong>
</p>
<p><strong>        //匹配每一行的第八列</strong>
</p>
<p><strong>        if (data.img) {</strong>
</p>
<p><strong>            $(row).find(&#8220;td:eq(2)&#8221;).html(&#8216;&lt;img src=&#8217;+data.img+&#8217; width=&#8221;120&#8243; height=&#8221;60&#8243;&gt;&#8217;);</strong>
</p>
<p><strong>        } else {</strong>
</p>
<p><strong>            var defaultImg = &#8220;{{ asset(&#8216;img/default.png&#8217;) }}&#8221;;</strong>
</p>
<p><strong>            $(row).find(&#8220;td:eq(2)&#8221;).html(&#8216;&lt;img src=&#8221;&#8216;+defaultImg+'&#8221; width=&#8221;120&#8243; height=&#8221;60&#8243;&gt;&#8217;);</strong>
</p>
<p><strong>        }</strong>
</p>
<p><strong>        //匹配每一行的最后一列</strong>
</p>
<p><strong>        var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;</strong>
</p>
<p><strong>        $(row).find(&#8220;td:last&#8221;).html(lastHtml);</strong>
</p>
<p><strong>        //让每一行居中</strong>
</p>
<p><strong>        $(row).addClass(&#8216;text-c&#8217;);</strong>
</p>
<p><strong>    },</strong>
</p>
<p><strong>    // searching : false, 		 //禁用搜索</strong>
</p>
<p><strong>    bLengthChange: false,   //去掉每页显示多少条数据方法</strong>
</p>
<p><strong>    // iDisplayLength:2,	    //限制每页显示条数</strong>
</p>
<p><strong>});</strong>
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-专业-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-专业-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-专业-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤3：修改控制器方法响应数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="872" height="636" src="/wp-content/uploads/2018/05/word-image-5375.png" class="wp-image-5915" srcset="/wp-content/uploads/2018/05/word-image-5375.png 872w, /wp-content/uploads/2018/05/word-image-5375-300x219.png 300w, /wp-content/uploads/2018/05/word-image-5375-768x560.png 768w" sizes="(max-width: 872px) 100vw, 872px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Profession;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class ProfessionController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.查询所有数据
</p>
<p>
              $professions = Profession::with(&#8216;protype&#8217;)-&gt;get();
</p>
<p>
              //3.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;data&#8217; =&gt; $professions
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图
</p>
<p>
              return view(&#8216;admin.profession.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<p><img loading="lazy" decoding="async" width="873" height="607" src="/wp-content/uploads/2018/05/word-image-5376.png" class="wp-image-5916" srcset="/wp-content/uploads/2018/05/word-image-5376.png 873w, /wp-content/uploads/2018/05/word-image-5376-300x209.png 300w, /wp-content/uploads/2018/05/word-image-5376-768x534.png 768w" sizes="(max-width: 873px) 100vw, 873px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Profession extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;profession&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;profession_name&#8217;, &#8216;protype_id&#8217;, &#8216;img&#8217;, &#8216;profession_desc&#8217;];
</p>
<p>
     <strong> /**</strong>
</p>
<p><strong>     * 关联模型（1:1）</strong>
</p>
<p><strong>     * @return \Illuminate\Database\Eloquent\Builder|static</strong>
</p>
<p><strong>     */</strong>
</p>
<p><strong>    public function protype()</strong>
</p>
<p><strong>    {</strong>
</p>
<p><strong>        return $this-&gt;hasOne(&#8216;App\Http\Model\Protype&#8217;, &#8216;id&#8217;, &#8216;protype_id&#8217;);</strong>
</p>
<p><strong>    }</strong>
</p>
<p>
  }
</p>
<h1>三、课程管理</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1363" height="598" src="/wp-content/uploads/2018/05/word-image-5377.png" class="wp-image-5917" srcset="/wp-content/uploads/2018/05/word-image-5377.png 1363w, /wp-content/uploads/2018/05/word-image-5377-300x132.png 300w, /wp-content/uploads/2018/05/word-image-5377-768x337.png 768w, /wp-content/uploads/2018/05/word-image-5377-1024x449.png 1024w" sizes="(max-width: 1363px) 100vw, 1363px" /></p>
<h2>列表功能（模板文件：admin-permission.html）</h2>
<h3>1）显示页面</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="666" height="88" src="/wp-content/uploads/2018/05/word-image-5378.png" class="wp-image-5918" srcset="/wp-content/uploads/2018/05/word-image-5378.png 666w, /wp-content/uploads/2018/05/word-image-5378-300x40.png 300w" sizes="(max-width: 666px) 100vw, 666px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法并调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="799" height="372" src="/wp-content/uploads/2018/05/word-image-5379.png" class="wp-image-5919" srcset="/wp-content/uploads/2018/05/word-image-5379.png 799w, /wp-content/uploads/2018/05/word-image-5379-300x140.png 300w, /wp-content/uploads/2018/05/word-image-5379-768x358.png 768w" sizes="(max-width: 799px) 100vw, 799px" /></p>
<ul>
<li>
    步骤2：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1079" height="672" src="/wp-content/uploads/2018/05/word-image-5380.png" class="wp-image-5920" srcset="/wp-content/uploads/2018/05/word-image-5380.png 1079w, /wp-content/uploads/2018/05/word-image-5380-300x187.png 300w, /wp-content/uploads/2018/05/word-image-5380-768x478.png 768w, /wp-content/uploads/2018/05/word-image-5380-1024x638.png 1024w" sizes="(max-width: 1079px) 100vw, 1079px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：修改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="833" height="105" src="/wp-content/uploads/2018/05/word-image-5381.png" class="wp-image-5921" srcset="/wp-content/uploads/2018/05/word-image-5381.png 833w, /wp-content/uploads/2018/05/word-image-5381-300x38.png 300w, /wp-content/uploads/2018/05/word-image-5381-768x97.png 768w" sizes="(max-width: 833px) 100vw, 833px" /></p>
<ul>
<li>
    步骤2：修改视图，设置datatable
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1288" height="626" src="/wp-content/uploads/2018/05/word-image-5382.png" class="wp-image-5922" srcset="/wp-content/uploads/2018/05/word-image-5382.png 1288w, /wp-content/uploads/2018/05/word-image-5382-300x146.png 300w, /wp-content/uploads/2018/05/word-image-5382-768x373.png 768w, /wp-content/uploads/2018/05/word-image-5382-1024x498.png 1024w" sizes="(max-width: 1288px) 100vw, 1288px" /><br />
<img loading="lazy" decoding="async" width="794" height="670" src="/wp-content/uploads/2018/05/word-image-5383.png" class="wp-image-5923" srcset="/wp-content/uploads/2018/05/word-image-5383.png 794w, /wp-content/uploads/2018/05/word-image-5383-300x253.png 300w, /wp-content/uploads/2018/05/word-image-5383-768x648.png 768w" sizes="(max-width: 794px) 100vw, 794px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;课程管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 课程管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;课程名称&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜课程节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt; &lt;span class=&#8221;l&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加课程节点&#8217;,&#8217;admin-permission-add.html&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加课程节点&lt;/a&gt;&lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	<strong>&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;</strong>
</p>
<p><strong>		&lt;thead&gt;</strong>
</p>
<p><strong>			&lt;tr&gt;</strong>
</p>
<p><strong>				&lt;th scope=&#8221;col&#8221; colspan=&#8221;9&#8243;&gt;课程节点&lt;/th&gt;</strong>
</p>
<p><strong>			&lt;/tr&gt;</strong>
</p>
<p><strong>			&lt;tr class=&#8221;text-c&#8221;&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;封面地址&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;200&#8243;&gt;所属专业&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;课程名称&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;课程的价格&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;创建于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;更新于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;</strong>
</p>
<p><strong>			&lt;/tr&gt;</strong>
</p>
<p><strong>		&lt;/thead&gt;</strong>
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			&lt;!&#8211; &lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;1&#8243; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;1&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;栏目添加&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt; &#8211;&gt;
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p><strong>//客户端分页大DD  服务端分页小DD</strong>
</p>
<p><strong>var table  = $(&#8216;table&#8217;).dataTable({</strong>
</p>
<p><strong>	//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）</strong>
</p>
<p><strong>	&#8220;serverSide&#8221;: true,</strong>
</p>
<p><strong>	ajax: {</strong>
</p>
<p><strong>		url: &#8220;{{ url(&#8216;admin/course/index&#8217;) }}&#8221;,</strong>
</p>
<p><strong>		&#8220;type&#8221;: &#8220;post&#8221;,</strong>
</p>
<p><strong>		&#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },</strong>
</p>
<p><strong>		&#8220;data&#8221;: function (data) {</strong>
</p>
<p><strong>			// data.startTime = $(&#8216;#startTime&#8217;).val();</strong>
</p>
<p><strong>			// data.endTime = $(&#8216;#endTime&#8217;).val();</strong>
</p>
<p><strong>			// data.username = $(&#8216;#username&#8217;).val();</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>	},</strong>
</p>
<p><strong>	//作用：设置服务端返回数据填充规则</strong>
</p>
<p><strong>	//语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}</strong>
</p>
<p><strong>	&#8220;columns&#8221;: [</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;占位，复选框&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;id&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;img&#8221; },</strong>
</p>
<p><strong>		// { &#8220;data&#8221;: &#8220;profession_id&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;profession.profession_name&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;course_name&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;course_price&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;created_at&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;updated_at&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;占位，操作&#8221; },</strong>
</p>
<p><strong>	],</strong>
</p>
<p><strong>	//createdRow</strong>
</p>
<p><strong>	//作用：创建tr时回调</strong>
</p>
<p><strong>	//row:创建好的tr的dom对象</strong>
</p>
<p><strong>	//data:数据源，代表服务器端返回的每条记录的实体信息</strong>
</p>
<p><strong>	//dataIndex:数据源的索引号码</strong>
</p>
<p><strong>	&#8220;createdRow&#8221;: function(row, data, dataIndex) {</strong>
</p>
<p><strong>		//匹配每一行的第一列</strong>
</p>
<p><strong>		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)</strong>
</p>
<p><strong>        //匹配每一行的第二列</strong>
</p>
<p><strong>        if (data.img) {</strong>
</p>
<p><strong>            $(row).find(&#8220;td:eq(2)&#8221;).html(&#8216;&lt;img src=&#8217;+data.img+&#8217; width=&#8221;120&#8243; height=&#8221;60&#8243;&gt;&#8217;);</strong>
</p>
<p><strong>        } else {</strong>
</p>
<p><strong>            var defaultImg = &#8220;{{ asset(&#8216;img/default.png&#8217;) }}&#8221;;</strong>
</p>
<p><strong>            $(row).find(&#8220;td:eq(2)&#8221;).html(&#8216;&lt;img src=&#8221;&#8216;+defaultImg+'&#8221; width=&#8221;120&#8243; height=&#8221;60&#8243;&gt;&#8217;);</strong>
</p>
<p><strong>        }</strong>
</p>
<p><strong>		//匹配每一行的最后一列</strong>
</p>
<p><strong>		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;</strong>
</p>
<p><strong>		$(row).find(&#8220;td:last&#8221;).html(lastHtml);</strong>
</p>
<p><strong>        //让每一行居中</strong>
</p>
<p><strong>        $(row).addClass(&#8216;text-c&#8217;);</strong>
</p>
<p><strong>	},</strong>
</p>
<p><strong>	searching : false, 		 //禁用搜索</strong>
</p>
<p><strong>	bLengthChange: false,    //去掉每页显示多少条数据方法</strong>
</p>
<p><strong>    iDisplayLength:6,	 	 //限制每页显示条数</strong>
</p>
<p><strong>});</strong>
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-课程-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-课程-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-课程-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤3：修改控制器方法响应数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1253" height="664" src="/wp-content/uploads/2018/05/word-image-5384.png" class="wp-image-5924" srcset="/wp-content/uploads/2018/05/word-image-5384.png 1253w, /wp-content/uploads/2018/05/word-image-5384-300x159.png 300w, /wp-content/uploads/2018/05/word-image-5384-768x407.png 768w, /wp-content/uploads/2018/05/word-image-5384-1024x543.png 1024w" sizes="(max-width: 1253px) 100vw, 1253px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Course;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class CourseController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only([&#8216;start&#8217;, &#8216;length&#8217;, &#8216;draw&#8217;]);
</p>
<p>
              //3.查询数据
</p>
<p>
              $courses = Course::with(&#8216;profession&#8217;)-&gt;orderBy(&#8216;id&#8217;, &#8216;desc&#8217;);
</p>
<p>
              //4.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;draw&#8217; =&gt; (int)$postData[&#8216;draw&#8217;],       //必须，HTTP请求发送什么就响应什么
</p>
<p>
                  &#8216;recordsTotal&#8217; =&gt; Course::count(),       //必须，admin表总记录数
</p>
<p>
                  &#8216;recordsFiltered&#8217; =&gt; $courses-&gt;count(),  //必须，admin表总记录数（增加where条件）
</p>
<p>
                  &#8216;data&#8217; =&gt; $courses-&gt;offset($postData[&#8216;start&#8217;])-&gt;limit($postData[&#8216;length&#8217;])-&gt;get()
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图
</p>
<p>
              return view(&#8216;admin.course.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<p><img loading="lazy" decoding="async" width="970" height="635" src="/wp-content/uploads/2018/05/word-image-5385.png" class="wp-image-5925" srcset="/wp-content/uploads/2018/05/word-image-5385.png 970w, /wp-content/uploads/2018/05/word-image-5385-300x196.png 300w, /wp-content/uploads/2018/05/word-image-5385-768x503.png 768w" sizes="(max-width: 970px) 100vw, 970px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Course extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;course&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;course_name&#8217;, &#8216;profession_id&#8217;, &#8216;course_price&#8217;, &#8216;img&#8217;, &#8216;course_desc&#8217;];
</p>
<p>
     <strong> /**</strong>
</p>
<p><strong>     * 关联专业模型（1:1）</strong>
</p>
<p><strong>     * 语法：模型名::with（&#8217;role&#8217;）-&gt;first()</strong>
</p>
<p><strong>     * @return \Illuminate\Database\Eloquent\Relations\HasOne</strong>
</p>
<p><strong>     */</strong>
</p>
<p><strong>    public function profession()</strong>
</p>
<p><strong>    {</strong>
</p>
<p><strong>        #return $this-&gt;hasOne(关联模型名，关联模型公共字段，本模型公共字段)</strong>
</p>
<p><strong>        return $this-&gt;hasOne(&#8216;App\Http\Model\Profession&#8217;,&#8217;id&#8217;, &#8216;profession_id&#8217;);</strong>
</p>
<p><strong>    }</strong>
</p>
<p>
  }
</p>
<h1>四、课时管理（点播）</h1>
<h2>︴效果</h2>
<p>
  列表
</p>
<p><img loading="lazy" decoding="async" width="1351" height="676" src="/wp-content/uploads/2018/05/word-image-5386.png" class="wp-image-5926" srcset="/wp-content/uploads/2018/05/word-image-5386.png 1351w, /wp-content/uploads/2018/05/word-image-5386-300x150.png 300w, /wp-content/uploads/2018/05/word-image-5386-768x384.png 768w, /wp-content/uploads/2018/05/word-image-5386-1024x512.png 1024w" sizes="(max-width: 1351px) 100vw, 1351px" /></p>
<p>
  播放
</p>
<p><img loading="lazy" decoding="async" width="1316" height="682" src="/wp-content/uploads/2018/05/word-image-5387.png" class="wp-image-5927" srcset="/wp-content/uploads/2018/05/word-image-5387.png 1316w, /wp-content/uploads/2018/05/word-image-5387-300x155.png 300w, /wp-content/uploads/2018/05/word-image-5387-768x398.png 768w, /wp-content/uploads/2018/05/word-image-5387-1024x531.png 1024w" sizes="(max-width: 1316px) 100vw, 1316px" /></p>
<h2>列表功能（模板文件：admin-permission.html）</h2>
<h3>1）显示页面</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="989" height="269" src="/wp-content/uploads/2018/05/word-image-5388.png" class="wp-image-5928" srcset="/wp-content/uploads/2018/05/word-image-5388.png 989w, /wp-content/uploads/2018/05/word-image-5388-300x82.png 300w, /wp-content/uploads/2018/05/word-image-5388-768x209.png 768w" sizes="(max-width: 989px) 100vw, 989px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法、并且调用视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="661" height="431" src="/wp-content/uploads/2018/05/word-image-5389.png" class="wp-image-5929" srcset="/wp-content/uploads/2018/05/word-image-5389.png 661w, /wp-content/uploads/2018/05/word-image-5389-300x196.png 300w" sizes="(max-width: 661px) 100vw, 661px" /></p>
<ul>
<li>
    步骤3：加载视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1016" height="636" src="/wp-content/uploads/2018/05/word-image-5390.png" class="wp-image-5930" srcset="/wp-content/uploads/2018/05/word-image-5390.png 1016w, /wp-content/uploads/2018/05/word-image-5390-300x188.png 300w, /wp-content/uploads/2018/05/word-image-5390-768x481.png 768w" sizes="(max-width: 1016px) 100vw, 1016px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：修改路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1129" height="344" src="/wp-content/uploads/2018/05/word-image-5391.png" class="wp-image-5931" srcset="/wp-content/uploads/2018/05/word-image-5391.png 1129w, /wp-content/uploads/2018/05/word-image-5391-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5391-768x234.png 768w, /wp-content/uploads/2018/05/word-image-5391-1024x312.png 1024w" sizes="(max-width: 1129px) 100vw, 1129px" /></p>
<ul>
<li>
    步骤2：修改视图，设置datatables
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1214" height="611" src="/wp-content/uploads/2018/05/word-image-5392.png" class="wp-image-5932" srcset="/wp-content/uploads/2018/05/word-image-5392.png 1214w, /wp-content/uploads/2018/05/word-image-5392-300x151.png 300w, /wp-content/uploads/2018/05/word-image-5392-768x387.png 768w, /wp-content/uploads/2018/05/word-image-5392-1024x515.png 1024w" sizes="(max-width: 1214px) 100vw, 1214px" /><br />
<img loading="lazy" decoding="async" width="870" height="700" src="/wp-content/uploads/2018/05/word-image-5393.png" class="wp-image-5933" srcset="/wp-content/uploads/2018/05/word-image-5393.png 870w, /wp-content/uploads/2018/05/word-image-5393-300x241.png 300w, /wp-content/uploads/2018/05/word-image-5393-768x618.png 768w" sizes="(max-width: 870px) 100vw, 870px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;课时管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 课时管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;课时名称&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜课时节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt; &lt;span class=&#8221;l&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除&lt;/a&gt; &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加课时节点&#8217;,&#8217;admin-permission-add.html&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加课时节点&lt;/a&gt;&lt;/span&gt; &lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	<strong>&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;</strong>
</p>
<p><strong>		&lt;thead&gt;</strong>
</p>
<p><strong>			&lt;tr&gt;</strong>
</p>
<p><strong>				&lt;th scope=&#8221;col&#8221; colspan=&#8221;11&#8243;&gt;课时节点&lt;/th&gt;</strong>
</p>
<p><strong>			&lt;/tr&gt;</strong>
</p>
<p><strong>			&lt;tr class=&#8221;text-c&#8221;&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;40&#8243;&gt;封面图&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;所属课程&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;课时名称&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;预览视频&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;播放时间/s&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;讲师&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;状态&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;创建于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th&gt;更新于&lt;/th&gt;</strong>
</p>
<p><strong>				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;</strong>
</p>
<p><strong>			&lt;/tr&gt;</strong>
</p>
<p><strong>		&lt;/thead&gt;</strong>
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			&lt;!&#8211; &lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;1&#8243; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;1&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;栏目添加&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt; &#8211;&gt;
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p><strong>//客户端分页大DD  服务端分页小DD</strong>
</p>
<p><strong>var table  = $(&#8216;table&#8217;).dataTable({</strong>
</p>
<p><strong>	//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）</strong>
</p>
<p><strong>	&#8220;serverSide&#8221;: true,</strong>
</p>
<p><strong>	ajax: {</strong>
</p>
<p><strong>		url: &#8220;{{ url(&#8216;admin/lesson/index&#8217;) }}&#8221;,</strong>
</p>
<p><strong>		&#8220;type&#8221;: &#8220;post&#8221;,</strong>
</p>
<p><strong>		&#8216;headers&#8217;: { &#8216;X-CSRF-TOKEN&#8217; : &#8216;{{ csrf_token() }}&#8217; },</strong>
</p>
<p><strong>		&#8220;data&#8221;: function (data) {</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>	},</strong>
</p>
<p><strong>	//作用：设置服务端返回数据填充规则</strong>
</p>
<p><strong>	//语法：{&#8220;data&#8221;: &#8220;键&#8221;，&#8221;defaultContent&#8221;: &#8220;默认值&#8221;}</strong>
</p>
<p><strong>	&#8220;columns&#8221;: [</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp1&#8221;,  defaultContent: &#8220;占位，复选框&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;id&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;img&#8221; },</strong>
</p>
<p><strong>		// { &#8220;data&#8221;: &#8220;course_id&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;course.course_name&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;lesson_name&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp3&#8221;,  defaultContent: &#8220;占位，播放按钮&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;video_time&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;teacher_name&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;state&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;created_at&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;updated_at&#8221; },</strong>
</p>
<p><strong>		{ &#8220;data&#8221;: &#8220;tmp2&#8221;, defaultContent: &#8220;占位，操作&#8221; },</strong>
</p>
<p><strong>	],</strong>
</p>
<p><strong>	//createdRow</strong>
</p>
<p><strong>	//作用：创建tr时回调</strong>
</p>
<p><strong>	//row:创建好的tr的dom对象</strong>
</p>
<p><strong>	//data:数据源，代表服务器端返回的每条记录的实体信息</strong>
</p>
<p><strong>	//dataIndex:数据源的索引号码</strong>
</p>
<p><strong>	&#8220;createdRow&#8221;: function(row, data, dataIndex) {</strong>
</p>
<p><strong>		//匹配每一行的第一列</strong>
</p>
<p><strong>		$(row).find(&#8220;td:first&#8221;).html(&#8220;&lt;input type=&#8217;checkbox&#8217; name=&#8217;choose[]&#8217; value='&#8221;+data.id+&#8221;&#8216; /&gt;&#8221;)</strong>
</p>
<p><strong>        //匹配每一行的第二列</strong>
</p>
<p><strong>        if (data.img) {</strong>
</p>
<p><strong>            $(row).find(&#8220;td:eq(2)&#8221;).html(&#8216;&lt;img src=&#8217;+data.img+&#8217; width=&#8221;120&#8243; height=&#8221;60&#8243;&gt;&#8217;);</strong>
</p>
<p><strong>        } else {</strong>
</p>
<p><strong>            var defaultImg = &#8220;{{ asset(&#8216;img/default.png&#8217;) }}&#8221;;</strong>
</p>
<p><strong>            $(row).find(&#8220;td:eq(2)&#8221;).html(&#8216;&lt;img src=&#8221;&#8216;+defaultImg+'&#8221; width=&#8221;120&#8243; height=&#8221;60&#8243;&gt;&#8217;);</strong>
</p>
<p><strong>        }</strong>
</p>
<p><strong>        //预览播放按钮</strong>
</p>
<p><strong>        $(row).find(&#8220;td:eq(5)&#8221;).html(&#8216;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e6;&lt;/i&gt;播放&lt;/a&gt;&#8217;);</strong>
</p>
<p><strong>        if (data.state == 1) {</strong>
</p>
<p><strong>			$(row).find(&#8220;td:eq(8)&#8221;).html(&#8216;&lt;span class=&#8221;label label-success radius&#8221;&gt;已启用&lt;/span&gt;&#8217;);</strong>
</p>
<p><strong>		} else {</strong>
</p>
<p><strong>			$(row).find(&#8220;td:eq(8)&#8221;).html(&#8216;&lt;span class=&#8221;label radius&#8221;&gt;已停用&lt;/span&gt;&#8217;);</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>		//匹配每一行的最后一列</strong>
</p>
<p><strong>		var lastHtml = &#8216;&lt;a style=&#8221;text-decoration:none&#8221; onClick=&#8221;admin_start(this,10001)&#8221; href=&#8221;javascript:;&#8221; title=&#8221;启用&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe615;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_edit(\&#8217;管理员编辑\&#8217;,\&#8217;admin-add.html\&#8217;,2,800,500)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_del(this,1)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&#8217;;</strong>
</p>
<p><strong>		$(row).find(&#8220;td:last&#8221;).html(lastHtml);</strong>
</p>
<p><strong>        //让每一行居中</strong>
</p>
<p><strong>        $(row).addClass(&#8216;text-c&#8217;);</strong>
</p>
<p><strong>	},</strong>
</p>
<p><strong>	searching : false, 		 //禁用搜索</strong>
</p>
<p><strong>	bLengthChange: false,    //去掉每页显示多少条数据方法</strong>
</p>
<p><strong>    iDisplayLength:6,	 	 //限制每页显示条数</strong>
</p>
<p><strong>});</strong>
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-课时-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-课时-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-课时-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤1：修改控制器方法响应数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1131" height="654" src="/wp-content/uploads/2018/05/word-image-5394.png" class="wp-image-5934" srcset="/wp-content/uploads/2018/05/word-image-5394.png 1131w, /wp-content/uploads/2018/05/word-image-5394-300x173.png 300w, /wp-content/uploads/2018/05/word-image-5394-768x444.png 768w, /wp-content/uploads/2018/05/word-image-5394-1024x592.png 1024w" sizes="(max-width: 1131px) 100vw, 1131px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Lesson;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class LessonController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only([&#8216;start&#8217;, &#8216;length&#8217;, &#8216;draw&#8217;]);
</p>
<p>
              //3.查询数据
</p>
<p>
              $courses = Lesson::with(&#8216;course&#8217;)-&gt;orderBy(&#8216;id&#8217;, &#8216;desc&#8217;);
</p>
<p>
              //4.响应json数据
</p>
<p>
              return response()-&gt;json([
</p>
<p>
                  &#8216;draw&#8217; =&gt; (int)$postData[&#8216;draw&#8217;],       //必须，HTTP请求发送什么就响应什么
</p>
<p>
                  &#8216;recordsTotal&#8217; =&gt; Lesson::count(),       //必须，admin表总记录数
</p>
<p>
                  &#8216;recordsFiltered&#8217; =&gt; $courses-&gt;count(),  //必须，admin表总记录数（增加where条件）
</p>
<p>
                  &#8216;data&#8217; =&gt; $courses-&gt;offset($postData[&#8216;start&#8217;])-&gt;limit($postData[&#8216;length&#8217;])-&gt;get()
</p>
<p>
              ]);
</p>
<p>
          } else {
</p>
<p>
              //2.加载视图
</p>
<p>
              return view(&#8216;admin.lesson.index&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h2>列表播放功能</h2>
<h3>1）思路</h3>
<ul>
<li>
    步骤1：用户点击播放按钮弹框，打开admin/lesson/play页面（注：
  </li>
</ul>
<p>
  播放视频地址url，如：admin/lesson/play?video=xxxx.mp3）
</p>
<ul>
<li>
    步骤2：控制器方法 echo html播放标签即可
  </li>
</ul>
<p>
  &lt;video src=&#8221;/i/movie.ogg&#8221; controls=&#8221;controls&#8221;&gt;
</p>
<p>
  your browser does not support the video tag
</p>
<p>
  &lt;/video&gt;
</p>
<h3>代码步骤</h3>
<ul>
<li>
    步骤1：绑定点击事件，点击后打开弹框（弹框加载页面）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1225" height="316" src="/wp-content/uploads/2018/05/word-image-5395.png" class="wp-image-5935" srcset="/wp-content/uploads/2018/05/word-image-5395.png 1225w, /wp-content/uploads/2018/05/word-image-5395-300x77.png 300w, /wp-content/uploads/2018/05/word-image-5395-768x198.png 768w, /wp-content/uploads/2018/05/word-image-5395-1024x264.png 1024w" sizes="(max-width: 1225px) 100vw, 1225px" /><br />
<img loading="lazy" decoding="async" width="689" height="260" src="/wp-content/uploads/2018/05/word-image-5396.png" class="wp-image-5936" srcset="/wp-content/uploads/2018/05/word-image-5396.png 689w, /wp-content/uploads/2018/05/word-image-5396-300x113.png 300w" sizes="(max-width: 689px) 100vw, 689px" /></p>
<p>
   //预览播放按钮
</p>
<p>
          var playurl = &#8220;{{ url(&#8216;admin/lesson/play&#8217;) }}?video=&#8221; + data.video_address;
</p>
<p>
          $(row).find(&#8220;td:eq(5)&#8221;).html(&#8216;&lt;a href=&#8221;javascript:;&#8221; onclick=video_play(&#8220;&#8216;+data.lesson_name+&#8217;预览&#8221;,&#8221;&#8216;+playurl+'&#8221;,800,450) class=&#8221;btn btn-primary radius&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e6;&lt;/i&gt;播放&lt;/a&gt;&#8217;);
</p>
<p>
  /*管理员-课时-播放*/
</p>
<p>
  function video_play(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：设置路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1089" height="158" src="/wp-content/uploads/2018/05/word-image-5397.png" class="wp-image-5937" srcset="/wp-content/uploads/2018/05/word-image-5397.png 1089w, /wp-content/uploads/2018/05/word-image-5397-300x44.png 300w, /wp-content/uploads/2018/05/word-image-5397-768x111.png 768w, /wp-content/uploads/2018/05/word-image-5397-1024x149.png 1024w" sizes="(max-width: 1089px) 100vw, 1089px" /></p>
<ul>
<li>
    步骤3：常见控制器方法获取播放地址
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1276" height="270" src="/wp-content/uploads/2018/05/word-image-5398.png" class="wp-image-5938" srcset="/wp-content/uploads/2018/05/word-image-5398.png 1276w, /wp-content/uploads/2018/05/word-image-5398-300x63.png 300w, /wp-content/uploads/2018/05/word-image-5398-768x163.png 768w, /wp-content/uploads/2018/05/word-image-5398-1024x217.png 1024w" sizes="(max-width: 1276px) 100vw, 1276px" /></p>
<p>
  //点播
</p>
<p>
  public function play(Request $request)
</p>
<p>
  {
</p>
<p>
      //1.接受播放地址
</p>
<p>
      //dd(asset(&#8216;img/default.mp4&#8217;));
</p>
<p>
      $video_addr = $request-&gt;input(&#8216;video&#8217;) ? $request-&gt;input(&#8216;video&#8217;) : asset(&#8216;img/default.mp4&#8217;);
</p>
<p>
      echo &#8220;&lt;video width=&#8217;100%&#8217; height=&#8217;390&#8242; src='{$video_addr}&#8217; autoplay controls=&#8217;controls&#8217;&gt;
</p>
<p>
      您的浏览器不支持 video 标签。
</p>
<p>
      &lt;/video&gt;&#8221;;
</p>
<p>
  }
</p>
<h1>︴完善</h1>
<h2>左侧菜单</h2>
<p><img loading="lazy" decoding="async" width="787" height="578" src="/wp-content/uploads/2018/05/word-image-5399.png" class="wp-image-5939" srcset="/wp-content/uploads/2018/05/word-image-5399.png 787w, /wp-content/uploads/2018/05/word-image-5399-300x220.png 300w, /wp-content/uploads/2018/05/word-image-5399-768x564.png 768w" sizes="(max-width: 787px) 100vw, 787px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;Bookmark&#8221; href=&#8221;/favicon.ico&#8221; &gt;
</p>
<p>
  &lt;link rel=&#8221;Shortcut Icon&#8221; href=&#8221;/favicon.ico&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;header class=&#8221;navbar-wrapper&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;navbar navbar-fixed-top&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;container-fluid cl&#8221;&gt; &lt;a class=&#8221;logo navbar-logo f-l mr-10 hidden-xs&#8221; href=&#8221;/aboutHui.shtml&#8221;&gt;H-ui.admin&lt;/a&gt; &lt;a class=&#8221;logo navbar-logo-m f-l mr-10 visible-xs&#8221; href=&#8221;/aboutHui.shtml&#8221;&gt;H-ui&lt;/a&gt;
</p>
<p>
  			&lt;span class=&#8221;logo navbar-slogan f-l mr-10 hidden-xs&#8221;&gt;v3.1&lt;/span&gt;
</p>
<p>
  			&lt;a aria-hidden=&#8221;false&#8221; class=&#8221;nav-toggle Hui-iconfont visible-xs&#8221; href=&#8221;javascript:;&#8221;&gt;&amp;#xe667;&lt;/a&gt;
</p>
<p>
  			&lt;nav class=&#8221;nav navbar-nav&#8221;&gt;
</p>
<p>
  				&lt;ul class=&#8221;cl&#8221;&gt;
</p>
<p>
  					&lt;li class=&#8221;dropDown dropDown_hover&#8221;&gt;&lt;a href=&#8221;javascript:;&#8221; class=&#8221;dropDown_A&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 新增 &lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/a&gt;
</p>
<p>
  						&lt;ul class=&#8221;dropDown-menu menu radius box-shadow&#8221;&gt;
</p>
<p>
  							&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;article_add(&#8216;添加资讯&#8217;,&#8217;article-add.html&#8217;)&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe616;&lt;/i&gt; 资讯&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  							&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;picture_add(&#8216;添加资讯&#8217;,&#8217;picture-add.html&#8217;)&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe613;&lt;/i&gt; 图片&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  							&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;product_add(&#8216;添加资讯&#8217;,&#8217;product-add.html&#8217;)&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe620;&lt;/i&gt; 产品&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  							&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;member_add(&#8216;添加用户&#8217;,&#8217;member-add.html&#8217;,&#8221;,&#8217;510&#8242;)&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe60d;&lt;/i&gt; 用户&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;/ul&gt;
</p>
<p>
  				&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/nav&gt;
</p>
<p>
  		&lt;nav id=&#8221;Hui-userbar&#8221; class=&#8221;nav navbar-nav navbar-userbar hidden-xs&#8221;&gt;
</p>
<p>
  			&lt;ul class=&#8221;cl&#8221;&gt;
</p>
<p>
  				&lt;li&gt;{{ Auth::guard(&#8216;admin&#8217;)-&gt;user()-&gt;role()-&gt;first()-&gt;role_name }} &lt;/li&gt;
</p>
<p>
  				&lt;li class=&#8221;dropDown dropDown_hover&#8221;&gt;
</p>
<p>
  					&lt;a href=&#8221;#&#8221; class=&#8221;dropDown_A&#8221;&gt;{{ Auth::guard(&#8216;admin&#8217;)-&gt;user()-&gt;username }} &lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/a&gt;
</p>
<p>
  					&lt;ul class=&#8221;dropDown-menu menu radius box-shadow&#8221;&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; onClick=&#8221;myselfinfo()&#8221;&gt;个人信息&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;#&#8221;&gt;切换账户&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;{{ url(&#8216;admin/loginout&#8217;) }}&#8221;&gt;退出&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  				&lt;/ul&gt;
</p>
<p>
  			&lt;/li&gt;
</p>
<p>
  				&lt;li id=&#8221;Hui-msg&#8221;&gt; &lt;a href=&#8221;#&#8221; title=&#8221;消息&#8221;&gt;&lt;span class=&#8221;badge badge-danger&#8221;&gt;1&lt;/span&gt;&lt;i class=&#8221;Hui-iconfont&#8221; style=&#8221;font-size:18px&#8221;&gt;&amp;#xe68a;&lt;/i&gt;&lt;/a&gt; &lt;/li&gt;
</p>
<p>
  				&lt;li id=&#8221;Hui-skin&#8221; class=&#8221;dropDown right dropDown_hover&#8221;&gt; &lt;a href=&#8221;javascript:;&#8221; class=&#8221;dropDown_A&#8221; title=&#8221;换肤&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221; style=&#8221;font-size:18px&#8221;&gt;&amp;#xe62a;&lt;/i&gt;&lt;/a&gt;
</p>
<p>
  					&lt;ul class=&#8221;dropDown-menu menu radius box-shadow&#8221;&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; data-val=&#8221;default&#8221; title=&#8221;默认（黑色）&#8221;&gt;默认（黑色）&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; data-val=&#8221;blue&#8221; title=&#8221;蓝色&#8221;&gt;蓝色&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; data-val=&#8221;green&#8221; title=&#8221;绿色&#8221;&gt;绿色&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; data-val=&#8221;red&#8221; title=&#8221;红色&#8221;&gt;红色&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; data-val=&#8221;yellow&#8221; title=&#8221;黄色&#8221;&gt;黄色&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  						&lt;li&gt;&lt;a href=&#8221;javascript:;&#8221; data-val=&#8221;orange&#8221; title=&#8221;橙色&#8221;&gt;橙色&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;/ul&gt;
</p>
<p>
  				&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/nav&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;/header&gt;
</p>
<p>
  &lt;aside class=&#8221;Hui-aside&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;menu_dropdown bk_2&#8243;&gt;
</p>
<p>
  		<strong>&lt;dl id=&#8221;menu-article&#8221;&gt;</strong>
</p>
<p><strong>			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe616;&lt;/i&gt;专业分类管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;</strong>
</p>
<p><strong>			&lt;dd&gt;</strong>
</p>
<p><strong>				&lt;ul&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/protype/index&#8217;) }}&#8221; data-title=&#8221;资讯管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;分类管理&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/profession/index&#8217;) }}&#8221; data-title=&#8221;资讯管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;专业管理&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>			&lt;/ul&gt;</strong>
</p>
<p><strong>		&lt;/dd&gt;</strong>
</p>
<p><strong>	&lt;/dl&gt;</strong>
</p>
<p><strong>		&lt;dl id=&#8221;menu-product&#8221;&gt;</strong>
</p>
<p><strong>			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe620;&lt;/i&gt;课程课时管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;</strong>
</p>
<p><strong>			&lt;dd&gt;</strong>
</p>
<p><strong>				&lt;ul&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/course/index&#8217;) }}&#8221; data-title=&#8221;课程管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;课程管理&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/lesson/index&#8217;) }}&#8221; data-title=&#8221;课时管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;课时管理&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>			&lt;/ul&gt;</strong>
</p>
<p><strong>		&lt;/dd&gt;</strong>
</p>
<p><strong>	&lt;/dl&gt;</strong>
</p>
<p><strong>		&lt;dl id=&#8221;menu-admin&#8221;&gt;</strong>
</p>
<p><strong>			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe62d;&lt;/i&gt;管理员管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;</strong>
</p>
<p><strong>			&lt;dd&gt;</strong>
</p>
<p><strong>				&lt;ul&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/role/index&#8217;) }}&#8221; data-title=&#8221;角色管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;角色管理&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/auth/index&#8217;) }}&#8221; data-title=&#8221;权限管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;权限管理&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>					&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/admin/index&#8217;) }}&#8221; data-title=&#8221;管理员列表&#8221; href=&#8221;javascript:void(0)&#8221;&gt;管理员列表&lt;/a&gt;&lt;/li&gt;</strong>
</p>
<p><strong>			&lt;/ul&gt;</strong>
</p>
<p><strong>		&lt;/dd&gt;</strong>
</p>
<p><strong>	&lt;/dl&gt;</strong>
</p>
<p>
  		&lt;dl id=&#8221;menu-picture&#8221;&gt;
</p>
<p>
  			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe613;&lt;/i&gt; 图片管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				&lt;ul&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;picture-list.html&#8221; data-title=&#8221;图片管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;图片管理&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/dd&gt;
</p>
<p>
  	&lt;/dl&gt;
</p>
<p>
  		&lt;dl id=&#8221;menu-comments&#8221;&gt;
</p>
<p>
  			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe622;&lt;/i&gt; 评论管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				&lt;ul&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;http://h-ui.duoshuo.com/admin/&#8221; data-title=&#8221;评论列表&#8221; href=&#8221;javascript:;&#8221;&gt;评论列表&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;feedback-list.html&#8221; data-title=&#8221;意见反馈&#8221; href=&#8221;javascript:void(0)&#8221;&gt;意见反馈&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/dd&gt;
</p>
<p>
  	&lt;/dl&gt;
</p>
<p>
  		&lt;dl id=&#8221;menu-member&#8221;&gt;
</p>
<p>
  			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe60d;&lt;/i&gt; 会员管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				&lt;ul&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-list.html&#8221; data-title=&#8221;会员列表&#8221; href=&#8221;javascript:;&#8221;&gt;会员列表&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-del.html&#8221; data-title=&#8221;删除的会员&#8221; href=&#8221;javascript:;&#8221;&gt;删除的会员&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-level.html&#8221; data-title=&#8221;等级管理&#8221; href=&#8221;javascript:;&#8221;&gt;等级管理&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-scoreoperation.html&#8221; data-title=&#8221;积分管理&#8221; href=&#8221;javascript:;&#8221;&gt;积分管理&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-record-browse.html&#8221; data-title=&#8221;浏览记录&#8221; href=&#8221;javascript:void(0)&#8221;&gt;浏览记录&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-record-download.html&#8221; data-title=&#8221;下载记录&#8221; href=&#8221;javascript:void(0)&#8221;&gt;下载记录&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;member-record-share.html&#8221; data-title=&#8221;分享记录&#8221; href=&#8221;javascript:void(0)&#8221;&gt;分享记录&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/dd&gt;
</p>
<p>
  	&lt;/dl&gt;
</p>
<p>
  		&lt;dl id=&#8221;menu-tongji&#8221;&gt;
</p>
<p>
  			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe61a;&lt;/i&gt; 系统统计&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				&lt;ul&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-1.html&#8221; data-title=&#8221;折线图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;折线图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-2.html&#8221; data-title=&#8221;时间轴折线图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;时间轴折线图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-3.html&#8221; data-title=&#8221;区域图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;区域图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-4.html&#8221; data-title=&#8221;柱状图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;柱状图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-5.html&#8221; data-title=&#8221;饼状图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;饼状图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-6.html&#8221; data-title=&#8221;3D柱状图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;3D柱状图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;charts-7.html&#8221; data-title=&#8221;3D饼状图&#8221; href=&#8221;javascript:void(0)&#8221;&gt;3D饼状图&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/dd&gt;
</p>
<p>
  	&lt;/dl&gt;
</p>
<p>
  		&lt;dl id=&#8221;menu-system&#8221;&gt;
</p>
<p>
  			&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe62e;&lt;/i&gt; 系统管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;
</p>
<p>
  			&lt;dd&gt;
</p>
<p>
  				&lt;ul&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;system-base.html&#8221; data-title=&#8221;系统设置&#8221; href=&#8221;javascript:void(0)&#8221;&gt;系统设置&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;system-category.html&#8221; data-title=&#8221;栏目管理&#8221; href=&#8221;javascript:void(0)&#8221;&gt;栏目管理&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;system-data.html&#8221; data-title=&#8221;数据字典&#8221; href=&#8221;javascript:void(0)&#8221;&gt;数据字典&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;system-shielding.html&#8221; data-title=&#8221;屏蔽词&#8221; href=&#8221;javascript:void(0)&#8221;&gt;屏蔽词&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  					&lt;li&gt;&lt;a data-href=&#8221;system-log.html&#8221; data-title=&#8221;系统日志&#8221; href=&#8221;javascript:void(0)&#8221;&gt;系统日志&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  			&lt;/ul&gt;
</p>
<p>
  		&lt;/dd&gt;
</p>
<p>
  	&lt;/dl&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;/aside&gt;
</p>
<p>
  &lt;div class=&#8221;dislpayArrow hidden-xs&#8221;&gt;&lt;a class=&#8221;pngfix&#8221; href=&#8221;javascript:void(0);&#8221; onClick=&#8221;displaynavbar(this)&#8221;&gt;&lt;/a&gt;&lt;/div&gt;
</p>
<p>
  &lt;section class=&#8221;Hui-article-box&#8221;&gt;
</p>
<p>
  	&lt;div id=&#8221;Hui-tabNav&#8221; class=&#8221;Hui-tabNav hidden-xs&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;Hui-tabNav-wp&#8221;&gt;
</p>
<p>
  			&lt;ul id=&#8221;min_title_list&#8221; class=&#8221;acrossTab cl&#8221;&gt;
</p>
<p>
  				&lt;li class=&#8221;active&#8221;&gt;
</p>
<p>
  					&lt;span title=&#8221;我的桌面&#8221; data-href=&#8221;welcome.html&#8221;&gt;我的桌面&lt;/span&gt;
</p>
<p>
  					&lt;em&gt;&lt;/em&gt;&lt;/li&gt;
</p>
<p>
  		&lt;/ul&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;Hui-tabNav-more btn-group&#8221;&gt;&lt;a id=&#8221;js-tabNav-prev&#8221; class=&#8221;btn radius btn-default size-S&#8221; href=&#8221;javascript:;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6d4;&lt;/i&gt;&lt;/a&gt;&lt;a id=&#8221;js-tabNav-next&#8221; class=&#8221;btn radius btn-default size-S&#8221; href=&#8221;javascript:;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6d7;&lt;/i&gt;&lt;/a&gt;&lt;/div&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  	&lt;div id=&#8221;iframe_box&#8221; class=&#8221;Hui-article&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;show_iframe&#8221;&gt;
</p>
<p>
  			&lt;div style=&#8221;display:none&#8221; class=&#8221;loading&#8221;&gt;&lt;/div&gt;
</p>
<p>
  			&lt;iframe scrolling=&#8221;yes&#8221; frameborder=&#8221;0&#8243; src=&#8221;{{ url(&#8216;admin/index/welcome&#8217;) }}&#8221;&gt;&lt;/iframe&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;/section&gt;
</p>
<p>
  &lt;div class=&#8221;contextMenu&#8221; id=&#8221;Huiadminmenu&#8221;&gt;
</p>
<p>
  	&lt;ul&gt;
</p>
<p>
  		&lt;li id=&#8221;closethis&#8221;&gt;关闭当前 &lt;/li&gt;
</p>
<p>
  		&lt;li id=&#8221;closeall&#8221;&gt;关闭全部 &lt;/li&gt;
</p>
<p>
  &lt;/ul&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.contextmenu/jquery.contextmenu.r2.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	/*$(&#8220;#min_title_list li&#8221;).contextMenu(&#8216;Huiadminmenu&#8217;, {
</p>
<p>
  		bindings: {
</p>
<p>
  			&#8216;closethis&#8217;: function(t) {
</p>
<p>
  				console.log(t);
</p>
<p>
  				if(t.find(&#8220;i&#8221;)){
</p>
<p>
  					t.find(&#8220;i&#8221;).trigger(&#8220;click&#8221;);
</p>
<p>
  				}
</p>
<p>
  			},
</p>
<p>
  			&#8216;closeall&#8217;: function(t) {
</p>
<p>
  				alert(&#8216;Trigger was &#8216;+t.id+&#8217;\nAction was Email&#8217;);
</p>
<p>
  			},
</p>
<p>
  		}
</p>
<p>
  	});*/
</p>
<p>
  });
</p>
<p>
  /*个人信息*/
</p>
<p>
  function myselfinfo(){
</p>
<p>
  	layer.open({
</p>
<p>
  		type: 1,
</p>
<p>
  		area: [&#8216;300px&#8217;,&#8217;200px&#8217;],
</p>
<p>
  		fix: false, //不固定
</p>
<p>
  		maxmin: true,
</p>
<p>
  		shade:0.4,
</p>
<p>
  		title: &#8216;查看信息&#8217;,
</p>
<p>
  		content: &#8216;&lt;div&gt;管理员信息&lt;/div&gt;&#8217;
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  /*资讯-添加*/
</p>
<p>
  function article_add(title,url){
</p>
<p>
  	var index = layer.open({
</p>
<p>
  		type: 2,
</p>
<p>
  		title: title,
</p>
<p>
  		content: url
</p>
<p>
  	});
</p>
<p>
  	layer.full(index);
</p>
<p>
  }
</p>
<p>
  /*图片-添加*/
</p>
<p>
  function picture_add(title,url){
</p>
<p>
  	var index = layer.open({
</p>
<p>
  		type: 2,
</p>
<p>
  		title: title,
</p>
<p>
  		content: url
</p>
<p>
  	});
</p>
<p>
  	layer.full(index);
</p>
<p>
  }
</p>
<p>
  /*产品-添加*/
</p>
<p>
  function product_add(title,url){
</p>
<p>
  	var index = layer.open({
</p>
<p>
  		type: 2,
</p>
<p>
  		title: title,
</p>
<p>
  		content: url
</p>
<p>
  	});
</p>
<p>
  	layer.full(index);
</p>
<p>
  }
</p>
<p>
  /*用户-添加*/
</p>
<p>
  function member_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>打开数据库，录入专业分类、专业、课程、课时的权限</h2>
<p>
  步骤1：
</p>
<p><img loading="lazy" decoding="async" width="809" height="535" src="/wp-content/uploads/2018/05/word-image-5400.png" class="wp-image-5940" srcset="/wp-content/uploads/2018/05/word-image-5400.png 809w, /wp-content/uploads/2018/05/word-image-5400-300x198.png 300w, /wp-content/uploads/2018/05/word-image-5400-768x508.png 768w" sizes="(max-width: 809px) 100vw, 809px" /></p>
<p>
  步骤2：打开后台分配权限
</p>
<p><img loading="lazy" decoding="async" width="1246" height="592" src="/wp-content/uploads/2018/05/word-image-5401.png" class="wp-image-5941" srcset="/wp-content/uploads/2018/05/word-image-5401.png 1246w, /wp-content/uploads/2018/05/word-image-5401-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5401-768x365.png 768w, /wp-content/uploads/2018/05/word-image-5401-1024x487.png 1024w" sizes="(max-width: 1246px) 100vw, 1246px" /></p>
<p>
  步骤3：开启路由权限验证
</p>
<p><img loading="lazy" decoding="async" width="1032" height="384" src="/wp-content/uploads/2018/05/word-image-5402.png" class="wp-image-5942" srcset="/wp-content/uploads/2018/05/word-image-5402.png 1032w, /wp-content/uploads/2018/05/word-image-5402-300x112.png 300w, /wp-content/uploads/2018/05/word-image-5402-768x286.png 768w, /wp-content/uploads/2018/05/word-image-5402-1024x381.png 1024w" sizes="(max-width: 1032px) 100vw, 1032px" /></p>
<h1><a id="post-5892-_Toc487817429"></a>︴作业</h1>
<p>
  1）实现今天的代码；
</p>
<p>
  2）完善RBAC三部分管理模块的后续CURD操作；</p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5892.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel在线教育平台（四）直播、七牛云、OBS、直播流管理、直播课程管理、首页直播、在线观看</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5812.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5812.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:42:11 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[OBS]]></category>
		<category><![CDATA[七牛云]]></category>
		<category><![CDATA[在线观看]]></category>
		<category><![CDATA[直播]]></category>
		<category><![CDATA[直播流管理]]></category>
		<category><![CDATA[直播课程管理]]></category>
		<category><![CDATA[首页直播]]></category>
		<guid isPermaLink="false">/?p=5812</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（4） 一、直播介绍【★★★】 1、术语介绍 直播：实时播放某个画面（国内 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-5812-_Toc488249285"></a>Laravel框架实战-在线教育平台（4）</h1>
<h1><a id="post-5812-_Toc488249288"></a>一、直播介绍【★★★】</h1>
<h2><a id="post-5812-_Toc488249289"></a>1、术语介绍</h2>
<p>
  直播：实时播放某个画面（国内最大的有yy、战旗、斗鱼tv、龙珠等）
</p>
<p>
  点播：类似于重播，编辑好的视频，观众可以重任意时间段观看（优酷、土豆、爱奇艺等）
</p>
<p>
  直播流：也可以称之为数据流，就是直播中的视频画面数据
</p>
<p>
  七牛：目前比较大的云数据服务公司
</p>
<h2>直播和点播实现原理</h2>
<h3>1）概括</h3>
<p>
  步骤1：采集视频画面数据，通过摄像机、手机、录屏软件等设备。
</p>
<p>
  步骤2：用户打开视频播放器拉去视频中的数据播放
</p>
<p>
  思考：直播和点播步骤1和步骤2的区别
</p>
<p>
  回答：直播必须实时采集视频画面数据、点播是提前录制
</p>
<h3>直播流程详细说明</h3>
<ul>
<li>
    直播<strong>推流</strong>（push）：指视频画面数据，从采集点到服务器的过程。
  </li>
<li>
    直播<strong>拉流</strong>（pull）：指视频画面数据，从服务器到观众的过程。
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="676" height="209" src="/wp-content/uploads/2018/05/word-image-5275.png" class="wp-image-5813" srcset="/wp-content/uploads/2018/05/word-image-5275.png 676w, /wp-content/uploads/2018/05/word-image-5275-300x93.png 300w" sizes="(max-width: 676px) 100vw, 676px" /><br />
<img loading="lazy" decoding="async" width="801" height="184" src="/wp-content/uploads/2018/05/word-image-5276.png" class="wp-image-5814" srcset="/wp-content/uploads/2018/05/word-image-5276.png 801w, /wp-content/uploads/2018/05/word-image-5276-300x69.png 300w, /wp-content/uploads/2018/05/word-image-5276-768x176.png 768w" sizes="(max-width: 801px) 100vw, 801px" /></p>
<h1>直播初体验</h1>
<h2>1、申请直播云服务步骤</h2>
<h3>1）注册并登陆七牛云</h3>
<ul>
<li>
    官网网址：<a href="https://www.qiniu.com/">https://www.qiniu.com/</a>
  </li>
<li>
    步骤
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="834" height="468" src="/wp-content/uploads/2018/05/word-image-5277.png" class="wp-image-5815" srcset="/wp-content/uploads/2018/05/word-image-5277.png 834w, /wp-content/uploads/2018/05/word-image-5277-300x168.png 300w, /wp-content/uploads/2018/05/word-image-5277-768x431.png 768w" sizes="(max-width: 834px) 100vw, 834px" /><br />
<img loading="lazy" decoding="async" width="908" height="562" src="/wp-content/uploads/2018/05/word-image-5278.png" class="wp-image-5816" srcset="/wp-content/uploads/2018/05/word-image-5278.png 908w, /wp-content/uploads/2018/05/word-image-5278-300x186.png 300w, /wp-content/uploads/2018/05/word-image-5278-768x475.png 768w" sizes="(max-width: 908px) 100vw, 908px" /></p>
<h3>2）申请直播云服务，填写如下信息</h3>
<p><img loading="lazy" decoding="async" width="1074" height="513" src="/wp-content/uploads/2018/05/word-image-5279.png" class="wp-image-5817" srcset="/wp-content/uploads/2018/05/word-image-5279.png 1074w, /wp-content/uploads/2018/05/word-image-5279-300x143.png 300w, /wp-content/uploads/2018/05/word-image-5279-768x367.png 768w, /wp-content/uploads/2018/05/word-image-5279-1024x489.png 1024w" sizes="(max-width: 1074px) 100vw, 1074px" /></p>
<h3><a id="post-5812-_Toc488249290"></a>3）填写完成后，要等待审核（目前：1~3个工作日）</h3>
<p><img loading="lazy" decoding="async" width="762" height="289" src="/wp-content/uploads/2018/05/word-image-5280.png" class="wp-image-5818" srcset="/wp-content/uploads/2018/05/word-image-5280.png 762w, /wp-content/uploads/2018/05/word-image-5280-300x114.png 300w" sizes="(max-width: 762px) 100vw, 762px" /></p>
<h3>4）审核通过后，重新选择‘立即添加’直播云服务</h3>
<p><img loading="lazy" decoding="async" width="860" height="494" src="/wp-content/uploads/2018/05/word-image-5281.png" class="wp-image-5819" srcset="/wp-content/uploads/2018/05/word-image-5281.png 860w, /wp-content/uploads/2018/05/word-image-5281-300x172.png 300w, /wp-content/uploads/2018/05/word-image-5281-768x441.png 768w" sizes="(max-width: 860px) 100vw, 860px" /><br />
<img loading="lazy" decoding="async" width="821" height="595" src="/wp-content/uploads/2018/05/word-image-5282.png" class="wp-image-5820" srcset="/wp-content/uploads/2018/05/word-image-5282.png 821w, /wp-content/uploads/2018/05/word-image-5282-300x217.png 300w, /wp-content/uploads/2018/05/word-image-5282-768x557.png 768w" sizes="(max-width: 821px) 100vw, 821px" /></p>
<h2>直播云服务管理</h2>
<h3>1）介绍</h3>
<p>
  直播空间（1）   对应   ‘直播流’（n）
</p>
<p>
  ‘直播流’（1）    对应     直播项目（1）
</p>
<h3>2）直播空间管理</h3>
<ul>
<li>
    创建空间
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1304" height="637" src="/wp-content/uploads/2018/05/word-image-5283.png" class="wp-image-5821" srcset="/wp-content/uploads/2018/05/word-image-5283.png 1304w, /wp-content/uploads/2018/05/word-image-5283-300x147.png 300w, /wp-content/uploads/2018/05/word-image-5283-768x375.png 768w, /wp-content/uploads/2018/05/word-image-5283-1024x500.png 1024w" sizes="(max-width: 1304px) 100vw, 1304px" /><br />
<img loading="lazy" decoding="async" width="1312" height="629" src="/wp-content/uploads/2018/05/word-image-5284.png" class="wp-image-5822" srcset="/wp-content/uploads/2018/05/word-image-5284.png 1312w, /wp-content/uploads/2018/05/word-image-5284-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5284-768x368.png 768w, /wp-content/uploads/2018/05/word-image-5284-1024x491.png 1024w" sizes="(max-width: 1312px) 100vw, 1312px" /><br />
<img loading="lazy" decoding="async" width="1327" height="587" src="/wp-content/uploads/2018/05/word-image-5285.png" class="wp-image-5823" srcset="/wp-content/uploads/2018/05/word-image-5285.png 1327w, /wp-content/uploads/2018/05/word-image-5285-300x133.png 300w, /wp-content/uploads/2018/05/word-image-5285-768x340.png 768w, /wp-content/uploads/2018/05/word-image-5285-1024x453.png 1024w" sizes="(max-width: 1327px) 100vw, 1327px" /><br />
<img loading="lazy" decoding="async" width="1324" height="588" src="/wp-content/uploads/2018/05/word-image-5286.png" class="wp-image-5824" srcset="/wp-content/uploads/2018/05/word-image-5286.png 1324w, /wp-content/uploads/2018/05/word-image-5286-300x133.png 300w, /wp-content/uploads/2018/05/word-image-5286-768x341.png 768w, /wp-content/uploads/2018/05/word-image-5286-1024x455.png 1024w" sizes="(max-width: 1324px) 100vw, 1324px" /><br />
<img loading="lazy" decoding="async" width="1228" height="616" src="/wp-content/uploads/2018/05/word-image-5287.png" class="wp-image-5825" srcset="/wp-content/uploads/2018/05/word-image-5287.png 1228w, /wp-content/uploads/2018/05/word-image-5287-300x150.png 300w, /wp-content/uploads/2018/05/word-image-5287-768x385.png 768w, /wp-content/uploads/2018/05/word-image-5287-1024x514.png 1024w" sizes="(max-width: 1228px) 100vw, 1228px" /></p>
<p>
  域名解析操作
</p>
<p><img loading="lazy" decoding="async" width="698" height="520" src="/wp-content/uploads/2018/05/word-image-5288.png" class="wp-image-5826" srcset="/wp-content/uploads/2018/05/word-image-5288.png 698w, /wp-content/uploads/2018/05/word-image-5288-300x223.png 300w" sizes="(max-width: 698px) 100vw, 698px" /><br />
<img loading="lazy" decoding="async" width="1158" height="402" src="/wp-content/uploads/2018/05/word-image-5289.png" class="wp-image-5827" srcset="/wp-content/uploads/2018/05/word-image-5289.png 1158w, /wp-content/uploads/2018/05/word-image-5289-300x104.png 300w, /wp-content/uploads/2018/05/word-image-5289-768x267.png 768w, /wp-content/uploads/2018/05/word-image-5289-1024x355.png 1024w" sizes="(max-width: 1158px) 100vw, 1158px" /></p>
<p>
  设置推流地址
</p>
<p><img loading="lazy" decoding="async" width="1348" height="595" src="/wp-content/uploads/2018/05/word-image-5290.png" class="wp-image-5828" srcset="/wp-content/uploads/2018/05/word-image-5290.png 1348w, /wp-content/uploads/2018/05/word-image-5290-300x132.png 300w, /wp-content/uploads/2018/05/word-image-5290-768x339.png 768w, /wp-content/uploads/2018/05/word-image-5290-1024x452.png 1024w" sizes="(max-width: 1348px) 100vw, 1348px" /></p>
<p>
  设置拉流地址
</p>
<p><img loading="lazy" decoding="async" width="1328" height="487" src="/wp-content/uploads/2018/05/word-image-5291.png" class="wp-image-5829" srcset="/wp-content/uploads/2018/05/word-image-5291.png 1328w, /wp-content/uploads/2018/05/word-image-5291-300x110.png 300w, /wp-content/uploads/2018/05/word-image-5291-768x282.png 768w, /wp-content/uploads/2018/05/word-image-5291-1024x376.png 1024w" sizes="(max-width: 1328px) 100vw, 1328px" /><br />
<img loading="lazy" decoding="async" width="1086" height="439" src="/wp-content/uploads/2018/05/word-image-5292.png" class="wp-image-5830" srcset="/wp-content/uploads/2018/05/word-image-5292.png 1086w, /wp-content/uploads/2018/05/word-image-5292-300x121.png 300w, /wp-content/uploads/2018/05/word-image-5292-768x310.png 768w, /wp-content/uploads/2018/05/word-image-5292-1024x414.png 1024w" sizes="(max-width: 1086px) 100vw, 1086px" /></p>
<ul>
<li>
    删除空间（慎用）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="790" height="582" src="/wp-content/uploads/2018/05/word-image-5293.png" class="wp-image-5831" srcset="/wp-content/uploads/2018/05/word-image-5293.png 790w, /wp-content/uploads/2018/05/word-image-5293-300x221.png 300w, /wp-content/uploads/2018/05/word-image-5293-768x566.png 768w" sizes="(max-width: 790px) 100vw, 790px" /><br />
<img loading="lazy" decoding="async" width="925" height="598" src="/wp-content/uploads/2018/05/word-image-5294.png" class="wp-image-5832" srcset="/wp-content/uploads/2018/05/word-image-5294.png 925w, /wp-content/uploads/2018/05/word-image-5294-300x194.png 300w, /wp-content/uploads/2018/05/word-image-5294-768x497.png 768w" sizes="(max-width: 925px) 100vw, 925px" /></p>
<h3>3）直播空间-直播流管理</h3>
<p><img loading="lazy" decoding="async" width="980" height="402" src="/wp-content/uploads/2018/05/word-image-5295.png" class="wp-image-5833" srcset="/wp-content/uploads/2018/05/word-image-5295.png 980w, /wp-content/uploads/2018/05/word-image-5295-300x123.png 300w, /wp-content/uploads/2018/05/word-image-5295-768x315.png 768w" sizes="(max-width: 980px) 100vw, 980px" /><br />
<img loading="lazy" decoding="async" width="1253" height="333" src="/wp-content/uploads/2018/05/word-image-5296.png" class="wp-image-5834" srcset="/wp-content/uploads/2018/05/word-image-5296.png 1253w, /wp-content/uploads/2018/05/word-image-5296-300x80.png 300w, /wp-content/uploads/2018/05/word-image-5296-768x204.png 768w, /wp-content/uploads/2018/05/word-image-5296-1024x272.png 1024w" sizes="(max-width: 1253px) 100vw, 1253px" /><br />
<img loading="lazy" decoding="async" width="1260" height="604" src="/wp-content/uploads/2018/05/word-image-5297.png" class="wp-image-5835" srcset="/wp-content/uploads/2018/05/word-image-5297.png 1260w, /wp-content/uploads/2018/05/word-image-5297-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5297-768x368.png 768w, /wp-content/uploads/2018/05/word-image-5297-1024x491.png 1024w" sizes="(max-width: 1260px) 100vw, 1260px" /></p>
<h2>初体验（一套直播实现流程）</h2>
<h3>【推流】使用OBS软件获将幕、摄像头等数据推送到七牛云</h3>
<ul>
<li>
    步骤1：打开OBS软件官网：<a href="http://www.obsapp.net/">http://www.obsapp.net/</a>
  </li>
<li>
    步骤2：下载并安装（注：安装就是傻瓜式下一步即可）
  </li>
<li>
    步骤3：设置使用获取屏幕数据或者摄像头数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="909" height="676" src="/wp-content/uploads/2018/05/word-image-5298.png" class="wp-image-5836" srcset="/wp-content/uploads/2018/05/word-image-5298.png 909w, /wp-content/uploads/2018/05/word-image-5298-300x223.png 300w, /wp-content/uploads/2018/05/word-image-5298-768x571.png 768w" sizes="(max-width: 909px) 100vw, 909px" /><br />
<img loading="lazy" decoding="async" width="658" height="547" src="/wp-content/uploads/2018/05/word-image-5299.png" class="wp-image-5837" srcset="/wp-content/uploads/2018/05/word-image-5299.png 658w, /wp-content/uploads/2018/05/word-image-5299-300x249.png 300w" sizes="(max-width: 658px) 100vw, 658px" /></p>
<ul>
<li>
    步骤4：继续设置，将通过OBS软件获取的屏幕或摄像头等数据
  </li>
</ul>
<p>
  内容推送到七牛云
</p>
<ol>
<li>
  获取推送地址
</li>
</ol>
<p><img loading="lazy" decoding="async" width="1231" height="454" src="/wp-content/uploads/2018/05/word-image-5300.png" class="wp-image-5838" srcset="/wp-content/uploads/2018/05/word-image-5300.png 1231w, /wp-content/uploads/2018/05/word-image-5300-300x111.png 300w, /wp-content/uploads/2018/05/word-image-5300-768x283.png 768w, /wp-content/uploads/2018/05/word-image-5300-1024x378.png 1024w" sizes="(max-width: 1231px) 100vw, 1231px" /></p>
<p>
  2）打开软件设置推送地址
</p>
<p><img loading="lazy" decoding="async" width="227" height="256" src="/wp-content/uploads/2018/05/word-image-5301.png" class="wp-image-5839" /><br />
<img loading="lazy" decoding="async" width="1136" height="711" src="/wp-content/uploads/2018/05/word-image-5302.png" class="wp-image-5840" srcset="/wp-content/uploads/2018/05/word-image-5302.png 1136w, /wp-content/uploads/2018/05/word-image-5302-300x188.png 300w, /wp-content/uploads/2018/05/word-image-5302-768x481.png 768w, /wp-content/uploads/2018/05/word-image-5302-1024x641.png 1024w" sizes="(max-width: 1136px) 100vw, 1136px" /><br />
<img loading="lazy" decoding="async" width="1365" height="572" src="/wp-content/uploads/2018/05/word-image-5303.png" class="wp-image-5841" srcset="/wp-content/uploads/2018/05/word-image-5303.png 1365w, /wp-content/uploads/2018/05/word-image-5303-300x126.png 300w, /wp-content/uploads/2018/05/word-image-5303-768x322.png 768w, /wp-content/uploads/2018/05/word-image-5303-1024x429.png 1024w" sizes="(max-width: 1365px) 100vw, 1365px" /></p>
<p><strong>rtmp://pili-publish.php12.sk-school.com/201801140001/test2?e=1515897779&amp;token=RlWO59USAL86QtQ4LhYFWsAGjLZEYbgD5H9_Fhob:8_jLY7p5M34epelW0oKP66WBZ40=</strong>
</p>
<p><strong>红色填入：URL</strong>
</p>
<p><strong>绿色填入：流秘钥</strong>
</p>
<p>
  多学一招：OBS就是一个软件，作用就是推送直播所需画面数据）
</p>
<h3>【拉流1】flash方式播放【直播】</h3>
<p>
  &lt;!DOCTYPE html&gt;
</p>
<p>
  &lt;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8&#8243; /&gt;
</p>
<p>
  &lt;title&gt;ckplayer简单调用演示&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;div id=&#8221;a1&#8243;&gt;&lt;/div&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;ckplayer/ckplayer.js&#8221; charset=&#8221;utf-8&#8243;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  	var flashvars={
</p>
<p>
  		f:&#8217;<strong>rtmp://pili-live-rtmp.php12.sk-school.com/201801140001/test2?sign=930b44c2efd1e384e3dfc8a6aee6035c&amp;t=5a5aba5d</strong>&#8216;,
</p>
<p>
  		c:0,
</p>
<p>
  		b:1,
</p>
<p>
  		i:&#8217;http://www.ckplayer.com/static/images/cqdw.jpg&#8217;
</p>
<p>
  		};
</p>
<p>
  	var video=[&#8216;http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4-&gt;video/mp4&#8217;];
</p>
<p>
  	CKobject.embed(&#8216;ckplayer/ckplayer.swf&#8217;,&#8217;a1&#8242;,&#8217;ckplayer_a1&#8242;,&#8217;600&#8242;,&#8217;400&#8242;,false,flashvars,video)
</p>
<p>
  	function closelights(){//关灯
</p>
<p>
  		alert(&#8216; 本演示不支持开关灯&#8217;);
</p>
<p>
  	}
</p>
<p>
  	function openlights(){//开灯
</p>
<p>
  		alert(&#8216; 本演示不支持开关灯&#8217;);
</p>
<p>
  	}
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h3>【拉流2】html5方式播放【√】</h3>
<p>
  仓库地址：<a href="https://github.com/huangyaoxin/hLive">https://github.com/huangyaoxin/hLive</a>
</p>
<p>
  &lt;!DOCTYPE html&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=utf-8 /&gt;
</p>
<p>
  &lt;title&gt;fz-live&lt;/title&gt;
</p>
<p>
    &lt;link href=&#8221;./css/video.css&#8221; rel=&#8221;stylesheet&#8221;&gt;
</p>
<p>
    &lt;script src=&#8221;./js/video.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
    &lt;script src=&#8221;./js/videojs-live.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
    &lt;video id=&#8221;my_video_1&#8243; class=&#8221;video-js vjs-default-skin&#8221; controls preload=&#8221;auto&#8221; width=&#8221;1000&#8243; height=&#8221;500&#8243;
</p>
<p>
    data-setup='{}&#8217;&gt;
</p>
<p>
      &lt;source src=&#8221;http://pili-live-hls.php12.sk-school.com/201801140001/test2.m3u8?sign=2f34f36a8c32f69a87559da2dfd1e3e4&amp;t=5a5ac230&#8243; type=&#8221;application/x-mpegURL&#8221;&gt;
</p>
<p>
    &lt;/video&gt;
</p>
</p>
<p>
    &lt;script&gt;
</p>
<p>
    &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>︴扩展</h2>
<p>
  手机APP开发直播功能相关文档
</p>
<ul>
<li><a href="https://www.apicloud.com/mod_detail/45964">https://www.apicloud.com/mod_detail/45964</a>
  </li>
<li><a href="https://docs.apicloud.com/Client-API/Open-SDK/qiniuLive">https://docs.apicloud.com/Client-API/Open-SDK/qiniuLive</a>
  </li>
</ul>
<h1>三、直播流管理（在线教育后台）</h1>
<h2>1、准备</h2>
<h3>1）直播流表</h3>
<p><strong>后台直播流表</strong>
</p>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  stream
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  stream _name
</p>
</td>
<td>
<p>
  varchar(200)
</p>
</td>
<td>
<p>
  直播流名称
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  state
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  直播流状态：1=正常，2=永久禁播，3=限时禁播
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  正常
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  update_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<p>
  步骤1：创建迁移文件并书写
</p>
<p>
  步骤2：执行迁移文件
</p>
<p><img loading="lazy" decoding="async" width="1167" height="599" src="/wp-content/uploads/2018/05/word-image-5304.png" class="wp-image-5842" srcset="/wp-content/uploads/2018/05/word-image-5304.png 1167w, /wp-content/uploads/2018/05/word-image-5304-300x154.png 300w, /wp-content/uploads/2018/05/word-image-5304-768x394.png 768w, /wp-content/uploads/2018/05/word-image-5304-1024x526.png 1024w" sizes="(max-width: 1167px) 100vw, 1167px" /></p>
<p>
  Schema::create(&#8216;stream&#8217;, function (Blueprint $table) {
</p>
<p>
      $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
      $table-&gt;string(&#8216;stream_name&#8217;)-&gt;comment(&#8216;直播流名称&#8217;);
</p>
<p>
      $table-&gt;unsignedTinyInteger(&#8216;state&#8217;)-&gt;default(1)-&gt;comment(&#8216;直播流状态:1-正常,2-永久禁播,3-限时禁播&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
      $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
  });
</p>
<p><img loading="lazy" decoding="async" width="739" height="312" src="/wp-content/uploads/2018/05/word-image-5305.png" class="wp-image-5843" srcset="/wp-content/uploads/2018/05/word-image-5305.png 739w, /wp-content/uploads/2018/05/word-image-5305-300x127.png 300w" sizes="(max-width: 739px) 100vw, 739px" /></p>
<h3>模型</h3>
<p><img loading="lazy" decoding="async" width="1109" height="586" src="/wp-content/uploads/2018/05/word-image-5306.png" class="wp-image-5844" srcset="/wp-content/uploads/2018/05/word-image-5306.png 1109w, /wp-content/uploads/2018/05/word-image-5306-300x159.png 300w, /wp-content/uploads/2018/05/word-image-5306-768x406.png 768w, /wp-content/uploads/2018/05/word-image-5306-1024x541.png 1024w" sizes="(max-width: 1109px) 100vw, 1109px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Stream extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;stream&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;stream_name&#8217;, &#8216;state&#8217;];
</p>
<p>
  }
</p>
<h3>更改后台菜单</h3>
<p><img loading="lazy" decoding="async" width="1335" height="491" src="/wp-content/uploads/2018/05/word-image-5307.png" class="wp-image-5845" srcset="/wp-content/uploads/2018/05/word-image-5307.png 1335w, /wp-content/uploads/2018/05/word-image-5307-300x110.png 300w, /wp-content/uploads/2018/05/word-image-5307-768x282.png 768w, /wp-content/uploads/2018/05/word-image-5307-1024x377.png 1024w" sizes="(max-width: 1335px) 100vw, 1335px" /></p>
<h2>2、列表功能</h2>
<h3>1）加载视图</h3>
<p>
  步骤1：路由
</p>
<p><img loading="lazy" decoding="async" width="992" height="138" src="/wp-content/uploads/2018/05/word-image-5308.png" class="wp-image-5846" srcset="/wp-content/uploads/2018/05/word-image-5308.png 992w, /wp-content/uploads/2018/05/word-image-5308-300x42.png 300w, /wp-content/uploads/2018/05/word-image-5308-768x107.png 768w" sizes="(max-width: 992px) 100vw, 992px" /></p>
<p>
  步骤2：创建控制器方法并加载视图
</p>
<p><img loading="lazy" decoding="async" width="866" height="509" src="/wp-content/uploads/2018/05/word-image-5309.png" class="wp-image-5847" srcset="/wp-content/uploads/2018/05/word-image-5309.png 866w, /wp-content/uploads/2018/05/word-image-5309-300x176.png 300w, /wp-content/uploads/2018/05/word-image-5309-768x451.png 768w" sizes="(max-width: 866px) 100vw, 866px" /></p>
<p>
  步骤3：创建视图
</p>
<p><img loading="lazy" decoding="async" width="1057" height="638" src="/wp-content/uploads/2018/05/word-image-5310.png" class="wp-image-5848" srcset="/wp-content/uploads/2018/05/word-image-5310.png 1057w, /wp-content/uploads/2018/05/word-image-5310-300x181.png 300w, /wp-content/uploads/2018/05/word-image-5310-768x464.png 768w, /wp-content/uploads/2018/05/word-image-5310-1024x618.png 1024w" sizes="(max-width: 1057px) 100vw, 1057px" /></p>
<h3>2）数据处理</h3>
<ul>
<li>
    步骤1：控制器方法调用模型查询所有数据并分页，传递给视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1015" height="501" src="/wp-content/uploads/2018/05/word-image-5311.png" class="wp-image-5849" srcset="/wp-content/uploads/2018/05/word-image-5311.png 1015w, /wp-content/uploads/2018/05/word-image-5311-300x148.png 300w, /wp-content/uploads/2018/05/word-image-5311-768x379.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Stream;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class StreamController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
      	//1.分页获取数据
</p>
<p>
      	$streams = Stream::orderBy(&#8216;id&#8217;, &#8216;desc&#8217;)-&gt;paginate(8);
</p>
<p>
      	//2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.stream.index&#8217;, compact(&#8216;streams&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图循环显示即可
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="934" height="525" src="/wp-content/uploads/2018/05/word-image-5312.png" class="wp-image-5850" srcset="/wp-content/uploads/2018/05/word-image-5312.png 934w, /wp-content/uploads/2018/05/word-image-5312-300x169.png 300w, /wp-content/uploads/2018/05/word-image-5312-768x432.png 768w" sizes="(max-width: 934px) 100vw, 934px" /><br />
<img loading="lazy" decoding="async" width="1202" height="303" src="/wp-content/uploads/2018/05/word-image-5313.png" class="wp-image-5851" srcset="/wp-content/uploads/2018/05/word-image-5313.png 1202w, /wp-content/uploads/2018/05/word-image-5313-300x76.png 300w, /wp-content/uploads/2018/05/word-image-5313-768x194.png 768w, /wp-content/uploads/2018/05/word-image-5313-1024x258.png 1024w" sizes="(max-width: 1202px) 100vw, 1202px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;直播流管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 直播流管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;直播流名称&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜直播流节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt;
</p>
<p>
  		&lt;span class=&#8221;l&#8221;&gt;
</p>
<p>
  			&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;
</p>
<p>
  				&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除
</p>
<p>
  			&lt;/a&gt;
</p>
<p>
  			&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加直播流节点&#8217;,'{{ url(&#8216;admin/stream/add&#8217;) }}&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;
</p>
<p>
  				&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加直播流节点
</p>
<p>
  			&lt;/a&gt;
</p>
<p>
  		&lt;/span&gt;
</p>
<p>
  		&lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;6&#8243;&gt;直播流节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;200&#8243;&gt;数据流名称&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;状态&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;创建于&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($streams as $stream)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;1&#8243; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $stream-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $stream-&gt;stream_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;
</p>
<p>
  					@if($stream-&gt;state == 1)
</p>
<p>
  					正常
</p>
<p>
  					@elseif($stream-&gt;state == 2)
</p>
<p>
  					永久禁用
</p>
<p>
  					@else
</p>
<p>
  					限时禁用
</p>
<p>
  					@endif
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $stream-&gt;created_at }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-直播流-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-直播流-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-直播流-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>添加功能</h2>
<h3>1）加载视图</h3>
<p>
  步骤1：路由
</p>
<p><img loading="lazy" decoding="async" width="978" height="152" src="/wp-content/uploads/2018/05/word-image-5314.png" class="wp-image-5852" srcset="/wp-content/uploads/2018/05/word-image-5314.png 978w, /wp-content/uploads/2018/05/word-image-5314-300x47.png 300w, /wp-content/uploads/2018/05/word-image-5314-768x119.png 768w" sizes="(max-width: 978px) 100vw, 978px" /></p>
<p>
  步骤2：设置控制器方法并加载视图
</p>
<p><img loading="lazy" decoding="async" width="791" height="328" src="/wp-content/uploads/2018/05/word-image-5315.png" class="wp-image-5853" srcset="/wp-content/uploads/2018/05/word-image-5315.png 791w, /wp-content/uploads/2018/05/word-image-5315-300x124.png 300w, /wp-content/uploads/2018/05/word-image-5315-768x318.png 768w" sizes="(max-width: 791px) 100vw, 791px" /></p>
<p>
  步骤3：创建视图
</p>
<p><img loading="lazy" decoding="async" width="1023" height="459" src="/wp-content/uploads/2018/05/word-image-5316.png" class="wp-image-5854" srcset="/wp-content/uploads/2018/05/word-image-5316.png 1023w, /wp-content/uploads/2018/05/word-image-5316-300x135.png 300w, /wp-content/uploads/2018/05/word-image-5316-768x345.png 768w" sizes="(max-width: 1023px) 100vw, 1023px" /></p>
<h3>2）数据处理</h3>
<p>
  步骤1：更改路由
</p>
<p><img loading="lazy" decoding="async" width="1093" height="172" src="/wp-content/uploads/2018/05/word-image-5317.png" class="wp-image-5855" srcset="/wp-content/uploads/2018/05/word-image-5317.png 1093w, /wp-content/uploads/2018/05/word-image-5317-300x47.png 300w, /wp-content/uploads/2018/05/word-image-5317-768x121.png 768w, /wp-content/uploads/2018/05/word-image-5317-1024x161.png 1024w" sizes="(max-width: 1093px) 100vw, 1093px" /></p>
<p>
  步骤2：更改视图
</p>
<p><img loading="lazy" decoding="async" width="1192" height="637" src="/wp-content/uploads/2018/05/word-image-5318.png" class="wp-image-5856" srcset="/wp-content/uploads/2018/05/word-image-5318.png 1192w, /wp-content/uploads/2018/05/word-image-5318-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5318-768x410.png 768w, /wp-content/uploads/2018/05/word-image-5318-1024x547.png 1024w" sizes="(max-width: 1192px) 100vw, 1192px" /><br />
<img loading="lazy" decoding="async" width="992" height="605" src="/wp-content/uploads/2018/05/word-image-5319.png" class="wp-image-5857" srcset="/wp-content/uploads/2018/05/word-image-5319.png 992w, /wp-content/uploads/2018/05/word-image-5319-300x183.png 300w, /wp-content/uploads/2018/05/word-image-5319-768x468.png 768w" sizes="(max-width: 992px) 100vw, 992px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;添加管理员 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-add&#8221;&gt;
</p>
<p>
  		{{ csrf_field() }}
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;数据流名称&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; value=&#8221;&#8221; placeholder=&#8221;&#8221; id=&#8221;stream_name&#8221; name=&#8221;stream_name&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;直播流状态&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9 skin-minimal&#8221;&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;state&#8221; id=&#8221;sex-1&#8243; value=&#8221;1&#8243; checked&gt;
</p>
<p>
  				&lt;label for=&#8221;sex-1&#8243;&gt;正常&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;state&#8221; id=&#8221;sex-2&#8243; value=&#8221;2&#8243; name=&#8221;sex&#8221;&gt;
</p>
<p>
  				&lt;label for=&#8221;sex-2&#8243;&gt;永久禁播&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			&lt;div class=&#8221;radio-box&#8221;&gt;
</p>
<p>
  				&lt;input type=&#8221;radio&#8221; name=&#8221;state&#8221; id=&#8221;sex-2&#8243; value=&#8221;3&#8243; name=&#8221;sex&#8221;&gt;
</p>
<p>
  				&lt;label for=&#8221;sex-2&#8243;&gt;限时禁播&lt;/label&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;input class=&#8221;btn btn-primary radius&#8221; type=&#8221;submit&#8221; value=&#8221;&amp;nbsp;&amp;nbsp;提交&amp;nbsp;&amp;nbsp;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8216;.skin-minimal input&#8217;).iCheck({
</p>
<p>
  		checkboxClass: &#8216;icheckbox-blue&#8217;,
</p>
<p>
  		radioClass: &#8216;iradio-blue&#8217;,
</p>
<p>
  		increaseArea: &#8216;20%&#8217;
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			stream_name:{
</p>
<p>
  				required:true,
</p>
<p>
  				minlength:4,
</p>
<p>
  				maxlength:16
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit({
</p>
<p>
  				type: &#8216;post&#8217;,
</p>
<p>
  				url: &#8220;{{ url(&#8216;admin/stream/add&#8217;) }}&#8221; ,
</p>
<p>
  				success: function(data){
</p>
<p>
  					window.parent.location.reload(); //刷新父页面
</p>
</p>
<p>
  					parent.layer.msg(&#8216;添加成功!&#8217;,{icon:1,time:1000});
</p>
<p>
  					var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
  					parent.$(&#8216;.btn-refresh&#8217;).click();
</p>
<p>
  					parent.layer.close(index);
</p>
<p>
  					// window.location.href = location.href;
</p>
<p>
  					// alert(location.href);
</p>
<p>
  				},
</p>
<p>
                  error: function(XmlHttpRequest, textStatus, errorThrown){
</p>
<p>
  					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});
</p>
<p>
  				}
</p>
<p>
  			});
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<p>
  步骤3：更改控制器
</p>
<p><img loading="lazy" decoding="async" width="945" height="383" src="/wp-content/uploads/2018/05/word-image-5320.png" class="wp-image-5858" srcset="/wp-content/uploads/2018/05/word-image-5320.png 945w, /wp-content/uploads/2018/05/word-image-5320-300x122.png 300w, /wp-content/uploads/2018/05/word-image-5320-768x311.png 768w" sizes="(max-width: 945px) 100vw, 945px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Stream;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class StreamController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
      	//1.分页获取数据
</p>
<p>
      	$streams = Stream::orderBy(&#8216;id&#8217;, &#8216;desc&#8217;)-&gt;paginate(8);
</p>
<p>
      	//2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.stream.index&#8217;, compact(&#8216;streams&#8217;));
</p>
<p>
      }
</p>
<p>
      //添加
</p>
<p>
      public function add(Request $request)
</p>
<p>
      {
</p>
<p>
      	//1.判断HTTP请求类型
</p>
<p>
      	if ($request-&gt;ismethod(&#8216;post&#8217;)) {
</p>
<p>
      		//2.接受数据
</p>
<p>
      		$postData = $request-&gt;only([&#8216;stream_name&#8217;,&#8217;state&#8217;]);
</p>
<p>
      		//3.通过模型添加数据
</p>
<p>
      		$rs = Stream::create($postData);
</p>
<p>
      		//4.判断
</p>
<p>
      		echo $rs ? 1 : 0;
</p>
<p>
      	} else {
</p>
<p>
  	    	//2.加载视图并传递数据
</p>
<p>
  	        return view(&#8216;admin.stream.add&#8217;);
</p>
<p>
      	}
</p>
<p>
      }
</p>
<p>
  }
</p>
<h2>同步七牛云创建直播流</h2>
<h3>1）接口文档说明</h3>
<p>
  接口说明：<a href="https://developer.qiniu.com/pili/api/2515/create-a-flow">https://developer.qiniu.com/pili/api/2515/create-a-flow</a>
</p>
<p><img loading="lazy" decoding="async" width="1246" height="327" src="/wp-content/uploads/2018/05/word-image-5321.png" class="wp-image-5859" srcset="/wp-content/uploads/2018/05/word-image-5321.png 1246w, /wp-content/uploads/2018/05/word-image-5321-300x79.png 300w, /wp-content/uploads/2018/05/word-image-5321-768x202.png 768w, /wp-content/uploads/2018/05/word-image-5321-1024x269.png 1024w" sizes="(max-width: 1246px) 100vw, 1246px" /><br />
<img loading="lazy" decoding="async" width="785" height="614" src="/wp-content/uploads/2018/05/word-image-5322.png" class="wp-image-5860" srcset="/wp-content/uploads/2018/05/word-image-5322.png 785w, /wp-content/uploads/2018/05/word-image-5322-300x235.png 300w, /wp-content/uploads/2018/05/word-image-5322-768x601.png 768w" sizes="(max-width: 785px) 100vw, 785px" /><br />
<img loading="lazy" decoding="async" width="886" height="613" src="/wp-content/uploads/2018/05/word-image-5323.png" class="wp-image-5861" srcset="/wp-content/uploads/2018/05/word-image-5323.png 886w, /wp-content/uploads/2018/05/word-image-5323-300x208.png 300w, /wp-content/uploads/2018/05/word-image-5323-768x531.png 768w" sizes="(max-width: 886px) 100vw, 886px" /><br />
<img loading="lazy" decoding="async" width="1340" height="598" src="/wp-content/uploads/2018/05/word-image-5324.png" class="wp-image-5862" srcset="/wp-content/uploads/2018/05/word-image-5324.png 1340w, /wp-content/uploads/2018/05/word-image-5324-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5324-768x343.png 768w, /wp-content/uploads/2018/05/word-image-5324-1024x457.png 1024w" sizes="(max-width: 1340px) 100vw, 1340px" /></p>
<h3>安装配置工具库（七牛SDK、发送请求工具库）</h3>
<ul>
<li>
    七牛SDK（zgldh/qiniu-laravel-storage）
  </li>
</ul>
<p>
  #【安装并配置】
</p>
<p><img loading="lazy" decoding="async" width="900" height="461" src="/wp-content/uploads/2018/05/word-image-5325.png" class="wp-image-5863" srcset="/wp-content/uploads/2018/05/word-image-5325.png 900w, /wp-content/uploads/2018/05/word-image-5325-300x154.png 300w, /wp-content/uploads/2018/05/word-image-5325-768x393.png 768w" sizes="(max-width: 900px) 100vw, 900px" /><br />
<img loading="lazy" decoding="async" width="1151" height="459" src="/wp-content/uploads/2018/05/word-image-5326.png" class="wp-image-5864" srcset="/wp-content/uploads/2018/05/word-image-5326.png 1151w, /wp-content/uploads/2018/05/word-image-5326-300x120.png 300w, /wp-content/uploads/2018/05/word-image-5326-768x306.png 768w, /wp-content/uploads/2018/05/word-image-5326-1024x408.png 1024w" sizes="(max-width: 1151px) 100vw, 1151px" /><br />
<img loading="lazy" decoding="async" width="944" height="535" src="/wp-content/uploads/2018/05/word-image-5327.png" class="wp-image-5865" srcset="/wp-content/uploads/2018/05/word-image-5327.png 944w, /wp-content/uploads/2018/05/word-image-5327-300x170.png 300w, /wp-content/uploads/2018/05/word-image-5327-768x435.png 768w" sizes="(max-width: 944px) 100vw, 944px" /><br />
<img loading="lazy" decoding="async" width="1226" height="577" src="/wp-content/uploads/2018/05/word-image-5328.png" class="wp-image-5866" srcset="/wp-content/uploads/2018/05/word-image-5328.png 1226w, /wp-content/uploads/2018/05/word-image-5328-300x141.png 300w, /wp-content/uploads/2018/05/word-image-5328-768x361.png 768w, /wp-content/uploads/2018/05/word-image-5328-1024x482.png 1024w" sizes="(max-width: 1226px) 100vw, 1226px" /><br />
<img loading="lazy" decoding="async" width="718" height="216" src="/wp-content/uploads/2018/05/word-image-5329.png" class="wp-image-5867" srcset="/wp-content/uploads/2018/05/word-image-5329.png 718w, /wp-content/uploads/2018/05/word-image-5329-300x90.png 300w" sizes="(max-width: 718px) 100vw, 718px" /><br />
<img loading="lazy" decoding="async" width="1301" height="500" src="/wp-content/uploads/2018/05/word-image-5330.png" class="wp-image-5868" srcset="/wp-content/uploads/2018/05/word-image-5330.png 1301w, /wp-content/uploads/2018/05/word-image-5330-300x115.png 300w, /wp-content/uploads/2018/05/word-image-5330-768x295.png 768w, /wp-content/uploads/2018/05/word-image-5330-1024x394.png 1024w" sizes="(max-width: 1301px) 100vw, 1301px" /></p>
<ul>
<li>
    发送请求工具库（guzzlehttp/guzzle）：是更加强大的curl
  </li>
</ul>
<p>
  #【安装】composer require guzzlehttp/guzzle
</p>
<p><img loading="lazy" decoding="async" width="538" height="311" src="/wp-content/uploads/2018/05/word-image-5331.png" class="wp-image-5869" srcset="/wp-content/uploads/2018/05/word-image-5331.png 538w, /wp-content/uploads/2018/05/word-image-5331-300x173.png 300w" sizes="(max-width: 538px) 100vw, 538px" /></p>
<p>
  #【基本语法】
</p>
<p>
  $client = new \Guzzle\Client();
</p>
<p>
  $client-&gt;request(方式，host，[headers  body]);
</p>
<h3>使用</h3>
<p><img loading="lazy" decoding="async" width="1170" height="710" src="/wp-content/uploads/2018/05/word-image-5332.png" class="wp-image-5870" srcset="/wp-content/uploads/2018/05/word-image-5332.png 1170w, /wp-content/uploads/2018/05/word-image-5332-300x182.png 300w, /wp-content/uploads/2018/05/word-image-5332-768x466.png 768w, /wp-content/uploads/2018/05/word-image-5332-1024x621.png 1024w" sizes="(max-width: 1170px) 100vw, 1170px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Stream;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class StreamController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
      	//1.分页获取数据
</p>
<p>
      	$streams = Stream::orderBy(&#8216;id&#8217;, &#8216;desc&#8217;)-&gt;paginate(8);
</p>
<p>
      	//2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.stream.index&#8217;, compact(&#8216;streams&#8217;));
</p>
<p>
      }
</p>
<p>
      //添加
</p>
<p>
      public function add(Request $request)
</p>
<p>
      {
</p>
<p>
      	//1.判断HTTP请求类型
</p>
<p>
      	if ($request-&gt;ismethod(&#8216;post&#8217;)) {
</p>
<p>
              //直播流名称过滤：必须唯一
</p>
</p>
<p>
      		//2.接受数据
</p>
<p>
      		$postData = $request-&gt;only([&#8216;stream_name&#8217;,&#8217;state&#8217;]);
</p>
<p>
      		//3.通过模型添加数据
</p>
<p>
      		$rs = Stream::create($postData);
</p>
<p>
      		//4.判断
</p>
<p>
              if ($rs) {
</p>
<p>
              <strong>//成功同步创建直播流</strong>
</p>
<p><strong>                $method = &#8216;POST&#8217;;                       //HTTP请求类型</strong>
</p>
<p><strong>                $space = &#8216;201801140002&#8217;;                //空间名称（注：该空间必须存在）</strong>
</p>
<p><strong>                $path = &#8216;/v2/hubs/&#8217;.$space.&#8217;/streams&#8217;;  //请求接口地址</strong>
</p>
<p><strong>                $host = &#8216;pili.qiniuapi.com&#8217;;            //接口请求域名</strong>
</p>
<p><strong>                $contentType = &#8216;application/json&#8217;;  </strong>
</p>
<p><strong>                $body = json_encode([                   //将请求体数据转化为json格式</strong>
</p>
<p><strong>                    &#8216;key&#8217;=&gt;$request-&gt;input(&#8216;stream_name&#8217;)</strong>
</p>
<p><strong>                ]);</strong>
</p>
<p><strong>                //根据请求包，我们要制作鉴权信息(用于验证请求包在传输中是否被篡改)；</strong>
</p>
<p><strong>                //Authorization: &lt;QiniuToken&gt;</strong>
</p>
<p><strong>                //生成签名字符串；</strong>
</p>
<p><strong>                $data = &#8220;$method $path\nHost: $host\nContent-Type: $contentType\n\n$body&#8221;;</strong>
</p>
<p><strong>                $ak =  config(&#8216;filesystems.disks.qiniu.access_key&#8217;); //通过config函数获取配置文件信息</strong>
</p>
<p><strong>                $sk =  config(&#8216;filesystems.disks.qiniu.secret_key&#8217;);</strong>
</p>
<p><strong>                $qiniu = new  \Qiniu\Auth($ak,$sk);</strong>
</p>
<p><strong>                $token =  &#8220;Qiniu &#8220;.$qiniu-&gt;sign($data); //根据HTTP请求鉴权接口生成秘钥</strong>
</p>
<p><strong>                //利用GuzzleHttp发送请求表</strong>
</p>
<p><strong>                $cli = new \GuzzleHttp\Client();</strong>
</p>
<p><strong>                $res = $cli-&gt;request($method, $host.$path, [</strong>
</p>
<p><strong>                    &#8216;headers&#8217; =&gt; [</strong>
</p>
<p><strong>                        &#8216;Authorization&#8217; =&gt; $token,</strong>
</p>
<p><strong>                        &#8216;Content-Type&#8217; =&gt; $contentType,</strong>
</p>
<p><strong>                        &#8216;Accept-Encoding&#8217; =&gt; &#8216;gzip&#8217;,</strong>
</p>
<p><strong>                        &#8216;Content-Length&#8217; =&gt; strlen($body),</strong>
</p>
<p><strong>                        &#8216;User-Agent&#8217; =&gt; &#8216;pili-sdk-go/v2 go1.6 darwin/amd64&#8217;,</strong>
</p>
<p><strong>                    ],</strong>
</p>
<p><strong>                    &#8216;body&#8217;=&gt;$body,</strong>
</p>
<p><strong>                ]);</strong>
</p>
<p><strong>                //var_dump($res);die;</strong>
</p>
<p><strong>            }</strong>
</p>
<p><strong>    		echo $rs ? 1 : 0;</strong>
</p>
<p>
      	} else {
</p>
<p>
  	    	//2.加载视图并传递数据
</p>
<p>
  	        return view(&#8216;admin.stream.add&#8217;);
</p>
<p>
      	}
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1>四、直播课程管理（在线教育后台）</h1>
<h2>1、准备</h2>
<h3>1）直播课程流表</h3>
<p><strong>后台直播课程表</strong>
</p>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  live
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  live_name
</p>
</td>
<td>
<p>
  varchar(200)
</p>
</td>
<td>
<p>
  直播课程名称
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  stream_id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  所属直播流
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  img
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  封面
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  start_time
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  直播开始时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  end_time
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  直播结束时间
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  update_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<p><img loading="lazy" decoding="async" width="1251" height="676" src="/wp-content/uploads/2018/05/word-image-5333.png" class="wp-image-5871" srcset="/wp-content/uploads/2018/05/word-image-5333.png 1251w, /wp-content/uploads/2018/05/word-image-5333-300x162.png 300w, /wp-content/uploads/2018/05/word-image-5333-768x415.png 768w, /wp-content/uploads/2018/05/word-image-5333-1024x553.png 1024w" sizes="(max-width: 1251px) 100vw, 1251px" /></p>
<p>
  &lt;?php
</p>
<p>
  use Illuminate\Support\Facades\Schema;
</p>
<p>
  use Illuminate\Database\Schema\Blueprint;
</p>
<p>
  use Illuminate\Database\Migrations\Migration;
</p>
<p>
  class CreateLiveTable extends Migration
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Run the migrations.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function up()
</p>
<p>
      {
</p>
<p>
          Schema::create(&#8216;live&#8217;, function (Blueprint $table) {
</p>
<p>
              $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;live_name&#8217;, 200)-&gt;comment(&#8216;直播课程名称&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;stream_id&#8217;)-&gt;comment(&#8216;所属直播流&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;img&#8217;)-&gt;default(&#8221;)-&gt;comment(&#8216;封面&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;start_time&#8217;)-&gt;default(0)-&gt;comment(&#8216;直播开始时间&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;end_time&#8217;)-&gt;default(0)-&gt;comment(&#8216;直播结束时间&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;更新于&#8217;);
</p>
<p>
          });
</p>
<p>
      }
</p>
<p>
      /**
</p>
<p>
       * Reverse the migrations.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function down()
</p>
<p>
      {
</p>
<p>
          Schema::dropIfExists(&#8216;live&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h3>2）模型</h3>
<p><img loading="lazy" decoding="async" width="1213" height="581" src="/wp-content/uploads/2018/05/word-image-5334.png" class="wp-image-5872" srcset="/wp-content/uploads/2018/05/word-image-5334.png 1213w, /wp-content/uploads/2018/05/word-image-5334-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5334-768x368.png 768w, /wp-content/uploads/2018/05/word-image-5334-1024x490.png 1024w" sizes="(max-width: 1213px) 100vw, 1213px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Live extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;live&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;live_name&#8217;, &#8216;stream_id&#8217;, &#8216;img&#8217;, &#8216;start_time&#8217;, &#8216;end_time&#8217;];
</p>
<p>
  }
</p>
<h2>2、列表功能</h2>
<p>
  步骤1：路由
</p>
<p><img loading="lazy" decoding="async" width="1037" height="247" src="/wp-content/uploads/2018/05/word-image-5335.png" class="wp-image-5873" srcset="/wp-content/uploads/2018/05/word-image-5335.png 1037w, /wp-content/uploads/2018/05/word-image-5335-300x71.png 300w, /wp-content/uploads/2018/05/word-image-5335-768x183.png 768w, /wp-content/uploads/2018/05/word-image-5335-1024x244.png 1024w" sizes="(max-width: 1037px) 100vw, 1037px" /></p>
<p>
  步骤2：创建控制器方法，分页获取数据，加载视图并传递数据
</p>
<p><img loading="lazy" decoding="async" width="1020" height="567" src="/wp-content/uploads/2018/05/word-image-5336.png" class="wp-image-5874" srcset="/wp-content/uploads/2018/05/word-image-5336.png 1020w, /wp-content/uploads/2018/05/word-image-5336-300x167.png 300w, /wp-content/uploads/2018/05/word-image-5336-768x427.png 768w" sizes="(max-width: 1020px) 100vw, 1020px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Live;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class LiveController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
      	//1.分页获取数据
</p>
<p>
      	$lives = Live::orderBy(&#8216;id&#8217;, &#8216;desc&#8217;)-&gt;paginate(8);
</p>
<p>
      	//2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.stream.index&#8217;, compact(&#8216;lives&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<p>
  步骤3：创建视图
</p>
<p><img loading="lazy" decoding="async" width="1362" height="385" src="/wp-content/uploads/2018/05/word-image-5337.png" class="wp-image-5875" srcset="/wp-content/uploads/2018/05/word-image-5337.png 1362w, /wp-content/uploads/2018/05/word-image-5337-300x85.png 300w, /wp-content/uploads/2018/05/word-image-5337-768x217.png 768w, /wp-content/uploads/2018/05/word-image-5337-1024x289.png 1024w" sizes="(max-width: 1362px) 100vw, 1362px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;直播课程管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 直播课程管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;直播课程名称&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;submit&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜直播课程节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt;
</p>
<p>
  		&lt;span class=&#8221;l&#8221;&gt;
</p>
<p>
  			&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;
</p>
<p>
  				&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除
</p>
<p>
  			&lt;/a&gt;
</p>
<p>
  			&lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加直播课程节点&#8217;,'{{ url(&#8216;admin/stream/add&#8217;) }}&#8217;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;
</p>
<p>
  				&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加直播课程节点
</p>
<p>
  			&lt;/a&gt;
</p>
<p>
  		&lt;/span&gt;
</p>
<p>
  		&lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;6&#8243;&gt;直播课程节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;40&#8243;&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;40&#8243;&gt;封面&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;200&#8243;&gt;直播课程名称&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;直播开始时间&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;直播结束时间&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;创建于&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($lives as $live)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;1&#8243; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $live-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;
</p>
<p>
  					@if ($live-&gt;img )
</p>
<p>
  						&lt;img src=&#8221;{{ $live-&gt;img }}&#8221; /&gt;
</p>
<p>
  					@else
</p>
<p>
  						&lt;img src=&#8221;{{ asset(&#8216;img/default.png&#8217;) }}&#8221; /&gt;
</p>
<p>
  					@endif
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $live-&gt;start_time }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $live-&gt;end_time }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $live-&gt;created_at }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-直播课程-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-直播课程-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-直播课程-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>3、添加功能</h2>
<h3>1）加载视图</h3>
<p>
  步骤1：路由
</p>
<p><img loading="lazy" decoding="async" width="1171" height="288" src="/wp-content/uploads/2018/05/word-image-5338.png" class="wp-image-5876" srcset="/wp-content/uploads/2018/05/word-image-5338.png 1171w, /wp-content/uploads/2018/05/word-image-5338-300x74.png 300w, /wp-content/uploads/2018/05/word-image-5338-768x189.png 768w, /wp-content/uploads/2018/05/word-image-5338-1024x252.png 1024w" sizes="(max-width: 1171px) 100vw, 1171px" /></p>
<p>
  步骤2：创建控制器对应方法并加载视图
</p>
<p><img loading="lazy" decoding="async" width="889" height="433" src="/wp-content/uploads/2018/05/word-image-5339.png" class="wp-image-5877" srcset="/wp-content/uploads/2018/05/word-image-5339.png 889w, /wp-content/uploads/2018/05/word-image-5339-300x146.png 300w, /wp-content/uploads/2018/05/word-image-5339-768x374.png 768w" sizes="(max-width: 889px) 100vw, 889px" /></p>
<p>
  步骤3：创建视图
</p>
<p>
  步骤1：
</p>
<p><img loading="lazy" decoding="async" width="1033" height="699" src="/wp-content/uploads/2018/05/word-image-5340.png" class="wp-image-5878" srcset="/wp-content/uploads/2018/05/word-image-5340.png 1033w, /wp-content/uploads/2018/05/word-image-5340-300x203.png 300w, /wp-content/uploads/2018/05/word-image-5340-768x520.png 768w, /wp-content/uploads/2018/05/word-image-5340-1024x693.png 1024w, /wp-content/uploads/2018/05/word-image-5340-220x150.png 220w" sizes="(max-width: 1033px) 100vw, 1033px" /></p>
<p>
  步骤2：打开列表页，设置添加弹出看连接
</p>
<p><img loading="lazy" decoding="async" width="1248" height="268" src="/wp-content/uploads/2018/05/word-image-5341.png" class="wp-image-5879" srcset="/wp-content/uploads/2018/05/word-image-5341.png 1248w, /wp-content/uploads/2018/05/word-image-5341-300x64.png 300w, /wp-content/uploads/2018/05/word-image-5341-768x165.png 768w, /wp-content/uploads/2018/05/word-image-5341-1024x220.png 1024w" sizes="(max-width: 1248px) 100vw, 1248px" /></p>
<h3>2）加载视图 （修改form表单）</h3>
<p>
  步骤1：控制器方法获取所有直播流数据传递给视图显示
</p>
<p><img loading="lazy" decoding="async" width="955" height="440" src="/wp-content/uploads/2018/05/word-image-5342.png" class="wp-image-5880" srcset="/wp-content/uploads/2018/05/word-image-5342.png 955w, /wp-content/uploads/2018/05/word-image-5342-300x138.png 300w, /wp-content/uploads/2018/05/word-image-5342-768x354.png 768w" sizes="(max-width: 955px) 100vw, 955px" /></p>
<p>
  步骤2：更改form表单
</p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;添加管理员 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-add&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;直播课程名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; value=&#8221;&#8221; placeholder=&#8221;&#8221; id=&#8221;adminName&#8221; name=&#8221;adminName&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;所属直播流：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt; &lt;span class=&#8221;select-box&#8221; style=&#8221;width:150px;&#8221;&gt;
</p>
<p>
  			&lt;select class=&#8221;select&#8221; name=&#8221;adminRole&#8221; size=&#8221;1&#8243;&gt;
</p>
<p>
  				@foreach ($streams as $stream)
</p>
<p>
  				&lt;option value=&#8221;{{ $stream-&gt;id }}&#8221;&gt;{{ $stream-&gt;stream_name }}&lt;/option&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/select&gt;
</p>
<p>
  			&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;直播日期：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; onfocus=&#8221;WdatePicker({ maxDate:&#8217;#F{$dp.$D(\&#8217;start_time\&#8217;)||\&#8217;%y-%M-%d\&#8217;}&#8217; })&#8221; id=&#8221;start_time&#8221; class=&#8221;input-text Wdate&#8221; style=&#8221;width:120px;&#8221;&gt;
</p>
<p>
  			&#8211;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; onfocus=&#8221;WdatePicker({ minDate:&#8217;#F{$dp.$D(\&#8217;end_time\&#8217;)}&#8217;,maxDate:&#8217;%y-%M-%d&#8217; })&#8221; id=&#8221;end_time&#8221; class=&#8221;input-text Wdate&#8221; style=&#8221;width:120px;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;input class=&#8221;btn btn-primary radius&#8221; type=&#8221;submit&#8221; value=&#8221;&amp;nbsp;&amp;nbsp;提交&amp;nbsp;&amp;nbsp;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/My97DatePicker/4.8/WdatePicker.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8216;.skin-minimal input&#8217;).iCheck({
</p>
<p>
  		checkboxClass: &#8216;icheckbox-blue&#8217;,
</p>
<p>
  		radioClass: &#8216;iradio-blue&#8217;,
</p>
<p>
  		increaseArea: &#8216;20%&#8217;
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			adminName:{
</p>
<p>
  				required:true,
</p>
<p>
  				minlength:4,
</p>
<p>
  				maxlength:16
</p>
<p>
  			},
</p>
<p>
  			password:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  			password2:{
</p>
<p>
  				required:true,
</p>
<p>
  				equalTo: &#8220;#password&#8221;
</p>
<p>
  			},
</p>
<p>
  			sex:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  			phone:{
</p>
<p>
  				required:true,
</p>
<p>
  				isPhone:true,
</p>
<p>
  			},
</p>
<p>
  			email:{
</p>
<p>
  				required:true,
</p>
<p>
  				email:true,
</p>
<p>
  			},
</p>
<p>
  			adminRole:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit({
</p>
<p>
  				type: &#8216;post&#8217;,
</p>
<p>
  				url: &#8220;xxxxxxx&#8221; ,
</p>
<p>
  				success: function(data){
</p>
<p>
  					layer.msg(&#8216;添加成功!&#8217;,{icon:1,time:1000});
</p>
<p>
  				},
</p>
<p>
                  error: function(XmlHttpRequest, textStatus, errorThrown){
</p>
<p>
  					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});
</p>
<p>
  				}
</p>
<p>
  			});
</p>
<p>
  			var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
  			parent.$(&#8216;.btn-refresh&#8217;).click();
</p>
<p>
  			parent.layer.close(index);
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<p><img loading="lazy" decoding="async" width="1065" height="485" src="/wp-content/uploads/2018/05/word-image-5343.png" class="wp-image-5881" srcset="/wp-content/uploads/2018/05/word-image-5343.png 1065w, /wp-content/uploads/2018/05/word-image-5343-300x137.png 300w, /wp-content/uploads/2018/05/word-image-5343-768x350.png 768w, /wp-content/uploads/2018/05/word-image-5343-1024x466.png 1024w" sizes="(max-width: 1065px) 100vw, 1065px" /></p>
<h3>3）数据处理</h3>
<p>
  表单验证插件：<a href="http://validform.rjboy.cn/">http://validform.rjboy.cn/</a>
</p>
<p>
  后台表单提交插件说明：<a href="https://www.cnblogs.com/si-shaohua/p/3780321.html">https://www.cnblogs.com/si-shaohua/p/3780321.html</a>
</p>
<p>
  步骤1：更改表单插件
</p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;添加管理员 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-add&#8221;&gt;
</p>
<p>
  		{{ csrf_field() }}
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;直播课程名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input required type=&#8221;text&#8221; class=&#8221;input-text&#8221; value=&#8221;&#8221; placeholder=&#8221;&#8221; id=&#8221;live_name&#8221; name=&#8221;live_name&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;所属直播流：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt; &lt;span class=&#8221;select-box&#8221; style=&#8221;width:150px;&#8221;&gt;
</p>
<p>
  			&lt;select class=&#8221;select&#8221; name=&#8221;stream_id&#8221; size=&#8221;1&#8243;&gt;
</p>
<p>
  				@foreach ($streams as $stream)
</p>
<p>
  				&lt;option value=&#8221;{{ $stream-&gt;id }}&#8221;&gt;{{ $stream-&gt;stream_name }}&lt;/option&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/select&gt;
</p>
<p>
  			&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;直播日期：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input required type=&#8221;text&#8221; onfocus=&#8221;WdatePicker({ maxDate:&#8217;#F{$dp.$D(\&#8217;start_time\&#8217;)||\&#8217;%y-%M-%d\&#8217;}&#8217; })&#8221; id=&#8221;start_time&#8221; name=&#8221;start_time&#8221; class=&#8221;input-text Wdate&#8221; style=&#8221;width:120px;&#8221;&gt;
</p>
<p>
  			&#8211;
</p>
<p>
  			&lt;input required type=&#8221;text&#8221; onfocus=&#8221;WdatePicker({ minDate:&#8217;#F{$dp.$D(\&#8217;end_time\&#8217;)}&#8217;,maxDate:&#8217;%y-%M-%d&#8217; })&#8221; id=&#8221;end_time&#8221; name=&#8221;end_time&#8221; class=&#8221;input-text Wdate&#8221; style=&#8221;width:120px;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;input class=&#8221;btn btn-primary radius&#8221; type=&#8221;submit&#8221; value=&#8221;&amp;nbsp;&amp;nbsp;提交&amp;nbsp;&amp;nbsp;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/My97DatePicker/4.8/WdatePicker.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p><strong>&lt;script type=&#8221;text/javascript&#8221;&gt;</strong>
</p>
<p><strong>$(function(){</strong>
</p>
<p><strong>	$(&#8216;.skin-minimal input&#8217;).iCheck({</strong>
</p>
<p><strong>		checkboxClass: &#8216;icheckbox-blue&#8217;,</strong>
</p>
<p><strong>		radioClass: &#8216;iradio-blue&#8217;,</strong>
</p>
<p><strong>		increaseArea: &#8216;20%&#8217;</strong>
</p>
<p><strong>	});</strong>
</p>
<p><strong>	</strong>
</p>
<p><strong>	$(&#8220;#form-admin-add&#8221;).validate({</strong>
</p>
<p><strong>		rules:{</strong>
</p>
<p><strong>			live_name:{</strong>
</p>
<p><strong>				required:true,</strong>
</p>
<p><strong>				minlength:4,</strong>
</p>
<p><strong>				maxlength:16</strong>
</p>
<p><strong>			},</strong>
</p>
<p><strong>			start_time:{</strong>
</p>
<p><strong>				required:true,</strong>
</p>
<p><strong>			},</strong>
</p>
<p><strong>			end_time:{</strong>
</p>
<p><strong>				required:true,</strong>
</p>
<p><strong>			},</strong>
</p>
<p><strong>		},</strong>
</p>
<p><strong>		onkeyup:false,</strong>
</p>
<p><strong>		focusCleanup:true,</strong>
</p>
<p><strong>		success:&#8221;valid&#8221;,</strong>
</p>
<p><strong>		submitHandler:function(form){</strong>
</p>
<p><strong>			$(form).ajaxSubmit({</strong>
</p>
<p><strong>				type: &#8216;post&#8217;,</strong>
</p>
<p><strong>				url: &#8220;{{ url(&#8216;admin/live/add&#8217;) }}&#8221; ,</strong>
</p>
<p><strong>				success: function(data){</strong>
</p>
<p><strong>					window.parent.location.reload();</strong>
</p>
<p><strong>					parent.layer.msg(&#8216;添加成功!&#8217;,{icon:1,time:1000});</strong>
</p>
<p><strong>					var index = parent.layer.getFrameIndex(window.name);</strong>
</p>
<p><strong>					parent.$(&#8216;.btn-refresh&#8217;).click();</strong>
</p>
<p><strong>					parent.layer.close(index);</strong>
</p>
<p><strong>				},</strong>
</p>
<p><strong>                error: function(XmlHttpRequest, textStatus, errorThrown){</strong>
</p>
<p><strong>					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});</strong>
</p>
<p><strong>				}</strong>
</p>
<p><strong>			});</strong>
</p>
<p><strong>		}</strong>
</p>
<p><strong>	});</strong>
</p>
<p><strong>});</strong>
</p>
<p><strong>&lt;/script&gt; </strong>
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<p>
  步骤2：数据处理
</p>
<p><img loading="lazy" decoding="async" width="1168" height="607" src="/wp-content/uploads/2018/05/word-image-5344.png" class="wp-image-5882" srcset="/wp-content/uploads/2018/05/word-image-5344.png 1168w, /wp-content/uploads/2018/05/word-image-5344-300x156.png 300w, /wp-content/uploads/2018/05/word-image-5344-768x399.png 768w, /wp-content/uploads/2018/05/word-image-5344-1024x532.png 1024w" sizes="(max-width: 1168px) 100vw, 1168px" /></p>
<p>
  //添加方法
</p>
<p>
  public function add(Request $request)
</p>
<p>
  {
</p>
<p>
  	//1.判断HTTP请求类型
</p>
<p>
  	if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
  		//2.接受数据
</p>
<p>
  		$postData = $request-&gt;only([&#8216;live_name&#8217;, &#8216;stream_id&#8217;, &#8216;start_time&#8217;, &#8216;end_time&#8217;]);
</p>
<p>
  		$postData[&#8216;start_time&#8217;] = strtotime($postData[&#8216;start_time&#8217;]);
</p>
<p>
  		$postData[&#8216;end_time&#8217;] = strtotime($postData[&#8216;end_time&#8217;]);
</p>
<p>
  		//3.插入数据库
</p>
<p>
  		$rs = Live::create($postData);
</p>
<p>
  		//4.判断状态
</p>
<p>
  		echo $rs ? 1 : 0;
</p>
<p>
  	} else {
</p>
<p>
  		//2.获取所有直播流数据
</p>
<p>
  		$streams = Stream::get();
</p>
<p>
  		//3.加载视图并传递数据
</p>
<p>
  		return view(&#8216;admin.live.add&#8217;, compact(&#8216;streams&#8217;));
</p>
<p>
  	}
</p>
<p>
  }
</p>
<h1>在线教育首页</h1>
<h2>加载视图</h2>
<ul>
<li>
    步骤1：创建路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="951" height="221" src="/wp-content/uploads/2018/05/word-image-5345.png" class="wp-image-5883" srcset="/wp-content/uploads/2018/05/word-image-5345.png 951w, /wp-content/uploads/2018/05/word-image-5345-300x70.png 300w, /wp-content/uploads/2018/05/word-image-5345-768x178.png 768w" sizes="(max-width: 951px) 100vw, 951px" /></p>
<ul>
<li>
    步骤2：创建控制器方法并加载视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="878" height="485" src="/wp-content/uploads/2018/05/word-image-5346.png" class="wp-image-5884" srcset="/wp-content/uploads/2018/05/word-image-5346.png 878w, /wp-content/uploads/2018/05/word-image-5346-300x166.png 300w, /wp-content/uploads/2018/05/word-image-5346-768x424.png 768w" sizes="(max-width: 878px) 100vw, 878px" /></p>
<ul>
<li>
    步骤3：创建视图
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1037" height="659" src="/wp-content/uploads/2018/05/word-image-5347.png" class="wp-image-5885" srcset="/wp-content/uploads/2018/05/word-image-5347.png 1037w, /wp-content/uploads/2018/05/word-image-5347-300x191.png 300w, /wp-content/uploads/2018/05/word-image-5347-768x488.png 768w, /wp-content/uploads/2018/05/word-image-5347-1024x651.png 1024w" sizes="(max-width: 1037px) 100vw, 1037px" /></p>
<h2>数据处理（循环直播数据）</h2>
<ul>
<li>
    步骤1：更改控制器方法，查询数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1105" height="472" src="/wp-content/uploads/2018/05/word-image-5348.png" class="wp-image-5886" srcset="/wp-content/uploads/2018/05/word-image-5348.png 1105w, /wp-content/uploads/2018/05/word-image-5348-300x128.png 300w, /wp-content/uploads/2018/05/word-image-5348-768x328.png 768w, /wp-content/uploads/2018/05/word-image-5348-1024x437.png 1024w" sizes="(max-width: 1105px) 100vw, 1105px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Home;
</p>
<p>
  use App\Http\Model\Live;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class IndexController extends Controller
</p>
<p>
  {
</p>
<p>
      //首页
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
      	//1.获取所有直播数据（保证正在直播中，注：实战工作中根据产品经理的算法显示首页数据）
</p>
<p>
      	$lives = Live::where(&#8216;start_time&#8217;, &#8216;&lt;&#8216;, time())
</p>
<p>
      		-&gt;where(&#8216;end_time&#8217;, &#8216;&gt;&#8217;, time())
</p>
<p>
      		-&gt;limit(4)
</p>
<p>
      		-&gt;get();
</p>
<p>
      	//2.传递给视图
</p>
<p>
          return view(&#8216;home.index.index&#8217;, compact(&#8216;lives&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤2：视图循环显示
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1277" height="588" src="/wp-content/uploads/2018/05/word-image-5349.png" class="wp-image-5887" srcset="/wp-content/uploads/2018/05/word-image-5349.png 1277w, /wp-content/uploads/2018/05/word-image-5349-300x138.png 300w, /wp-content/uploads/2018/05/word-image-5349-768x354.png 768w, /wp-content/uploads/2018/05/word-image-5349-1024x472.png 1024w" sizes="(max-width: 1277px) 100vw, 1277px" /></p>
<p>
  &lt;ul class=&#8221;public-class-live-content clearfix&#8221;&gt;
</p>
<p>
      &lt;!&#8211; &lt;li&gt;
</p>
<p>
          &lt;a style=&#8221;cursor:pointer&#8221; data-url=&#8221;/web/html/liveVideo.html?roomId=2C2A076B02BDE9FE9C33DC5901307461&amp;amp;courseId=126&#8243;&gt;
</p>
<p>
              &lt;div class=&#8221;img&#8221;&gt;
</p>
<p>
                  &lt;img src=&#8221;{{ asset(&#8216;home/img&#8217;) }}/7fc5a47439f2483b8dca9536144dcb6d.jpg&#8221;&gt;
</p>
<p>
              &lt;/div&gt;
</p>
<p>
              &lt;div class=&#8221;public-class-live-detail&#8221;&gt;
</p>
<p>
                  &lt;div class=&#8221;detailCourseInfo clearfix&#8221;&gt;
</p>
<p>
                      &lt;div class=&#8221;detailCourseName&#8221; title=&#8221;PS超级设计师公开课&#8221;&gt;PS超级设计师公开课&lt;/div&gt;
</p>
<p>
                      &lt;div class=&#8221;detailTeacher&#8221;&gt;讲师：任老师&lt;/div&gt;
</p>
<p>
                  &lt;/div&gt;
</p>
<p>
                  &lt;div class=&#8221;detailLiveInfo clearfix&#8221;&gt;
</p>
<p>
                      &lt;div class=&#8221;detailLiveDate&#8221;&gt;最近直播：03/24  20:00&lt;/div&gt;
</p>
<p>
                      &lt;div class=&#8221;detailLiving&#8221;&gt;
</p>
<p>
                          &lt;img src=&#8221;{{ asset(&#8216;home/img&#8217;) }}/zhiboNoStart.png&#8221; alt=&#8221;&#8221;&gt;
</p>
<p>
                          &lt;span class=&#8221;noStart&#8221;&gt;直播未开始&lt;/span&gt;
</p>
<p>
                      &lt;/div&gt;
</p>
<p>
                  &lt;/div&gt;
</p>
<p>
              &lt;/div&gt;
</p>
<p>
          &lt;/a&gt;
</p>
<p>
      &lt;/li&gt; &#8211;&gt;
</p>
<p>
      @foreach ($lives as $live)
</p>
<p>
      &lt;li&gt;
</p>
<p>
          &lt;a style=&#8221;cursor:pointer&#8221; &gt;
</p>
<p>
              &lt;div class=&#8221;img&#8221;&gt;
</p>
<p>
                  @if ($live-&gt;img )
</p>
<p>
                      &lt;img src=&#8221;{{ $live-&gt;img }}&#8221; with=&#8221;285&#8243; height=&#8221;161&#8243;/&gt;
</p>
<p>
                  @else
</p>
<p>
                      &lt;img src=&#8221;{{ asset(&#8216;img/default.png&#8217;) }}&#8221; with=&#8221;285&#8243; height=&#8221;161&#8243;/&gt;
</p>
<p>
                  @endif
</p>
<p>
              &lt;/div&gt;
</p>
<p>
              &lt;div class=&#8221;public-class-live-detail&#8221;&gt;
</p>
<p>
                   &lt;div class=&#8221;detailCourseInfo clearfix&#8221;&gt;
</p>
<p>
                      &lt;div class=&#8221;detailCourseName&#8221; title=&#8221;PS超级设计师公开课&#8221;&gt;{{ $live-&gt;live_name}}&lt;/div&gt;
</p>
<p>
                      &lt;div class=&#8221;detailTeacher&#8221;&gt;讲师：任老师&lt;/div&gt;
</p>
<p>
                  &lt;/div&gt;
</p>
<p>
                  &lt;div class=&#8221;detailLiveInfo clearfix&#8221;&gt;
</p>
<p>
                      &lt;div class=&#8221;detailLiveDate&#8221;&gt;最近直播：03/24  20:00&lt;/div&gt;
</p>
<p>
                      &lt;div class=&#8221;detailLiving&#8221;&gt;
</p>
<p>
                          &lt;img src=&#8221;{{ asset(&#8216;home/img&#8217;) }}/zhiboNoStart.png&#8221; alt=&#8221;&#8221;&gt;
</p>
<p>
                          &lt;span class=&#8221;noStart&#8221;&gt;直播未开始&lt;/span&gt;
</p>
<p>
                      &lt;/div&gt;
</p>
<p>
                  &lt;/div&gt;
</p>
<p>
              &lt;/div&gt;
</p>
<p>
          &lt;/a&gt;
</p>
<p>
      &lt;/li&gt;
</p>
<p>
      @endforeach
</p>
<p>
  &lt;/ul&gt;
</p>
<h1>点击首页直播，在线观看</h1>
<p>
  步骤1：点击跳转到直播详情页
</p>
<p>
  1）定义路由
</p>
<p><img loading="lazy" decoding="async" width="853" height="191" src="/wp-content/uploads/2018/05/word-image-5350.png" class="wp-image-5888" srcset="/wp-content/uploads/2018/05/word-image-5350.png 853w, /wp-content/uploads/2018/05/word-image-5350-300x67.png 300w, /wp-content/uploads/2018/05/word-image-5350-768x172.png 768w" sizes="(max-width: 853px) 100vw, 853px" /></p>
<p>
  2）修改首页跳转链接
</p>
<p><img loading="lazy" decoding="async" width="1203" height="307" src="/wp-content/uploads/2018/05/word-image-5351.png" class="wp-image-5889" srcset="/wp-content/uploads/2018/05/word-image-5351.png 1203w, /wp-content/uploads/2018/05/word-image-5351-300x77.png 300w, /wp-content/uploads/2018/05/word-image-5351-768x196.png 768w, /wp-content/uploads/2018/05/word-image-5351-1024x261.png 1024w" sizes="(max-width: 1203px) 100vw, 1203px" /></p>
<p>
  步骤2：创建控制器方法，接受直播id，获取直播流相关信息拼接拉流地址
</p>
<p><img loading="lazy" decoding="async" width="1207" height="580" src="/wp-content/uploads/2018/05/word-image-5352.png" class="wp-image-5890" srcset="/wp-content/uploads/2018/05/word-image-5352.png 1207w, /wp-content/uploads/2018/05/word-image-5352-300x144.png 300w, /wp-content/uploads/2018/05/word-image-5352-768x369.png 768w, /wp-content/uploads/2018/05/word-image-5352-1024x492.png 1024w" sizes="(max-width: 1207px) 100vw, 1207px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Home;
</p>
<p>
  use App\Http\Model\Live;
</p>
<p>
  use App\Http\Model\Stream;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class LiveController extends Controller
</p>
<p>
  {
</p>
<p>
      //视频播放页
</p>
<p>
      public function detail(Request $request)
</p>
<p>
      {
</p>
<p>
      	//1.接受数据获取直播流信息
</p>
<p>
          $stream_id = $request-&gt;input(&#8216;stream_id&#8217;);
</p>
<p>
          //2.查询直播流信息
</p>
<p>
          $stream = Stream::where(&#8216;id&#8217;, $stream_id)-&gt;first();
</p>
<p>
          //3.拼接拉流地址
</p>
<p>
          $pullVideo = &#8220;rtmp://pili-live-rtmp.php.sk-school.com/201801140002/&#8221;.$stream-&gt;stream_name;
</p>
</p>
<p>
      	//2.传递给视图
</p>
<p>
          return view(&#8216;home.live.detail&#8217;, compact(&#8216;pullVideo&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<p>
  步骤3：点击进入详情通过ck播放器播放
</p>
<p>
  &lt;!DOCTYPE html&gt;
</p>
<p>
  &lt;html xmlns=&#8221;http://www.w3.org/1999/xhtml&#8221;&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Content-Type&#8221; content=&#8221;text/html; charset=utf-8&#8243; /&gt;
</p>
<p>
  &lt;title&gt;ckplayer简单调用演示&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;div id=&#8221;a1&#8243;&gt;&lt;/div&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; <strong>src=&#8221;{{ asset(&#8216;ck/ckplayer&#8217;) }}/ckplayer.js&#8221; </strong>charset=&#8221;utf-8&#8243;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  	var flashvars={
</p>
<p><strong>		f:'{{ $pullVideo }}&#8217;,</strong>
</p>
<p>
  		c:0,
</p>
<p>
  		b:1,
</p>
<p>
  		i:&#8217;http://www.ckplayer.com/static/images/cqdw.jpg&#8217;
</p>
<p>
  		};
</p>
<p>
  	var video=[&#8216;http://img.ksbbs.com/asset/Mon_1605/0ec8cc80112a2d6.mp4-&gt;video/mp4&#8217;];
</p>
<p>
  	CKobject.embed(&#8220;<strong>{{ asset(&#8216;ck/ckplayer&#8217;) }}</strong>/ckplayer.swf&#8221;,&#8217;a1&#8242;,&#8217;ckplayer_a1&#8242;,&#8217;600&#8242;,&#8217;400&#8242;,false,flashvars,video)
</p>
<p>
  	function closelights(){//关灯
</p>
<p>
  		alert(&#8216; 本演示不支持开关灯&#8217;);
</p>
<p>
  	}
</p>
<p>
  	function openlights(){//开灯
</p>
<p>
  		alert(&#8216; 本演示不支持开关灯&#8217;);
</p>
<p>
  	}
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;</p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5812.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel在线教育平台（五）直播课程管理、图片上传、首页点播、对象存储、日期插件、推流地址</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5792.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5792.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:36:37 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[图片上传]]></category>
		<category><![CDATA[对象存储]]></category>
		<category><![CDATA[推流地址]]></category>
		<category><![CDATA[日期插件]]></category>
		<category><![CDATA[直播课程管理]]></category>
		<category><![CDATA[首页点播]]></category>
		<guid isPermaLink="false">/?p=5792</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（5） 一、直播课程管理（获取推流地址、日期插件） 1、获取推流地址 步骤 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-5792-_Toc488249285"></a>Laravel框架实战-在线教育平台（5）</h1>
<h1><a id="post-5792-_Toc488249288"></a>一、直播课程管理（获取推流地址、日期插件）</h1>
<h2><a id="post-5792-_Toc488249289"></a>1、获取推流地址</h2>
<p>
  步骤1：定义模型
</p>
<p><img loading="lazy" decoding="async" width="1053" height="416" src="/wp-content/uploads/2018/05/word-image-5257.png" class="wp-image-5793" srcset="/wp-content/uploads/2018/05/word-image-5257.png 1053w, /wp-content/uploads/2018/05/word-image-5257-300x119.png 300w, /wp-content/uploads/2018/05/word-image-5257-768x303.png 768w, /wp-content/uploads/2018/05/word-image-5257-1024x405.png 1024w" sizes="(max-width: 1053px) 100vw, 1053px" /></p>
<p>
  /**
</p>
<p>
   * 关联直播流模型（1:1）
</p>
<p>
   * 语法：模型名::with（&#8217;role&#8217;）-&gt;first()
</p>
<p>
   * @return \Illuminate\Database\Eloquent\Relations\HasOne
</p>
<p>
   */
</p>
<p>
  public function stream()
</p>
<p>
  {
</p>
<p>
      #return $this-&gt;hasOne(关联模型名，关联模型公共字段，本模型公共字段)
</p>
<p>
      return $this-&gt;hasOne(&#8216;App\Http\Model\Stream&#8217;,&#8217;id&#8217;, &#8216;stream_id&#8217;);
</p>
<p>
  }
</p>
<p>
  步骤2：修改控制器
</p>
<p><img loading="lazy" decoding="async" width="993" height="421" src="/wp-content/uploads/2018/05/word-image-5258.png" class="wp-image-5794" srcset="/wp-content/uploads/2018/05/word-image-5258.png 993w, /wp-content/uploads/2018/05/word-image-5258-300x127.png 300w, /wp-content/uploads/2018/05/word-image-5258-768x326.png 768w" sizes="(max-width: 993px) 100vw, 993px" /></p>
<p>
  步骤3：修改视图
</p>
<p><img loading="lazy" decoding="async" width="1235" height="533" src="/wp-content/uploads/2018/05/word-image-5259.png" class="wp-image-5795" srcset="/wp-content/uploads/2018/05/word-image-5259.png 1235w, /wp-content/uploads/2018/05/word-image-5259-300x129.png 300w, /wp-content/uploads/2018/05/word-image-5259-768x331.png 768w, /wp-content/uploads/2018/05/word-image-5259-1024x442.png 1024w" sizes="(max-width: 1235px) 100vw, 1235px" /></p>
<h2>日期插件</h2>
<p>
  配置手册：<a href="http://www.my97.net/demo/index.htm">http://www.my97.net/demo/index.htm</a>
</p>
<p><img loading="lazy" decoding="async" width="1101" height="335" src="/wp-content/uploads/2018/05/word-image-5260.png" class="wp-image-5796" srcset="/wp-content/uploads/2018/05/word-image-5260.png 1101w, /wp-content/uploads/2018/05/word-image-5260-300x91.png 300w, /wp-content/uploads/2018/05/word-image-5260-768x234.png 768w, /wp-content/uploads/2018/05/word-image-5260-1024x312.png 1024w" sizes="(max-width: 1101px) 100vw, 1101px" /></p>
<h2>图片上传【★★★】</h2>
<h3>webuploader插件介绍</h3>
<p>
  说明：就是由百度团队开发的一个上传插件
</p>
<p>
  地址：<a href="http://fex.baidu.com/webuploader/">http://fex.baidu.com/webuploader/</a>
</p>
<p><img loading="lazy" decoding="async" width="1134" height="495" src="/wp-content/uploads/2018/05/word-image-5261.png" class="wp-image-5797" srcset="/wp-content/uploads/2018/05/word-image-5261.png 1134w, /wp-content/uploads/2018/05/word-image-5261-300x131.png 300w, /wp-content/uploads/2018/05/word-image-5261-768x335.png 768w, /wp-content/uploads/2018/05/word-image-5261-1024x447.png 1024w" sizes="(max-width: 1134px) 100vw, 1134px" /></p>
<h3>使用</h3>
<ul>
<li>
    语法：
  </li>
</ul>
<p>
  检查是否存在指定键：$request-&gt;hasFile(&#8216;file&#8217;)
</p>
<p>
  检查是否上传成功：  $request-&gt;file(&#8216;file&#8217;)-&gt;isValid()
</p>
<p>
  存储文件：    $request-&gt;file(&#8216;file&#8217;)-&gt;store(&#8216;子路径&#8217;，存储驱动器的名称);
</p>
<ul>
<li>
    实现步骤：
  </li>
</ul>
<p>
  步骤1：将官方下载的文件移动到public目录下的webuploader文件夹中
</p>
<p><img loading="lazy" decoding="async" width="335" height="317" src="/wp-content/uploads/2018/05/word-image-5262.png" class="wp-image-5798" srcset="/wp-content/uploads/2018/05/word-image-5262.png 335w, /wp-content/uploads/2018/05/word-image-5262-300x284.png 300w" sizes="(max-width: 335px) 100vw, 335px" /></p>
<p>
  步骤2：（视图代码）打开手册引入静态资源并复制初始化代码
</p>
<p><img loading="lazy" decoding="async" width="1038" height="501" src="/wp-content/uploads/2018/05/word-image-5263.png" class="wp-image-5799" srcset="/wp-content/uploads/2018/05/word-image-5263.png 1038w, /wp-content/uploads/2018/05/word-image-5263-300x145.png 300w, /wp-content/uploads/2018/05/word-image-5263-768x371.png 768w, /wp-content/uploads/2018/05/word-image-5263-1024x494.png 1024w" sizes="(max-width: 1038px) 100vw, 1038px" /><br />
<img loading="lazy" decoding="async" width="953" height="673" src="/wp-content/uploads/2018/05/word-image-5264.png" class="wp-image-5800" srcset="/wp-content/uploads/2018/05/word-image-5264.png 953w, /wp-content/uploads/2018/05/word-image-5264-300x212.png 300w, /wp-content/uploads/2018/05/word-image-5264-768x542.png 768w" sizes="(max-width: 953px) 100vw, 953px" /></p>
<p>
  &lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  	&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;封面&lt;/label&gt;
</p>
<p>
  	&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  		&lt;!&#8211;dom结构部分&#8211;&gt;
</p>
<p>
  		&lt;div id=&#8221;uploader-demo&#8221;&gt;
</p>
<p>
  		    &lt;!&#8211;用来存放item&#8211;&gt;
</p>
<p>
  		    &lt;div id=&#8221;fileList&#8221; class=&#8221;uploader-list&#8221;&gt;&lt;/div&gt;
</p>
<p>
  		    &lt;div id=&#8221;filePicker&#8221;&gt;选择图片&lt;/div&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  		&lt;div id=&#8221;showimg&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  		&lt;div id=&#8221;uploading&#8221; style=&#8221;width:0%;height:20px;background: blue;&#8221;&gt;&lt;/div&gt;
</p>
<p>
  		&lt;input required type=&#8221;text&#8221; class=&#8221;input-text&#8221; value=&#8221;&#8221; placeholder=&#8221;&#8221; id=&#8221;img&#8221; name=&#8221;img&#8221;&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;引入CSS&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;webuploader&#8217;) }}/webuploader.css&#8221;&gt;
</p>
<p>
  &lt;!&#8211;引入JS&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;webuploader&#8217;) }}/webuploader.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  // 初始化Web Uploader
</p>
<p>
  var uploader = WebUploader.create({
</p>
<p>
  	// 设置自定义请求数据
</p>
<p>
  	formData: {
</p>
<p>
  		_token: &#8216;{{ csrf_token() }}&#8217;
</p>
<p>
  	},
</p>
<p>
      // 选完文件后，是否自动上传。
</p>
<p>
      auto: true,
</p>
<p>
      // swf文件路径
</p>
<p>
      swf: &#8216;{{ asset(&#8220;webuploader&#8221;) }}/Uploader.swf&#8217;,
</p>
<p>
      // 文件接收服务端。
</p>
<p>
      server: &#8221; {{ url(&#8216;admin/upload/file&#8217;) }}&#8221;,
</p>
<p>
      // 选择文件的按钮。可选。
</p>
<p>
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
</p>
<p>
      pick: &#8216;#filePicker&#8217;,
</p>
<p>
      // 只允许选择图片文件。
</p>
<p>
      accept: {
</p>
<p>
          title: &#8216;Images&#8217;,
</p>
<p>
          extensions: &#8216;gif,jpg,jpeg,bmp,png&#8217;,
</p>
<p>
          mimeTypes: &#8216;image/*&#8217;
</p>
<p>
      }
</p>
<p>
  });
</p>
<p>
  // 文件上传成功，给item添加成功class, 用样式标记上传成功。
</p>
<p>
  uploader.on( &#8216;uploadSuccess&#8217;, function( file, response ) {
</p>
<p>
     //file是原上传文件信息，相当于php的$_FILES数据
</p>
<p>
     //response是php上传文件响应的数据
</p>
<p>
     console.log(response);
</p>
<p>
     $(&#8216;#img&#8217;).val(response.info);
</p>
<p>
     var imgSrc = &#8220;{{asset(&#8216;uploads&#8217;)}}&#8221; + &#8216;/&#8217; + response.info;
</p>
<p>
     $(&#8216;#showimg&#8217;).html(&#8216;&lt;img src=&#8221;&#8216;+imgSrc+'&#8221; width=&#8221;120&#8243; height=&#8221;80&#8243; /&gt;&#8217;)
</p>
<p>
  });
</p>
<p>
  // 文件上传过程中创建进度条实时显示。
</p>
<p>
  uploader.on( &#8216;uploadProgress&#8217;, function( file, percentage ) {
</p>
<p>
      $(&#8216;#uploading&#8217;).css( &#8216;width&#8217;, percentage * 100 + &#8216;%&#8217; );
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  步骤3：定义路由，并创建控制器书写上传功能代码
</p>
<p><img loading="lazy" decoding="async" width="1114" height="446" src="/wp-content/uploads/2018/05/word-image-5265.png" class="wp-image-5801" srcset="/wp-content/uploads/2018/05/word-image-5265.png 1114w, /wp-content/uploads/2018/05/word-image-5265-300x120.png 300w, /wp-content/uploads/2018/05/word-image-5265-768x307.png 768w, /wp-content/uploads/2018/05/word-image-5265-1024x410.png 1024w" sizes="(max-width: 1114px) 100vw, 1114px" /><br />
<img loading="lazy" decoding="async" width="1225" height="579" src="/wp-content/uploads/2018/05/word-image-5266.png" class="wp-image-5802" srcset="/wp-content/uploads/2018/05/word-image-5266.png 1225w, /wp-content/uploads/2018/05/word-image-5266-300x142.png 300w, /wp-content/uploads/2018/05/word-image-5266-768x363.png 768w, /wp-content/uploads/2018/05/word-image-5266-1024x484.png 1024w" sizes="(max-width: 1225px) 100vw, 1225px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class UploadController extends Controller
</p>
<p>
  {
</p>
<p>
      //上传文件
</p>
<p>
      public function file(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）
</p>
<p>
          if ($request-&gt;hasFile(&#8216;file&#8217;) &amp;&amp; $request-&gt;file(&#8216;file&#8217;)-&gt;isValid()) {
</p>
<p>
              //2.上传文件
</p>
<p>
              //语法：     request-&gt;file(&#8216;file&#8217;)-&gt;store(&#8216;子路径&#8217;，存储驱动器的名称);
</p>
<p>
              //store是官方存储文件方法
</p>
<p>
              //存储驱动器的名称：对应config/filesystems.php文件
</p>
<p>
              //子路径：          指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件
</p>
<p>
              $filename = $request-&gt;file(&#8216;file&#8217;)-&gt;store(&#8216;img&#8217;, &#8216;upload&#8217;);
</p>
<p>
              return [&#8216;info&#8217; =&gt; $filename];
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<p><img loading="lazy" decoding="async" width="936" height="566" src="/wp-content/uploads/2018/05/word-image-5267.png" class="wp-image-5803" srcset="/wp-content/uploads/2018/05/word-image-5267.png 936w, /wp-content/uploads/2018/05/word-image-5267-300x181.png 300w, /wp-content/uploads/2018/05/word-image-5267-768x464.png 768w" sizes="(max-width: 936px) 100vw, 936px" /></p>
<h2>更改图片上传规则到七牛云【★★★】</h2>
<h3>1）对象存储介绍</h3>
<p>
  对象存储简单理解：就是用来存放静态资源的服务器
</p>
<p>
  好处：减少冗余，便于维护
</p>
<h3>2）使用（zgldh/qiniu-laravel-storage）</h3>
<p>
  步骤1：下载并配置根据下图文档 composer reqiure zgldh/qiniu-laravel-storage
</p>
<p><img loading="lazy" decoding="async" width="951" height="574" src="/wp-content/uploads/2018/05/word-image-5268.png" class="wp-image-5804" srcset="/wp-content/uploads/2018/05/word-image-5268.png 951w, /wp-content/uploads/2018/05/word-image-5268-300x181.png 300w, /wp-content/uploads/2018/05/word-image-5268-768x464.png 768w" sizes="(max-width: 951px) 100vw, 951px" /><br />
<img loading="lazy" decoding="async" width="1117" height="539" src="/wp-content/uploads/2018/05/word-image-5269.png" class="wp-image-5805" srcset="/wp-content/uploads/2018/05/word-image-5269.png 1117w, /wp-content/uploads/2018/05/word-image-5269-300x145.png 300w, /wp-content/uploads/2018/05/word-image-5269-768x371.png 768w, /wp-content/uploads/2018/05/word-image-5269-1024x494.png 1024w" sizes="(max-width: 1117px) 100vw, 1117px" /></p>
<p>
  步骤2：打开控制器方法将上传到laravel项目代码更改为上传到七牛云即可
</p>
<p><img loading="lazy" decoding="async" width="652" height="432" src="/wp-content/uploads/2018/05/word-image-5270.png" class="wp-image-5806" srcset="/wp-content/uploads/2018/05/word-image-5270.png 652w, /wp-content/uploads/2018/05/word-image-5270-300x199.png 300w" sizes="(max-width: 652px) 100vw, 652px" /><br />
<img loading="lazy" decoding="async" width="596" height="55" src="/wp-content/uploads/2018/05/word-image-5271.png" class="wp-image-5807" srcset="/wp-content/uploads/2018/05/word-image-5271.png 596w, /wp-content/uploads/2018/05/word-image-5271-300x28.png 300w" sizes="(max-width: 596px) 100vw, 596px" /><br />
<img loading="lazy" decoding="async" width="1236" height="606" src="/wp-content/uploads/2018/05/word-image-5272.png" class="wp-image-5808" srcset="/wp-content/uploads/2018/05/word-image-5272.png 1236w, /wp-content/uploads/2018/05/word-image-5272-300x147.png 300w, /wp-content/uploads/2018/05/word-image-5272-768x377.png 768w, /wp-content/uploads/2018/05/word-image-5272-1024x502.png 1024w" sizes="(max-width: 1236px) 100vw, 1236px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class UploadController extends Controller
</p>
<p>
  {
</p>
<p>
      //上传文件
</p>
<p>
      public function file(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断$_FILES[file键]是否存在，并且$_FILES[键][error] 等于0 （也就是没有错误）
</p>
<p>
          if ($request-&gt;hasFile(&#8216;file&#8217;) &amp;&amp; $request-&gt;file(&#8216;file&#8217;)-&gt;isValid()) {
</p>
<p>
              //2.上传文件
</p>
<p>
              //语法：     request-&gt;file(&#8216;file&#8217;)-&gt;store(&#8216;子路径&#8217;，存储驱动器的名称);
</p>
<p>
              //store是官方存储文件方法
</p>
<p>
              //存储驱动器的名称：对应config/filesystems.php文件
</p>
<p>
              //子路径：          指会在config/filesystems.php文件声明的上传文件夹下再创建一个文件
</p>
<p>
              //$filename = $request-&gt;file(&#8216;file&#8217;)-&gt;store(&#8216;img&#8217;, &#8216;upload&#8217;);
</p>
</p>
<p>
              ###更改七牛云存储图片
</p>
<p>
              //定义上传文件名称
</p>
<p>
              $filename = uniqid(&#8216;goods&#8217;.date(&#8216;YmdHis&#8217;,time()));
</p>
<p>
              //从临时文件中获取图片数据
</p>
<p>
              $imgData = file_get_contents($request-&gt;file(&#8216;file&#8217;)-&gt;getPathName());
</p>
<p>
              //上传
</p>
<p>
              \Storage::disk(&#8216;qiniu&#8217;)-&gt;put($filename, $imgData); //上传文件 file_get_contents(XX.PNG)
</p>
<p>
              //获取下载地址（图片地址）
</p>
<p>
              $downloadUrl = \Storage::disk(&#8216;qiniu&#8217;)-&gt;getDriver()-&gt;downloadUrl($filename);
</p>
</p>
<p>
              return [&#8216;info&#8217; =&gt; $downloadUrl];
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1>更改直播播放视图</h1>
<p>
  步骤1：将直播详情页静态代码替换edu项目中的直播详情页
</p>
<p><img loading="lazy" decoding="async" width="596" height="222" src="/wp-content/uploads/2018/05/word-image-5273.png" class="wp-image-5809" srcset="/wp-content/uploads/2018/05/word-image-5273.png 596w, /wp-content/uploads/2018/05/word-image-5273-300x112.png 300w" sizes="(max-width: 596px) 100vw, 596px" /></p>
<p>
  步骤：将直播地址更改为变量
</p>
<p><img loading="lazy" decoding="async" width="917" height="485" src="/wp-content/uploads/2018/05/word-image-5274.png" class="wp-image-5810" srcset="/wp-content/uploads/2018/05/word-image-5274.png 917w, /wp-content/uploads/2018/05/word-image-5274-300x159.png 300w, /wp-content/uploads/2018/05/word-image-5274-768x406.png 768w" sizes="(max-width: 917px) 100vw, 917px" /></p>
<h1>首页点播功能</h1>
<p>
  快进看视频，主要理解思路，最好自己写一写
</p>
<p>
  图片懒加载：<a href="http://www.jq22.com/jquery-info390">http://www.jq22.com/jquery-info390</a>
</p>
<h1><a id="post-5792-_Toc488330851"></a>四、总结</h1>
<p>
  本项目中使用了以下几个插件/功能：
</p>
<p>
  Laravel自带组件：
</p>
<p>
  DebugBar（调试工具）、
</p>
<p>
  laravelexcel（导出导入excel文件）、
</p>
<p>
  QiniuSDK（云存储）、
</p>
<p>
  GuzzleHttp（发送请求）
</p>
<p>
  JQuery插件：
</p>
<p>
  datatables（数据表格无刷新分页）、
</p>
<p>
  webuploader（上传文件）、
</p>
<p>
  validate（表单验证插件）、
</p>
<p>
  layer（弹框插件）
</p>
<p>
  直播内容
</p>
<p>
  	七牛直播云
</p>
<p>
  	OBS推流软件使用
</p>
<p>
  	视频播放器Ckplayer（拉流）</p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5792.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Laravel在线教育平台（六）数据字典、数据迁移、后台试卷管理、试卷导出、答题处理、支付宝</title>
		<link>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5738.html</link>
					<comments>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5738.html#respond</comments>
		
		<dc:creator><![CDATA[Mr.Lee]]></dc:creator>
		<pubDate>Sat, 19 May 2018 15:33:26 +0000</pubDate>
				<category><![CDATA[Laravel]]></category>
		<category><![CDATA[Laravel在线教育平台]]></category>
		<category><![CDATA[后台框架]]></category>
		<category><![CDATA[后台试卷管理]]></category>
		<category><![CDATA[支付宝]]></category>
		<category><![CDATA[数据字典]]></category>
		<category><![CDATA[数据迁移]]></category>
		<category><![CDATA[答题处理]]></category>
		<category><![CDATA[试卷导出]]></category>
		<guid isPermaLink="false">/?p=5738</guid>

					<description><![CDATA[Laravel框架实战-在线教育平台（6） ︴准备 1、数据字典 后台试卷表 表名 paper 序号 字段 类 [&#8230;]]]></description>
										<content:encoded><![CDATA[<h1><a id="post-5738-_Toc488249285"></a>Laravel框架实战-在线教育平台（6）</h1>
<h1><a id="post-5738-_Toc488076574"></a>︴准备  </h1>
<h2>1、数据字典</h2>
<h3>后台试卷表</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  paper
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  paper_name
</p>
</td>
<td>
<p>
  varchar(50)
</p>
</td>
<td>
<p>
  试卷名
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  course_id
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  关联课程ID，所属的课程
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  score
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  试卷总分
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  100
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<h3>后台试题表</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  question
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  type
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  类型：1-单选，2-多选
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  question
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  试题具体内容
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  paper_id
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  关联试卷ID
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  score
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  该题总分
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  2
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  options
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  选项内容
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  answer
</p>
</td>
<td>
<p>
  varchar(1)
</p>
</td>
<td>
<p>
  正确答案
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  remark
</p>
</td>
<td>
<p>
  varchar(255)
</p>
</td>
<td>
<p>
  试题备注说明
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  9
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  10
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<h3>答题表</h3>
<table>
<tr>
<td>
<p><strong>表名</strong>
</p>
</td>
<td colspan="6">
<p>
  answer
</p>
</td>
</tr>
<tr>
<td>
<p><strong>序号</strong>
</p>
</td>
<td>
<p><strong>字段</strong>
</p>
</td>
<td>
<p><strong>类型</strong>
</p>
</td>
<td>
<p><strong>说明</strong>
</p>
</td>
<td>
<p><strong>空</strong>
</p>
</td>
<td>
<p><strong>默认值</strong>
</p>
</td>
<td>
<p><strong>主键</strong>
</p>
</td>
</tr>
<tr>
<td>
<p>
  1
</p>
</td>
<td>
<p>
  id
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  自增主键
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  N/A
</p>
</td>
<td>
<p>
  是
</p>
</td>
</tr>
<tr>
<td>
<p>
  2
</p>
</td>
<td>
<p>
  paper_id
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  试卷ID
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  3
</p>
</td>
<td>
<p>
  question_id
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  关联课程ID，所属的课程
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  4
</p>
</td>
<td>
<p>
  member_id
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  会员ID
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  5
</p>
</td>
<td>
<p>
  is_correct
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  是否正确：1-正确，2-错误
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  2
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  6
</p>
</td>
<td>
<p>
  score
</p>
</td>
<td>
<p>
  tinyint
</p>
</td>
<td>
<p>
  得分
</p>
</td>
<td>
<p>
  N
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  7
</p>
</td>
<td>
<p>
  answer
</p>
</td>
<td>
<p>
  char(4)
</p>
</td>
<td>
<p>
  学生的答案
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td></td>
<td></td>
</tr>
<tr>
<td>
<p>
  8
</p>
</td>
<td>
<p>
  updated_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  创建于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
<tr>
<td>
<p>
  9
</p>
</td>
<td>
<p>
  created_at
</p>
</td>
<td>
<p>
  int
</p>
</td>
<td>
<p>
  更新于
</p>
</td>
<td>
<p>
  Y
</p>
</td>
<td>
<p>
  0
</p>
</td>
<td></td>
</tr>
</table>
<h2>数据迁移</h2>
<p>
  步骤1：创建迁移文件（该迁移文件一次性创建三个表）
</p>
<p>
  步骤2：编写迁移文件
</p>
<p>
  步骤3：执行迁移文件
</p>
<p><img loading="lazy" decoding="async" width="1332" height="574" src="/wp-content/uploads/2018/05/word-image-5210.png" class="wp-image-5741" srcset="/wp-content/uploads/2018/05/word-image-5210.png 1332w, /wp-content/uploads/2018/05/word-image-5210-300x129.png 300w, /wp-content/uploads/2018/05/word-image-5210-768x331.png 768w, /wp-content/uploads/2018/05/word-image-5210-1024x441.png 1024w" sizes="(max-width: 1332px) 100vw, 1332px" /></p>
<p>
  &lt;?php
</p>
<p>
  use Illuminate\Support\Facades\Schema;
</p>
<p>
  use Illuminate\Database\Schema\Blueprint;
</p>
<p>
  use Illuminate\Database\Migrations\Migration;
</p>
<p>
  class CreateKaoshiTable extends Migration
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * Run the migrations.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function up()
</p>
<p>
      {
</p>
<p>
          #试卷
</p>
<p>
          Schema::create(&#8216;paper&#8217;, function (Blueprint $table) {
</p>
<p>
              $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;paper_name&#8217;, 50)-&gt;comment(&#8216;试卷名&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;course_id&#8217;)-&gt;comment(&#8216;关联课程ID，所属的课程&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;score&#8217;)-&gt;default(100)-&gt;comment(&#8216;试卷总分&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;更新于&#8217;);
</p>
<p>
          });
</p>
<p>
          #试题
</p>
<p>
          Schema::create(&#8216;question&#8217;, function (Blueprint $table) {
</p>
<p>
              $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;type&#8217;)-&gt;default(1)-&gt;comment(&#8216;类型:1-单选,2-多选&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;paper_id&#8217;)-&gt;comment(&#8216;关联试卷ID&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;score&#8217;)-&gt;comment(&#8216;该题总分&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;question&#8217;)-&gt;comment(&#8216;试题具体内容&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;options&#8217;)-&gt;comment(&#8216;选项内容&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;answer&#8217;)-&gt;comment(&#8216;正确答案&#8217;);
</p>
<p>
              $table-&gt;string(&#8216;remark&#8217;)-&gt;comment(&#8216;试题备注说明&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;更新于&#8217;);
</p>
<p>
          });
</p>
<p>
          #答题表
</p>
<p>
          Schema::create(&#8216;answer&#8217;, function (Blueprint $table) {
</p>
<p>
              $table-&gt;increments(&#8216;id&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;paper_id&#8217;)-&gt;comment(&#8216;关联试卷ID&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;question_id&#8217;)-&gt;comment(&#8216;关联课程ID，所属的课程&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;member_id&#8217;)-&gt;comment(&#8216;会员ID&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;is_correct&#8217;)-&gt;comment(&#8216;是否正确:1-是,2-否&#8217;);
</p>
<p>
              $table-&gt;unsignedTinyInteger(&#8216;score&#8217;)-&gt;default(0)-&gt;comment(&#8216;得分&#8217;);
</p>
<p>
              $table-&gt;char(&#8216;answer&#8217;, 4)-&gt;comment(&#8216;学生的答案&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;created_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;创建于&#8217;);
</p>
<p>
              $table-&gt;unsignedInteger(&#8216;updated_at&#8217;)-&gt;default(0)-&gt;comment(&#8216;更新于&#8217;);
</p>
<p>
          });
</p>
<p>
      }
</p>
<p>
      /**
</p>
<p>
       * Reverse the migrations.
</p>
<p>
       *
</p>
<p>
       * @return void
</p>
<p>
       */
</p>
<p>
      public function down()
</p>
<p>
      {
</p>
<p>
          //
</p>
<p>
      }
</p>
<p>
  }
</p>
<p><img loading="lazy" decoding="async" width="393" height="95" src="/wp-content/uploads/2018/05/word-image-5211.png" class="wp-image-5742" srcset="/wp-content/uploads/2018/05/word-image-5211.png 393w, /wp-content/uploads/2018/05/word-image-5211-300x73.png 300w" sizes="(max-width: 393px) 100vw, 393px" /></p>
<h2>模型</h2>
<p>
  paper
</p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Paper extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;paper&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;paper_name&#8217;, &#8216;course_id&#8217;, &#8216;score&#8217;];
</p>
<p>
  }
</p>
<p>
  question
</p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Question extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;question&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;type&#8217;, &#8216;paper_id&#8217;, &#8216;score&#8217;, &#8216;question&#8217;, &#8216;options&#8217;, &#8216;answer&#8217;, &#8216;remark&#8217;];
</p>
<p>
  }
</p>
<p>
  answer
</p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Model;
</p>
<p>
  use Illuminate\Database\Eloquent\Model;
</p>
<p>
  class Answer extends Model
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 声明表名（注：laravel会自动加s所以自己声明覆盖）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $table = &#8216;answer&#8217;;
</p>
<p>
      /**
</p>
<p>
       * Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）
</p>
<p>
       * @var string
</p>
<p>
       */
</p>
<p>
      protected $dateFormat = &#8216;U&#8217;;
</p>
<p>
      /**
</p>
<p>
       * 声明可批量设置的属性（注：当使用create静态方式时）
</p>
<p>
       * @var array
</p>
<p>
       */
</p>
<p>
      protected $fillable = [&#8216;paper_id&#8217;, &#8216;question_id&#8217;, &#8216;member_id&#8217;, &#8216;is_correct&#8217;, &#8216;score&#8217;, &#8216;answer&#8217;];
</p>
<p>
  }
</p>
<h1><a id="post-5738-_Toc488249288"></a>一、后台试卷管理</h1>
<h2>1、设置添加试卷入口</h2>
<p><img loading="lazy" decoding="async" width="1135" height="308" src="/wp-content/uploads/2018/05/word-image-5212.png" class="wp-image-5743" srcset="/wp-content/uploads/2018/05/word-image-5212.png 1135w, /wp-content/uploads/2018/05/word-image-5212-300x81.png 300w, /wp-content/uploads/2018/05/word-image-5212-768x208.png 768w, /wp-content/uploads/2018/05/word-image-5212-1024x278.png 1024w" sizes="(max-width: 1135px) 100vw, 1135px" /></p>
<p>
  &lt;dl id=&#8221;menu-tongji&#8221;&gt;
</p>
<p>
  		&lt;dt&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe61a;&lt;/i&gt; 考试管理&lt;i class=&#8221;Hui-iconfont menu_dropdown-arrow&#8221;&gt;&amp;#xe6d5;&lt;/i&gt;&lt;/dt&gt;
</p>
<p>
  		&lt;dd&gt;
</p>
<p>
  			&lt;ul&gt;
</p>
<p>
  				&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/paper/index&#8217;) }}&#8221; data-title=&#8221;试卷管理&#8221;   href=&#8221;javascript:void(0)&#8221;&gt;试卷管理&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  				&lt;li&gt;&lt;a data-href=&#8221;{{ url(&#8216;admin/question/index&#8217;) }}&#8221; data-title=&#8221;试题管理&#8221;  href=&#8221;javascript:void(0)&#8221;&gt;试题管理&lt;/a&gt;&lt;/li&gt;
</p>
<p>
  		&lt;/ul&gt;
</p>
<p>
  	&lt;/dd&gt;
</p>
<p>
  &lt;/dl&gt;
</p>
<p><img loading="lazy" decoding="async" width="391" height="444" src="/wp-content/uploads/2018/05/word-image-5213.png" class="wp-image-5744" srcset="/wp-content/uploads/2018/05/word-image-5213.png 391w, /wp-content/uploads/2018/05/word-image-5213-264x300.png 264w" sizes="(max-width: 391px) 100vw, 391px" /></p>
<h2>列表</h2>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="885" height="301" src="/wp-content/uploads/2018/05/word-image-5214.png" class="wp-image-5745" srcset="/wp-content/uploads/2018/05/word-image-5214.png 885w, /wp-content/uploads/2018/05/word-image-5214-300x102.png 300w, /wp-content/uploads/2018/05/word-image-5214-768x261.png 768w" sizes="(max-width: 885px) 100vw, 885px" /></p>
<ul>
<li>
    步骤2：创建控制器和方法、方法通过模型获取数据库所有数据，并传递给视图
  </li>
</ul>
<p>
  步骤1：修改模型，增加关联方法
</p>
<p><img loading="lazy" decoding="async" width="1102" height="449" src="/wp-content/uploads/2018/05/word-image-5215.png" class="wp-image-5746" srcset="/wp-content/uploads/2018/05/word-image-5215.png 1102w, /wp-content/uploads/2018/05/word-image-5215-300x122.png 300w, /wp-content/uploads/2018/05/word-image-5215-768x313.png 768w, /wp-content/uploads/2018/05/word-image-5215-1024x417.png 1024w" sizes="(max-width: 1102px) 100vw, 1102px" /></p>
<p>
  /**
</p>
<p>
   * 关联课程
</p>
<p>
   */
</p>
<p>
  public function course()
</p>
<p>
  {
</p>
<p>
      return $this-&gt;hasOne(&#8216;App\Http\Model\Course&#8217;, &#8216;id&#8217;, &#8216;course_id&#8217;);
</p>
<p>
  }
</p>
<p>
  步骤2：控制器代码
</p>
<p><img loading="lazy" decoding="async" width="939" height="544" src="/wp-content/uploads/2018/05/word-image-5216.png" class="wp-image-5747" srcset="/wp-content/uploads/2018/05/word-image-5216.png 939w, /wp-content/uploads/2018/05/word-image-5216-300x174.png 300w, /wp-content/uploads/2018/05/word-image-5216-768x445.png 768w" sizes="(max-width: 939px) 100vw, 939px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Paper;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class PaperController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.查询所有数据
</p>
<p>
          $papers = Paper::with(&#8216;course&#8217;)-&gt;get();
</p>
<p>
          //2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.paper.index&#8217;, compact(&#8216;papers&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤3：视图循环显示（注：页面随便复制一个功能的列表进行修改）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1316" height="645" src="/wp-content/uploads/2018/05/word-image-5217.png" class="wp-image-5748" srcset="/wp-content/uploads/2018/05/word-image-5217.png 1316w, /wp-content/uploads/2018/05/word-image-5217-300x147.png 300w, /wp-content/uploads/2018/05/word-image-5217-768x376.png 768w, /wp-content/uploads/2018/05/word-image-5217-1024x502.png 1024w" sizes="(max-width: 1316px) 100vw, 1316px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;试卷管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 试卷管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;试卷名称&#8221; id=&#8221;search_content&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;button&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;search&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜试卷节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt;
</p>
<p>
  		 &lt;span class=&#8221;l&#8221;&gt;
</p>
<p>
  		 &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;
</p>
<p>
  		 	&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除
</p>
<p>
  		 &lt;/a&gt;
</p>
<p>
  		 &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加试卷节点&#8217;,'{{ url(&#8216;admin/auth/add&#8217;) }}&#8217;,&#8217;400&#8242;,&#8217;360&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;
</p>
<p>
  		 	&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加试卷节点
</p>
<p>
  		 &lt;/a&gt;
</p>
<p>
  		&lt;/span&gt;
</p>
<p>
  		&lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;8&#8243;&gt;试卷节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;试卷名&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;所属的课程&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;试卷总分&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;创建于&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;更新于&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($papers as $paper)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;{{ $paper-&gt;id }}&#8221; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $paper-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $paper-&gt;paper_name }}&lt;/td&gt;
</p>
<p>
  				&lt;!&#8211; &lt;td&gt;{{ $paper-&gt;course_id }}&lt;/td&gt; &#8211;&gt;
</p>
<p>
  				&lt;td&gt;{{ $paper-&gt;course-&gt;course_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $paper-&gt;score }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $paper-&gt;created_at }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $paper-&gt;updated_at }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  var table = $(&#8216;table&#8217;).DataTable({
</p>
<p>
      iDisplayLength:2,	    //限制每页显示条数
</p>
<p>
      // searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  //客户端搜索功能更
</p>
<p>
  $(&#8216;#search&#8217;).click(function(){
</p>
<p>
      var search_content = $(&#8216;#search_content&#8217;).val();
</p>
<p>
      table.search(search_content).draw();
</p>
<p>
  });
</p>
<p>
  $(function(){
</p>
<p>
      $(&#8216;#DataTables_Table_0_filter&#8217;).hide();
</p>
<p>
  });
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-试卷-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-试卷-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-试卷-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
</p>
<h2>3、添加试卷</h2>
<h3>1）加载视图</h3>
<ul>
<li>
    步骤1：定义路由（支持get和post提价）
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1057" height="263" src="/wp-content/uploads/2018/05/word-image-5218.png" class="wp-image-5749" srcset="/wp-content/uploads/2018/05/word-image-5218.png 1057w, /wp-content/uploads/2018/05/word-image-5218-300x75.png 300w, /wp-content/uploads/2018/05/word-image-5218-768x191.png 768w, /wp-content/uploads/2018/05/word-image-5218-1024x255.png 1024w" sizes="(max-width: 1057px) 100vw, 1057px" /></p>
<ul>
<li>
    步骤2：更改试卷列表视图中的添加试卷按钮链接
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1230" height="223" src="/wp-content/uploads/2018/05/word-image-5219.png" class="wp-image-5750" srcset="/wp-content/uploads/2018/05/word-image-5219.png 1230w, /wp-content/uploads/2018/05/word-image-5219-300x54.png 300w, /wp-content/uploads/2018/05/word-image-5219-768x139.png 768w, /wp-content/uploads/2018/05/word-image-5219-1024x186.png 1024w" sizes="(max-width: 1230px) 100vw, 1230px" /></p>
<ul>
<li>
    步骤3：更改add.blade.php视图（因为之前是直接复制auth的添加视图）
  </li>
</ul>
<p>
  步骤1：修改控制器查询所有课程
</p>
<p><img loading="lazy" decoding="async" width="1035" height="465" src="/wp-content/uploads/2018/05/word-image-5220.png" class="wp-image-5751" srcset="/wp-content/uploads/2018/05/word-image-5220.png 1035w, /wp-content/uploads/2018/05/word-image-5220-300x135.png 300w, /wp-content/uploads/2018/05/word-image-5220-768x345.png 768w, /wp-content/uploads/2018/05/word-image-5220-1024x460.png 1024w" sizes="(max-width: 1035px) 100vw, 1035px" /></p>
<p>
  步骤2：创建视图
</p>
<p><img loading="lazy" decoding="async" width="1236" height="686" src="/wp-content/uploads/2018/05/word-image-5221.png" class="wp-image-5752" srcset="/wp-content/uploads/2018/05/word-image-5221.png 1236w, /wp-content/uploads/2018/05/word-image-5221-300x167.png 300w, /wp-content/uploads/2018/05/word-image-5221-768x426.png 768w, /wp-content/uploads/2018/05/word-image-5221-1024x568.png 1024w" sizes="(max-width: 1236px) 100vw, 1236px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;添加管理员 &#8211; 管理员管理 &#8211; H-ui.admin v3.1&lt;/title&gt;
</p>
<p>
  &lt;meta name=&#8221;keywords&#8221; content=&#8221;H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载&#8221;&gt;
</p>
<p>
  &lt;meta name=&#8221;description&#8221; content=&#8221;H-ui.admin v3.1，是一款由国人开发的轻量级扁平化网站后台模板，完全免费开源的网站后台管理系统模版，适合中小型CMS后台系统。&#8221;&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;article class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;form class=&#8221;form form-horizontal&#8221; id=&#8221;form-admin-add&#8221;&gt;
</p>
<p>
  		{{ csrf_field() }}
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;试卷名称：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; id=&#8221;paper_name&#8221; name=&#8221;paper_name&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;&lt;span class=&#8221;c-red&#8221;&gt;*&lt;/span&gt;总分：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; autocomplete=&#8221;off&#8221;  id=&#8221;score&#8221; name=&#8221;score&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;label class=&#8221;form-label col-xs-4 col-sm-3&#8243;&gt;关联课程：&lt;/label&gt;
</p>
<p>
  		&lt;div class=&#8221;formControls col-xs-8 col-sm-9&#8243;&gt; &lt;span class=&#8221;select-box&#8221; style=&#8221;width:150px;&#8221;&gt;
</p>
<p>
  			&lt;select class=&#8221;select&#8221; name=&#8221;pid&#8221; size=&#8221;1&#8243;&gt;
</p>
<p>
  				@foreach ($courses as $course)
</p>
<p>
  				&lt;option value=&#8221;{{ $course-&gt;id }}&#8221;&gt;{{ $course-&gt;course_name }}&lt;/option&gt;
</p>
<p>
  				@endforeach
</p>
<p>
  			&lt;/select&gt;
</p>
<p>
  			&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;row cl&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3&#8243;&gt;
</p>
<p>
  			&lt;input class=&#8221;btn btn-primary radius&#8221; type=&#8221;submit&#8221; value=&#8221;&amp;nbsp;&amp;nbsp;提交&amp;nbsp;&amp;nbsp;&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/article&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/jquery.validate.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/validate-methods.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery.validation/1.14.0/messages_zh.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  $(function(){
</p>
<p>
  	$(&#8216;.skin-minimal input&#8217;).iCheck({
</p>
<p>
  		checkboxClass: &#8216;icheckbox-blue&#8217;,
</p>
<p>
  		radioClass: &#8216;iradio-blue&#8217;,
</p>
<p>
  		increaseArea: &#8216;20%&#8217;
</p>
<p>
  	});
</p>
</p>
<p>
  	$(&#8220;#form-admin-add&#8221;).validate({
</p>
<p>
  		rules:{
</p>
<p>
  			atuh_name:{
</p>
<p>
  				required:true,
</p>
<p>
  				minlength:4,
</p>
<p>
  				maxlength:16
</p>
<p>
  			},
</p>
<p>
  			controller:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  			action:{
</p>
<p>
  				required:true,
</p>
<p>
  			},
</p>
<p>
  		},
</p>
<p>
  		onkeyup:false,
</p>
<p>
  		focusCleanup:true,
</p>
<p>
  		success:&#8221;valid&#8221;,
</p>
<p>
  		submitHandler:function(form){
</p>
<p>
  			$(form).ajaxSubmit({
</p>
<p>
  				type: &#8216;post&#8217;,
</p>
<p>
  				url: &#8220;{{ url(&#8216;admin/auth/add&#8217;) }}&#8221;,
</p>
<p>
  				success: function(data){
</p>
<p>
  				    //在父元素提示
</p>
<p>
                      parent.layer.msg(&#8216;添加成功!&#8217;,{icon:1,time:1000});
</p>
<p>
  					//成功则关闭窗口
</p>
<p>
                      var index = parent.layer.getFrameIndex(window.name);
</p>
<p>
                      parent.$(&#8216;.btn-refresh&#8217;).click();
</p>
<p>
                      parent.layer.close(index);
</p>
<p>
  				},
</p>
<p>
                  error: function(XmlHttpRequest, textStatus, errorThrown){
</p>
<p>
  					layer.msg(&#8216;error!&#8217;,{icon:1,time:1000});
</p>
<p>
  				}
</p>
<p>
  			});
</p>
<p>
  		}
</p>
<p>
  	});
</p>
<p>
  });
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;!&#8211;/请在上方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h3>数据处理</h3>
<ul>
<li>
    步骤1：修改视图表单提js插件
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="968" height="575" src="/wp-content/uploads/2018/05/word-image-5222.png" class="wp-image-5753" srcset="/wp-content/uploads/2018/05/word-image-5222.png 968w, /wp-content/uploads/2018/05/word-image-5222-300x178.png 300w, /wp-content/uploads/2018/05/word-image-5222-768x456.png 768w" sizes="(max-width: 968px) 100vw, 968px" /></p>
<ul>
<li>
    步骤2：控制器录入数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1097" height="552" src="/wp-content/uploads/2018/05/word-image-5223.png" class="wp-image-5754" srcset="/wp-content/uploads/2018/05/word-image-5223.png 1097w, /wp-content/uploads/2018/05/word-image-5223-300x151.png 300w, /wp-content/uploads/2018/05/word-image-5223-768x386.png 768w, /wp-content/uploads/2018/05/word-image-5223-1024x515.png 1024w" sizes="(max-width: 1097px) 100vw, 1097px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Paper;
</p>
<p>
  use App\Http\Model\Course;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class PaperController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index()
</p>
<p>
      {
</p>
<p>
          //1.查询所有数据
</p>
<p>
          $papers = Paper::with(&#8216;course&#8217;)-&gt;get();
</p>
<p>
          //2.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.paper.index&#8217;, compact(&#8216;papers&#8217;));
</p>
<p>
      }
</p>
<p>
      //添加
</p>
<p>
      public function add(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.判断HTTP请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
          	//2.接受数据
</p>
<p>
          	$postData = $request-&gt;only([&#8216;paper_name&#8217;, &#8216;score&#8217;, &#8216;course_id&#8217;]);
</p>
<p>
          	//3.创建数据
</p>
<p>
          	$rs = Paper::create($postData);
</p>
<p>
          	//4.判断
</p>
<p>
          	return $rs ? 1 : 0;
</p>
<p>
          } else {
</p>
<p>
              //2.查询所有课程
</p>
<p>
              $courses = Course::get();
</p>
<p>
              //3.加载视图并传递数据
</p>
<p>
              return view(&#8216;admin.paper.add&#8217;, compact(&#8216;courses&#8217;));
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
  }
</p>
<h1>后台试题管理</h1>
<h2>1、列表</h2>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1082" height="367" src="/wp-content/uploads/2018/05/word-image-5224.png" class="wp-image-5755" srcset="/wp-content/uploads/2018/05/word-image-5224.png 1082w, /wp-content/uploads/2018/05/word-image-5224-300x102.png 300w, /wp-content/uploads/2018/05/word-image-5224-768x260.png 768w, /wp-content/uploads/2018/05/word-image-5224-1024x347.png 1024w" sizes="(max-width: 1082px) 100vw, 1082px" /></p>
<ul>
<li>
    步骤2：设置入口
  </li>
</ul>
<p>
  入口1
</p>
<p><img loading="lazy" decoding="async" width="1251" height="342" src="/wp-content/uploads/2018/05/word-image-5225.png" class="wp-image-5756" srcset="/wp-content/uploads/2018/05/word-image-5225.png 1251w, /wp-content/uploads/2018/05/word-image-5225-300x82.png 300w, /wp-content/uploads/2018/05/word-image-5225-768x210.png 768w, /wp-content/uploads/2018/05/word-image-5225-1024x280.png 1024w" sizes="(max-width: 1251px) 100vw, 1251px" /></p>
<p>
  入口2
</p>
<p><img loading="lazy" decoding="async" width="1207" height="410" src="/wp-content/uploads/2018/05/word-image-5226.png" class="wp-image-5757" srcset="/wp-content/uploads/2018/05/word-image-5226.png 1207w, /wp-content/uploads/2018/05/word-image-5226-300x102.png 300w, /wp-content/uploads/2018/05/word-image-5226-768x261.png 768w, /wp-content/uploads/2018/05/word-image-5226-1024x348.png 1024w" sizes="(max-width: 1207px) 100vw, 1207px" /></p>
<ul>
<li>
    步骤3：创建控制器和方法，并获取所有数据传递给视图
  </li>
</ul>
<ol>
<li>
  定义模型，关联试题
</li>
</ol>
<p><img loading="lazy" decoding="async" width="1138" height="462" src="/wp-content/uploads/2018/05/word-image-5227.png" class="wp-image-5758" srcset="/wp-content/uploads/2018/05/word-image-5227.png 1138w, /wp-content/uploads/2018/05/word-image-5227-300x122.png 300w, /wp-content/uploads/2018/05/word-image-5227-768x312.png 768w, /wp-content/uploads/2018/05/word-image-5227-1024x416.png 1024w" sizes="(max-width: 1138px) 100vw, 1138px" /></p>
<p>
  2）控制器
</p>
<p><img loading="lazy" decoding="async" width="1146" height="510" src="/wp-content/uploads/2018/05/word-image-5228.png" class="wp-image-5759" srcset="/wp-content/uploads/2018/05/word-image-5228.png 1146w, /wp-content/uploads/2018/05/word-image-5228-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5228-768x342.png 768w, /wp-content/uploads/2018/05/word-image-5228-1024x456.png 1024w" sizes="(max-width: 1146px) 100vw, 1146px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Admin;
</p>
<p>
  use App\Http\Model\Question;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class QuestionController extends Controller
</p>
<p>
  {
</p>
<p>
      //列表
</p>
<p>
      public function index(Request $request)
</p>
<p>
      {
</p>
<p>
          //1.接受试题ID：有-显示该试题的列表，无-显示所有试题
</p>
<p>
          $paper_id = $request-&gt;input(&#8216;paper_id&#8217;);
</p>
<p>
          //2.查询所有数据
</p>
<p>
          if ($paper_id) {
</p>
<p>
              $questions = Question::with(&#8216;paper&#8217;)-&gt;where(&#8216;paper_id&#8217;, $paper_id)-&gt;get();
</p>
<p>
          } else {
</p>
<p>
              $questions = Question::with(&#8216;paper&#8217;)-&gt;get();
</p>
<p>
          }
</p>
<p>
          //3.加载视图并传递数据
</p>
<p>
          return view(&#8216;admin.question.index&#8217;, compact(&#8216;questions&#8217;));
</p>
<p>
      }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤4：常见视图循环显示数据
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1264" height="581" src="/wp-content/uploads/2018/05/word-image-5229.png" class="wp-image-5760" srcset="/wp-content/uploads/2018/05/word-image-5229.png 1264w, /wp-content/uploads/2018/05/word-image-5229-300x138.png 300w, /wp-content/uploads/2018/05/word-image-5229-768x353.png 768w, /wp-content/uploads/2018/05/word-image-5229-1024x471.png 1024w" sizes="(max-width: 1264px) 100vw, 1264px" /></p>
<p>
  &lt;!DOCTYPE HTML&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  &lt;meta charset=&#8221;utf-8&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;renderer&#8221; content=&#8221;webkit|ie-comp|ie-stand&#8221;&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;X-UA-Compatible&#8221; content=&#8221;IE=edge,chrome=1&#8243;&gt;
</p>
<p>
  &lt;meta name=&#8221;viewport&#8221; content=&#8221;width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no&#8221; /&gt;
</p>
<p>
  &lt;meta http-equiv=&#8221;Cache-Control&#8221; content=&#8221;no-siteapp&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if lt IE 9]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/html5shiv.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/respond.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/css/H-ui.min.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/H-ui.admin.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/Hui-iconfont/1.0.8/iconfont.css&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/skin/default/skin.css&#8221; id=&#8221;skin&#8221; /&gt;
</p>
<p>
  &lt;link rel=&#8221;stylesheet&#8221; type=&#8221;text/css&#8221; href=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/css/style.css&#8221; /&gt;
</p>
<p>
  &lt;!&#8211;[if IE 6]&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/DD_belatedPNG_0.0.8a-min.js&#8221; &gt;&lt;/script&gt;
</p>
<p>
  &lt;script&gt;DD_belatedPNG.fix(&#8216;*&#8217;);&lt;/script&gt;
</p>
<p>
  &lt;![endif]&#8211;&gt;
</p>
<p>
  &lt;title&gt;试卷管理&lt;/title&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  &lt;nav class=&#8221;breadcrumb&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe67f;&lt;/i&gt; 首页 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 管理员管理 &lt;span class=&#8221;c-gray en&#8221;&gt;&amp;gt;&lt;/span&gt; 试卷管理 &lt;a class=&#8221;btn btn-success radius r&#8221; style=&#8221;line-height:1.6em;margin-top:3px&#8221; href=&#8221;javascript:location.replace(location.href);&#8221; title=&#8221;刷新&#8221; &gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe68f;&lt;/i&gt;&lt;/a&gt;&lt;/nav&gt;
</p>
<p>
  &lt;div class=&#8221;page-container&#8221;&gt;
</p>
<p>
  	&lt;div class=&#8221;text-c&#8221;&gt;
</p>
<p>
  		&lt;form class=&#8221;Huiform&#8221; method=&#8221;post&#8221; action=&#8221;&#8221; target=&#8221;_self&#8221;&gt;
</p>
<p>
  			&lt;input type=&#8221;text&#8221; class=&#8221;input-text&#8221; style=&#8221;width:250px&#8221; placeholder=&#8221;试卷名称&#8221; id=&#8221;search_content&#8221; name=&#8221;&#8221;&gt;
</p>
<p>
  			&lt;button type=&#8221;button&#8221; class=&#8221;btn btn-success&#8221; id=&#8221;search&#8221; name=&#8221;&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe665;&lt;/i&gt; 搜试卷节点&lt;/button&gt;
</p>
<p>
  		&lt;/form&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;div class=&#8221;cl pd-5 bg-1 bk-gray mt-20&#8243;&gt;
</p>
<p>
  		 &lt;span class=&#8221;l&#8221;&gt;
</p>
<p>
  		 &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;datadel()&#8221; class=&#8221;btn btn-danger radius&#8221;&gt;
</p>
<p>
  		 	&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt; 批量删除
</p>
<p>
  		 &lt;/a&gt;
</p>
<p>
  		 &lt;a href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_add(&#8216;添加试卷节点&#8217;,'{{ url(&#8216;admin/paper/add&#8217;) }}&#8217;,&#8217;400&#8242;,&#8217;360&#8242;)&#8221; class=&#8221;btn btn-primary radius&#8221;&gt;
</p>
<p>
  		 	&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe600;&lt;/i&gt; 添加试卷节点
</p>
<p>
  		 &lt;/a&gt;
</p>
<p>
  		&lt;/span&gt;
</p>
<p>
  		&lt;span class=&#8221;r&#8221;&gt;共有数据：&lt;strong&gt;54&lt;/strong&gt; 条&lt;/span&gt; &lt;/div&gt;
</p>
<p>
  	&lt;table class=&#8221;table table-border table-bordered table-bg&#8221;&gt;
</p>
<p>
  		&lt;thead&gt;
</p>
<p>
  			&lt;tr&gt;
</p>
<p>
  				&lt;th scope=&#8221;col&#8221; colspan=&#8221;11&#8243;&gt;试卷节点&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;th width=&#8221;25&#8243;&gt;&lt;input type=&#8221;checkbox&#8221; name=&#8221;&#8221; value=&#8221;&#8221;&gt;&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;ID&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;类型&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;所属试卷&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;分数&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;问题&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;答案选项&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;答案&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;说明&lt;/th&gt;
</p>
<p>
  				&lt;th&gt;创建于&lt;/th&gt;
</p>
<p>
  				&lt;th width=&#8221;100&#8243;&gt;操作&lt;/th&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  		&lt;/thead&gt;
</p>
<p>
  		&lt;tbody&gt;
</p>
<p>
  			@foreach ($questions as $question)
</p>
<p>
  			&lt;tr class=&#8221;text-c&#8221;&gt;
</p>
<p>
  				&lt;td&gt;&lt;input type=&#8221;checkbox&#8221; value=&#8221;{{ $question-&gt;id }}&#8221; name=&#8221;&#8221;&gt;&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;id }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;
</p>
<p>
  					@if ($question-&gt;type == 1)单选题
</p>
<p>
  					@else 多选题
</p>
<p>
  					@endif
</p>
<p>
  				&lt;/td&gt;
</p>
<p>
  				&lt;!&#8211; &lt;td&gt;{{ $question-&gt;paper_id }}&lt;/td&gt; &#8211;&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;paper-&gt;paper_name }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;score }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;question }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;options }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;answer }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;remark }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;{{ $question-&gt;created_at }}&lt;/td&gt;
</p>
<p>
  				&lt;td&gt;&lt;a title=&#8221;编辑&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_edit(&#8216;角色编辑&#8217;,&#8217;admin-permission-add.html&#8217;,&#8217;1&#8242;,&#8221;,&#8217;310&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6df;&lt;/i&gt;&lt;/a&gt; &lt;a title=&#8221;删除&#8221; href=&#8221;javascript:;&#8221; onclick=&#8221;admin_permission_del(this,&#8217;1&#8242;)&#8221; class=&#8221;ml-5&#8243; style=&#8221;text-decoration:none&#8221;&gt;&lt;i class=&#8221;Hui-iconfont&#8221;&gt;&amp;#xe6e2;&lt;/i&gt;&lt;/a&gt;&lt;/td&gt;
</p>
<p>
  			&lt;/tr&gt;
</p>
<p>
  			@endforeach
</p>
<p>
  		&lt;/tbody&gt;
</p>
<p>
  	&lt;/table&gt;
</p>
<p>
  &lt;/div&gt;
</p>
<p>
  &lt;!&#8211;_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/jquery/1.9.1/jquery.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/layer/2.4/layer.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui/js/H-ui.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/static&#8217;) }}/h-ui.admin/js/H-ui.admin.js&#8221;&gt;&lt;/script&gt; &lt;!&#8211;/_footer 作为公共模版分离出去&#8211;&gt;
</p>
<p>
  &lt;!&#8211;请在下方写此页面业务相关的脚本&#8211;&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221; src=&#8221;{{ asset(&#8216;admin/lib&#8217;) }}/datatables/1.10.0/jquery.dataTables.min.js&#8221;&gt;&lt;/script&gt;
</p>
<p>
  &lt;script type=&#8221;text/javascript&#8221;&gt;
</p>
<p>
  var table = $(&#8216;table&#8217;).DataTable({
</p>
<p>
      iDisplayLength:10,	    //限制每页显示条数
</p>
<p>
      // searching : false, 		 //禁用搜索
</p>
<p>
      bLengthChange: false,   //去掉每页显示多少条数据方法
</p>
<p>
  });
</p>
<p>
  //客户端搜索功能更
</p>
<p>
  $(&#8216;#search&#8217;).click(function(){
</p>
<p>
      var search_content = $(&#8216;#search_content&#8217;).val();
</p>
<p>
      table.search(search_content).draw();
</p>
<p>
  });
</p>
<p>
  $(function(){
</p>
<p>
      $(&#8216;#DataTables_Table_0_filter&#8217;).hide();
</p>
<p>
  });
</p>
<p>
  /*
</p>
<p>
  	参数解释：
</p>
<p>
  	title	标题
</p>
<p>
  	url		请求的url
</p>
<p>
  	id		需要操作的数据id
</p>
<p>
  	w		弹出层宽度（缺省调默认值）
</p>
<p>
  	h		弹出层高度（缺省调默认值）
</p>
<p>
  */
</p>
<p>
  /*管理员-试卷-添加*/
</p>
<p>
  function admin_permission_add(title,url,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-试卷-编辑*/
</p>
<p>
  function admin_permission_edit(title,url,id,w,h){
</p>
<p>
  	layer_show(title,url,w,h);
</p>
<p>
  }
</p>
<p>
  /*管理员-试卷-删除*/
</p>
<p>
  function admin_permission_del(obj,id){
</p>
<p>
  	layer.confirm(&#8216;确认要删除吗？&#8217;,function(index){
</p>
<p>
  		$.ajax({
</p>
<p>
  			type: &#8216;POST&#8217;,
</p>
<p>
  			url: &#8221;,
</p>
<p>
  			dataType: &#8216;json&#8217;,
</p>
<p>
  			success: function(data){
</p>
<p>
  				$(obj).parents(&#8220;tr&#8221;).remove();
</p>
<p>
  				layer.msg(&#8216;已删除!&#8217;,{icon:1,time:1000});
</p>
<p>
  			},
</p>
<p>
  			error:function(data) {
</p>
<p>
  				console.log(data.msg);
</p>
<p>
  			},
</p>
<p>
  		});
</p>
<p>
  	});
</p>
<p>
  }
</p>
<p>
  &lt;/script&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<p><img loading="lazy" decoding="async" width="1355" height="386" src="/wp-content/uploads/2018/05/word-image-5230.png" class="wp-image-5761" srcset="/wp-content/uploads/2018/05/word-image-5230.png 1355w, /wp-content/uploads/2018/05/word-image-5230-300x85.png 300w, /wp-content/uploads/2018/05/word-image-5230-768x219.png 768w, /wp-content/uploads/2018/05/word-image-5230-1024x292.png 1024w" sizes="(max-width: 1355px) 100vw, 1355px" /></p>
<h2>后台试题导入和导出</h2>
<h3>︴下载工具库</h3>
<p>
  资料：<a href="https://packagist.org/packages/maatwebsite/excel">https://packagist.org/packages/maatwebsite/excel</a>
</p>
<ul>
<li>
    步骤1：下载
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="674" height="453" src="/wp-content/uploads/2018/05/word-image-5231.png" class="wp-image-5762" srcset="/wp-content/uploads/2018/05/word-image-5231.png 674w, /wp-content/uploads/2018/05/word-image-5231-300x202.png 300w" sizes="(max-width: 674px) 100vw, 674px" /></p>
<ul>
<li>
    步骤2：配置
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="885" height="261" src="/wp-content/uploads/2018/05/word-image-5232.png" class="wp-image-5763" srcset="/wp-content/uploads/2018/05/word-image-5232.png 885w, /wp-content/uploads/2018/05/word-image-5232-300x88.png 300w, /wp-content/uploads/2018/05/word-image-5232-768x226.png 768w" sizes="(max-width: 885px) 100vw, 885px" /><br />
<img loading="lazy" decoding="async" width="922" height="207" src="/wp-content/uploads/2018/05/word-image-5233.png" class="wp-image-5764" srcset="/wp-content/uploads/2018/05/word-image-5233.png 922w, /wp-content/uploads/2018/05/word-image-5233-300x67.png 300w, /wp-content/uploads/2018/05/word-image-5233-768x172.png 768w" sizes="(max-width: 922px) 100vw, 922px" /></p>
<h3>︴导出语法</h3>
<p><img loading="lazy" decoding="async" width="651" height="357" src="/wp-content/uploads/2018/05/word-image-5234.png" class="wp-image-5765" srcset="/wp-content/uploads/2018/05/word-image-5234.png 651w, /wp-content/uploads/2018/05/word-image-5234-300x165.png 300w" sizes="(max-width: 651px) 100vw, 651px" /></p>
<p>
  $data = [
</p>
<p>
      [&#8216;编号&#8217;,&#8217;姓名&#8217;,&#8217;年龄&#8217;],
</p>
<p>
      [&#8216;1&#8242;,&#8217;a1&#8242;,&#8217;1&#8217;],
</p>
<p>
      [&#8216;2&#8242;,&#8217;a2&#8242;,&#8217;2&#8217;],
</p>
<p>
      [&#8216;3&#8242;,&#8217;a3&#8242;,&#8217;3&#8217;]
</p>
<p>
  ];
</p>
<p>
  Excel::create(&#8216;学习成绩&#8217;, function($excel) use ($data) {
</p>
<p>
      $excel-&gt;sheet(&#8216;score&#8217;, function($sheet) use ($data) {
</p>
<p>
          $sheet-&gt;rows($data);
</p>
<p>
      });
</p>
<p>
  })-&gt;export(&#8216;xls&#8217;);
</p>
<h3>︴导入语法</h3>
<p>
  $excel_file_path = getcwd() . &#8216;/t2.xls&#8217;; //你的Excel文件存放地址
</p>
<p>
  $excel_data = Excel::load($excel_file_path, function($reader) {
</p>
<p>
  $res = $reader-&gt;getSheet(0)-&gt;toArray();
</p>
<p>
      // 直接打印内容即可看到效果
</p>
<p>
      echo &#8216;job.xlsx 表格内容为:&#8217;;
</p>
<p>
      dd($res);
</p>
<p>
  });
</p>
<h3>1）试题导入（excel）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1046" height="134" src="/wp-content/uploads/2018/05/word-image-5235.png" class="wp-image-5766" srcset="/wp-content/uploads/2018/05/word-image-5235.png 1046w, /wp-content/uploads/2018/05/word-image-5235-300x38.png 300w, /wp-content/uploads/2018/05/word-image-5235-768x98.png 768w, /wp-content/uploads/2018/05/word-image-5235-1024x131.png 1024w" sizes="(max-width: 1046px) 100vw, 1046px" /></p>
<ul>
<li>
    步骤2：试卷列表设置导入连接
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1288" height="366" src="/wp-content/uploads/2018/05/word-image-5236.png" class="wp-image-5767" srcset="/wp-content/uploads/2018/05/word-image-5236.png 1288w, /wp-content/uploads/2018/05/word-image-5236-300x85.png 300w, /wp-content/uploads/2018/05/word-image-5236-768x218.png 768w, /wp-content/uploads/2018/05/word-image-5236-1024x291.png 1024w" sizes="(max-width: 1288px) 100vw, 1288px" /></p>
<ul>
<li>
    步骤3：创建导入试题方法，并完成导入功能
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="888" height="636" src="/wp-content/uploads/2018/05/word-image-5237.png" class="wp-image-5768" srcset="/wp-content/uploads/2018/05/word-image-5237.png 888w, /wp-content/uploads/2018/05/word-image-5237-300x215.png 300w, /wp-content/uploads/2018/05/word-image-5237-768x550.png 768w" sizes="(max-width: 888px) 100vw, 888px" /></p>
<p>
  //导入试题
</p>
<p>
  public function add(Request $request)
</p>
<p>
  {
</p>
<p>
      //步骤1：获取参数
</p>
<p>
      $paper_id = $request-&gt;input(&#8216;paper_id&#8217;);
</p>
<p>
      //步骤2；判断excel文件是否存在
</p>
<p>
      $file = getcwd() . &#8216;/excel/&#8217; . $paper_id .&#8217;.xlsx&#8217;;
</p>
<p>
      if (file_exists($file)) {
</p>
<p>
          //步骤3：读取excel内容
</p>
<p>
          $excel_data = Excel::load($file, function($reader) {
</p>
<p>
          $res = $reader-&gt;getSheet(0)-&gt;toArray();
</p>
<p>
              // 直接打印内容即可看到效果
</p>
<p>
              // echo &#8216;job.xlsx 表格内容为:&#8217;;
</p>
<p>
              // dd($res);
</p>
<p>
              //步骤4：通过循环将试题插入数据库
</p>
<p>
              foreach ($res as $k=&gt;$v) {
</p>
<p>
                  if ($k == 0) continue; //跳过表格标题
</p>
<p>
                  $type = $v[0] == &#8216;单选题&#8217; ? 1 : 2;
</p>
<p>
                  $remark = $v[6] ? $v[6] : &#8221;;
</p>
<p>
                  $data = [
</p>
<p>
                      &#8216;type&#8217; =&gt; $type,
</p>
<p>
                      &#8216;paper_id&#8217; =&gt; intval($v[1]),
</p>
<p>
                      &#8216;score&#8217; =&gt; $v[4],
</p>
<p>
                      &#8216;question&#8217; =&gt; $v[2],
</p>
<p>
                      &#8216;options&#8217; =&gt; $v[3],
</p>
<p>
                      &#8216;answer&#8217; =&gt; $v[5],
</p>
<p>
                      &#8216;remark&#8217; =&gt; $remark
</p>
<p>
                  ];
</p>
<p>
                  Question::create($data);
</p>
<p>
              }
</p>
<p>
          });
</p>
<p>
          //步骤5：跳转到试卷试题列表页
</p>
<p>
          return redirect(&#8216;admin/question/index?paper_id=&#8217;.$paper_id);
</p>
<p>
      }
</p>
<p>
      return redirect(&#8216;admin/paper/index&#8217;);
</p>
<p>
  }
</p>
<h3>2）试题导出（excel）</h3>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1061" height="319" src="/wp-content/uploads/2018/05/word-image-5238.png" class="wp-image-5769" srcset="/wp-content/uploads/2018/05/word-image-5238.png 1061w, /wp-content/uploads/2018/05/word-image-5238-300x90.png 300w, /wp-content/uploads/2018/05/word-image-5238-768x231.png 768w, /wp-content/uploads/2018/05/word-image-5238-1024x308.png 1024w" sizes="(max-width: 1061px) 100vw, 1061px" /></p>
<ul>
<li>
    步骤2：创建控制器方法并完成功能
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1019" height="634" src="/wp-content/uploads/2018/05/word-image-5239.png" class="wp-image-5770" srcset="/wp-content/uploads/2018/05/word-image-5239.png 1019w, /wp-content/uploads/2018/05/word-image-5239-300x187.png 300w, /wp-content/uploads/2018/05/word-image-5239-768x478.png 768w" sizes="(max-width: 1019px) 100vw, 1019px" /></p>
<p>
  //导出试题
</p>
<p>
  public function export(Request $request)
</p>
<p>
  {
</p>
<p>
      //步骤1：获取参数
</p>
<p>
      $paper_id = $request-&gt;input(&#8216;paper_id&#8217;);
</p>
<p>
      //步骤2；根据试卷ID获取所有试题
</p>
<p>
      $questions = Question::with(&#8216;paper&#8217;)-&gt;where(&#8216;paper_id&#8217;, $paper_id)-&gt;get();
</p>
<p>
      //步骤3：组装导出数据
</p>
<p>
      $data[] = [&#8216;类型&#8217;,&#8217;所属试卷&#8217;,&#8217;问题&#8217;,&#8217;选项&#8217;,&#8217;分数&#8217;,&#8217;答案&#8217;,&#8217;说明&#8217;];
</p>
<p>
      foreach ($questions as $key =&gt; $question) {
</p>
<p>
          $type = $question-&gt;type == 1 ? &#8216;单选题&#8217; : &#8216;多选题&#8217;;
</p>
<p>
          $data[] = [
</p>
<p>
              $type,
</p>
<p>
              $question-&gt;paper-&gt;paper_name,
</p>
<p>
              $question-&gt;question,
</p>
<p>
              $question-&gt;options,
</p>
<p>
              $question-&gt;score,
</p>
<p>
              $question-&gt;answer,
</p>
<p>
              $question-&gt;remark
</p>
<p>
          ];
</p>
<p>
          $name = $question-&gt;paper-&gt;paper_name;
</p>
<p>
      }
</p>
<p>
      Excel::create($name, function($excel) use ($data) {
</p>
<p>
          $excel-&gt;sheet(&#8216;score&#8217;, function($sheet) use ($data) {
</p>
<p>
              $sheet-&gt;rows($data);
</p>
<p>
          });
</p>
<p>
      })-&gt;export(&#8216;xls&#8217;);
</p>
<p>
      return redirect(&#8216;admin/paper/index&#8217;);
</p>
<p>
  }
</p>
<h1>三、前台答题功能</h1>
<h2>展示试题</h2>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="913" height="488" src="/wp-content/uploads/2018/05/word-image-5240.png" class="wp-image-5771" srcset="/wp-content/uploads/2018/05/word-image-5240.png 913w, /wp-content/uploads/2018/05/word-image-5240-300x160.png 300w, /wp-content/uploads/2018/05/word-image-5240-768x410.png 768w" sizes="(max-width: 913px) 100vw, 913px" /></p>
<ul>
<li>
    步骤1：创建控制器方法并查询所有题目试题
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="923" height="542" src="/wp-content/uploads/2018/05/word-image-5241.png" class="wp-image-5772" srcset="/wp-content/uploads/2018/05/word-image-5241.png 923w, /wp-content/uploads/2018/05/word-image-5241-300x176.png 300w, /wp-content/uploads/2018/05/word-image-5241-768x451.png 768w" sizes="(max-width: 923px) 100vw, 923px" /></p>
<ul>
<li>
    步骤3：视图循环显示
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="908" height="619" src="/wp-content/uploads/2018/05/word-image-5242.png" class="wp-image-5773" srcset="/wp-content/uploads/2018/05/word-image-5242.png 908w, /wp-content/uploads/2018/05/word-image-5242-300x205.png 300w, /wp-content/uploads/2018/05/word-image-5242-768x524.png 768w, /wp-content/uploads/2018/05/word-image-5242-220x150.png 220w" sizes="(max-width: 908px) 100vw, 908px" /></p>
<p>
  &lt;!DOCTYPE html&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  	&lt;title&gt;考试&lt;/title&gt;
</p>
<p>
  	&lt;style type=&#8221;text/css&#8221;&gt;
</p>
<p>
  	* { padding:0px; margin:0px; }
</p>
<p>
  	body
</p>
<p>
  	{
</p>
<p>
  	    font-family:&#8221;微软雅黑&#8221;,&#8221;Lucida Grande&#8221;,Helvetica,Arial,Verdana,sans-serif;
</p>
<p>
  	    word-break:break-all;
</p>
<p>
  	    word-wrap: break-word;
</p>
<p>
  	    background: #ddf4ff url(&#8220;https://image.wjx.cn/images/newbg/oldbg2-bg.jpg&#8221;) repeat-x;
</p>
<p>
  	}
</p>
<p>
  	#main { width: 920px;margin: auto;}
</p>
<p>
  	#main .title {width: 100%; height:105px;background: url(&#8220;https://image.wjx.cn/images/newbg/oldbg2.jpg&#8221;) no-repeat top center;  }
</p>
<p>
  	#main h1 { color:#19a8ee; text-align: center; font-size: 24px !important; }
</p>
<p>
  	#main h2 { margin-left: 30px; }
</p>
<p>
  	#main h3 { margin-bottom: 10px; }
</p>
<p>
  	#main .content {background: #fff;}
</p>
<p>
  	#main .content .question { width: 800px; margin: auto; border-bottom: 1px solid #EFEFEF;padding-top: 20px;}
</p>
<p>
  	#main .content .question input { width: 20px; height: 20px; vertical-align: middle; margin: 8px 0px; }
</p>
<p>
  	#main #submit { width: 80px; height: 40px; margin-left: 420px; cursor: pointer;}
</p>
<p>
  	&lt;/style&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  	&lt;div id=&#8221;main&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;title&#8221;&gt;&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;content&#8221;&gt;
</p>
<p>
  			&lt;h1&gt;试卷A&lt;/h1&gt;
</p>
<p>
  			&lt;h2&gt;单选&lt;/h2&gt;
</p>
<p>
  			@foreach ($questions as $k=&gt;$question)
</p>
<p>
  			@if ($question-&gt;type == 1)
</p>
<p>
  			&lt;div class=&#8221;question&#8221;&gt;
</p>
<p>
  				&lt;div&gt;
</p>
<p>
  					&lt;h3&gt;{{$k + 1}}.{{$question-&gt;question}}&lt;/h3&gt;
</p>
<p>
  					@foreach (explode(&#8216;,&#8217;, $question-&gt;options) as $option)
</p>
<p>
  					&lt;input type=&#8221;radio&#8221; name=&#8221;a&#8221; value=&#8221;&#8221; /&gt;{{ $option }}&lt;br /&gt;
</p>
<p>
  					@endforeach
</p>
<p>
  				&lt;/div&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			@endif
</p>
<p>
  			@endforeach
</p>
<p>
  			&lt;h2&gt;多选&lt;/h2&gt;)
</p>
<p>
  			@php
</p>
<p>
  			$k = 0;
</p>
<p>
  			@endphp
</p>
<p>
  			@foreach ($questions as $question)
</p>
<p>
  			@if ($question-&gt;type == 2)
</p>
<p>
  			&lt;div class=&#8221;question&#8221;&gt;
</p>
<p>
  				&lt;div&gt;
</p>
<p>
  					&lt;h3&gt;{{$k + 1}}.{{$question-&gt;question}}&lt;/h3&gt;
</p>
<p>
  					@foreach (explode(&#8216;,&#8217;, $question-&gt;options) as $option)
</p>
<p>
  					&lt;input type=&#8221;checkbox&#8221; name=&#8221;a&#8221; value=&#8221;1&#8243; /&gt;{{ $option }}&lt;br /&gt;
</p>
<p>
  					@endforeach
</p>
<p>
  				&lt;/div&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			@endif
</p>
<p>
  			@endforeach
</p>
<p>
  			&lt;br/&gt;
</p>
<p>
  			&lt;br/&gt;
</p>
<p>
  			&lt;input type=&#8221;submit&#8221; name=&#8221;提交&#8221; id=&#8221;submit&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<h2>答题处理</h2>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1018" height="284" src="/wp-content/uploads/2018/05/word-image-5243.png" class="wp-image-5774" srcset="/wp-content/uploads/2018/05/word-image-5243.png 1018w, /wp-content/uploads/2018/05/word-image-5243-300x84.png 300w, /wp-content/uploads/2018/05/word-image-5243-768x214.png 768w" sizes="(max-width: 1018px) 100vw, 1018px" /></p>
<ul>
<li>
    步骤2：修改视图
  </li>
</ul>
<p>
  &lt;!DOCTYPE html&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  	&lt;title&gt;考试&lt;/title&gt;
</p>
<p>
  	&lt;style type=&#8221;text/css&#8221;&gt;
</p>
<p>
  	* { padding:0px; margin:0px; }
</p>
<p>
  	body
</p>
<p>
  	{
</p>
<p>
  	    font-family:&#8221;微软雅黑&#8221;,&#8221;Lucida Grande&#8221;,Helvetica,Arial,Verdana,sans-serif;
</p>
<p>
  	    word-break:break-all;
</p>
<p>
  	    word-wrap: break-word;
</p>
<p>
  	    background: #ddf4ff url(&#8220;https://image.wjx.cn/images/newbg/oldbg2-bg.jpg&#8221;) repeat-x;
</p>
<p>
  	}
</p>
<p>
  	#main { width: 920px;margin: auto;}
</p>
<p>
  	#main .title {width: 100%; height:105px;background: url(&#8220;https://image.wjx.cn/images/newbg/oldbg2.jpg&#8221;) no-repeat top center;  }
</p>
<p>
  	#main h1 { color:#19a8ee; text-align: center; font-size: 24px !important; }
</p>
<p>
  	#main h2 { margin-left: 30px; }
</p>
<p>
  	#main h3 { margin-bottom: 10px; }
</p>
<p>
  	#main .content {background: #fff;}
</p>
<p>
  	#main .content .question { width: 800px; margin: auto; border-bottom: 1px solid #EFEFEF;padding-top: 20px;}
</p>
<p>
  	#main .content .question input { width: 20px; height: 20px; vertical-align: middle; margin: 8px 0px; }
</p>
<p>
  	#main #submit { width: 80px; height: 40px; margin-left: 420px; cursor: pointer;}
</p>
<p>
  	&lt;/style&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  	<strong>@php</strong>
</p>
<p><strong>	$rs = [&#8216;A&#8217;, &#8216;B&#8217;, &#8216;C&#8217;, &#8216;D&#8217;];</strong>
</p>
<p><strong>	@endphp</strong>
</p>
<p>
  	&lt;form action=&#8221;{{ url(&#8216;home/answer/add&#8217;) }}&#8221; method=&#8221;post&#8221;&gt;
</p>
<p>
  	{{ csrf_field() }}
</p>
<p>
  	&lt;div id=&#8221;main&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;title&#8221;&gt;&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;content&#8221;&gt;
</p>
<p>
  			&lt;h1&gt;试卷A&lt;/h1&gt;
</p>
<p>
  			&lt;h2&gt;单选&lt;/h2&gt;
</p>
<p>
  			@foreach ($questions as $k=&gt;$question)
</p>
<p>
  			@if ($question-&gt;type == 1)
</p>
<p>
  			&lt;div class=&#8221;question&#8221;&gt;
</p>
<p>
  				&lt;div&gt;
</p>
<p>
  					&lt;h3&gt;{{$k + 1}}.{{$question-&gt;question}}&lt;/h3&gt;
</p>
<p>
  					@foreach (explode(&#8216;,&#8217;, $question-&gt;options) as $temp=&gt;$option)
</p>
<p>
  					&lt;input type=&#8221;radio&#8221; <strong>name=&#8221;answer[{{ $question-&gt;id }}]&#8221; value=&#8221;{{ $rs[$temp] }}&#8221; </strong>/&gt;{{ $option }}&lt;br /&gt;
</p>
<p>
  					@endforeach
</p>
<p>
  				&lt;/div&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			@endif
</p>
<p>
  			@endforeach
</p>
<p>
  			&lt;h2&gt;多选&lt;/h2&gt;
</p>
<p>
  			@php
</p>
<p>
  			$k = 0;
</p>
<p>
  			@endphp
</p>
<p>
  			@foreach ($questions as $question)
</p>
<p>
  			@if ($question-&gt;type == 2)
</p>
<p>
  			&lt;div class=&#8221;question&#8221;&gt;
</p>
<p>
  				&lt;div&gt;
</p>
<p>
  					&lt;h3&gt;{{$k + 1}}.{{$question-&gt;question}}&lt;/h3&gt;
</p>
<p>
  					@foreach (explode(&#8216;,&#8217;, $question-&gt;options) as $temp=&gt;$option)
</p>
<p>
  					&lt;input type=&#8221;checkbox&#8221; <strong>name=&#8221;answer[{{ $question-&gt;id }}][]&#8221; value=&#8221;{{ $rs[$temp] }}&#8221; </strong>/&gt;{{ $option }}&lt;br /&gt;
</p>
<p>
  					@endforeach
</p>
<p>
  				&lt;/div&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			@endif
</p>
<p>
  			@endforeach
</p>
<p>
  			&lt;br/&gt;
</p>
<p>
  			&lt;br/&gt;
</p>
<p>
  			&lt;input type=&#8221;submit&#8221; name=&#8221;提交&#8221; id=&#8221;submit&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<ul>
<li>
    步骤3：数据处理【难点、重点】
  </li>
</ul>
<p>
  主要学习视图的name设置以及这边的判断原理
</p>
<p><img loading="lazy" decoding="async" width="1167" height="641" src="/wp-content/uploads/2018/05/word-image-5244.png" class="wp-image-5775" srcset="/wp-content/uploads/2018/05/word-image-5244.png 1167w, /wp-content/uploads/2018/05/word-image-5244-300x165.png 300w, /wp-content/uploads/2018/05/word-image-5244-768x422.png 768w, /wp-content/uploads/2018/05/word-image-5244-1024x562.png 1024w" sizes="(max-width: 1167px) 100vw, 1167px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Home;
</p>
<p>
  use App\Http\Model\Question;
</p>
<p>
  use App\Http\Model\Answer;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AnswerController extends Controller
</p>
<p>
  {
</p>
<p>
      //答题处理
</p>
<p>
      public function add(Request $request)
</p>
<p>
      {
</p>
<p>
      	//1.判断请求类型
</p>
<p>
          if ($request-&gt;isMethod(&#8216;post&#8217;)) {
</p>
<p>
              //2.接受数据
</p>
<p>
              $postData = $request-&gt;only(&#8216;answer&#8217;, &#8216;paper_id&#8217;);
</p>
<p>
              //dd($postData);
</p>
<p>
              //3.查询试卷对应的所有试题
</p>
<p>
              $questions = Question::where(&#8216;paper_id&#8217;, $postData[&#8216;paper_id&#8217;])-&gt;get();
</p>
<p>
              //4.循环判断提交的试题是否正确
</p>
<p>
              foreach ($questions as $key =&gt; $question) {
</p>
<p>
                  //4.1先判断当前试题是否在提交表单中：
</p>
<p>
                  //正常流   -&gt;肯定存在     处理：正确，错误
</p>
<p>
                  //非正常流-&gt;肯定不存在    处理：不管，不加入到answer直接没分
</p>
<p>
                  if (isset($postData[&#8216;answer&#8217;][$question-&gt;id])) {
</p>
<p>
                      //用户本地答案
</p>
<p>
                      $userSubmitAnswer = is_array($postData[&#8216;answer&#8217;][$question-&gt;id]) ? implode(&#8221;, $postData[&#8216;answer&#8217;][$question-&gt;id]) : $postData[&#8216;answer&#8217;][$question-&gt;id];
</p>
<p>
                      //判断是否正确
</p>
<p>
                      $temp = [
</p>
<p>
                          &#8216;paper_id&#8217; =&gt; $postData[&#8216;paper_id&#8217;],
</p>
<p>
                          &#8216;question_id&#8217; =&gt; $question-&gt;id,
</p>
<p>
                          &#8216;member_id&#8217;  =&gt; 0,
</p>
<p>
                          &#8216;score&#8217;    =&gt; $question-&gt;score,
</p>
<p>
                          &#8216;answer&#8217; =&gt; $userSubmitAnswer //用户答案
</p>
<p>
                      ];
</p>
<p>
                      if ($question-&gt;answer == $userSubmitAnswer) {
</p>
<p>
                          //答对
</p>
<p>
                          $temp[&#8216;is_correct&#8217;] = 1;  //是否正确:1-是,2-否
</p>
<p>
                      } else {
</p>
<p>
                          //答错
</p>
<p>
                          $temp[&#8216;is_correct&#8217;] =2 ; //是否正确:1-是,2-否
</p>
<p>
                      }
</p>
<p>
                      Answer::create($temp);
</p>
<p>
                  }
</p>
<p>
              }
</p>
<p>
              //处理完毕跳转到结果页
</p>
<p>
              return redirect(&#8216;home/answer/detail&#8217;);
</p>
<p>
          }
</p>
<p>
      }
</p>
<p>
      //答题结果显示
</p>
<p>
      public function detail()
</p>
<p>
      {
</p>
<p>
          return view(&#8216;home/answer/detail&#8217;);
</p>
<p>
      }
</p>
<p>
  }
</p>
<h2>展示答题结果</h2>
<ul>
<li>
    步骤1：定义路由
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1127" height="276" src="/wp-content/uploads/2018/05/word-image-5245.png" class="wp-image-5776" srcset="/wp-content/uploads/2018/05/word-image-5245.png 1127w, /wp-content/uploads/2018/05/word-image-5245-300x73.png 300w, /wp-content/uploads/2018/05/word-image-5245-768x188.png 768w, /wp-content/uploads/2018/05/word-image-5245-1024x251.png 1024w" sizes="(max-width: 1127px) 100vw, 1127px" /></p>
<ul>
<li>
    步骤2：创建控制器方法
  </li>
</ul>
<ol>
<li>
  设置模型
</li>
</ol>
<p><img loading="lazy" decoding="async" width="1115" height="499" src="/wp-content/uploads/2018/05/word-image-5246.png" class="wp-image-5777" srcset="/wp-content/uploads/2018/05/word-image-5246.png 1115w, /wp-content/uploads/2018/05/word-image-5246-300x134.png 300w, /wp-content/uploads/2018/05/word-image-5246-768x344.png 768w, /wp-content/uploads/2018/05/word-image-5246-1024x458.png 1024w" sizes="(max-width: 1115px) 100vw, 1115px" /></p>
<p>
  2）设置控制器
</p>
<p><img loading="lazy" decoding="async" width="1015" height="510" src="/wp-content/uploads/2018/05/word-image-5247.png" class="wp-image-5778" srcset="/wp-content/uploads/2018/05/word-image-5247.png 1015w, /wp-content/uploads/2018/05/word-image-5247-300x151.png 300w, /wp-content/uploads/2018/05/word-image-5247-768x386.png 768w" sizes="(max-width: 1015px) 100vw, 1015px" /></p>
<ul>
<li>
    步骤3：视图判断显示结果
  </li>
</ul>
<p>
  &lt;!DOCTYPE html&gt;
</p>
<p>
  &lt;html&gt;
</p>
<p>
  &lt;head&gt;
</p>
<p>
  	&lt;title&gt;考试&lt;/title&gt;
</p>
<p>
  	&lt;style type=&#8221;text/css&#8221;&gt;
</p>
<p>
  	* { padding:0px; margin:0px; }
</p>
<p>
  	body
</p>
<p>
  	{
</p>
<p>
  	    font-family:&#8221;微软雅黑&#8221;,&#8221;Lucida Grande&#8221;,Helvetica,Arial,Verdana,sans-serif;
</p>
<p>
  	    word-break:break-all;
</p>
<p>
  	    word-wrap: break-word;
</p>
<p>
  	    background: #ddf4ff url(&#8220;https://image.wjx.cn/images/newbg/oldbg2-bg.jpg&#8221;) repeat-x;
</p>
<p>
  	}
</p>
<p>
  	#main { width: 920px;margin: auto;}
</p>
<p>
  	#main .title {width: 100%; height:105px;background: url(&#8220;https://image.wjx.cn/images/newbg/oldbg2.jpg&#8221;) no-repeat top center;  }
</p>
<p>
  	#main h1 { color:#19a8ee; text-align: center; font-size: 24px !important; }
</p>
<p>
  	#main h2 { margin-left: 30px; }
</p>
<p>
  	#main h3 { margin-bottom: 10px; }
</p>
<p>
  	#main .content {background: #fff;}
</p>
<p>
  	#main .content .question { width: 800px; margin: auto; border-bottom: 1px solid #EFEFEF;padding-top: 20px;}
</p>
<p>
  	#main .content .question input { width: 20px; height: 20px; vertical-align: middle; margin: 8px 0px; }
</p>
<p>
  	#main #submit { width: 80px; height: 40px; margin-left: 420px; cursor: pointer;}
</p>
<p>
  	&lt;/style&gt;
</p>
<p>
  &lt;/head&gt;
</p>
<p>
  &lt;body&gt;
</p>
<p>
  	@php
</p>
<p>
  	$rs = [&#8216;A&#8217;, &#8216;B&#8217;, &#8216;C&#8217;, &#8216;D&#8217;];
</p>
<p>
  	@endphp
</p>
<p>
  	&lt;form action=&#8221;{{ url(&#8216;home/answer/add&#8217;) }}&#8221; method=&#8221;post&#8221;&gt;
</p>
<p>
  	{{ csrf_field() }}
</p>
<p>
  	&lt;div id=&#8221;main&#8221;&gt;
</p>
<p>
  		&lt;div class=&#8221;title&#8221;&gt;&lt;/div&gt;
</p>
<p>
  		&lt;div class=&#8221;content&#8221;&gt;
</p>
<p>
  			&lt;h1&gt;试卷A&lt;/h1&gt;
</p>
<p>
  			&lt;h2&gt;单选&lt;/h2&gt;
</p>
<p>
  			@foreach ($answers as $k=&gt;$answer)
</p>
<p>
  			@if ($answer-&gt;question-&gt;type == 1)
</p>
<p>
  			&lt;div class=&#8221;question&#8221;&gt;
</p>
<p>
  				&lt;div&gt;
</p>
<p>
  					&lt;h3&gt;
</p>
<p>
  						{{$k + 1}}.{{$answer-&gt;question-&gt;question}}&amp;nbsp;
</p>
<p>
  						@if ($answer-&gt;is_correct == 1)
</p>
<p>
  							&lt;font color=&#8221;green&#8221;&gt;正确&lt;/font&gt;
</p>
<p>
  						@else
</p>
<p>
  							&lt;font color=&#8221;red&#8221;&gt;错误&lt;/font&gt; ，正确答案：{{$answer-&gt;question-&gt;answer}}
</p>
<p>
  						@endif
</p>
<p>
  					&lt;/h3&gt;
</p>
<p>
  					@foreach (explode(&#8216;,&#8217;, $answer-&gt;question-&gt;options) as $temp=&gt;$option)
</p>
<p>
  					&lt;input type=&#8221;radio&#8221;
</p>
<p>
  						@if($rs[$temp] == $answer-&gt;answer)
</p>
<p>
  							checked
</p>
<p>
  						@endif
</p>
<p>
  					/&gt;{{ $option }}&lt;br /&gt;
</p>
<p>
  					@endforeach
</p>
<p>
  				&lt;/div&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			@endif
</p>
<p>
  			@endforeach
</p>
<p>
  			&lt;h2&gt;多选&lt;/h2&gt;
</p>
<p>
  			@php
</p>
<p>
  			$k = 0;
</p>
<p>
  			@endphp
</p>
<p>
  			@foreach ($answers as $answer)
</p>
<p>
  			@if ($answer-&gt;question-&gt;type == 2)
</p>
<p>
  			&lt;div class=&#8221;question&#8221;&gt;
</p>
<p>
  				&lt;div&gt;
</p>
<p>
  					&lt;h3&gt;
</p>
<p>
  						{{$k + 1}}.{{$answer-&gt;question-&gt;question}}
</p>
</p>
<p>
  						@if ($answer-&gt;is_correct == 1)
</p>
<p>
  							&lt;font color=&#8221;green&#8221;&gt;正确&lt;/font&gt;
</p>
<p>
  						@else
</p>
<p>
  							&lt;font color=&#8221;red&#8221;&gt;错误&lt;/font&gt; ，正确答案：{{$answer-&gt;question-&gt;answer}}
</p>
<p>
  						@endif
</p>
<p>
  					&lt;/h3&gt;
</p>
<p>
  					@foreach (explode(&#8216;,&#8217;, $answer-&gt;question-&gt;options) as $temp=&gt;$option)
</p>
<p>
  					&lt;input type=&#8221;checkbox&#8221;
</p>
<p>
  						@if(strpos(&#8216;_&#8217;.$answer-&gt;answer, $rs[$temp]))
</p>
<p>
  							checked=checked
</p>
<p>
  						@endif
</p>
<p>
  					/&gt;{{ $option }}&lt;br /&gt;
</p>
<p>
  					@endforeach
</p>
<p>
  				&lt;/div&gt;
</p>
<p>
  			&lt;/div&gt;
</p>
<p>
  			@endif
</p>
<p>
  			@endforeach
</p>
<p>
  			&lt;br/&gt;
</p>
<p>
  			&lt;br/&gt;
</p>
<p>
  			&lt;input type=&#8221;submit&#8221; name=&#8221;提交&#8221; id=&#8221;submit&#8221;&gt;
</p>
<p>
  		&lt;/div&gt;
</p>
<p>
  	&lt;/div&gt;
</p>
<p>
  	&lt;/form&gt;
</p>
<p>
  &lt;/body&gt;
</p>
<p>
  &lt;/html&gt;
</p>
<p><img loading="lazy" decoding="async" width="845" height="680" src="/wp-content/uploads/2018/05/word-image-5248.png" class="wp-image-5779" srcset="/wp-content/uploads/2018/05/word-image-5248.png 845w, /wp-content/uploads/2018/05/word-image-5248-300x241.png 300w, /wp-content/uploads/2018/05/word-image-5248-768x618.png 768w" sizes="(max-width: 845px) 100vw, 845px" /></p>
<h1>在Laravle中使用支付宝</h1>
<h2>1、下载第三方支付宝SDK工具库</h2>
<ul>
<li>
    步骤1：下载
  </li>
</ul>
<p>
  composer require &#8220;echobool/alipay-laravel5:dev-master&#8221;
</p>
<p><img loading="lazy" decoding="async" width="542" height="247" src="/wp-content/uploads/2018/05/word-image-5249.png" class="wp-image-5780" srcset="/wp-content/uploads/2018/05/word-image-5249.png 542w, /wp-content/uploads/2018/05/word-image-5249-300x137.png 300w" sizes="(max-width: 542px) 100vw, 542px" /></p>
<ul>
<li>
    步骤2：配置
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="466" height="102" src="/wp-content/uploads/2018/05/word-image-5250.png" class="wp-image-5781" srcset="/wp-content/uploads/2018/05/word-image-5250.png 466w, /wp-content/uploads/2018/05/word-image-5250-300x66.png 300w" sizes="(max-width: 466px) 100vw, 466px" /><br />
<img loading="lazy" decoding="async" width="998" height="231" src="/wp-content/uploads/2018/05/word-image-5251.png" class="wp-image-5782" srcset="/wp-content/uploads/2018/05/word-image-5251.png 998w, /wp-content/uploads/2018/05/word-image-5251-300x69.png 300w, /wp-content/uploads/2018/05/word-image-5251-768x178.png 768w" sizes="(max-width: 998px) 100vw, 998px" /></p>
<ul>
<li>
    步骤3：更新配置
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="346" height="126" src="/wp-content/uploads/2018/05/word-image-5252.png" class="wp-image-5783" srcset="/wp-content/uploads/2018/05/word-image-5252.png 346w, /wp-content/uploads/2018/05/word-image-5252-300x109.png 300w" sizes="(max-width: 346px) 100vw, 346px" /></p>
<ul>
<li>
    步骤4：发布配置文件
  </li>
</ul>
<p>
  1）生成配置文件
</p>
<p><img loading="lazy" decoding="async" width="1085" height="437" src="/wp-content/uploads/2018/05/word-image-5253.png" class="wp-image-5784" srcset="/wp-content/uploads/2018/05/word-image-5253.png 1085w, /wp-content/uploads/2018/05/word-image-5253-300x121.png 300w, /wp-content/uploads/2018/05/word-image-5253-768x309.png 768w, /wp-content/uploads/2018/05/word-image-5253-1024x412.png 1024w" sizes="(max-width: 1085px) 100vw, 1085px" /></p>
<p>
  2）修改配置文件
</p>
<p>
  &lt;?php
</p>
<p>
  /**
</p>
<p>
   * Created by PhpStorm.
</p>
<p>
   * User: luojinyi
</p>
<p>
   * Date: 2017/6/26
</p>
<p>
   * Time: 下午5:21
</p>
<p>
   */
</p>
<p>
  return [
</p>
<p>
      //应用ID,您的APPID。
</p>
<p>
      &#8216;app_id&#8217; =&gt; &#8220;2016091200497515&#8221;,
</p>
<p>
      //商户私钥 不能用pkcs8.pem中的密钥！！！！！
</p>
<p>
      &#8216;merchant_private_key&#8217; =&gt; &#8220;MIIEogIBAAKCAQEAuVAxeZTkmobcdfsgOor2xK5vyHmLnGfDLK4latRGDu8Esil7vVx59IQK9rnDnO2KFn/zvk36PpsKyyV1c9p1IK+/pm/kpu9GkTJKJm5vSFx21UWzVCZlRLPy92UH9KGHyD4V28mzMCGuUwniy8O0oiwR9sL5Qcayh5/Ao47nnQ3VTby8bFyuEchsOd8fqVDJzyyAdHoWqqKsuYg+SJqdjP0dsJsryS427we2LEZ9k2IZhd2Mhuj7N28ZcI8NS3YAdh5Yw1+g1j6J0oReQ209awSnwkatwUEH1dSNCnI4tNQu7WfbKm9u1eKb6SE83bvKE11ombAftcaO/9X+be6XHwIDAQABAoIBAGlNmZ+mLTVmNzbPyiOaPdnL6fd4og3xpKXqG5cWIu1vgzKeghM7zo1Uz0oei3rMPLDGasKUWwRiZALGOXTpCa/WTsiMQtldlLMDacFm9dOfv2M35UyHOPqOax2MCrZHZ/ow1Yj8l9dc/EtxjbAOeMHC2z5m0u8+ssqAzB3lIdZLQiD+J744AzFZ09VcwtAzLpVBN67DCsqHd+MVwNMajcoUokMfXO7+KYO9uKFS50GDlhTs/nJXy7ihZ1GkLpKjXMBAlP2X3Iyv8Tibd1eKnXkzufCABPH1tnFsMwvW4PJ3DQY4pnyRb9Tq6Ydqcjrc4bgB9E5qUKeB/578R746WoECgYEA8ir1WjjTUYeskcs8Od9kqj/35WYDS704jD2VLp2Sjtodj+/em38s2l3xnH/+S7+msQFdsllmQYC/9yMZ65nNCGeoHKPrJvVgyl45KPxDeeCWrNq8UQBlOezyVg6BKQV8qFPHb/rag8OXhzcRxlIVqzZPFRSw1YVfLZSEADPYrMECgYEAw+XkgRkX6ia3JVFa8dpoFhHweDfuRncw9Wny0/6gFjNv/apl726BoS9jregeJfynqWDkDdkw05I6y9wiQyiXDWH6/JV97xXsoYqFIUfydFFGz2yHJ+l1rCLXjn+k1dmzTJLWU+bRxbVCqC2VAm6laJUkEuntDyCtnN+xf1cn298CgYB/4oG5CINH7d8LCwmeAkPVyHwv74RUDfP701WhzWKk/7hW17R1514XXz8Fh24SMH5lwTPqyF1AwC4f47B/g7QL+TmFDmdTJofbtpB2/WjgxuKrG8QQ/qV2RpPfMD+zGwuulLegghe9N6Agrss7MQPya3atykRsLceKeYCP3tFQwQKBgEX5rp/2yLYZUj6ASw4tSBTqH42x3OlK1jAzwku7no+PnCduYK8gOCnNdbu/OFW1ZGZ6d7wCoxBQIbSEU7DNpPdg0ni7JZrrp/UkN93lh1PJXJPnXngBSslMQNdj/Qtukj9+DBU4VCJdVwwgDCQsReWPsK0Y5lcLAzkQJqUoCtLdAoGAEm6PFZs3mQekOf1L43NfEdG5E8MvuguutBJaKqfuOLk5LnBgC2wP0XUL1Dz47oJNXoQxHse9QUOy7QijTLTz/tehDFUYDSwkJ1lEEvaEhmMqeR/MiUT+z2//MnG4AlNHyYU/cMU38CkgDPwinFv5TvjRMHWyx8ZSvQ2d99ptXHM=&#8221;,
</p>
<p>
      //异步通知地址
</p>
<p>
      &#8216;notify_url&#8217; =&gt; &#8220;http://外网可访问网关地址/alipay.trade.page.pay-PHP-UTF-8/notify_url.php&#8221;,
</p>
<p>
      //同步跳转
</p>
<p>
      &#8216;return_url&#8217; =&gt; &#8220;http://l.com/edu6/public/home/alipay/returnUrl&#8221;,
</p>
<p>
      //编码格式
</p>
<p>
      &#8216;charset&#8217; =&gt; &#8220;UTF-8&#8221;,
</p>
<p>
      //签名方式
</p>
<p>
      &#8216;sign_type&#8217; =&gt; &#8220;RSA2&#8221;,
</p>
<p>
      //支付宝网关
</p>
<p>
      &#8216;gatewayUrl&#8217; =&gt; &#8220;https://openapi.alipaydev.com/gateway.do&#8221;,
</p>
<p>
      //支付宝公钥,查看地址：https://openhome.alipay.com/platform/keyManage.htm 对应APPID下的支付宝公钥。
</p>
<p>
      &#8216;alipay_public_key&#8217; =&gt; &#8220;MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAuVAxeZTkmobcdfsgOor2xK5vyHmLnGfDLK4latRGDu8Esil7vVx59IQK9rnDnO2KFn/zvk36PpsKyyV1c9p1IK+/pm/kpu9GkTJKJm5vSFx21UWzVCZlRLPy92UH9KGHyD4V28mzMCGuUwniy8O0oiwR9sL5Qcayh5/Ao47nnQ3VTby8bFyuEchsOd8fqVDJzyyAdHoWqqKsuYg+SJqdjP0dsJsryS427we2LEZ9k2IZhd2Mhuj7N28ZcI8NS3YAdh5Yw1+g1j6J0oReQ209awSnwkatwUEH1dSNCnI4tNQu7WfbKm9u1eKb6SE83bvKE11ombAftcaO/9X+be6XHwIDAQAB&#8221;,
</p>
<p>
      //支付时提交方式 true 为表单提交方式成功后跳转到return_url,
</p>
<p>
      //false 时为Curl方式 返回支付宝支付页面址址 自己跳转上去 支付成功不会跳转到return_url上， 我也不知道为什么，有人发现可以跳转请告诉 我一下 谢谢
</p>
<p>
      // email: 40281612@qq.com
</p>
<p>
      &#8216;trade_pay_type&#8217; =&gt; true,
</p>
<p>
  ];
</p>
<ul>
<li>
    步骤5：定义路由，创建控制器方法，并将官方demo代码放进去
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1186" height="301" src="/wp-content/uploads/2018/05/word-image-5254.png" class="wp-image-5785" srcset="/wp-content/uploads/2018/05/word-image-5254.png 1186w, /wp-content/uploads/2018/05/word-image-5254-300x76.png 300w, /wp-content/uploads/2018/05/word-image-5254-768x195.png 768w, /wp-content/uploads/2018/05/word-image-5254-1024x260.png 1024w" sizes="(max-width: 1186px) 100vw, 1186px" /></p>
<p>
  &lt;?php
</p>
<p>
  namespace App\Http\Controllers\Home;
</p>
<p>
  //文件头use一下
</p>
<p>
  use EchoBool\AlipayLaravel\Facades\Alipay;
</p>
<p>
  use Illuminate\Http\Request;
</p>
<p>
  use App\Http\Controllers\Controller;
</p>
<p>
  class AlipayController extends Controller
</p>
<p>
  {
</p>
<p>
      /**
</p>
<p>
       * 支付
</p>
<p>
       * @param Request $request
</p>
<p>
       * @return mixed
</p>
<p>
       */
</p>
<p>
      public function goPay(Request $request)
</p>
<p>
      {
</p>
<p>
          //商户订单号，商户网站订单系统中唯一订单号，必填
</p>
<p>
          $out_trade_no = date(&#8216;YmdHis&#8217;) . &#8216;00045623&#8217;;
</p>
<p>
          //订单名称，必填
</p>
<p>
          $subject = &#8216;锁贸通任务ID448&#8217;;
</p>
<p>
          //付款金额，必填
</p>
<p>
          $total_amount = 0.01;
</p>
<p>
          //商品描述，可空
</p>
<p>
          $body = &#8216;macbook pro2&#8217;;
</p>
<p>
          $customData = json_encode([&#8216;model_name&#8217; =&gt; &#8216;ewrwe&#8217;, &#8216;id&#8217; =&gt; 121]);//自定义参数
</p>
<p>
          $response = Alipay::tradePagePay($subject, $body, $out_trade_no, $total_amount, $customData);
</p>
<p>
          //输出表单
</p>
<p>
          return $response[&#8216;redirect_url&#8217;];
</p>
<p>
      }
</p>
<p>
      /**
</p>
<p>
       * 退款
</p>
<p>
       * @param Request $request
</p>
<p>
       */
</p>
<p>
      public function refund(Request $request)
</p>
<p>
      {
</p>
<p>
          //商户订单号
</p>
<p>
          $out_trade_no = $request-&gt;get(&#8216;trade_no&#8217;);
</p>
<p>
          $refund_amount = 0.01;
</p>
<p>
          $refund_reason = &#8216;任务取消退款&#8217;;
</p>
<p>
          $out_request_no = &#8216;201&#8217;;
</p>
<p>
          $response = Alipay::tradeRefund($out_trade_no, $refund_amount, $refund_reason, $out_request_no);
</p>
<p>
          dd($response);
</p>
<p>
      }
</p>
<p>
      /**
</p>
<p>
       * 退款查询
</p>
<p>
       * @param Request $request
</p>
<p>
       */
</p>
<p>
      public function refundQuery(Request $request)
</p>
<p>
      {
</p>
<p>
          //商户订单号
</p>
<p>
          $out_trade_no = $request-&gt;get(&#8216;trade_no&#8217;);
</p>
<p>
          $out_request_no = $request-&gt;get(&#8216;out_request_no&#8217;);
</p>
<p>
          $response = Alipay::refundQuery($out_trade_no,$out_request_no);
</p>
<p>
          dd($response);
</p>
<p>
      }
</p>
<p>
      /**
</p>
<p>
       * 交易是否成功查询
</p>
<p>
       * @param Request $request
</p>
<p>
       */
</p>
<p>
      public function tradePayQuery(Request $request)
</p>
<p>
      {
</p>
<p>
          //商户订单号
</p>
<p>
          $out_trade_no = $request-&gt;get(&#8216;trade_no&#8217;);
</p>
<p>
          $response = Alipay::tradePayQuery($out_trade_no);
</p>
<p>
          dd($response);
</p>
<p>
      }
</p>
<p>
      /**
</p>
<p>
       * 交易关闭
</p>
<p>
       * @param Request $request
</p>
<p>
       */
</p>
<p>
      public function tradeClose(Request $request)
</p>
<p>
      {
</p>
<p>
          //商户订单号
</p>
<p>
          $out_trade_no = $request-&gt;get(&#8216;trade_no&#8217;);
</p>
<p>
          $response = Alipay::Close($out_trade_no);
</p>
<p>
          dd($response);
</p>
<p>
      }
</p>
</p>
<p>
      /**
</p>
<p>
           * 异步通知
</p>
<p>
           * @param Request $request
</p>
<p>
           */
</p>
<p>
          public function notify(Request $request)
</p>
<p>
          {
</p>
<p>
              $result = Alipay::notify($_POST);
</p>
<p>
              /* 实际验证过程建议商户添加以下校验。
</p>
<p>
             1、商户需要验证该通知数据中的out_trade_no是否为商户系统中创建的订单号，
</p>
<p>
             2、判断total_amount是否确实为该订单的实际金额（即商户订单创建时的金额），
</p>
<p>
             3、校验通知中的seller_id（或者seller_email) 是否为out_trade_no这笔单据的对应的操作方（有的时候，一个商户可能有多个seller_id/seller_email）
</p>
<p>
             4、验证app_id是否为该商户本身。
</p>
<p>
             */
</p>
<p>
              if ($result) {//验证成功
</p>
<p>
                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</p>
<p>
                  //请在这里加上商户的业务逻辑程序代
</p>
</p>
<p>
                  //——请根据您的业务逻辑来编写程序（以下代码仅作参考）——
</p>
</p>
<p>
                  //获取支付宝的通知返回参数，可参考技术文档中服务器异步通知参数列表
</p>
</p>
<p>
                  //商户订单号
</p>
</p>
<p>
                  $out_trade_no = $_POST[&#8216;out_trade_no&#8217;];
</p>
</p>
<p>
                  //支付宝交易号
</p>
</p>
<p>
                  $trade_no = $_POST[&#8216;trade_no&#8217;];
</p>
</p>
<p>
                  //交易状态
</p>
<p>
                  $trade_status = $_POST[&#8216;trade_status&#8217;];
</p>
</p>
<p>
                  if ($_POST[&#8216;trade_status&#8217;] == &#8216;TRADE_FINISHED&#8217;) {
</p>
</p>
<p>
                      //判断该笔订单是否在商户网站中已经做过处理
</p>
<p>
                      //如果没有做过处理，根据订单号（out_trade_no）在商户网站的订单系统中查到该笔订单的详细，并执行商户的业务程序
</p>
<p>
                      //请务必判断请求时的total_amount与通知时获取的total_fee为一致的
</p>
<p>
                      //如果有做过处理，不执行商户的业务程序
</p>
</p>
<p>
                      //注意：
</p>
<p>
                      //退款日期超过可退款期限后（如三个月可退款），支付宝系统发送该交易状态通知
</p>
<p>
                  } else if ($_POST[&#8216;trade_status&#8217;] == &#8216;TRADE_SUCCESS&#8217;) {
</p>
<p>
                      //判断该笔订单是否在商户网站中已经做过处理
</p>
<p>
                      //如果没有做过处理，根据订单号（out_trade_no）在商户网站的订单系统中查到该笔订单的详细，并执行商户的业务程序
</p>
<p>
                      //请务必判断请求时的total_amount与通知时获取的total_fee为一致的
</p>
<p>
                      //如果有做过处理，不执行商户的业务程序
</p>
<p>
                      //注意：
</p>
<p>
                      //付款完成后，支付宝系统发送该交易状态通知
</p>
<p>
                  }
</p>
<p>
                  //——请根据您的业务逻辑来编写程序（以上代码仅作参考）——
</p>
<p>
                  echo &#8220;success&#8221;;    //请不要修改或删除
</p>
<p>
              } else {
</p>
<p>
                  //验证失败
</p>
<p>
                  echo &#8220;fail&#8221;;
</p>
</p>
<p>
              }
</p>
<p>
          }
</p>
</p>
<p>
          /**
</p>
<p>
           * 同步通知 即支付成功后跳转到return_url 上时进行验证  如果支付方式是CURL方式将不会跳转 请注意
</p>
<p>
           * @param Request $request
</p>
<p>
           */
</p>
<p>
          public function returnUrl(Request $request)
</p>
<p>
          {
</p>
<p>
              $result = Alipay::notify($_GET);
</p>
<p>
              /* 实际验证过程建议商户添加以下校验。
</p>
<p>
                  1、商户需要验证该通知数据中的out_trade_no是否为商户系统中创建的订单号，
</p>
<p>
                  2、判断total_amount是否确实为该订单的实际金额（即商户订单创建时的金额），
</p>
<p>
                  3、校验通知中的seller_id（或者seller_email) 是否为out_trade_no这笔单据的对应的操作方（有的时候，一个商户可能有多个seller_id/seller_email）
</p>
<p>
                  4、验证app_id是否为该商户本身。
</p>
<p>
               */
</p>
</p>
<p>
              if ($result) {//验证成功
</p>
<p>
                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</p>
<p>
                  //请在这里加上商户的业务逻辑程序代码
</p>
</p>
<p>
                  //——请根据您的业务逻辑来编写程序（以下代码仅作参考）——
</p>
<p>
                  //获取支付宝的通知返回参数，可参考技术文档中页面跳转同步通知参数列表
</p>
</p>
<p>
                  //商户订单号
</p>
<p>
                  $out_trade_no = htmlspecialchars($_GET[&#8216;out_trade_no&#8217;]);
</p>
</p>
<p>
                  //支付宝交易号
</p>
<p>
                  $trade_no = htmlspecialchars($_GET[&#8216;trade_no&#8217;]);
</p>
</p>
<p>
                  echo &#8220;验证成功&lt;br /&gt;支付宝交易号：&#8221; . $trade_no;
</p>
</p>
<p>
                  //——请根据您的业务逻辑来编写程序（以上代码仅作参考）——
</p>
</p>
<p>
                  /////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
</p>
<p>
              } else {
</p>
<p>
                  //验证失败
</p>
<p>
                  echo &#8220;验证失败&#8221;;
</p>
<p>
              }
</p>
<p>
          }
</p>
<p>
  }
</p>
<ul>
<li>
    步骤6：访问测试
  </li>
</ul>
<p><img loading="lazy" decoding="async" width="1074" height="625" src="/wp-content/uploads/2018/05/word-image-5255.png" class="wp-image-5786" srcset="/wp-content/uploads/2018/05/word-image-5255.png 1074w, /wp-content/uploads/2018/05/word-image-5255-300x175.png 300w, /wp-content/uploads/2018/05/word-image-5255-768x447.png 768w, /wp-content/uploads/2018/05/word-image-5255-1024x596.png 1024w" sizes="(max-width: 1074px) 100vw, 1074px" /></p>
<p>
  报错
</p>
<p><img loading="lazy" decoding="async" width="712" height="454" src="/wp-content/uploads/2018/05/word-image-5256.png" class="wp-image-5787" srcset="/wp-content/uploads/2018/05/word-image-5256.png 712w, /wp-content/uploads/2018/05/word-image-5256-300x191.png 300w" sizes="(max-width: 712px) 100vw, 712px" /></p>
<p>
  php artisan config:cache</p>
]]></content:encoded>
					
					<wfw:commentRss>/%e5%90%8e%e5%8f%b0%e6%a1%86%e6%9e%b6/5738.html/feed</wfw:commentRss>
			<slash:comments>0</slash:comments>
		
		
			</item>
	</channel>
</rss>
