DRF+Vue項目（一）——項目架構

永久配置安裝源

為了加速模塊的下載

1、文件管理器文件路徑地址欄敲：%APPDATA% 回車，快速進入 C:\Users\電腦用戶\AppData\Roaming 文件夾中
2、新建 pip 文件夾並在文件夾中新建 pip.ini 配置文件
3、新增 pip.ini 配置文件內容

配置內容

[global]
index-url = http://pypi.douban.com/simple
[install]
use-mirrors =true
mirrors =http://pypi.douban.com/simple/
trusted-host =pypi.douban.com

虛擬環境的搭建

優點

1、使不同應用開發環境相互獨立
2、環境升級不影響其他應用，也不會影響全局的python環境
3、防止出現包管理混亂及包版本沖突

安裝virtualenv           windows下（下面都是針對windows下）

# 建議使用pip3安裝到python3環境下
pip3 install virtualenv
pip3 install virtualenvwrapper-win

配置環境變量

控制面板 => 系統和安全 => 系統 => 高級系統設置 => 環境變量 => 系統變量 => 點擊新建 => 填入變量名與值
變量名：WORKON_HOME 變量值：自定義存放虛擬環境的絕對路徑
eg: WORKON_HOME: D:\Virtualenvs

同步配置信息：
去向Python3的安裝目錄 => Scripts文件夾 => virtualenvwrapper.bat => 雙擊

使用virtualenv

# 在終端工作的命令

# 1、創建虛擬環境到配置的WORKON_HOME路徑下
# 選取默認Python環境創建虛擬環境：
    -- mkvirtualenv 虛擬環境名稱
# 基於某Python環境創建虛擬環境：
    -- mkvirtualenv -p python2.7 虛擬環境名稱
    -- mkvirtualenv -p python3.6 虛擬環境名稱

# 2、查看已有的虛擬環境
    -- workon

# 3、使用某個虛擬環境
    -- workon 虛擬環境名稱
    
# 4、進入|退出 該虛擬環境的Python環境
    -- python | exit()

# 5、為虛擬環境安裝模塊
    -- pip或pip3 install 模塊名

# 6、退出當前虛擬環境
    -- deactivate

# 7、刪除虛擬環境(刪除當前虛擬環境要先退出)
    -- rmvirtualenv 虛擬環境名稱

后台Django項目創建

環境

為luffy項目創建一個虛擬環境
>: mkvirtualenv luffy


workon luffy,進入虛擬環境，按照基礎環境依賴安裝模塊
>: pip install django==2.0.7
>: pip install djangorestframework
>: pip install pymysql

創建項目   在luffy文件夾中創建一個luffyapi   django項目

前提：新建luffy文件夾
>: cd 建立的luffy文件夾
>: django-admin startproject luffyapi   #生成一個luffyapi django項目

開發：用pycharm打開項目，並選擇提前備好的虛擬環境

重構項目目錄  （app設置在小luffyapi下面，原來的settings.py文件刪除，使用settings文件夾，里面包含開發環境和上線環境的文件配置）

├── luffyapi
    ├── logs/                # 項目運行時/開發時日志目錄 - 文件夾
    ├── manage.py            # 腳本文件
    ├── luffyapi/              # 項目主應用，開發時的代碼保存 - 包
        ├── apps/              # 開發者的代碼保存目錄，以模塊[子應用]為目錄保存 - 包
        ├── libs/              # 第三方類庫的保存目錄[第三方組件、模塊] - 包
        ├── settings/          # 配置目錄 - 包
            ├── dev.py       # 項目開發時的本地配置
            └── prod.py      # 項目上線時的運行配置
        ├── urls.py            # 總路由
        └── utils/             # 多個模塊[子應用]的公共函數類庫[自己開發的組件]
    └── scripts/               # 保存項目運營時的腳本文件 - 文件夾

 配置開發環境

1.修改 wsgi.py 與 manage.py 兩個文件：  在開發階段使用dev，上線之后使用prod
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')

2.將settings.py刪除或改名，內容拷貝到settings/dev.py中

3.修改dev.py文件內容
LANGUAGE_CODE = 'zh-hans'     #設置中文
TIME_ZONE = 'Asia/Shanghai'
USE_TZ = False

4.修改啟動配置：見插圖

5.在任何一個__init__.py文件中測試默認配置文件是否是dev.py文件
from django.conf import settings
print(settings)

 第5步運行結果如果報錯，對應的py文件也需要設置一下DJANGO_SETTINGS_MODULE=luffyapi.settings.dev

配置日志

在settings.dev配置文件中加入

LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
        },
        'simple': {
            'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
        },
    },
    'filters': {
        'require_debug_true': {
            '()': 'django.utils.log.RequireDebugTrue',
        },
    },
    'handlers': {
        'console': {
            'level': 'DEBUG',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
            'formatter': 'simple'
        },
        'file': {
            # 實際開發建議使用WARNING
            'level': 'INFO',
            'class': 'logging.handlers.RotatingFileHandler',
            # 日志位置,日志文件名,日志保存目錄必須手動創建，注：這里的文件路徑要注意BASE_DIR代表的是小luffyapi
            'filename': os.path.join(os.path.dirname(BASE_DIR), "logs", "luffy.log"),
            # 日志文件的最大值,這里我們設置300M
            'maxBytes': 300 * 1024 * 1024,
            # 日志文件的數量,設置最大日志數量為10
            'backupCount': 10,
            # 日志格式:詳細格式
            'formatter': 'verbose',
            # 文件內容編碼
            'encoding': 'utf-8'
        },
    },
    # 日志對象
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'propagate': True, # 是否讓日志信息繼續冒泡給其他的日志處理系統
        },
    }
}

環境變量設置  這步設置非常重要，沒設置好后面項目不能使用(******)

# 環境變量操作：小luffyapiBASE_DIR與apps文件夾都要添加到環境變量
import sys
sys.path.insert(0, BASE_DIR)
APPS_DIR = os.path.join(BASE_DIR, 'apps')
sys.path.insert(1, APPS_DIR)

 在寫項目直接導入utils文件夾也不"錯誤提示"

 封裝logger

dev.py

# 真實項目上線后，日志文件打印級別不能過低，因為一次日志記錄就是一次文件io操作
LOGGING = {
    'version': 1,
    'disable_existing_loggers': False,
    'formatters': {
        'verbose': {
            'format': '%(levelname)s %(asctime)s %(module)s %(lineno)d %(message)s'
        },
        'simple': {
            'format': '%(levelname)s %(module)s %(lineno)d %(message)s'
        },
    },
    'filters': {
        'require_debug_true': {
            '()': 'django.utils.log.RequireDebugTrue',
        },
    },
    'handlers': {
        'console': {
            # 實際開發建議使用WARNING
            'level': 'DEBUG',
            'filters': ['require_debug_true'],
            'class': 'logging.StreamHandler',
            'formatter': 'simple'
        },
        'file': {
            # 實際開發建議使用ERROR
            'level': 'INFO',
            'class': 'logging.handlers.RotatingFileHandler',
            # 日志位置,日志文件名,日志保存目錄必須手動創建，注：這里的文件路徑要注意BASE_DIR代表的是小luffyapi
            'filename': os.path.join(os.path.dirname(BASE_DIR), "logs", "luffy.log"),
            # 日志文件的最大值,這里我們設置300M
            'maxBytes': 300 * 1024 * 1024,
            # 日志文件的數量,設置最大日志數量為10
            'backupCount': 10,
            # 日志格式:詳細格式
            'formatter': 'verbose',
            # 文件內容編碼
            'encoding': 'utf-8'
        },
    },
    # 日志對象
    'loggers': {
        'django': {
            'handlers': ['console', 'file'],
            'propagate': True, # 是否讓日志信息繼續冒泡給其他的日志處理系統
        },
    }
}

utils/logging.py

import logging
logger = logging.getLogger('django')

封裝項目異常處理

utils/exception.py   (自定義異常處理，在views視圖可以使用)

from rest_framework.views import exception_handler as drf_exception_handler
from rest_framework.views import Response
from rest_framework import status
from utils.logging import logger
def exception_handler(exc, context):
    response = drf_exception_handler(exc, context)
    if response is None:
        logger.error('%s - %s - %s' % (context['view'], context['request'].method, exc))
        return Response({
            'detail': '服務器錯誤'
        }, status=status.HTTP_500_INTERNAL_SERVER_ERROR, exception=True)
    return response

二次封裝Response模塊

utils/response.py      (自定義Response模塊，在views視圖導入APIResponse)

from rest_framework.response import Response

class APIResponse(Response):
    def __init__(self, data_status=0, data_msg='ok', results=None, http_status=None, headers=None, exception=False, **kwargs):
        data = {
            'status': data_status,
            'msg': data_msg,
        }
        if results is not None:
            data['results'] = results
        data.update(kwargs)

        super().__init__(data=data, status=http_status, headers=headers, exception=exception)

數據庫配置（******）

創建數據庫  （下面是在cmd中使用命令行方式創建，當然也可以使用navicat軟件直接創建數據庫luffy）

1.管理員連接數據庫
>: mysql -uroot -proot

2.創建數據庫
>: create database luffy default charset=utf8;

3.查看用戶
>: select user,host,password from mysql.user;

為指定數據庫配置指定賬戶  （如果不指定用戶，就不用進行下面操作）

設置權限賬號密碼
# 授權賬號命令：grant 權限(create, update) on 庫.表 to '賬號'@'host' identified by '密碼'

1.配置任意ip都可以連入數據庫的賬戶
>: grant all privileges on luffy.* to 'luffy'@'%' identified by 'Luffy123?';

2.由於數據庫版本的問題，可能本地還連接不上，就給本地用戶單獨配置
>: grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';

3.刷新一下權限
>: flush privileges;

只能操作luffy數據庫的賬戶
賬號：luffy
密碼：Luffy123?

在任意某個__init__.py文件下加入下面代碼

import pymysql
pymysql.install_as_MySQLdb()

dev.py中配置數據庫連接信息

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'luffy',
        'USER':'root',
        'PASSWORD':'root'
    }
}

 

Django2.x一些版本pymysql兼容問題（可能會出現的問題）

Django不采用2.0.7版本很可能出現以下問題，需要修改源代碼

 user應用User表

創建user模塊

前提：在 luffy 虛擬環境下

1.終端從項目根目錄進入apps目錄 >: cd luffyapi & cd apps

2.創建user應用
>: python ../../manage.py startapp user

 創建User表對應的model:user/model.py

from django.db import models
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
    mobile = models.CharField(max_length=11, unique=True)
    icon = models.ImageField(upload_to='icon', default='icon/default.png')

    class Meta:
        db_table = 'luffy_user'  #設置表名
        verbose_name = '用戶表'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.username

注冊user模塊，配置User表：dev.py     (必須先要把apps文件夾添加到環境變量里面)

INSTALLED_APPS = [
    # ...
    'user',   #應用名
]

# 自定義User表
AUTH_USER_MODEL = 'user.User'

配置media

media配置：dev.py    (配置圖片存放的地址)

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

media目錄配置    保存上傳圖片的文件夾需要先在media下創建，然后上傳的圖片會自動保存在創建的文件夾中

├── luffyapi
    └──    luffyapi/
           └──    media/      
            └──    icon 
                └── default.png

配置路由

主路由：luffyapi/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
urlpatterns = [
    path('admin/', admin.site.urls),

    path('user/', include('user.urls')),

    re_path('^media/(?P<path>.*)', serve, {'document_root': settings.MEDIA_ROOT})
]

子路由：user/urls.py

from django.urls import path, re_path
urlpatterns = [

]

數據庫遷移：在最外層目錄輸入：python manage.py makemigrations

 然后輸入：python manage.py migrate

前台搭建

搭建vue環境  （cmd中運行，如果已經搭建好了就不用再搭建了，直接從創建項目開始）

1.傻瓜式安裝node: 
官網下載：https://nodejs.org/zh-cn/   （需要下載就下載，下載過了就不用執行這句話了）

2.安裝cnpm: 
>: npm install -g cnpm --registry=https://registry.npm.taobao.org

3.安裝vue最新腳手架: 
>: cnpm install -g @vue/cli

注：如果2、3步報錯，清除緩存后重新走2、3步
>: npm cache clean --force

創建項目

前提：新建luffy文件夾   （在創建django項目的時候已經創建好了luffy文件夾）
>: cd 建立的luffy文件夾
>: vue create luffycity

 創建成功

 重構項目目錄

├── luffycity
    ├── public/                      # 項目共有資源
        ├── favicon.ico                # 站點圖標
        └── index.html                # 主頁
    ├── src/                          # 項目主應用，開發時的代碼保存
        ├── assets/                  # 前台靜態資源總目錄
            ├── css/                # 自定義css樣式
                └── global.css        # 自定義全局樣式
            ├── js/                    # 自定義js樣式
                └── settings.js        # 自定義配置文件
            └── img/                # 前台圖片資源
        ├── components/                # 小組件目錄
        ├── views/                  # 頁面組件目錄
        ├── App.vue                    # 根路由
        ├── main.js                    # 入口腳本文件
        ├── router            
            └── index.js            # 路由腳本文件
        store                
            └── index.js            # 倉庫腳本文件
    ├── vue.config.js                # 項目配置文件
    └── *.*                            # 其他配置文件

文件修訂：目錄中非配置文件的多余文件可以移除

App.vue   (多余的全部刪除，只留這五行就行)

<template>
    <div id="app">
        <router-view/>
    </div>
</template>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter);

const routes = [
    {
        path: '/',
        name: 'home',
        component: Home
    },
];

const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
});

export default router

Home.vue

<template>
    <div class="home">
    </div>
</template>

<script>
    export default {
        name: 'home',
        components: {
        },
    }
</script>

全局配置：全局樣式、配置文件

全局樣式：assets/css/global.css

/* 聲明全局樣式和項目的初始化樣式 */
body, h1, h2, h3, h4, 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; /* 合並邊框 */
}

assets/js/settings.js

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

src/main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false;

// 配置全局樣式
import '@/assets/css/global.css'

// 配置全局自定義設置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;

// axios配置：cnpm install axios
import axios from 'axios'
Vue.prototype.$axios = axios;

// cookies配置：cnpm install vue-cookies
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

// element-ui配置：cnpm install element-ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

// bootstrap+jq配置：cnpm install jquery、cnpm install bootstrap@3
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

前台配置

axios前后台交互

安裝axios：在前端項目目錄下的終端

cnpm install axios

配置：main.js

import axios from 'axios'
Vue.prototype.$axios = axios;

cookies操作

安裝vue-cookies:前端項目目錄下的終端

cnpm install vue-cookies

配置:main.js

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

element_ui頁面組件框架

安裝element-ui:前端項目目錄下的終端

cnpm install element-ui

配置:main.js

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

bootstrap和jq的配置

安裝bootstrap和jq:

cnpm install bootstrap@3
cnpm install jquery

配置bootstrap：main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

配置jquery:vue.config.js  (在根目錄下創建)

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

前端主頁

圖片准備        放在img文件夾中

頁頭組件：components/Header.vue  （小組件頭部信息）

<template>
    <div class="header-box">
        <div class="header">
            <div class="content">
                <div class="logo full-left">
                    <router-link to="/"><img @click="jump('/')" src="@/assets/img/logo.svg" alt=""></router-link>
                </div>
                <ul class="nav full-left">
                    <li><span @click="jump('/course')" :class="this_nav=='/course'?'this':''">免費課</span></li>
                    <li><span @click="jump('/light-course')" :class="this_nav=='/light-course'?'this':''">輕課</span></li>
                    <li><span>學位課</span></li>
                    <li><span>題庫</span></li>
                    <li><span>老男孩教育</span></li>
                </ul>
                <div class="login-bar full-right">
                    <div class="shop-cart full-left">
                        <img src="@/assets/img/cart.svg" alt="">
                        <span><router-link to="/cart">購物車</router-link></span>
                    </div>
                    <div class="login-box full-left">
                        <span>登錄</span>
                        &nbsp;|&nbsp;
                        <span>注冊</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                this_nav: "",
            }
        },
        created() {
            this.this_nav = localStorage.this_nav;
        },
        methods: {
            jump(location) {
                localStorage.this_nav = location;
                // vue-router除了提供router-link標簽跳轉頁面以外，還提供了js跳轉的方式
                this.$router.push(location);
            }
        }
    }
</script>

<style scoped>
    .header-box {
        height: 80px;
    }

    .header {
        width: 100%;
        height: 80px;
        box-shadow: 0 0.5px 0.5px 0 #c9c9c9;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        margin: auto;
        z-index: 99;
        background: #fff;
    }

    .header .content {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
    }

    .header .content .logo {
        height: 80px;
        line-height: 80px;
        margin-right: 50px;
        cursor: pointer;
    }

    .header .content .logo img {
        vertical-align: middle;
    }

    .header .nav li {
        float: left;
        height: 80px;
        line-height: 80px;
        margin-right: 30px;
        font-size: 16px;
        color: #4a4a4a;
        cursor: pointer;
    }

    .header .nav li span {
        padding-bottom: 16px;
        padding-left: 5px;
        padding-right: 5px;
    }

    .header .nav li span a {
        display: inline-block;
    }

    .header .nav li .this {
        color: #4a4a4a;
        border-bottom: 4px solid #ffc210;
    }

    .header .nav li:hover span {
        color: #000;
    }

    .header .login-bar {
        height: 80px;
    }

    .header .login-bar .shop-cart {
        margin-right: 20px;
        border-radius: 17px;
        background: #f7f7f7;
        cursor: pointer;
        font-size: 14px;
        height: 28px;
        width: 88px;
        margin-top: 30px;
        line-height: 32px;
        text-align: center;
    }

    .header .login-bar .shop-cart:hover {
        background: #f0f0f0;
    }

    .header .login-bar .shop-cart img {
        width: 15px;
        margin-right: 4px;
        margin-left: 6px;
    }

    .header .login-bar .shop-cart span {
        margin-right: 6px;
    }

    .header .login-bar .login-box {
        margin-top: 33px;
    }

    .header .login-bar .login-box span {
        color: #4a4a4a;
        cursor: pointer;
    }

    .header .login-bar .login-box span:hover {
        color: #000000;
    }

    .full-left {
        float: left !important;
    }

    .full-right {
        float: right !important;
    }

    .el-carousel__arrow {
        width: 120px;
        height: 120px;
    }

    .el-checkbox__input.is-checked .el-checkbox__inner,
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background: #ffc210;
        border-color: #ffc210;
        border: none;
    }

    .el-checkbox__inner:hover {
        border-color: #9b9b9b;
    }

    .el-checkbox__inner {
        width: 16px;
        height: 16px;
        border: 1px solid #9b9b9b;
        border-radius: 0;
    }

    .el-checkbox__inner::after {
        height: 9px;
        width: 5px;
    }
</style>

輪播圖組件:components/Banner.vue

<template>
    <el-carousel height="520px" :interval="3000" arrow="always">
        <el-carousel-item>
            <img src="@/assets/img/banner1.png" alt="">
        </el-carousel-item>
        <el-carousel-item>
            <img src="@/assets/img/banner2.png" alt="">
        </el-carousel-item>
        <el-carousel-item>
            <img src="@/assets/img/banner3.png" alt="">
        </el-carousel-item>
    </el-carousel>
</template>
<script>
    export default {
        name: "Banner",
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .el-carousel__item img {
        text-align: center;
        height: 520px;
        margin: 0 auto;
        display: block;
    }
</style>

頁腳組件:components/Footer.vue

<template>
    <div class="footer">
        <ul>
            <li>關於我們</li>
            <li>聯系我們</li>
            <li>商務合作</li>
            <li>幫助中心</li>
            <li>意見反饋</li>
            <li>新手指南</li>
        </ul>
        <p>Copyright © luffycity.com版權所有 | 京ICP備17072161號-1</p>
    </div>
</template>

<script>
    export default {
        name: "Footer"
    }
</script>

<style scoped>
    .footer {
        width: 100%;
        height: 128px;
        background: #25292e;
        color: #fff;
    }

    .footer ul {
        margin: 0 auto 16px;
        padding-top: 38px;
        width: 810px;
    }

    .footer ul li {
        float: left;
        width: 112px;
        margin: 0 10px;
        text-align: center;
        font-size: 14px;
    }

    .footer ul::after {
        content: "";
        display: block;
        clear: both;
    }

    .footer p {
        text-align: center;
        font-size: 12px;
    }
</style>

主頁組件:views/Home.vue

<template>
    <div class="home">
　　　　　#小組件頁面導入
        <Header />
        <Banner />
        <Footer />
    </div>
</template>

<script>
　　#導入小組件
    import Header from '@/components/Header'
    import Banner from '@/components/Banner'
    import Footer from '@/components/Footer'

    export default {
        name: 'home',
        components: {
　　　　　　　#小組件注冊
            Header,
            Banner,
            Footer
        },
    }
</script>

后台主頁模塊設計

創建home應用  （在apps文件夾下面執行python ../../manage.py startapp home）

前提：在 luffy 虛擬環境下

1.終端從項目根目錄進入apps目錄
>: cd luffyapi & cd apps

2.創建app
>: python ../../manage.py startapp home

路由分發

主路由：luffyapi/urls.py

from django.urls import path, re_path, include
urlpatterns = [
    # ...
    path('user/', include('home.urls')),
    # ...
]

子路由：home/urls.py

from django.urls import path, re_path
urlpatterns = [

]

Banner數據表model設計

utils/models.py   (創建一個基類，所有的model都可以繼承這三個字段)

from django.db import models

class BaseModel(models.Model):
    orders = models.IntegerField(verbose_name='顯示順序')
    is_show = models.BooleanField(verbose_name="是否上架", default=False)
    is_delete = models.BooleanField(verbose_name="邏輯刪除", default=False)

    class Meta:
        abstract = True

home/models.py

from django.db import models
from utils.model import BaseModel

class Banner(BaseModel):
    image = models.ImageField(upload_to='banner', verbose_name='輪播圖', null=True, blank=True)  #需要在media文件夾下創建banner文件夾,會把上傳圖片自動放入該文件夾中
    name = models.CharField(max_length=150, verbose_name='輪播圖名稱')
    note = models.CharField(max_length=150, verbose_name='備注信息')
    link = models.CharField(max_length=150, verbose_name='輪播圖廣告地址')

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

    def __str__(self):
        return self.name

注冊模塊：dev.py

INSTALLED_APPS = [
    # ...
    'rest_framework',
    'home',
]

數據庫遷移：在大luffyapi路徑下的終端

>: python manage.py makemigrations
>: python manage.py migrate

設計Banner數據接口

home/serializers.py

from rest_framework.serializers import ModelSerializer
from . import models

class BannerModelSerializer(ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ['name', 'note', 'image', 'link']

home/views.py

from rest_framework.generics import ListAPIView
from utils.response import APIResponse
from . import models,serializers

class BannerListAPIView(ListAPIView):
    queryset = models.Banner.objects.filter(is_delete=False,is_show=True).order_by('-orders')
    serializer_class = serializers.BannerModelSerializer

home/urls.py

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

在postman中測試接口：

http://127.0.0.1:8000/home/banners/

分離的前后台交互

后台處理跨域問題

安裝插件

>: pip install django-cors-headers

插件參考地址：https://github.com/ottoyiu/django-cors-headers/

項目配置：dev.py

# 注冊app
INSTALLED_APPS = [
    ...
    'corsheaders'
]

# 添加中間件
MIDDLEWARE = [
    ...
    'corsheaders.middleware.CorsMiddleware'
]

# 允許跨域源
CORS_ORIGIN_ALLOW_ALL = True

前台請求Banner數據

修訂Banner.vue

<template>
    <el-carousel height="520px" :interval="3000" arrow="always">
　　　　　#渲染后台數據
        <el-carousel-item :v-for="banner in banner_list" :key="banner.name">
            <a :href="banner_link">
                <img :src="banner.img" alt="" :title="banner.note">
            </a>
        </el-carousel-item>

    </el-carousel>
</template>
<script>
    export default {
        name: "Banner",
        data(){ return {
                banner_list:[]
            }
        },
        //鈎子函數，當頁面運行結束時執行
        created(){ //請求后台數據，類似於ajax
            this.$axios({
                url:this.$settings.base_url+'/home/banners/',
                methods:'get',
            }).then(response => {   //function ()  可以用response =>
                this.banner_list = response.data;  //返回給前台的數據
            }).catch(errors=>{
                window.console.log(errors)  //捕獲異常 }) }
    }
</script>

<style scoped>
    .el-carousel__item h3 {
        color: #475669;
        font-size: 18px;
        opacity: 0.75;
        line-height: 300px;
        margin: 0;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n+1) {
        background-color: #d3dce6;
    }
    .el-carousel__item img {
        text-align: center;
        height: 520px;
        margin: 0 auto;
        display: block;
    }
</style>

使用admin添加數據

在后台應用的admin.py

from django.contrib import admin

from . import models

admin.site.register(models.Banner)

創建超級用戶登錄賬號 

 頁面訪問admin頁面，添加數據