django项目--后台功能

作者: 昆仑草莽 | 来源:发表于2019-09-16 11:41 被阅读0次

一、后台模板抽取

1.获取静态站点模板

本项目选择开源的后台模板AdminLTE,github地址,直接下载zip压缩文件即可。

源文件非常大，用到了上百个插件，按需索取即可。

2.模板抽取

创建templates/myadmin/文件夹，将下载的文件夹中的starter.html页面复制到myadmin文件夹中，改名为index.html,将不需要的组件删除。
创建static/js/myadmin，static/css/myadmin，static/css/fonts文件夹，将需要的js，css，fonts文件从下载文件中复制粘贴到响应文件夹
创建static/images/myadmin文件夹，将用户图像文件存放其中

抽取后的后台模板页面代码为：

<!-- templates/myadmin/index.html -->
{% load static %}
<!DOCTYPE html>
<!--
This is a starter template page. Use this page to start your new project from
scratch. This page gets rid of all links and provides the needed markup only.
-->
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>HHXPython后台</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{% static 'css/myadmin/bootstrap.min.css' %}">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="{% static 'css/myadmin/font-awesome.min.css' %}">

    <!-- Theme style -->
    <link rel="stylesheet" href="{% static 'css/myadmin/AdminLTE.min.css' %}">
    <!-- AdminLTE Skins. We have chosen the skin-blue for this starter
          page. However, you can choose any other skin. Make sure you
          apply the skin class to the body tag so the changes take effect. -->
    <link rel="stylesheet" href="{% static 'css/myadmin/skin-blue.min.css' %}">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

</head>
<!--
BODY TAG OPTIONS:
=================
Apply one or more of the following classes to get the
desired effect
|---------------------------------------------------------|
| SKINS         | skin-blue                               |
|               | skin-black                              |
|               | skin-purple                             |
|               | skin-yellow                             |
|               | skin-red                                |
|               | skin-green                              |
|---------------------------------------------------------|
|LAYOUT OPTIONS | fixed                                   |
|               | layout-boxed                            |
|               | layout-top-nav                          |
|               | sidebar-collapse                        |
|               | sidebar-mini                            |
|---------------------------------------------------------|
-->
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">

    <!-- Main Header -->
    <header class="main-header">

        <!-- Logo -->
        <a href="{% url 'news:index' %}" class="logo">
            <!-- mini logo for sidebar mini 50x50 pixels -->
            <span class="logo-mini"><b>X</b>PY</span>
            <!-- logo for regular state and mobile devices -->
            <span class="logo-lg"><b>HHX</b>Python</span>
        </a>

        <!-- Header Navbar -->
        <nav class="navbar navbar-static-top" role="navigation">
            <!-- Sidebar toggle button-->
            <a href="#" class="sidebar-toggle" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- Navbar Right Menu -->
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">

                    <!-- User Account Menu -->
                    <li class="dropdown user user-menu">
                        <!-- Menu Toggle Button -->
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <!-- The user image in the navbar-->
                            <img src="{% static 'images/myadmin/user2-160x160.jpg' %}" class="user-image" alt="User Image">
                            <!-- hidden-xs hides the username on small devices so only the image appears. -->
                            <span class="hidden-xs">Xinlan</span>
                        </a>
                        <ul class="dropdown-menu">
                            <!-- The user image in the menu -->
                            <li class="user-header">
                                <img src="{% static 'images/myadmin/user2-160x160.jpg' %}" class="img-circle" alt="User Image">

                                <p>
                                    Xinlan - Web 开发工程师
                                    <small>入职日期：</small>
                                </p>
                            </li>
                            <!-- Menu Footer-->
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" class="btn btn-default btn-flat">个人信息</a>
                                </div>
                                <div class="pull-right">
                                    <a href="#" class="btn btn-default btn-flat">登出</a>
                                </div>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </nav>
    </header>
    <!-- Left side column. contains the logo and sidebar -->
    <aside class="main-sidebar">

        <!-- sidebar: style can be found in sidebar.less -->
        <section class="sidebar">

            <!-- Sidebar user panel (optional) -->
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="{% static 'images/myadmin/user2-160x160.jpg' %}" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>XinLan</p>
                    <!-- Status -->
                    <a href="#"><i class="fa fa-circle text-success"></i> 在线</a>
                </div>
            </div>


            <!-- Sidebar Menu -->
            <ul class="sidebar-menu" data-widget="tree">
                {#        <li class="header">后台</li>#}
                <!-- Optionally, you can add icons to the links -->
                <li class="active"><a href="#" data-url="{% url 'myadmin:home' %}"><i class="fa fa-desktop"></i> <span>工作台</span></a></li>

                {#        <li class="header">首页</li>#}
                <li class="treeview">
                    <a href="#"><i class="fa fa-newspaper-o"></i> <span>新闻管理</span>
                        <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">新闻标签管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">新闻管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">热门新闻管理</a></li>

                    </ul>
                </li>
                <li><a href="#" data-url="{% url 'myadmin:wait' %}"><i class="fa fa-picture-o"></i><span>轮播图管理</span></a></li>
                <li><a href="#" data-url="{% url 'myadmin:wait' %}"><i class="fa fa-folder"></i><span>文档管理</span></a></li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-book"></i> <span>在线课堂</span>
                        <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">课程分类管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">课程管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">讲师管理</a></li>

                    </ul>
                </li>
                <li class="treeview">
                    <a href="#"><i class="fa fa-book"></i> <span>系统设置</span>
                        <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
                    </a>
                    <ul class="treeview-menu">
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">权限管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">用户管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">分组管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">菜单管理</a></li>
                        <li><a href="#" data-url="{% url 'myadmin:wait' %}">个人详情</a></li>
                    </ul>
                </li>

            </ul>
            <!-- /.sidebar-menu -->
        </section>
        <!-- /.sidebar -->
    </aside>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" id="content">
        <!-- Content Header (Page header) -->

    </div>
    <!-- /.content-wrapper -->

    <!-- Main Footer -->
    <footer class="main-footer">
        <!-- To the right -->
        <div class="pull-right hidden-xs">
            聪明源于勤奋，天才源于积累！
        </div>
        <!-- Default to the left -->
        <strong>Copyright &copy; 2019 <a href="#">Company</a>.</strong> All rights reserved.
    </footer>


</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->

<!-- jQuery 3 -->
<script src="{% static 'js/myadmin/jquery.min.js' %}"></script>
<!-- Bootstrap 3.3.7 -->
<script src="{% static 'js/myadmin/bootstrap.min.js' %}"></script>
<!-- AdminLTE App -->
<script src="{% static 'js/myadmin/adminlte.min.js' %}"></script>
<!-- message -->
<script src="{% static 'js/base/message.js' %}"></script>

<!-- Optionally, you can add Slimscroll and FastClick plugins.
     Both of these plugins are recommended to enhance the
     user experience. -->
</body>
</html>

二、后台首页面

1.接口设计

接口说明：

类目	说明
请求方法	GET
url定义	`/admin/`
参数格式	无参数

返回结果：

后台首页面

2.后端代码

创建名为myadmin的app
在虚拟机中，cd到apps目录下，运行创建app的命令

$ cd yourporjectrootdir/apps
yourporjectrootdir/apps $ python ../manage.py startapp myadmin

2 . 在settings.py中的INSTALLED_APPS中删除djangoadmin，添加创建好的myadmin

3 . 视图 myadmin/views.py 中定义如下视图

from django.shortcuts import render
from django.views import View


class IndexView(View):
    def get(self, request):
        return render(request, 'myadmin/index.html')

4 . 路由 myadmin/urls.py 中定义如下路由

from django.urls import path

from . import views

app_name = 'myadmin'

urlpatterns = [
    path('', views.IndexView.as_view(), name='index'),
]

三、首页菜单渲染功能开发

1.分析菜单数据

根据页面风格，设计菜单数据(在开发前期，先写死，后期在做具体优化，以及通用视图书写)

menus = [
            {
                "name": "工作台",
                "url": "myadmin:home",
                "icon": "fa-desktop"
            },
            {
                "name": "新闻管理",
                "icon": "fa-newspaper-o",
                "children": [
                    {
                        "name": "新闻标签管理",
                        "url": "myadmin:wait"
                    }, {
                        "name": "新闻管理",
                        "url": "myadmin:wait"
                    }, {
                        "name": "热门新闻管理",
                        "url": "myadmin:wait"
                    }
                ]
            },
            {
                "name": "轮播图管理",
                "icon": "fa-picture-o",
                "url": "myadmin:home"
            },
            {
                "name": "文档管理",
                "icon": "fa-folder",
                "url": "myadmin:home"
            },
            {
                "name": "在线课堂",
                "icon": "fa-book",
                "children": [
                    {
                        "name": "课程分类管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "课程管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "讲师管理",
                        "url": "myadmin:wait"
                    }
                ]
            },
            {
                "name": "系统设置",
                "icon": "fa-cogs",
                "children": [
                    {
                        "name": "权限管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "用户管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "菜单管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "个人信息",
                        "url": "myadmin:wait"
                    }
                ]
            }

        ]

2. 后端代码

视图修改myadmin/views.py中的IndexView视图

class IndexView(View):
    """
    后台首页视图
    """
    def get(self, request):

        menus = [
            {
                "name": "工作台",
                "url": "myadmin:home",
                "icon": "fa-desktop"
            },
            {
                "name": "新闻管理",
                "icon": "fa-newspaper-o",
                "children": [
                    {
                        "name": "新闻标签管理",
                        "url": "myadmin:wait"
                    }, {
                        "name": "新闻管理",
                        "url": "myadmin:wait"
                    }, {
                        "name": "热门新闻管理",
                        "url": "myadmin:wait"
                    }
                ]
            },
            {
                "name": "轮播图管理",
                "icon": "fa-picture-o",
                "url": "myadmin:home"
            },
            {
                "name": "文档管理",
                "icon": "fa-folder",
                "url": "myadmin:home"
            },
            {
                "name": "在线课堂",
                "icon": "fa-book",
                "children": [
                    {
                        "name": "课程分类管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "课程管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "讲师管理",
                        "url": "myadmin:wait"
                    }
                ]
            },
            {
                "name": "系统设置",
                "icon": "fa-cogs",
                "children": [
                    {
                        "name": "权限管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "用户管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "菜单管理",
                        "url": "myadmin:wait"
                    },
                    {
                        "name": "个人信息",
                        "url": "myadmin:wait"
                    }
                ]
            }

        ]
        return render(request, 'myadmin/index.html', context={'menus': menus})

# 在 myadmin/views.py中添加下面两个视图
class HomeView(View):
    """
    工作台视图
    """
    def get(self, request):
        return render(request, 'myadmin/home.html')


class WaitView(View):
    """
    未上线功能提示
    """
    def get(self, request):
        return render(request, 'myadmin/wait.html')

2 . 路由在myadmin/urls.py中添加如下路由：

path('home/', views.HomeView.as_view(), name='home'),
path('wait/', views.WaitView.as_view(), name='wait'),

3. 前端代码

html

<!-- 修改templates/myadmin/index.html 中侧栏处代码 -->
...
            <!-- Sidebar Menu -->
            <ul class="sidebar-menu" data-widget="tree">
                {% for menu in menus %}
                    {% if 'children' in menu %}
                     <li class="treeview">
                    <a href="#"><i class="fa {{ menu.icon }}"></i> <span>{{ menu.name }}</span>
                        <span class="pull-right-container">
                <i class="fa fa-angle-left pull-right"></i>
              </span>
                    </a>
                    <ul class="treeview-menu">
                        {% for child in menu.children %}
                            <li><a href="#" data-url="{% url child.url %}">{{ child.name }}</a></li>
                        {% endfor %}
                    </ul>
                </li>
                    {% else %}
                        <li ><a href="#" data-url="{% url menu.url %}"><i class="fa {{ menu.icon }}"></i> <span>{{ menu.name }}</span></a></li>
                    {% endif %}
                {% endfor %}
                {#        <li class="header">后台</li>#}
                <!-- Optionally, you can add icons to the links -->
            </ul>
            <!-- /.sidebar-menu -->
...
<!-- 添加菜单控制js -->
<script src="{% static 'js/myadmin/menu.js' %}"></script>

在templates/myadmin/下创建content_base.html模板文件

<!-- templates\myadmin\content_base.html -->
<section class="content-header">
    <h1>
        {% block page_header %}
        {% endblock %}
        <small>{% block page_option %}{% endblock %}</small>
    </h1>

</section>

<!-- Main content -->
<section class="content container-fluid">
{% block content %}
    <!--------------------------
      | Your Page Content Here |
      -------------------------->
{% endblock %}
</section>

<!-- /.content -->

在templates/myadmin/下创建home.html模板文件

<!-- templates\myadmin\home.html -->
{% extends 'myadmin/content_base.html' %}


{% block page_header %}工作台{% endblock %}


{% block content %}
    通知：
        所有人员涨薪100%！
{% endblock %}

在templates/myadmin/下创建wait.html模板文件

<!-- templates\myadmin\wait.html -->
{% extends 'myadmin/content_base.html' %}

{% block page_header %}敬请期待{% endblock %}

{% block content %}
    <div class="callout callout-info">
        <h4>Sorry</h4>

        <p>功能正在紧急开发中，敬请期待！</p>
    </div>
{% endblock %}

2 . js 在static/js/myadmin/中创建menu.js

$(()=>{
    
    let $sideBar = $('.sidebar-menu');                              // 边栏ul
    let $bars = $('.sidebar-menu').find('li:not(.treeview)');       // 所有的菜单

    $bars.click(function () {
        $this = $(this);
        $bars.removeClass('active');
        $this.addClass('active');
        if($this.parent()[0] === $sideBar[0]){
            $sideBar.children('li.treeview.menu-open').children('ul').slideUp();
            $sideBar.children('li.treeview.menu-open').removeClass('menu-open')

        }
        $('#content').load(
            $this.children('a:first').data('url'),
            (response, status, xhr)=>{
                if(status !== 'success'){
                    message.showError('服务器超时，请重试！')
                }
            }
        );
    });

    $bars[0].click();

});

最终效果：

django项目--后台功能

一、后台模板抽取

1.获取静态站点模板

2.模板抽取

二、后台首页面

1.接口设计

2.后端代码

三、首页菜单渲染功能开发

1.分析菜单数据

2. 后端代码

3. 前端代码

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读