luffy第二篇

一、luffy前台配置

1、vue前端目录

0 #创建项目（注意:这里的项目名只能全部小写）
vue create luffy001
1 node_models 文件夹内放了一堆当前项目的依赖（删掉：可以上传git，分享给他人）
2 #如果项目中没有node_models这个文件夹，可以执行以下指令
	cnpm install （pip3 istall -r requirements.txt）
3 #目录介绍
	luffycity  # 项目
    	-node_modules  # 项目依赖，可以删除 执行npm install 会安装
        -public
            -index.html  # 项目整个index.html  单页面开发
            -favicon.ico  # favicon图标
        -src
            main.js     # 整个项目的入口js文件（django的setting.py）
            components  # 组件
            views       # 页面组件
            assets      # 静态资源，图片...
            store       # vuex:状态管理器的相关配置和使用，cookie，localstorage，sessionstorage（https://www.cnblogs.com/pengc/p/8714475.html）
            router      # 路由相关：不同组件之间跳转
            App.vue     # 根组件（<div id='box'></div>）

        babel.config.js
        package.json      # 相当于requements.txt,项目依赖，配置。。。不能删
        package-lock.json  # 
        .gitignore
        .editorconfig
        README.md

2、router的使用

1 在要跳转的位置加（等同于原来的a标签）
   <router-link to="/">首页</router-link> |
2 组件在roueter文件夹 index.js配置

3、luffy前台配置

http://www.liuqingzheng.top/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/1-%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80/7-luffy%E5%89%8D%E5%8F%B0/

//1 全局样式，配置文件
在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; /* 合并边框 */
}
//2 axios前后台交互
	cnpm install axios
    在main.js中配置
    import axios from 'axios'
	Vue.prototype.$axios = axios;

//3 vue-cookies
	cnpm install vue-cookies
    在main.js中配置
    import cookies from 'vue-cookies'
	Vue.prototype.$cookies = cookies;
//4 elementui页面组件框架
	cnpm install element-ui	
    在main.js中配置
    import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI);
//5 jquery组件
	cnpm install jquery
    在项目根路径下建一个vue.config.js文件
    在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"]
                })
            ]
        }
    };
//6 bootstrap页面组件框架
	cnpm install bootstrap@3
	在main.js中配置
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'

http://www.liuqingzheng.top/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/1-%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80/8-luffy%E5%89%8D%E5%8F%B0%E9%85%8D%E7%BD%AE/

二、luffy后端配置

1、User表配置

http://www.liuqingzheng.top/python/%E8%B7%AF%E9%A3%9E%E9%A1%B9%E7%9B%AE/1-%E9%A1%B9%E7%9B%AE%E5%9F%BA%E7%A1%80/6-user%E6%A8%A1%E5%9D%97User%E8%A1%A8/

2、封装全局Response对象

#utils/response.py
from rest_framework.response import Response

class APIResponse(Response):
    def __init__(self, status=0, msg='ok', http_status=None, headers=None, exception=False, **kwargs):
        data = {
            'status': status,
            'msg': msg,
        }
        if kwargs:
            data.update(kwargs)
        super().__init__(data=data, status=http_status, headers=headers, exception=exception)

3、全局异常

#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
import logging
logging.getLogger('django')
def exception_handler(exc, context):
    response = drf_exception_handler(exc, context)
    if response is None:
        # 记录服务器异常
        logger.critical('%s' % exc)
        response = Response({'detail': '服务器异常，请重试...'}, status=status.HTTP_500_INTERNAL_SERVER_ERROR)
    return response

#dev.py中
REST_FRAMEWORK = {
    'EXCEPTION_HANDLER': 'utils.exception.exception_handler',
}

4、配置日志，记录日志

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

5、跨域问题及解决

1 同源策略:浏览器的安全策略，不允许向不同的域发送请求获取数据
    http://127.0.0.1:8080/
    http://127.0.0.1:8000/
    这俩不是同一个域（地址，端口不一样，就不是一个域），发送请求，能发出去，数据也回来了
    但是被浏览器的同源策略阻止了
2 前后端分离后，会存在跨域
	-前端项目和后端项目跑在不同的端口上
3 解决跨域问题
	-第一种：前端解决（通过代理解决）
    -第二种：自己解决（自己写代码解决）
	-第三种：借助第三方模块
    	-下载  pip install django-cors-headers
        -app中注册：corsheaders
        -配置中间件：
        	'corsheaders.middleware.CorsMiddleware',
        -修改配置文件（在settings.py中添加）
        CORS_ALLOW_CREDENTIALS = True
        CORS_ORIGIN_ALLOW_ALL = True
        CORS_ORIGIN_WHITELIST = ( 
            'http://127.0.0.1:8080',  #这里是后端允许访问前端的路径，与前端路径需保持一致
        )
        CORS_ALLOW_METHODS = (
            'DELETE',
            'GET',
            'OPTIONS',
            'PATCH',
            'POST',
            'PUT',
            'VIEW',
        )

        CORS_ALLOW_HEADERS = (
            'XMLHttpRequest',
            'X_FILENAME',
            'accept-encoding',
            'authorization',
            'content-type',
            'dnt',
            'origin',
            'user-agent',
            'x-csrftoken',
            'x-requested-with',
            'Pragma',
        )
    

6、前后端打通

#App.vue
<script>
export default {
  data(){
    return{
      name:''
    }
  },
  mounted () {
    // this.name = this.$settings.name
    this.$axios.get(this.$settings.base_url+'/user/test/').then(res=>{
      console.log(res.data)
    })
  }
}
</script>

拓展

1 Python 获取环境变量的几种方式(django项目中配置文件，数据库用户和密码通过环境变量获取)
db_user='root'
db_password='123456'
user = os.environ.get('db_user')
password = os.environ.get('db_password')
2 cookie，localstorage，sessionstorage区别（https://www.cnblogs.com/pengc/p/8714475.html）
3 pyechars的使用（研究一下）
4 django2.2.2需要改源码的原因，你使用了pymysql来操作mysql数据库
	-如果使用mysqlclient操作mysql，就不需要改源码了，并且
    import pymysql
	pymysql.install_as_MySQLdb()  不需要配置
    -mysqlclient安装麻烦，解决方法：http://liuqingzheng.top/python/%E5%85%B6%E4%BB%96/01-%E5%90%84%E4%B8%BB%E6%B5%81Linux%E7%B3%BB%E7%BB%9F%E8%A7%A3%E5%86%B3pip%E5%AE%89%E8%A3%85mysqlclient%E6%8A%A5%E9%94%99/
5 cnpm install jquery --save  # 依赖模块同步到pacakage.json中
6 npm run build    # 项目上线，执行，把dist文件夹部署，前端所有的代码