后台管理需求：
1.实现对article 的增，删，改，查（编辑，查看，删除）
2.实现对标签的增，删，改，查
3.实现对分类的增，删，改，查
总之就是对博客的组成元素可以更改。。
首先看bokeurl:
from django.contrib import admin from django.urls import path from django.conf.urls import url from django.conf.urls import include urlpatterns = [ path(\'admin/\', admin.site.urls), url(r"^backend/", include("backend.urls")), #管理的url均以backend开头，然后在backend app 的url 文件里面匹配 url(r"^trouble/",include("trouble.urls")), url("^",include("web.urls")), ]
backend.urls:
from django.conf.urls import url from django.conf.urls import include from .views import user urlpatterns=[ url(r\'^index.html$\',user.index), url(r\'^article-(?P<article_type_id>\d+)-(?P<category_id>\d+).html$\',user.article,name=\'article\'), url(r\'^edit-article-(?P<nid>\d+).html$\',user.edit_article), url(r\'^delete-article.html$\',user.delete_article), url(r\'^add-article.html$\',user.add_article), url(r\'^tag.html\',user.tag), url(r\'^add-tag.html$\',user.add_tag), url(r\'^edit-tag-(?P<nid>\d+).html$\',user.edit_tag), url(r\'^delete-tag.html$\',user.delete_tag), ]
一个一个来看吧：
首先 index:
views:
from django.shortcuts import render,HttpResponse,redirect from repository import models from utils.pagination import Pagination from django.urls import reverse from ..form import article_validate from django.db import transaction import json def index(request): return render(request,"backend_index.html")
backend_index_layout.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/plugins/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/static/plugins/font-awesome/css/font-awesome.css"/> <script type="text/javascript" src="/static/js/jquery-1.12.4.js"></script> <script type="text/javascript" src="/static/plugins/bootstrap/js/bootstrap.js"></script> {% block css %}{% endblock %} <style> * { margin: 0; padding: 0; } .left { float: left; } .right { float: right; } .hide { display: none; } .pg-header { min-width: 900px; background-color: #2f72ab; height: 48px; color: white; line-height: 48px; } .pg-header .logo { width: 200px; text-align: center; font-size: 30px; } .pg-header .hr-menu { width: 300px; height: 48px; } .pg-header .master-right { margin: 0 12px; } .master-item { display: inline-block; padding: 0 10px; } .master { display: inline-block; position: relative; z-index: 2; } .master .sub { position: absolute; display: none; } .master .sub .sub-item { display: block; padding: 0 10px; background-color: #2f72ab; } .master:hover .sub { display: block; } .avatar { float: right; height: 48px; } .avatar img { margin-top: 5px; } .avatar .sub { margin-top: 0; margin-left: -45px; width: 77px; } .pg-body .menus { width: 200px; position: absolute; top: 48px; left: 0; bottom: 0; background-color: #b9def0; } .pg-body .contents { position: absolute; top: 50px; left: 200px; bottom: 0; right: 0; {#z-index: -1;#} overflow: scroll; } .pg-body .menus .menus-item { text-align: center; font-size: 18px; } .pg-body .menus .menus-item .item-title { color: green; padding: 8px; background-color: #dddddd; } .pg-body .menus .menus-item .item-content { margin-top: 15px; } .pg-body .menus .menus-item .item-content a { display: block; padding: 3px; } .pg-header a{ color: white; } </style> </head> <body> <div class="pg-header"> <div class="logo left">EasyLife</div> <div class="hl-menu left"> <a class="master-item">菜单一</a> <a class="master-item">菜单二</a> <a class="master-item">菜单三</a> <div class="master"> <a class="master-item">菜单四</a> <div class="sub"> <a class="sub-item">sub1</a> <a class="sub-item">sub2</a> <a class="sub-item">sub3</a> </div> </div> </div> <div class="hr-menu right"> <div class="master master-right"> <a class="master-item">消息 <i class="fa fa-commenting-o" aria-hidden="true"></i> <span class="badge bg-success">2</span> </a> <div class="sub"> <a href="" class="sub-item">sub1</a> <a href="" class="sub-item">sub1</a> <a href="" class="sub-item">sub1</a> </div> </div> <div class="master master-right"> <a class="master-item">通知 <i class="fa fa-envelope-o" aria-hidden="true"></i> <span class="badge bg-success">2</span> </a> <div class="sub"> <a href="" class="sub-item">sub1</a> <a href="" class="sub-item">sub1</a> <a href="" class="sub-item">sub1</a> </div> </div> <div class="master master-right avatar"> <img src="/static/imgs/default.png"> <div class="sub"> <a href="/backend/base-info.html" class="sub-item">个人信息</a> <a href="/logout.html" class="sub-item">注销</a> <a href="" class="sub-item">修改</a> </div> </div> </div> </div> <div class="pg-body"> <div class="menus"> <div class="menus-item"> <div class="item-title">个人管理</div> <div class="item-content"> <a href="/backend/article-0-0.html"> <i class="fa fa-cogs" aria-hidden="true"></i> 文章管理 </a> <a href="/backend/tag.html"> <i class="fa fa-cogs" aria-hidden="true"></i> 标签管理</a> <a href="/backend/category.html"> <i class="fa fa-cogs" aria-hidden="true"></i> 分类管理 </a> </div> </div> <div class="menus-item"> <div class="item-title">标题2</div> <div class="item-content"> <a>文章管理</a> <a>标签管理</a> <a>分类管理</a> </div> </div> <div class="menus-item"> <div class="item-title">标题3</div> <div class="item-content"> <a>文章管理</a> <a>标签管理</a> <a>分类管理</a> </div> </div> </div> <div class="contents"> {% block content %}{% endblock %} </div> </div> <div class="pg-footer"></div> <script src="/static/js/jquery-1.12.4.js"></script> {% block js %}{% endblock %} <script> $(function () { $(".item-content").addClass("hide"); #实现点击这个菜单的时候，隐藏其他的菜单 $(".item-title").click(function () { $(this).siblings(".item-content").removeClass("hide"); $(this).parent().siblings().find(".item-content").addClass("hide"); }); }); </script> </body> </html>
index.html
{% extends "backend_layout.html" %} {% block content %} <div class="jumbotron"> <h1>Hello,{{ request.session.user_login }}</h1> <div style="margin-left: 200px"><a class="btn btn-primary btn-lg" href="/backend/article-0-0.html" role="button">进入</a></div> </div> {% endblock %}
点击标题2时，隐藏个人管理菜单的的子菜单