DRF+Vue項目（一）——項目架構
永久配置安裝源css
爲了加速模塊的下載html
一、文件管理器文件路徑地址欄敲：%APPDATA% 回車，快速進入 C:\Users\電腦用戶\AppData\Roaming 文件夾中 2、新建 pip 文件夾並在文件夾中新建 pip.ini 配置文件 三、新增 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
虛擬環境的搭建vue
優勢node
1、使不一樣應用開發環境相互獨立 2、環境升級不影響其餘應用，也不會影響全局的python環境 三、防止出現包管理混亂及包版本衝突
安裝virtualenv windows下（下面都是針對windows下）python
# 建議使用pip3安裝到python3環境下 pip3 install virtualenv pip3 install virtualenvwrapper-win
配置環境變量mysql
控制面板 => 系統和安全 => 系統 => 高級系統設置 => 環境變量 => 系統變量 => 點擊新建 => 填入變量名與值 變量名：WORKON_HOME 變量值：自定義存放虛擬環境的絕對路徑 eg: WORKON_HOME: D:\Virtualenvs 同步配置信息： 去向Python3的安裝目錄 => Scripts文件夾 => virtualenvwrapper.bat => 雙擊
使用virtualenvjquery
# 在終端工做的命令 # 一、建立虛擬環境到配置的WORKON_HOME路徑下 # 選取默認Python環境建立虛擬環境： -- mkvirtualenv 虛擬環境名稱 # 基於某Python環境建立虛擬環境： -- mkvirtualenv -p python2.7 虛擬環境名稱 -- mkvirtualenv -p python3.6 虛擬環境名稱 # 二、查看已有的虛擬環境 -- workon # 三、使用某個虛擬環境 -- workon 虛擬環境名稱 # 四、進入|退出 該虛擬環境的Python環境 -- python | exit() # 五、爲虛擬環境安裝模塊 -- pip或pip3 install 模塊名 # 六、退出當前虛擬環境 -- deactivate # 七、刪除虛擬環境(刪除當前虛擬環境要先退出) -- rmvirtualenv 虛擬環境名稱
後臺Django項目建立webpack
環境ios
爲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 注：若是二、3步報錯，清除緩存後從新走二、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>
| <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頁面，添加數據
相關文章
- 1. DRF+Vue項目（一）——項目架構
- 2. 項目架構
- 3. 項目框架和項目架構
- 4. Vue項目目錄架構
- 5. 項目架構圖
- 6. BBS項目架構
- 7. 單項目架構
- 8. ubuntu16.04項目架構
- 9. node.js項目架構
- 10. Android項目架構
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Maven 構建 Java 項目 - Maven教程
- • RxJava操作符（一）Creating Observables
- • Kotlin學習（一）基本語法
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. DRF+Vue項目（一）——項目架構
- 2. 項目架構
- 3. 項目框架和項目架構
- 4. Vue項目目錄架構
- 5. 項目架構圖
- 6. BBS項目架構
- 7. 單項目架構
- 8. ubuntu16.04項目架構
- 9. node.js項目架構
- 10. Android項目架構