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})
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>
<style scoped>
</style>
动态路由传参
有的时候,我们设置的路由不是一成不变的,如: 我们需要跳转到详情,需要通过某个分类查看该分类的下所有的商品等,那么这样的路由其实对应的都应该是一个视图函数,用以展示页面内容,那么如何设计这样的路由,就要涉及到动态路由及路由传参
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