Laravel框架开发实践

最新推荐文章于 2024-01-25 09:50:33 发布

快乐星球@

最新推荐文章于 2024-01-25 09:50:33 发布

阅读量62

点赞数 1

文章标签： laravel php

本文链接：https://blog.csdn.net/m0_68318370/article/details/131257257

版权

本文详细介绍了如何使用Laravel框架开发内容管理系统，从前期的环境配置，如安装Laravel、设置虚拟主机和数据库，到后台用户登录功能的实现，包括创建用户表、显示登录页面、Ajax交互、用户验证以及用户退出的逻辑。主要涵盖了数据库迁移、模型创建、控制器编写、视图渲染以及Ajax交互的实现过程。

摘要由CSDN通过智能技术生成

1.课程介绍

2.前期准备

3.1后台用户登录

3.1.1创建用户表

3.1.2显示登录页面

3.1.3Ajax交互

3.1.4验证用户登录

3.1.5用户退出

1.课程介绍

Laravel框架可以开发各种不同类型的项目，内容管理系统（Content Management System，CMS）是一种比较典型的项目，常见的网站类型（如门户、新闻、博客、文章等）都可以利用CMS进行搭建。CMS用于对信息进行分类管理，将信息有序、及时地呈现在用户面前，满足人们发布信息、获取信息的需求，保证信息的共享更加快捷和方便。本学期将讲解如何使用Laravel框架开发内容管理系统。

2.前期准备

（1）在C:\web\apache2.4\htdocs\cms目录下打开终端，执行如下命令，安装Laravel。

composer create-project --prefer-dist laravel/laravel ./ 5.8.*

（2）Laravel安装完成后，在Apache的conf\extra\httpd-vhosts.conf配置文件中创建一个虚拟主机。然后，编辑Windows系统的hosts文件，添加一条解析记录“127.0.0.1 cms.test”。

（3）在本书的配套源代码包中，将内容管理系统的前台和后台的静态资源复制到项目对应的目录下。

（4）登录MySQL服务器，创建数据库cms，将cms作为内容管理系统的数据库。

mysql>CREATE DATABASE cmsCHARSET utf8;

（5）打开项目，在config\database.php数据库配置文件中，将数据库名称修改为cms。

 'mysql' => [
            'driver' => 'mysql',
            'url' => env('DATABASE_URL'),
            'host' => env('DB_HOST', '127.0.0.1'),
            'port' => env('DB_PORT', '3306'),
            'database' => env('DB_DATABASE', 'cms'),
            'username' => env('DB_USERNAME', 'root'),
            'password' => env('DB_PASSWORD', '123456'),
            'unix_socket' => env('DB_SOCKET', ''),
            'charset' => 'utf8mb4',
            'collation' => 'utf8mb4_unicode_ci',
            'prefix' => '',
            'prefix_indexes' => true,
            'strict' => true,
            'engine' => null,
            'options' => extension_loaded('pdo_mysql') ? array_filter([
                PDO::MYSQL_ATTR_SSL_CA => env('MYSQL_ATTR_SSL_CA'),
            ]) : [],
        ],

（6）在.env文件中配置正确的数据库配置信息。完成上述步骤后，即可在项目中访问数据库。

3.1后台用户登录

3.1.1创建用户表

（1）在命令行中创建迁移文件。

php artisan make:migration create_admin_user_table

（2）在迁移文件的up()方法中添加表结构信息。

（3）迁移文件创建完成后，执行迁移。

php artisan migrate

（4）创建填充文件。

php artisan make:seeder AdminUserTableSeeder

（5）打开AdminUserTableSeeder.php文件，在run()方法中编写填充代码。

（6）通过命令行执行填充文件。

php artisan db:seed --class=AdminUserTableSeeder

（7）数据表创建成功后，执行创建模型命令。

php artisan make:model Admin

（8）打开app\Admin.php，在模型中指定要操作的表名。

3.1.2显示登录页面

显示登录页面

（1）创建User控制器。

php artisan make:controller Admin\UserController

（2）打开UserController.php，创建login()方法。

public function login()
{
return view('admin\login');
}

（3）在routes\web.php文件中添加路由规则。

Route::get('/admin/login', 'Admin\UserController@login');

（4）在resources\views目录下创建admin目录，该目录用于存放后台相关的模板文件。然后在admin目录中创建login.blade.php文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 引入静态文件 -->
  <title>登录</title>
</head>
<body class="login">
<div class="container">
  <!-- 登录表单 -->
</div>
</body>
</html>

（5）在login.blade.php文件中引入静态文件。

  <link rel="stylesheet" href="{{asset('admin')}}/common/twitter-bootstrap/4.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="{{asset('admin')}}/common/font-awesome-4.2.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="{{asset('admin')}}/common/toastr.js/2.1.4/toastr.min.css">
  <link rel="stylesheet" href="{{asset('admin')}}/css/main.css">
  <script src="{{asset('admin')}}/common/jquery/1.12.4/jquery.min.js"></script>
  <script src="{{asset('admin')}}/common/twitter-bootstrap/4.4.1/js/bootstrap.min.js"></script>
  <script src="{{asset('admin')}}/common/toastr.js/2.1.4/toastr.min.js"></script>
  <script src="{{asset('admin')}}/js/main.js"></script>

（6）在login.blade.php文件中定义登录表单。

  <form action="{{ url('admin/check') }}" method="post" class="j-login">
    <h1>后台管理系统</h1>
    <div class="form-group">
      <input type="text" name="username" class="form-control" placeholder="用户名" required>
    </div>
    <div class="form-group">
      <input type="password" name="password" class="form-control" placeholder="密码" required>
    </div>
    <div class="form-group">
      <input type="text" name="captcha" class="form-control" placeholder="验证码" required>
    </div>
    <!-- 验证码 -->
    <div class="form-group">
      <div class="login-captcha"><img src="{{ captcha_src() }}" alt="captcha"></div>
    </div>
    <div class="form-group">
      {{csrf_field()}}
      <input type="submit" class="btn btn-lg btn-block btn-success" value="登录">
    </div>
  </form>

（7）使用Composer载入mews/captcha验证码库。

composer require mews/captcha=3.0

（8）创建验证码的配置文件。

php artisan vendor:publish

（9）编辑config\captcha.php文件，将字符个数改为4。

 'default' => [
        'length' => 4,         //字符个数
        'width' => 120,        //图片宽度
        'height' => 36,        //图片高度
        'quality' => 90,       //图片质量
        'math' => false,       //数学计算
    ],

（10）在config\app.php文件中将验证码服务注册到服务容器中。

'providers' => [
......
        /*
         *Package Service Providers... 
         */
         Mews\Captcha\CaptchaServiceProvider::class,
......
]

（11）在config\app.php文件中给验证码服务注册别名。

  'aliases' => [
......
'Captcha' => Mews\Captcha\Facades\Captcha::class,
]

（12）在登录表单中添加验证码。

<div class:"form-group">
 <div class="login-captcha"><img src="{{ captcha_src() }}"
alt="captcha"></div>
</div>

页面效果：

（13）实现单击验证码图片后更换验证码的功能，在模板中编写JavaScript 代码。

3.1.3Ajax交互

（1）分析Ajax交互封装的开发思路。

① 将Ajax操作的代码封装到一个对象中，该对象可以随意命名，这里命名为main。

② 通过main.ajax()方法发送Ajax请求，该方法有3个参数，第1个参数可以是对象或字符串，如果是对象，则用于传递给$.ajax()，如果是字符串，则表示请求地址；第2个参数表示当服务器返回成功结果时执行的回调函数；第3个参数表示当服务器返回失败结果时执行的回调函数。

③ 当开始发送Ajax请求时，在页面中显示加载提示，并在收到服务器响应后，隐藏加载提示。

④ 当Ajax请求失败，或服务器响应错误信息时，通过toastr对象将错误信息显示在页面中。

（2）在分析了要完成的主要功能后，下面开始进行代码编写。

① 打开public\admin\js\main.js文件，编写window.main对象。

② 在main对象中编写ajaxPost()方法，用于发送POSTi请求。

在main.js中编写ajaxForm()方法，用于将表单改为Ajax提交方式

3.1.4验证用户登录

（1）设置<form>标签的action属性设置表单的提交地址，给登录表单的action属性添加属性值，指定表单的提交地址为“{{ url('admin/check') }}”，表示UserController的check()方法。

（2）编写代码完成验证用户登录。

① 在routes\web.php文件中添加路由规则。

Route::post('/admin/check', 'Admin\UserController@check');

② 在UserController.php中创建check()方法。

 public function check(Request $request)
    {
        $rule = [
            'username' => 'required',
            'password' => 'required|min:6',
            'captcha' => 'required|captcha'
        ];
        $message = [
            'username.require' => '用户名不能为空',
            'password.require' => '密码不能为空',
            'password.min'     => '密码最少为6位',
            'captcha.require' => '验证码不能为空',
            'captcha.captcha' => '验证码有误'
        ];
        $validator = Validator::make($request->all(), $rule, $message);
        if ($validator->fails()) {
            foreach ($validator->getMessageBag()->toArray() as $v) {
                $msg = $v[0];
            }
            return response()->json(['code' => 0, 'msg' => $msg]);
        }
        $username = $request->get('username');
        $password = $request->get('password');
        $theUser = Admin::where('username',$username)->first();
        if($theUser->password == md5(md5($password). $theUser->salt))
        {
            Session::put('user', ['id'=>$theUser->id,'name'=>$username]);
            return response()->json(['code' => 1, 'msg' => '登录成功']);
        }else{
            return response()->json(['code' => 0, 'msg' => '登录失败']);
        }
    }

③ 导入Admin模型、Session、Validator的命名空间。

（3）通过浏览器访问，输入小于6 位的密码，页面会出现“密码最少为6 位”的错误提示；如果提交正确的用户名（admin）和密码（123456），页面中会出现“登录成功”的提示。

3.1.5用户退出

（1）在User控制器中添加logout()方法。

public function logout()
{
     if (request()->session()->has('user')){
         request()->session()->pull('user',session('user'));
     }
     return redirect ('/admin/login');
}

（2）在routes\web.php文件中添加路由规则。

Route::get('/admin/logout', 'Admin\UserController@logout');

通过浏览器访问，在确保用户已经登录以后，访问http://cms.test/admin/logout，浏览器会自动跳转到登录页面，说明当前用户已经成功退出。

快乐星球@

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫