1. 首頁

1.1 輪播圖

admin站點配置支持圖片上傳

pip install Pillow

　　默認情況下，Django會將上傳的圖片保存在本地服務器上，需要配置保存的路徑。我們可以將上傳的文件保存在靜態文件statics目錄中，添加如下上傳保存目錄信息

配置代碼：

# 訪問靜態文件的url地址前綴 STATIC_URL = '/static/'
# 項目中存儲上傳文件的根目錄[暫時配置]，注意，static目錄需要手動創建否則上傳文件時報錯 MEDIA_ROOT=os.path.join(BASE_DIR,"luffy/static")
# 設置django的靜態文件目錄 STATICFILES_DIRS = [os.path.join(BASE_DIR,"luffy/static") ]

?

把Home子應用注冊到settings的INSTALLED_APPS中，并在models.py里面創建模型。

INSTALLED_APPS = [...'luffy.apps.home', ]

使用圖片字段ImageFiled，字段選項使用upload_to可以設置保存圖片的子目錄，數據模型代碼：

class BannerInfo(models.Model):"""輪播圖"""# upload_to 存儲子目錄，真實存放地址會使用配置中的MADIE_ROOT+upload_toimage = models.ImageField(upload_to='banner', verbose_name='輪播圖', null=True)name = models.CharField(max_length=150, verbose_name='輪播圖名稱')link = models.CharField(max_length=150, verbose_name='輪播圖廣告地址')orders = models.IntegerField(verbose_name='顯示順序')is_show=models.BooleanField(verbose_name="是否上架",default=False)is_delete=models.BooleanField(verbose_name="邏輯刪除",default=False)class Meta:db_table = 'ly_banner'verbose_name = '輪播圖'verbose_name_plural = verbose_namedef __str__(self):return self.name

模型數據遷移：

python manage.py makemigrations python manage.py migrate

在xadmin站點添加輪播圖數據

通過如下命令安裝xadmin的最新版

在配置文件中注冊如下應用

INSTALLED_APPS = [...'rest_framework','xadmin','crispy_forms','reversion',... ]# 修改使用中文界面 LANGUAGE_CODE = 'zh-Hans'# 修改時區 TIME_ZONE = 'Asia/Shanghai'

　　xadmin有建立自己的數據庫模型類，需要進行數據庫遷移

python manage.py makemigrations python manage.py migrate

　　

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

import xadmin xadmin.autodiscover()# version模塊自動注冊需要版本控制的 Model from xadmin.plugins import xversion xversion.register_models()urlpatterns = [path(r'xadmin/', xadmin.site.urls) ]

創建超級用戶

python manage.py createsuperuser

　　

創建輪播圖的模型管理類

import xadmin from xadmin import viewsclass BaseSetting(object):"""xadmin的基本配置"""enable_themes = True # 開啟主題切換功能use_bootswatch = Truexadmin.site.register(views.BaseAdminView, BaseSetting)class GlobalSettings(object):"""xadmin的全局配置"""site_title = "路飛學城" # 設置站點標題site_footer = "路飛學城有限公司" # 設置站點的頁腳menu_style = "accordion" # 設置菜單折疊 xadmin.site.register(views.CommAdminView, GlobalSettings)# 輪播圖 from home.models import bannerInfo class BannerInfoModelAdmin(object):list_display=["name","orders","is_show"] xadmin.site.register(bannerInfo, BannerInfoModelAdmin)

路由代碼:

子應用路由:

from django.urls import path,re_path from . import views urlpatterns = [ path(r"banner/",views.BannerInfoAPIView.as_view()), ]

　　

總路由:

urlpatterns = [...path('home/', include("home.urls")),# include 的值必須是 模塊名.urls 格式,字符串中間只能出現一個圓點 ]

　

視圖代碼：　

from django.db.models import Q from rest_framework.views import APIView from rest_framework.response import Response from .models import bannerInfo class BannerInfoAPIView(APIView):"""輪播圖列表"""def get(self,request):# 獲取數據banners = bannerInfo.objects.filter(Q(is_show=True) & Q(is_delete=False)).order_by("-orders")# 調整banners的images字段# 序列化data = []for item in banners:data.append({# 拼接圖片的url地址"image": "/static/" + item.image.url,"link":item.link,"orders":item.orders,})return Response(data)前端代碼：<template><div class="banner"><el-carousel trigger="click" height="506px"><el-carousel-item v-for="item in banner_list"><a :href="item.link"><img :src="item.image"></a></el-carousel-item></el-carousel></div> </template><script>export default {name:"Banner",data(){return {banner_list:[],};},created: function(){// 獲取輪播圖this.$axios.get("http://api.luffycity.cn:8000/home/banner/").then(res => {this.banner_list = res.data}).catch(error => {console.log(error);});}} </script><style scoped> .banner img{width: 100%; } </style> View Code

?

2. 顯示登陸頁面

前端引入登陸頁面的組件代碼并補充路由地址

Login.vue，代碼：

<template><div class="login box"><img src="https://www.luffycity.com/static/img/Loginbg.3377d0c.jpg" alt=""><div class="login"><div class="login-title"><img src="https://www.luffycity.com/static/img/Logotitle.1ba5466.png" alt=""><p>幫助有志向的年輕人通過努力學習獲得體面的工作和生活!</p></div><div class="login_box"><div class="title"><span @click="login_type=1" :class="login_type==1?'current':''">密碼登錄</span><span @click="login_type=2" :class="login_type==2?'current':''">短信登錄</span></div><div class="inp" :class="login_type==1?'show':''"><input v-model = 'username' type="text" placeholder="用戶名 / 手機號碼" class="user"><input v-model = 'password' type="password" name="" class="pwd" placeholder="密碼"><div id="geetest1" title="驗證碼"></div><div class="rember"><p><input type="checkbox" class="no" name="a"></input><span>記住密碼</span></p><p>忘記密碼</p></div><button class="login_btn">登錄</button><p class="go_login" >沒有賬號 <span>立即注冊</span></p></div><div class="inp" :class="login_type==2?'show':''"><input v-model = 'username' type="text" placeholder="手機號碼" class="user"><input v-model = 'password' type="password" name="" class="pwd" placeholder="短信驗證碼"><div class="rember"><p><input type="checkbox" class="no" name="a"></input><span>記住密碼</span></p><p>忘記密碼</p></div><button class="login_btn">登錄</button><p class="go_login" >沒有賬號 <span>立即注冊</span></p></div></div></div></div> </template><script>export default{name:"Login",data(){return {login_type:2,username:"",password:"",}},components:{}} </script><style scoped> .box{width: 100%;position: relative;} .box img{width: 100%; } .box .login {position: absolute;width: 500px;height: 400px;top: 50%;left: 50%;margin-left: -250px;margin-top: -300px; } .login .login-title{width: 100%;text-align: center; } .login-title img{width: 190px;height: auto; } .login-title p{font-family: PingFangSC-Regular;font-size: 18px;color: #fff;letter-spacing: .29px;padding-top: 10px;padding-bottom: 50px; } .login_box{width: 400px;height: auto;background: #fff;box-shadow: 0 2px 4px 0 rgba(0,0,0,.5);border-radius: 4px;margin: 0 auto;padding-bottom: 40px; } .login_box .title{font-size: 20px;color: #9b9b9b;letter-spacing: .32px;border-bottom: 1px solid #e6e6e6;display: flex;justify-content: space-around;padding: 50px 60px 0 60px;margin-bottom: 20px;cursor: pointer; } .login_box .title .current{color: #4a4a4a;border-bottom: 2px solid #84cc39; }.inp{width: 350px;margin: 0 auto;display: none; } .show{display: block; } .inp input{border: 0;outline: 0;width: 100%;height: 45px;border-radius: 4px;border: 1px solid #d9d9d9;text-indent: 20px;font-size: 14px;background: #fff !important; } .inp input.user{margin-bottom: 16px; } .inp .rember{display: flex;justify-content: space-between;align-items: center;position: relative;margin-top: 10px; } .inp .rember p:first-of-type{font-size: 12px;color: #4a4a4a;letter-spacing: .19px;margin-left: 22px;display: -ms-flexbox;display: flex;-ms-flex-align: center;align-items: center;/*position: relative;*/ } .inp .rember p:nth-of-type(2){font-size: 14px;color: #9b9b9b;letter-spacing: .19px;cursor: pointer; }.inp .rember input{outline: 0;width: 30px;height: 45px;border-radius: 4px;border: 1px solid #d9d9d9;text-indent: 20px;font-size: 14px;background: #fff !important; }.inp .rember p span{display: inline-block;font-size: 12px;width: 100px;/*position: absolute;*/ /*left: 20px;*/} #geetest{margin-top: 20px; } .login_btn{width: 100%;height: 45px;background: #84cc39;border-radius: 5px;font-size: 16px;color: #fff;letter-spacing: .26px;margin-top: 30px; } .inp .go_login{text-align: center;font-size: 14px;color: #9b9b9b;letter-spacing: .26px;padding-top: 20px; } .inp .go_login span{color: #84cc39;cursor: pointer; } </style> View Code

在routes/index.js中，添加路由

import Vue from "vue" import Router from "vue-router"// 導入需要注冊路由的組件 import Home from "../components/Home" import Login from "../components/Login" Vue.use(Router);// 配置路由列表 export default new Router({mode:"history",routes:[// 路由列表{name:"Home",path: "/home",component:Home,},{name:"Home",path: "/",component:Home,},{name:"Login",path: "/login",component:Login,}] }) View Code

?

?

?

?

修復關于前端無法正常顯示圖片的問題

1.在settings中設置 MEDIA_URL:

# 項目中存儲上傳文件的根目錄[暫時配置]，注意，static目錄需要手動創建否則上傳文件時報錯 MEDIA_ROOT=os.path.join(BASE_DIR,"luffy/static")# 設置訪問上傳文件的url地址前綴 MEDIA_URL = "/media/"

　　此時?MEDIA_URL = "/media/" 中meida 代表著MEDIA_ROOT中代表的路徑

2.在視圖函數中提供完整的域名地址

from django.db.models import Q from rest_framework.views import APIView from rest_framework.response import Responsefrom luffy.apps.home.models import BannerInfoHOST = "http://api.luffycity.cn:8000" class BannerInfoAPIView(APIView):"""輪播圖列表"""def get(self,request):# 獲取數據banners = BannerInfo.objects.filter(Q(is_show=True) & Q(is_delete=False)).order_by("-orders")# 調整banners的images字段# 序列化data = []for item in banners:data.append({# 拼接圖片的url地址"image": HOST + item.image.url,"link":item.link,"orders":item.orders,})return Response(data) View Code

3.在主urls 設置路由

from django.conf import settings from django.views.static import serveurlpatterns = [re_path(r'^media/(?P<path>.*)$', serve, {"document_root": settings.MEDIA_ROOT}),

　　

轉載于:https://www.cnblogs.com/Mixtea/p/10595814.html

總結

以上是生活随笔為你收集整理的Luffy之Xadmin以及首页搭建(轮播图,导航)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。