Django项目总结：项目主页

【项目功能】

-- 主页面显示

　　-- 数据查询，显示

-- 商品数据展示

　　-- 级联查询，排序

-- 用户系统

　　-- 核心系统

-- 购物车系统

　　-- 商品和用户的关系

　　-- 订单系统

　　　　-- 购物车数据转换成订单

　　-- 支付系统

　　　　-- 接口调用

-- 扩展

　　-- 地址管理系统

　　-- 积分系统

　　-- 会员级别

　　-- 评价系统

　　-- 优惠卷系统

　　-- 数据安全

　　-- 过滤器

　　-- 反爬

　　-- 权限

　　　　-- 用户角色

-- 部署

　　-- 动静分离部署

 

【开发流程】

-- 基本工程搭建

-- 前端静态搭建

-- Model => DB

-- 业务逻辑开发

-- 前后端交互

　　-- Ajax

 

-- 静态资源创建

【前端基础框架】

-- base类（父模板）

　　-- 导入通用资源

　　　　-- reset.py 重置浏览器标签的样式表

-- block挖坑，添加样式

-- base.py

-- base_main.py

-- main

　　-- home.py

　　-- market.py

　　-- cart.py

　　-- mine.py

 

-- 前端适配

　　-- 推荐百分比不推荐固定尺寸

　　-- 适配单位

　　　　-- px

　　　　-- em

　　　　-- 默认相对于父级元素

　　　　-- 默认大小1em = 16px

　　-- rem

　　　　-- 相对单位，相对于根基元素

　　　　-- 默认大小 1rem=16px

　　-- 弹性盒模型

　　-- 响应式布局

-- 项目中

　　-- 屏幕宽度的十分之一作为rem的基础单位

 

【数据展示】

-- 建立数据

　　-- 先建表

　　-- Model -> SQL

　　　　-- trackid 原表中的id

-- 插入数据

-- 数据查询

 

【HOME】

-- urls.py

from django.contrib import admin
from django.urls import path, include
from GPAXF import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    path('axf/', include("App.urls", namespace='axf')),
]

 

-- views.py

from django.shortcuts import render
from App.models import MainWheel, MainNav, MainMustBuy, MainShop, MainShow

def home(request):

    main_wheels = MainWheel.objects.all()

    main_navs = MainNav.objects.all()

    main_mustbuy = MainMustBuy.objects.all()

    main_shops = MainShop.objects.all()

    main_shop0_1 = main_shops[0:1]

    main_shop1_3 = main_shops[1:3]

    main_shop3_7 = main_shops[3:7]

    main_shop7_11 = main_shops[7:11]

    main_shows = MainShow.objects.all()

    data = {
        "title": "HOME",
        "main_wheels": main_wheels,
        "main_navs": main_navs,
        "main_mustbuy": main_mustbuy,
        "main_shop0_1": main_shop0_1,
        "main_shop1_3": main_shop1_3,
        "main_shop3_7": main_shop3_7,
        "main_shop7_11": main_shop7_11,
        "main_shows": main_shows,
    }

    return render(request, 'main/home.html', context=data)


def market(request):
    return render(request, 'main/market.html')


def cart(request):
    return render(request, 'main/cart.html')


def mine(request):
    return render(request, 'main/mine.html')

 

-- models.py

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):
    """
    axf_wheel(img,name,trackid)
    """

    class Meta:
        db_table = 'axf_wheel'


class MainNav(Main):
    """
    axf_nav(img,name,trackid)
    """

    class Meta:
        db_table = 'axf_nav'


class MainMustBuy(Main):
    """
    axf_mustbuy(img,name,trackid)
    """

    class Meta:
        db_table = 'axf_mustbuy'


class MainShop(Main):
    """
    axf_shop(img,name,trackid)
    """

    class Meta:
        db_table = 'axf_shop'


class MainShow(Main):
    """
    axf_mainshow(trackid,name,img,categoryid,brandname,img1,childcid1,productid1,longname1,price1,marketprice1,img2,childcid2,productid2,longname2,price2,marketprice2,img3,childcid3,productid3,longname3,price3,marketprice3)
    """
    categoryid = models.IntegerField(default=1)
    brandname = models.CharField(max_length=64)
    img1 = models.CharField(max_length=255)
    childcid1 = models.IntegerField(default=1)
    productid1 = models.IntegerField(default=1)
    longname1 = models.CharField(max_length=128)
    price1 = models.FloatField(default=1)
    marketprice1 = models.FloatField(default=0)
    img2 = models.CharField(max_length=255)
    childcid2 = models.IntegerField(default=1)
    productid2 = models.IntegerField(default=1)
    longname2 = models.CharField(max_length=128)
    price2 = models.FloatField(default=1)
    marketprice2 = models.FloatField(default=0)
    img3 = models.CharField(max_length=255)
    childcid3 = models.IntegerField(default=1)
    productid3 = models.IntegerField(default=1)
    longname3 = models.CharField(max_length=128)
    price3 = models.FloatField(default=1)
    marketprice3 = models.FloatField(default=0)

    class Meta:
        db_table = 'axf_mainshow'

-- home.html

{% extends 'base_main.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/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 'axf/main/js/home.js' %}"></script>
{% endblock %}

{% block content %}
    <div id="home">
    {# 首页顶部轮播，选择器topSwipe #}
        <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>

    {# 首页顶部导航 #}
        <div class="topMenu">
            <nav>
                <ul>
                    {% for main_nav in main_navs %}
                        <li>
                            <img src="{{ main_nav.img }}" alt="{{ main_nav.name  }}">
                            <span>{{ main_nav.name }}</span>
                        </li>
                    {% endfor %}
                </ul>
            </nav>

        </div>

    {# 首页必购数据 #}
        <div class="swiper-container" id="swiperMenu">
            <ul class="swiper-wrapper">
                {% for main_mustbuy in main_mustbuy %}

                    <li class="swiper-slide">
                        <img src="{{ main_mustbuy.img }}" alt="{{ main_mustbuy.name }}">
                    </li>

                {% endfor %}
            </ul>
        </div>

    {# 首页Shop #}
        <div class="shop_container">
            <h2>
                <img src="{{ main_shop0_1.0.img }}" alt="{{ main_shop0_1.0.name }}">
            </h2>

            <fieldset>
                {% for main_shop in main_shop1_3 %}
                    <a href="#">
                        <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}">
                    </a>
                {% endfor %}
            </fieldset>

            <ul>
                {% for main_shop in main_shop3_7 %}
                    <li>
                        <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}">
                        <span>{{ main_shop.name }}</span>
                    </li>
                {% endfor %}
            </ul>

            <ol>
                {% for main_shop in main_shop7_11 %}
                    <li>
                        <a href="#">
                            <img src="{{ main_shop.img }}" alt="{{ main_shop.name }}">
                        </a>
                    </li>
                {% endfor %}
            </ol>
        </div>

    {# 主显示 #}
        <ul>
            {% for main_show in main_shows %}
                <li class="mainInfo">
                    <section>
                        <h3>{{ main_show.name }}
                            <a href="#">more>&gt;</a>
                            <span></span>
                        </h3>

                        <div>
                            <a href="#">
                                <img src="{{ main_show.img }}" alt="{{ main_show.name }}">
                            </a>
                        </div>

                        <ul>
                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img1 }}" alt="{{ main_show.longname1 }}">
                                    <p class="description">{{ main_show.longname1 }}</p>
                                    <span>{{ main_show.price1 }}</span>
                                    <s>{{ main_show.marketprice1 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>

                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img2 }}" alt="{{ main_show.longname2 }}">
                                    <p class="description">{{ main_show.longname2 }}</p>
                                    <span>{{ main_show.price2 }}</span>
                                    <s>{{ main_show.marketprice2 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>

                            <li>
                                <a href="#">
                                    <img src="{{ main_show.img3 }}" alt="{{ main_show.longname3 }}">
                                    <p class="description">{{ main_show.longname3 }}</p>
                                    <span>{{ main_show.price3 }}</span>
                                    <s>{{ main_show.marketprice3 }}</s>
                                </a>
                                <button>
                                    <span>+</span>
                                </button>
                            </li>
                        </ul>
                    </section>
                </li>
            {% endfor %}
        </ul>
    </div>
{% endblock %}

 

-- base.py

# 加载静态
{% load static %}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    # 移动端，缩放比例1，禁止用户缩放
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>{{ title }}</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 %}

</head>
<body>
    {% 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 %}
</body>
</html>

 

-- base_main.py

{% extends 'base.html' %}
{% load static %}

{% block ext_css %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'axf/main/css/main.css' %}">
{% endblock %}

{% block header %}
    <header></header>
{% endblock %}

{% block footer %}
    <footer>
        <a href="{% url 'axf:home' %}" class="home">
            <dl>
                <dt>
                    <span></span>
                </dt>
                <dd>HOME</dd>
            </dl>
        </a>
        <a href="{% url 'axf:market' %}" class="market">
            <dl>
                <dt>
                    <span></span>
                </dt>
                <dd>MARKET</dd>
            </dl>
        </a>
        <a href="{% url 'axf:cart' %}" class="cart">
            <dl>
                <dt>
                    <span></span>
                </dt>
                <dd>CART</dd>
            </dl>
        </a>
        <a href="{% url 'axf:mine' %}" class="mine">
            <dl>
                <dt>
                    <span></span>
                </dt>
                <dd>MINE</dd>
            </dl>
        </a>
    </footer>
{% endblock %}

-- home.css

/*
    底部图标和文字
*/
footer .home span {
    background: url(/static/img/home_selected.png) no-repeat;
    background-size: 0.513889rem;
}

footer .home dd {
    color: orange;
}

#home {
    font-family: "Microsoft YaHei", "Helvetica Neue", Helvetica, STHeiTi, Arial, sans-serif;
    overflow: auto;
    height: 100%;
    width: 100%;
    padding: 1.5rem 0 3rem;
    position: fixed;
}

/*
    首页顶部轮播
*/
#topSwiper {
    height: 3.95rem;
    width: 10rem;
    overflow: hidden;
}

#topSwiper div a {
    display: inline-block;
    height: 3.95rem;
    width: 10rem;
}

#topSwiper img {
    width: 100%;
    height: 100%;
}

/*
    首页顶部导航
*/
.topMenu {
    padding-bottom: 0;
}

.topMenu nav {
    margin: 0.35rem 0 0.26rem;
    background: white;
}

.topMenu nav ul {
    display: flex;
}

.topMenu nav li {
    width: 2.5rem;
    text-align: center;
    font-size: 0.35rem;
}

.topMenu nav li img {
    width: 2.5rem;
}

/*
 首页必购数据
 */
#swiperMenu {
    width: 100%;
}

#swiperMenu li img {
    width: 100%;
}


/*
    Shop
 */
.shop_container {
    background: white;
}

.shop_container h2 img {
    margin-top: 0.3rem;
    width: 100%;
}


.shop_container fieldset {
    border: none;
    padding: 0;
}

.shop_container fieldset > a {
    display: inline-block;
    width: 49%;
}

.shop_container fieldset img {
    width: 100%;
}


.shop_container ul {
    display: flex;
}

.shop_container ul li {
    width: 2.5rem;
    text-align: center;
    font-size: 0.35rem;
}

.shop_container ul li img {
    width: 2.5rem;
}


.shop_container ol {
    display: flex;
    flex-wrap: wrap;
}

.shop_container ol li {
    list-style: none;
    width: 5rem;
}

.shop_container > ol a {
    display: block;
}

.shop_container ol a img {
    width: 100%;
}

/*
    主显示
 */
.mainInfo {
    background-color: white;
}

.mainInfo > section {
    margin: 0.2rem auto 0;
    padding: 0.2rem 0;
    width: 9.2rem;
}

.mainInfo > section h3 {
    text-align: center;
    height: 1.2rem;
    position: relative;
}

.mainInfo > section h3 a {
    color: grey;
    font-size: 0.3rem;
    line-height: 0;
    position: absolute;
    right: 0.1rem;
    display: block;
}

.mainInfo > section h3 > span {
    background-color: yellow;
    width: 0.6rem;
    height: 0.1rem;
    position: absolute;
    bottom: 0.25rem;
    left: 4.3rem;
}


.mainInfo > section > div > a > img {
    width: 100%;
}


.mainInfo > section > ul {
    display: flex;
    justify-content: space-around;
}

.mainInfo > section > ul > li {
    width: 2.6rem;
    position: relative;
}

.mainInfo > section > ul > li > a {
    font-size: 0.4rem;
    color: red;
    display: block;
}

.mainInfo > section > ul > li > a > span:before {
    color: red;
    content: "$";
}

.mainInfo > section > ul > li > a > img {
    width: 100%;
}

.mainInfo > section > ul > li > a > s {
    color: grey;
    font-size: 0.3rem;
}

.mainInfo > section > ul > li > a > s:before {
    color: grey;
    content: "$";
}

.mainInfo .description {
    font-size: 0.37rem;
    color: black;
    width: 100%;
    display: block;
    line-height: 1.2em;
    height: 2.4em;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mainInfo > section > ul > li > button {
    border: 1px solid lightgrey;
    border-radius: 1111px;
    width: 0.5rem;
    height: 0.5rem;
    display: block;
    line-height: 0.0rem;
    text-align: center;
    color: orangered;
    font-size: 0.5rem;
    position: absolute;
    right: 0;
    top: 2.9rem;
    background: white;
}

.mainInfo > section > ul > li > button > span {
    position: relative;
    /*top: -0.05rem;*/
    margin: auto;
}