day-87路飛學城

時間 2019-11-16

標籤 day 简体版

原文原文鏈接

pip全局永久換源（虛擬環境也適用）

一、文件管理器文件路徑地址欄敲：%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

虛擬環境搭建

#安裝模塊(安裝在python3中)

pip3 install virtualenv
pip3 install virtualenvwrapper-win

# 配置

1.在D盤新建一個文件夾
2.配置環境變量：控制面板 => 系統和安全 => 系統 => 高級系統設置 => 環境變量 => 系統變量 => 點擊新建 => 填入變量名與值
              變量名：WORKON_HOME  變量值：新文件夾(存放虛擬環境)的絕對路徑   #WORKON_HOME: D:\Virtualenvs
3.同步配置信息：
         去向Python3的安裝目錄 => Scripts文件夾 => virtualenvwrapper.bat => 雙擊

#使用

在終端工做的命令

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

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

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

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

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

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

python使用虛擬環境css

後臺項目搭建

1.虛擬環境配置模塊


>: pip install django
>: pip install djangorestframework
>: pip install PymySQL


2.建立項目

前提：在目標目錄新建luffy文件夾
建立：
    >: cd 創建的luffy文件夾
    >: django-admin startproject luffyapi
開發：用pycharm打開項目，並選擇提早備好的虛擬環境


3.重構項目目錄

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




4.配置開發環境


a.將settings.py文件內容移植到settings文件夾中的dev.py，並移除settings.py

b.修改wsgi.py、manage.py配置文件指向：
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')

c.修改dev.py文件內容：
    #註冊drf
    INSTALLED_APPS = [
        
        'rest_framework',
    ]
    # BASE_DIR添加到環境變量
    import sys
    sys.path.insert(0, BASE_DIR)
    # 國際化
    LANGUAGE_CODE = 'zh-hans'
    TIME_ZONE = 'Asia/Shanghai'
    #配置日誌：

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或ERROR
'level': 'WARNING',
'class': 'logging.handlers.RotatingFileHandler',
# 日誌位置,日誌文件名,日誌保存目錄必須手動建立，注：這裏的文件路徑要注意BASE_DIR
'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, # 是否讓日誌信息繼續冒泡給其餘的日誌處理系統
},
}
}html

5.修改啓動配置(同上4b)


6.在script文件加中建測試文件t_proj.py測試默認配置文件是不是dev.py文件
    import os, django
    os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'luffyapi.settings.dev')
    django.setup()
    from django.conf import settings
    print(settings)
    
    from utils.logging import logger
    logger.error('測試error')


7.utils/logging.py：
    配置logger完成自定義錯誤信息往文件或控制檯打印

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



8.utils/response.py:
    二次封裝Response類：

from rest_framework.response import Response
class APIResponse(Response):
    def __init__(self, data_status, msg, results=None, headers=None, status=None, **kwargs):
        data = {
            'status': data_status,
            'msg': msg,
        }
        if results:
            data['results'] = results
        data.update(kwargs)
        super().__init__(data=data, headers=headers, status=status)



9.utils/exception.py:
    異常處理

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

settings/dev.py:
    異常處理配置settings配置
    REST_FRAMEWORK = {
        'EXCEPTION_HANDLER': 'utils.exception.exception_handler'
    }



10.媒體目錄

# dev.py中
    # 訪問要上傳文件的url地址前綴
    MEDIA_URL = "/media/"

    #項目中存儲上傳文件的根目錄
    MEDIA_ROOT = os.path.join(BASE_DIR, "media")

    # 建立文件
    在luffyapi/luffyapi中建立media目錄(誰是項目根目錄就在那個文件夾下建立)

# 配置路由
    from django.urls import re_path
    from django.views.static import serve
    from django.conf import settings
    urlpatterns = [
        re_path(r'media/(?P<path>.*)', serve, {"document_root": settings.MEDIA_ROOT}),
    ]

數據庫配置

1.管理員鏈接數據庫

2.建立數據庫
>: create database luffy default charset=utf8;
                                
3.單獨給新數據庫設置權限帳號密碼
    # 擁有公網或局域網，其餘主機連mysql
    >: grant all privileges on luffy.* to 'luffy'@'%' identified by 'luffy';

    #要是本機連mysql連不上，再增長localhost域，本機就能夠登陸了
    >: grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'luffy';

    #設置完有權限限制的帳號後必定要刷新權限
    >: flush privileges;

4.退出管理員，用帳號 luffy 密碼 luffy 登入開發

5.settings/dev.py配置
DATABASES = {
    "default": {
        "ENGINE": "django.db.backends.mysql",
        "HOST": "127.0.0.1",
        "PORT": 3306,
        "USER": "luffy",
        "PASSWORD": "luffy",
        "NAME": "luffy",
    }
}

6.luffypai/__init__.py
import pymysql
pymysql.install_as_MySQLdb()

7.運行會出現Django與pymysql版本兼容問題:見兩張插圖

新建user應用

1.終端前往luffyapi/apps所在目錄
>:cd luffyapi\apps
2,建立user組件
>: python ../../manage.py startapp user

3.settings/dev.py中先把apps添加環境變量，在註冊user
sys.path.insert(1, os.path.join(BASE_DIR, 'apps'))

INSTALLED_APPS = [
    
    'user'
]

4.分發路由
    #主路由urls.py
    from django.urls import include
    urlpatterns = [

        path('user/', include('user.urls')),
    ]
    #子路由
    from django.urls import path, re_path
    from . import views
    urlpatterns = [
    ]


5.自定義user表：user/models.py

from django.db import models
from django.contrib.auth.models import AbstractUser
class User(AbstractUser):
    mobile = models.CharField(verbose_name="手機號碼", max_length=15, unique=True)
    avatar = models.ImageField(upload_to='avatar', verbose_name='用戶頭像', null=True, blank=True,
                               help_text="頭像圖片的大小規格：256x256，或者對應的比例的圖片")
    class Meta:
        db_table = 'luffy_user'
        verbose_name = '用戶'
        verbose_name_plural = verbose_name
        
    def __str__(self):
        return self.username


6.修改auth認證的user表：settings/dev.py

    # 這裏是固定寫法：模塊.繼承AbstractUser的自定義User表
    AUTH_USER_MODEL = 'user.User'



7.ImageField字段須要支持：安裝 Pillow

    >: pip install Pillow


8.新建管理員用戶：

    >: python manage.py createsuperuser


9.數據庫遷移

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

前臺

1.安裝node環境


1.傻瓜式安裝node: https://nodejs.org/zh-cn/
2.安裝cnpm: npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安裝vue/cli 3.x: cnpm install -g @vue/cli
4.若是報錯處理後從新走二、3步：npm cache clean --force


2.建立項目

前提：在目標目錄新建luffy文件夾
>: cd 創建的luffy文件夾
>: vue create luffycity


3.重構項目目錄

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




4.更換頂部圖標

    favicon.ico



5.配置全局css： assets/css/global.css

    html, body {
        margin: 0;
    }


    main.js
        import '@/assets/css/global.css'




6.配置文件：settings.js
 
    export default {
        BASE_HTTP: 'http://localhost:8000'
    }


    main.js
        import settings from '@/settings.js'
        Vue.prototype.$settings = settings;

7.組件方法中訪問

created () {
    console.log(this.$settings.BASE_HTTP + '/users/')
}




8.文件改造

    刪除文件
        HelloWorld.vue
        About.vue


    Home.vue
        <template>
            <div class="home">
                <h1>主頁</h1>
                <hr>
                <el-row>
                    <el-button>默認按鈕</el-button>
                    <el-button type="primary">主要按鈕</el-button>
                    <el-button type="success">成功按鈕</el-button>
                    <el-button type="info">信息按鈕</el-button>
                    <el-button type="warning">警告按鈕</el-button>
                    <el-button type="danger">危險按鈕</el-button>
                </el-row>
            </div>
        </template>

        <script>
            export default {
                name: 'home',
                created() {
                    console.log(this.$settings.BASE_HTTP + '/users/')
                }
            }
        </script>



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


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

        Vue.config.productionTip = false;

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

        // 配置全局settings
        import settings from '@/settings.js'
        Vue.prototype.$settings = settings;

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


    route.js
        import Vue from 'vue'
        import Router from 'vue-router'
        import Home from './views/Home.vue'

        Vue.use(Router);

        export default new Router({
            mode: 'history',
            base: process.env.BASE_URL,
            routes: [
                {
                    path: '/',
                    name: 'home',
                    component: Home
                }
            ]
        })




9.配置element-ui

    安裝
        >: cnpm install element-ui --save


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

前臺主頁

## 前端主頁

1.App.vue - 根組件


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

<script>
    export default {
        name: 'App'
    }
</script>


2.Home.vue - 頁面組件


<template>
    <div class="home">
        <Header></Header>
        <Banner></Banner>
        <Footer></Footer>
    </div>
</template>

<script>
    import Header from "@/components/Header"
    import Banner from "@/components/Banner"
    import Footer from "@/components/Footer"

    export default {
        name: "Home",
        data() {
            return {}
        },
        methods: {},
        components: {
            Header,
            Footer,
            Banner,
        }
    }
</script>

<style scoped>

</style>


3.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;
    }

    /*[class*=" el-icon-"], [class^=el-icon-] {
    font-size: 50px;
    }*/

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


4.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;
    }
    img {
        text-align: center;
        height: 520px;
    }
</style>


5.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>


6.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, li {
    list-style: none;
}

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


7.圖片資源見 資料 文件夾

新建home應用

1.apps目錄下

>: python ../../manage.py startapp home


2.註冊app

INSTALLED_APPS = [
  
    'home'
]


3.註冊子路由

    # 主路由：urls.py
    from django.urls import include
    urlpatterns = [

        path('home/', include('home.urls')),
    ]

    # 子路由：home/urls.py
    from django.urls import path, re_path

    urlpatterns = [
        
    ]

home輪播圖數據庫

1.模型類：home/models.py

from django.db import models
class Banner(models.Model):
    """輪播圖"""
    # upload_to 存儲子目錄，真實存放地址會使用配置中的MADIE_ROOT+upload_to
    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='輪播圖廣告地址')
    orders = models.IntegerField(verbose_name='顯示順序')
    is_show=models.BooleanField(verbose_name="是否上架", default=False)
    is_delete=models.BooleanField(verbose_name="邏輯刪除", default=False)

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

    def __str__(self):
        return self.name


2.數據遷移：外層luffyapi路徑下的終端

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


3.建立序列化類：home/serializers.py

from rest_framework import serializers
from .models import Banner
class BannerModelSerializer(serializers.ModelSerializer):
    """輪播圖序列化器"""
    class Meta:
        model = Banner
        # 序列化的目的就是反饋給外界，因此指定的字段就行，其餘字段用於orm數據的篩選
        fields = ["image", "link"]


4.視圖模塊：home/views.py

from rest_framework.generics import ListAPIView
from .models import Banner
from luffyapi.settings import constant
from .serializers import BannerModelSerializer

class BannerListAPIView(ListAPIView):
    queryset = Banner.objects.filter(is_show=True, is_delete=False).order_by("-orders")[:constant.BANNER_LENGTH]
    serializer_class = BannerModelSerializer




5.主路由：urls.py

    urlpatterns = [

        path('home/', include("home.urls")),
    ]


    #子路由：home/urls.py
    urlpatterns = [
       
        path("banners/", views.BannerListAPIView.as_view()),
    ]

分離的先後臺交互

前臺處理ajax
1.安裝axios
    cnpm install axios --save

2.src/main.js配置
    import axios from 'axios'
    Vue.prototype.$axios = axios;


3.axios發生ajax請求
     created() {
                this.$axios({
                    url:this.$settings.BASE_HTTP+'/home/banners/',
                    method:'get',
                }).then(response => {
                    window.console.log(response)
                })
            }



後臺處理跨域

1.安裝：pip install django-cors-headers模塊

2.在settings.py中配置

    INSTALLED_APPS = [
        
        'corsheaders'
    ]
3.添加中間件
    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',

    ]


4.容許跨域源
    CORS_ORIGIN_ALLOW_ALL = False
    
5.配置指定跨域域名
    CORS_ORIGIN_WHITELIST = [
        'http://example.com'
    ]

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。