luffy-02

一.昨日回顾

1 软件开发规范
2 pip换源
	-1.文件管理器文件路径地址栏敲: %APPDATA% 回车,快速进入C:\Users\电脑用户\AppData\Roaming 文件夹中
	-2.新建pip文件夹并在文件夹中新建pip.ini配置文件
	-3.新增pip.ini配置文件内容
3 虚拟环境(以后再写新项目,直接用虚拟环境,尽量一个项目一个虚拟环境)
	-1 配置
		-windows下
            -pip3 install virtualenv   # 虚拟环境模块
            -pip3 install virtualenvwrapper-win # workon命令，会产生一个可执行文件virtualenvwrapper.bat
            -环境变量：WORKON_HOME: D:\Virtualenvs
         -Linux,mac
        	-pip3 install virtualenv   # 虚拟环境模块
            -pip3 install virtualenvwrapper   # virtualenvwrapper.sh
			# 在 ~/.bash_profile 完成配置，virtualenvwrapper的默认默认存放虚拟环境路径是 ~/.virtualenvs
            # WORKON_HOME=自定义存放虚拟环境的绝对路径，需要自定义就解注
            VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3
            source /usr/local/bin/virtualenvwrapper.sh
            # 在终端让配置生效：
            source ~/.bash_profile
	-2.命令
	mkvirtualenv -p python3.6 虚拟环境名称
4 路飞后台
	-django-admin命令创建项目
	-目录调整
	luffyapi
		-manage.py  # 脚本文件(数据迁移,测试运行)
		-scripts  # 测试脚本
		-logs
		-luffyapi
			-urls.py  # 总路由,setting中配置
			-settings
				-dev.py  # 开发阶段用的配置文件
				-pro.py  # 上线阶段用的配置文件
			-libs  # 第三方的库
			-utils  #自己携带的公共方法
			-wsgi.py  #上线阶段的启动文件
			-apps  # 所有的APP
				-user
				-course
				-home
	-调整完能运行
		-django启动是依据settings.py启动,配置文件路径配置正确
		-wsgi.py 后期上线要改
		-把项目根路径加入环境变量(导入模块,基于小luffyapi文件夹导入)
		-把apps文件夹加入到环境变量(在配置文件中,注册app时候,直接写名字即可)
		-pycharm中导入报错(实质没错),把加入环境变量的文件夹作为了source root
5 数据库配置
	-创建数据库用户,授予luffy这个库的所有权限,创建luffy用户,密码是Luffy123?
	grant all privileges on luffy.* to 'luffy'@'%' identified by 'Luffy123?';
     grant all privileges on luffy.* to 'luffy'@'localhost' identified by 'Luffy123?';
     flush privileges;  #修改落到硬盘上了，把权限，用户更新到内存

	-在django配置文件中
	import os
	    user=os.environ.get('db_user','root')
        password=os.environ.get('db_password','123')
    	DATABASES = {
            'default': {
                'ENGINE': 'django.db.backends.mysql',
                'NAME': 'luffy', # 库名
                'USER': user, # 用户名
                'PASSWORD': password, 
                'HOST': 'localhost',
                'PORT': 3306
                }
            }
        import pymysql
        pymysql.install_as_MySQLdb()
	-使用环境变量配置数据库的用户名和密码
	import os
		user=os.environ.get('db_user')
        password=os.environ.get('db_password')

6 前端创建项目
	-vue create luffycity
	-配置运行

二.今日内容

1 路飞前台配置

1 node_models 文件夹内放了一堆当前项目的依赖(可以直接删掉:传git,给别人)
2 如果项目中没有这个文件夹
cnpm install (== pip3 install -r req.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

(1)重构项目目录

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

(2)文件修订：目录中非配置文件的多余文件可以移除

<!--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
    },
    {
        path: '/home',
        redirect: '/',
    },
];

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>

router的使用

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

(3)前台配置

①全局样式,配置文件

'''===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; /* 合并边框 */
}
'''===assets/js/settings.js==='''
export default {
    base_url: 'http://127.0.0.1:8000'
}
'''===main.js==='''
// 配置全局样式
import '@/assets/css/global.css'

// 配置全局自定义设置
import settings from '@/assets/js/settings'
Vue.prototype.$settings = settings;
// 在所有需要与后台交互的组件中：this.$settings.base_url + '再拼接具体后台路由'

②axios

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

③vue-cookies

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

④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页面组件框架

# 安装：前端项目目录下的终端
>: cnpm install jquery
>: cnpm install bootstrap@3
# 配置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"]
            })
        ]
    }
};
# 配置bootstrap：main.js
import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

2 user表配置

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)
    # 需要pillow包的支持
    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配置：dev.py
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, include
from utils.router import router

# 注册ViewSet的路由
# router.register()

urlpatterns = [
    path('', include(router.urls)),
]

# 数据库迁移
"""
1）去向大luffyapi所在目录的终端

2）安装pillow模块
pip install pillow

3）数据库迁移
python manage.py makemigrations
python manage.py migrate
"""

3 封装全局response对象和全局异常

封装项目异常处理

### 封装项目异常处理
### 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 get_logger
logger=get_logger('django')
# 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

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

二次封装Response模块

### 二次封装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)

4.配置日志,记录日志

封装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')

# 方式二:
import logging
def get_logger(name):
    logger = logging.getLogger(name)
    return logger

日志的使用

1 原来在ATM中使用
    def get_logger(name):
        '''log日志
        '''
        logging.config.dictConfig(setting.LOGGING_DIC)  # 导入上面定义的logging配置
        logger = logging.getLogger(name)  # 生成一个log实例
        return logger

2 djaong中使用
    import logging
    logger = logging.getLogger('django')

5.跨域问题及解决

请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
…
比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据
…
浏览器上就会报错，这就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

1 同源策略:浏览器的安全策略,不允许向不同的域发送请求获取数据
	http://127.0.0.1:8080/
    http://127.0.0.1:8000/
    这两个不是同一个域(地址,端口不一样,就不是一个域),发送请求,能发出去,数据也回来了
    但是被浏览器的同源策略阻止了
2 前后端分离后,会存在跨域
	-前端项目和后端项目跑在不同的端口上
3 解决跨域问题
	-第一种:前端解决(通过代理解决)
	-第二种:自己解决(自己写代码解决)
	-第三种:借助第三方模块( django-cors-headers)
		

django 使用django-cors-headers 解决跨域问题

-1.下载
	pip install django-cors-headers
-2.添加到setting的app中
INSTALLED_APPS = (
	...
	'corsheaders',
	...
)
-3.配置中间件:
MIDDLEWARE = [  # Or MIDDLEWARE_CLASSES on Django < 1.10
	...
	'corsheaders.middleware.CorsMiddleware',
	'django.middleware.common.CommonMiddleware',
	...
]
-4.修改配置文件:
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-->
<template>
  <div id="app">
    <h1>路飞开始开发了</h1>
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-7">左边</div>
        <div class="col-md-5">右边</div>
      </div>
    </div>
    <router-view/>
  </div>
</template>

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

7.扩展

1 python获取环境变量的几种方式(django项目中配置文件,数据库用户和密码通过环境变量获取)
2 cookie,localstorage,sessionstorage区别（https://www.cnblogs.com/pengc/p/8714475.html）
3 pyechars的使用（研究一下）
4 2.2.2需要改源码的原因，你使用了pymysql来操作mysql数据库
	-如果使用mysqlclient操作mysql，就不需要改源码了，并且也不需要下面2行代码了
    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/