最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

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

来源：博客园

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

  • 整理项目App.vue
  • router/index.js
const routes = [    {        path: "/",        name: "Home",        component: Home,}]前端项目整理
  • HomeView.vue
<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 BaseModelfrom 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 ModelSerializerfrom .models import Bannerclass BannerSerializer(ModelSerializer):    class Meta:        model = Banner        fields = ["title","image","link",]

视图类:

from rest_framework.viewsets import GenericViewSetfrom rest_framework.mixins import ListModelMixinfrom .models import Bannerfrom .serializer import BannerSerializerfrom utils.common_response import APIResponseclass 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, includefrom rest_framework.routers import SimpleRouterfrom . import viewsrouter = SimpleRouter()router.register("banner", views.BannerView, "banner")urlpatterns = [    path("",include(router.urls))]# urlpatterns += router.urls  两种方式都可以.

录入数据

# 主站前后端分离# 后台管理使用django 的admin做的--->simpleui# 使用步骤：第一步：安装simpleuipip 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两种请求详解

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

# 请求方法是以下三种方法之一：HEADGETPOST# HTTP的头信息不超出以下几种字段：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-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 MiddlewareMixinclass 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 = TrueCORS_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")

关键词： 同时满足 创建时间 资源共享