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>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![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>
<div class=”page-container”>
<div class=”text-c”>
<form class=”Huiform” method=”post” action=”” target=”_self”>
<input type=”text” class=”input-text” style=”width:250px” placeholder=”专业分类名称” id=”search_content” name=””>
<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>
<table class=”table table-border table-bordered table-bg”>
<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 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/datatables/1.10.0/jquery.dataTables.min.js”></script>
<script type=”text/javascript”>
//客户端分页大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>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![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>
<div class=”page-container”>
<div class=”text-c”>
<form class=”Huiform” method=”post” action=”” target=”_self”>
<input type=”text” class=”input-text” style=”width:250px” placeholder=”专业名称” id=”” name=””>
<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=”7″>专业节点</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 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/datatables/1.10.0/jquery.dataTables.min.js”></script>
<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″>’);
}
//匹配每一行的最后一列
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, //限制每页显示条数
});
/*
参数解释:
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>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![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>
<div class=”page-container”>
<div class=”text-c”>
<form class=”Huiform” method=”post” action=”” target=”_self”>
<input type=”text” class=”input-text” style=”width:250px” placeholder=”课程名称” id=”” name=””>
<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”>
<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 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/datatables/1.10.0/jquery.dataTables.min.js”></script>
<script type=”text/javascript”>
//客户端分页大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″>’);
}
//匹配每一行的最后一列
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: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>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![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>
<div class=”page-container”>
<div class=”text-c”>
<form class=”Huiform” method=”post” action=”” target=”_self”>
<input type=”text” class=”input-text” style=”width:250px” placeholder=”课时名称” id=”” name=””>
<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”>
<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 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/datatables/1.10.0/jquery.dataTables.min.js”></script>
<script type=”text/javascript”>
//客户端分页大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>’);
}
//匹配每一行的最后一列
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: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播放标签即可
<video src=”/i/movie.ogg” controls=”controls”>
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>
<meta charset=”utf-8″>
<meta name=”renderer” content=”webkit|ie-comp|ie-stand”>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″>
<meta name=”viewport” content=”width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no” />
<meta http-equiv=”Cache-Control” content=”no-siteapp” />
<link rel=”Bookmark” href=”/favicon.ico” >
<link rel=”Shortcut Icon” href=”/favicon.ico” />
<!–[if lt IE 9]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/html5shiv.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/respond.min.js”></script>
<![endif]–>
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui/css/H-ui.min.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/H-ui.admin.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/lib’) }}/Hui-iconfont/1.0.8/iconfont.css” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/skin/default/skin.css” id=”skin” />
<link rel=”stylesheet” type=”text/css” href=”{{ asset(‘admin/static’) }}/h-ui.admin/css/style.css” />
<!–[if IE 6]>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/DD_belatedPNG_0.0.8a-min.js” ></script>
<script>DD_belatedPNG.fix(‘*’);</script>
<![endif]–>
<title>H-ui.admin v3.1</title>
<meta name=”keywords” content=”H-ui.admin v3.1,H-ui网站后台模版,后台模版下载,后台管理系统模版,HTML后台模版下载”>
<meta name=”description” content=”H-ui.admin v3.1,是一款由国人开发的轻量级扁平化网站后台模板,完全免费开源的网站后台管理系统模版,适合中小型CMS后台系统。”>
</head>
<body>
<header class=”navbar-wrapper”>
<div class=”navbar navbar-fixed-top”>
<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>
<span class=”logo navbar-slogan f-l mr-10 hidden-xs”>v3.1</span>
<a aria-hidden=”false” class=”nav-toggle Hui-iconfont visible-xs” href=”javascript:;”></a>
<nav class=”nav navbar-nav”>
<ul class=”cl”>
<li class=”dropDown dropDown_hover”><a href=”javascript:;” class=”dropDown_A”><i class=”Hui-iconfont”></i> 新增 <i class=”Hui-iconfont”></i></a>
<ul class=”dropDown-menu menu radius box-shadow”>
<li><a href=”javascript:;” onclick=”article_add(‘添加资讯’,’article-add.html’)”><i class=”Hui-iconfont”></i> 资讯</a></li>
<li><a href=”javascript:;” onclick=”picture_add(‘添加资讯’,’picture-add.html’)”><i class=”Hui-iconfont”></i> 图片</a></li>
<li><a href=”javascript:;” onclick=”product_add(‘添加资讯’,’product-add.html’)”><i class=”Hui-iconfont”></i> 产品</a></li>
<li><a href=”javascript:;” onclick=”member_add(‘添加用户’,’member-add.html’,”,’510′)”><i class=”Hui-iconfont”></i> 用户</a></li>
</ul>
</li>
</ul>
</nav>
<nav id=”Hui-userbar” class=”nav navbar-nav navbar-userbar hidden-xs”>
<ul class=”cl”>
<li>{{ Auth::guard(‘admin’)->user()->role()->first()->role_name }} </li>
<li class=”dropDown dropDown_hover”>
<a href=”#” class=”dropDown_A”>{{ Auth::guard(‘admin’)->user()->username }} <i class=”Hui-iconfont”></i></a>
<ul class=”dropDown-menu menu radius box-shadow”>
<li><a href=”javascript:;” onClick=”myselfinfo()”>个人信息</a></li>
<li><a href=”#”>切换账户</a></li>
<li><a href=”{{ url(‘admin/loginout’) }}”>退出</a></li>
</ul>
</li>
<li id=”Hui-msg”> <a href=”#” title=”消息”><span class=”badge badge-danger”>1</span><i class=”Hui-iconfont” style=”font-size:18px”></i></a> </li>
<li id=”Hui-skin” class=”dropDown right dropDown_hover”> <a href=”javascript:;” class=”dropDown_A” title=”换肤”><i class=”Hui-iconfont” style=”font-size:18px”></i></a>
<ul class=”dropDown-menu menu radius box-shadow”>
<li><a href=”javascript:;” data-val=”default” title=”默认(黑色)”>默认(黑色)</a></li>
<li><a href=”javascript:;” data-val=”blue” title=”蓝色”>蓝色</a></li>
<li><a href=”javascript:;” data-val=”green” title=”绿色”>绿色</a></li>
<li><a href=”javascript:;” data-val=”red” title=”红色”>红色</a></li>
<li><a href=”javascript:;” data-val=”yellow” title=”黄色”>黄色</a></li>
<li><a href=”javascript:;” data-val=”orange” title=”橙色”>橙色</a></li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</header>
<aside class=”Hui-aside”>
<div class=”menu_dropdown bk_2″>
<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>
<dl id=”menu-picture”>
<dt><i class=”Hui-iconfont”></i> 图片管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>
<dd>
<ul>
<li><a data-href=”picture-list.html” data-title=”图片管理” href=”javascript:void(0)”>图片管理</a></li>
</ul>
</dd>
</dl>
<dl id=”menu-comments”>
<dt><i class=”Hui-iconfont”></i> 评论管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>
<dd>
<ul>
<li><a data-href=”http://h-ui.duoshuo.com/admin/” data-title=”评论列表” href=”javascript:;”>评论列表</a></li>
<li><a data-href=”feedback-list.html” data-title=”意见反馈” href=”javascript:void(0)”>意见反馈</a></li>
</ul>
</dd>
</dl>
<dl id=”menu-member”>
<dt><i class=”Hui-iconfont”></i> 会员管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>
<dd>
<ul>
<li><a data-href=”member-list.html” data-title=”会员列表” href=”javascript:;”>会员列表</a></li>
<li><a data-href=”member-del.html” data-title=”删除的会员” href=”javascript:;”>删除的会员</a></li>
<li><a data-href=”member-level.html” data-title=”等级管理” href=”javascript:;”>等级管理</a></li>
<li><a data-href=”member-scoreoperation.html” data-title=”积分管理” href=”javascript:;”>积分管理</a></li>
<li><a data-href=”member-record-browse.html” data-title=”浏览记录” href=”javascript:void(0)”>浏览记录</a></li>
<li><a data-href=”member-record-download.html” data-title=”下载记录” href=”javascript:void(0)”>下载记录</a></li>
<li><a data-href=”member-record-share.html” data-title=”分享记录” href=”javascript:void(0)”>分享记录</a></li>
</ul>
</dd>
</dl>
<dl id=”menu-tongji”>
<dt><i class=”Hui-iconfont”></i> 系统统计<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>
<dd>
<ul>
<li><a data-href=”charts-1.html” data-title=”折线图” href=”javascript:void(0)”>折线图</a></li>
<li><a data-href=”charts-2.html” data-title=”时间轴折线图” href=”javascript:void(0)”>时间轴折线图</a></li>
<li><a data-href=”charts-3.html” data-title=”区域图” href=”javascript:void(0)”>区域图</a></li>
<li><a data-href=”charts-4.html” data-title=”柱状图” href=”javascript:void(0)”>柱状图</a></li>
<li><a data-href=”charts-5.html” data-title=”饼状图” href=”javascript:void(0)”>饼状图</a></li>
<li><a data-href=”charts-6.html” data-title=”3D柱状图” href=”javascript:void(0)”>3D柱状图</a></li>
<li><a data-href=”charts-7.html” data-title=”3D饼状图” href=”javascript:void(0)”>3D饼状图</a></li>
</ul>
</dd>
</dl>
<dl id=”menu-system”>
<dt><i class=”Hui-iconfont”></i> 系统管理<i class=”Hui-iconfont menu_dropdown-arrow”></i></dt>
<dd>
<ul>
<li><a data-href=”system-base.html” data-title=”系统设置” href=”javascript:void(0)”>系统设置</a></li>
<li><a data-href=”system-category.html” data-title=”栏目管理” href=”javascript:void(0)”>栏目管理</a></li>
<li><a data-href=”system-data.html” data-title=”数据字典” href=”javascript:void(0)”>数据字典</a></li>
<li><a data-href=”system-shielding.html” data-title=”屏蔽词” href=”javascript:void(0)”>屏蔽词</a></li>
<li><a data-href=”system-log.html” data-title=”系统日志” href=”javascript:void(0)”>系统日志</a></li>
</ul>
</dd>
</dl>
</div>
</aside>
<div class=”dislpayArrow hidden-xs”><a class=”pngfix” href=”javascript:void(0);” onClick=”displaynavbar(this)”></a></div>
<section class=”Hui-article-box”>
<div id=”Hui-tabNav” class=”Hui-tabNav hidden-xs”>
<div class=”Hui-tabNav-wp”>
<ul id=”min_title_list” class=”acrossTab cl”>
<li class=”active”>
<span title=”我的桌面” data-href=”welcome.html”>我的桌面</span>
<em></em></li>
</ul>
</div>
<div class=”Hui-tabNav-more btn-group”><a id=”js-tabNav-prev” class=”btn radius btn-default size-S” href=”javascript:;”><i class=”Hui-iconfont”></i></a><a id=”js-tabNav-next” class=”btn radius btn-default size-S” href=”javascript:;”><i class=”Hui-iconfont”></i></a></div>
</div>
<div id=”iframe_box” class=”Hui-article”>
<div class=”show_iframe”>
<div style=”display:none” class=”loading”></div>
<iframe scrolling=”yes” frameborder=”0″ src=”{{ url(‘admin/index/welcome’) }}”></iframe>
</div>
</div>
</section>
<div class=”contextMenu” id=”Huiadminmenu”>
<ul>
<li id=”closethis”>关闭当前 </li>
<li id=”closeall”>关闭全部 </li>
</ul>
</div>
<!–_footer 作为公共模版分离出去–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery/1.9.1/jquery.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/layer/2.4/layer.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui/js/H-ui.min.js”></script>
<script type=”text/javascript” src=”{{ asset(‘admin/static’) }}/h-ui.admin/js/H-ui.admin.js”></script> <!–/_footer 作为公共模版分离出去–>
<!–请在下方写此页面业务相关的脚本–>
<script type=”text/javascript” src=”{{ asset(‘admin/lib’) }}/jquery.contextmenu/jquery.contextmenu.r2.js”></script>
<script type=”text/javascript”>
$(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操作;