Python輪播圖與導(dǎo)航欄功能的實(shí)現(xiàn)流程全講解

更新時(shí)間：2022年09月21日 17:02:14 作者：ZERO的禿頭之路

這篇文章主要介紹了Python項(xiàng)目輪播圖功能實(shí)現(xiàn)和導(dǎo)航欄的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)吧

輪播圖功能

安裝依賴模塊

圖片處理模塊

pip install pillow

上傳文件相關(guān)配置

由于我們需要在后臺(tái)上傳我們的輪播圖圖片，所以我們需要在django中配置一下上傳文件的相關(guān)配置，有了它之后，就不需要我們自己寫(xiě)上傳文件，保存文件的操作了，看配置

dev.py

STATIC_URL = '/static/'
# 設(shè)置django的靜態(tài)文件目錄
# STATICFILES_DIRS = [
#     os.path.join(BASE_DIR,"static")
# ]
# 項(xiàng)目中存儲(chǔ)上傳文件的根目錄[暫時(shí)配置]，注意，uploads目錄需要手動(dòng)創(chuàng)建否則上傳文件時(shí)報(bào)錯(cuò)
MEDIA_ROOT = os.path.join(BASE_DIR, "uploads")
# 訪問(wèn)上傳文件的url地址前綴
MEDIA_URL = "/media/"

總路由urls.py

在django項(xiàng)目中轉(zhuǎn)換上傳文件的Url地址，總路由urls.py新增代碼：

from django.contrib import admin
from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
import xadmin
xadmin.autodiscover()
# version模塊自動(dòng)注冊(cè)需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
    # path('admin/', admin.site.urls),
    path(r'xadmin/', xadmin.site.urls),
    re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
]

注冊(cè)home子應(yīng)用

因?yàn)楫?dāng)前功能是drf的第一個(gè)功能，所以我們先創(chuàng)建一個(gè)子應(yīng)用home，創(chuàng)建在lyapi/apps目錄下

cd lyapi/apps/
python manage.py startapp home

注冊(cè)home子應(yīng)用，因?yàn)樽討?yīng)用的位置發(fā)生了改變，所以為了原來(lái)子應(yīng)用的注冊(cè)寫(xiě)法，所以新增一個(gè)導(dǎo)包路徑：

dev.py

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
# 新增一個(gè)系統(tǒng)導(dǎo)包路徑
import sys
#sys.path使我們可以直接import導(dǎo)入時(shí)使用到的路徑，所以我們直接將我們的apps路徑加到默認(rèn)搜索路徑里面去，那么django就能直接找到apps下面的應(yīng)用了
sys.path.insert(0,os.path.join(BASE_DIR,"apps"))
...
INSTALLED_APPS = [
	# 注意，加上drf框架的注冊(cè)
	...
    'rest_framework',
    ...
    # 子應(yīng)用
    'home',
]

創(chuàng)建輪播圖的model模型

apps/home/models.py

from django.db import models
# Create your models here.
class Banner(models.Model):
    """輪播廣告圖模型"""
    # 模型字段
    title = models.CharField(max_length=500, verbose_name="廣告標(biāo)題")
    link = models.CharField(max_length=500, verbose_name="廣告鏈接")
    # upload_to 設(shè)置上傳文件的保存子目錄,將來(lái)上傳來(lái)的文件會(huì)存到我們的media下面的banner文件夾下，這里存的是圖片地址。
    image_url = models.ImageField(upload_to="banner", null=True, blank=True, max_length=255, verbose_name="廣告圖片")
    remark = models.TextField(verbose_name="備注信息")
    is_show = models.BooleanField(default=False, verbose_name="是否顯示")  # 將來(lái)輪播圖肯定會(huì)更新，到底顯示哪些
    orders = models.IntegerField(default=1, verbose_name="排序")  # 輪播圖優(yōu)先顯示，default數(shù)字越大越優(yōu)先顯示
    is_deleted = models.BooleanField(default=False, verbose_name="是否刪除")
    # 表信息聲明
    class Meta:
        db_table = "ly_banner"
        verbose_name = "輪播廣告"
        verbose_name_plural = verbose_name
    # 自定義方法[自定義字段或者自定義工具方法]
    def __str__(self):
        return self.title

執(zhí)行數(shù)據(jù)庫(kù)遷移指令

python manage.py makemigrations
python manage.py migrate

創(chuàng)建Banner的序列化器

apps/home/serializers.py

from rest_framework import serializers
from . import models
class BannerModelSeiralizer(serializers.ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ['id', 'title', 'link', 'image_url']

創(chuàng)建Banner的視圖類(lèi)

apps/home/views.py

from rest_framework.generics import ListAPIView
from . import models
from .serializer import BannerModelSeiralizer
# 這個(gè)是把所有的常量參數(shù)放在一個(gè)文件內(nèi)，誰(shuí)用誰(shuí)拿
from lyapi.settings import contains
# Create your views here.
class BannerView(ListAPIView):
    queryset = models.Banner.objects.filter(is_show=True, is_deleted=False).order_by('orders')[0:contains.BANNER_LENGTH]
    serializer_class = BannerModelSeiralizer

在settings配置文件夾中創(chuàng)建一個(gè)constants.py配置文件，將來(lái)里面存放我們所有的一些常量信息配置，比如上面的輪播圖數(shù)據(jù)切片長(zhǎng)度

settings/constant.py

# 輪播圖顯示條數(shù)
BANNER_LENGTH = 3

配置Banner的路由

總路由utils/urls.py

from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
import xadmin
xadmin.autodiscover()
# version模塊自動(dòng)注冊(cè)需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
    path(r'home/', include('home.urls')),
]

應(yīng)用中的路由apps/home/urls.py

from django.urls import path, re_path
from django.conf import settings
from . import views
urlpatterns = [
    path(r'banner/', views.BannerView.as_view()),
]

配置Xadmin

配置文件注冊(cè)Xadmin應(yīng)用

settings/dev.py

INSTALLED_APPS = [
	...
    'home',
    'users',
    'xadmin',
    'crispy_forms',
    'reversion',
]
# LANGUAGE_CODE = 'en-us'
# 原來(lái)配置文件中的兩個(gè)原配置注掉，用我們的
# TIME_ZONE = 'UTC'
# 修改使用中文界面
LANGUAGE_CODE = 'zh-Hans'
# 修改時(shí)區(qū)
TIME_ZONE = 'Asia/Shanghai'

xadmin有建立自己的數(shù)據(jù)庫(kù)模型類(lèi)，需要進(jìn)行數(shù)據(jù)庫(kù)遷移

python manage.py makemigrations
python manage.py migrate

在總路由中添加xadmin的路由信息

from django.urls import path, re_path, include
from django.views.static import serve
from django.conf import settings
import xadmin
xadmin.autodiscover()
# version模塊自動(dòng)注冊(cè)需要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()
urlpatterns = [
    # path('admin/', admin.site.urls),
    path(r'xadmin/', xadmin.site.urls),
]

給Xadmin配置基本的站點(diǎn)信息

home/adminx.py

import xadmin
from xadmin import views
class BaseSetting(object):
    """xadmin的基本配置"""
    enable_themes = True  # 開(kāi)啟主題切換功能
    use_bootswatch = True
xadmin.site.register(views.BaseAdminView, BaseSetting)
class GlobalSettings(object):
    """xadmin的全局配置"""
    site_title = "莽夫?qū)W城"  # 設(shè)置站點(diǎn)標(biāo)題
    site_footer = "莽夫?qū)W城有限公司"  # 設(shè)置站點(diǎn)的頁(yè)腳
    menu_style = "accordion"  # 設(shè)置菜單折疊
xadmin.site.register(views.CommAdminView, GlobalSettings)

創(chuàng)建超級(jí)管理員

python manage.py createsuperuser

注冊(cè)輪播圖模型到xadmin中

apps/home/adminx.py

在當(dāng)前子應(yīng)用中創(chuàng)建adminx.py，添加如下代碼

class BannerXadmin(object):
# 需要展示的字段用中文顯示
    list_display = ['id', 'title', 'link', 'image_url', 'is_show']
# 注冊(cè)Xadmin
xadmin.site.register(models.Banner, BannerXadmin)

修改后端Xadmin中子應(yīng)用名稱

apps/home/apps.py

from django.apps import AppConfig
class HomeConfig(AppConfig):
    name = 'home'
    verbose_name = '我的首頁(yè)'

apps/home/__ init__.py

default_app_config = "home.apps.HomeConfig"

給輪播圖添加測(cè)試數(shù)據(jù)

經(jīng)過(guò)上面的操作,我們就完成了輪播圖的API接口,接下來(lái),可以考慮提交一個(gè)代碼版本.

git add .
git commit -m "服務(wù)端實(shí)現(xiàn)輪播圖的API接口"
git push origin master

web端代碼獲取數(shù)據(jù)

src/components/Home.vue

<template>
  <div class="home">
    <Header></Header>
    <Banner></Banner>
    <Footer></Footer>
  </div>
</template>
<script>
import Header from '@/components/common/Header'
import Banner from '@/components/common/Banner'
import Footer from '@/components/common/Footer'
export default {
  name: "Home",
  components: {
    Header,
    Banner,
    Footer,
  }
}
</script>
<style scoped>
</style>

src/components/common/Banner.vue

<template>
<!--    <h1>輪播圖組件</h1>-->
    <el-carousel indicator-position="outside" height="400px">
      <el-carousel-item v-for="(value,index) in banner_list" :key="index">
        <a :href="value.link" rel="external nofollow"  target="_blank">
          <img :src="value.image_url" alt="" style="width: 100%;height: 400px">
        </a>
      </el-carousel-item>
    </el-carousel>
</template>
<script>
    //router-link主要用于站內(nèi)頁(yè)面跳轉(zhuǎn)，使用的是相對(duì)路徑
    //a標(biāo)簽用于外部鏈接頁(yè)面跳轉(zhuǎn)
export default {
  name: "Banner",
  data() {
    return {
      banner_list: [],
    }
  },
  created() {
this.$axios.get(`${this.$settings.host}/home/banner/`)
      .then((res) => {
        this.banner_list = res.data;
      })
      .catch((error) => {
      })
  },
}
</script>
<style scoped>
</style>

導(dǎo)航欄的實(shí)現(xiàn)

前端導(dǎo)航欄子組件Header的代碼

lyweb/src/components/common/Header.vue

<template>
  <div class="total-header">
    <div class="header">
      <el-container>
        <el-header height="80px" class="header-cont">
          <el-row>
            <el-col class="logo" :span="3">
              <a href="/" rel="external nofollow" >
                <img src="@/assets/head-logo.svg" alt="">
              </a>
            </el-col>
            <el-col class="nav" :span="10">
              <el-row>
                <el-col :span="4" v-for="(top_nav, index) in  nav_top_list" :key="top_nav.id">
                  <router-link :to="top_nav.link" v-if="!top_nav.is_site">{{ top_nav.title }}</router-link>
                  <a :href="top_nav.link" rel="external nofollow"  target="_blank" v-else>{{ top_nav.title }}</a>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="11" class="header-right-box">
              <div class="search">
                <input type="text" id="Input" placeholder="請(qǐng)輸入想搜索的課程" style="" @blur="inputShowHandler"
                       ref="Input" v-show="!s_status">
                <ul @click="ulShowHandler" v-show="s_status" class="search-ul">
                  <span>Python</span>
                  <span>Linux</span>
                </ul>
                <p>
                  <img class="icon" src="@/assets/sousuo1.png" alt="" v-show="s_status">
                  <img class="icon" src="@/assets/sousuo2.png" alt="" v-show="!s_status">
                  <img class="new" src="@/assets/new.png" alt="">
                </p>
              </div>
              <div class="register" v-show="!token">
                <router-link to="/login">
                  <button class="signin">登錄</button>
                </router-link>
                &nbsp;&nbsp;|&nbsp;&nbsp;
                <a target="_blank"  rel="external nofollow" >
                  <router-link to="/register">
                    <button class="signup">注冊(cè)</button>
                  </router-link>
                </a>
              </div>
              <div class="shop-car" v-show="token">
                <router-link to="/cart">
                  <b>6</b>
                  <img src="@/assets/shopcart.png" alt="">
                  <span>購(gòu)物車(chē) </span>
                </router-link>
              </div>
              <div class="nav-right-box" v-show="token">
                <div class="nav-right">
                  <router-link to="/myclass">
                    <div class="nav-study">我的教室</div>
                  </router-link>
                  <div class="nav-img" @mouseover="personInfoList" @mouseout="personInfoOut">
                    <img src="@/assets/touxiang.png" alt="" style="border: 1px solid rgb(243, 243, 243);">
                    <ul class="home-my-account" v-show="list_status" @mouseover="personInfoList">
                      <li>
                        我的賬戶
                        <img src="" alt="@/assets/back.svg">
                      </li>
                      <li>
                        我的訂單
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        貝里小賣(mài)鋪
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                        我的優(yōu)惠券
                        <img src="@/assets/back.svg" alt="">
                      </li>
                      <li>
                    <span>
                      我的消息
                      <b>(26)</b>
                    </span>
                        <img src="" alt="">
                      </li>
                      <li>
                        退出
                        <img src="" alt="">
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-header>
      </el-container>
    </div>
  </div>
</template>
<script>
export default {
  name: "Header",
  data() {
    return {
      // 設(shè)置一個(gè)登錄狀態(tài)的標(biāo)記，因?yàn)榈卿涀?cè)部分在登錄之后會(huì)發(fā)生變化
      token: false,  //  false  -- not login     true -- login
      s_status: true, // 控制放大鏡顏色切換
      list_status: false, // 控制個(gè)人中心下拉菜單是否顯示
      nav_top_list: [],
      where: 0, // 記錄token的存放位置
    }
  },
  methods: {
    checklogin() {
      if (localStorage.token) {

        this.token = localStorage.token
        this.where = 1;
      } else if (sessionStorage.token) {
        this.token = sessionStorage.token
        this.where = 0;
      } else {
        return false;
      }
      // this.token = localStorage.token || sessionStorage.token;
this.$axios.post(`${this.$settings.host}/users/verify_token/`, {
        token: this.token,
      })
        .then((res) => {
          if (this.where === 0) {
            sessionStorage.token = res.data.token;
          } else {
            localStorage.token = res.data.token;
          }
        })
        .catch((error) => {
          this.$confirm('請(qǐng)重新登錄', '提示', {
            confirmButtonText: '確定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.push('/login');
          }).catch(() => {
            this.token = false;
          })
        })
    },
    ulShowHandler() {
      this.s_status = false;
      // console.log(this.$refs.Input);
      // this.$refs.Input.focus();
      this.$nextTick(() => {  //延遲回調(diào)方法，Vue中DOM更新是異步的,也就是說(shuō)讓Vue去顯示我們的input標(biāo)簽的操作是異步的，如果我們直接執(zhí)行this.$refs.Input.focus();是不行的，因?yàn)楫惒降娜ワ@示input標(biāo)簽的操作可能還沒(méi)有完成，所有我們需要等它完成之后在進(jìn)行DOM的操作，需要借助延遲回調(diào)對(duì)DOM進(jìn)行操作，這是等這次操作對(duì)應(yīng)的所有Vue中DOM的更新完成之后，在進(jìn)行nextTick的操作。
        this.$refs.Input.focus();
      })
    },
    inputShowHandler() {
      // console.log('xxxxx')
      this.s_status = true;
    },
    personInfoList() {
      this.list_status = true;
    },
    personInfoOut() {
      this.list_status = false;
    },
    get_nav_data() {
this.$axios.get(`${this.$settings.host}/home/nav/top`)
        .then((res) => {
          this.nav_top_list = res.data;
        })
        .catch((error) => {
        })
    },
  },
  created() {
    this.get_nav_data();
    this.checklogin();
  }
}
</script>
<style scoped>
.header-cont .nav .active {
  color: #f5a623;
  font-weight: 500;
  border-bottom: 2px solid #f5a623;
}
.total-header {
  min-width: 1200px;
  z-index: 100;
  box-shadow: 0 4px 8px 0 hsla(0, 0%, 59%, .1);
}
.header {
  width: 1200px;
  margin: 0 auto;
}
.header .el-header {
  padding: 0;
}
.logo {
  height: 80px;
  /*line-height: 80px;*/
  /*text-align: center;*/
  display: flex; /* css3里面的彈性布局，高度設(shè)定好之后，設(shè)置這個(gè)屬性就能讓里面的內(nèi)容居中 */
  align-items: center;
}
.nav .el-row .el-col {
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.nav a {
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  color: #4a4a4a;
  text-decoration: none;
}
.nav .el-row .el-col a:hover {
  border-bottom: 2px solid #f5a623
}
.header-cont {
  position: relative;
}
.search input {
  width: 185px;
  height: 26px;
  font-size: 14px;
  color: #4a4a4a;
  border: none;
  border-bottom: 1px solid #ffc210;
  outline: none;
}
.search ul {
  width: 185px;
  height: 26px;
  display: flex;
  align-items: center;
  padding: 0;
  padding-bottom: 3px;
  border-bottom: 1px solid hsla(0, 0%, 59%, .25);
  cursor: text;
  margin: 0;
  font-family: Helvetica Neue, Helvetica, Microsoft YaHei, Arial, sans-serif;
}
.search .search-ul, .search #Input {
  padding-top: 10px;
}
.search ul span {
  color: #545c63;
  font-size: 12px;
  padding: 3px 12px;
  background: #eeeeef;
  cursor: pointer;
  margin-right: 3px;
  border-radius: 11px;
}
.hide {
  display: none;
}
.search {
  height: auto;
  display: flex;
}
.search p {
  position: relative;
  margin-right: 20px;
  margin-left: 4px;
}
.search p .icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.search p .new {
  width: 18px;
  height: 10px;
  position: absolute;
  left: 15px;
  top: 0;
}
.register {
  height: 36px;
  display: flex;
  align-items: center;
  line-height: 36px;
}
.register .signin, .register .signup {
  font-size: 14px;
  color: #5e5e5e;
  white-space: nowrap;
}
.register button {
  outline: none;
  cursor: pointer;
  border: none;
  background: transparent;
}
.register a {
  color: #000;
  outline: none;
}
.header-right-box {
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  color: #4a4a4a;
  position: absolute;
  right: 0;
  top: 0;
}
.shop-car {
  width: 99px;
  height: 28px;
  border-radius: 15px;
  margin-right: 20px;
  background: #f7f7f7;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
}
.shop-car b {
  position: absolute;
  left: 28px;
  top: -1px;
  width: 18px;
  height: 16px;
  color: #fff;
  font-size: 12px;
  font-weight: 350;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  background: #ff0826;
  overflow: hidden;
  transform: scale(.8);
}
.shop-car img {
  width: 20px;
  height: 20px;
  margin-right: 7px;
}
.nav-right-box {
  position: relative;
}
.nav-right-box .nav-right {
  float: right;
  display: flex;
  height: 100%;
  line-height: 60px;
  position: relative;
}
.nav-right .nav-study {
  font-size: 15px;
  font-weight: 300;
  color: #5e5e5e;
  margin-right: 20px;
  cursor: pointer;
}
.nav-right .nav-study:hover {
  color: #000;
}
.nav-img img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
}
.home-my-account {
  position: absolute;
  right: 0;
  top: 60px;
  z-index: 101;
  width: 190px;
  height: auto;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 4px 8px 0 #d0d0d0;
}
li {
  list-style: none;
}
.home-my-account li {
  height: 40px;
  font-size: 14px;
  font-weight: 300;
  color: #5e5e5e;
  padding-left: 20px;
  padding-right: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
.home-my-account li img {
  cursor: pointer;
  width: 5px;
  height: 10px;
}
.home-my-account li span {
  height: 40px;
  display: flex;
  align-items: center;
}
.home-my-account li span b {
  font-weight: 300;
  margin-top: -2px;
}
</style>

導(dǎo)航欄底部組件

lyweb/src/components/common/Footer.vue

<template>
    <div class="footer">
      <div class="footer-item">
        <div class="foot-left">
        <div class="foot-content">
          <p>
            <span>關(guān)于我們</span>
            &nbsp;&nbsp;|&nbsp;&nbsp;
            <span>貝里小賣(mài)鋪</span>
          </p>
          <p>
            地址：......
          </p>
          <p>
             ..........
            <a class="copyright"  rel="external nofollow"  target="_blank" >京ICP備17072161號(hào)-1</a>
          </p>
          <p>
            <a class="report-link" target="_blank"  rel="external nofollow" >
              <img class="report-img" src="http://img.alicdn.com/tfs/TB1..50QpXXXXX7XpXXXXXXXXXX-40-40.png" style="float:left" >
              京公網(wǎng)安備 11010102002019號(hào)
            </a>
          </p>
        </div>
      </div>
        <img src="@/assets/code.png" alt="" class="code">
      </div>
    </div>
</template>
<script>
    export default {
        name: "Footer"
    }
</script>
<style scoped>
  .footer{
    display: flex;
    align-items: center;
    width: 100%;
    height: 140px;
    flex-direction: column;
    overflow: hidden;
    background: #191c25;
  }
  .footer .foot-left{
    display: flex;
    align-items: center;
  }
  .footer .foot-left .foot-content p{
    margin-bottom: 10px;
    font-size: 13px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: #d0d0d0;
  }
  .footer-item{
    width: 960px;
    height: 100%;
    justify-content: space-between;
  }
  .foot-left{
    display: flex;
    align-items: center;
    float: left;
  }
  .foot-content a{
    color: #d0d0d0;
  }
  .footer .foot-left .foot-content p:first-child span{
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    font-family: PingFangSC-Regular;
    cursor: pointer;
  }
  .foot-content .report-img{
    display: inline-block;
    height: 20px;
    margin-right: 12px;
  }
  .footer-item .code{
    width: 74px;
    height: auto;
    margin-right: 100px;
    float: right;
    padding-top: 30px;
  }
</style>

后端導(dǎo)航欄的實(shí)現(xiàn)

設(shè)計(jì)導(dǎo)航欄的model模型類(lèi)

lyapi/lyapi/apps/home/models.py

class Nav(BaseModel):
    """導(dǎo)航菜單模型"""
    POSITION_OPTION = (
        (1, "頂部導(dǎo)航"),
        (2, "腳部導(dǎo)航"),
    )
    title = models.CharField(max_length=500, verbose_name="導(dǎo)航標(biāo)題")
    link = models.CharField(max_length=500, verbose_name="導(dǎo)航鏈接")
    position = models.IntegerField(choices=POSITION_OPTION, default=1, verbose_name="導(dǎo)航位置")
    is_site = models.BooleanField(default=False, verbose_name="是否是站外地址")
    class Meta:
        db_table = 'ly_nav'
        verbose_name = '導(dǎo)航菜單'
        verbose_name_plural = verbose_name
    # 自定義方法[自定義字段或者自定義工具方法]
    def __str__(self):
        return self.title

在Xadmin中注冊(cè)導(dǎo)航欄模型類(lèi)

from home import models
import xadmin
from xadmin import views
# 導(dǎo)航欄菜單
class NavXadmin(object):
    list_display = ['id', 'title', 'link', 'position', 'is_site']
# 注冊(cè)Xadmin
xadmin.site.register(models.Nav, NavXadmin)

數(shù)據(jù)庫(kù)遷移指令

python manage.py makemigrations
python manage.py migrate

在Xadmin中添加一些導(dǎo)航欄數(shù)據(jù)

序列化器

lyapi/apps/home/serializer.py

from rest_framework import serializers
from . import models
class NavModelSeiralizer(serializers.ModelSerializer):
    class Meta:
        model = models.Nav
        fields = ['id', 'title', 'link', 'is_site']

視圖代碼

lyapi/lyapi/apps/home/views.py

from rest_framework.generics import ListAPIView
from . import models
from .serializer import BannerModelSeiralizer, NavModelSeiralizer
from lyapi.settings import contains
class NavTopView(ListAPIView):
    queryset = models.Nav.objects.filter(is_show=True, is_deleted=False, position=1).order_by('orders')[
               0:contains.NAV_TOP_LENGTH]
    serializer_class = NavModelSeiralizer

常量配置

lyapi/lyapi/settings/contains.py

# 輪播圖顯示條數(shù)
BANNER_LENGTH = 3
# 頂部導(dǎo)航欄顯示個(gè)數(shù)
NAV_TOP_LENGTH = 6
# 腳部導(dǎo)航的數(shù)量
FOOTER_NAV_LENGTH = 6

路由代碼

lyapi/lyapi/apps/home/urls.py

from django.urls import path, re_path
from django.conf import settings
from . import views
urlpatterns = [
    path(r'banner/', views.BannerView.as_view()),
    path(r'nav/top/', views.NavTopView.as_view()),
]

到此這篇關(guān)于Python輪播圖與導(dǎo)航欄功能的實(shí)現(xiàn)流程全講解的文章就介紹到這了,更多相關(guān)Python輪播圖與導(dǎo)航欄內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: