路飛項目

時間  2019-11-10
標籤 項目 简体版
原文   原文鏈接

---恢復內容開始---css

luffy項目：基於vue與drf先後臺分離項目html

一、業務邏輯：登陸註冊 - 主頁（基礎信息展現） - 課程頁（複雜信息展現）- 課程訂單生產與支付 - 上線訂單生成前端

二、實際項目開發的技術點：
    git版本控制
    第三方短信認證
    接口緩存 - redis數據庫
    celery異步任務，接口緩存異步同步數據
    支付寶支付
    真實服務器項目上線vue

三、前臺：頁面現成的、先後臺的數據交互代碼、element-ui、jq、bootstrap、原生node

 

pip安裝源    不是永久配置python

一、採用國內源，加速下載模塊的速度mysql

二、經常使用pip源：
    -- 豆瓣：https://pypi.douban.com/simple
    -- 阿里：https://mirrors.aliyun.com/pypi/simple
三、加速安裝的命令：
    -- >: pip install -i https://pypi.douban.com/simple 模塊名jquery

永久配置安裝源webpack

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

配置文件內容

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

 

虛擬環境的搭建

優勢

　　一、使不一樣應用開發環境相互獨立
　　二、環境升級不影響其餘應用，也不會影響全局的python環境
　　三、防止出現包管理混亂及包版本衝突

windows安裝：建議使用pip3安裝到python3環境下

　　pip3 install virtualenv
　　pip3 install virtualenvwrapper-win

配置虛擬環境管理器工做目錄

　　控制面板 => 系統和安全 => 系統 => 高級系統設置 => 環境變量 => 系統變量 => 點擊新建 => 填入變量名與值

變量名：WORKON_HOME  變量值：自定義存放虛擬環境的絕對路徑

WORKON_HOME   :   D:\Virtualenvs

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

使用

　　在終端工做的命令

　　 一、建立虛擬環境到配置的WORKON_HOME路徑下，選取默認Python環境建立虛擬環境：-- mkvirtualenv 虛擬環境名稱

　　基於某Python環境建立虛擬環境：-- mkvirtualenv -p python2.7 虛擬環境名稱　　-- mkvirtualenv -p python3.6 虛擬環境名稱

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

　　三、使用某個虛擬環境　　-- workon 虛擬環境名稱

　　四、進入|退出 該虛擬環境的Python環境　-- python | exit()

　　五、爲虛擬環境安裝模塊　-- pip或pip3 install 模塊名

　　 六、退出當前虛擬環境　　-- deactivate

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

pycharm使用

　　新建項目

添加環境

使用環境

後臺：Django項目建立

　　爲luffy項目建立一個虛擬環境　　mkvirtualenv luffy

按照基礎環境依賴

　　>: pip install django==2.0.7
　　>: pip install djangorestframework
　　>: pip install pymysql

建立項目

　　在目標目錄新建luffy文件夾， cd 創建的luffy文件夾， django-admin startproject luffyapi

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

重構項目目錄

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

 配置開發環境

1.修改 wsgi.py 與 manage.py 兩個文件：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)

配置日誌   settings.py文件夾下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, # 是否讓日誌信息繼續冒泡給其餘的日誌處理系統
        },
    }
}

 

環境變量

dev.py中添加環境變量

　　環境變量操做：小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文件夾也不''錯誤提示''

 

 

 

 

 

utils/logging.py

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

封裝項目異常處理

utils/exception.py

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

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)

 

luffy數據庫配置

1.管理員鏈接數據庫　　mysql -uroot -p123

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;

Django 2.x 一些版本pymysql兼容問題

Django不採用2.0.7版本極可能出現如下問題，須要修改源代碼

 

user模塊User表

建立user模塊

　　在 luffy 虛擬環境下，1.終端從項目根目錄進入apps目錄
　　>: cd luffyapi & cd apps

　　2.建立app
　　>: python ../../manage.py startapp user

建立User表對應的model：user/models.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

INSTALLED_APPS = [
    # ...
    'user',
]

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

# 配置media
MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, '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 = [

]

 

前臺   vue環境

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終端安裝失敗時，能夠清空 npm緩存 再重複執行失敗的步驟
　　npm cache clean --force

Vue項目建立

1) 進入存放項目的目錄

　　d:  切換D盤
　　cd D:\python_workspace\day66\代碼

2) 建立項目

　　>: vue create 項目名
　　vue create v-proj

3) 項目初始化

　　選擇   Manually select features
　　默認選擇的有Babel   Linter / Formatter   在添加Router 和 Vuex
　　選擇YES
　　選擇第一個，直接進入
　　直接第一個進入
　　選擇第一個In dedicated config files，第一個本身處理
　　選擇NOT

加載環境
　　選擇改變端口號的地方，而後點擊左邊加號，選擇npm，而後在右邊Name中填寫v-proj,

在pycharm中，選擇settings文件夾，選擇Plugins,在右側搜索框中搜索VUE,下載

pycharm配置並啓動vue項目，　　用pycharm打開vue項目， 添加配置npm啓動

終端啓動vue       cd D:\python_workspace\day66\代碼\v-proj ，　　cnpm run serve

vue項目目錄結構分析

├── 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                # 項目配置文件
    └── *.*                            # 其餘配置文件

vue組件(.vue文件)

　　1) template：有且只有一個根標籤

　　2) script：必須將組件對象導出 export default {}

　　3) style: style標籤明確scoped屬性，表明該樣式只在組件內部起做用(樣式的組件化)

VUE

替換public文件夾中的favicon.ico圖片，刪除src.assets文件夾中的logo.png圖片，將路由router文件夾下的index.js中的路徑刪除，刪除views文件夾下的About.vue文件，修改views文件夾下的Home.vue文件

<template>
  <div class="home">
    <h1>主頁</h1>
  </div>
</template>

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

  }
}
</script>

將App.vue修改成

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

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

src/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; /* 合併邊框 */
}

src/assets/js/settings.js

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

main.j

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

// 配置全局自定義設置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在全部須要與後臺交互的組件中：this.$settings.base_url + '再拼接具體後臺路由'

 

luffy前臺配置

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

　　axios先後臺交互:　　cnpm install axios

　　cookies操做:　　cnpm install vue-cookies

　　element-ui頁面組件框架:　　cnpm install element-ui

　　jq+bootstrap配置：　　cnpm install jquery   和   cnpm install bootstrap@3

配置：main.js

//axios 配置
import axios from 'axios'
Vue.prototype.$axios = axios;
//cookies配置
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;
//element-ui配置
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);
//bootstrap+jq配置
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

配置jquery：lfuufcity/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"]
            })
        ]
    }
};

頁頭組件：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模塊

建立home模塊　　在 luffy 虛擬環境下, 終端從項目根目錄進入apps目錄   cd luffyapi & cd apps　　建立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/model.py

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)
    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

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

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

註冊home模塊：dev.py

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

設計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())
]

 

分離的先後臺交互

後臺處理跨域

　　大luffyapi文件下： pip install 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.image" alt="" :title="banner.note">
            </a>
        </el-carousel-item>

    </el-carousel>
</template>
<script>
    export default {
        name: "Banner",
        data() {
            return {
                banner_list: []
            }
        },
        created() {
            // 請求後臺數據
            this.$axios({
                url: this.$settings.base_url + '/home/banners/',
                method: 'get',
            }).then(response => {
                // window.console.log(response.data);
                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>

 

xadmin後臺管理

安裝：luffy虛擬環境下，大luffyapi文件夾下 下載　　pip install https://codeload.github.com/sshwsfc/xadmin/zip/django2

註冊app：dev.py

INSTALLED_APPS = [
    # xamin主體模塊
    'xadmin',
    # 渲染表格模塊
    'crispy_forms',
    # 爲模型經過版本控制，能夠回滾數據
    'reversion',
]

xadmin：須要本身的數據庫模型類，完成數據庫遷移

python manage.py makemigrations
python manage.py migrate

設置主路由替換掉admin：主urls.py

# xadmin的依賴
import xadmin
xadmin.autodiscover()
# xversion模塊自動註冊須要版本控制的 Model
from xadmin.plugins import xversion
xversion.register_models()

urlpatterns = [
    # ...
    path(r'xadmin/', xadmin.site.urls),
]

建立超級用戶：大luffyapi路徑終端， 在項目根目錄下的終端
　　python manage.py createsuperuser
　　# 帳號密碼設置：admin | admin123

完成xadmin全局配置：新建home/adminx.py

import xadmin
from xadmin import views

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

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

# 註冊model
from . import models
xadmin.site.register(models.Banner)

修改app:home的名字：xadmin頁面上的顯示效果

　　在 home/__init__.py文件中添加   default_app_config = "home.apps.HomeConfig"   修更名字

home/apps.py

from django.apps import AppConfig
class HomeConfig(AppConfig):
    name = 'home'
    verbose_name = '個人首頁'
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程