内容管理系统

已于 2023-06-17 15:27:01 修改
阅读量128 收藏
点赞数
文章标签： php laravel
于 2023-06-16 14:06:04 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_64102392/article/details/131244691
版权

目录

前期准备

一.创建用户表

二.显示登录页面

总结

前期准备

安装 phpstudy

官网：https://www.xp.cn/download.html

 下载完成解压安装

安装成功一般会在D盘生成一个文件夹

把自己的文件夹放在该目录下的www目录中

 打开小皮安装mysql管理工具

 登录MySQL服务器创建数据库cms

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

还需要在env文件中配置正确的数据库信息

 

安装Laravel

安装命令:composer create-project --prefer-dist laravel/laravel ./5.8.*

在自己的目录下打开终端安装laravel

 输入命令

 配置一个虚拟主机

一.创建用户表

1.在命令行创建迁移文件

命令:php artisan make:migration create_admin_user_table

 执行完上述命令后，会在database\migration目录下生成名称为 create_admin_user_table的文件

 2.在该文件的up方法中添加表结构信息

代码如下:

   public function up()
{
    Schema::create('admin_user', function (Blueprint $table) {
        $table->increments('id')->comment('主键');
        $table->string('username', 32)->comment('用户名')->unique();
        $table->string('password', 32)->comment('密码');
        $table->char('salt', 32)->comment('密码salt');
        $table->timestamps();
    });
}

3.迁移文件创建完成后，要执行迁移 命令如下:

 php artisan migrate

上述命令会执行迁移文件中的up()方法,来创建数据表的创建

4.创建填充文件，命令如下:

php artisan make:seeder AdminUserTableSeeder

执行完命令，会在database\seeds目录下生成对应的迁移文件

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

具体代码：

 public function run()
{
    $salt = md5(uniqid(microtime(), true));
    $password = md5(md5('123456') . $salt);
    DB::table('admin_user')->insert([
        [
            'id' => 1,
            'username' => 'admin',
            'password' => $password,
            'salt' => $salt
        ],
    ]);
}

}

 6.通过命令执行填充文件 命令如下:

php artisan db:seed --class=AdminUserTableSeeder

命令执行后，会向数据表插入一条记录，用户名为admin 密码是123456

7.数据表创建成功后，需要创建模型 命令如下:

php artisan make:model Admin

8.打开app目录下的Admin.php文件中指定要操作的表名

具体代码:

class Admin extends Model
{
    protected $table = 'admin_user';
    public $fillable = ['username', 'password'];
}

二.显示登录页面

1.创建一个名为User的控制器 命令如下:

php artisan make:controller Admin\UserController

执行完命令后会在app\Http\Controller\Admin目录下创建了一个UserController.php

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

代码如下:


use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\Admin;
use Illuminate\Support\Facades\Session;
use Illuminate\Support\Facades\Validator;
class UserController extends Controller
{
    //
    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文件

在login.blade.php文件中添加代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入静态文件 -->
    <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>
    <title>登录</title>
</head>
<body class="login">
<div class="container">
    <!-- 登录表单 -->
    <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>
</div>

<script>
  $('.login-captcha img').click(function() {
      $(this).attr('src','{{ captcha_src() }}' + '?_=' + Math.random());
  });
  main.ajaxForm('.j-login',function(){
    location.href = '/index.php/admin/index';
  });
</script>
</body>
</html>

 5.使用Composer载入mews/captcha验证码库 命令如下:

composer require mews/captcha=3.0

6.创建验证码的配置文件 命令如下:

php artisan vendor:publish

执行完上述命令后，在命令行输入序号9并按回车键，就会生成config\captcha.php文件

7.编辑config\captcha.php文件，将字符个数改为4

代码如下: 

 'default' => [
        'length' => 4,
        'width' => 120,
        'height' => 30,
        'quality' => 100,
        'math' => false,
    ],

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

 具体代码:

 'providers' => [

        /*
         * Laravel Framework Service Providers...
         */
        Illuminate\Auth\AuthServiceProvider::class,
        Illuminate\Broadcasting\BroadcastServiceProvider::class,
        Illuminate\Bus\BusServiceProvider::class,
        Illuminate\Cache\CacheServiceProvider::class,
        Illuminate\Foundation\Providers\ConsoleSupportServiceProvider::class,
        Illuminate\Cookie\CookieServiceProvider::class,
        Illuminate\Database\DatabaseServiceProvider::class,
        Illuminate\Encryption\EncryptionServiceProvider::class,
        Illuminate\Filesystem\FilesystemServiceProvider::class,
        Illuminate\Foundation\Providers\FoundationServiceProvider::class,
        Illuminate\Hashing\HashServiceProvider::class,
        Illuminate\Mail\MailServiceProvider::class,
        Illuminate\Notifications\NotificationServiceProvider::class,
        Illuminate\Pagination\PaginationServiceProvider::class,
        Illuminate\Pipeline\PipelineServiceProvider::class,
        Illuminate\Queue\QueueServiceProvider::class,
        Illuminate\Redis\RedisServiceProvider::class,
        Illuminate\Auth\Passwords\PasswordResetServiceProvider::class,
        Illuminate\Session\SessionServiceProvider::class,
        Illuminate\Translation\TranslationServiceProvider::class,
        Illuminate\Validation\ValidationServiceProvider::class,
        Illuminate\View\ViewServiceProvider::class,
        Mews\Captcha\CaptchaServiceProvider::class,
        /*
         * Package Service Providers...
         */

        /*
         * Application Service Providers...
         */
        App\Providers\AppServiceProvider::class,
        App\Providers\AuthServiceProvider::class,
        // App\Providers\BroadcastServiceProvider::class,
        App\Providers\EventServiceProvider::class,
        App\Providers\RouteServiceProvider::class,
        DaveJamesMiller\Breadcrumbs\BreadcrumbsServiceProvider::class,

    ],

9.在config\app.php文件中给验证码服务注册别名

 具体代码:

   'aliases' => [

        'App' => Illuminate\Support\Facades\App::class,
        'Arr' => Illuminate\Support\Arr::class,
        'Artisan' => Illuminate\Support\Facades\Artisan::class,
        'Auth' => Illuminate\Support\Facades\Auth::class,
        'Blade' => Illuminate\Support\Facades\Blade::class,
        'Broadcast' => Illuminate\Support\Facades\Broadcast::class,
        'Bus' => Illuminate\Support\Facades\Bus::class,
        'Cache' => Illuminate\Support\Facades\Cache::class,
        'Config' => Illuminate\Support\Facades\Config::class,
        'Cookie' => Illuminate\Support\Facades\Cookie::class,
        'Crypt' => Illuminate\Support\Facades\Crypt::class,
        'DB' => Illuminate\Support\Facades\DB::class,
        'Eloquent' => Illuminate\Database\Eloquent\Model::class,
        'Event' => Illuminate\Support\Facades\Event::class,
        'File' => Illuminate\Support\Facades\File::class,
        'Gate' => Illuminate\Support\Facades\Gate::class,
        'Hash' => Illuminate\Support\Facades\Hash::class,
        'Lang' => Illuminate\Support\Facades\Lang::class,
        'Log' => Illuminate\Support\Facades\Log::class,
        'Mail' => Illuminate\Support\Facades\Mail::class,
        'Notification' => Illuminate\Support\Facades\Notification::class,
        'Password' => Illuminate\Support\Facades\Password::class,
        'Queue' => Illuminate\Support\Facades\Queue::class,
        'Redirect' => Illuminate\Support\Facades\Redirect::class,
        'Redis' => Illuminate\Support\Facades\Redis::class,
        'Request' => Illuminate\Support\Facades\Request::class,
        'Response' => Illuminate\Support\Facades\Response::class,
        'Route' => Illuminate\Support\Facades\Route::class,
        'Schema' => Illuminate\Support\Facades\Schema::class,
        'Session' => Illuminate\Support\Facades\Session::class,
        'Storage' => Illuminate\Support\Facades\Storage::class,
        'Str' => Illuminate\Support\Str::class,
        'URL' => Illuminate\Support\Facades\URL::class,
        'Validator' => Illuminate\Support\Facades\Validator::class,
        'View' => Illuminate\Support\Facades\View::class,
        'Captcha' => Mews\Captcha\Facades\Captcha::class,
        'Breadcrumbs' => DaveJamesMiller\Breadcrumbs\Facades\Breadcrumbs::class,

    ],

];

10.在login.balde.php文件中添加验证码

 具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入静态文件 -->
    <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>
    <title>登录</title>
</head>
<body class="login">
<div class="container">
    <!-- 登录表单 -->
    <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>
</div>

<script>
  $('.login-captcha img').click(function() {
      $(this).attr('src','{{ captcha_src() }}' + '?_=' + Math.random());
  });
  main.ajaxForm('.j-login',function(){
    location.href = '/index.php/admin/index';
  });
</script>
</body>
</html>

11.通过浏览器访问 效果如图:

总结:

通过学习，掌握了Laravel框架进行项目开发，实现用户登录功能，对数据表的增加、删除、修改、查询功能，为以后更加复杂的项目打下基础。

耀开心亚
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值