Django blog项目《十五》：后台admin模板抽取
项目的前台功能大体框架已经实现，差一些优化和更多功能中的添加了。现在需要将后台站点的功能实现。
django后台admin站点有自带的，这里采用自己实现。
模板在GitHub的AdminLTE上进行下载后进行自己的二次开发。
使用starter.html作为后台模板基类。
1.基类模板抽取
admin/base/base.html
css 和 js文件链接，图标使用阿里云矢量图标。没有使用自带的font Awesome图标。
{% load staticfiles %}
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>{% block title %}基类模板{% endblock %}title>
<link rel="stylesheet" href="{% static 'css/admin/base/all.min.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/base/adminlte.min.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/base/adminlte.min.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/base/sweetalert.css' %}">
<link rel="stylesheet" href="{% static 'css/admin/base/self.css' %}">
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1491329_kva4j3zc4ug.css">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700" rel="stylesheet">
{% block css %}
{% endblock %}
head>
<body class="hold-transition sidebar-mini">
<div class="wrapper">
<nav class="main-header navbar navbar-expand navbar-white navbar-light">
<ul class="navbar-nav ml-auto">
{% block user_info %}
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<span>xxxxspan>
<i class="far fa-user">i>
a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<a href="">后台管理a>
<a class="float-right text-muted text-sm">退出登录a>
a>
div>
li>
{% endblock %}
ul>
nav>
<aside class="main-sidebar sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<img src="{% static 'images/avatar.jpeg' %}" alt="AdminLTE Logo" class="brand-image img-circle elevation-3"
style="opacity: .8">
<span class="brand-text font-weight-light">后台管理span>
a>
<div class="sidebar">
{% block left_userInfo %}
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{% static 'images/avatar.jpeg' %}" class="img-circle elevation-2" alt="User Image">
div>
<div class="info">
<a href="{% url 'admin:index' %}" class="d-block">xxxxa>
div>
div>
{% endblock %}
{% block menu %}
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu"
data-accordion="false">
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="iconfont icon-zuolantubiao_wenzhangguanli">i>
<p>
文章管理
<i class="right fas fa-angle-left">i>
p>
a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-tubiaozhizuomoban">i>
<p>文章轮播图p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-remenwenzhang">i>
<p>热门文章p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-zuolantubiao_wenzhangguanli">i>
<p>文章管理p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-xxfb">i>
<p>文章发布p>
a>
li>
<li class="nav-item">
<a href="{% url 'admin:tags' %}" class="nav-link">
<i class="iconfont icon-wenzhang-biaoqian">i>
<p>文章标签管理p>
a>
li>
ul>
li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="iconfont icon-zaixianshipin">i>
<p>
在线视频
<i class="right fas fa-angle-left">i>
p>
a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-shipinguanli">i>
<p>视频管理p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-shipinfabu">i>
<p>视频发布p>
a>
li>
ul>
li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="iconfont icon-wendangguanli2">i>
<p>
文档下载
<i class="right fas fa-angle-left">i>
p>
a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-wendangguanli1">i>
<p>文档管理p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-wendangfabu">i>
<p>文档发布p>
a>
li>
ul>
li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="iconfont icon-quanxian">i>
<p>
权限管理
<i class="right fas fa-angle-left">i>
p>
a>
<ul class="nav nav-treeview" style="display: none;">
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-quanxian1">i>
<p>用户权限管理p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-quanxianchuangjian">i>
<p>用户权限创建p>
a>
li>
<li class="nav-item">
<a href="#" class="nav-link">
<i class="iconfont icon-yonghuguanli">i>
<p>用户管理p>
a>
li>
ul>
li>
ul>
nav>
{% endblock %}
div>
aside>
{% block main_content %}
<div class="content-wrapper">
<div class="content-header">
<div class="container-fluid">
<div class="row mb-2">
<div class="col-sm-6">
<h1 class="m-0 text-dark">
{% block content_header %}实例样本{% endblock %}
<small>
{% block content_header_brief %}样本简介{% endblock %}
small>
h1>
div>
div>
div>
div>
{% block content %}
<div class="content">
<div class="container-fluid">
<div class="row">
div>
div>
div>
{% endblock %}
div>
{% endblock %}
{% block footer %}
<footer class="main-footer">
<div class="float-right d-none d-sm-inline">
未来的大牛
div>
<strong>Copyright © 2020-2099 <a href="https://adminlte.io">xxxa>.strong> 努力方能成就梦想
footer>
{% endblock %}
div>
<script src="{% static 'js/admin/base/jquery.min.js' %}">script>
<script src="{% static 'js/admin/base/bootstrap.bundle.min.js' %}">script>
<script src="{% static 'js/admin/base/adminlte.min.js' %}">script>
<script src="{% static 'js/admin/base/fsweetalert.js' %}">script>
<script src="{% static 'js/admin/base/message.js' %}">script>
<script src="{% static 'js/admin/base/sweetalert.min.js' %}">script>
<script src="{% static 'js/admin/base/bootstrap.min.js' %}">script>
{% block script %}
{% endblock %}
body>
html>
。
2. index主页模板继承填充
admin/index/index.html
{% extends 'admin/base/base.html' %}
{% load staticfiles %}
{% block title %}
后台主页
{% endblock %}
{% block user_info %}
<li class="nav-item dropdown">
<a class="nav-link" data-toggle="dropdown" href="#">
<span>{{ user.username }}span>
<i class="far fa-user">i>
a>
<div class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<a href="#" class="dropdown-item">
<a href="{% url 'admin:index' %}">后台管理a>
<a href="{% url 'users:logout' %}">退出登录a>
a>
div>
li>
{% endblock %}
{% block left_userInfo %}
<div class="user-panel mt-3 pb-3 mb-3 d-flex">
<div class="image">
<img src="{% static 'images/avatar.jpeg' %}" class="img-circle elevation-2" alt="User Image">
div>
<div class="info">
<a href="{% url 'admin:index' %}" class="d-block">{{ user.username }}a>
div>
div>
{% endblock %}
{% block content_header %}
个人主页
{% endblock %}
{% block content_header_brief %}
个人信息
{% endblock %}
{% block content %}
个人信息展示
{% endblock %}
3. 主页展示功能实现
-
分析：
- 从数据库中获取到数据传递到前端（暂时无数据暂不写）
- 请求方式：GET
- 请求路径：/admin/index/
- 请求参数：无
-
url设置
from django.urls import path from admin import views app_name = "admin" urlpatterns = [ path('', views.AdminIndexView.as_view(), name="index"), ] -
view功能实现
from django.views import View from django.shortcuts import render from django.contrib.auth.mixins import LoginRequiredMixin class AdminIndexView(LoginRequiredMixin, View): """ admin index page view route:/admin/index/ """ raise_exception = True def get(self, request): return render(request, 'admin/index/index.html')