Python实战项目3-前后端连接/首页轮播图表设计

项目前端全局css,全局配置文件

• 整理项目App.vue

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

• router/index.js

const routes = [
    {
        path: '/',
        name: 'Home',
        component: Home,}]
前端项目整理

• HomeView.vue

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

<script>

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

其他页面组件和小组件都删除掉

全局css处理

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

• 去除所有标签样式

1.在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; /* 合并边框 */
}

2.在main.js中配置/全局生效

# 第二步：全局生效 main.js中配置
// 使用全局css样式，只需要导入就会生效
import '@/assets/css/global.css'

全局js

向后端发送请求，请求地址测试阶段
127.0.0.:8000 后期上线地址要变，如果在组件中把地址写死
以后都要改，每个都要改

1.在assets目录下新建js目录，新建settings.js文件

export default {
  BASE_URL:'http://127.0.0.1:8000/api/v1/'
}

2.在main.js引入settings.js 把settings对象放入vue的原型中

Vue.prototype.$settings=settings 
  // 任意组件中使用 
  this.$settings.BASE_URL == http://127.0.0.1:8000/

安装axios

跟后端交互 axio

安装 cnpm install axios -S
把axios在main.js中配置

import axios from 'axios'
Vue.prototype.$axios = axios 
// 任意组件中使用 this.$axios.get()

安装vue-cookies

安装 cnpm install vue-cookies -S
把 vue-cookies在main.js中配置

import cookies from 'vue-cookies'

Vue.prototype.$cookies=cookies  
// 任意组件中使用 this.$cookies.set()

安装elementui

安装 cnpm install element-ui -S
把 element-ui在main.js中配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

安装bootstrap和jquery

**安装 cnpm install **bootstrap@3 -S
**安装 cnpm install **jquery-S
把 bootstrap-jquery在main.js中配置

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'

vue.config.js 配置一下

const { defineConfig } = require('@vue/cli-service')
  module.exports = defineConfig({
    transpileDependencies: true
  })
  const webpack = require("webpack");
  module.exports = {
    configureWebpack: {
      plugins: [
        new webpack.ProvidePlugin({
          $: "jquery",
          jQuery: "jquery",
          "window.jQuery": "jquery",
          "window.$": "jquery",
          Popper: ["popper.js", "default"]
        })
      ]
    }
  };

重启项目后生效

后台主页模块表设计

分析完原型图，首页需要写的接口
轮播图接口
推荐课程接口
推荐老师
学员评论

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

from utils.models import BaseModel
from django.db import models


# 我们发现有些字段，别的表也会有,所以我们抽出一个公共的Base表，只要使用这些字段，就继承这个表(类似与AbstractUser)
class Banner(BaseModel):
    # 创建时间，是否删除，是否展示 继承我们的BaseModel即可
    # 图片名字,图片介绍,图片link地址
    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

因为我们课程详情的表也需要用一些共同的字段，所以我们将公共部分抽出

# 公共表,公共能用到的字段
# Create your models here.
class BaseModel(models.Model):
    created_time = models.DateTimeField(auto_now_add=True,verbose_name='创建时间')
    updated_time = models.DateTimeField(auto_now_add=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 需要加 abstract = True 虚拟表，只用来继承，不在数据库生成！
        abstract = True

并且，将公共的这个模型表放在utils.models.py中，我们用的时候调用即可

后台主页模块轮播图接口

面试题: form 类 和 modelForm的区别
序列化类：

from rest_framework.serializers import ModelSerializer
from .models import Banner


class BannerSerializer(ModelSerializer):
    class Meta:
        model = Banner
        fields = ['title','image','link',]

视图类:

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 django.urls import path, include
from rest_framework.routers import SimpleRouter
from . import views

router = SimpleRouter()
router.register('banner', views.BannerView, 'banner')
urlpatterns = [
    path('',include(router.urls))
]
# urlpatterns += router.urls  两种方式都可以.

录入数据

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

# 使用步骤：
第一步：安装simpleui
pip install django-simpleui
第二步：注册app

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

跨域问题详解

问题描述:
前端发送ajax请求到后端，会有跨域的拦截(报错)
问题出现的原因:
同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现
请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.
比如:我在本地上的域名是127.0.0.1:8000,请求另外一个域名：127.0.0.1:8001一段数据
浏览器上就会报错，个就是同源策略的保护,如果浏览器对javascript没有同源策略的保护,那么一些重要的机密网站将会很危险

已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:8001/SendAjax/ 的远程资源。

原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

CORS(跨域资源共享)简介

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。

浏览器发出CORS简单请求，只需要在头信息之中增加一个Origin字段。

浏览器发出CORS非简单请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。

浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。

只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

CORS两种请求详解

只要同时满足以下两大条件，就属于简单请求

# 请求方法是以下三种方法之一：
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
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

支持跨域，简单请求
服务器设置响应头：Access-Control-Allow-Origin = ‘域名’ 或 ‘*’
支持跨域，复杂请求
由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

• “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
• “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers

Django项目中支持CORS
在返回的结果中加入与允许信息(简单请求)

def test(request):
    import json
    obj=HttpResponse(json.dumps({'name':'lqz'}))
    # obj['Access-Control-Allow-Origin']='*'
    obj['Access-Control-Allow-Origin']='http://127.0.0.1:8004'
    return obj

放到中间件处理复杂和简单请求：

from django.utils.deprecation import MiddlewareMixin
class CorsMiddleWare(MiddlewareMixin):
    def process_response(self,request,response):
        if request.method=="OPTIONS":
            #可以加*
            response["Access-Control-Allow-Headers"]="Content-Type"
        response["Access-Control-Allow-Origin"] = "http://localhost:8080"
        return response

在django中使用django-cors-header解决跨域问题

使用pip安装

pip install django-cors-headers

添加到setting的app中注册

INSTALLED_APPS = (
	...
	'corsheaders',
	...
)

添加中间件

MIDDLEWARE = [  
	...
	'corsheaders.middleware.CorsMiddleware',
	...
]

settings文件下面添加配置

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