django mysql vue 基本增删改查 完整代码
时间: 2024-09-28 22:00:56 浏览: 32
Django、MySQL 和 Vue 通常结合在一起构建全栈 Web 应用程序。这里是一个简单的 Django 后端与 MySQL 数据库交互,并通过 Vue.js 前端进行数据操作(CRUD - 创建、读取、更新、删除)的基本框架示例。
**1. 首先安装依赖**
- 使用 pip 安装 Django、Django Rest Framework (DRF)、MySQL connector 和 Vue CLI:
```bash
pip install django djangorestframework mysqlclient
vue create your-app-name
cd your-app-name
```
**2. Django设置**
在 `settings.py` 中配置数据库连接:
```python
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'your_database_name',
'USER': 'your_username',
'PASSWORD': 'your_password',
'HOST': 'localhost',
'PORT': '3306',
}
}
```
**3. Django模型**
创建一个 `models.py` 文件,定义一个简单的模型:
```python
from django.db import models
class YourModel(models.Model):
field1 = models.CharField(max_length=100)
field2 = models.IntegerField()
# Add more fields as needed
# Don't forget to run migrations:
python manage.py makemigrations
python manage.py migrate
```
**4. Django REST API**
在 `views.py` 和 `serializers.py` 中创建 DRF视图和序列化器:
```python
from rest_framework import generics, serializers
from .models import YourModel
class YourModelSerializer(serializers.ModelSerializer):
class Meta:
model = YourModel
fields = '__all__'
class YourModelListCreateView(generics.ListCreateAPIView):
queryset = YourModel.objects.all()
serializer_class = YourModelSerializer
```
在 `urls.py` 添加路由:
```python
from rest_framework.routers import DefaultRouter
from .views import YourModelListCreateView
router = DefaultRouter()
router.register(r'your-models', YourModelListCreateView)
urlpatterns = router.urls
```
**5. Vue前端**
- 在 `main.js` 或者单独的组件文件中,引入axios用于向API发送HTTP请求:
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'http://localhost:8000/api/', // 根据实际部署地址替换
});
```
- 模板中进行CRUD操作的简单示例:
```html
<template>
<div v-for="model in models" :key="model.id">
<!-- 显示数据 -->
</div>
</template>
<script>
export default {
data() {
return {
models: []
};
},
async mounted() {
const response = await instance.get('/your-models');
this.models = response.data;
},
methods: {
create(modelData) {
instance.post('/your-models', modelData).then(res => {
// 更新列表
});
},
update(id, updatedData) {
instance.put(`/your-models/${id}`, updatedData).then(res => {
// 更新列表
});
},
delete(id) {
instance.delete(`/your-models/${id}`).then(res => {
// 更新列表
});
},
}
};
</script>
```
**