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')

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