您的位置：360文档中心› Django-梦猪自助多功能平台-主页显示篇（一）ThefuckDjangoDebugTo。。。

Django-梦猪自助多功能平台-主页显示篇（一）ThefuckDjangoDebugTo。。。

合集下载
  1. 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

Django-梦猪⾃助多功能平台-主页显⽰篇
（⼀）ThefuckDjangoDebugTo。

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 %}
{# ⾸页顶部轮播#}
<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_ }}">
</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',
# ...
]
好啦,重启服务器 ,可以使⽤了.。

相关文档
最新文档