DAY 78 luffy02

1 路飞项目使用auth的user表
    -第一从一开始就使用
    -后期要用，必须删库，删迁移文件（自己app内置app）
2 前端配置
    -axios
    -vue-router
    -elementui
    
    -bootstrap
    -jq
4 跨域问题（前后端分离项目不可避免的）
    -浏览器的同源策略，安全策略
    -解决跨域问题
        -cors：跨域资源共享，后端技术---使用了第三方插件
        -前端代理（node起了一个服务）测试阶段用
            -正向代理，反向代理
        -jsonp：img，script标签
        -nginx转发
5 简单请求和非简单请求

 

1 cors和csrf区别

1 xss,cors,csrf
2 xss:跨站脚本攻击
3 cors：跨域资源共享
4 csrf：跨站请求伪造

 

2 路飞后台配置

2.1 封装日志对象

1 django中使用日志
2 日志的配置，复制到配置文件中
# 真实项目上线后，日志文件打印级别不能过低，因为一次日志记录就是一次文件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, # 是否让日志信息继续冒泡给其他的日志处理系统
        },
    }
}
​
​
2 封装一个get_logger函数（utils/logger）
import logging
​
​
def get_logger(name):
    my_logger = logging.getLogger(name)
    return my_logger
3 使用
在使用位置导入，使用
from luffyapi.utils.logger import get_logger
logger=get_logger('django')
def test_logger(request): 
    logger.error('请求来了')
    return HttpResponse('ok')
​
​
4 拓展：日记记录了以后是要有用的，分析
    -自己写：es，mongodb
    -ELK：日记收集分析工具

 

2.2 响应对象

# utils/response.py
from rest_framework.response import Response
​
​
class APIResponse(Response):
    def __init__(self, code=100, msg='成功', data=None, status=None, headers=None,
                 exception=False, content_type=None, **kwargs):
        real_data = {
            'code': code,
            'msg': msg,
            'data': data
        }
        data.update(kwargs)
        super().__init__(data=real_data, status=status, headers=headers,
                         exception=exception, content_type=content_type)
​

 

2.3 全局异常

# utils/exceptions
from rest_framework.views import exception_handler
from .response import APIResponse
from .logger import get_logger
​
logger = get_logger('django')
​
def custom_exception_handler(exc, context):
    response = exception_handler(exc, context)
    # print(exc)
    # print(context)
    if not response:
        # 出了异常
        res = APIResponse(code=999, msg='系统错误')
        logger.error('服务端错误，错误原因是：%s,出错的view是：%s，请求地址是：%s'%(
            str(exc),
            str(context['view']),
            context['request'].get_full_path()
            )
                     )
        return res
    return response
​
# sentry:开源的使用django开发的无关平台的日志记录及分析的平台

 

3 前端首页

3.1 头部组件

<template>
​
    <div>
        <div class="slogan">
            <p>老男孩IT教育 | 帮助有志向的年轻人通过努力学习获得体面的工作和生活</p>
        </div>
        <div class="nav">
            <ul class="left-part">
                <li class="logo">
                    <router-link to="/">
                        <img src="../assets/img/head-logo.svg" alt="">
                    </router-link>
                </li>
                <li class="ele">
                    <span @click="goPage('/free-course')" :class="{active: url_path === '/free-course'}">免费课</span>
                </li>
                <li class="ele">
                    <span @click="goPage('/actual-course')" :class="{active: url_path === '/actual-course'}">实战课</span>
                </li>
                <li class="ele">
                    <span @click="goPage('/light-course')" :class="{active: url_path === '/light-course'}">轻课</span>
                </li>
            </ul>
​
            <div class="right-part">
                <div>
                    <span>登录</span>
                    <span class="line">|</span>
                    <span>注册</span>
                </div>
            </div>
        </div>
​
    </div>
</template>
​
<script>
    export default {
        name: "Header"
    }
</script>
​
<style scoped>
 .header {
        background-color: white;
        box-shadow: 0 0 5px 0 #aaa;
    }
​
    .header:after {
        content: "";
        display: block;
        clear: both;
    }
​
    .slogan {
        background-color: #eee;
        height: 40px;
    }
​
    .slogan p {
         1200px;
        margin: 0 auto;
        color: #aaa;
        font-size: 13px;
        line-height: 40px;
    }
​
    .nav {
        background-color: white;
        user-select: none;
         1200px;
        margin: 0 auto;
​
    }
​
    .nav ul {
        padding: 15px 0;
        float: left;
    }
​
    .nav ul:after {
        clear: both;
        content: '';
        display: block;
    }
​
    .nav ul li {
        float: left;
    }
​
    .logo {
        margin-right: 20px;
    }
​
    .ele {
        margin: 0 20px;
    }
​
    .ele span {
        display: block;
        font: 15px/36px '微软雅黑';
        border-bottom: 2px solid transparent;
        cursor: pointer;
    }
​
    .ele span:hover {
        border-bottom-color: orange;
    }
​
    .ele span.active {
        color: orange;
        border-bottom-color: orange;
    }
​
    .right-part {
        float: right;
    }
​
    .right-part .line {
        margin: 0 10px;
    }
​
    .right-part span {
        line-height: 68px;
        cursor: pointer;
    }
</style>

 

3.2 轮播图组件

<template>
​
    <div>
        <el-carousel indicator-position="outside" height="400px">
            <el-carousel-item v-for="item in 4" :key="item">
                <img src="../assets/img/banner1.png" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>
​
<script>
    export default {
        name: "Banner"
    }
</script>
​
<style scoped>
​
    .el-carousel__item {
        height: 400px;
        min- 1200px;
    }
​
    .el-carousel__item img {
        height: 400px;
        margin-left: calc(50% - 1920px / 2);
    }
​
    .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;
    }
</style>

 

3.3 尾部组件

<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 {
         100%;
        height: 128px;
        background: #25292e;
        color: #fff;
    }
​
    .footer ul {
        margin: 0 auto 16px;
        padding-top: 38px;
         810px;
    }
​
    .footer ul li {
        float: left;
         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>

3.4 全局css样式的引入

# 1 在assets/css/global.css
#2 写入
/* 声明全局样式和项目的初始化样式 */
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; /* 合并边框 */
}



#3 在main.js中引入
import './assets/css/global.css'

 

4 首页轮播图接口

4.1 轮播图表

# utils/models/
from django.db import models


# 所有表的基类
class BaseModel(models.Model):
    created_time = models.DateTimeField(auto_now_add=True, verbose_name='创建时间')
    updated_time = models.DateTimeField(auto_now=True, verbose_name='最后更新时间')
    is_delete = models.BooleanField(default=False, verbose_name='是否删除')
    is_show = models.BooleanField(default=True, verbose_name='是否上架')
    orders = models.IntegerField(verbose_name='优先级')

    class Meta:
        abstract = True  #虚拟表，只用来继承，不再数据库生成

from django.db import models

# Create your models here.

from luffyapi.utils.models import BaseModel
class Bannder(BaseModel):
    title = models.CharField(max_length=16, unique=True, verbose_name='名称')
    image = models.ImageField(upload_to='banner', verbose_name='图片')
    link = models.CharField(max_length=64, verbose_name='跳转链接')
    info = models.TextField(verbose_name='详情')  # 也可以用详情表，宽高出处

    class Meta:
        db_table = 'luffy_banner' # 重写表名
        verbose_name_plural = '轮播图表' #admin中显示中文

    def __str__(self):
        return self.title
    
  
#执行两条迁移命令

 

4.2 轮播图接口

#序列化类
from  rest_framework import serializers
from .models import  Bannder
class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model=Bannder
        fields=['id','link','image']

    image=serializers.SerializerMethodField()
    def get_image(self,obj):
        print(obj.image)

        return 'http://127.0.0.1:8000/media/'+str(obj.image)

# 视图类
from rest_framework.viewsets import ViewSetMixin
from rest_framework.generics import ListAPIView
from .serializer import BannerSerializer
from .models import  Bannder
class BannerView(ViewSetMixin,ListAPIView):
    queryset = Bannder.objects.all()
    serializer_class =BannerSerializer

# 配置路由
from rest_framework.routers import SimpleRouter
router=SimpleRouter()
router.register('banner',home_view.BannerView,'banner')
urlpatterns+=router.urls

 

4.3 前端轮播图显示及跳转

<el-carousel-item v-for="item in banner_list" :key="item">
 <router-link :to="item.link"><img :src="item.image" alt=""></router-link>
</el-carousel-item>

# 显示图片使用：<img :src="item.image" alt="">
# 点击图片跳转
<router-link to="http://www.baicu.com"></router-link>
# script
mounted(){
           this.$http.get('http://127.0.0.1:8000/banner/').then(res=>{
                this.banner_list=res.data
                console.log(this.banner_list)
            })
        }

4.4 集成simplui

具体操作看文档

 

 

4.5 自定义配置

1 有一些用户自定义的配置，不放在统一的配置文件中，自定义一个配置文件
2 在setting下新建user_settings.py
3 在dev.py中导入
from .user_settings import *
4 在视图函数中使用
from django.conf import settings
class BannerView(ViewSetMixin,ListAPIView):
    queryset = Bannder.objects.all().filter(is_show=True,is_delete=False)[0:settings.BANNER_SIZE]
    serializer_class =BannerSerializer

 

5 git介绍

1 多人协同开发一个项目，版本管理工具：svn，git
2 git实现版本的控制
3 git，gitee，github，gitlab
	-gitee：中国的版github（很多公司在用）
    -github：远程仓库，全球最大的开源代码库
    -gitlab：公司自己搭建的远程仓库，公司的代码放在上面
4 git与svn比较

5 git的工作流程
	-工作区
    -暂存区
    -版本库
6 git安装，去官网下载，一路无脑下一步
7 在任意路径下点右键，选择git bash here
	-mkdir test_git
    -cd test_git
    -git init  #初始化仓库，在当前路径下创建一个.git隐藏文件夹
    -当前路径就是工作区
    -git status # 查看版本状态
    	-红色：新建，修改，删除，在工作区没有放到暂存区
        -绿色：放到暂存区，没有提交到版本库
        -没有东西：说明所有变更都被版本管理起来了
    -git add . # 把当前路径下所有的变更都提交到暂存区
    -git commit -m '我的第一次提交' # 把暂存区的内容提交到版本库了
    
8 重点：
	git init
    git add .
    git commit -m ‘注释’
    git status

 

后续内容

1 路飞项目
2 爬虫
    -页面爬取，视频，图片爬取
    -请求，解析，selenium
    -scrapy框架
    -分布式爬虫
    -自动登录12306，cookie---》下单接口--》下单
    
3 flask框架
4 sqlachemy框架（orm）
5 分布式全文检索引擎（es）
6 mysql主从搭建--django读写分离
7 redis高级
    -发布订阅，布隆过滤器，bitmap，地理位置信息
    -主从
    -哨兵（高可用）
    -集群（扩容缩容）
8 分库分表（mycat），分布式id生成，分布式锁，微服务，rpc，rabbitmq，mongodb
9 go语言（基础，函数，数据类型，结构体，面向对象，并发），gin
10 就业辅导（简历....）
11 linux
12 docker
    -docker部署项目
    -最佳实战
    -cicd最佳实战