day76:luffy:項目前端環境搭建&輪播圖的實現

1.項目前端環境搭建

1.創建項目目錄

cd 項目目錄
vue init webpack lufei_pc

2.前端初始化全局變數和全局方法

1.在src目錄下創建settings.js站點開發配置文件

// 前端連接後端介面的url
export default {
  Host:"http:/www.lyapi.com:8001",
}

2.在main.js引入setting

import settings from "./settings"
Vue.prototype.$settings = settings;  // 將settings中的內容作為vue的屬性，以後就不用每次都導包了

3./static/css/reset.css

把App.vue的style標籤的css程式碼放到static外部目錄下引用過來

main.js

import "../static/css/reset.css";

/static/css/reset.css

body{
    margin: 0;
    padding: 0;
  }
  ul{
    list-style: none;
    padding: 0;
    margin: 0;
  }
  li{
    list-style: none;
  }
  /*.el-header{*/
  /*  width: 1200px;*/
  /*}*/
  input,select,textarea{
    border: none;
    outline: none;
  }
  a{
    text-decoration: none;
    color: #4a4a4a;
  }

3.跨域CORS

1.為前端和後端配置假域名

1.我們現在為前端和後端分別設置兩個不同的域名

位置	域名
前端	www.lycity.com
後端	`www.lyapi.com`

2.編輯/etc/hosts文件，可以設置本地域名

sudo vim /etc/hosts

3.在文件中增加兩條資訊

127.0.0.1   localhost
127.0.0.1   www.lyapi.com
127.0.0.1   www.lycity.com

4.通過瀏覽器訪問drf項目,會出現以下錯誤資訊

可以通過settings/dev.py的ALLOWED_HOSTS,設置允許訪問

# 設置哪些客戶端可以通過地址訪問到後端
ALLOWED_HOSTS = [
    'www.lyapi.com'
    'www.lycity.com', # 客戶端網址也要，將來客戶端要訪問到服務端的 
]

現在，前端與後端分處不同的域名，我們需要為後端添加跨域訪問的支援

否則前端無法使用axios無法請求後端提供的api數據，我們使用CORS來解決後端對跨域訪問的支援。

2.使用django-cors-headers擴展

1.安裝

pip install django-cors-headers

2.添加應用

INSTALLED_APPS = (
    ...
    'corsheaders',
    ...
)

3.中間件設置【必須寫在第一個位置】

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 放在中間件的最上面，就是給響應頭加上了一個響應頭跨域
    ...
]

4.需要添加白名單，確定一下哪些客戶端可以跨域

# CORS組的配置資訊
CORS_ORIGIN_WHITELIST = (
    #'www.luffycity.cn:8080', #如果這樣寫不行的話，就加上協議(//www.luffycity.cn:8080，因為不同的corsheaders版本可能有不同的要求)
    '//www.luffycity.cn:8080'
)
CORS_ALLOW_CREDENTIALS = False  # 是否允許ajax跨域請求時攜帶cookie，False表示不用，我們後面也用不到cookie，所以關掉它就可以了，以防有人通過cookie來搞我們的網站

3.axios配置

完成了上面的步驟，我們就可以通過後端提供數據給前端使用ajax訪問了。

前端使用 axios就可以訪問到後端提供給的數據介面，但是如果要附帶cookie資訊，前端還要設置一下。

前端引入axios插件並配置允許axios發送cookie資訊[axios本身也不允許ajax發送cookie到後端]

1.安裝axios

npm i axios -S --registry //registry.npm.taobao.org

2.在main.js中引用 axios插件

import axios from 'axios'; // 從node_modules目錄中導入包
// 客戶端配置是否允許ajax發送請求時附帶cookie，false表示不允許
axios.defaults.withCredentials = false;

Vue.prototype.$axios = axios; // 把對象掛載vue中

注意:如果你拷貝前端vue-cli項目到咱們指定目錄下，如果運行起來有問題，一些不知名的錯誤，那麼就刪除node_modules文件件，然後在項目目錄下執行npm install 這個指令，重新按照package.json文件夾中的包進行node_modules裡面包的下載

2.輪播圖功能的實現

1.安裝依賴模組

pip install pillow

2.上傳文件相關配置

1.dev.py

# 訪問靜態文件的url地址前綴
STATIC_URL = '/static/'
# 設置django的靜態文件目錄
STATICFILES_DIRS = [
    os.path.join(BASE_DIR,"static")
]

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

2.總路由urls.py

from django.urls import re_path
from django.conf import settings
from django.views.static import serve

urlpatterns = [
      ...
    re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
]

3.註冊home子應用

因為當前功能是drf的第一個功能，所以我們先創建一個子應用home，創建在luffy/apps目錄下

註冊home子應用，因為子應用的位置發生了改變，所以為了原來子應用的註冊寫法，所以新增一個導包路徑

# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))

# 1.新增一個系統導包路徑
import sys
# sys.path使我們可以直接import導入時使用到的路徑，所以我們直接將我們的apps路徑加到默認搜索路徑裡面去，那麼django就能直接找到apps下面的應用了
sys.path.insert(0,os.path.join(BASE_DIR,"apps"))



INSTALLED_APPS = [
    # 2.注意，加上drf框架的註冊    
    'rest_framework',
    
    # 3.子應用
    'home',

]

4.創建輪播圖的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="廣告標題")
    link = models.CharField(max_length=500, verbose_name="廣告鏈接")
    # upload_to 設置上傳文件的保存子目錄,將來上傳來的文件會存到我們的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="是否顯示") #將來輪播圖肯定會更新，到底顯示哪些
    orders = models.IntegerField(default=1, verbose_name="排序")
    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

執行資料庫遷移指令

python manage.py makemigrations
python manage.py migrate

5.創建Banner的序列化器

apps/home/serializers.py

from rest_framework import serializers
from .models import Banner
class BannerModelSerializer(serializers.ModelSerializer):
    """輪播廣告的序列化器"""
    # 模型序列化器欄位聲明
    class Meta:
        model = Banner
        fields = ["image_url","link"]

6.創建Banner的視圖類

apps/home/views.py

from django.shortcuts import render

# Create your views here.
from rest_framework.generics import ListAPIView
from .models import Banner
from .serializers import BannerModelSerializer
from luffyapi.settings import constants
class BannerListAPIView(ListAPIView): # 自動導包
    queryset = Banner.objects.filter(is_show=True, is_deleted=False).order_by("-orders","-id")[:constants.BANNER_LENGTH] #沒有必要獲取所有圖片數據，因為有些可能是刪除了的、或者不顯示的
    # 切片獲取數據的時候，我們可以將切片長度設置成配置項
    serializer_class = BannerModelSerializer

在settings配置文件夾中創建一個constants.py配置文件，將來裡面存放我們所有的一些常量資訊配置，比如上面的輪播圖數據切片長度

settings/constant.py

BANNER_LENGTH = 10

7.配置Banner的路由

apps/home/urls.py

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

把home的路由urls.py註冊到總路由（根目錄下的urls.py）

from django.contrib import admin
from django.urls import path,re_path,include
from django.conf import settings
from django.views.static import serve

urlpatterns = [
    path('admin/', admin.site.urls),
    re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
    path('home/', include("home.urls") ),
]

8.配置Xadmin

1.Xadmin的安裝

pip install //codeload.github.com/sshwsfc/xadmin/zip/django2 -i //pypi.douban.com/simple/

2.配置文件註冊Xadmin應用

INSTALLED_APPS = [
    ...
    'xadmin',
    'crispy_forms',
    'reversion',
    ...
]

# 修改使用中文介面
LANGUAGE_CODE = 'zh-Hans'

# 修改時區
TIME_ZONE = 'Asia/Shanghai'

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

python manage.py makemigrations
python manage.py migrate

3.在總路由中添加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

4.給Xadmin配置基本的站點資訊

import xadmin
from xadmin import views

class BaseSetting(object):
    """xadmin的基本配置"""
    enable_themes = True  # 開啟主題切換功能
    use_bootswatch = True

xadmin.site.register(views.BaseAdminView, BaseSetting)

class GlobalSettings(object):
    """xadmin的全局配置"""
    site_title = "路飛學城"  # 設置站點標題
    site_footer = "路飛學城有限公司"  # 設置站點的頁腳
    menu_style = "accordion"  # 設置菜單摺疊

xadmin.site.register(views.CommAdminView, GlobalSettings)

9.註冊輪播圖模型到Xadmin中

apps/home/adminx.py

在當前子應用中創建adminx.py，添加如下程式碼

# 輪播圖
from .models import Banner
class BannerModelAdmin(object):
    list_display=["title","orders","is_show"]
    
xadmin.site.register(Banner, BannerModelAdmin)

1.修改後端Xadmin中子應用名稱

apps/home/apps.py

class HomeConfig(AppConfig):
    name = 'home'
    verbose_name = '我的首頁'

apps/home/__init__.py

default_app_config = "home.apps.HomeConfig"

2.給輪播圖添加測試數據

經過上面的操作,我們就完成了輪播圖的API介面,接下來,可以考慮提交一個程式碼版本.

git add .
git commit -m "服務端實現輪播圖的API介面"
git push origin master

10.客戶端程式碼獲取數據

<template>
<!--    <h1>輪播圖組件</h1>-->
  <el-carousel indicator-position="outside" height="400px">
    <el-carousel-item v-for="(value,index) in banner_list" :key="value.id">

      <a :href="value.link" style="display: inline-block;height: 400px;width: 100%">
        <img :src="value.image_url" alt="" width="100%" height="400px">
      </a>
<!--      <img src="@/assets/banner/banner1.png" alt="">-->
    </el-carousel-item>
  </el-carousel>
</template>

<script>
    //router-link主要用於站內頁面跳轉，使用的是相對路徑
    //a標籤用於外部鏈接頁面跳轉

    export default {
        name: "Banner",
      data(){
          return {
            banner_list:[]
          }
      },
      methods:{
          get_banner_data(){
            this.$axios.get(`${this.$settings.Host}/home/banner/`,)
              .then((res)=>{
                // console.log(res);
                this.banner_list = res.data
              })
              .catch((error)=>{
                console.log(error);
              })


          }
      },
      created() {
          this.get_banner_data();
      }
    }
</script>

<style scoped>

</style>

效果如下圖所示

Tags: PythonS31-筆記 Python全棧31期-筆記