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‘,
    # ...
]

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

原文地址：https://www.cnblogs.com/djflask/p/12286117.html

时间： 2024-10-13 07:00:26

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

【福利】淘宝自助刷单平台源码

TaoShang TaoShang 是一个使用 .NET 开发的淘宝自助刷单平台.项目使用了 CSkin, Dapper(ORM),SQLite,Ninject(IOC)protobuf.net 等开源项目及远程桌面软件 AnyDesk.客户端与服务端使用基于 SAEA 的 Socket TCP 进行通信. 项目目录说明 starts2000 一些基础类库及基于 SAEA 的 Socket TCP 封装. Starts2000.SmartUpdate 程序自动更新客户端及服务端项目. Start

Windows Azure AD密码自助重置功能介绍

说到windows azure大家并不陌生了,当然azure目前分为国际和国内(世纪互联)两个版本,两个版本的功能其实有很大差别,国际版本的azure的功能比国内版本的azure功能强大,功能多,当然国内的azure的功能一直在更新,需要一定的时间来完善及更新,具体再次就不多介绍了,前段时间看见windows azure国内版本更新了一些功能,所以就来尝试一下,今天呢主要介绍windows azure AD密码自助重置功能. 我们在前面的文章中有介绍,通过在windows2012r2上部署ADF

django高级应用（分页功能）

django高级应用(分页功能) 1.原生分页应用 前端html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <ul> 9 {% for item in posts.obj

协同oa办公自动化系统有哪些功能平台？

随着我国经济水平的快速发展,计算机信息技术得到快速提高,特别是协同oa办公自动化系统开发这块,其功能越来越完善,操作简便.那协同oa办公自动化系统有哪些功能平台呢? 1.个人办公平台 协同oa办公自动化系统是新一代的智能化的个人工作管理平台.企业员工可以通过该平台管理.处理日常事务及业务.通过网络的连接,用户可在任意地方提交加班.请假.报销等申请,同时能够快速进行客户管理及项目管理,扩大办公区域,提高个人办事效率. 2.企业协同办公平台 协同oa办公自动化系统为企业提供了一个开放.透明.高效的办

.net工作流引擎ccflow开发平台属性功能的隐藏显示介绍

关键字: 工作流程管理系统 工作流引擎 asp.net工作流引擎 java工作流引擎. 表单引擎 工作流功能说明  工作流设计 工作流快速开发平台   业务流程管理   bpm工作流系统  java工作流主流框架  自定义工作流引擎 应用背景: 驰骋工作流系统大大小小的功能高达2000多项,所以不是多有的功能都能被企业所使用的,为了系统的简介他们需要隐藏一些暂时用不到的功能,但是一段时间后可能就需要某些原来隐藏掉的功能,所以单纯的从代码里隐藏是不够理想的,这时候就需要做一个同意管理的功能来自由处

Django框架进阶6 多对多三种创建方式, Ajax, Content-Type前后端传输数据编码格式, Ajax发送文件数据, django内置的序列化功能, Ajax结合sweetalert实现删除二次确认, 批量插入数据, 自定义分页器, ajax结合sweetalert实现删除二次确认

多对多三种创建方式 1.全自动(较为常用) class Book(models.Model): title = models.CharField(max_length=32) authors = models.ManyToManyField(to='Author') # orm就会自动帮你创建第三张表 class Author(models.Model): name = models.CharField(max_length=32) ''' 好处:第三张表自己创建 不足之处:第三张表无法扩展额外

Django实战1-权限管理功能实现-01：搭建开发环境

1 项目开发环境 语言环境: python3.6.2 , django-2.1.2 数据库环境:sqlite3(开发环境使用,部署环境使用mysql5.6) 开发工具:pycharm 2 安装python 说明:已经安装过python3.6环境的可以跳过此步.python安装包下载地址:https://www.python.org/downloads/windows/ 访问上面地址,找到Python 3.6.2rc2 - 2017-07-07,点击 Windows x86-64 executab

Python之路【第十七篇】：Django【进阶篇 】

Python之路[第十七篇]:Django[进阶篇 ] Model 到目前为止,当我们的程序涉及到数据库相关操作时,我们一般都会这么搞: 创建数据库,设计表结构和字段 使用 MySQLdb 来连接数据库,并编写数据访问层代码 业务逻辑层去调用数据访问层执行数据库操作 import MySQLdb def GetList(sql): db = MySQLdb.connect(user='root', db='wupeiqidb', passwd='1234', host='localhost')

Python之路【第十六篇】：Django【基础篇】

Python之路[第十六篇]:Django[基础篇] Python的WEB框架有Django.Tornado.Flask 等多种,Django相较与其他WEB框架其优势为:大而全,框架本身集成了ORM.模型绑定.模板引擎.缓存.Session等诸多功能. 基本配置 一.创建django程序 终端命令:django-admin startproject sitename IDE创建Django程序时,本质上都是自动执行上述命令 其他常用命令: python manage.py runserver