django2 rest_framework + vue.js + mysql5.6 实现增删改查

1.安装pymysql，mysqlclient，创建项目django-admin startproject django3

2.在Mysql中创建一个数据库叫django3db，打开项目，修改一下数据库配置

DATABASES = {
    'default': {
    'ENGINE': 'django.db.backends.mysql',
    'NAME': 'django3db',
    'USER': 'root',
    'PASSWORD': '123456',
    'HOST': '127.0.0.1',
    'PORT': '3306',
    }
}

3.创建一个app，python manage.py startapp myapp

在settings.py中添加一下新创建的app

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp'
]

4.在myapp文件夹下的models.py中粘帖如下代码

class Person(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=30)
    age = models.IntegerField()

    def __str__(self):
        # 在Python3中使用 def __str__(self):
        return self.name

5.更新一下数据库

python manage.py makemigrations

python manage.py migrate

6.安装rest framework，己安装的跳过安装，但要在settings.py中加一下

INSTALLED_APPS = [
    ...
    'rest_framework',
]

7.urls.py中添加，记得引用一下include

urlpatterns = [
    ...
    url(r'^api-auth/', include('rest_framework.urls'))
]

8.settings.py中加一下

REST_FRAMEWORK = {
    # Use Django's standard `django.contrib.auth` permissions,
    # or allow read-only access for unauthenticated users.
    'DEFAULT_PERMISSION_CLASSES': [       
'rest_framework.permissions.AllowAny',  #任何人都可以访问
    ],
'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework.authentication.BasicAuthentication',       
    ),
}

9.在myapp下创建文件serializers.py，粘帖如下代码：

from rest_framework import serializers

from myapp.models import Person

class PersonSerializer(serializers.ModelSerializer):
    # ModelSerializer和Django中ModelForm功能相似
    # Serializer和Django中Form功能相似
    class Meta:
        model = Person
        # 和"__all__"等价
        fields = ('id', 'name', 'age')

10.在app的views.py中粘帖如下代码：

from rest_framework import viewsets, authentication, mixins
from rest_framework.permissions import IsAuthenticated

from myapp.models import Person
from myapp.serializers import PersonSerializer

class PersonViewSet(viewsets.ModelViewSet):
    queryset = Person.objects.all()
    serializer_class = PersonSerializer

11.在urls.py中添加

from rest_framework import routers

from myapp.views import  PersonViewSet

router = routers.DefaultRouter()
router.register(r'persons', PersonViewSet)

urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^', include(router.urls)),
    url(r'^api-auth/', include('rest_framework.urls', namespace='rest_framework'))
]

12.运行项目，会看到这样的图

13.点一下那个http://127.0.0.1:8000/persons，会看到如下画面，有一个中括号[]，这是因为数据表为空，所以没数据

14. 上图下方有两个框，输入姓名和年龄，点击POST，你会看到下图，有DELETE和PUT，可以试试能不能用。

15.还要解决一下跨域问题

pip install django-cors-middleware

在settings.py的app那边添加

'corsheaders',

在settings.py的Middle Ware那边的最上方，必须是最上方添加

'corsheaders.middleware.CorsMiddleware',

继续settings.py，添加以下

CORS_ORIGIN_ALLOW_ALL = True

16.最后是vue.js，完成的组件代码如下

<template>
  <div>
    <p style="text-align: left;">
      <el-button type="primary" @click="dialogFormAdd = true">添加</el-button>
    </p>

    <el-table :data="tableData" stripe border style="width:100%" highlight-current-row>
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="ID" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.id}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="age" label="年龄" align="center" min-width="100">
        <template slot-scope="scope">
          <span>{{ scope.row.age}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" align="center" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.name}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" min-width="100">
        <template slot-scope="scope">
          <el-button type="info" @click="toEdit(scope)">修改</el-button>
          <el-button type="info" @click="deleteUser(scope)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="修改人员" :visible.sync="dialogFormEdit">
      <el-form :model="person">
        <el-form-item label="编号" >
          <el-input v-model="person.id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-input v-model="person.age" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" >
          <el-input v-model="person.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button type="primary" @click="edit(person)">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加人员" :visible.sync="dialogFormAdd">
      <el-form :model="person">
        <el-form-item label="编号" >
          <el-input v-model="person.id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="年龄" >
          <el-input v-model="person.age" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="姓名" >
          <el-input v-model="person.name" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">取 消</el-button>
        <el-button type="primary" @click="add(person)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'PersonTableDjango',
  data () {
    return {
      tableData: [],
      dialogFormEdit: false,
      dialogFormAdd: false,
      person: {
        id: '',
        age: '',
        name: ''
      }
    }
  },
  methods: {
    init () {
      var self = this
      this.$axios.get('http://127.0.0.1:8000/persons/')
        .then(function (res) {
          // console.log(res.data)
          self.tableData = res.data
        })
        .catch(function (err) {
          console.log(err)
        })
    },
    add (person) {
      let params = new URLSearchParams()
      params.append('name', person.name)
      params.append('age', person.age)
      this.$axios.post('http://127.0.0.1:8000/persons/', params).then(res => {
        // if (res.data.success === true) {
        this.$message.success('添加成功')
        this.dialogFormAdd = false
        this.init()
        // this.checkTable()
        // } else {
        //   this.$message.warning(res.data.msg)
        // }
      })
        .catch(function (error) {
          console.log(error)
        })
    },
    edit (person) {
      let params = new URLSearchParams()
      // params.append('id', person.id)
      params.append('name', person.name)
      params.append('age', person.age)
      this.$axios.put('http://127.0.0.1:8000/persons/' + person.id + '/', params).then(res => {
        // if (res.data.success === true) {
        this.$message.success('修改成功')
        this.dialogFormEdit = false
        this.init()
        // this.checkTable()
        // } else {
        //   this.$message.warning(res.data.msg)
        // }
      })
        .catch(function (error) {
          console.log(error)
        })
    },
    toEdit (scope) {
      this.person.id = scope.row.id
      this.person.age = scope.row.age
      this.person.name = scope.row.name
      this.dialogFormEdit = true
    },
    deleteUser (scope) {
      if (!scope.row.id) {
        this.tableData.splice(scope.$index, 1)
      } else {
        this.$confirm('确认是否删除', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        })
          .then(() => {
            console.log(scope.row.id)
            this.$axios.delete('http://127.0.0.1:8000/persons/' + scope.row.id + '/').then(res => {
              // if (res.data.success === true) {
              this.$message.success('删除成功')
              this.init()
              // this.checkTable()
              // } else {
              //   this.$message.warning(res.data.msg)
              // }
            })
              .catch(function (error) {
                console.log(error)
              })
          })
          .catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
      }
    }
  },
  mounted: function () {
    this.init()
  }
}
/* eslint-disable no-new */

</script>

<style scoped>

</style>