vue django mysql_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，完成的組件代碼如下
添加
{{ scope.row.id}}
{{ scope.row.age}}
{{ scope.row.name}}
修改
刪除
取 消
確 定
取 消
確 定
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 */
總結
以上是生活随笔為你收集整理的vue django mysql_django2 rest_framework + vue.js + mysql5.6 实现增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： yum yuan
- 下一篇： php mysql存图片路径_PHP 批