Django CreateView, TemplateView简单示例

本文介绍了一个使用Django框架实现的简单应用案例,包括应用的目录结构、URL配置、视图处理、模板展示等内容。该应用允许用户创建作者信息,并在提交后显示感谢页面。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


点击提交后,窗口显示thanks,同时将输入内容保存至数据库。

一、目录结构:

mysite/

manage.py

myapp/

__init__.py

urls.py

models.py

tests.py

views.py

templates/

myapp/

thanks.html

author_create_form.html

mysite/

__init__.py

settings.py

urls.py

wsgi.py


二、代码

# mysite/mysite/urls.py
from django.conf.urls import patterns, include, url

urlpatterns = patterns('',
    url(r'^myapp/', include('myapp.urls')),
)


# mysite/myapp/urls.py
from django.conf.urls import patterns, url
from .views import AuthorCreate, ThanksView

urlpatterns = patterns('',
    url(r'^author_create/', AuthorCreate.as_view()),
    url(r'^thanks/', ThanksView.as_view()),
)

# mysite/myapp/views.py
from django.views.generic import TemplateView
from django.views.generic.edit import CreateView

class ThanksView(TemplateView):
    template_name = 'myapp/thanks.html'

class AuthorCreate(CreateView):
    model = Author
    template_name_suffix = '_create_form'
    success_url = '/myapp/thanks/'

# mysite/myapp/models.py
from django.db import models
class Author(models.Model):
    first_name = models.CharField(max_length=30)
    last_name = models.CharField(max_length=30)
    def __unicode__(self):
        return '%s %s' % (self.first_name, self.last_name)

# mysite/myapp/templates/myapp/author_create_form.html

<html>
<head><title>Author Create</title></head>
<body>
<form method="post">
{% csrf_token %}
<table>
<tr><th>First Name</th><td>{{ form.first_name }}</td></tr>
<tr><th>Last Name</th><td>{{ form.last_name }}</td></tr>
<tr><td colspan="2"><input type="submit" /></td></tr>
</form>
</body>
</html>


# mysite/myapp/templates/myapp/thanks.html

<html>
<head><title>Thanks!</title></head>
<body>
Thanks!
</body>
</html>

>>> from myapp.models import Author

>>> Author.objects.all()[4]

<Author: Steve Jobs>



<think>我们正在处理用户的问题:如何将Django后端与Vue前端进行集成?根据用户提供的引用,我们可以总结出以下几个关键步骤:1.配置Django项目以支持Vue前端(包括模板路径静态文件)2.在Vue前端使用axios等工具与Django后端进行API交互3.解决跨域问题(使用django-cors-headers)同时,我们注意到用户引用了三段内容,分别涉及:引用[1]:配置Django的TEMPLATES的DIRS指向Vue项目的dist目录(构建后的目录),并关联静态文件。引用[2]:Vue组件中通过axios发送GET请求到Django后端获取数据并渲染。引用[3]:使用django-cors-headers解决跨域问题。因此,我们的回答将围绕这些步骤展开。注意:我们还需要生成相关问题。步骤:1.创建Vue项目并构建(生成dist目录)2.配置Django项目,将Vue构建的静态文件模板整合到Django中(用于生产环境)3.配置跨域(开发环境下,Vue运行在独立的开发服务器,与Django交互需要跨域支持)4.编写DjangoAPIVue前端组件进行交互由于用户要求使用中文,并且按照指定格式,我们将逐步说明。</think>### Django后端与Vue前端集成教程 #### 一、基础环境配置 1. **创建Vue项目** 使用Vue CLI创建前端项目: ```bash vue create frontend cd frontend npm install axios # 用于API请求 ``` 2. **创建Django项目** ```bash django-admin startproject backend cd backend python manage.py startapp api ``` #### 二、关键集成步骤 1. **配置Django模板路径** 在`settings.py`中指向Vue构建文件: ```python TEMPLATES = [ { 'BACKEND': 'django.template.backends.django.DjangoTemplates', 'DIRS': [os.path.join(BASE_DIR, 'frontend/dist')], # 指向Vue构建目录 }, ] ``` 2. **处理静态文件** 添加静态文件配置: ```python STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'frontend/dist/static'), # Vue静态资源 ] ``` 3. **解决跨域问题** 安装跨域支持包并配置: ```bash pip install django-cors-headers ``` 在`settings.py`中: ```python INSTALLED_APPS = [..., 'corsheaders'] MIDDLEWARE = [..., 'corsheaders.middleware.CorsMiddleware'] CORS_ALLOWED_ORIGINS = ["http://localhost:8080"] # Vue开发服务器地址 # 或允许所有源(仅开发环境) CORS_ALLOW_ALL_ORIGINS = True ``` #### 三、前后端交互示例 1. **Django API视图** (`api/views.py`) ```python from rest_framework.decorators import api_view from rest_framework.response import Response @api_view(['GET']) def book_list(request): data = [{"id":1, "title":"Vue与Django集成", "level":"高级"}] return Response({"status":0, "data":data}) ``` 2. **Vue组件调用API** (`Course.vue`) ```vue <script> export default { data() { return { courseList: [] } }, mounted() { this.$axios.get("http://localhost:8000/api/book/") .then(ret => { if(ret.data.status === 0) { this.courseList = ret.data.data } }) } } </script> ``` #### 四、部署流程 1. **构建Vue生产版本** ```bash cd frontend npm run build # 生成dist目录 ``` 2. **配置Django路由** (`urls.py`) ```python from django.urls import path, re_path from django.views.generic import TemplateView urlpatterns = [ path('api/book/', book_list), re_path(r'^.*$', TemplateView.as_view(template_name='index.html')) ] ``` #### 五、开发工作流建议 1. **开发模式**:同时运行两个服务器 ```bash # Vue开发服务器 npm run serve --port 8080 # Django服务器 python manage.py runserver ``` 2. **API调试工具**:使用Postman测试API接口 [^1]: 引用自Django模板配置指南 [^2]: 参考Vue组件与Django交互实例 [^3]: 跨域解决方案文档
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值