Project exercise - dashboard construction and administrator module development

The top of the dashboard architecture is a navigation, the left is a menu bar, and the right shows the corresponding content according to the selection on the left.

1, Preparatory work

1. Static file

Download bootstrap 3, unzip it, create a new dashboard folder under the static folder, and then create CSS and JS folders. Put bootstrap.min.css in CSS under bootstrap under CSS under dashboard folder, and then put bootstrap.min.js under JS folder.
Because bootstrap is from jQuery, you need to download jQuery again.
get into

After clicking minified, assign the address behind src to see all the code used by jQuery, then copy it, create a file in js and save it.

2. Project framework document

Create a new requirement.txt in video.


Enter the video folder and enter the command: pip install -r requirements.txt in cmd to install the dependencies as a whole.

2, Initialize Mako

First, create a new libs folder under the app. Under the libs folder, each py file is a function.
Create a new base_render file to initialize mako

# coding:utf-8

mako Initialization of

from mako.lookup import TemplateLookup
from django.template import RequestContext  # Request context
from django.conf import settings  # Get the templates address
from django.template.context import Context
from django.http import HttpResponse

def render_to_response(request, template, data=None):
    context_instance = RequestContext(request)  # Define context instance
    # Get the template address
    path = settings.TEMPLATES[0]['DIRS'][0]

    lookup = TemplateLookup(
        directories=[path],  # Register path with mako

    mako_template = lookup.get_template(template)  # Register our template

    if not data:
        data = {}

    if context_instance:
        context_instance.update(data)  # If the instance exists, update the data
        context_instance = Context(data)  # If the instance does not exist, an instance is created

    result = {}

    for d in context_instance:
    result['csrf_token'] = ('<input type="hidden" '
                            ' name="csrfmiddlewaretoken" value={0} '
                            ' />'.format(request.META['CSRF_COOKIE']))

    return HttpResponse(mako_template.render(**result))

Then we define a package of views in the dashboard and build a base file in it to deploy the environment.

# coding:utf-8

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

class Base(View):
    TEMPLATE = 'dashboard/base.html'  # Basic template, and subsequent html should inherit this template

    def get(self, request):

        return render_to_response(request, self.TEMPLATE)

Then create a dashboard folder in templates, and then create a base html file.
Then start and try:

Normally started.

3, Define Mako

Determine the shared area in baseHTML. For example, title, js, css, body, etc. can be shared
base.html content:

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8">
    <link href="/static/dashboard/css/bootstrap.min.css" rel="stylesheet">




<script src="/static/dashboard/js/jquery-1.12.4.min.js"></script>
<script src="/static/dashboard/js/bootstrap.min.js"></script>

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

Note: you need to import jQuery first, and then bootstrap.js

Create a new html to write the navigation bar.
Enter Bootstrap, select Bootstrap 3 Chinese document, and then select navigation bar

Create a nav.html in the dashboard and copy the example,
Remember to modify TEMPLATE = 'dashboard/nav.html'
Then bring the css over again

The display effect is like this. We need to remove unused components.

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">

      <a class="navbar-brand" href="#">dashboard</a>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

      <ul class="nav navbar-nav navbar-right">
        <li class="dropdown">
          <a href="#"Class =" dropdown toggle "data toggle =" dropdown "role =" button "aria haspopup =" true "aria expanded =" false "> User < span class =" caret "> < / span ></a>
          <ul class="dropdown-menu">

            <li><a href="#"> logout</a></li>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->

Then we will embed this navigation into our basic html.
Add to base.html: <% include file = "NAV. HTML" / >
Remember to change the template in to base

Look, it's embedded.

Here we want to write our own CSS: create a new base.css, and then add our CSS under the CSS of bootstrap in base.html: < link href = "/ static / Dashboard / CSS / base. CSS" rel = "stylesheet" / >

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: 2px solid #cccccc

Here are some adjustments in the leftmost column.

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

Absolute is based on the parent base area of this tag and has an absolute positioning. The left side is 0 relative to base area, and the upper side is 0 relative to base area. list-style: none; It means that there is no list style (that dot is gone).
padding: sets the width of the inner margin of the element.

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

Text align text centered, line height text line height, cursor: pointer mouse used to become a small hand. Border: 1px solid #cccc border.

This is the style.

Next, change the style of the right column.
Add right in base.html

<div class="base-content">

Modify its style in the css we defined:

    width: 88%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    border-left: 2px solid #cccccc

Then create an index.html, change the Base in to Index, modify the response, and change the template to index.html.

In index, the html of base is introduced.

That's all for now. The next article continues.

Tags: Python Django Back-end

Posted on Tue, 16 Nov 2021 06:02:01 -0500 by winkhere