Django项目--路飞学城03

1 后台主页模块设计

# 首页需要写的接口分析
    1.轮播图接口 （以它为例）
    2.6个推荐课程接口
    3.老师接口
    
# 建一个首页app：home
    python ../../manage.py startapp home
    
# 轮播图接口
    -轮播图表---》运营从后台把图片上传
        -图片名称，图片地址，跳转链接，描述
        -上传日期，更新日期，图片排序，是否删除（软删除），是否展示
    -迁移（把app注册）
    -查询所有轮播图接口

# 配置开启，media


# 移动端，开启app广告功能(实质就几张录播图片及跳转链接)
    -img：真正的图片
    -link_type:self 或 outer # 跳转类型：内部还是外部 
        # 前端根据这个，自己决定本窗口跳转还是打开新窗口跳转
    -link: /Home 或 http://www.baidu.com  

    后台录入功能：(前后端分离的，需要再写一个广告的录入接口)
        -录入接口

1.1 创建基表

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 utils.model import BaseModel
class Banner(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 = '轮播图表'

    def __str__(self):
        return self.title
    
    
#### 先注册home，再迁移表

1.3 写查询所有图片接口

# 1 写序列化类
class BannerSerializer(serializers.ModelSerializer):
    class Meta:
        model = models.Banner
        fields = ['title','link','image']

        
# 2 写视图类
from . import models
from . import serializer
from django.conf import settings
class BannerView(ViewSetMixin, ListAPIView):
    queryset = models.Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')[:settings.BANNER_COUNT]
    serializer_class = serializer.BannerSerializer
    

# 3 配置路径（路由分发）
# 总路由
path('api/v1/home/', include('home.urls')),

# home的app下新建urls.py
router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')
urlpatterns = [
    # path('', include(router.urls)),
]
urlpatterns += router.urls

1.4 自定义用户配置文件

# 在setting文件夹下新建user_setting.py
# 轮播图显示的条数
BANNER_COUNT = 4

# 在项目配置文件dev.py中导入user_setting
from .user_setting import *

1.5 开启media访问

# 配置文件中
# 开启media路径
MEDIA_ROOT=os.path.join(BASE_DIR,'media')  # 开启的路径
MEDIA_URL = '/media/'   # 访问的路径

# 在路由中
    from django.views.static import serve
    # 配置开启media
    # re_path('media/(?P.*)', serve, {'document_root': settings.MEDIA_ROOT}),
    path('media/', serve, {'document_root': settings.MEDIA_ROOT}),
    
    
# 上传文件：传到media文件夹下，表字段的upload_to参数文件夹下

# 访问文件：http://127.0.0.1:8000/media/xx/xx.p

2 跨域问题及解决（`*****`）

# 1  跨域问题出现的原因？ PC端网站前后端分离才会出现 (前后端处于不同的端口上 8080和8000)
    -浏览器：同源策略，浏览器的基本安全策略，不允许去不同的url地址获取数据；即域名,端口,协议必须相同
    http://127.0.0.1:8080
    -访问实质是可以的，只是返回的数据被浏览器拦截，不接受而已
            
# 2  CORS:后端技术，跨域资源共享，服务端在响应头中加入一下东西，允许跨域


# 3  CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）

# 4  符合以下条件，都是简单请求
（1） 请求方法是以下三种方法之一：
    HEAD
    GET
    POST
（2）HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
     
# 如果Content-Type是json格式，都是非简单请求

# 区别：简单请求只发一次，非简单请求发送两次，第一次是OPTIONS预检请求，第二次是真正的请求


# 5 后端使用cors处理跨域问题
    # 5.1 简单请求,支持跨域
	-在响应头中设置：Access-Control-Allow-Origin = '域名' 或 '*'

    # 5.2 非简单请求支持跨域
	-在响应头中设置：Access-Control-Allow-Methods='*'
	-在响应头中设置：Access-Control-Allow-Headers='*'

    # 自己处理跨域，跟web框架无关
    # 写一个中间件
    class CorsMiddle(MiddlewareMixin):
        def process_response(self, request, response):
            # 处理非简单请求
            if request.method == 'OPTIONS':
                response['Access-Control-Allow-Headers'] = '*'
                response['Access-Control-Allow-Methods'] = '*'
            # 处理简单请求
            response['Access-Control-Allow-Origin'] = '*'
            return response
    # 中间件配置
   
    
# 6 使用第三方，解决跨域
    1 安装
    	pip install django-cors-headers
    2 在app中注册
    	INSTALLED_APPS = (
            ...
            'corsheaders',
            ...
        )
    3 在中间件中加入
        MIDDLEWARE = [  
            ...
            'corsheaders.middleware.CorsMiddleware',
            ...
        ]
    
    4 在配置文件中配置
        CORS_ALLOW_CREDENTIALS = True  # 允许携带Cookie
	CORS_ORIGIN_ALLOW_ALL = True  # 允许所有域
	CORS_ORIGIN_WHITELIST = (  # 允许域的白名单 
    	    'http://localhost:8080',  
            # django-cors-headers版本影响白名单写法,版本包小于3.0不用加http,版本包大于3.0则需要加http
	)

        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',
            'token',
        )

3 simple-ui后台管理

# 项目：
    -主站：互联网用户，前后端分离
    -后台管理：运营，领导...，前后端混合，使用admin
    	-simple-ui 美化admin
        
# 集成simpleui
# 创建超级用户
    python manage.py createsuperuser
    
# 录入数据

# 了解：simple-ui是vue+elementui开发的
    -基于simpleui二次开发

4 路飞前台首页

# 三个组件：头部，轮播图，尾部
# Home组件中引入
# Banner轮播图和后台接口对接完成，实现跳转


# 前端存数据的地方：
    # 1.cookie：有过期时间，借助第三方 vue-cookies
    	.set(key,value)
        .get(key)
        
    # 2.sessionStorage：临时存储，页面关闭就没了 
    	sessionStorage.name = 'lqz';
        
    # 3.localStorage：永久存储，除非客户清理
    	localStorage.age='19'

补充

1.第三方模块安装

# pip安装第三方模块，实质就是去pypi地址下载whl文件
# 第三方模块是区分python解释器版本和操作系统版本的

-安装第三方模块安装不上：
    -第一种：Anaconda：Python解释器，其包含了conda、Python等180多个科学包及其依赖项

    -第二种：使用whl文件安装（常用）
        -https://www.lfd.uci.edu/~gohlke/pythonlibs/
        -下载对应版本的whl文件，手动安装
        -pip3 install 指定下载的whl文件

    -第三种：使用源码安装
        -下载源码，解压
        -在源码文件路径中，python setup.py install

    -第四种：python离线安装第三方模块
        从现有环境导出，导入到新环境
        -https://www.jianshu.com/p/ef163134a487
        -导出：pip3 download -r requirements.txt -d /temp/packages/  
        (下载到某个路径)
        -导入：pip3 install --no-index --find-links=/temp/packages -r requirements.txt

    -第五种：某个模块，完全不支持win
        -安装Linux系统-乌班图---》在下面开发--》pycharm
        -win---》远程链接linux开发（后面讲）

2.xss、csrf、cors的区别

# xss: 跨站脚本攻击
    恶意攻击者往Web页面里插入恶意Script代码，当用户浏览该页面时，
    嵌入Web里面的Script代码会被执行，从而达到恶意攻击用户的目的。

# csrf: 跨站请求伪造
    解决csrf攻击：服务器会给网站返回一个隐藏的随机字符串，第三方网站并不能获取到该字符串，
    请求来时，服务器会验证cookies以及该字符串(证明是由正确的网站发的请求)

# cors: 跨域资源共享
    是浏览器的同源策略，浏览器的基本安全策略，不允许去不同的url地址获取数据；即域名,端口,协议必须相同

Django实战项目路飞学城

Django项目--路飞学城03

1 后台主页模块设计

1.1 创建基表

1.2 创建home，app，在models下写Banner表

1.3 写查询所有图片接口

1.4 自定义用户配置文件

1.5 开启media访问

2 跨域问题及解决（`*****`）

3 simple-ui后台管理

4 路飞前台首页

4.1 Footer组件

4.2 Banner组件

4.3 Header组件

补充

1.第三方模块安装

2.xss、csrf、cors的区别

相关

标签

Django项目--路飞学城03

1 后台主页模块设计

1.1 创建基表

1.2 创建home，app，在models下写Banner表

1.3 写查询所有图片接口

1.4 自定义用户配置文件

1.5 开启media访问

2 跨域问题及解决（*****）

3 simple-ui后台管理

4 路飞前台首页

4.1 Footer组件

4.2 Banner组件

4.3 Header组件

补充

1.第三方模块安装

2.xss、csrf、cors的区别

相关

标签

2 跨域问题及解决（`*****`）