一、项目说明

1、开发背景

现在社会流行视频直播，应用场景：在线教育、主播大秀、游戏直播等

现在社会非常重视教育，各种教育机构层出不穷，教育形式多种多样，大班授课，中班

授课，小班授课，1对1授课，但是有的学员由于地域、时间、条件、经济的限制并适合面授形式接受教育，故出现在线教育形式，即在网上就可以完成学习的过程，是一种非常灵活的学习方式。我们开发的线上教育系统，集成视频授课、试卷作答、直播课程、等功能。

在线教育涉略的领域也非常广泛，基本上所有的教育内容都可以搬到网上进行。

2、涉及到的技术点

Datatables（无刷新分页插件）、webuploader（无刷新上传插件）、

zyupload（多文件无刷新上传）、播放器插件、七牛接口、支付宝支付等等。

3、项目开发周期规划

• 开发周期：6天（2天前台+4天后台）
• 开发框架：Laravel框架
• 开发功能：
• 后台4天：
• 后台登录功能、RBAC、专业管理、课程管理、课时管理、会员管理、试卷管理
• 前台2天：
• 登录、首页显示课程、课程详情页面、视频点播页面、视频直播页面、答题功能

二、项目初始化

1、创建项目

步骤1：切换国内镜像

composer config -g repo.packagist composer https://packagist.phpcomposer.com/

步骤2：通过composer创建项目

composer create-project laravel/laravel=5.4.* edu

开发前的准备工作

1）建立数据库开发前的准备工作

步骤1：创建edu数据库

步骤2：修改.env配置文件

多学一招：utf8升级版本utf8mb4一个字符支持4个字节

2）设置语言包

步骤1：下载（https://github.com/caouecs/Laravel-lang）

步骤2：将zh-CH移动到resources\lang目录中

步骤3：修改配置config\app.php

设置时区为中国（config/app.php文件）

4）清理项目

• 删除app/Http/Controllers/Auth目录，因为需要自定义登录逻辑
• 删除

database/migrations/2014_10_12_000000_create_users_table.php

database/migrations/2014_10_12_100000_create_password_resets_table.php

• 删除resources/views/welcome.blade.php欢迎页面

5）session机制

后台登录功能

1、创建管理员数据表

1）创建管理员的数据表

create table admin (

id int unsigned primary key auto_increment comment ‘管理员ID’,

username varchar(20) not null comment ‘用户名’,

password varchar(255) not null comment ‘密码’,

sex tinyint(1) unsigned not null default 1 comment ‘性别:1-男,2-女,3-未知’,

mobile char(11) not null default ” comment ‘手机号’,

email varchar(40) not null default ” comment ‘邮箱’,

role_id tinyint unsigned not null comment ‘角色ID’,

created_at int unsigned not null default 0 comment ‘创建于’,

updated_at int unsigned not null default 0 comment ‘更新于’,

state tinyint unsigned not null default 1 comment ‘用户状态:0-禁用,1启动’,

remember_token varchar(255) not null default ” comment ‘记住密码TOKEN’

)engine=myisam charset=utf8mb4;

————————————————————————–

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

$table->engine = ‘myisam’;

$table->increments(‘id’)->comment(‘管理员ID’);

$table->string(‘username’, 20)->comment(‘用户名’);

$table->string(‘password’, 255)->comment(‘密码’);

$table->unsignedTinyInteger(‘sex’)->default(1)->comment(‘性别:1-男,2-女,3-未知’);

$table->char(‘mobile’, 11)->default(”)->comment(‘手机号’);

$table->string(’email’, 40)->default(”)->comment(‘邮箱’);

$table->unsignedTinyInteger(‘role_id’)->comment(‘角色ID’);

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

$table->unsignedInteger(‘updated_at’)->default(0)->comment(‘更新于’);

$table->unsignedTinyInteger(‘state’)->default(1)->comment(‘用户状态:0-禁用,1-启动’);

$table->string(‘remember_token’, 255)->default(”)->comment(‘记住密码TOKEN’);

});

效果图

2）插入测试数据（填充器 + Faker）

步骤1：创建填充器

public function run()

{

$faker = Faker\Factory::create(‘zh_CN’);

for ($i = 1; $i<30; $i++) {

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

‘username’ => $faker->userName,

‘password’ => bcrypt($faker->password),

‘sex’ => mt_rand(1,3),

‘mobile’ => $faker->phoneNumber,

’email’ => $faker->email,

‘role_id’ => mt_rand(1,150),

‘created_at’ => time(),

‘updated_at’ => time()

]);

}

}

步骤2：执行填充器

2、显示登录页

1）后台静态模板介绍

• 模版文件：H-ui Admin后台模版
• 下载地址：http://www.h-ui.net/H-ui.admin.shtml

2）显示登录页

步骤1：

创建路由，访问/admin/login就通过Admin\LoginController@login加载视图

步骤2：创建登录控制器和方法，并在方法中加载视图

步骤3：创建视图

效果

登录数据处理（用户认证，使用Auth做登录和退出功能）

用户认证（Auth）相关语法

验证信息并登陆：Auth::guard(参数)->attempt（用户名和密码数组，是否保存用户状态:true-是,false-否）

检查状态：Auth::guard(参数)->check（）

获得登陆用户：Auth::guard(参数)->user（）->键

退出登录：Auth::guard(参数)->logout（）

2）准备

步骤1：创建模型（注：因为该模型需要使用Auth类所以必须实现指定接口）

<?php

namespace App\Http\Model;

use Illuminate\Auth\Authenticatable;

use Illuminate\Database\Eloquent\Model;

class Admin extends Model implements \Illuminate\Contracts\Auth\Authenticatable

{

use Authenticatable;

/**

* 声明表名

* @var string

*/

protected $table = ‘admin’;

}

步骤2：修改config/auth.php用户认证配置文件，目的设置（验证用户信息并登陆语法中的参数 Auth::guard(参数)）

代码1：身份验证

步骤1：修改路由，既可以get又可以post

步骤2：修改登录form表单参数

步骤3：在login方法中增加判断是否post提交，否-则加载视图，是-则接受数据，并调用Auth类的验证信息并登录方法实现登录功能

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Illuminate\Support\Facades\Auth;

class LoginController extends Controller

{

//加载登录视图

public function login(Request $request)

{

//1.判断HTTP请求类型

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

//2.接受数据

$postData = $request->only([‘username’, ‘password’]);

//3.验证身份 并 登录（注：也就是调用Auth类的方法会自动帮我们验证数据并且保存session）

//语法；Auth::guard(参数)->attempt(用户名和密码数组，是否保存用户状态:true-是,false-否)

//true-后期相当于cookie存储，false-session

$rs = Auth::guard(‘admin’)->attempt($postData, $request->only(‘online’)[‘online’]);

//4.判断用户是否登录成功

if ($rs) {

return redirect(‘admin/index/index’);

} else {

return redirect(‘admin/login’);

}

} else {

//2.加载视图

return view(‘admin.login.login’);

}

}

}

代码2：数据过滤

用户名：必须，3~2个字符

密码：必须，6~32个字符

验证码：必须，5个字符

步骤1：控制器通过validate方法进行数据过滤

<?php

namespace App\Http\Controllers\Admin;

use Illuminate\Http\Request;

use App\Http\Controllers\Controller;

use Illuminate\Support\Facades\Auth;

class LoginController extends Controller

{

//加载登录视图

public function login(Request $request)

{

//1.判断HTTP请求类型

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

//数据过滤，发送HTTP请求进行验证：成功-则不管，失败-重定向到来源页面，并给视图传递$errors变量

$this->validate($request, [

‘username’ => ‘required|min:2|max:10’,

‘password’ => ‘required|min:6|max:32’,

‘captcha’ => ‘required|size:5’,

]);

//2.接受数据

$postData = $request->only([‘username’, ‘password’]);

//3.验证身份 并 登录（注：也就是调用Auth类的方法会自动帮我们验证数据并且保存session）

//语法；Auth::guard(参数)->attempt(用户名和密码数组，是否保存用户状态:true-是,false-否)

//true-后期相当于cookie存储，false-session

$rs = Auth::guard(‘admin’)->attempt($postData, $request->only(‘online’)[‘online’]);

//4.判断用户是否登录成功

if ($rs) {

return redirect(‘admin/index/index’);

} else {

return redirect(‘admin/login’);

}

} else {

//2.加载视图

return view(‘admin.login.login’);

}

}

}

————————————–

步骤2：视图弹出错误信息

<script type=”text/javascript”>

@if (count($errors) > 0)

var errors = ”;

@foreach ($errors->all() as $error)

errors += “{{ $error }} \n”;

@endforeach

alert(errors);

@endif

</script>

———————————

步骤3：发现验证码captcha不能被识别

4、登录验证码（mews/captcha）

1）通过composer下载验证码类库 并 激活

步骤1：下载

步骤2：打开config\app.php进行机会

步骤3：打开视图显示验证码

效果

视图显示验证码，并实现点击切换

<img src=”{{ Captcha::src() }}” onclick=”this.src = ‘{{ Captcha::src() }}’ + ‘&_=’+Math.random()”>

控制器判断验证码是否正确

步骤1：直接在validate方法中使用captcha验证规则即可

步骤2：提示汉化

四、后台首页展示

1、显示后台首页

步骤1：定义路由 /admin/index/index 对应 Admin\IndexController@index

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

步骤3：创建视图

2、显示后台欢迎页

步骤1：定义路由

步骤2：创建控制器和方法

步骤3：创建视图

步骤4：修改后台首页的iframe的src地址

效果

3、显示后台首页右上角（当前登录用户名称）

退出功能

步骤1：定义路由

步骤2：书写退出功能代码

步骤3：设置退出连接

五、防翻墙

1、创建中间件，并书写过滤代码

<?php

namespace App\Http\Middleware;

use Closure;

use Illuminate\Support\Facades\Auth;

class CheckAdminLogin

{

/**

* Handle an incoming request.

*

* @param \Illuminate\Http\Request $request

* @param \Closure $next

* @return mixed

*/

public function handle($request, Closure $next)

{

if (!Auth::guard(‘admin’)->check()) {

return redirect(‘admin/login’)->withErrors([‘errors’ => ‘登录超时，请重新登录’]);

}

return $next($request);

}

}

注册激活

3、路由使用

<?php

//后台登录

Route::match([‘get’, ‘post’], ‘admin/login’, ‘Admin\LoginController@login’);

Route::group([‘middleware’ => ‘CheckAdminLogin’], function(){

//退出功能

Route::get(‘admin/loginout’, ‘Admin\LoginController@loginout’);

//后台首页

Route::get(‘admin/index/index’, ‘Admin\IndexController@index’);

Route::get(‘admin/index/welcome’, ‘Admin\IndexController@welcome’);

});

六、管理员管理