Django-梦猪自助多功能平台-主页显示篇/The fuck/Django Debug Toolbar

1、老生常谈,项目创建

djangoadmin startproject MZMARKET
djangoadmin startapp App

# setting修改
# 允许所有IP访问
ALLOWED_HOSTS = ["*"]
# App注册, debug_toolbar注册
INSTALLED_APPS = [
    'App',
    'debug_toolbar',
]
# 中间件注册debug_toolbar
MIDDLEWARE = [
    'debug_toolbar.middleware.DebugToolbarMiddleware',
]
# 添加模板文件夹地址
TEMPLATES = [
    {
        'DIRS': [
            os.path.join(BASE_DIR, 'templates')
        ],
}]
# 数据库改为mysql
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'MZMARKET',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': 'localhost',
        'PORT': 3306,
    }
}
# 语言改为汉语
LANGUAGE_CODE = 'zh-hans'
# 时区改为shanghai
TIME_ZONE = 'Asia/Shanghai'
# 关闭系统时区,方便使用datatime时间格式
USE_TZ = False
# 注册static文件夹地址
STATICFILES_DIRS = [
    os.path.join(BASE_DIR, 'static'),
]
# 注册用户上传文件的保存地址
MEDIA_ROOT = os.path.join(BASE_DIR, 'static/uploads')
# debug_toolbar可以生效的地址
INTERNAL_IPS = [
    '127.0.0.1',
    'localhost',
]

# __init__.py中注册数据库驱动

import pymysql
pymysql.install_as_MySQLdb()

static文件夹结构: 外面的css, fonts, img, js供基础模板使用, base.html 调用. base_main.html 调用mzmarket/main文件夹中的css, js文件

static/
├── css
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── reset.css
│   ├── swiper.css
│   └── swiper.min.css
├── fonts
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
├── img
│   ├── cart.png
│   ├── cart_selected.png
│   ├── home.png
│   ├── home_selected.png
│   ├── market.png
│   ├── market_selected.png
│   ├── mine.png
│   └── mine_selected.png
├── js
│   ├── base.js
│   ├── bootstrap.js
│   ├── bootstrap.min.js
│   ├── jquery.js
│   ├── jquery.min.js
│   ├── swiper.jquery.js
│   └── swiper.jquery.min.js
├── mzmarket
│   └── main
│       ├── css
│       │   ├── cart.css
│       │   ├── home.css
│       │   ├── main.css
│       │   ├── market.css
│       │   └── mine.css
│       ├── img
│       └── js
│           └── home.js
└── uploads

1.1、models中添加首页数据

from django.db import models


class Main(models.Model):
    img = models.CharField(max_length=255)
    name = models.CharField(max_length=64)
    trackid = models.IntegerField(default=1)
# 抽象类,作为父类使用,不会在库中生成表
    class Meta:
        abstract = True


class MainWheel(Main):
    """
    insert into mzmarket_wheel(img,name,trackid) values
    """
    class Meta:
        db_table = 'mzmarket_wheel'


class MainNav(Main):
    """
    insert into mzmarket_nav(img,name,trackid)
    """
    class Meta:
        db_table = 'mzmarket_nav'


class MainMustbuy(Main):
    """
    insert into mzmarket_mustbuy(img,name,trackid)
    """
    class Meta:
        db_table = 'mzmarket_mustbuy'

2、模板中显示：

　　●base.html配置

　　　　-开头{% load static %}

　　　　-<head>标签中设置title以及加载css文件, 并预留子模板中新加css的位置(用block挖坑)

    <title>{{ title|default:'五二萌猪' }}</title>
    <link rel="stylesheet" href="{% static 'css/bootstrap.css' %}">
    <link rel="stylesheet" href="{% static 'css/swiper.css' %}">
    <link rel="stylesheet" href="{% static 'css/reset.css' %}">
    {% block ext_css %}

    {% endblock%}

　　　　-<body>中预留头部, 内容, 脚部内容坑位同时加载通用js文件,并预留子模板js坑位

{% block header %}
{% endblock %}

{% block content %}
{% endblock %}

{% block footer %}

{% endblock %}
<script type="text/javascript" src="{% static 'js/jquery.js'%}"></script>
<script type="text/javascript" src="{% static 'js/bootstrap.js'%}"></script>
<script type="text/javascript" src="{% static 'js/base.js'%}"></script>

{% block ext_js %}

{% endblock %}

　　●base_main.html配置

　　　　-继承自base.html

{% extends 'base.html' %}

　　　　-加载静态资源文件, 继承base的ext_css文件, 并且新加自己的css内容(如果保留父模板的内容,需要加上{{ block.super }}

{% load static %}
{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'mzmarket/main/css/main.css' %}">
{% endblock %}

　　　　-写入各页面通用的内容: 页脚的导航

{% block footer %}
    <footer>
        <a href="{% url 'mz:home' %}" class="home">
            <dl>
                <dt>
                    <span></span>
                    <dd>首页</dd>
                </dt>
            </dl>
        </a>
            <a href="{% url 'mz:market' %}" class="market">
            <dl>
                <dt>
                    <span></span>
                    <dd>闪购</dd>
                </dt>
            </dl>
        </a>
            <a href="{% url 'mz:cart' %}" class="cart">
            <dl>
                <dt>
                    <span></span>
                    <dd>购物车</dd>
                </dt>
            </dl>
        </a>
            <a href="{% url 'mz:mine' %}" class="mine">
            <dl>
                <dt>
                    <span></span>
                    <dd>我的</dd>
                </dt>
            </dl>
        </a>
    </footer>
{% endblock %}

　　　　-部分main css文件

html, body{
    width:100%;
    height:100%;
}

body{
    margin:0;
    padding:0;
    overflow-x:hidden;
    overflow-y:auto;
    background:#eee;
}

header, footer{
    width: 100%;
    height: 1.5rem;
    font-size:0.277777rem;
    border-top:1px solid #f0f0f0;
    z-index:10;
    position:fixed;
    display: flex;
}
header{
    background:yellow;
    top:0;
    left:0;
}
/* footer的内容在这里定义,里面有a标签,dl dt span dd,还有.home .market .cart .mine的各自的span */

footer{
    background:#fff;
    bottom:0;
    left:0;
}

footer a{
    display:block;
    width:25%!important;
    text-align:center;
    overflow:hidden!important;
}

footer dl dt{
    height:0.777777rem;
    padding-top:0.22222rem;
    position:relative;
}


footer dl dt span{
    display:inline-block;
    width:0.513889rem;
    height:0.513889rem;
}

footer dl dd{
    width: 100%;
    height: 0.708333rem;
}


footer .home span{
    background: url(/static/img/home.png) no-repeat;
    background-size:0.513889rem;
}
footer .market span{
    background:url(/static/img/market.png) no-repeat;
    background-size:0.513889rem;
}
footer .cart span{
    background:url(/static/img/cart.png) no-repeat;
    background-size:0.513889rem;
}
footer .mine span{
    background:url(/static/img/mine.png) no-repeat;
    background-size:0.513889rem;
}

a{
text-decoration:none
}
a:link{
text-decoration:none
}
a:visited{
text-decoration:none
}
a:hover{
text-decoration:none
}
a:active{
text-decoration:none
}

　　●home.html页面内容

{% extends 'base_main.html' %}
{% load static %}
{# ↑继承自base_main.html 加载静态资源 #}
{# ↓加载自己的css文件 用于定义home页面内容的style 以及js文件,js用于轮播图动态战士 #}
{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'mzmarket/main/css/home.css' %}">
{% endblock %}

{% block ext_js %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
    <script type="text/javascript" src="{% static 'mzmarket/main/js/home.js' %}"></script>
{% endblock %}

　　　　-轮播图部分代码,来自swiper3官网:https://3.swiper.com.cn/usage/index.html

{#    首页顶部轮播#}
        <div class="swiper-container" id="topSwiper">
            <div class="swiper-wrapper">
                {% for main_wheel in main_wheels %}
                    <div class="swiper-slide">
                        <img src="{{ main_wheel.img }}" alt="{{ main_wheel.name }}">
                    </div>
                {% endfor %}

            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

        </div>

　　　　-注册js代码,使其动态生效

$(function () {
    // 写在这里一起注册, 然后再在下面定义它们的函数
    initTopSwiper();
    initSwiperMenu();
})

function initTopSwiper() {
    var swiper = new Swiper('#topSwiper',{
    // loop 轮播, autoplay 自动播放
    loop: true,
    autoplay: 3000,


    pagination: '.swiper-pagination'
    });
}

function initSwiperMenu() {
    var swiper = new Swiper('#swiperMenu',{
    slidesPerView : 2,

    // 这是控制屏幕中同时显示多少个图片, slidesPerView:2 即 2个
    });
}

　　　　-其他填充内容的代码就不再列举了,下面记录一些其他知识点:

3、其他知识点

　　●linux的命令提示：fuck

　　　　-使用pip3进行安装：

sudo pip3 install thefuck

sudo vim .bashrc

# 添加内容
# the fuck
eval $(thefuck --alias)
eval $(thefuck --alias FUCK)

# 保存后source .bashrc
# 在输错linux命令后就可以直接在下一行输入fuck查看正确命令,如果类似命令有多个也可以用上下箭头选择

　　●测试工具Django Debug Toolbar

　　　　-安装

pip install django-debug-toolbar

　　　　-setting中注册

INSTALLED_APPS = [
    # ...
    'django.contrib.staticfiles',
    # ...
    'debug_toolbar',
]

STATIC_URL = '/static/'

　　　　-urls中进行注册

from django.conf import settings
from django.conf.urls import include, url  # For django versions before 2.0
from django.urls import include, path  # For django versions from 2.0 and up

if settings.DEBUG:
    import debug_toolbar
    urlpatterns = [
        path('__debug__/', include(debug_toolbar.urls)),

        # For django versions before 2.0:
        # url(r'^__debug__/', include(debug_toolbar.urls)),

    ] + urlpatterns

　　　　-middleware中进行注册(必须放在最上面, 它的加载依赖于其他一些文件)

MIDDLEWARE = [
    # ...
    'debug_toolbar.middleware.DebugToolbarMiddleware',
    # ...
]

　　　　-django debug_toolbar只在白名单ip中显示,需要添加到setting里

INTERNAL_IPS = [
    # ...
    '127.0.0.1',
    # ...
]

好啦,重启服务器 ,可以使用了.

Django-梦猪自助多功能平台-主页显示篇/The fuck/Django Debug Toolbar

猜你喜欢