【django-vue】前端取消預設樣式 main.js配置 後端主頁模組介面 跨域問題詳解 專案自定義配置 git介紹和安裝

passion2021發表於2023-02-28
DjangoVue前端AIJS後端跨域Git

目錄

上節回顧

DRF\VUE回顧：

# DRF
	-1 前後端開發模式
    -2 HTTP協議
		-websocket協議
        -cookie，session，token
        -底層基於socket：三次握手四次揮手
        -http協議版本升級：0.9 ，1.1 2.x：多路複用
        
    -3 API介面
    -4 postman
    -5 序列化反序列化
    -6 djangorestframework
    	-ajax:非同步的xml
    	-webservice：xml，restful：json
        -web server：web伺服器 uwsgi，tomcat，nginx
        <person>
        	<name>lqz</name>
            <age>19</age>
        </person>
    -7 restful
    -8 APIView：原始碼分析
    	-dispatch---》包裝了新的request，三大認證，全域性異常
    -9 Request 物件原始碼分析：data，__getattr__
    -10 請求與響應
    	-Requets：引數
        -Response：引數
    -11 序列化類：序列化和反序列化
    	-ModelSerializer，Serializer
        -鉤子
        -重寫create，update
        -定製返回的格式：在序列化類中寫，表模型中寫
        -多表關聯
        
    -13 三大認證
    	-原始碼
        -認證類
        -許可權類
        -頻率類
        
   -14 過濾，排序，分頁

   -15 jwt 認證
    	-三段式
        -base64編碼
        -開發重點：簽發，認證
   -16 後臺管理：simpleui
   -17 rbac
		
# VUE
	-1 前端發展史
    -2 漸進式的js框架，MVVM，單頁面應用，元件化開發
    	-瀏覽器只能認識：html，css，js
        -編譯：編譯工具，vue-cli(webpack),vite
        	-import Vue from 'vue'
            -src='./js/vue'
            
   -3 插值語法 {{}}
   -4 指令
    	-v-text
        -v-html
        -v-if  v-else-if  v-else
        -v-show
        -v-on    @
        -v-bind  :
        -v-for
        -v-model
        -自定義指令
  -5  事件指令
  -6  屬性指令
  -7  class和style   ：字串，陣列，物件
  -9 條件渲染
  -10 列表渲染：v-for可以迴圈什麼
  -11 v-model input
  -12 input的事件：input，blur，change事件
  -13 按鍵修飾符
  -14 過濾案例：v-for  函式執行
  -15 表單控制：checkbox，radio
  -16 v-model進階 lazy，number，trim
  -17 生命週期鉤子：setTimeout，setInterval
  -18 與後端互動：axios
  -19 計算屬性和監聽屬性
  -20 minix
  -21 外掛
  -22 元件化開發
  -23 元件間通訊：自定義屬性，自定義事件，ref屬性
  -24 動態元件和keep-alive
  -25 vue-cli建立vue的專案
      -每個xx.vue 都有三部分
        
  -26 es6的匯入匯出語法
	export default
    export const a=10     
    import xx from '路徑'
    import {a} from '路徑'
  
  -27 專案中整合axios，elementui
  -28 vue3 
    setup函式 
    ref reactive
    生命週期：組合式api寫
    計算屬性和監聽屬性
    hooks
    toRefs
	
    script標籤上  setup  lang='ts'
    
    
    setUp(){
     const data=reactive({
         name:'lqz',
         age:19
         
     })
        
     return {
        ...toRefs(data)
    }
        
    }
    
    
   -29 vuex
   -30 vue-router
   -31 vue3 vite構建預設的狀態管理器Pinia

專案回顧：

# 1 後端封裝logger
	-把大字典複製到配置檔案
    -在utils下寫一個common_logger.py  得到logger物件
# 2 全域性異常
	-drf中，只需要寫一個函式，在配置檔案中配置一下，只要出了異常，就會走到異常處理函式
    -記錄日誌
    -統一返回格式
# 3 response二次封裝
	-自己封裝一個APIResponse
    -簡化response的使用，重寫__init__,在裡面呼叫父類的__init__完成真正的初始化
    -Response(data={},headers={},status=200)
# 4 配置user表，開放media
	-使用auth的user表做使用者表，擴寫欄位
    	-mobile，icon
    	-遷移
    -開啟media訪問，在路由中加入
    path('media/<path:path>', serve, kwargs={'document_root': settings.MEDIA_ROOT}),
# 5 前端建立配置，整合elementui，axios，jq，bootstrap，vue-cookies
	-使用vue-cli建立luffy_city
    -App.vue  HomeView.vue
    -App.vue 只有一個標籤 rout-view
    
    -整合axios：npm install -S  axios
    -整合elementui
    -整合bootsrap和jq
    -整合vue-cookies，localStorage，sessionStroage


    登入：Login.vue--->配置路由
    input  v-model繫結
    button---》axios.post('').then(res=>{
        token=res.data.token
        this.$router.push('/')
    })
    
    檢視所有汽車
   	CarList.vue---->配置路由
    crated---》axios--》陣列
    v-for迴圈   刪除
	-mock資料

今日內容

1 前端全域性樣式和js配置

# 對於 body div... 等html標籤都是有預設樣式的，所以我們要將其統一去掉

# 寫一個, 應用到專案中

# 後端介面的地址，統一寫，以後統一改

# 補充：
yarn裝上之後就沒有package-lock.json了，取而代之的是yarn-lock.json。

設定根元件的樣式：

image-20230225184727331

檢視頁面：

image-20230225184808510

發現這個樣式並沒有在整個頁面上生效，離最頂部還有一些距離，這部分沒有變為藍色。產生這個問題的原因是，html標籤是有預設樣式的。我們需要統一去掉預設樣式，所以可以寫一個global.css檔案來實現這個需求。

1.1 global.css

新建檔案assets/css/global.css：

image-20230225185432869

將如下程式碼複製到global.css檔案中：

/* 宣告全域性樣式和專案的初始化樣式 */
body, h1, h2, h3, h4, h5, h6, p, table, tr, td, ul, li, a, form, input, select, option, textarea {
    margin: 0;
    padding: 0;
    font-size: 15px;
}

a {
    text-decoration: none;
    color: #333;
}

ul {
    list-style: none;
}

table {
    border-collapse: collapse; /* 合併邊框 */
}

複製完之後還需要讓這些樣式生效，此時就需要引入main.js：

# 第二步：全域性生效 main.js中配置
// 使用全域性css樣式，只需要匯入就會生效
import '@/assets/css/global.css'

只要在main.js引入這個樣式，就會自動的應用到所有的頁面上。

以elementUI舉例：

image-20230225185836126

由於瀏覽器只能識別原生的html程式碼，比如meta、link標籤。
我們在這裡使用import匯入樣式，實際上Vue-cli最後會把樣式編譯成link、meta這些標籤，並放置在一個個頁面上。而且link標籤的路徑都是配好的，只要你在main.js匯入css檔案，Vue-cli就會幫你幹這個事。

1.2 settings.js

# 向後端傳送請求，請求地址測試階段 127.0.0.1:8000  --->後期上線，地址要變，如果在元件中吧地址寫死，以後，要改，每個都要改
# 寫一個全域性js，js中有個url地址，以後所有元件中傳送請求時，都是用這個url地址

# 匯入匯出

# 使用步驟：
# 第一步：新建
	assets-js----settings.js
    export default {
        BASE_URL:'http://127.0.0.1:8000/api/v1'
    }
    

# 第二步：在main.js中引入
    // 引入settings.js,把settings物件放入到vue的原型中
    import settings from "@/assets/js/settings";
    Vue.prototype.$settings = settings
    // 以後在任意元件中只需要  this.$settings.BASE_URL
# 第三步：在任意元件中使用
	this.$settings.BASE_URL
    this.$axios.get(this.$settings.BASE_URL+'/users').then(res=>{
        
    })

前端向後端傳送請求，比如有一個測試地址如下：axios.get('http://127.0.0.1:8000/api/v1/movies/')

在頁面中這個地址是寫死的，後續上線需要使用另一個地址，這時再一個一個頁面的更換地址很麻煩。所以需要抽取一個公共的地址，存放在一個js檔案中，以後需要就使用。

建立settings.js檔案：

image-20230225211348385

填寫如下程式碼：


export default {
    BASE_URL:'http://127.0.0.1:8000/'
}

1.3 main.js

在main.js將settings.js匯入，加入Vue原型，以後可以透過this.$settings使用這個BASE_URL。

//5 去掉所有標籤預設樣式
import '@/assets/css/global.css'

// 6 全域性配置
import settings from "@/assets/js/settings";
Vue.prototype.$settings=settings

使用全域性js的示例：

image-20230225211753553

2 後端主頁模組介面

# 根據原型圖分析出來
    1. 首頁輪播圖介面  ---> 一段時間之後會變化
    2. 首頁推薦課程介面  ---> 比如：拿出銷量最高的課程
    
# 補充： https://zhuanlan.zhihu.com/p/444741981
	-軟體開發模式：
    	-瀑布模式：bbs專案
        	對接需求 --> 設計架構、資料庫 --> 分任務開發 --> 開發完成再測試 --> 改bug --> 上線 
        -敏捷開發：路飛,管理軟體，
	-bbs專案：設計資料庫---》全設計完了---》開始寫專案
    -路飛：寫一塊設計一塊資料庫（根據需求變更設計表）

#1 建立一個app，寫輪播圖表
	-python ../../manage.py startapp home
    
#2 編寫一個BaseMosel
class BaseModel(models.Model):
    created_time = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
    updated_time = models.DateTimeField(auto_now=True, verbose_name='最後更新時間')
    is_delete = models.BooleanField(default=False, verbose_name='是否刪除')  # 軟刪除，不真正的刪除資料，而使用欄位控制
    is_show = models.BooleanField(default=True, verbose_name='是否上架')
    orders = models.IntegerField(verbose_name='優先順序')

    class Meta:
        # 如果表遷移，這個表就會生成，我們們不能再資料庫生成這個表，就需要加這句
        abstract = True  # 虛擬表，只用來做繼承，不在資料庫生成
        
        
#3 編寫banner表
class Banner(BaseModel):
    # 圖片地址，圖片名，圖片介紹，link地址
    title = models.CharField(max_length=16, unique=True, verbose_name='名稱')
    image = models.ImageField(upload_to='banner', verbose_name='圖片')
    link = models.CharField(max_length=64, verbose_name='跳轉連結')  # /course/
    info = models.TextField(verbose_name='詳情')  # 也可以用詳情表

    class Meta:
        db_table = 'luffy_banner'
        verbose_name_plural = '輪播圖表'

    def __str__(self):
        return self.title
    
# 4 遷移兩條命令

三種開發模式

image-20221107111329477

瀑布模式：
需求變化之後導致已經開發好的功能被棄用，新需求需要重新設計資料庫。

敏捷開發：
首頁板塊開發 --> 首頁板塊測試 --> 訂單板塊開發 --> 訂單開發測試 --> ...
敏捷開發管理軟體？
敏捷開發裡的一個sprint（週期）是多少？
其實就是開發一個小功能、測試完成、到上線的時間是多久。
大約這個時間是一週，差不多一個小功能開發結束了。每週都會開會，進行程式碼評審。（站立式會議--阿里）

DevOps：
開發首頁功能 ---> 測試首頁功能 --> 運維上線首頁 --> 開發訂單板塊 --> 測試訂單功能 --> 運維上線訂單功能

注意：這裡的上線，都是上線到測試環境。直接可以將產品給老闆、顧客看。

敏捷開發管理工具：scrum
image-20230227150405642

模型父類BaseModel

# 輪播圖欄位
輪播圖是否刪除 、輪播圖是否展示、輪播圖上傳時間

# 課程欄位
課程是否刪除 、課程是否展示、課程上傳時間

# 發現這兩個表中有相同的欄位  ---> 抽象出來成一個公共的模型類BaseModel ---> 需要使用這些欄位就繼承 

# 擴充套件
BaseModel不僅可以寫欄位，還可以寫方法。BaseModel的子類產生的物件，都可以使用這些方法。

# 語法： 
def to_dict(self):
    在此函式內透過反射將物件中的資料獲取，組織成字典
    
優點：無需使用序列化類，可以將所有欄位都序列化出來
缺點：不能控制欄位，每個欄位都會序列化

# 示例：
    def to_dict(self):
        return {k: v for k, v in self.__dict__.items() if not k.startswith('_')}

檢視BaseModel:

image-20230226143233333

auto_now_add：建立時間。該欄位錄入該課程第一次建立的時間，之後不會改變。
auto_now: 最後更新時間。每次修改該課程，該欄位都會記錄當前時間。

軟刪除：不真正的刪除資料，而是使用欄位控制前端是否顯示某些資料。實際上資料還是存在資料庫。

如果表遷移，預設情況下，上述模型基類，也會生成一個表，這不是我們想要的。所以需要新增如下程式碼，使得遷移時不會生成表：

image-20230226144056658

擴充套件：AbstractUser表也是一個抽象表。

image-20230226144852086

abstract = True：讓該類不再資料庫生成表，只用於做繼承。

將我們寫的模型基類的剪貼程式碼放到utils目錄下：

image-20230226145047228

輪播圖模型類

# 擴充套件欄位
1.更新人欄位
2.建立人欄位  --> 只有建立人才能刪除這條欄位

檢視輪播圖模型類：

image-20230226145411111

link地址：點選圖片會跳轉到Link地址。我們用資料庫一個欄位來儲存這個路徑。

模型表的描述資訊:

image-20230226145542238

程式碼

# 建立表步驟
	-第一步：在utils下新建 common_model.py
    	from django.db import models
        class BaseModel(models.Model):
            created_time = models.DateTimeField(auto_now_add=True, verbose_name='建立時間')
            updated_time = models.DateTimeField(auto_now=True, verbose_name='最後更新時間')
            is_delete = models.BooleanField(default=False, verbose_name='是否刪除')
            is_show = models.BooleanField(default=True, verbose_name='是否上架')
            orders = models.IntegerField(verbose_name='優先順序')

            class Meta:
                abstract = True  # 只用來繼承，不用來在資料庫建立
                
    -第二步：在home 的app的models.py中寫入
        class Banner(BaseModel):
        # 哪些欄位：真正圖片地址，標題，跳轉連結，圖片介紹       是否刪除（軟刪除），是否顯示，優先順序，建立時間,更新事件：公共欄位
            title = models.CharField(max_length=16, unique=True, verbose_name='名稱')
            image = models.ImageField(upload_to='banner', verbose_name='圖片')
            link = models.CharField(max_length=64, verbose_name='跳轉連結')
            info = models.TextField(verbose_name='詳情')

            class Meta:
                db_table = 'luffy_banner'
                verbose_name_plural = '輪播圖表'

            def __str__(self):
                return self.title
    -第三步：遷移
    	python manage.py makemigrations
		python manage.py migrate

輪播圖介面編寫

# 1 分路由---》home的app中新建urls.py
from . import views
from rest_framework.routers import SimpleRouter
router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')
urlpatterns = [
]
urlpatterns += router.urls


# 2 檢視函式中
from rest_framework.viewsets import GenericViewSet
# 獲取所有
from utils.views import CommonListModelMixin
from rest_framework.response import Response

class BannerView(GenericViewSet, CommonListModelMixin):
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = BannerSerializer
    
 # 3 utils下的view.py 中
from rest_framework.mixins import ListModelMixin
from utils.response import APIResponse
class CommonListModelMixin(ListModelMixin):
    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        return APIResponse(result=res.data)
    
    
# 4 序列化類 serializer.py
class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = Banner
        fields = ['title', 'image', 'link']
        
        
        
# 5 錄入資料 simpleui
	-下載，註冊app，國際化
    -建立超級使用者
    -錄入資料

檢視類

image-20230226151725804

查詢出is_delete、is_show都為True的資料，並將其按照orders欄位排序，排序好之後，再進行序列化。

序列化類

# Form類和ModelForm的區別
類似於serializers和ModelSerializers。
Model表示和表做關聯。

image-20230226152228580

先想好要給前端哪些資料：標題、（圖片、link連結）、簡介

路由分發

配置主路由：

# 語法
path('路徑',include('app名字.urls'))

# 示例
path('api/vi/home',include('home.urls'))

# postman請求示例：
127.0.0.1:8080/api/v1/home/xxx
127.0.0.1:8080/api/v1/home/分路由

配置分路由，使用自動生成路由：

image-20230226153129157

此時可以訪問路由：127.0.0.1:8080/api/v1/home/banner/

自定義返回格式

由於我們需要自定義返回格式，新增上code\msg，所以需要重寫list方法：

方法一：使用drf Response:

image-20230226153854799

檢視list方法的返回值，發現是一個Response物件，而這個物件裡包含著經過序列化類處理後的資料：

image-20230226154222574

方法二：使用自己封裝的 APIResponse:

image-20230226154313806

二次封裝ListModelMixin

由於所有檢視類都需要定製返回格式，所以我們可以二次封裝一個ListModelMixin，使用APIresponse定製返回格式。以後使用我們封裝的CommonListModelMixin即可。如果不進行封裝，我們需要每個檢視類都重寫List方法。

在utils目錄下新建views.py:

image-20230226154713405

繼承ListModelMixin，並重寫：

image-20230226155102879

直接匯入使用;

image-20230226155621250

錄入資料

國際化配置:

LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'  # 中國都用shanghai

使用django admin後臺新增資料：

image-20230226171214091

3 跨域問題詳解，前後端打通

# 前後端互動會存在跨域問題

# 跨域問題出現的原因？
	-同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構建在同源策略基礎之上的，瀏覽器只是針對同源策略的一種實現
請求的url地址,必須與瀏覽器上的url地址處於同域上,也就是域名,埠,協議相同.
比如:我在本地上的域名是127.0.0.1:8000,請求另外一個域名：127.0.0.1:8001一段資料
瀏覽器上就會報錯，這個就是同源策略的保護,如果瀏覽器對javascript沒有同源策略的保護,那麼一些重要的機密網站將會很危險

# 解決跨域問題
	-1 前端代理
    -2 nginx代理
    -3 cors解決跨域
    
# cors：跨域資源共享，後端技術，核心就是在響應頭中加入資料，允許瀏覽器接受資料
	CORS需要瀏覽器和伺服器同時支援，IE瀏覽器不能低於IE10
    
    
# CORS基本流程
    瀏覽器將CORS請求分成兩類：
        -簡單請求（simple request）
        -非簡單請求（not-so-simple request）
    
# 簡單請求：
    瀏覽器發出CORS簡單請求，只需要在頭資訊之中增加一個Access-Control-Allow-Origin欄位
    
# 非簡單請求
    瀏覽器發出CORS非簡單請求，會在正式通訊之前，先傳送一個options請求，稱為”預檢”請求。
    瀏覽器先詢問伺服器，當前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭資訊欄位。只有得到肯定答覆，瀏覽器才會發出正式的XMLHttpRequest請求，否則就報錯。（也就是如果允許，再發真正的請求）
 
    
# 什麼是簡單請求，什麼是非簡單請求
	-滿足下面兩種情況，就是簡單請求
    	-1 請求方法是以下三種方法之一：
            HEAD
            GET
            POST
        -2 HTTP的請求頭資訊不超出以下幾種欄位：
            Accept
            Accept-Language
            Content-Language
            Last-Event-ID
            Content-Type：只限於三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
            
     舉例：POST 傳送json ---> 非簡單請求  
            
 # 解決跨域，使用cors技術，在響應中寫東西：如果自己寫，需要寫個中介軟體，每個請求都會走，在process_response中寫入下面的程式碼即可
def test(request):
    print(request.method)
    # 如果自己寫，需要寫個中介軟體，每個請求都會走，在process_response中寫入下面的程式碼即可
    # 解決簡單請求
    res=HttpResponse('ok')
    res['Access-Control-Allow-Origin']='*'
    # 解決非簡單請求
    if request.method=='OPTIONS':
        res['Access-Control-Allow-Headers'] = 'Content-Type'
    return res

# 第三方模組，解決了這個問題，只需要整合進來，使用即可---》djagno
	-第一步：安裝django-cors-headers
    -第二步：註冊app
    -第三步：中介軟體加入
    -第四步：配置檔案配置

前端沒法主動重定向，所以向後端傳送請求時，一定要確定好加不加/:

image-20230226171715630

同源策略

訪問一個網址時，只要不指定埠（不寫埠），預設訪問的就是80埠。

image-20221107151124144

如上圖80埠跑著我們的前端服務，從80埠向後端8080埠傳送請求，請求可以正常到達後端、後端也會正常的響應，返回響應資料。但是資料到了瀏覽器，瀏覽器會進行檢查，發現這個前端服務是在80埠，但是返回的資料是來自8080埠，這樣就會觸發同源策略，禁止接受這個資料。

同源策略不允許向不同的域發請求，只能是向同域發請求。
同域：也就是域名，埠，協議都相同。

也就是說只有寫網站，做前後端分離，才會涉及到這個問題。移動端app不會有這種問題，因為app不是瀏覽器，沒有同源策略。

DNS域名解析

# 域名解析查詢順序
本地的host檔案

檢視本地的host檔案：

image-20230228120934057

沒有就建立一個

配置host檔案：

image-20230228120959163

允許所有訪問：

image-20230228121038446

域名解析：

image-20230228121109647

跨域解決方案

載入cdn是否跨域？跨！ --> 使用JSONP實現跨域

nginx反向代理：

image-20230228151940600

nginx是裝在伺服器上的一個軟體。前端訪問80埠，從nginx獲取靜態頁面。前端再向nginx80埠傳送ajax請求但是路由改了（比如：127.0.0.1/api/v1）。nginx監聽80埠，發現路由是127.0.0.1/api/v1，而不是127.0.0.1，就會將請求轉發到django後端的8080埠

node代理伺服器：（不常用）image-20230228121527970

cors跨域資源共享 - 後端解決跨域

# 簡單請求
後端響應頭配置Access-Control-Allow-Origin欄位
前端直接傳送

# 非簡單請求
後端配置響應頭
前端傳送options請求進行預檢
前端傳送真正的請求

前端傳送簡單請求： GET
image-20230226174944761

前端傳送非簡單請求：POST + json

image-20230226175109458

axios post請求會預設傳送json格式的資料。

簡單請求跨域處理：

image-20230226175309338

非簡單請求跨域處理：

image-20230226175515446

這只是解決了攜帶content-type這個請求頭的問題，如果攜帶token還會出現跨域報錯。

第三方跨域中介軟體(最終解決方案)

正常處理跨域問題，需要寫一箇中介軟體，每個請求都會經過中介軟體的 process_response方法，然後就可以在 process_response方法裡給響應頭加東西。

最終解決，使用第三方模組django-cors-headers。這個模組實際就是幫我們寫了一箇中介軟體。但是這個模組只能解決django的跨域，使用其他框架也需要解決跨域，所以會自己寫中介軟體為好。

使用django-cors-headers為什麼需要在配置檔案中配置？
因為這樣可以在全域性生效，我們在響應頭加東西，只能在當前檢視函式生效。

配置說明：

CORS_DRIGIN_ALLOW_ALL = True  # 允許所有的域向此後端傳送簡單請求
CORS_ALLOW_METHODS = {
    'DELETE',
    'GET',
    ...,
    ...,
}  # 允許這些請求方式
CORS_ALLOW_HEADERS = {
    'authorization',
    'content-type',
    ...,
}  # 允許這些請求頭

檢視中介軟體：

如果CORS_DRIGIN_ALLOW_ALL = True，在響應頭新增Access-Control-Allow-Origin="*"：

image-20230226180946720

獲取配置檔案中寫到的請求方式、請求頭，新增到響應中：image-20230226181025693

自定義中介軟體

views.py：

def test(request):
    import json
    obj=HttpResponse(json.dumps({'name':'lqz'}))
    # obj['Access-Control-Allow-Origin']='*'
    obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
    return obj

放到中介軟體處理複雜和簡單請求：

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="Content-Type"
        response["Access-Control-Allow-Origin"] = "http://localhost:8080"
        return response

4 自定義配置

# 有些公共配置資訊，放到單獨一個配置檔案中

# 新建一個common_settings.py
    # 輪播圖顯示的條數
    BANNER_COUNT = 3

# 在dev.py 中匯入
from settings.common_settings import *

# 查詢所有輪播圖介面中
queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]

前端使用get方法給後端傳送請求時，後端會返回所有的輪播圖，但有時候我們只想要其中的幾張，如果滿足這個需求？

對queryset進行切片：

image-20230226195435769

但是這樣寫死了，以後想修改很麻煩。
可以在dev.py配置檔案新增自定義配置：BANNER_COUNT = 2

image-20230226195747065

但是這樣改，只能在開發環境中生效，測試、上線環境也需要這些配置，所以我們可在settings資料夾內新建一個common_settings.py檔案，將這個配置放在common_settings.py檔案內。然後在dev.py中匯入common_settings.py：

image-20230226200348411

在測試上線環境中，也將common_settings.py中的配置進行匯入即可。(這裡使用星號匯入了所有自定義配置)

5 git介紹和安裝

# 後端，寫了一個介面，完成了一個功能，在公司裡，功能完成，要把程式碼提交到遠端倉庫

# 公司裡協同開發,版本管理需要使用軟體：svn，git

# 協同開發的問題：
	1.程式碼合併
	2.版本升級 版本管理
   		需要有一臺機器自動做程式碼合併、版本管理 只要提交了程式碼就有記錄 透過記錄可以回退到某個版本。
    
# 下載：安裝在作業系統上
	-https://git-scm.com/downloads
    -一路下一步
    -任意位置點右鍵，如果有兩個東西（【git gui here】  【git bash here】），表示安裝完成
image-20221107155607292

這兩個必須勾選上：

image-20230226222639710

5.1 pycharm中配置git

# github , gitee開源軟體，
# 下載成zip，使用pycharm開啟
# 使用pycharm直接呼叫git將程式碼拉下來，開啟---》配置pycharm
	-settings中搜尋git，把git安裝可執行檔案配置好
    
# 以後下載開源軟體：vcs--->get from version contral--->填入路徑---》clone下來即可

在pycharm settings中搜尋git:

image-20230226223145346

找到git的安裝路徑中的git可執行檔案：Git\bin\git.exe

image-20230226223247917

找到之後點選Test，即可完成設定。

現在使用pycharm從gitee拉程式碼下來：

image-20230226223416850

在pycharm中點選VCS:

image-20230226223451076

將地址複製到如下：

image-20230226223545533

點選clone，pycharm就會從gitee將程式碼拉下來，並且直接幫你開啟這個專案。也就不需要下載zip安裝包再使用pycharm開啟，省了一步。

5.1 svn，git ，github，gitee，gitlab

# svn：版本管理軟體，它是集中式的版本管理，必須有個svn的服務端，服務端如果過來，svn就用不了了
# git :版本管理軟體，它是一個分散式的版本管理，每個客戶端都可以作為服務端，即便服務端掛了，也能進行版本管理（本地管理）
# github：全球最大的開源遠端git倉庫，全球最大的開源倉庫，git遠端倉庫
	-如果我要寫開源軟體，本地裝git，把程式碼提交到github
    -python監控公司程式碼有沒有被傳到github
# gitee：中國最大的開源軟體倉庫   【私有倉庫，花錢買空間】
# gitlab：公司內部的遠端倉庫，運維搭建維護

擴充套件

前後端分離

主站一個前端、後臺管理一個前端，都訪問一個後端。

主站一個前端，後端多個：

image-20230228113754909

抽獎功能直接新開一個後端服務，不影響原來的服務。（主專案用django，新開功能用flask）

練習


# 搜尋：wsgi，uWSGI，uwsgi
https://www.liuqingzheng.top/article/1/05-CGI,FastCGI,WSGI,uWSGI,uwsgi%E4%B8%80%E6%96%87%E6%90%9E%E6%87%82/

# 前端的後臺管理模板
https://gitee.com/liuqingzheng/vue_admin

相關文章