Django + Django Rest Framwork + Vue 实现 增删改查

[TOC]

主要分两步

• Django+Rest实现API
• Vue 利用API接口实现增删改查

目前已经完成

• 增
• 删
• 改
• 查

Django + Rest Framework 实现API

省略创建Django项目和导出数据等操作

首先安装djangorestframework，我们使用conda安装，由于默认的conda没有这个库，所以需要运行下面命令解决

 conda config --add channels conda-forge
 conda install djangorestframework

安装成功后，我们在Django项目的setting.py中引入

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    # 引入我们的rest_framwwork
    'rest_framework',
    # 我们自己的应用
    'news'
]

先看一下我们的news应用，这个应用自己创建，这里不是重点。我们看一下news中的models.py数据

class Column(models.Model):
    # 字段信息 
    name = models.CharField('栏目名称', max_length=256)
    # db_index 自增序列
    slug = models.CharField('栏目网址', max_length=256, db_index=True)
    intro = models.TextField('栏目简介', default='')

    nav_display = models.BooleanField('导航显示', default=False)
    home_display = models.BooleanField('首页显示', default=False)
    
    # 下面部分可有可无，在这里不做重点
    def __str__(self):
        return self.name
    def get_absolute_url(self):
        return reverse('news:column', args=(self.slug,))

    class Meta:
        verbose_name = '栏目'
        verbose_name_plural = '栏目'
        ordering = ['name']

接下来我们在news目录下创建一个 serializer.py文件。这个文件的作用是用来将我们数据库内容序列化成json格式。该文件内容如下

from rest_framework import serializers
from .models import Column, Article

class ColumnSerializer(serializers.ModelSerializer):    
    class Meta:
        model = Column
        fields = '__all__'

然后我们在views.py中设置一个模型集合，代码如下

from .models import Column, Article

from rest_framework import viewsets
from .serializer import ColumnSerializer

class ColumnViewSet(viewsets.ModelViewSet):
    queryset = Column.objects.all()
    serializer_class = ColumnSerializer

接下来我们去urls.py中映射我们的url和view

先在news中建立一个urls.py文件，再到根目录中的urls.py使用下面代码引入我们的news中的urls

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

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

再到news中的urls.py中注册刚刚的集合，代码如下

from django.urls import path, re_path, include
# 引入rest framework中的routers
from rest_framework import routers
from . import views

app_name = 'news'

# framework中的路由进行了封装
router = routers.DefaultRouter()
router.register(r'column', views.ColumnViewSet)
router.register(r'article', views.ArticleViewSet)

# 前面三个path可以忽略，这是我自己之前写的
urlpatterns = [
    path('', views.index, name='index'),
    re_path(r'column/(?P<column_slug>[^/]+)/$', views.column_detail, name='column'),
    re_path(r'article/(?P<pk>\d+)/(?P<article_slug>[^/]+)/$', views.article_detail, name='article'),
    # 主要代码
    path(r'api/', include(router.urls)),
]

最后在运行我们的程序，输入地址http://127.0.0.1:8000/api/可以看到下面界面即证明成功

3XlWxfVZrBn4aYH

点进去可以看到我们的API对数据进行对请求

Vue中实现增删改查

Vue的创建以及一些组件的初始化不做介绍

我们创建一个请求API的测试组件，比如我这里叫Rest.vue,然后在路由中引入。因为需要发送请求，所以我们使用axios实现请求，axios自行安装。我们在main.js中引入

import axios from 'axios
Vue.prototype.$http = axios

接下来在Rest.vue编写我们的视图以及一些相关方法

<template>
  <div class="box">
    <h1>{{title}}</h1>
    <ul>
      <li
        v-for="(column, index) in columns"
        :key="index"
      >{{index}} - {{column.name}} - {{column.slug}} - <button @click="deleteColumn(column.id)">x</button>
      </li>
    </ul>
    <form action>
      name：
      <input type="text" placeholder="book name" v-model="columnEntity.name" />
      <br />slug：
      <input type="text" placeholder="book author" v-model="columnEntity.slug" />
      <br />intro：
      <input type="text" placeholder="book author" v-model="columnEntity.intro" />
      <br />nav_display：
      <input
        type="checkbox"
        placeholder="book author"
        v-model="columnEntity.nav_display"
      />
      <br />home_display：
      <input
        type="checkbox"
        placeholder="book author"
        v-model="columnEntity.home_display"
      />
      <br />
    </form>
    <button type="submit" @click="submit()">submit</button>
    <button @click="rediect">重定向</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: "测试API",
      columns: null,
      columnEntity: {
        name: "",
        slug: "",
        intro: "",
        nav_display: false,
        home_display: false
      }
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    submit() {
      console.log(this.columnEntity);
      this.$http
        .post("http://127.0.0.1:8000/api/column/", {
          name: this.columnEntity.name,
          slug: this.columnEntity.slug,
          intro: this.columnEntity.intro,
          nav_display:
            this.columnEntity.nav_display === null
              ? false
              : this.columnEntity.nav_display,
          home_display:
            this.columnEntity.home_display === null
              ? false
              : this.columnEntity.home_display
        })
        .then(res => {
          console.log(res);
          this.getData();
          // 成功的话，重定向到这个页面
          // this.rediect();
        });
    },
    rediect() {
      // 该方法定向无法定向到当前路由
      // this.$router.push("Rest");
      window.location.reload();
    },
    getData() {
      this.$http.get("http://127.0.0.1:8000/api/column/").then(res => {
        console.log(res);
        this.columns = res.data;
      });
    },
    deleteColumn(id) {
        console.log(`删除 ->${id}`);
        this.$http.get('http://127.0.0.1:8000/api/column/', {
            id: id
        }).then(res => {
            console.log(res);
            
        })
    }
  }
};
</script>

<style>
</style>

这里存在跨域请求的问题，我们解决一下，跨域的话需要在服务端进行解决。所以我们需在Django项目中使用django-cors-headers。

先进行安装 conda install django-cors-headers

再到settings.py中注册我们的应用并进行如下配置

INSTALLED_APPS = [
    ....,
    # 支持跨域
    'corsheaders'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware', # 需注意与其他中间件顺序，这里放在最前面即可
    ...
]

# 支持跨域配置开始
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True 

最后我们先看一下我们的界面

pSkfhqexbsTFgYI

我们看一下获取列表的请求是如何发送的

getData() {
  this.$http.get("http://127.0.0.1:8000/api/column/").then(res => {
    console.log(res);
    this.columns = res.data;
  });
},

然后看一下添加一条数据的请求代码

submit() {
  console.log(this.columnEntity);
  this.$http
    .post("http://127.0.0.1:8000/api/column/", {
      name: this.columnEntity.name,
      slug: this.columnEntity.slug,
      intro: this.columnEntity.intro,
      nav_display:
        this.columnEntity.nav_display === null
          ? false
          : this.columnEntity.nav_display,
      home_display:
        this.columnEntity.home_display === null
          ? false
          : this.columnEntity.home_display
    })
    .then(res => {
      console.log(res);
      // 发送成功后，重新获取数据，更新当前页面的数据列表
      this.getData();
    });
}

接下来需要处理的

• 如何根据条件获取数据
• 如何删除数据
• 如何更新数据

获取数据的功能实现

根据官方文档可以看到过滤有三种方式

下面三种方式只是Get，并不能修改

• 只显示当前用户

• 通过URL过滤
• 通过参数过滤

上面三种方式可以看另一篇文章

我们使用下面这种方式获取我们的数据

http://127.0.0.1:8000/api/column/<id>/

这里的id是你数据库中那条数据的id，这样就可以获取到我们想要的单条数据了。比如下面

输入http://127.0.0.1:8000/api/column/16/获得id为16的数据,同时也可以看到这个API接口有put和delete方法

XxMYzIBNbRy3SVF

确定好如何获取数据的方法后，我们到Vue中写我们处理的逻辑。代码如下

getInfo(id) {
  this.$http
    .get(`http://127.0.0.1:8000/api/column/${id}/`, {
      id: id
    })
    .then(res => {
      // 获取数据成功后的操作
      this.columnEntity = res.data
      this.currentId = id
    });
},

删除接口

根据上面到API接口，我们可以很容易到写出删除的方法。这里直接上代码吧

deleteColumn(id) {
  this.$http.delete(`http://127.0.0.1:8000/api/column/${id}/`).then(res => {
    console.log(res);
    this.getData();
  });
},

更新接口

更新接口也很简单，直接看代码

updateInfo() {
  console.log("更新信息", this.currentId);
  this.$http
    .put(`http://127.0.0.1:8000/api/column/${this.currentId}/`, {
      name: this.columnEntity.name,
      slug: this.columnEntity.slug,
      intro: this.columnEntity.intro,
      nav_display:
        this.columnEntity.nav_display === null
          ? false
          : this.columnEntity.nav_display,
      home_display:
        this.columnEntity.home_display === null
          ? false
          : this.columnEntity.home_display
    })
    .then(res => {
      console.log(res);
      this.getData();
    });
}

结果展示

如果所示

9TFEQx3Zy6OaLgA

详细代码请看

• gitee
• github