归档 2018年7月13日

[Django] 将 Django 的用户认证系统登陆界面替换成 Adminlte 主题

背景简介

最近在完善之前开发的 Django 管理系统,期间有使用 Adminlte 主题替换 Django 项目中用户认证系统登陆界面默认主题,并且效果好不错,特此记录下来以供日后使用。

为了更清楚地描述步骤,所以不会引入其他第三方的库,最大限度的利用 Django 提供的基础功能。

开发前,假设 Django 已经被安装,Adminlte 已经被下载(/path/to/ adminlte)。

相关资料

  • 网站通常都会提供登录、注册、注销等用户认证功能。因此,Django 提供了一套功能完整的、灵活的、易于拓展的用户认证系统:django.contrib.auth。

  • Adminlte 是一个成熟的基于bootstrap的后台模板,下载地址

环境与版本说明

  • OS: CentOS 7
  • Python: 2.7
  • Django: 1.11.0
  • AdminLTE: 2.4.3

创建一个 Django 项目

$ django-admin startproject mysite
$ cd mysite/

修改 Django 项目中的文件

mysite/settings.py

ALLOWED_HOSTS = ['0.0.0.0',] # 修改
# ...(略过不表)...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates'),], # 修改
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]
# ...(略过不表)...
# 添加以下代码
STATIC_URL = '/static/'
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, "static"),
]

LOGIN_URL = '/login/'
LOGIN_REDIRECT_URL = '/'

mysite/views.py

# 添加以下代码
from django.shortcuts import render
from django.http import HttpResponse
from django.conf import settings
from django.contrib.auth.decorators import login_required

@login_required
def index(request):
    return render(request, 'index.html')
mysite/urls.py

from django.conf.urls import url
from django.contrib import admin
from . import views # 添加
from django.contrib.auth import views as auth_views # 添加

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$', views.index, name='index'), # 添加
    url(r'^login/', auth_views.login, { 'template_name': 'login.html' }, name='login'), # 添加
    url(r'^logout/', auth_views.logout_then_login, name='logout'), # 添加
]

创建管理员(admin)用户

$ python manage.py createsuperuser
Username (leave blank to use 'username'): admin
Email address: ******
Password: ******
Password (again): 
Superuser created successfully.

引入 Adminlte 模板文件

$ mkdir templates
$ mkdir static
$ cp /path/to/AdminLTE/pages/examples/login.html templates/
$ cp /path/to/AdminLTE/pages/examples/blank.html templates/index.html
$ cp /path/to/AdminLTE/dist static/
$ cp /path/to/AdminLTE/bootstrap static/
$ cp /path/to/AdminLTE/plugins static/

修改相关 HTML 文件

template/login.html

{% load static %} <!-- 添加 -->
<!DOCTYPE html>

<!-- 以下是变更的地方 -->
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- iCheck -->
<link rel="stylesheet" href="{% static 'plugins/iCheck/square/blue.css' %}">

<div class="login-box-body">
  {% if form.errors %} <!-- 添加 -->
    <p class="login-box-msg bg-red">Your username and password didn't match. Please try again.</p> <!-- 添加 -->
  {% else %} <!-- 添加 -->
    <p class="login-box-msg">Sign in to start your session</p>
  {% endif %} <!-- 添加 -->

<form action="{% url 'login' %}" method="post">
{% csrf_token %} <!-- 添加 -->
<input type="text" class="form-control" name="username" placeholder="Username">
<input type="password" class="form-control" name="password" placeholder="Password">

<!-- jQuery 2.2.3 -->
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- iCheck -->
<script src="{% static 'plugins/iCheck/icheck.min.js' %}"></script>

template/index.html

{% load static %} <!-- 添加 -->
<!DOCTYPE html>

<!-- 以下是变更的地方 -->
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<!-- Theme style -->
<link rel="stylesheet" href="{% static 'dist/css/AdminLTE.min.css' %}">
<!-- AdminLTE Skins. Choose a skin from the css/skins
     folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="{% static 'dist/css/skins/_all-skins.min.css' %}">

<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="user-image" alt="User Image">
<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

<a href="{% url 'logout' %}" class="btn btn-default btn-flat">Sign out</a>

<img src="{% static 'dist/img/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

<!-- jQuery 2.2.3 -->
<script src="{% static 'plugins/jQuery/jquery-2.2.3.min.js' %}"></script>
<!-- Bootstrap 3.3.6 -->
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
<!-- SlimScroll -->
<script src="{% static 'plugins/slimScroll/jquery.slimscroll.min.js' %}"></script>
<!-- FastClick -->
<script src="{% static 'plugins/fastclick/fastclick.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'dist/js/app.min.js' %}"></script>

目录结构

mysite/
├── manage.py
├── mysample
│   ├── __init__.py
│   ├── admin.py
│   ├── apps.py
│   ├── migrations
│   │   └── __init__.py
│   ├── models.py
│   ├── tests.py
│   ├── urls.py
│   └── views.py
├── templates
│       └── index.html
├── static
│       ├── dist
│       ├── bootstrap
│       └── plugins
└── mysite
    ├── __init__.py
    ├── __pycache__
    │   ├── __init__.cpython-36.pyc
    │   └── settings.cpython-36.pyc
    ├── settings.py
    ├── urls.py
    └── wsgi.py

运行项目

$ python manage.py runserver 0.0.0.0:8080

打开浏览器并输入到“http://服务器IP:8080”,登录页面就出来了。

输入用户名“admin”和对应的密码,初始页面就会出现。

从初始画面点击“sign out”(登出),就会跳转到注销登录的页面。

以上

本文链接:/2018/07/13/django-django-adminlte/
请尊重作者的劳动成果,转载请注明出处!Sakishum 博客保留对文章的所有权利。

昨天

2018年6月29日

明天

2018年8月14日

归档