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’);
});