Django+Vue实现增删改查操作

一、静态路由urlpatterns属性urlpatterns是路由文件中的一个全局变量，用来存放路由及视图函数的映射关系用户发起的请求URL都会首先进入主控制目录下的这个urls.py文件中进行查找匹配首先找到urls.py下的urlpatterns全局变量，这是一个路由规则实例的列表数据。按照先后定义顺序，进行路由匹配。找到第一个匹配项时停止匹配，执行匹配到的视图函数。遍历完全，未发现匹配，dj

楼下安同学

2725人浏览 · 2021-06-02 17:55:32

楼下安同学 · 2021-06-02 17:55:32 发布

一、静态路由

urlpatterns属性

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

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

首先找到urls.py下的urlpatterns全局变量，这是一个路由规则实例的列表数据。
按照先后定义顺序，进行路由匹配。
找到第一个匹配项时停止匹配，执行匹配到的视图函数。
遍历完全，未发现匹配，django进行异常处理

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

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

二、大纲

在这里插入图片描述

准备工作：新建Django项目，配置文件，路由，设置跨域，新建Vue项目，配置路由，设计数据库表（Cate id和name字段）、生成迁移文件并且执行迁移文件

三、增加

添加分类接口(增加)

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

添加路由

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

分类接口文档

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

请求方法： post

请求参数：

字段	类型	必填
name	string	true

返回数据：

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

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

配置全局axios

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

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

<template>
   <form action="">
     <p>分类名称： <input type="text" v-model="name"></p>
     <p><button>添加</button></p>
    </form>
</template>

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

四、展示数据

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>

五、删除

1、删除接口

class CateView(View):
    
    def delete(self, request):
        # 1、获取路由当中的参数
        cate_id = request.GET.get('cate_id')
        # 2、获取要删除的对象
        # pk 代表主键
        try:
            cate_obj = Cate.objects.get(pk=cate_id)
        except Cate.DoesNotExist:
            return JsonResponse({'msg': '获取分类不存在', 'code': 400})
        # 3、删除
        cate_obj.delete()
        # 4、删除成功，返回消息
        return JsonResponse({'msg': '删除成功', 'code': 200})

django使用get查询获取不到数据所抛出的异常，需要使用try except进行异常捕获。

解决方法

try:
    cate_obj = Cate.objects.get(pk=cate_id)
# get查询的哪一张表，就对哪一张表进行异常捕获。
except Cate.DoesNotExist:
    retrun JsonResponse({'msg': '分类不存在', 'code': 400})

2、接口文档

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

请求方法： delete

请求参数： cate_id

请求示例： http://127.0.0.1:8000/app01/cate/?cate_id=1

返回数据：json

数据格式：

{
    'msg': '删除成功',
    'code': 200
}

3、在ShowCate.vue页面当中，删除按钮上添加点击事件

<template>
	<button @click="delCate(cate.id)">删除</button>
</template>
<script>
export default {
    methods: {
        // 删除分类
        // 删除分类
        delCate(cate_id) {
            console.log(cate_id)
            // 向删除的接口发送请求
            this.axios({
                url: '/app01/cate/?cate_id=' + cate_id,
                // 默认发送get请求，所以需要添加method为delete这个请求方法
                method: 'delete'
            }).then(res => {
                console.log(res.data)
            })
        },
    },
}
</script>

六、修改

1、为编辑按钮添加点击事件

<template>
	<button @click="toUpdate(cate.id)">编辑</button>
</template>

<script>
export default {
    methods: {
        // 去修改页面
        toUpdate(cate_id) {
            // 跳转页面
            this.$router.push({
                name: 'UpdateCate',
                query: {'cate_id': cate_id}
            })
        },
    },
}
</script>

2、新建UpdateCate.vue页面

3、为UpdateCate.vue添加路由

import Vue from 'vue'
import Router from 'vue-router'
import UpdateCate from '@/components/UpdateCate'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/update_cate',  // 浏览器地址栏当中输入的路径
      name: 'UpdateCate',  // 使用$router.push跳转页面时，所带的参数
      component: UpdateCate  // 跳转到路径所批定页面以后，所显示 的vue页面
    }
      
  ]
})

4、在页面加载完成之前获取要修改的对象的数据(要有一个单独获取数据的接口)

<script>
export default {
    data() {
        return {
            cate_id: this.$route.query.cate_id,
            cate: {},
            name: ''
        }
    },
    methods: {
        // 获取分类的详情信息
        getDetail() {
            this.axios({
                url: '/app01/detail/?cate_id=' + this.cate_id
            }).then(res => {
                console.log(res.data)
                this.cate = res.data
                this.name = res.data.name
            })
        }
    },
    created() {
        // 在页面加载完成之前获取分类的详情信息, 调用getDetail() 这个方法
        this.getDetail()
    }
}
</script>

5、把获取到数据展示出来，确认一下原数据是什么，要修改成什么样？

<template>
    <div>
        {{cate_id}}
        <div>
            原数据： {{cate.name}}
        </div>
        <div>修改内容： <input type="text" v-model="name"></div>
        <div><button>修改</button></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cate_id: this.$route.query.cate_id,
            cate: {},
            name: ''
        }
    },
    methods: {
        // 获取分类的详情信息
        getDetail() {
            this.axios({
                url: '/app01/detail/?cate_id=' + this.cate_id
            }).then(res => {
                console.log(res.data)
                this.cate = res.data
                this.name = res.data.name
            })
        }
    },
    created() {
        // 在页面加载完成之前获取分类的详情信息, 调用getDetail() 这个方法
        this.getDetail()
    }
}
</script>

6、为修改添加点击事件，获取到输入的内容

<template>
    <div>
        <div><button @click="updateCate">修改</button></div>
    </div>
</template>

<script>
export default {
    methods: {
        // 修改分类
        updateCate() {
            console.log(this.name)
        },
    },
}
</script>

<style scoped>

</style>

7、修改数据的接口

class CateView(View):
    
    def put(self, request):
       
        # 2、 获取提交的修改的数据
        print(request.body)
        name_str = (request.body).decode()
        # 使用json把获取内容转成字典
        name_dict = json.loads(name_str)
        cate_id = name_dict.get('cate_id')
        name = name_dict.get('name')
        # 3、通的对象的id查询要修改的对象
        cate_obj = Cate.objects.get(pk=cate_id)
        # 4、为查询对象里面的属性进行重新赋值，并保存
        cate_obj.name = name
        cate_obj.save()
        # 5、修改成功，返回消息
        return JsonResponse({'msg': '修改成功', 'code': 200})

8、修改的接口文档

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

请求方法： put

请求参数：

字段	类型	必填	说明
cate_id	int	true	要修改的对象id
name	string	true	修改的内容

返回数据：

{
    'msg': '修改成功',
    'code': 200
}

9、完成修改功能

<template>
    <div>
        {{cate_id}}
        <div>
            原数据： {{cate.name}}
        </div>
        <div>修改内容： <input type="text" v-model="name"></div>
        <div><button @click="updateCate">修改</button></div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            cate_id: this.$route.query.cate_id,
            cate: {},
            name: ''
        }
    },
    methods: {
        // 修改分类
        updateCate() {
            console.log(this.name)
            this.axios({
                url: '/app01/cate/',
                method: 'put',
                data: {'cate_id': this.cate_id, 'name': this.name}
            }).then(res => {
                // 在控制台打印返回结果
                console.log(res.data)
            })
        },
        // 获取分类的详情信息
        getDetail() {
            this.axios({
                url: '/app01/detail/?cate_id=' + this.cate_id
            }).then(res => {
                console.log(res.data)
                this.cate = res.data
                this.name = res.data.name
            })
        }
    },
    created() {
        // 在页面加载完成之前获取分类的详情信息, 调用getDetail() 这个方法
        this.getDetail()
    }
}
</script>

动态路由传参

有的时候，我们设置的路由不是一成不变的，如：我们需要跳转到详情，需要通过某个分类查看该分类的下所有的商品等，那么这样的路由其实对应的都应该是一个视图函数，用以展示页面内容，那么如何设计这样的路由，就要涉及到动态路由及路由传参

1、通过分类id获取分类的详情信息

**2、动态路由配置 **

路由通过尖括号进行分组匹配，使用int以及str内置转换器将连接对应部分的值进行转换；并将匹配到的结果传递到视图函数对应的参数位置上；

访问： http://127.0.0.1:8000/app01/detail/1/

其中1将作为cate_id的参数被接收。

其他内置Path转换器，可以将我们的路由参数规定为指定类型

'''
str：匹配除了路径分隔符（`/`）之外的非空字符串，这是默认的形式
int：匹配正整数，包含0
slug：匹配字母、数字以及横杠、下划线组成的字符串
uuid：匹配格式化的uuid，如 075194d3-6885-417e-a8a8-6c931e272f00
path：匹配任何非空字符串，包含了路径分隔符
'''

动态路由传参与GET传参的异同

动态路由传参，参数需要参与路由匹配，在路由匹配中获取参数
GET参数，参数部分不需要参与路由匹配，在视图中获取参数

3、路由分发

路由分发的概念

我们的路由编写都是在项目主要目录下的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地址更加赏心悦目

跨域

前后端分离，同源策略问题

端口不同

python的包管理工具 pip

pip install 包名

pip show 包名 # 查看某一个包是否安装

cnpm install --save 包名 node.js包管理工具： cnpm

pip install django-cors-headers 安装django后台跨域包

配置跨域

# settings.py
INSTALLED_APPS = [
    'corsheaders',
]

# 中间件
MIDDLEWARE = [
    # 第三行
    'corsheaders.middleware.CorsMiddleware',
    
    # 把第五行注释
]

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

django管理命令

# 创建项目的命令
django-admin startproject projectname

# 创建app
进入项目： cd projectname
python manage.py startapp appname

# 生成迁移文件
python manage.py makemigrations

# 执行迁移文件
python manage.py migrate

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

跨域

前后端分离，同源策略问题

端口不同

python的包管理工具 pip

pip install 包名

pip show 包名 # 查看某一个包是否安装

cnpm install --save 包名 node.js包管理工具： cnpm

pip install django-cors-headers 安装django后台跨域包

配置跨域

# settings.py
INSTALLED_APPS = [
    'corsheaders',
]

# 中间件
MIDDLEWARE = [
    # 第三行
    'corsheaders.middleware.CorsMiddleware',
    
    # 把第五行注释
]

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

django管理命令

# 创建项目的命令
django-admin startproject projectname

# 创建app
进入项目： cd projectname
python manage.py startapp appname

# 生成迁移文件
python manage.py makemigrations

# 执行迁移文件
python manage.py migrate

点赞的最近三日内有好事发生哦，关注我一起学习IT！！！感谢支持！

Vue

前往低代码交流专区

更多推荐

Vue里echarts根据页面大小动态调整/自适应

Vue

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^