发表于

购物app_首页

settings配置

确保以下配置得到处理：settings.py文件中的installed_app的配置，databases的配置，templates的配置，static的配置, login_url = ‘/login/‘，工程的init.py中初始化pymysql，install_as_mysqldb。

1
2
3
4
5
6
7
8
9
10
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'app',
    'user',
]
url配置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
from django.conf.urls import url, include
from django.contrib import admin

from django.contrib.staticfiles.urls import static

from axf import settings

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # url映射到项目的url，采用url反向解析
    url(r'^axf/', include('app.urls', namespace='axf')),
    url(r'^user/', include('user.urls', namespace='user')),
]
# 加载静态文件
urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)

#####

项目url
1
2
3
4
5
6
7
8
9
10
11
12
13
14
from django.conf.urls import url, include
from django.contrib import admin
from django.contrib.staticfiles.urls import static
from axf import settings

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    # 与应用的url建立映射关系
    url(r'^axf/', include('app.urls', namespace='axf')),
    # 与user的应用建立映射关系
    url(r'^user/', include('user.urls', namespace='user')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
应用url
1
2
3
4
5
6
7
8
from django.conf.urls import url

from app import views

urlpatterns = [
    # 首页
    url(r'^home/', views.home, name='home')
]
控制器（views）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
'''
a）banner轮播模型定义

b）导航栏模型定义

c）必购模型定义

d）商店模型定义
'''

from django.http import HttpResponseRedirect
from django.shortcuts import render
from django.core.urlresolvers import reverse

from app.models import MainWheel, MainNav, MainMustBuy, \
    MainShop, MainShow, FoodType, Goods

def home(request):
    '''
    首页视图函数
    '''
    # GET请求
    if request.method == 'GET':
		# 拿到以下数据
       mainwheels = MainWheel.objects.all()
        mainnavs = MainNav.objects.all()
        mainbuys = MainMustBuy.objects.all()
        mainshops = MainShop.objects.all()
        mainshows = MainShow.objects.all()
		# 将后端数据传到前端给html页面渲染
        data = {
            'title': '首页',
            'mainwheels': mainwheels,
            'mainnavs': mainnavs,
            'mainbuys': mainbuys,
            'mainshops': mainshops,
            'mainshows': mainshows,
        }
    	return render(request, 'home/home.html', data)
home.html渲染
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
{% extends 'base_main.html' %}
<!-- 页面继承base_main这个页面-->
{% load static %}
<!-- 加载静态资源-->
{% block extCSS %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'app/home/home.css' %}">
{% endblock %}

{% block EXTJS %}
    <script type="text/javascript" src="{% static 'app/home/js/home.js' %}"></script>
{% endblock %}
<!-- heml页面body里的部分 -->
{% block content %}
<div id="home">
    {#   顶部轮播     #}
    <div class="swiper-container" id="topSwiper">
        <div class="swiper-wrapper">
            <!--处理轮播banner图-->
            {% for wheel in mainwheels %}
                <div class="swiper-slide">
                    <a href="#">
                        <img src="{{ wheel.img }}" alt="">
                    </a>
                </div>
            {% endfor %}
            <!-- 处理结束 -->
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
    </div>
    {#         导航         #}
    <div class="topMenu">
        <nav>
            <ul>
                <!-- 处理导航数据 -->
                {% for nav in mainnavs %}
                    <li>
                        <img src="{{ nav.img }}" alt="">
                        <span>{{ nav.name }}</span>
                    </li>
                {% endfor %}
                <!--处理结束-->
            </ul>
        </nav>
    </div>
    {#         必购     #}
    <div id="swiperMenu" class="swiper-container">

        <ul class="swiper-wrapper">
            <!-- 处理必购商品信息 -->
            {% for buys in mainbuys %}
                <li class="swiper-slide">
                    <img src="{{ buys.img }}" alt="">
                </li>
            {% endfor %}
            <!-- 处理结束 -->

        </ul>

    </div>
    {#          商店    #}
    <div class="CVS">
        <!--处理第一个店铺的数据的图片-->
        {% for shops in mainshops %}
            {% ifequal forloop.counter 1 %}
                <h2>
                    <img src="{{ shops.img }}" alt="">
                </h2>
            {% endifequal %}
        {% endfor %}
        <!--处理结束-->
        
        <fieldset>
            {% for shops in mainshops %}
                {% if forloop.counter > 1 and forloop.counter < 4 %}
            <!--处理第二个到第四个数据-->
                <a href="#">
                    <img src="{{ shops.img }}" alt="">
                </a>
                {% endif %}
            <!--处理结束-->
             {% endfor %}
        </fieldset>
        <ul>
            <!--处理第五个到第八个数据-->
            {% for shops in mainshops %}
                {% if forloop.counter > 3 and forloop.counter < 8 %}
                <li>
                    <a href="#">
                        <img src="{{ shops.img }}" alt="">
                        <span>{{ shops.name }}</span>
                    </a>
                </li>
                {% endif %}
            {% endfor %}
            <!--处理结束-->
        </ul>
        <ol>
            <!--处理第八个到第十二个数据-->
            {% for shops in mainshops %}
                {% if forloop.counter > 7 and forloop.counter < 12 %}
                <li>
                    <a href="#">
                        <img src="{{ shops.img }}" alt="">
                    </a>
                </li>
                {% endif %}
            {% endfor %}
            <!--处理结束-->
        </ol>
    </div>
    {#         主要显示 #}

    <div class="mainInfo">
        <!--商品展示-->
        {% for shows in mainshows %}
            <section>
                <h3><span></span><a href="#">更多&gt;</a></h3>

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

                <ul>

                    <li>
                        <a href="#">
                            <img src="{{ shows.img1 }}" alt="">
                            <p class="description">
                                {{ shows.longname1 }}
                            </p>
                            <span>￥{{ shows.price1 }}</span>
                            <s>￥{{ shows.marketprice1 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                   <li>
                        <a href="#">
                            <img src="{{ shows.img2 }}" alt="">
                            <p class="description">
                                {{ shows.longname2 }}
                            </p>
                            <span>￥{{ shows.price2 }}</span>
                            <s>￥{{ shows.marketprice2 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                   <li>
                        <a href="#">
                            <img src="{{ shows.img3 }}" alt="">
                            <p class="description">
                                {{ shows.longname3 }}
                            </p>
                            <span>￥{{ shows.price3 }}</span>
                            <s>￥{{ shows.marketprice3 }}</s>
                        </a>
                        <button>
                            <span>+</span>
                        </button>
                    </li>
                </ul>
            </section>
        {% endfor %}
        <!--商品展示结束-->
    </div>
</div>
{% endblock %}
js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
$(function(){

initTopSwiper();

initMenuSwiper();

})


function initTopSwiper(){

var swiper = new Swiper("#topSwiper", {
    loop: true,
    pagination:".swiper-pagination",
    autoloop: 4000
})
}


function initMenuSwiper(){
var swiper = new Swiper("#swiperMenu", {
    slidesPerView: 3
})
}