Dcat Admin 登陆页以及侧边栏美化教程

牛铁柱

Dcat Admin站点美化教程

这个教程里我们将主要实现以下美化：

1，登陆页面美化。
2，登录后的侧边栏美化。

最终实现的效果如下

演示地址：https://crm.demo.nx.tt/
账号：admin
密码：admin123

牛铁柱

默认网址打开后台

打开routes\web.php

路由改为

Route::redirect('/', '/admin');

牛铁柱

我们按照DCAT的教程安装后，看到默认的登陆页是这样的

现在我们需要美化一下这个页面。

这个登陆页面是DCAT扩展包内的页面，我们美化的时候，为了方便以后的升级，尽量不修改扩展包。所以我只需要重新指定一个登陆页面的模版即可。

找到app\Admin\Controllers\AuthController.php，修改为

<?php

namespace App\Admin\Controllers;

use Dcat\Admin\Controllers\AuthController as BaseAuthController;

class AuthController extends BaseAuthController
{
    protected $view = 'admin.login.login';
}

这样登录页面就会使用resources\views\admin\login\login.blade.php这个模板了。

现在我们打开页面看一下。发现一片空白，说明我们的设置生效了。因为登录页面此时没有任何代码，所以是空白的。

我们现在只需要在上面这个新的模板文件里，写我们的美化代码即可。我们写好的美化代码如下

<link rel="stylesheet" href="/static/css/login.css">
<div class="row login_main">
    <div class="col-md-3 col-sm-3 col-12 ">
        <div class="login-page">

            <div class="auth-brand text-center text-lg-left">
                <img src="/uploads/{!! config('settings.logo') !!}" width="35"> &nbsp;{!! config('settings.crmname') !!}
            </div>

            <div class="login-box">
                <div class="login-logo mb-2">
                    <h4 class="mt-0">Sign In</h4>
                    <p class="login-box-msg mt-1 mb-1">{{ __('admin.welcome_back') }}</p>
                </div>
                <div class="card">
                    <div class="card-body login-card-body">

                        <form id="login-form" method="POST" action="{{ admin_url('auth/login') }}">

                            <input type="hidden" name="_token" value="{{ csrf_token() }}"/>

                            <fieldset class="form-label-group form-group position-relative has-icon-left">
                                <input
                                        type="text"
                                        class="form-control {{ $errors->has('username') ? 'is-invalid' : '' }}"
                                        name="username"
                                        placeholder="{{ trans('admin.username') }}"
                                        value="{{ old('username') }}"
                                        required
                                        autofocus
                                >

                                <div class="form-control-position">
                                    <i class="feather icon-user"></i>
                                </div>

                                <label for="email">{{ trans('admin.username') }}</label>

                                <div class="help-block with-errors"></div>
                                @if($errors->has('username'))
                                    <span class="invalid-feedback text-danger" role="alert">
                                                    @foreach($errors->get('username') as $message)
                                            <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                        @endforeach
                                                </span>
                                @endif
                            </fieldset>

                            <fieldset class="form-label-group form-group position-relative has-icon-left">
                                <input
                                        minlength="5"
                                        maxlength="20"
                                        id="password"
                                        type="password"
                                        class="form-control {{ $errors->has('password') ? 'is-invalid' : '' }}"
                                        name="password"
                                        placeholder="{{ trans('admin.password') }}"
                                        required
                                        autocomplete="current-password"
                                >

                                <div class="form-control-position">
                                    <i class="feather icon-lock"></i>
                                </div>
                                <label for="password">{{ trans('admin.password') }}</label>

                                <div class="help-block with-errors"></div>
                                @if($errors->has('password'))
                                    <span class="invalid-feedback text-danger" role="alert">
                                                    @foreach($errors->get('password') as $message)
                                            <span class="control-label" for="inputError"><i class="feather icon-x-circle"></i> {{$message}}</span><br>
                                        @endforeach
                                                    </span>
                                @endif

                            </fieldset>
                            <div class="form-group d-flex justify-content-between align-items-center">
                                <div class="text-left">
                                    @if(config('admin.auth.remember'))
                                    <fieldset class="checkbox">
                                        <div class="vs-checkbox-con vs-checkbox-primary">
                                            <input id="remember" name="remember"  value="1" type="checkbox" {{ old('remember') ? 'checked' : '' }}>
                                            <span class="vs-checkbox">
                                                                <span class="vs-checkbox--check">
                                                                  <i class="vs-icon feather icon-check"></i>
                                                                </span>
                                                            </span>
                                            <span> {{ trans('admin.remember_me') }}</span>
                                        </div>
                                    </fieldset>
                                    @endif
                                </div>
                            </div>
                            <button type="submit" class="btn btn-primary float-right login-btn">

                                {{ __('admin.login') }}
                                &nbsp;
                                <i class="feather icon-arrow-right"></i>
                            </button>
                        </form>

                    </div>
                </div>
            </div>

{{-- <style>
    .qrcode_main {text-align: center; position: absolute; bottom: 100px}
    .qrcode {width: 100px;}
</style>

<div class="qrcode_main">
    <p>扫码获取用户名密码</p>
    <img class="qrcode" src="/static/img/qrcode.jpg" alt="">
</div> --}}


        </div>
    </div>
    <div class="col-md-9 col-sm-9 col-12 auth-fluid-right">
            <div class="auth-user-testimonial">
                <h2 class="mb-3">Stay Hungry, Stay Foolish!</h2>
                <p class="lead"><i class="mdi mdi-format-quote-open"></i>你如果出色地完成了某件事，那你应该再做一些其他的精彩事儿。不要在前一件事上徘徊太久，想想接下来该做什么... <i class="mdi mdi-format-quote-close"></i>
                </p>
                <p>
                    - 乔布斯
                </p>
            </div> <!-- end auth-user-testimonial-->
    </div>
</div>


<script>
    Dcat.ready(function () {
        // ajax表单提交
        $('#login-form').form({
            validate: true,
        });
    });
    </script>

这时候我们在打开页面，发现如下图

原因是缺少CSS。但是我们上面的代码内，我们已经链接了css文件。我们只需要写这个css文件就可以。

牛铁柱

在这里，不建议直接写这个css文件，建议使用laravel自带的前端工作流，使用Sass, NPM, Yarn, Laravel Mix来写CSS文件。

我们打开webpack.mix.js,增加一行代码，如下

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.sass('resources/sass/login.scss', 'public/static/css');

这样，我们只需要在resources/sass/下面新建一个login.scss，然后写好scss代码，执行编译命令，就会在public/static/css文件夹下生成login.css，因为之前我们已经在登录页面引用了这个CSS，所以只要css完善，页面就会显示正常。

现在我们来完善这个scss文件，打开我们刚才新建的login.scss,完善css代码，如下

.col-md-12,
.col-md-3 {
  padding: 0;
}

.row {
  margin: 0;
}

.login_main {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100vh;
  flex-direction: row;
  align-items: stretch;
  background: url(/static/img/bg-auth1.jpg) center;
  background-size: cover;
  margin: 0;
  .login-page {
    background-color: #fff;
  }
  .card {
    box-shadow: 0 0px;
  }
  .auth-brand {
    position: absolute;
    top: 3rem;
    left: 6rem;
    font-size: 26px;
  }
  .login-logo {
    font-size: 2.1rem;
    font-weight: 300;
    margin-bottom: 0.9rem;
    text-align: left;
    margin-left: 20px;
  }
  .btn {
    width: 100%;
  }
}

body.dark-mode .login_main {
  background: url(/static/img/bg-auth.jpg) center;
  background-size: cover;
}

.login_main .login-box-msg,
.login_main .register-box-msg {
  margin: 0;
  padding: 0 0px 20px;
  color: #98a6ad !important;
  font-size: 0.9rem;
  font-weight: 400;
  text-align: left;
}


.auth-fluid-right {
  padding: 6rem 3rem;
  flex: 1;
  position: relative;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.3);
  text-align: center !important;
  font-family: Nunito, sans-serif;
}

.auth-user-testimonial {
  position: absolute;
  margin: 0 auto;
  padding: 0 1.75rem;
  bottom: 3rem;
  left: 0;
  right: 0;
}

.auth-user-testimonial .mb-3 {
  color: #fff;
  font-weight: 700;
  margin: 10px 0;
  font-size: 5rem;
}

接下来执行编译命令

npm run watch-poll

如果发现报错，可能是因为没安装包管理工具。只需要执行

yarn install

之后再编译即可。

编译完成后，我们再次打开页面，查看我们的页面是否正常

牛铁柱

现在可以看到我们的登陆页效果了。

左上角的LOGO和网站标题，调用的是后台的站点配置设置的信息。

Dcat Admin实现站点配置的教程见 https://wyz.xyz/d/93-dcat-admin/4

牛铁柱

未完，更新中…

小明同学

演示地址打不开

牛铁柱

小明同学

https://crm.nxos.vip

本网站的服务器由提供