您好,欢迎访问代理记账网站
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Django的增删改查

1、新建django项目

使用pycharm创建项目

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

  • 安装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

 

9、 添加分类接口

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

10、 添加路由

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

 

11、 分类接口文档

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

请求方法: post

请求参数:

字段类型必填
namestringtrue

返回数据:

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

 

12、 在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>
​

 

13、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>
    ​

 

 

 

删除

 

 

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_idinttrue要修改的对象id
namestringtrue修改的内容

返回数据:

{
    '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>
​

 

 

 


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进