django跨域

最新推荐文章于 2024-07-02 10:54:36 发布
最新推荐文章于 2024-07-02 10:54:36 发布
阅读量80 收藏
点赞数
分类专栏： 笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57803047/article/details/117454776
版权

1、静态路由

urlpatterns属性

urlpatterns是路由文件中的一个全局变量，用来存放路由及视图函数的映射关系

用户发起的请求URL都会首先进入主控制目录下的这个urls.py文件中进行查找匹配

  1. 首先找到urls.py下的urlpatterns全局变量，这是一个路由规则实例的列表数据。

  2. 按照先后定义顺序，进行路由匹配。

  3. 找到第一个匹配项时停止匹配，执行匹配到的视图函数。

  4. 遍历完全，未发现匹配，django进行异常处理

其中urlpatterns中的每一个路由映射规则可以由path或re_path进行构造

注意：Django的路由不考虑HTTP请求方式，仅根据URL进行路由；即，只要URL相同，无论POST、GET等哪种请求方式都指向同一个操作函数

path方法

path(str, view, kwargs=None, name=None)
'''
str：一个匹配对应url地址的规则字符串
view：路由对应的视图函数，并且会自动封装HttpRequest作为第一个参数给这个视图函
kwargs：视图函数的关键字参数
name：该路由的全局命名，可以让我们方便的在django项目中任意部分显示的使用，相当于为url取变量名，接下来全局使用该命名值即可；当对应url路由改变之后，结合路由反向解析使用的地方不需要更改路由
'''

re_path

re_path(regex, view, kwargs=None, name=None)
'''
regex：一个匹配对应url地址的规则字符串
view：路由对应的视图函数，并且会自动封装HttpRequest作为第一个参数给这个视图函
kwargs：视图函数的关键字参数
name：该路由的全局命名，可以让我们方便的在django项目中任意部分显示的使用，相当于为url取变量名，接下来全局使用该命名值即可；当对应url路由改变之后，结合路由反向解析使用的地方不需要更改路由
'''

案例

新闻 分类

1、新建django项目

使用命令创建项目

django-admin startproject projectname

2、 新建app

python manage.py startapp app01

3、 配置settings.py，在settings.py中配置app，切换语言和时区，切换数据库为mysql， 

INSTALLED_APPS = [
    ...
    'app01.apps.App01Config',
]
LANGUAGE_CODE = 'zh-hans'  # 语言

TIME_ZONE = 'Asia/Shanghai'  # 时区

USE_TZ = False  # 让修改的时区生效

# 配置数据库
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',  # 引擎，使用 mysql
        'NAME': 'day04',   # 数据库名称
        'USER': 'root',  # 数据库的登录用户名
        'PASSWORD': 'root1234',  # 数据库的登录的密码
        'HOST': '127.0.0.1',  # 数据库所在的主机
        'PORT': 3306,  # 数据库使用的端口号
    }
}

需要在settings.py所在的目录下init.py中，写入以下内容

import pymysql
pymysql.install_as_MySQLdb()

4、 在后端进行跨域配置

什么是跨域问题？

指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。

django后端跨域

安装django-cors-headers

pip install django-cors-headers

# pip show 模块名，  查看某个模块是否安装过
pip show django-cors-headers

在settings.py下的INSTALLED_APPS中进行配置

INSTALLED_APPS = [
    # 第三方包
    'corsheaders',  # 跨域
    'app01.apps.App01Config',
]

在settings.py下的MIDDLEWARE中配置

MIDDLEWARE = [
    'django.contrib.sessions.middleware.SessionMiddleware',
    # 在这里进行配置跨域 ， 在中间件第三行
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 注释掉csrf这一行，第五行
    # 'django.middleware.csrf.CsrfViewMiddleware',
]

在settings.py中添加变量，允许所有的 源访问

CORS_ALLOW_ALL_ORIGINS = True  # 允许所有的源进行访问

5、 在主路由下配置app,做路由分发

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('app01/', include('app01.urls'))
]

# app01/urls.py
from django.urls import path
from . import views

urlpatterns = [
    
]

6、 在models.py中设计新闻分类

from django.db import models

# Create your models here.


# 在models.py下每新建一个类，就代表在数据库新建一张表
class Cate(models.Model):
    # 类下面的属性，是表中字段
    name = models.CharField(max_length=32)

    def __str__(self):
        return self.name

7、 生成迁移文件和执行迁移文件

python manage.py makemigrations

python manage.py migrate

8、 添加分类接口

from django.views import View
from django.http import JsonResponse

from .models import Cate


class CateView(View):

    def post(self, request):
        # 获取网页提交数据
        name = request.POST.get('name')  # None
        # 判断数据是否完整 没有拿到数据的话，返回消息，数据不完整
        if not name:
            return JsonResponse({'msg': '数据不完整', 'code': 400}, json_dumps_params={'ensure_ascii': False})
        # 如果拿到数据，添加
        Cate.objects.create(name=name)
        return JsonResponse({'msg': '添加成功', 'code': 200}, json_dumps_params={'ensure_ascii': False})

9、 添加路由

from django.urls import path
from . import views

urlpatterns = [
    path('cate/', views.CateView.as_view()),  # 分类增删改查
]

10、 分类接口文档

请求地址： http://127.0.0.1:8000/app01/cate/

请求方法： post

请求参数：

字段类型必填
namestringtrue

返回数据：

# 请求失败，数据为空时的提示
{
    'msg': '数据不完整',
    'code': 400
}
# 请求成功
{
    'msg': '添加成功',
    'code': 200
}

11、 在vue下新建AddCate.vue页面，实现页面表单功能

创建vue： vue init webpack myvue

安装axios: cnpm install --save axios

1、 配置全局axios

在src文件夹下main.js当中，进行配置

import axios from 'axios'
Vue.prototype.axios = axios
axios.defaults.baseURL = 'http://127.0.0.1:8000'

2、 在src下的components下新建AddCate.vue页面

<template>
    <div>
        <!-- 在这里写添加分类的表单 -->
        <div>
            <form action="">
                <p>分类名称： <input type="text" v-model="name"></p>
                <p><button>添加</button></p>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            name: ''
        }
    },
    methods: {

    },
    created() {

    }
}
</script>

<style scoped>

</style>

12、django+vue+浏览器执行 流程讲解

展示数据

1、展示数据接口

class CateView(View):

    def get(self, request):
        # 1、 获取所有的数据
        cate_list = Cate.objects.all()
        # 2、把获取出来的数据转成列表
        cate_data = [{'id': i.id, 'name': i.name} for i in cate_list]
        # 3、 返回数据以json形式返回
        return JsonResponse(cate_data, safe=False, json_dumps_params={'ensure_ascii': False})

2、 展示数据接口文档

请求地址： http://127.0.0.1:8000/app01/cate/

请求方法： get

请求参数： 无

请求示例： http://127.0.0.1:8000/app01/cate/

接口格式： json

返回数据格式：

[
	{
		'id': 1,
		'name': '军事'
	},
	{
		'id': 2,
		'name': '财经'
	}
]

3、 新建vue页面，请求数据，并展示

<template>
    <div>
        <table class="t1">
            <tr>
                <td>编号</td>
                <td>名称</td>
                <td>操作</td>
            </tr>
            <tr v-for="cate in cate_list" :key="cate.id">
                <td>{{cate.id}}</td>
                <td>{{cate.name}}</td>
                <td>
                    <button>编辑</button>
                    <button>删除</button>
                </td>
            </tr>
        </table>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cate_list: []
        }
    },
    methods: {
        // 获取分类的方法
        getCate() {
            // 在这里执行分类的方法的逻辑
            // 向后台请求数据
            this.axios({ // axios默认请求是get，所以可以不用写method: get
                url: '/app01/cate/'
            }).then(res => {
                console.log(res.data)
                this.cate_list = res.data
            })
        }
    },
    created() {
        // 在页面加载完成之前调用
        this.getCate()
    }
}
</script>

<style scoped>
.t1 {
    width: 50%;
    margin: 30px auto;
}
</style>

2、动态路由

去详情页面

跳转路由，确定要获取的详情的信息

1、 点击名称，跳转页面，使用router-link

<router-link :to="{name: 'Detail', query: {'cate_id': cate.id}}">{{cate.name}}</router-link>

2、 在详情页面进行操作

获取路由当中的分类id

<script>
export default {
    data() {
        return {
            // 1、获取路由当中的分类id
            cate_id: this.$route.query.cate_id
        }
    },
}
</script>

通过获取到的分类id，去后台查询所对应的数据

<script>
export default {
    data() {
        return {
            // 1、获取路由当中的分类id
            cate_id: this.$route.query.cate_id
        }
    },
    methods: {
        getDetail() {
            this.axios({
                url: '/app01/detail/?cate_id=' + this.cate_id
            }).then(res => {
                console.log(res.data)
            })
        }
    },
    created() {
        this.getDetail()
    }
}
</script>

展示数据

<template>
    <div>
        {{cate.id}} ------ {{cate.name}}
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 1、获取路由当中的分类id
            cate_id: this.$route.query.cate_id,
            cate: {}
        }
    },
    methods: {
        getDetail() {
            this.axios({
                url: '/app01/detail/?cate_id=' + this.cate_id
            }).then(res => {
                console.log(res.data)
                this.cate = res.data
            })
        }
    },
    created() {
        this.getDetail()
    }
}
</script>

<style scoped>

</style>

路由分发

路由分发的概念

我们的路由编写都是在项目主要目录下的urls.py文件中，但是如果app有很多的话，这么多路由都写到一起，明显是一件很不方便管理的事情

其实在之前的练习中，我们使用的方式均是路由分发，每个子app都拥有自己独立的urls.py路由映射文件，而主控路由文件里只需要使用include函数导入子app下路由文件即可，这就是路由分发

include路由分发实现

from django.contrib import admin
from django.urls import path,include
urlpatterns = [
    path('admin/', admin.site.urls),
    path('app01/',include("app01.urls"))  # 使用include 实现路由分发，找到子app下的路由文件
]

路由分发为我们带来的好处有很多，可以让我们在多个app的项目中更加方便有效的管理每一个路由 并且也可以让我们的用户在访问时看到浏览器中的URL地址更加赏心悦目

weixin_57803047
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
2021-06-01
weixin_57047479的博客
06-01 530
day04 一、 昨日内容回顾 1、 JsonResponse return JsonResponse(data, safe=False, json_dumps_params={'ensure_ascii': False}) 2、 HttpResponse return HttpResponse(json.dumps(data, ensure_ascii=False)) 3、 类视图 类视图： 结构清晰 更强的复用性 需要继承View: from django.view..
Django 跨域
weixin_57047479的博客
06-02 250
一、 昨日内容回顾 1、 JsonResponse return JsonResponse(data, safe=False, json_dumps_params={'ensure_ascii': False}) 2、 HttpResponse return HttpResponse(json.dumps(data, ensure_ascii=False)) 3、 类视图 类视图： 结构清晰 ​ 更强的复用性 需要继承View: from django.views impo...
django增删改查模块
01-23
django数据库记录前端增删改查，可以直接修改完善使用。
前后端分离django-restframework——解决跨域请求
最新发布
小蜜蜂vs码农
07-02 1267
前后端分离django-restframework——解决跨域请求
Django 对数据库进行增删改查
热门推荐
白杨的专栏
11-01 1万+
引言假设有如下的model定义，下面将对该model对应的数据库进行增删改查操作。 class Student(): name = models.CharFiled(max_length = 30) age = models.IntegerFiled()增方法一： stu1 = Student(name="Aaron", age=23) stu1.
django增删改查
weixin_39349045的博客
02-27 1405
import os,django os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'tqz_django.settings') django.setup() #指定django的配置 from userr import models # # print( models.Category.objects.all() ) #查询所有的数据 # # for obj in models.Category.objects.all(): # print(obj.
DJANGO增删改查
m0_37317411的博客
04-26 1585
@流一、Django的工作 1：用户通过浏览器输入相应的 URL 发起 HTTP 请求（一般是 GET/POST） 2：Django 接受到请求，检测 urls.py 文件，找到和用户输入的 URL 相匹配的项，并调用该 URL 对应的视图函数（view），例如，通常来说 urls.py 文件里的代码是这样的： url(r’^homepage/$', views.home_page) 则当用户输入的 URL 为 www.某个网址.com/homepage 时，django 检测到该 URL 与上面的代码 匹
django配置跨域
Chu_Jin_can的博客
08-13 212
什么是跨域？ 跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。通常所说的跨域是狭义的，是由浏览器同源策略限制的一类请求场景。从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域。 为了能够使前端能够访问到Django脚本，我们就需要跨域了。这里主要说明怎么从django跨域。 首先我们得先配置一个跨域所需要的包 django-cors-header...
Django跨域请求问题的解决方法示例
12-23
本文主要给大家介绍了关于Django跨域请求问题解决的几种方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。 几种方法： 使用django-cors-headers全局控制 使用JsonP，只能用于Get方法 在...
Django跨域请求CSRF的方法示例
01-20
web跨域请求 1.为什么要有跨域限制 举个例子： 1.用户登录了自己的银行页面 http://mybank.com，http://mybank.com向用户的cookie中添加用户标识。 2.用户浏览了恶意页面 http://evil.com。执行了页面中的恶意AJAX...
Django跨域资源共享问题(推荐)
01-20
最近做了一个前后端分离的web项目，其中我司职后端，使用django框架。在前后端集成测试的时候，就遇到了一些web安全相关的问题，cors跨域资源共享就是其中之一。 cors问题介绍 跨域资源共享(CORS) 是一种机制，它...
django对数据库的增删改查
Little_Fish_KEKE的博客
11-29 6553
文章目录Django对数据库的操作(增删改查篇)1.增加数据1.save方法2.create方法2.修改数据1.save方法2.update方法3.删除数据1.delete方法2.objects.filter().delete()方法查询数据1.基础条件查询基础查询:get:all:count:过滤查询:filter:exclude:精确查询:模糊查询:startswith 和 endswith : 以指定开头和结尾空查询:范围查询:比较查询:日期查询:日期查询: Django对数据库的操作(增删改查篇)
Django之数据库增删改查
m0_61394115的博客
11-16 331
【代码】Django之数据库增删改查。
03-django中的增删改查
高调做事，低调做人！
10-26 288
Django   1.Django是一个基于python的高级web开发框架。   2.Django安装       http://www.runoob.com/django/django-install.html 3.mac 上面安装pip      https://blog.csdn.net/mike__lee/article/details/72593684 4.创建Djan...
Django数据库的增删改查
李嘉豪的博客
04-01 6991
目录 一、搭建sqlite数据库 1、修改setting设置 2、数据库同步 3、使用sqlite数据库 二、Django 数据库操作 （1）增 方法一：利用类实例化 方法二：调用objects的create方法 （2）查 （3）删 （4）改 我们以sqlite3数据库为例 一、搭建sqlite数据库 1、修改setting设置 在django项目下的项目名下的set...
Django教程——数据库操作（增删改查）
霖hero
05-28 969
在上篇文章中我们学习了Django教程——模型，这篇文章学习Django教程——数据库操作（增删改查）。定义好模型类后，在终端执行如下命令进行迁移操作，将模型映射到数据库，大家可以参考之前的文章——Django框架——模型来进行上面的步骤。我们在views.py文件中编写视图函数实现数据库操作——增删改查，直接访问对应的URL即可。
Django基本增删改查
ntwting的博客
03-21 320
Django 创建项目 djnago-admin startproject web #(项目名) 启动 python manage.py runserver 创建应用 python manage.py startapp myhome(应用名) 路由 应用名下urls目录 位置参数 关键字参数 (?P<变量名>[]) 默认参数 反向解析 reverse('路由名') 视图 v...
Django——实现增删改查总结
zy010101博客
01-13 8793
Django实现增删改查，主要是依赖于models来实现的。下面是一个非常简单的models.py文件，该文件只有一个model，名为Publisher。models.py文件中每一个类都对应于数据库中的一张表。 这个类中定义的变量就是数据库中表的相应字段。只不过现在Django给我们统一了数据库的操作，程序开发者无须考虑数据库语句的操作，也无需考虑是什么数据库。因为开发者只需要对model进行操作即可实现增删改查。 from django.db import models # Create you
Django实现简单的增删改查
cuishao
10-31 1万+
一，需求分析 二，设计模型类（数据库表）models.py from django.db import models &quot;&quot;&quot; 实体类 &quot;&quot;&quot; class Department(models.Model): dname = models.CharField(max_length=100,unique=True,null=False,verbose_name=&quo
django跨域问题404
05-30
Django跨域问题通常会返回404错误。这是因为浏览器的同源策略导致不能直接从一个域名的网页访问另一个域名的资源。如果你的Django项目中使用了AJAX来请求另一个域名的资源，浏览器就会拒绝这个请求，从而返回404错误...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值