路飞学城02--后端常见封装和前端搭建及配置

1.路飞后台配置之封装logger

# django中使用日志
# 1.在django配置文件中复制日志字典
# 日志相关配置（跟原生日志一样）
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, # 是否让日志信息继续冒泡给其他的日志处理系统
        },
        'lqz': {
            'handlers': ['console'],
            'propagate': True,  # 是否让日志信息继续冒泡给其他的日志处理系统
        },
    }
}

# 2 写一个log.py
import logging
def get_logger(l='django'):
    return logging.getLogger(l)

# 3 以后使用，导入，使用
from utils import log
logger = logging.get_logger()
logger.info('我是日志')

2.路飞后台之封装异常处理

# 新建utils/excepitons.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 import logging
logger = logging.get_logger()


def exception_handler(exc, context):
    response = drf_exception_handler(exc, context)
    if response is None:  # drf没有处理的，django的异常
        # response = Response({'detail': '服务器异常，请重试...'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
        response = Response({'code': 999, 'msg': '服务器异常，请重试...'})
    else:
        response = Response({'code': 998, 'msg': response.data['detail']})
        # response.data['detail'] 这句有错，response.data有可能是字典类型
        # 例：[ErrorDetail(string='我是异常', code='invalid')]
        # 换成：'msg': response.data
        
    # 记录服务器异常,drf和django的异常，都记录
    # 时间，哪个ip地址，用户id，哪个视图类，出了什么错
      print(
        f'异常视图：{context['view'].__class__.__name__}  访问IP：{context["request"].META.get("REMOTE_ADDR")} '
        f'访问用户ID：{context["request"].user.id} 异常信息：{str(exc)}')

    logger.critical('%s' % exc)
    return response


# 最好 使用自定义的Response返回对象
from rest_framework.views import exception_handler as drf_exception_handler
from utils.response import APIResponse

from utils import logging
logger = logging.get_logger()

def exception_handler(exc, context):
    response = drf_exception_handler(exc, context)
    if response is None:  # drf没有处理的异常，就是django的自身异常
        response = APIResponse(code=999, msg='服务器异常，请重试...')
    else:
        response = APIResponse(code=998, msg=response.data)
    logger.critical('%s' % exc)
    return response


# 再配置文件中配置
REST_FRAMEWORK = {
    # 异常处理
    'EXCEPTION_HANDLER': 'utils.excepitons.exception_handler',
}

3.路飞后台之封装Response对象

# 在utils/response下
from rest_framework.response import Response
class APIResponse(Response):
    def __init__(self, status=None, headers=None, **kwargs):
        data = {'code': 100, 'msg': '成功'}
        if kwargs:
            data.update(kwargs)

        super(APIResponse, self).__init__(data=data, status=status, headers=headers)
      
# 以后再用	返回对象，使用自己定义的APIResponse对象
return APIResponse(username='lqz',token='ssss')	

4.路飞前台项目创建

# 创建vue项目
	vue create luffycity
    
# 配置全局css,在assets/css/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; /* 合并边框 */
    }

    # 局部文件：优先使用本身的css:
        <style scoped> </style>
    
# 配置全局assets/js/settings.js
    export  default {
        base_url:'http://127.0.0.1:8000/'   
    }


# main.js中使用(注意放在 new Vue()之前 )
// 使用全局的global.css
import '@/assets/css/global.css'  # 直接导入

// 全局配置--使用全局的setting.js
import setting from '@/assets/js/settings'
# 将对象(setting)放进Vue类的原型中，以后vue类或者vue的对象可直接获取使用
Vue.prototype.$settings=setting   


// 以后所有要使用settings中的base_url直接在组件中
this.$settings.base_url

5.前台配置

# 使用axios，elementui，bootstrap，jq，

# 1.axios前后台交互
# 安装：前端项目目录下的终端
>: cnpm install axios
# 全局配置axios：main.js
import axios from 'axios'
Vue.prototype.$axios = axios;


# 2.cookies操作
# 安装：前端项目目录下的终端
>: cnpm install vue-cookies
# 全局配置cookies：main.js
import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

# 3.element-ui页面组件框架
# 安装：前端项目目录下的终端
>: cnpm install element-ui
# 配置：main.js
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

# 4.bootstrap页面组件框架
# 安装：前端项目目录下的终端
>: cnpm install jquery
>: cnpm install bootstrap@3
    
# 配置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"]
            })
        ]
    }
};

# 配置bootstrap：main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'