个人博客，欢迎查看：https://blog.starmeow.cn/
Github地址：https://github.com/xyliurui/DjangoCRM
后台管理设计
参照django自带的admin写法，自己自定义个djadmin（模仿admin）
创建djadmin APP及配置
创建app：djadmin
这相当于一个独立的应用，拥有自己的模板和静态文件
manage.py@DjangoCRM > startapp djadmin
添加到apps
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'crm.apps.CrmConfig',
'djadmin.apps.DjadminConfig',
]
image.png
因为想让djadmin app以后可以直接移植到其它项目中，所以在该应用目录下单独创建templates/djadmin和static目录，把之前的静态文件和模板拷贝进去，如上图所示
增加app的静态文件
修改settings.py中的静态文件配置，增加djadmin的static，这样djadmin应用就可以直接使用这里面的文件
STATIC_URL = '/static/'
# 设置静态资源路径，当有多个静态文件目录的时候可以使用下面的方式
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
os.path.join(BASE_DIR, 'djadmin/static')
]
创建登录·登录·主页视图
将DjangoCRM下views.py中的登录登出视图复制到djadmin应用下的视图中，并创建index视图
from django.shortcuts import render, redirect, reverse
from django.contrib.auth import authenticate, login, logout
from django.contrib.auth.decorators import login_required
def user_login(request):
login_msg = ''
if request.method == 'POST':
username = request.POST.get('username', None)
password = request.POST.get('password', None)
next_url = request.GET.get('next')
# 验证帐密
user = authenticate(username=username, password=password)
if user:
# 登录并生成session
login(request, user)
if next_url:
return redirect(next_url)
return redirect(reverse('djadmin:index'))
login_msg = '用户名或密码错误！'
return render(request, 'djadmin/login.html', locals())
def user_logout(request):
logout(request)
return redirect(reverse('djadmin:user_login'))
def index(request):
return render(request, 'djadmin/index.html')
app：djadmin路由分发
修改项目主urls.py，增加后台管理的url路由分发
urlpatterns = [
path('admin/', admin.site.urls),
path('crm/', include('crm.urls', namespace='crm')),
path('login/', user_login, name='user_login'), # 用户登录
path('logout/', user_logout, name='user_logout'), # 退出登录
path('djadmin/', include('djadmin.urls', namespace='djadmin')), # 后台管理
]
djadmin应用下创建urls.py文件，增加djadmin相关url
from django.urls import path
from djadmin.views import index, user_login, user_logout
app_name = 'djadmin'
urlpatterns = [
path('login/', user_login, name='user_login'), # djAdmin登录
path('logout/', user_logout, name='user_logout'), # djAdmin登出
path('', index, name='index'), # djAdmin主页
]
增加app相关的模板
修改templates/djadmin文件夹下的base.html，增加标题块{% block title %}{% endblock %}，修改登录、退出链接
djadmin/base.html
<!DOCTYPE html>
{% load static %}
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>{% block title %}djAdmin{% endblock %}</title>
<!-- Bootstrap core CSS -->
<link href="{% static 'css/bootstrap.min.css' %}" rel="stylesheet">
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<link href="{% static 'css/ie10-viewport-bug-workaround.css' %}" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="{% static 'css/dashboard.css' %}" rel="stylesheet">
<!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
<script src="{% static 'js/ie-emulation-modes-warning.js' %}"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
{% block css %}{% endblock %}
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">djAdmin</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#">功能</a></li>
{% if request.user.is_authenticated %}
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ request.user }}<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">用户信息</a></li>
<li role="separator" class="divider"></li>
<li class="dropdown-header">当前用户：{{ request.user }}</li>
<li><a href="{% url 'djadmin:user_logout' %}">退出登录</a></li>
</ul>
</li>
{% else %}
<li><a href="{% url 'djadmin:user_login' %}">点击登录</a></li>
{% endif %}
</ul>
<form class="navbar-form navbar-right">
<input type="text" class="form-control" placeholder="Search...">
</form>
</div>
</div>
</nav>
<div class="container-fluid">
{% block body %}
<div class="row">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li {% if request.path == djadmin_index %} class="active" {% endif %}><a href="{{ djadmin_index }}">后台首页</a></li>
{# request.user.userprofile.role.select_related #}
{% for role in request.user.userprofile.role.all %}
{% for menu in role.menus.all %}
{% if menu.url_type == 0 %}
<li {% if request.path == menu.url %} class="active" {% endif %}><a href="{{ menu.url }}">{{ menu.name }}</a></li>
{% else %}
{% url menu.url as menu_dynamic_url %}
<li {% if request.path == menu_dynamic_url %} class="active" {% endif %}><a href="{{ menu_url }}">{{ menu.name }}</a></li>
{% endif %}
{% endfor %}
{% endfor %}
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
{% block content %}
{% endblock %}
</div>
</div>
{% endblock body %}
</div>
<!-- Placed at the end of the document so the pages load faster -->
<script src="{% static 'js/jquery.min.js' %}"></script>
<script src="{% static 'js/bootstrap.min.js' %}"></script>
<!-- Just to make our placeholder images work. Don't actually copy the next line! -->
<script src="{% static 'js/holder.min.js' %}"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="{% static 'js/ie10-viewport-bug-workaround.js' %}"></script>
{% block js %}{% endblock %}
</body>
</html>
djadmin/index.html
修改djadmin应用下templates/djadmin文件夹下的index.html，扩展djadmin/base.html
{% extends 'djadmin/base.html' %}
{% block title %}
主页 - 后台管理
{% endblock %}
{% block content %}
<h1>后台主页</h1>
{% endblock %}
djadmin/login.html
同样修改同级目录下的login.html
{# djadmin/templates/djadmin/login.html #}
{% extends 'djadmin/base.html' %}
{% load static %}
{% block title %}
登录 - 后台管理
{% endblock %}
{% block css %}
<link href="{% static 'css/signin.css' %}" rel="stylesheet">
{% endblock %}
{% block body %}
<div class="container">
<form class="form-signin" method="post">
<h2 class="form-signin-heading">请登录</h2>
<label for="inputName" class="sr-only">用户名</label>
<input type="text" id="inputName" name="username" class="form-control" placeholder="用户名" required="" autofocus="">
<label for="inputPassword" class="sr-only">密码</label>
<input type="password" id="inputPassword" name="password" class="form-control" placeholder="密码" required="">
<p style="color: coral">{{ login_msg }}</p>
<div class="checkbox">
<label>
<input type="checkbox" value="remember-me"> 记住我
</label>
</div>
{% csrf_token %}
<button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
</form>
</div> <!-- /container -->
{% endblock %}
访问 http://127.0.0.1:8000/djadmin/ 可以看到后台管理主页
image.png
网友评论