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

目录

• 昨日回顾
• 路飞全局配置文件
  • 整理项目
  • 全局css
    • 步骤：
  • 全局js
    • 使用步骤
• 安装axios
  • 使用步骤
• 安装vue-cookies
  • 使用步骤：
• 安装elementUi
  • 使用步骤：
• 安装bootstrap和jq
  • 使用步骤
• 后台主页模块设计
  • 分析
  • 创app应用
  • 创建表步骤
• 后台主页模块轮播图接口
  • 视图类
  • 序列化类
  • 路由
  • 简述Form和ModelForm的区别
• 录入数据
  • 使用步骤：
• 跨域问题详解
  • 同源策略
  • 补充：浏览器中输入域名，没有加端口
  • CORS基本流程
  • 自己解决跨域问题
    • 演示简单和非简单请求
  • 第三方模块帮咱们解决了跨域

昨日回顾

1.封装日志
	# 咱们用的方案
  Django --->>> 原生日志 --->>> 配置文件copy过来 --->>> 写一个py文件，在py文件中拿到配置文件中定义的Django日志对象，以后导入使用即可
  # sentry：集中式管理的
  # python 第三方日志库
  	logru
    # 以后不要在代码中print，使用日志输出
    
2.全局异常
	统一返格式，给前端即便出了异常
  	drf的AIPView的执行流程源码，dispatch：三大认证视图类的方法，只要出了异常，就会执行exception_handler --->>> 只处理drf异常
    
    自定义函数，配置文件中配置，以后出了异常，走咱们自己写的，记录日志，返回统一格式
    
3.封装Response
	drf有Response，咱们用起来不方便，不符合公式规范，咱们封装
  	继承Response --->>> __init__
    	__init__接收参数：code=100,msg="成功，status-None， headers=None,**kwargs"
      data = {'code':code, 'msg': msg}
      data.update(kwargs)
      
     super().__init__(data=data,status=status,headers=headers)
    APIResponse(token=token)
    
4.软件开发模式
	瀑布式
  敏捷开发
  
5.luffy数据库
	创建luffy库，命令，图形化界面
  创建luffy用户
  	grant 权限(create，update) on 库.表 to '账号'@'host' identified by '密码'
    
6.项目使用mysql连接路飞数据库
	pymysql --->>> 猴子补丁：程序运行过程中动态的替换对象的一种方式
  
  mysqlclient:
  
  import json # 内置的，速度可能慢
  json.loads(字符串)
  
  # java界：json序列化模块
  
  # 担心泄露代码后，数据密码被看到
  # 放到环境变量中
  name = os.environ.get('LUFFY_NAME','luffy')
  password = os.environ.get('LUFFY_PASSWORD', 'Luffy123?')
  
  # 配置中心
  
7.settings 每个配置项的作用
必须大写
	以后用配置文件
  from django.conf import settings
  
8. 开启media访问

路飞全局配置文件

整理项目

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

router/index.js

const routers = [{
  path:'/',
  name:'home',
  component:HomeView
}]

HomeView.vue

<template>
  <div class="home">
    <h1>首页</h1>
  </div>
</template>

<script>

export default {
  name: 'HomeView',
}
</script>

再把其他页面组件和小组件都删除

全局css

正常写前端项目，需要去掉所有标签的默认样式，css

步骤：

第一步：新建一个asset-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中配置，使用全局css样式，只需要导入就会生效。main.js导入

全局js

向后端发送请求，请求地址测试阶段 127.0.0.2:8000 ---> 后期上线，地址要变，地址要变，如果在组建中把地址写死， 以后的话要改，每个就都要改，所以。导入导出

使用步骤

第一步：新建，assets下新建js目录，创建settings.js文件

写一个全局js，js中有个url地址，以后所有组件中发送请求时，都是用这个url地址

第二步：在main.js中引入，把settings对象放入到vue的原型中，以后再任意组件中都可以使用

第三步：在任意组件中引入，this.$settings.BASE_URL

安装axios

跟后端交互

使用步骤

第一步：安装，cnpm install axios -s

第二步：放到vue原型中，main.js中，任意组件中使用

安装vue-cookies

后期登陆成功，token存在cookie中

使用步骤：

第一步：安装，cnpm installvue-cookies -s

第二步：把vue-cookies放到vue原型中，main.js中，登陆成功token存在cookies中

第三步：在任意组件中使用，this.$cookies.set()

安装elementUi

样式，使用elementUI

使用步骤：

第一步：安装 cnpm install element-ui -s

第二步：main.js配置

第三步：找elementUI粘贴复制

安装bootstrap和jq

咱们项目，没有使用bootstrap，但是有想用的，想知道怎么引入。

使用步骤

第一步：安装

cnpm install jquery -s

cnpm install bootstrap@3 -s

第二步：配置全局使用bootstarp，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"]
                    })
                ]
            }
        };

第三步：在页面中使用bootstarp

后台主页模块设计

分析

分析完原型图，首页要写的接口

轮播图接口
	推介课程(暂时没写)
  推荐老师(没有)
  学员评论(没有)

创app应用

创建首页应用app --->>> home

来到apps文件夹下执行，python ../../manage.py startapp home，到models中 轮播图表 Banner

创建表步骤

第一步：在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  # 只用来继承，不用来在数据库创建

在utils下新建common_model.py文件

第二步：在home的app的models.py中写入

        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.viewsets import GenericViewSet
from rest_framework.mixins import ListModelMixin
from .models import Banner
from .serializer import BannerSerializer
from utils.common_response import APIResponse


class BannerView(GenericViewSet, ListModelMixin):
    queryset = Banner.objects.filter(is_delete=False, is_show=True).order_by('orders')
    serializer_class = BannerSerializer

    def list(self, request, *args, **kwargs):
        res = super().list(request, *args, **kwargs)
        return APIResponse(data=res.data)  # {code:100,msg:成功，data=[{},{}]}

序列化类

from rest_framework import serializers
from .models import Banner

class BannerSerialzer(serializers.ModelSerializer):
  class Meta:
    model = Banner
    fields = ['id','image','title','link']

路由

from rest_framework.routers import SimpleRouter
from . import views

router = SimpleRouter()
# 访问 http://127.0.0.1:8000/api/v1/home/banner   ---->get 请求就可以查询所有轮播图
router.register('banner', views.BannerView, 'banner')

urlpatterns = [

]
urlpatterns += router.urls

路由分发：

app应用下home的url

结果：

简述Form和ModelForm的区别

forms.Form与forms.ModelForm的区别：如果需要对数据库进行修改（增改），则需要继承forms.ModelForm，否则继承forms.Form

class Meta：声明表单类使用的是内部类Meta的数据模型User，表单类属性与数据模型的字段一一对应。
field：用来声明对那些字段进行更新，也可用exclude来声明不对哪些字段进行更新。
表单类自定义属性：用以覆盖数据模型类的对应的字段，或者自定义属性（即不使用数据模型类的字段）

# form组件的主要功能如下：
1.生成页面可用的html标签
2.验证用户数据(显示错误信息)
3.保留上次输入内容
4.初始化页面显示内容

录入数据

主站前后端分离，后台管理使用Django的admin做的 --->>> simpleui

使用步骤：

第一步：安装simpleui， pip install django-simpleui

第二步：注册app

第三步：录入数据 http://127.0.0.1:8000/admin

admin中注册

app注册

创建一个用户

为什么只能创一个用户，mobie字段限制了

登录

以后公司中上传图片不是你上传的，我们上传些临时只用来测试的，

录完就能看到：

跨域问题详解

前端发送ajax请求，到后端，会有跨域的拦截。

出现的原因：同源策略

同源策略

Same origin policy 是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现

请求的url地址，必须与浏览器上的url地址处于同域上，也就是域名、端口、协议相同。

发送ajax请求的地址，必须跟浏览器上的url地址处于同域上，域[域名、地址、端口、协议]

请求成功，数据库返回，但是浏览器拦截

解决：

由于同源策略的存在，不允许跨域被访问，解决这个问题

前端发送ajax，后端会有跨域的拦截

解决同源策略，因为它的存在不允许跨域。

有以下几种解决方案：

方式一(常用)：CORS后端代码控制，采用这个方式解决

方式二：搭建Node代理服务器

方式三(常用)：Nginx反向代理

补充：浏览器中输入域名，没有加端口

www.baidu.com --->>> 通过DNS解析 --->>> 解析成地址 比如：192.168.2.3 --->>> 没有加端口，默认是80
	dns解析，先找本地的host文件
  	可以修改本地的host做映射

如pycharm中设置端口成80，这样直接写127.0.0.1就不用再端口，会自动加

对自己本地hosts做映射，将127.0.0.1 映射成www.lpz.com
在本地路径下，创建hosts.没有hosts可以自己添加

在里面手动添加key空格value

结果：www.lqz.com直接替代了127.0.0.1

cors: xss, csrf

-跨域资源共享：后端技术，就是在响应头中加入 固定的头，就会运行前端访问了

CORS基本流程

浏览器将CORS请求分成两类：
简单请求（simple request）和非简单请求（not-so-simple request）。
# 浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。

# 浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

什么是简单请求？什么是非简单请求？

符合如下条件，就是简单请求

	（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

自己解决跨域问题

演示简单和非简单请求

简单请求，直接就发

会跨域报错：

在network里看到，就发了get请求，是直接打过去的

在后端按如下配置：
这样写简单请求的跨域就解决了，写星就是允许所有

非简单请求：
它是先发送options请求，往头部添加了东西就成非简单请求

依旧是跨域问题：

那么如何允许非简单？也是在响应头中加
但是：

直接写个中间件，在中间件里判断，如果是options请求，做修改加东西，在响应头里写，写在process_response里。

再去配置文件中配置

结果：这样我的头就可以随便添加啥了

但有个第三方模块帮咱们解决了

-如果是简单，直接发送真正的请求
-如果是非简单，先发送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',
)