Laravel框架实战-在线教育平台（1）
一、项目说明
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’);
});
