慕课网-Django入门到进阶-更适合Python小白的系统课程-第9章dashboard后端的搭建与开发-9-3dashboard搭建与管理员模块开发（3）

第9章 dashboard 后端的搭建与开发

9-3 dashboard 搭建与管理员模块开发（3）

1.在项目 vedio 下目录 app/dashboard/views，修改文件 base.py，修改 TEMPLATE='dashboard/base.html

# coding:utf-8

from django.views.generic import View
from app.libs.base_render import render_to_response

class Base(View):
    TEMPLATE = 'dashboard/base.html'

    def get(self, request):
        return render_to_response(request, self.TEMPLATE)

2.在项目 vedio 下目录 templates/dashboard，修改文件 base.html，删除 content() 和 添加 base.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${self.title()}</title>
    <link rel="stylesheet" href="/static/dashboard/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/dashboard/css/base.css" />
    ${self.css()}
</head>
<body>
<%include file="nav.html" />

</body>
<script src="/static/dashboard/js/jquery-1.12.4.min.js"></script>
<script src="/static/dashboard/js/bootstrap.min.js"></script>
${self.js()}
</html>

<%def name="title()"></%def>
<%def name="js()"></%def>
<%def name="css()"></%def>
<%def name="content()"></%def>

3.在项目 vedio 下目录 static/dashboard/css，添加 base.css

4.在项目 vedio 下目录 templates/dashboard，修改文件 base.html，添加 content() 内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>${self.title()}</title>
    <link rel="stylesheet" href="/static/dashboard/css/bootstrap.min.css" />
    <link rel="stylesheet" href="/static/dashboard/css/base.css" />
    ${self.css()}
</head>
<body>
<%include file="nav.html" />
<div id="base-area">
    <ul class="side-menu">
        <li>管理员</li>
        <li>用户</li>
        <li>视频</li>
    </ul>
    <div class="base-content">
        ${self.content()}
    </div>
</div>
</body>
<script src="/static/dashboard/js/jquery-1.12.4.min.js"></script>
<script src="/static/dashboard/js/bootstrap.min.js"></script>
${self.js()}
</html>

<%def name="title()"></%def>
<%def name="js()"></%def>
<%def name="css()"></%def>
<%def name="content()"></%def>

5.在项目 vedio 下目录 static/dashboard/css，修改 base.css

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

#base-area {
    width: 100%;
    position: relative;
    height: 100%;
}

.navbar {
    margin-bottom: 0;
}

.side-menu {
    height: 100%;
    width: 12%;
    position: absolute;
    left: 0;
    top: 0;
    list-style: none;
    padding-left: 0;
}

.side-menu > li {
    text-align: center;
    width: 100%;
    line-height: 32px;
    cursor: pointer;
    border: 1px solid #cccccc;
    border-right: 0px;
}

.base-content {
    width: 88%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 1px solid #cccccc;
}

6.在项目 vedio 下目录 templates/dashboard，新建文件 index.html

7.在项目 vedio 下目录 app/dashboard/views，修改文件 base.py，修改类名 Base 为 Index，模板链接文件改成 index.html

# coding:utf-8

from django.views.generic import View
from app.libs.base_render import render_to_response

class Index(View):
    TEMPLATE = 'dashboard/index.html'

    def get(self, request):
        return render_to_response(request, self.TEMPLATE)

8.在项目 vedio 下目录 app/dashboard，修改文件 urls.py

# coding:utf-8

from django.urls import path
from .views.base import Index

urlpatterns = [
    path('', Index.as_view()),
]

9.在项目 vedio 下目录 templates/dashboard，修改文件 index.html

<%inherit file="base.html" />
<%def name="content()">
    <h1>欢迎来到 muke Django2 实战课程练习的 dashboard</h1>
</%def>
<%def name="title()">首页</%def>

10.测试

 

posted on 2020-02-20 10:29  herisson_pan  阅读(14)  评论(0)    收藏  举报

导航