Django学习[31] 首页数据加载，数据加载流程，渲染

博主： justin
发布时间：2024 年 03 月 13 日
185 次浏览
关闭评论
14426字数
分类： Python

根据上一次的内容我们，将首页的html中的footer剩下的内容填好：

{% endblock %}

{% block footer %}
    <footer>
        <a href="#" class="home">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>首页</dd>
            </dl>
        </a>
        <a href="#" class="market">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>闪购</dd>
            </dl>
        </a>    <a href="#" class="cart">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>购物车</dd>
            </dl>
        </a>    <a href="#" class="mine">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>个人信息</dd>
            </dl>
        </a>
    </footer>
{% endblock %}

如图观察

改进

现在我们要将首页图标就变成高亮的功能加入，我们该如何修改呢？首先我们不能在base_main.html中修改，因为这是通用的模板，我们需要在home.html中修改：

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

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

{% block ext_js %}  {# 主页需要导入额外的js格式，比如轮播 #}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'js/swiper.jquery.js'%}"></script>
{#  先导入父标签的格式#}
{% endblock %}

(4-7行是我们新加的，并且这里我们新建了home.css)
home.css:

footer .home span {
    background: url(/static/img/home_selected.png) no-repeat ;
    background-size: 0.513889rem;
}

footer .home dd{
    color: orange;
}    /*这里是文字颜色，颜色都是由美工所给，以二进制或者RGB或者ARGB的格式*/

类推完善其他3个图标

market

新建market.css:

footer .market span {
    background: url(/static/img/market_selected.png) no-repeat ;
    background-size: 0.513889rem;
}

footer .market dd{
    color: orange;
}

在market.html：

{% extends 'base_main.html' %}
{% load static %}
{% block ext_css %}
{{ block.super }}
    <link rel="stylesheet" href="{% static 'peiqi1/main/css/market.css' %}">
{% endblock %}

url:

urlpatterns = [
    url(r'^home/', views.home, name='home'),
    url(r'^market/', views.market, name='market'),
]

views:

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

测试：

然后我们接着板砖完成购物车和个人信息

cart

同上

mine

同上

我们在base_main.html中的a标签中添加路由地址，就可以实现网页跳转

{% block footer %}
    <footer>
        <a href="{% url 'peiqi1:home' %}" class="home">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>首页</dd>
            </dl>
        </a>
        <a href="{% url 'peiqi1:market' %}" class="market">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>闪购</dd>
            </dl>
        </a>    <a href="{% url 'peiqi1:cart' %}" class="cart">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>购物车</dd>
            </dl>
        </a>    <a href="{% url 'peiqi1:mine' %}" class="mine">
            <dl>    {# 自定义列表 #}
                <dt>
                    <span></span>
                </dt>
                <dd>个人信息</dd>
            </dl>
        </a>
    </footer>
{% endblock %}

具体实现

首页轮播

建立数据（人导入，脚本导入都有）

先建表

Model->SQL

建立model模型，映射成数据库

models:

from django.db import models


class MainWheel(models.Model):
  """
   表名peiqi1_wheel(img,name,trackid)
   这里的wheel指的是轮子，轮播数据的意思
  """
  img = models.CharField(max_length=255)  # 这里用于存放轮播的图片地址，所以存储位数设置长一点
  name = models.CharField(max_length=64)  # 设置名字
  trackid = models.IntegerField(default=1)  # 原表id
  
  class Meta:
      db_table = 'peiqi1_wheel'  # 设置表名

然后生成迁移文件：python manage.py makemigrations
接着迁移： python manage.py migrate

插入数据

下面我们需要利用sql语句添加数据，按照下图打开终端，将sql语句复制粘贴进去：

SQL:

insert into peiqi1_wheel(img,name,trackid) values ('http://qiniu.justinwuwei.cn/wd.png', '金色的妖精', 1000),('http://qiniu.justinwuwei.cn/11.jpg', '樱花', 1001),('http://qiniu.justinwuwei.cn/20191129145930.png', '孤独', '1002');

数据查询

views:在我们之前写的home主页视图中

from App.models import MainWheel


def home(request):
  main_wheels = MainWheel.objects.all()
  data = {
      'title': '首页',
      'main_wheels': main_wheels,
  }
  return render(request, 'main/home.html', context=data)

现在我们要在home.html中把轮播页面呈现出来，这里要做一个准备工作，就是把我们要用的关于轮播样式添加到home.css中。
home.css:

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

footer .home dd {
  color: orange;
}


#home {
  padding: 1.5rem 0;   
    /* 
        padding设置上下左右的内边距，
        详细请看补充：https://www.w3school.com.cn/cssref/pr_padding.asp 
    */
  overflow: auto;
  height: 100%;
  width: 100%;
  padding-bottom: 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%;
}

.CVS {
  background: white;
}

.CVS h2 img {
  width: 100%;
}

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

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

.CVS fieldset img {
  width: 100%;
}

.CVS ul {
  display: flex;
}

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

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

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

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

.CVS > ol a {
  display: block;
}

.CVS 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: 0rem;
  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 > img {
  width: 100%;
}

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

.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.8rem;
  height: 0.8rem;
  display: block;
  line-height: 0.0rem;
  text-align: center;
  color: orangered;
  font-size: 0.8rem;
  position: absolute;
  right: 0;
  top: 3.6rem;
  background: white;
}

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

现在我们要写swiper轮播的html,方法是从swiper官网上导入相关Html代码进home.html

home.html:

{% block content %}
      {#        首页顶部轮播       #}
  <div id="home">
      <div class="swiper-container" id="topSwiper">
          <div class="swiper-wrapper">
              {% for main_wheel in main_wheels %}
                                      {# 这里我们利用for循环一个个生成的 #}
                  <div class="swiper-slide">
                    {# 这里利用views视图从数据库中获取数据 #}
                      <img src="{{ main_wheel.img }}" alt="{{ main_wheel.name }}">
                  </div>
              {% endfor %}
          </div>
          <div class="swiper-pagination"></div>
      </div>

观察网页：

但是这里发现，轮播不可以切换其他图片，原因是没有初始化swiper

初始化swiper

1.0版本手动轮播

在static/peiqi1/main下新建js文件夹，新建home.js文件用于初始化swiper.
home.js:

function initTopSwiper() {
  var swiper = new Swiper("#topSwiper",{
  });
}

在home.html中导入刚刚创建的js文件：
(第4行)

{% block ext_js %}
  {{ block.super }}
  <script type="text/javascript" src="{% static 'js/swiper.jquery.js' %}"></script>
  <script type="text/javascript" src="{% static 'peiqi1/main/js/home.js' %}"></script>
{% endblock %}

这样我们就可以手动拖动图片进行轮播切换图片了。

2.0版本自动轮播

但是这样的轮播是不能无限轮播，也不能自动轮播，必须要亲自拖动才可以切换图片，所以我们需要在原来js刚刚初始化的地方再添加一些属性（都是以字典类型的），实现自动轮播功能
home.js:

function initTopSwiper() {
  var swiper = new Swiper("#topSwiper",{
      loop: true,                           // 自动切换开启  
      autoplay: 3000,                       // 自动切换时间3s  
      pagination: '.swiper-pagination'      // 指定分页器选择器
  });
}

测试：（这里虽是手动拖动的，但是也有自动的功能）

title=

首页的导航

我们在首页添加每日必抢，每日推荐，鲜货直供等等功能按钮

建立数据

这些功能和上一个数据模型类似（字段名一样，只有表名不一样），所以我们在建立数据模型时，比复制粘贴更好用的方法是继承。
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)  # 原表id
    
    class Meta:  # 元信息，详细看django学习[20]
        abstract = True    



class MainWheel(Main):
    """
     表名peiqi1_wheel(img,name,trackid)
     这里的wheel指的是轮子，轮播数据的意思
    """

    class Meta:
        db_table = 'peiqi1_wheel'  # 设置表名


class MainNav(Main):
    """
        peiqi1_nav(img,name,trackid)
    """
    class Meta:
        db_table = 'peiqi1_nav'

迁移数据。

插入数据

insert into peiqi1_nav(img,name,trackid) 
values
('https://www.easyicon.net/api/resizeApi.php?id=1242798&size=128','小','21851'),
("http://img01.bqstatic.com//upload/activity/2016121920130294.png","猪","21753"),
("http://img01.bqstatic.com//upload/activity/2017010517013925.png","佩","21749"),
("https://www.easyicon.net/api/resizeApi.php?id=1242137&size=128","奇","21854");

数据查询

views:

def home(request):
    main_wheels = MainWheel.objects.all()
    
    main_navs = MainNav.objects.all()
    
    data = {
        'title': '首页',
        'main_wheels': main_wheels,
        'main_navs': main_navs,
    }
    return render(request, 'main/home.html', context=data)

home.html添加关于顶部导航的代码:

{#       首页顶部的导航      #}
        <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>

以上的代码层次是dicv下nav下ul下循环li，这个层次关系与home.css中顶部导航的css对应：

/*
    顶部导航
*/

.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;
}

首页轮播2

建立数据

models：

class MainMustBuy(Main):
    """
    insert into axf_mustbuy(img,name,trackid)
    """
    class Meta:
        db_table = 'peiqi1_mustbuy'

迁移数据。

插入数据

insert into peiqi1_mustbuy(img,name,trackid)
values
("http://qiniu.justinwuwei.cn/wd.png","金色的妖精","21870"),
("http://qiniu.justinwuwei.cn/20200401171008.png","peiqi1","21861"),
("http://qiniu.justinwuwei.cn/图怪兽_950089375ac30e90fe184c47c13b118d_92881.jpg","mysql","21866"),
("https://www.easyicon.net/api/resizeApi.php?id=1242137&size=128","奇","21858");

数据查询

views：

def home(request):
    main_wheels = MainWheel.objects.all()

    main_navs = MainNav.objects.all()

    main_mustbuys = MainMustBuy.objects.all()

    data = {
        'title': '首页',
        'main_wheels': main_wheels,
        'main_navs': main_navs,
        'main_must_buys': main_mustbuys,
    }
    return render(request, 'main/home.html', context=data)

home.js修改初始化：

$(function () {
    /*直接调用封装好的方法*/
    initTopSwiper();

    initSwiperMenu();

})

function initTopSwiper() {  /*封装初始化方法*/
    var swiper = new Swiper("#topSwiper",{
        loop: true,
        autoplay: 3000,
        pagination: '.swiper-pagination'
    });
}

function initSwiperMenu() { /*封装初始化方法*/
    var swiper = new Swiper("#swiperMenu",{
       slidesPerView: 3
    });
}

home.html添加关于轮播2的代码:

    {# 首页必买轮播 #}
        <div class="swiper-container" id="swiperMenu">
            <ul class="swiper-wrapper">
                {% for main_mustbuy in main_mustbuys %}

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