luffy项目3

今日内容概要

• 路飞前端全局css及全局配置文件
• 安装axios
• 安装vue-cookies
• 安装elementui
• 安装bootstrap和jQuery
• 后台主页模块表设计
• 后台主页模块轮播图接口
• 录入数据
• 跨域问题详解

今日内容详细

路飞前端全局css及全局配置文件

把vue项目除主页的其他页面组件和小组件都删除

我们在正常写前端项目前 都会把所有标签的默认样式清空掉

全局CSS:
    第一步:新建一个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; /* 合并边框 */
    }

    第二步:全局生效 在main.js中配置
        import '@/assets/css/global.css'

全局js
	向后端发送请求的时候 在开发阶段使用的可能是本地测试ip 但到后期上线 地址肯定要变 如果在组件中写死 那么后期要改就很麻烦 所以我们可以提前定义好 后期只需要改一个即可
	写一个全局js 在其中保存url地址
	第一步:新建一个js文件夹 创建个settings.js
		export default {
        BASE_URL: 'http://127.0.0.1:8000/api/v1/'
    }
	第二步:在main.js中引入
		import settings from "@/assets/js/settings";
		Vue.prototype.$settings = settings
	第三步:在任意组件中使用
		后续使用this.$settings.BASE_URL 就可以取到url地址

安装axios

axios是用来跟后端做交互的 需要安装

第一步:安装
	cnpm install axios -S
第二步:把axios放到vue原型中 main.js中
	import axios from "axios"
	Vue.prototype.$axios=axios
第三步:在任意组件中使用
	this.$ajax.get().then(res=>{})

安装vue-cookies

后期登陆成功 需要将token存在cookie中 所以需要使用第三方模块
第一步:安装
	cnpm install vue-cookies -S
第二步:把vue-cookies放到vue原型中 main.js
	import cookies from 'vue-cookies'
	Vue.prototype.$cookies=cookies
第三步:在任意组件中使用
	this.$cookies.set()

安装elementui

第一步:安装
	cnpm install element-ui -S
第二步:main.js中配置
	import ElementUI from 'element-ui';
	import 'element-ui/lib/theme-chalk/index.css';
	Vue.use(ElementUI)
第三步:直接复制elementui的代码使用

安装bootstrap和jQuery

想要使用bootstrap就必须安装jQuery 但是jQuery又与vue冲突 所以jQuery安装起来比较麻烦

第一步:安装
	cnpm install jquery -S
	cnpm install bootstrap@3 -S
第二步:配置全局使用bootstrap 在main.js中加入
	import 'bootstrap'
	import 'bootstrap/dist/css/bootstrap.min.css'
第三步:配置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的样式即可

后台主页模块表设计

分析原型图
	轮播图接口
	推荐课程接口
	推荐老师
	学员评论

创建首页app 到apps的文件夹中执行
	python ../../manage.py startapp home
	在models中创建轮播图表

往长远想 轮播图表中是否有其他表中也可能会用到的字段 有很多 所以我们给他抽离出去

第一步:在utils下新建 common_model.py
    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

第二步:在home的app的models.py中建表
    from django.db import models
    from utils.models 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

第三步:迁移
	python manage.py makemigrations
	python manage.py migrate

后台主页模块轮播图接口

序列化类

from rest_framework.serializers import ModelSerializer
from home.models import Banner


class BannerSerializer(ModelSerializer):
    class Meta:
        model = Banner
        # 不要直接__all__ 只选择前端可能需要用到的字段
        fields = ['title', 'image', 'link', 'info']

视图类

from rest_framework.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from home.models import Banner
from .serializer import BannerSerializer
from utils.common_response import APIResponse

# 需要使用自动生成路由 所以继承viewset相关视图集
class BannerView(GenericViewSet, ListModelMixin):
    # 将没被删除 可以展示的经过排序的轮播图过滤出来
    queryset = Banner.objects.all().filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = BannerSerializer

    # 重写list方法 为了将返回格式统一 可以将它也抽离出去
    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        return APIResponse(data=res.data)

路由

app比较多 所以可以使用路由分发

app的路由:
from . import views
from rest_framework.routers import SimpleRouter

router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')

urlpatterns = [
]

urlpatterns += router.urls

总路由:
from django.contrib import admin
from django.urls import path, include
from django.views.static import serve
from django.conf import settings

urlpatterns = [
    path('admin/', admin.site.urls),
    # 在总路由中使用路由分发
    path('api/v1/home/', include('apps.home.urls')),
    path('media/<path:path>', serve, kwargs={'document_root': settings.MEDIA_ROOT}),
]

使用simpleui后台管理 并录入数据

第一步:安装simpleui
	pip install django-simpleui
第二步:注册app
	django配置中注册 写在最上面
第三步:录入数据
	http://127.0.0.1:8000/admin

跨域问题解决

了解跨域及手动解决

	前端发送ajax请求到后端会有跨域的拦截
	同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
	请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
   发送ajax请求的地址，必须跟浏览器上的url地址处于同域上 域[域名，地址，端口，协议]
   请求成功，数据库返回，但是浏览器拦截
    
    
# 补充：浏览器中输入域名，没有加端口
	-www.baidu.com---->dns--->解析成地址  192.168.2.3----》没有加端口，默认是80
    -dns解析，先找本地的host文件
    	-可以修改本地的host做映射
 

由于同源策略的存在，不允许跨域访问，解决这个问题
	方式一:
		CORS：后端代码控制，咱们采用的方式
	方式二:
		Nginx反向代理 （常用）
	方式三:
		JSONP：很老，不会用了，只能发get请求
	方式四:
		搭建Node代理服务器（）

        
CORS基本流程
    浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。
    浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。
    浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错


简单请求
	请求方法是以下三种方法之一：
    HEAD
    GET
    POST
   HTTP的头信息不超出以下几种字段：
    Accept
    Accept-Language
    Content-Language
    Last-Event-ID
    Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
        
如果发送非简单请求 会先发送options请求 如果成功 再发送真正的请求
        
自己解决跨域问题---》中间件
from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":  # 解决非简单请求的请求头
            #可以加* 允许所有请求头
            response["Access-Control-Allow-Headers"]="*"

        # 允许前端的地址 *是多有地址都允许
        response["Access-Control-Allow-Origin"] = "*"
        return response

第三方模块解决

第一步：安装
	pip install django-cors-headers
第二步：配置app
    INSTALLED_APPS = [
        'corsheaders'
    ]

第三步：配置中间件
    MIDDLEWARE = [
        'corsheaders.middleware.CorsMiddleware',
    ]
第四步：在配置文件配置
# 允许所有域
CORS_ORIGIN_ALLOW_ALL = True
# 允许的请求方式
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',
)