django開發商城(主體和父模板的搭建)

1.搭建虛擬環境javascript

virtualenv shopenvcss

pip install django==1.11html

2.建立工程和應用java

django-admin startproject myshoppython

cd myshopmysql

django-admin startapp shopjquery

3.編寫setting.py配置項目sql

INSTALLED_APPS = [ ... #激活應用
    'shop' ] #配置mysql數據庫,若是"HOST"想填寫ip地址,須要在mysql內置數據庫中將user表的HOST數據寫成%
DATABASES = { 'default': { 'ENGINE': 'django.db.backends.mysql', 'NAME':"數據庫名", 'USER':'數據庫帳號', 'PASSWORD':'數據庫密碼', 'HOST':'localhost', 'PORT':'3306', } }
#配置中文

LANGUAGE_CODE = 'zh-hans'
#配置時區
TIME_ZONE = 'Asia/Shanghai'

# django利用STATIC_URL來讓瀏覽器能夠直接訪問靜態文件,好比:
'''
那麼能夠在瀏覽器上輸入: 
http://192.168.1.2:8000/static/common_static/myapp/photo.png 
那麼就至關與訪問/home/mysite/common_static/myap/photo.png
'''
STATIC_URL = '/static/'

#STATIC_ROOT是在部署靜態文件中,會把全部文件放在STATIC_ROOT所對應的目錄中
#部署項目時,在終端輸入
# python manage.py collectstatic
#django會將全部的static文件都複製到STATIC_ROOT對應文件夾下
# STATIC_ROOT=os.path.join(BASE_DIR,'collect_static')
#django會在激活的應用中搜索static文件夾,來查找靜態文件
#若是想把靜態文件放在app以外,便於管理,就要使用STATICFILES_DIRS來告訴django你把靜態文件放在了什麼地方
STATICFILES_DIRS=[os.path.join(BASE_DIR,'static')]

4.配置static和templates的目錄結構數據庫

5.在static/axf/base/css文件夾下導入bootstrap.min.css,reset.css,swiper.min.css文件,導入fonts,img文件夾django

6.書寫base.html文件

<!DOCTYPE html> {% load static from staticfiles %} <html lang="en">
<head>
    <meta charset="UTF-8">
#使界面自適應設備大小
    <meta name="viewport" content="width=device-width,initital-scale=1.0,mininum-scale=0.5,maxinum-scale=2.0,
user-scalable=no"/>
    <title>{% block title %}{% endblock title %}</title>
    <link rel="stylesheet" href="{% static 'axf/base/css/reset.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'axf/base/css/bootstrap.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'axf/base/css/swiper.min.css' %}" type="text/css">
    <link rel="stylesheet" href="{% static 'axf/base/css/base.css' %}" type="text/css"> {# jquery必須放在bootstrap上面,搭建移動端界面不建議使用jquery,使用layout2#}
    <script type="text/javascript" charset="utf-8" src="{% static 'axf/base/js/jquery-3.1.1.min.js' %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static 'axf/base/js/bootstrap.min.js' %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static 'axf/base/js/swiper.min.js' %}"></script>
    <script type="text/javascript" charset="utf-8" src="{% static 'axf/base/js/base.js' %}"></script> {% block linkscript %} {% endblock linkscript %} </head>
<body>
<header>

</header>
<div> {% block main %} {% endblock main %} </div>
<footer>
    <a href="/home/" class="al">
        <dl>
            <dt>
                <span id="home"></span>
            </dt>
            <dd>主頁</dd>
        </dl>
    </a>
    <a href="/market/" class="a2">
        <dl>
            <dt>
                <span id="market"></span>
            </dt>
            <dd>閃送超市</dd>
        </dl>
    </a>
    <a href="/cart/" class="a3">
        <dl>
            <dt>
                <span id="cart"></span>
            </dt>
            <dd>購物車</dd>
        </dl>
    </a>
    <a href="/mine/" class="a4">
        <dl>
            <dt>
                <span id="mine"></span>
            </dt>
            <dd>個人</dd>
        </dl>
    </a>
</footer>
</body>
</html>

7.書寫base.css文件

html,body{ width: 100%; height: 100%; } body{ /*超出設備寬度隱藏*/ overflow-x: hidden; /*超出設備高度滾動*/ overflow-y: auto; background-color: #eee;
} header,footer{ width: 100%; height:1.5rem; position: fixed; font-size: 0.28rem; /*採用Flex佈局的元素成爲Flex容器,子元素成爲容器成員*/ display: flex; } header{ left: 0; top: 0; background-color: yellow; } footer{ left: 0; bottom: 0; background-color: #fff;
    border-top: 1px solid #f0f0f0;
} footer a{ flex-grow: 1; text-align: center; } footer dl dt{ height: 0.78rem; } footer dl dd{ width: 100%; height: 0.7rem; } footer dl dt span{ width: 0.55rem; height: 0.55rem; } #home{
     display: inline-block; /*背景圖禁止平鋪*/ background: url("/static/axf/base/img/home.png") no-repeat; background-size: 0.55rem; } footer .a2 span{ display: inline-block; background: url("/static/axf/base/img/market.png") no-repeat; background-size: 0.55rem; } footer .a3 span{ display: inline-block; background: url("/static/axf/base/img/cart.png")no-repeat; background-size: 0.55rem; } footer .a4 span{ display: inline-block; background: url("/static/axf/base/img/mine.png") no-repeat; background-size: 0.55rem; } a{ text-decoration: none; } a:link{ text-decoration: none; } a:hover{ text-decoration: none; } a:visited{ text-decoration: none; } a:active{ text-decoration: none; }

8.書寫base.js文件

$(document).ready(function () { // 動態給出rem的單位像素,rem的高度隨屏幕的寬度而變化 document.documentElement.style.fontSize = innerWidth / 10 + "px"; // 當url變化時,對應的背景圖隨之變化 var url = location.href; //   http://127.0.0.1:8000/home/ spanId = url.split("/")[3]; var span = $(document.getElementById(spanId)); span.css("background", "url(/static/axf/base/img/"+spanId+"1.png) no-repeat"); span.css("background-size", "0.55rem"); });

9.書寫全局url和本地url

from django.conf.urls import url, include from . import views urlpatterns = [ url(r'^', views.index), url(r'^home/$', views.home), url(r'^market/$', views.market), url(r'^mine/$', views.mine), url(r'^cart/$', views.cart), ]

10.書寫視圖函數

from django.shortcuts import render,redirect
from django.http import HttpResponse
# Create your views here.
#重定向到主頁
def index(request):
    return redirect("/home/")

#主頁
def home(request):
    return render(request,'axf/home/home.html')
#快送超市
def market(request):
    return render(request,'axf/market/market.html')
#購物車
def cart(request):
    return render(request,'axf/cart/cart.html')
#個人
def mine(request):
    return render(request,'axf/mine/mine.html')

到此,商城的架構和父模板已經搭建完成.