作者: zifanwang 发布于2020-05-10
1. 增加文章
第一步在article中新建forms.py文件, 写入如下代码:
from django import forms
from . models import ArticlePost
# 写文章表单类
class ArticlePostForm(forms.ModelForm):
class Meta:
# 指明数据模型来源
model = ArticlePost
# 定义表单包含的字段
fields = ('title', 'body', )
第二部修改article/views.py 增加处理文章的函数:
from django.shortcuts import render, redirect
from django.http import HttpResponse
# 引入刚才定义的ArticlePostForm
from .forms import ArticlePostForm
from django.contrib.auth.models import User
...
def article_create(request):
# 判断用户是否提交数据
if request.method == "POST":
article_post_form = ArticlePostForm(data=request.POST)
if article_post_form.is_valid():
new_article = article_post_form.save(commit=False)
new_article.author = User.objects.get(id=1)
new_article.save()
return redirect('article:article_list')
else:
return HttpResponse("表单内容有误,请重新填写")
else:
article_post_form = ArticlePostForm()
context = {'article_post_form': article_post_form}
return render(request, 'article/create.html', context)
在templates/article中创建create.html:
{% extends "base.html" %}
{% load static %}
{% block title %}
make
{% endblock title %}
{% block content %}
<div class="container">
<div class="col-12">
<br>
<form method="post" action=".">
{% csrf_token %}
<div class="form-group">
<label for="title">Title</label>
<input type="text" class="form-control" id="title" name="title">
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea type="text" class="form-control" id="body" name="body" rows="12"></textarea>
</div>
<button type="submit" class="btn btn-primary">submit</button>
</form>
</div>
</div>
</div>
{% endblock content %}
修改article/urls.py:
from django.urls import path
from . import views
app_name = 'article'
urlpatterns = [
# path函数将url映射到视图
path('list/', views.article_list, name='article_list'),
path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
path('article-create/', views.article_create, name="article_create"),
]
然后运行服务器(python manage.py runserver), 再在地址栏输入http://127.0.0.1:8000/article/article-create/ 就可以访问增加文章的页面了:
新增一篇文章测试一下:
写完提交后可以看到都正常显示了 我们何以修改header.html新增写文章入口:
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container">
<a class="navbar-brand" href="#">My Site</a>
<div>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="{% url 'article:article_list' %}">Article</a>
</li>
<li class="nav-item">
<a class="nav-link" href="{% url 'article:article_create' %}">New</a>
</li>
</ul>
</div>
</div>
</nav>
我们打开文章列表首页,点击New就能进入新增文章页面了。
首先在article/views.py中新增article_delete函数:
def article_delete(request, id):
article = ArticlePost.objects.get(id=id)
article.delete()
return redirect('article:article_list')
再增加article/urls.py中删除文章路由:
from django.urls import path
from . import views
app_name = 'article'
urlpatterns = [
# path函数将url映射到视图
path('list/', views.article_list, name='article_list'),
path('article-detail/<int:id>/', views.article_detail, name='article_detail'),
path('article-create/', views.article_create, name="article_create"),
path('article-delete/<int:id>', views.article_delete, name="article_delete"),
]
最后在detail.html中增加删除文章的链接:
{% extends "base.html" %}
{% load static %}
{% block title %}
article
{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<h1 class="col-12 mt-4">{{ article.title }}</h1>
<div class="col-12 alert alert-success">author: {{ article.author }}</div>
.<a href="{% url "article:article_delete" article.id %}">delete</a>
<div class="col-12">
<p>{{ article.body|safe }}</p>
</div>
</div>
</div>
{% endblock content %}
最后我们查看效果:
点击删除文章后可以看见文章列表中没有了对应的文章 就证明删除成功了。
改写模板文件detail.html:
{% extends "base.html" %}
{% load static %}
{% block title %}
article
{% endblock title %}
{% block content %}
<div class="container">
<div class="row">
<h1 class="col-12 mt-4">{{ article.title }}</h1>
<div class="col-12 alert alert-success">author: {{ article.author }}</div>
.<a href="#" onclick="confirm_delete()">delete</a>
<div class="col-12">
<p>{{ article.body|safe }}</p>
</div>
</div>
</div>
<script>
function confirm_delete(){
var r=confirm("Wanna delete?");
if (r==true)
{
window.location='{% url "article:article_delete" article.id %}';
}
}
</script>
{% endblock content %}
然后测试删除文章:
可以看到增加了确认弹窗。(不同的浏览器弹出来的窗口都不一样)