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', # ... ]
好啦,重启服务器 ,可以使用了.