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>
django2 rest_framework + vue.js + mysql5.6 实现增删改查的更多相关文章
- vue实现对数据的增删改查(CURD)
vue实现对数据的增删改查(CURD) 导语: 网上看到一个写的比较好的学习文章,转载分享一下 在管理员的一些后台页面里,个人中心里的数据列表里,都会有对这些数据进行增删改查的操作.比如在管理员后台的 ...
- 【基础篇】js对本地文件增删改查
[基础篇] js对本地文件增删改查--增 js对本地文件增删改查--删 js对本地文件增删改查--改 js对本地文件增删改查--查
- 【基础篇】js对本地文件增删改查--查
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【基础篇】js对本地文件增删改查--改
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【基础篇】js对本地文件增删改查--删
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【基础篇】js对本地文件增删改查--增
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- 【原生】js实现表格的增删改查
说在前面的,写给小白白的,大神请绕道~ 今天用原生js写一下动态表格的增删改查,主要是熟悉一下js的DOM操作. 首先,做一个表格,用来显示提交的数据,如图下: 此处,我添加了编号.姓名.密码.生日. ...
- js实现表格的增删改查
这份代码实现了对表格的增加,删除,更改,查询. 点击一次添加按钮,表格会增加一行. 点击重置按钮,输入框的内容会被清空. 添加一行后,最后两格为更改和删除.点击更改,原有内容会各自显示在一个输入框内, ...
- python3.4连接mysql5.7数据库增删改查
#!/usr/bin/env python # -*- coding:utf-8 -*- # __author__ = "blzhu" """ pyt ...
随机推荐
- ifame问题
问题描述:在div中添加了点击事件,div中嵌套着一个iframe,父类的div事件全部都会被失效, 解决办法:给iFrame添加css pointer-events : none; 去掉了ifram ...
- delphi xe10 手机程序事件服务操作、退出键操作
//程序事件服务操作 var FMXApplicationEventService: IFMXApplicationEventService; begin if TPlatformServices.C ...
- Go 算术运算符
Go 算术运算符 package main import "fmt" func main() { var a int = 21 var b int = 10 var c int c ...
- bzoj1006题解
[题意分析] 给你一张弦图,求图的最小染色数. [解题思路] 这篇讲稿已经讲得很详尽了.. 直接求完美消除序列,然后倒着染色即可.复杂度O(n2+nm). [参考程序] 求完美消除序列我是用的MCS( ...
- linux安装&卸载IB网卡(mellanox)驱动
由于工作上的需求,需要在redhat6.5服务器上面安装mellanox品牌的IB网卡,故整理了一个安装&卸载IB网卡驱动的教程: 一.安装 1)下载相应操作系统驱动 http://www.m ...
- PAT_A1094#The Largest Generation
Source: PAT A1094 The Largest Generation (25 分) Description: A family hierarchy is usually presented ...
- 剑指offer——14机器人的运动范围
题目描述 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之和大于k的格子. 例如,当k为18时,机器人能 ...
- html清除浮动的6种方法示例
使用display:inline-block会出现的情况: 1.使块元素在一行显示2.使内嵌支持宽高3.换行被解析了4.不设置的时候宽度由内容撑开5.在IE6,7下步支持块标签 由于inline-bl ...
- 函数的属性和方法, apply和call的区别及bind的使用
==>我的新博客中 http://www.suanliutudousi.com/2017/08/27/%E5%87%BD%E6%95%B0%E7%9A%84%E5%B1%9E%E6%80%A7% ...
- js 事件驱动原理
还记得当初学JAVA-GUI编程时学习过事件监听机制,此时再学习JavaScript中的事件驱动机制,不免简单.当初学习时也是画过原理图,所以从原理图开始吧! js是采用事件驱动(event-driv ...