Laravel框架实战-在线教育平台（3）

︴准备

1、说明

专业分类数据表

前段后端 web开发、编程、开发、数据库、大数据

专业数据表（学科表）

PHP Java C++ Python 全栈 UI专业

课程数据表

如PHP专业下面有PHP核心编程，Javascript，jquery，ajax，商城项目,TP框架课程，等等

课时数据表

如PHP专业下面的PHP核心编程课程下面有，php的函数，PHP的数组，php的文件上传。

它们的关系如下图：

点播: 点击课时直接播放视频

直播：对面有人和你试试互动看到的画面

数据字典

后台专业分类表（protype）

表名	protype
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	protype_name	varchar(20)	分类名	N
3	sort	tinyint	排序编号	Y	0
4	state	tinyint	状态：0-禁用，1-启用	Y	启用
5	created_at	int	记录创建时间	Y
6	updated_at	int	记录更新时间	Y

后台专业表（profession）

表名	profession
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	protype_id	tinyint	专业分类表的主键	N
3	profession_name	varchar(32)	专业名称	Y
4	profession_desc	varchar(255)	专业描述	N
5	img	varchar(255)	在列表页面展示的图片地址	N
6	updated_at	int	创建于	Y	0
7	created_at	int	更新于	Y	0

后台课程表（course）

表名	course
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	profession_id	int	关联专业id	N
3	course_name	varchar(30)	课程名称	N
4	course_price	decimal(9,2)	课程的价格	N
5	img	varchar(120)	封面地址	N
6	course_desc	varchar(255)	课程描述	Y
7	created_at	int	记录创建时间	Y	0
8	updated_at	int	记录更新时间	Y	0

后台课时点播表（lession）

表名	lession
序号	字段	类型	说明	空	默认值	主键
1	id	int	自增主键	N	N/A	是
2	course_id	int	所属的课程id，关联课程表	N
3	img	varchar(120)	封面图	Y
4	lession_name	varchar(50)	点播记录名	N
5	video_address	varchar(255)	点播视频的地址	N
6	video_time	int	视频的长度，单位秒	N	0
7	teacher_name	varchar(32)	讲师名称	Y
8	lesson_desc	varchar(255)	课时描述	N
9	state	tinyint	状态：0-禁用，1-启用	N	启用
10	created_at	int	记录创建时间	Y
11	updated_at	int	记录更新时间	Y

3、迁移

步骤1：创建迁移文件并复制下属代码

步骤2：运行

/**

* Run the migrations.

* @return void

public function up()

{

//创建专业分类表

Schema::create(‘protype’,function($table){

$table->increments(‘id’);

$table->string(‘protype_name’,20)->comment(‘分类名’);

$table->tinyInteger(‘sort’)->default(0);

$table->unsignedTinyInteger(‘state’)->default(1)->comment(‘状态:0停用1开启’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

//创建专业表

Schema::create(‘profession’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘profession_name’,32)->comment(‘专业名称’);

$table->unsignedTinyInteger(‘protype_id’)->comment(‘专业分类表的主键’);

$table->string(‘img’,120)->default(”)->comment(‘封面图’);

$table->string(‘profession_desc’)->default(”)->comment(‘描述’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

//创建课程表

Schema::create(‘course’, function (Blueprint $table) {

$table->increments(‘id’);

$table->string(‘course_name’,32)->comment(‘课程名称’);

$table->integer(‘profession_id’)->comment(‘课程所属专业的id’);

$table->decimal(‘course_price’,9,2)->default(0)->comment(‘课程的价格’);

$table->string(‘img’,120)->default(”)->comment(‘封面图’);

$table->string(‘course_desc’)->default(”)->comment(‘课程描述’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

//创建课时表

Schema::create(‘lesson’, function (Blueprint $table) {

$table->increments(‘id’);

$table->integer(‘course_id’)->comment(‘课时所属课程的id’);

$table->string(‘img’,120)->default(”)->comment(‘封面图’);

$table->string(‘lesson_name’,32)->comment(‘课时名称’);

$table->string(‘video_address’,120)->default(”)->comment(‘视频的地址’);

$table->integer(‘video_time’)->default(10)->comment(‘课时的时长’);

$table->string(‘teacher_name’,32)->default(”)->comment(‘讲师名称’);

$table->string(‘lesson_desc’)->default(”)->comment(‘课时描述’);

$table->unsignedTinyInteger(‘state’)->default(1)->comment(‘状态:0停用1开启’);

$table->unsignedInteger(‘created_at’)->default(0)->comment(‘创建于’);

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘创建于’);

});

}

/**

* Reverse the migrations.

* @return void

public function down()

{

Schema::drop(‘protype’);

Schema::drop(‘profession’);

Schema::drop(‘course’);

Schema::drop(‘lesson’);

}

4、填充

1）专业分类表（php artisan make:seeder ProtypeTableSeeder）

<?php

use Illuminate\Database\Seeder;

class ProtypeTableSeeder extends Seeder

{

/**

* Run the database seeds.

* @return void

public function run()

{

DB::table(‘protype’)->insert([

[

‘protype_name’=>’后端’

[

‘protype_name’=>’web开发’

[

‘protype_name’=>’运维’

[

‘protype_name’=>’数据库’

[

‘protype_name’=>’大数据’

]

]);

}

2）专业表（php artisan make:seeder ProfessionTableSeeder ）

<?php

use Illuminate\Database\Seeder;

class ProfessionTableSeeder extends Seeder

{

/**

* Run the database seeds.

* @return void

public function run()

{

DB::table(‘profession’)->insert([

[

‘protype_id’=> 1,

‘profession_name’=>’PHP学科’,

‘profession_desc’=>’是世界上最好的语言’

[

‘protype_id’=> 2,

‘profession_name’=>’HTML5&全栈’,

‘profession_desc’=>’是世界上最好的语言’

[

‘protype_id’=> 3,

‘profession_name’=>’Python全栈’,

‘profession_desc’=>’是世界上最好的语言’

]

]);

}

3）课程表（php artisan make:seeder CourseTableSeeder ）

<?php

use Illuminate\Database\Seeder;

class CourseTableSeeder extends Seeder

{

/**

* Run the database seeds.

* @return void

public function run()

{

DB::table(‘course’)->insert([

[

‘course_name’=>’PHP核心编程’,

‘profession_id’=>1,

‘course_price’=>12.34,

‘course_desc’=>’非常经典的课程’

[

‘course_name’=>’LInux环境安装’,

‘profession_id’=>2,

‘course_price’=>4512.34,

‘course_desc’=>’非常经典的课程’

[

‘course_name’=>’PHP文件上传’,

‘profession_id’=>3,

‘course_price’=>6712.34,

‘course_desc’=>’非常经典的课程’

]);

}

4）课时点播表（php artisan make:seeder LessonTableSeeder ）

<?php

use Illuminate\Database\Seeder;

class LessonTableSeeder extends Seeder

{

/**

* Run the database seeds.

* @return void

public function run()

{

//填充lesson表里面的数据

DB::table(‘lesson’)->insert([

[

‘lesson_name’=>’PHP文件上传’,

‘course_id’=>1,

‘video_time’=>20,

‘teacher_name’=>’李白’,

‘lesson_desc’=>’非常经典的课程’

[

‘lesson_name’=>’PHP数组’,

‘course_id’=>2,

‘video_time’=>30,

‘teacher_name’=>’刘备’,

‘lesson_desc’=>’非常经典的课程’

[

‘lesson_name’=>’ajax的前生今世’,

‘course_id’=>1,

‘video_time’=>10,

‘teacher_name’=>’曹操’,

‘lesson_desc’=>’非常经典的课程’

[

‘lesson_name’=>’linux的环境安装’,

‘course_id’=>1,

‘video_time’=>15,

‘teacher_name’=>’李逵’,

‘lesson_desc’=>’非常经典的课程’

]);

}

︴操作步骤

步骤1：创建上述4个填充器

步骤2：创建完毕后将上述代码赋值粘贴到对应填充器中即可
步骤3：执行所有填充器即可（插入数据）

php artisan db:seed –class=ProtypeTableSeeder

php artisan db:seed –class=ProfessionTableSeeder

php artisan db:seed –class=CourseTableSeeder

php artisan db:seed –class=LessonTableSeeder

5、创建模型

1）专业分类表

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Protype extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘protype’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘protype_name’, ‘sort’, ‘state’];

}

2）专业表

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Profession extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘profession’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘profession_name’, ‘protype_id’, ‘img’, ‘profession_desc’];

}

3）课程表

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Course extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘course’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘course_name’, ‘profession_id’, ‘course_price’, ‘img’, ‘course_desc’];

}

4）课时点播

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Lession extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘lession’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [

‘course_id’,

‘img’,

‘lesson_name’,

‘video_address’,

‘video_time’,

‘teacher_name’,

‘lesson_desc’,

‘state’

];

}

一、专业分类管理

︴效果

列表

列表功能

1）显示列表（模板文件：admin-permission.html）

步骤1：定义路由

步骤2：创建控制器和方法，并调用视图

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class ProtypeController extends Controller

{

//列表

public function index()

{

//2.加载视图

return view(‘admin.protype.index’);

}

步骤3：创建视图

2）数据处理

步骤1：修改路由（注：datatables客户端分页也得发送一步请求）

步骤2：更改视图设置datatables

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>专业分类管理</title>

</head>

<body>

<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 专业分类管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>

<button type=”button” class=”btn btn-success” id=”search” name=””><i class=”Hui-iconfont”></i> 搜专业分类节点</button>

</form>

</div>

<div class=”cl pd-5 bg-1 bk-gray mt-20″> <span class=”l”><a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”><i class=”Hui-iconfont”></i> 批量删除</a> <a href=”javascript:;” onclick=”admin_permission_add(‘添加专业分类节点’,’admin-permission-add.html’,”,’310′)” class=”btn btn-primary radius”><i class=”Hui-iconfont”></i> 添加专业分类节点</a></span> <span class=”r”>共有数据：<strong>54</strong> 条</span> </div>

<thead>

<tr>

<th scope=”col” colspan=”8″>专业分类节点</th>

</tr>

<tr class=”text-c”>

<th width=”25″><input type=”checkbox” name=”” value=””></th>

<th width=”40″>ID</th>

<th width=”200″>分类名称</th>

<th>排序</th>

<th>状态</th>

<th>创建于</th>

<th>更新于</th>

<th width=”100″>操作</th>

</tr>

</thead>

<tbody>

{{–<tr class=”text-c”>–}}

{{–<td><input type=”checkbox” value=”1″ name=””></td>–}}

{{–<td>1</td>–}}

{{–<td>栏目添加</td>–}}

{{–<td></td>–}}

{{–<td><a title=”编辑” href=”javascript:;” onclick=”admin_permission_edit(‘角色编辑’,’admin-permission-add.html’,’1′,”,’310′)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a> <a title=”删除” href=”javascript:;” onclick=”admin_permission_del(this,’1′)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a></td>–}}

</tr>

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

//客户端分页大DD 服务端分页小DD

var table = $(‘table’).DataTable({

//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）

//”serverSide”: true,

ajax: {

url: “{{ url(‘admin/protype/index’) }}”,

“type”: “post”,

‘headers’: { ‘X-CSRF-TOKEN’ : ‘{{ csrf_token() }}’ },

“data”: function (data) {

}

//columns

//作用：设置服务端返回数据填充规则

//语法：{“data”: “键”，”defaultContent”: “默认值”}

“columns”: [

{ “data”: “tmp1”, defaultContent: “占位，复选框” },

{ “data”: “id” },

{ “data”: “protype_name” },

{ “data”: “sort” },

{ “data”: “state” },

{ “data”: “created_at” },

{ “data”: “updated_at” },

{ “data”: “tmp2”, defaultContent: “占位，操作” },

//createdRow

//作用：创建tr时回调

//row:创建好的tr的dom对象

//data:数据源，代表服务器端返回的每条记录的实体信息

//dataIndex:数据源的索引号码

“createdRow”: function(row, data, dataIndex) {

//匹配每一行的第一列

$(row).find(“td:first”).html(“<input type=’checkbox’ name=’choose[]’ value='”+data.id+”‘ />”)

//匹配每一行的第八列

if (data.state == 1) {

$(row).find(“td:eq(4)”).html(‘<span class=”label label-success radius”>已启用</span>’);

} else {

$(row).find(“td:eq(4)”).html(‘<span class=”label radius”>已停用</span>’);

}

//匹配每一行的最后一列

var lastHtml = ‘<a style=”text-decoration:none” onClick=”admin_start(this,10001)” href=”javascript:;” title=”启用”><i class=”Hui-iconfont”></i></a> <a title=”编辑” href=”javascript:;” onclick=”admin_edit(\’管理员编辑\’,\’admin-add.html\’,2,800,500)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a> <a title=”删除” href=”javascript:;” onclick=”admin_del(this,1)” class=”ml-5″ style=”text-decoration:none”><i class=”Hui-iconfont”></i></a>’;

$(row).find(“td:last”).html(lastHtml);

//让每一行居中

$(row).addClass(‘text-c’);

// searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

// iDisplayLength:2, //限制每页显示条数

});

//客户端搜索功能更

$(‘#search’).click(function(){

var search_content = $(‘#search_content’).val();

table.search(search_content).draw();

});

$(‘#DataTables_Table_0_filter’).hide();

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-专业分类-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-专业分类-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-专业分类-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

步骤3：更改控制器方法

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Protype;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class ProtypeController extends Controller

{

//列表

public function index(Request $request)

{

//1.判断HTTP请求类型（脚下留心：客户端分页直接向所有数据响应即可）

if ($request->isMethod(‘post’)) {

//2.查询所有数据

$protypes = Protype::get();

//3.响应json数据

return response()->json([

‘data’ => $protypes

]);

} else {

//2.加载视图

return view(‘admin.protype.index’);

}

专业管理

︴效果

列表

1、列表功能（模板文件：admin-permission.html）

1）显示页面

步骤1：定义路由

步骤2：创建控制器方法并加载视图

步骤3：创建视图

2）数据处理

步骤1：修改路由（客户端分页）

步骤2：修改视图，设置datatables插件

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

</head>

<body>

<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 专业管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>

<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜专业节点</button>

</form>

</div>

<div class=”cl pd-5 bg-1 bk-gray mt-20″> <span class=”l”><a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”><i class=”Hui-iconfont”></i> 批量删除</a> <a href=”javascript:;” onclick=”admin_permission_add(‘添加专业节点’,’admin-permission-add.html’,”,’310′)” class=”btn btn-primary radius”><i class=”Hui-iconfont”></i> 添加专业节点</a></span> <span class=”r”>共有数据：<strong>54</strong> 条</span> </div>

<thead>

<tr>

</tr>

<th width=”25″><input type=”checkbox” name=”” value=””></th>

<th width=”40″>ID</th>

<th width=”200″>封面</th>

<th>专业分类名称</th>

<th>专业名称</th>

<th>更新于</th>

<th>创建于</th>

<th width=”100″>操作</th>

</tr>

</thead>

<tbody>

<!– <tr class=”text-c”>

</tr> –>

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

<script type=”text/javascript”>

//客户端分页大DD 服务端分页小DD

var table = $(‘table’).DataTable({

//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）

//”serverSide”: true,

ajax: {

url: “{{ url(‘admin/profession/index’) }}”,

“type”: “post”,

‘headers’: { ‘X-CSRF-TOKEN’ : ‘{{ csrf_token() }}’ },

“data”: function (data) {

}

//columns

//作用：设置服务端返回数据填充规则

//语法：{“data”: “键”，”defaultContent”: “默认值”}

“columns”: [

{ “data”: “tmp1”, defaultContent: “占位，复选框” },

{ “data”: “id” },

{ “data”: “img”, defaultContent: “占位，图片” },

// { “data”: “protype_id” },

{ “data”: “protype.protype_name” },

{ “data”: “profession_name” },

{ “data”: “created_at” },

{ “data”: “updated_at” },

{ “data”: “tmp2”, defaultContent: “占位，操作” },

//createdRow

//作用：创建tr时回调

//row:创建好的tr的dom对象

//data:数据源，代表服务器端返回的每条记录的实体信息

//dataIndex:数据源的索引号码

“createdRow”: function(row, data, dataIndex) {

//匹配每一行的第一列

$(row).find(“td:first”).html(“<input type=’checkbox’ name=’choose[]’ value='”+data.id+”‘ />”)

//匹配每一行的第八列

if (data.img) {

$(row).find(“td:eq(2)”).html(‘<img src=’+data.img+’ width=”120″ height=”60″>’);

} else {

var defaultImg = “{{ asset(‘img/default.png’) }}”;

$(row).find(“td:eq(2)”).html(‘<img src=”‘+defaultImg+'” width=”120″ height=”60″>’);

}

//匹配每一行的最后一列

$(row).find(“td:last”).html(lastHtml);

//让每一行居中

$(row).addClass(‘text-c’);

// searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

// iDisplayLength:2, //限制每页显示条数

});

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-专业-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-专业-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-专业-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

步骤3：修改控制器方法响应数据

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Profession;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class ProfessionController extends Controller

{

//列表

public function index(Request $request)

{

//1.判断HTTP类型

if ($request->isMethod(‘post’)) {

//2.查询所有数据

$professions = Profession::with(‘protype’)->get();

//3.响应json数据

return response()->json([

‘data’ => $professions

]);

} else {

//2.加载视图

return view(‘admin.profession.index’);

}

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Profession extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘profession’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘profession_name’, ‘protype_id’, ‘img’, ‘profession_desc’];

/**

* 关联模型（1:1）

* @return \Illuminate\Database\Eloquent\Builder|static

public function protype()

{

return $this->hasOne(‘App\Http\Model\Protype’, ‘id’, ‘protype_id’);

}

三、课程管理

︴效果

列表

列表功能（模板文件：admin-permission.html）

1）显示页面

步骤1：定义路由

步骤2：创建控制器和方法并调用视图

步骤2：创建视图

2）数据处理

步骤1：修改路由

步骤2：修改视图，设置datatable

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

</head>

<body>

<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 课程管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>

<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜课程节点</button>

</form>

</div>

<div class=”cl pd-5 bg-1 bk-gray mt-20″> <span class=”l”><a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”><i class=”Hui-iconfont”></i> 批量删除</a> <a href=”javascript:;” onclick=”admin_permission_add(‘添加课程节点’,’admin-permission-add.html’,”,’310′)” class=”btn btn-primary radius”><i class=”Hui-iconfont”></i> 添加课程节点</a></span> <span class=”r”>共有数据：<strong>54</strong> 条</span> </div>

<table class=”table table-border table-bordered table-bg”>

<thead>

<tr>

<th scope=”col” colspan=”9″>课程节点</th>

</tr>

<tr class=”text-c”>

<th width=”25″><input type=”checkbox” name=”” value=””></th>

<th width=”40″>ID</th>

<th>封面地址</th>

<th width=”200″>所属专业</th>

<th>课程名称</th>

<th>课程的价格</th>

<th>创建于</th>

<th>更新于</th>

<th width=”100″>操作</th>

</tr>

</thead>

<tbody>

<!– <tr class=”text-c”>

</tr> –>

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

//客户端分页大DD 服务端分页小DD

var table = $(‘table’).dataTable({

//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）

“serverSide”: true,

ajax: {

url: “{{ url(‘admin/course/index’) }}”,

“type”: “post”,

‘headers’: { ‘X-CSRF-TOKEN’ : ‘{{ csrf_token() }}’ },

“data”: function (data) {

// data.startTime = $(‘#startTime’).val();

// data.endTime = $(‘#endTime’).val();

// data.username = $(‘#username’).val();

}

//作用：设置服务端返回数据填充规则

//语法：{“data”: “键”，”defaultContent”: “默认值”}

“columns”: [

{ “data”: “tmp1”, defaultContent: “占位，复选框” },

{ “data”: “id” },

{ “data”: “img” },

// { “data”: “profession_id” },

{ “data”: “profession.profession_name” },

{ “data”: “course_name” },

{ “data”: “course_price” },

{ “data”: “created_at” },

{ “data”: “updated_at” },

{ “data”: “tmp2”, defaultContent: “占位，操作” },

//createdRow

//作用：创建tr时回调

//row:创建好的tr的dom对象

//data:数据源，代表服务器端返回的每条记录的实体信息

//dataIndex:数据源的索引号码

“createdRow”: function(row, data, dataIndex) {

//匹配每一行的第一列

$(row).find(“td:first”).html(“<input type=’checkbox’ name=’choose[]’ value='”+data.id+”‘ />”)

//匹配每一行的第二列

if (data.img) {

$(row).find(“td:eq(2)”).html(‘<img src=’+data.img+’ width=”120″ height=”60″>’);

} else {

var defaultImg = “{{ asset(‘img/default.png’) }}”;

$(row).find(“td:eq(2)”).html(‘<img src=”‘+defaultImg+'” width=”120″ height=”60″>’);

}

//匹配每一行的最后一列

$(row).find(“td:last”).html(lastHtml);

//让每一行居中

$(row).addClass(‘text-c’);

searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

iDisplayLength:6, //限制每页显示条数

});

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-课程-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-课程-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-课程-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

步骤3：修改控制器方法响应数据

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Course;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class CourseController extends Controller

{

//列表

public function index(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.接受数据

$postData = $request->only([‘start’, ‘length’, ‘draw’]);

//3.查询数据

$courses = Course::with(‘profession’)->orderBy(‘id’, ‘desc’);

//4.响应json数据

return response()->json([

‘draw’ => (int)$postData[‘draw’], //必须，HTTP请求发送什么就响应什么

‘recordsTotal’ => Course::count(), //必须，admin表总记录数

‘recordsFiltered’ => $courses->count(), //必须，admin表总记录数（增加where条件）

‘data’ => $courses->offset($postData[‘start’])->limit($postData[‘length’])->get()

]);

} else {

//2.加载视图

return view(‘admin.course.index’);

}

<?php

namespace App\Http\Model;

use Illuminate\Database\Eloquent\Model;

class Course extends Model

{

/**

* 声明表名（注：laravel会自动加s所以自己声明覆盖）

* @var string

protected $table = ‘course’;

/**

* Unix时间戳形式填充创建于和更新于（注：模型默认托管时间但是是datetime类型）

* @var string

protected $dateFormat = ‘U’;

/**

* 声明可批量设置的属性（注：当使用create静态方式时）

* @var array

protected $fillable = [‘course_name’, ‘profession_id’, ‘course_price’, ‘img’, ‘course_desc’];

/**

* 关联专业模型（1:1）

* 语法：模型名::with（’role’）->first()

* @return \Illuminate\Database\Eloquent\Relations\HasOne

public function profession()

{

#return $this->hasOne(关联模型名，关联模型公共字段，本模型公共字段)

return $this->hasOne(‘App\Http\Model\Profession’,’id’, ‘profession_id’);

}

四、课时管理（点播）

︴效果

列表

播放

列表功能（模板文件：admin-permission.html）

1）显示页面

步骤1：定义路由

步骤2：创建控制器和方法、并且调用视图

步骤3：加载视图

2）数据处理

步骤1：修改路由

步骤2：修改视图，设置datatables

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

</head>

<body>

<nav class=”breadcrumb”><i class=”Hui-iconfont”></i> 首页 <span class=”c-gray en”>></span> 管理员管理 <span class=”c-gray en”>></span> 课时管理 <a class=”btn btn-success radius r” style=”line-height:1.6em;margin-top:3px” href=”javascript:location.replace(location.href);” title=”刷新” ><i class=”Hui-iconfont”></i></a></nav>

<button type=”submit” class=”btn btn-success” id=”” name=””><i class=”Hui-iconfont”></i> 搜课时节点</button>

</form>

</div>

<div class=”cl pd-5 bg-1 bk-gray mt-20″> <span class=”l”><a href=”javascript:;” onclick=”datadel()” class=”btn btn-danger radius”><i class=”Hui-iconfont”></i> 批量删除</a> <a href=”javascript:;” onclick=”admin_permission_add(‘添加课时节点’,’admin-permission-add.html’,”,’310′)” class=”btn btn-primary radius”><i class=”Hui-iconfont”></i> 添加课时节点</a></span> <span class=”r”>共有数据：<strong>54</strong> 条</span> </div>

<table class=”table table-border table-bordered table-bg”>

<thead>

<tr>

<th scope=”col” colspan=”11″>课时节点</th>

</tr>

<tr class=”text-c”>

<th width=”25″><input type=”checkbox” name=”” value=””></th>

<th width=”40″>ID</th>

<th width=”40″>封面图</th>

<th>所属课程</th>

<th>课时名称</th>

<th>预览视频</th>

<th>播放时间/s</th>

<th>讲师</th>

<th>状态</th>

<th>创建于</th>

<th>更新于</th>

<th width=”100″>操作</th>

</tr>

</thead>

<tbody>

<!– <tr class=”text-c”>

</tr> –>

</tbody>

</table>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

//客户端分页大DD 服务端分页小DD

var table = $(‘table’).dataTable({

//开启服务端分页（注：开启后发送的HTTP请求会携带起始位置和每页显示条数等信息）

“serverSide”: true,

ajax: {

url: “{{ url(‘admin/lesson/index’) }}”,

“type”: “post”,

‘headers’: { ‘X-CSRF-TOKEN’ : ‘{{ csrf_token() }}’ },

“data”: function (data) {

}

//作用：设置服务端返回数据填充规则

//语法：{“data”: “键”，”defaultContent”: “默认值”}

“columns”: [

{ “data”: “tmp1”, defaultContent: “占位，复选框” },

{ “data”: “id” },

{ “data”: “img” },

// { “data”: “course_id” },

{ “data”: “course.course_name” },

{ “data”: “lesson_name” },

{ “data”: “tmp3”, defaultContent: “占位，播放按钮” },

{ “data”: “video_time” },

{ “data”: “teacher_name” },

{ “data”: “state” },

{ “data”: “created_at” },

{ “data”: “updated_at” },

{ “data”: “tmp2”, defaultContent: “占位，操作” },

//createdRow

//作用：创建tr时回调

//row:创建好的tr的dom对象

//data:数据源，代表服务器端返回的每条记录的实体信息

//dataIndex:数据源的索引号码

“createdRow”: function(row, data, dataIndex) {

//匹配每一行的第一列

$(row).find(“td:first”).html(“<input type=’checkbox’ name=’choose[]’ value='”+data.id+”‘ />”)

//匹配每一行的第二列

if (data.img) {

$(row).find(“td:eq(2)”).html(‘<img src=’+data.img+’ width=”120″ height=”60″>’);

} else {

var defaultImg = “{{ asset(‘img/default.png’) }}”;

$(row).find(“td:eq(2)”).html(‘<img src=”‘+defaultImg+'” width=”120″ height=”60″>’);

}

//预览播放按钮

$(row).find(“td:eq(5)”).html(‘<a href=”javascript:;” onclick=”” class=”btn btn-primary radius”><i class=”Hui-iconfont”></i>播放</a>’);

if (data.state == 1) {

$(row).find(“td:eq(8)”).html(‘<span class=”label label-success radius”>已启用</span>’);

} else {

$(row).find(“td:eq(8)”).html(‘<span class=”label radius”>已停用</span>’);

}

//匹配每一行的最后一列

$(row).find(“td:last”).html(lastHtml);

//让每一行居中

$(row).addClass(‘text-c’);

searching : false, //禁用搜索

bLengthChange: false, //去掉每页显示多少条数据方法

iDisplayLength:6, //限制每页显示条数

});

参数解释：

title 标题

url 请求的url

id 需要操作的数据id

w 弹出层宽度（缺省调默认值）

h 弹出层高度（缺省调默认值）

/*管理员-课时-添加*/

function admin_permission_add(title,url,w,h){

layer_show(title,url,w,h);

}

/*管理员-课时-编辑*/

function admin_permission_edit(title,url,id,w,h){

layer_show(title,url,w,h);

}

/*管理员-课时-删除*/

function admin_permission_del(obj,id){

layer.confirm(‘确认要删除吗？’,function(index){

$.ajax({

type: ‘POST’,

url: ”,

dataType: ‘json’,

success: function(data){

$(obj).parents(“tr”).remove();

layer.msg(‘已删除!’,{icon:1,time:1000});

error:function(data) {

console.log(data.msg);

});

}

</script>

</body>

</html>

步骤1：修改控制器方法响应数据

<?php

namespace App\Http\Controllers\Admin;

use App\Http\Model\Lesson;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

class LessonController extends Controller

{

//列表

public function index(Request $request)

{

//1.判断HTTP请求类型

if ($request->isMethod(‘post’)) {

//2.接受数据

$postData = $request->only([‘start’, ‘length’, ‘draw’]);

//3.查询数据

$courses = Lesson::with(‘course’)->orderBy(‘id’, ‘desc’);

//4.响应json数据

return response()->json([

‘draw’ => (int)$postData[‘draw’], //必须，HTTP请求发送什么就响应什么

‘recordsTotal’ => Lesson::count(), //必须，admin表总记录数

‘recordsFiltered’ => $courses->count(), //必须，admin表总记录数（增加where条件）

‘data’ => $courses->offset($postData[‘start’])->limit($postData[‘length’])->get()

]);

} else {

//2.加载视图

return view(‘admin.lesson.index’);

}

列表播放功能

1）思路

步骤1：用户点击播放按钮弹框，打开admin/lesson/play页面（注：

播放视频地址url，如：admin/lesson/play?video=xxxx.mp3）

步骤2：控制器方法 echo html播放标签即可

your browser does not support the video tag

</video>

代码步骤

步骤1：绑定点击事件，点击后打开弹框（弹框加载页面）

//预览播放按钮

var playurl = “{{ url(‘admin/lesson/play’) }}?video=” + data.video_address;

$(row).find(“td:eq(5)”).html(‘<a href=”javascript:;” onclick=video_play(“‘+data.lesson_name+’预览”,”‘+playurl+'”,800,450) class=”btn btn-primary radius”><i class=”Hui-iconfont”></i>播放</a>’);

/*管理员-课时-播放*/

function video_play(title,url,w,h){

layer_show(title,url,w,h);

}

步骤2：设置路由

步骤3：常见控制器方法获取播放地址

//点播

public function play(Request $request)

{

//1.接受播放地址

//dd(asset(‘img/default.mp4’));

$video_addr = $request->input(‘video’) ? $request->input(‘video’) : asset(‘img/default.mp4’);

echo “<video width=’100%’ height=’390′ src='{$video_addr}’ autoplay controls=’controls’>

您的浏览器不支持 video 标签。

</video>”;

}

︴完善

左侧菜单

<!DOCTYPE HTML>

<html>

<head>

<!–[if lt IE 9]>

<![endif]–>

<!–[if IE 6]>

<![endif]–>

<title>H-ui.admin v3.1</title>

</head>

<body>

<div class=”container-fluid cl”> <a class=”logo navbar-logo f-l mr-10 hidden-xs” href=”/aboutHui.shtml”>H-ui.admin</a> <a class=”logo navbar-logo-m f-l mr-10 visible-xs” href=”/aboutHui.shtml”>H-ui</a>

</ul>

</li>

</ul>

</nav>

<li>{{ Auth::guard(‘admin’)->user()->role()->first()->role_name }} </li>

<a href=”#” class=”dropDown_A”>{{ Auth::guard(‘admin’)->user()->username }} <i class=”Hui-iconfont”></i></a>

</ul>

</li>

</ul>

</li>

</ul>

</nav>

</div>

</header>

<dl id=”menu-article”>

<dt><i class=”Hui-iconfont”></i>专业分类管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>

<dd>

<ul>

<li><a data-href=”{{ url(‘admin/protype/index’) }}” data-title=”资讯管理” href=”javascript:void(0)”>分类管理</a></li>

<li><a data-href=”{{ url(‘admin/profession/index’) }}” data-title=”资讯管理” href=”javascript:void(0)”>专业管理</a></li>

</ul>

</dd>

</dl>

<dl id=”menu-product”>

<dt><i class=”Hui-iconfont”></i>课程课时管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>

<dd>

<ul>

<li><a data-href=”{{ url(‘admin/course/index’) }}” data-title=”课程管理” href=”javascript:void(0)”>课程管理</a></li>

<li><a data-href=”{{ url(‘admin/lesson/index’) }}” data-title=”课时管理” href=”javascript:void(0)”>课时管理</a></li>

</ul>

</dd>

</dl>

<dl id=”menu-admin”>

<dt><i class=”Hui-iconfont”></i>管理员管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>

<dd>

<ul>

<li><a data-href=”{{ url(‘admin/role/index’) }}” data-title=”角色管理” href=”javascript:void(0)”>角色管理</a></li>

<li><a data-href=”{{ url(‘admin/auth/index’) }}” data-title=”权限管理” href=”javascript:void(0)”>权限管理</a></li>

<li><a data-href=”{{ url(‘admin/admin/index’) }}” data-title=”管理员列表” href=”javascript:void(0)”>管理员列表</a></li>

</ul>

</dd>

</dl>

<dd>

<ul>

</ul>

</dd>

</dl>

<dd>

<ul>

</ul>

</dd>

</dl>

<dd>

<ul>

<li><a data-href=”member-del.html” data-title=”删除的会员” href=”javascript:;”>删除的会员</a></li>

</ul>

</dd>

</dl>

<dd>

<ul>

<li><a data-href=”charts-2.html” data-title=”时间轴折线图” href=”javascript:void(0)”>时间轴折线图</a></li>

</ul>

</dd>

</dl>

<dd>

<ul>

</ul>

</dd>

</dl>

</div>

</aside>

</ul>

</div>

</div>

</div>

</section>

<ul>

</ul>

</div>

<!–_footer 作为公共模版分离出去–>

<!–请在下方写此页面业务相关的脚本–>

$(function(){

/*$(“#min_title_list li”).contextMenu(‘Huiadminmenu’, {

bindings: {

‘closethis’: function(t) {

console.log(t);

if(t.find(“i”)){

t.find(“i”).trigger(“click”);

}

‘closeall’: function(t) {

alert(‘Trigger was ‘+t.id+’\nAction was Email’);

}

});*/

});

/*个人信息*/

function myselfinfo(){

layer.open({

type: 1,

area: [‘300px’,’200px’],

fix: false, //不固定

maxmin: true,

shade:0.4,

title: ‘查看信息’,

content: ‘<div>管理员信息</div>’

});

}

/*资讯-添加*/

function article_add(title,url){

var index = layer.open({

type: 2,

title: title,

content: url

});

layer.full(index);

}

/*图片-添加*/

function picture_add(title,url){

var index = layer.open({

type: 2,

title: title,

content: url

});

layer.full(index);

}

/*产品-添加*/

function product_add(title,url){

var index = layer.open({

type: 2,

title: title,

content: url

});

layer.full(index);

}

/*用户-添加*/

function member_add(title,url,w,h){

layer_show(title,url,w,h);

}

</script>

</body>

</html>

打开数据库，录入专业分类、专业、课程、课时的权限

步骤1：

步骤2：打开后台分配权限

步骤3：开启路由权限验证

︴作业

1）实现今天的代码；

2）完善RBAC三部分管理模块的后续CURD操作；

标签: 专业分类管理课时管理课程管理

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

Laravel在线教育平台（四）直播、七牛云、OBS、直播流管理、直播课程管理、首页直播、在线观看

Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权

Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权

发表回复取消回复

Search

About Me

Winston Lee

About Me

Categories

Laravel在线教育平台（三）专业分类管理、课程管理、课时管理

Laravel框架实战-在线教育平台（3）

︴准备

1、说明

数据字典

后台专业分类表（protype）

后台专业表（profession）

后台课程表（course）

后台课时点播表（lession）

3、迁移

4、填充

1）专业分类表（php artisan make:seeder ProtypeTableSeeder）

2）专业表（php artisan make:seeder ProfessionTableSeeder ）

3）课程表（php artisan make:seeder CourseTableSeeder ）

4）课时点播表（php artisan make:seeder LessonTableSeeder ）

︴操作步骤

5、创建模型

1）专业分类表

2）专业表

3）课程表

4）课时点播

一、专业分类管理

︴效果

列表功能

1）显示列表（模板文件：admin-permission.html）

2）数据处理

专业管理

︴效果

1、列表功能（模板文件：admin-permission.html）

1）显示页面

2）数据处理

三、课程管理

︴效果

列表功能（模板文件：admin-permission.html）

1）显示页面

2）数据处理

四、课时管理（点播）

︴效果

列表功能（模板文件：admin-permission.html）

1）显示页面

2）数据处理

列表播放功能

1）思路

代码步骤

︴完善

左侧菜单

打开数据库，录入专业分类、专业、课程、课时的权限

︴作业

Laravel在线教育平台（四）直播、七牛云、OBS、直播流管理、直播课程管理、首页直播、在线观看

Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权

Laravel在线教育平台（二） Datatables 表格插件、RBAC、权限分配数据处理、中间件鉴权

发表回复 取消回复

Search

About Me

Winston Lee

About Me

Categories

Tags

发表回复取消回复