路由层

最新推荐文章于 2023-09-23 14:04:10 发布
最新推荐文章于 2023-09-23 14:04:10 发布
阅读量150 收藏
点赞数 2
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_51571602/article/details/117447642
版权

目录

一、静态路由

          urlpatterns属性

          path方法

          re_path

          案例

二、动态路由

 

一、静态路由

          urlpatterns属性

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

               注意：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项目

                            使用pycharm创建项目

                             film--newProject

                          使用命令创建

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后端跨域

                         1）安装django-cors-headers

pip install django-cors-headers

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

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

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

                         3）在settings.py下的MIDDLEWARE中配置

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

                         4）在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

请求参数：

 返回数据       

# 请求失败，数据为空时的提示
{
    '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>

 

二、动态路由

          去详情页面

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

          1.点击名称，跳转页面，使用roter-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>

 

weixin_51571602
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Django之路由层
09-18
Django之路由层 Django之路由层是Django框架中的一部分，主要负责将URL请求映射到对应的视图函数上。这个层次结构类似于文件系统的目录结构，用于组织和管理项目中的URL请求。 一、简单的路由配置 Django之路由层...
Django 路由分发
The的博客
06-01 869
一、 静态路由 urlpatterns属性 urlpatterns是路由文件中的一个全局变量，用来存放路由及视图函数的映射关系 用户发起的请求URL都会首先进入主控制目录下的这个urls.py文件中进行查找匹配 首先找到urls.py下的urlpatterns全局变量，这是一个路由规则实例的列表数据。 按照先后定义顺序，进行路由匹配。 找到第一个匹配项时停止匹配，执行匹配到的视图函数。 遍历完全，未发现匹配，django进行异常处理 其中urlpatterns中的每一个路由映射规则可以由path或re_
【Django】路由分发规则
huajiu520的博客
06-08 617
一、课程导入 （一）复习 创建项目（django-admin startproject XXX） 创建应用（python manage.py startapp XXX） 配置应用、模板、数据库、静态资源、媒体资源 内置指令（30个，必须了解每个指令的具体作用） （二）路由 路由称为URL (Uniform Resource Locator - 统一资源定位符)，也可以称为URLconf， 是对可以从互联网上得到的资源位置和访问方法的一种简洁表示，是互联网上标准资源的地址。互联网上每个文件都有一个唯一的路由，
Django之路由分发
最新发布
xiaoyu070321的博客
09-23 867
很多时候，我们在访问一些网站时，网址最后都会有个/，那么如果不加/会发生什么？301，也就是重定向发生错误，那么该如何解决？但是并不建议更改，因为会增加服务器的负担，这里大家仅仅只需要知道解决办法做以了解就好。
Django设置路由分发规则
m0_61604047的博客
01-05 516
（一）复习 创建项目（django-admin startproject XXX） 创建应用（python manage.py startapp XXX） 配置应用、模板、数据库、静态资源、媒体资源 内置指令（30个，必须了解每个指令的具体作用） （二）路由 路由称为URL (Uniform Resource Locator- 统一资源定位符)，也可以称为URLconf， 是对可以从互联网上得到的资源位置和访问方法的一种简洁表示，是互联网上标准资源的地址。互联网上每个文件都有一个唯一的路由，用于指出网站文件
2021-06-01
weixin_57047479的博客
06-01 465
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路由层URLconf作用及原理解析
09-27
主要介绍了Django路由层URLconf作用及原理解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Django 路由层URLconf的实现
09-18
主要介绍了Django 路由层URLconf的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
无线传感器路由层安全协议
05-29
介绍了无线传感器无线网络容易遭受到的攻击，以及对LEACH协议的改进算法，以及进行仿真实验得到的结果
Django之路由层的实现
12-25
一、简单的路由配置 from django.urls import path,re_path from app01 import views urlpatterns = [ re_path(r'^articles/2003/$', views.special_case_2003), re_path(r'^articles/([0-9]{4})/$', views.year_...
利用django自带的routers实现对url路由的分发
07-13
利用django自带的routers实现对url路由的分发,可以减少对url路由表的定义,并且可以实现代码的解耦,极大的节省了开发的时间。
Django设置路由分发规则2
m0_61604047的博客
01-05 327
（四）路由的定义规则 （1）每个urls.py文件的路由地址必须在列表urlpatterns里定义，换句话说，每个urls.py必须设有一个列表urlpatterns，该列表是用于定义路由信息。 （2）每条路由是由函数path定义，函数path设置了3个参数：第一个参数是设置具体的路由地址；第二个参数是指向项目应用的views.py的某个视图函数或视图类，负责处理路由的业务逻辑；第三个参数为name='XXX’，这是函数path的可选参数，该参数是命名路由地址。 （3）如果函数path第二个参数使用内置
【vue Django 前后端分离项目】1.2 配置路由
xiaobai_1900的博客
10-03 480
这就是简单的配置路由
vue与django跨域问题
picoor的博客
12-14 672
问题出现环境：使用vue cli工具进行前端开发，在组件中使用axios向 django 服务器发起get请求 vue cli 服务器地址为http://192.168.11.156:8080/#/ 请求的目的地址为http://192.168.11.156:8000/polls/home vue cli工具服务器默认使用8080端口，django 默认使用8000 端口，端口不一致，所以跨...
Django中的路由分发（This is the best 宝典！看这一个就学会啦！！）
LaBi007的博客
10-12 1127
Django路由分发配置！宝典！
Day4路由层
weixin_60677608的博客
04-25 75
路由层的大体概括 4.1.静态路由 4.1.1静态路由的匹配方式 4.2.动态路由 4.2.1 参数传递 4.2.2 路由转换 4.2.3 传参和get传参 4.3.路由分发（重点） 4.3.1概念 4.3.2Include的实现 4.1.1静态路由的匹配方式 urlpatterns属性: 概念： 是路由的全局变量，存放视图模版的映射 过程： 先定义from后路由匹配path或re_path path方法 from django.urls import path # 定义path方法 from myapp
（一）框架搭建，前端路由设置，自定义寻找指定路径（Django+Vue+Mysql，数据库管理数据分析网站）
热门推荐
w2020_9_25的博客
04-03 1万+
该系列文章作者从零开始，0基础直接上手制作网站，总结了全程遇到的困难和小白应该注意的点，我会尽可能把可能出现的报错涵盖在这里面，有不足敬请指出！
03 路由层
weixin_43984157的博客
09-03 255
03 路由层 1. 路由的作用 路由即请求地址与视图函数的映射关系，如果把网站比喻为一本书，那路由就好比是这本书的目录，在Django中路由默认配置在urls.py中 路由匹配 # 路由匹配 url(r'test',views.test), url(r'testadd',views.testadd), # 首页匹配 url(r'^$',views.home) ''' url方法第一参数是正则表达式 只要第一参数正则表达式能够匹配到内容，那么就会立刻停止往下匹配，直接执行对应的视图函数 你在输入url的时
[vue3+django]升级_权限功能+路由设置+动态路由
weixin_45039579的博客
04-30 982
一、背景 要对vue3项目进行升级，主要是添加用户权限，根据不同用户展示不同路由。 二、思路 1.对django后端进行处理，包括添加权限信息列 2.对后端登录接口进行处理，将权限信息通过response返回前端 3.前端将权限信息存入Vuex和sessionStorage中 三、操作 后端 后端的具体表，在models.py中添加auth，包括common和admin两种代表普通用户和管理员 我们项目中login接口返回的数据 在这里对auth字段进行提取，存入data中，随response发回前端。
gorm中功能写在服务层还是路由层还是接口层
03-28
路由层通常不包含任何业务逻辑或数据访问代码。 接口层负责处理数据传输和数据格式化。接口层可以处理不同的数据格式，如JSON、XML、HTML等。接口层通常不包含任何业务逻辑或数据访问代码，它只是将数据从服务层...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值