在 Django 开发中，前端新增功能通常涉及创建新的 HTML 页面、前端视图函数以及与后端的交互。下面我将为你展示一个简单的示例，其中我们将实现一个待办事项列表的功能。
首先，在 Django 的模板目录中创建一个新的 HTML 文件，用于展示待办事项列表。
在你的 Django 项目的模板目录中（通常是 templates 文件夹），创建一个名为 todo_list.html 的文件，并添加以下代码：
<!DOCTYPE html>
<html>
<head>
<title>Todo List</title>
</head>
<body>
<h1>Todo List</h1>
{% for todo in todos %}* {{ todo }}
<form id="todoForm">
<input type="text" id="newTodo" placeholder="New Todo">
<button type="submit">Add</button>
</form>
<script>
document.getElementById('todoForm').onsubmit = function(event) {
event.preventDefault();
var newTodo = document.getElementById('newTodo').value;
fetch('/add_todo/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': getCookie('csrftoken'),
},
body: JSON.stringify({ 'todo': newTodo })
})
.then(response => response.json())
.then(data => {
window.location.reload();
})
.catch(error => console.error('Error:', error));
};
// Function to get CSRF token for making AJAX requests.
function getCookie(name) {
var cookieValue = null;
if (document.cookie && document.cookie !== '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) === (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
return cookieValue;
}
</script>
</body>
</html>
接下来，我们需要在 views.py 文件中创建一个前端视图函数，负责渲染待办事项列表页面。
在你的 Django 项目的 views.py 文件中添加以下代码：
from django.shortcuts import render
def todo_list(request):
todos = ['Item 1', 'Item 2', 'Item 3'] # Replace this with your actual todo list data
return render(request, 'todo_list.html', {'todos': todos})
在这个例子中，我们只是简单地将一个固定的待办事项列表传递给模板，实际应用中你可以从数据库或其他数据源获取数据。
我们还需要创建一个后端视图函数，负责处理前端通过 AJAX 提交的新待办事项。
在 views.py 文件中添加以下代码：
from django.http import JsonResponse
def add_todo(request):
if request.method == 'POST':
todo = request.POST.get('todo')
# Add the new todo to the database or perform other actions as needed.
return JsonResponse({'success': True})
return JsonResponse({'success': False, 'error': 'Invalid request method.'})
最后，我们需要配置 URL 路由，将前端视图函数与 URL 映射起来。
在你的 Django 项目的 urls.py 文件中添加以下代码：
from django.urls import path
from . import views
urlpatterns = [
path('todo_list/', views.todo_list, name='todo_list'),
path('add_todo/', views.add_todo, name='add_todo'),
]
现在，当用户访问 /todo_list/ 时，将展示待办事项列表页面。用户可以在输入框中输入新的待办事项，点击“Add”按钮后，前端会通过 AJAX 将新的待办事项提交到 /add_todo/ URL，并触发后端视图函数 add_todo 进行处理。在这个简单示例中，我们只是返回一个成功的 JSON 响应，实际应用中你需要在 add_todo 函数中执行适当的逻辑，比如将待办事项保存到数据库。
请注意，这个示例只是一个简单的演示，实际应用中你可能需要增加更多的错误处理、用户认证、数据存储等功能。此外，我们在示例中使用了 Django 自带的模板系统，实际项目中你可能会使用更现代的前端框架（如 React、Vue.js 等）来构建更复杂的前端交互。
