first commit

DjangoBlogs/blog/forms.py

@@ -1,6 +1,6 @@
 from django import forms
 
-class PubBlogForm(forms.form):
+class PubBlogForm(forms.Form):
     title = forms.CharField(max_length=200, min_length=2)
     content = forms.CharField(min_length=2)
-    category = forms.ImageField()
+    category = forms.IntegerField()

DjangoBlogs/blog/models.py

@@ -28,6 +28,7 @@ class Blog(models.Model):
     class Meta:
         verbose_name ='帖子'
         verbose_name_plural = verbose_name
+        ordering = ['-pub_time']
 
 
 
@@ -44,4 +45,4 @@ class BlogComment(models.Model):
     class Meta:
         verbose_name ='评论'
         verbose_name_plural = verbose_name
-
+        ordering = ['-pub_time']

DjangoBlogs/blog/urls.py

@@ -7,4 +7,6 @@ urlpatterns = [
     path('', views.index, name='index'),
     path('blog/detail/<blog_id>', views.blog_detail, name='blog_detail'),
     path('blog/pub', views.pub_blog, name='pub_blog'),
+    path('blog/comment/pub', views.pub_comment, name='pub_comment'),
+    path('search', views.search, name='search'),
 ]

DjangoBlogs/blog/views.py

@@ -1,30 +1,56 @@
-from django.shortcuts import render
+from django.shortcuts import render, redirect, reverse
-from django.http import JsonResponse
+from django.http.response import JsonResponse
 from django.urls.base import reverse_lazy
 from django.contrib.auth.decorators import login_required
-from django.views.decorators.http import require_http_methods
+from django.views.decorators.http import require_http_methods, require_POST, require_GET
 from .models import BlogCategory, Blog, BlogComment
 from .forms import PubBlogForm
+from django.db.models import Q
 
 # Create your views here.
 def index(request):
-    return render(request, 'index.html')
+    blogs = Blog.objects.all()
+    return render(request, 'index.html', context={'blogs': blogs})
 
 def blog_detail(request, blog_id):
-    return render(request,'blog_detail.html')
+    try:
+        blog = Blog.objects.get(pk=blog_id)
+    except Exception as e:
+        blog = None
 
+    return render(request,'blog_detail.html', context={'blog':blog})
 
-@require_http_methods(['GET','POST'])
+@require_http_methods(['GET', 'POST'])
 @login_required()
 def pub_blog(request):
     if request.method == 'GET':
         categories = BlogCategory.objects.all()
-        return render(request,'pub_blog.html', context={"categories": categories})
+        return render(request, 'pub_blog.html', context={"categories": categories})
     else:
         form = PubBlogForm(request.POST)
         if form.is_valid():
             title = form.cleaned_data.get('title')
             content = form.cleaned_data.get('content')
             category_id = form.cleaned_data.get('category')
-            Blog.objects.create(title=title, content=content, category_id=category_id, author=request.user)
+            blog = Blog.objects.create(title=title, content=content, category_id=category_id, author=request.user)
-            return JsonResponse({"code":200, "message":"参数错误！"})
+            return JsonResponse({"code": 200, "message": "博客发布成功！", "data": {"blog_id": blog.id}})
+        else:
+            print(form.errors)
+            return JsonResponse({'code': 400, "message": "参数错误！"})
+
+
+@require_POST
+@login_required()
+def pub_comment(request):
+    blog_id = request.POST.get('blog_id')
+    content = request.POST.get('content')
+    BlogComment.objects.create(content=content, blog_id=blog_id, author=request.user)
+    # 重新加载博客详情页
+    return redirect(reverse("blog:blog_detail", kwargs={"blog_id": blog_id}))
+
+
+@require_GET
+def search(request):
+    q = request.GET.get('q')
+    blogs = Blog.objects.filter(Q(title__icontains=q)|Q(content__icontains=q)).all()
+    return render(request, 'index.html', context={"blogs": blogs})

DjangoBlogs/static/js/pub_blog.js

@@ -25,4 +25,29 @@ window.onload = function () {
         config: toolbarConfig,
         mode: 'default', // or 'simple'
     })
+
+    $("#submit-btn").click(function(event){
+        // 阻止按钮的默认行为
+        event.preventDefault();
+
+        let title = $("input[name='title']").val();
+        let category = $("#category-select").val();
+        let content = editor.getHtml();
+        let csrfmiddlewaretoken = $("input[name='csrfmiddlewaretoken']").val();
+        $.ajax('/blog/pub', {
+            method: 'POST',
+            data: {title, category, content, csrfmiddlewaretoken},
+            success: function(result){
+                if(result['code'] == 200){
+
+                    let blog_id = result['data']['blog_id']
+                    window.location = '/blog/detail/' + blog_id
+                }else {
+                    alert(result['message']);
+                }
+            }
+        })
+    });
+
+
 }

DjangoBlogs/templates/base.html

@@ -25,8 +25,8 @@
                 <li><a href="#" class="nav-link px-2 text-white">About</a></li>
             </ul>
 
-            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
+            <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search" action="{% url 'blog:search' %}" method="GET">  
-                <input type="search" class="form-control form-control-dark text-white" placeholder="搜索..."
+                <input type="search" name="q" class="form-control form-control-dark text-white" placeholder="搜索..."
                        aria-label="Search" _mstplaceholder="99723" _mstaria-label="74607">
             </form>
             

DjangoBlogs/templates/blog_detail.html

@@ -1,43 +1,47 @@
 {% extends 'base.html' %}
 {% block main %}
-    <h1>我是标题</h1>
+    <h1>{{ blog.title }}</h1>
     <hr>
     <div class="mt-2">
         <img src="{% static 'image/profile.png' %}" class="rounded-circle " width="30" height="30" alt="">
-        <span class="mt-2">huixia</span>
+        <span class="mt-2">{{ blog.author.username }}</span>
         <span class="mt-2">于</span>
-        <span class="mt-2">21点22分</span>发布
+        <span class="mt-2">{{ blog.pub_time|date:"Y年m月d日 H时i分" }}</span>发布
         <hr>
         <div class="py-2">
-            我是内容234111111111111111111111845893081934
+            {{ blog.content|safe }}
         </div>
         <hr>
         <div class="mt-2">
-            <h3>评论：</h3>
+            <h3>评论({{ blog.comments.all|length }})</h3>
-            <form action="" method="POST">
+            <form action="{% url 'blog:pub_comment' %}" method="POST">
+                {% csrf_token %}
+                <input type="hidden" name="blog_id" value="{{ blog.id }}">
                 <div class="mt-2">
-                    <input type="text" class="form-control" placeholder="请输入评论">
+                    <input type="text" class="form-control" placeholder="请输入评论" name="content">
                 </div>
                 <div class="text-end mt-3">
-                    <button type="button" class="btn btn-primary">发送</button>
+                    <button type="submit" class="btn btn-primary">发送</button>
                 </div>
             </form>
         </div>
         <div class="mt-2">
             <ul class="list-group list-group-flush">
-                <li class="list-group-item mb-3">
+                {% for comment in blog.comments.all %}
-                    <div class="d-flex justify-content-between text-body-tertiary">
+                    <li class="list-group-item mb-3">
-                        <div class="user-info">
+                        <div class="d-flex justify-content-between text-body-secondary">
-                            <img src="{% static 'image/profile.png' %}" class="rounded-circle " width="40" height="40"
+                            <div class="user-info">
-                                 alt="">
+                                <img src="{% static 'image/profile.png' %}" class="rounded-circle " width="40" height="40"
-                            <span class="ms-2">huixia</span>
+                                     alt="">
+                                <span class="ms-2">{{ comment.author.username }}</span>
+                            </div>
+                            <div class="create-time">{{ comment.pub_time|date:"Y年m月d日 H时i分" }}</div>
                         </div>
-                        <div class="create-time">01点16分</div>
+                        <div class="mt-2">
-                    </div>
+                            {{ comment.content }}
-                    <div class="mt-2">
+                        </div>
-                        我是评论内容
+                    </li>
-                    </div>
+                {% endfor %}
-                </li>
             </ul>
         </div>
     </div>

DjangoBlogs/templates/index.html

@@ -5,22 +5,24 @@
 {% block main %}
      <h1>文章列表</h1>
     <div class="row row-cols-2 row-gap-4">
+    {% for blog in blogs %}
         <div class="col">
             <div class="card">
                 <div class="card-header">
-                    我是标题
+                    <a href="{% url 'blog:blog_detail' blog_id=blog.id %}">{{ blog.title }}</a>
                 </div>
                 <div class="card-body" style="height: 140px">
-                    <p class="card-text">我是内容234111111111111111111111845893081934</p>
+                    <p class="card-text">{{ blog.content|striptags|truncatechars:200 }}</p>
                 </div>
                 <div class="card-footer text-body-secondary d-flex justify-content-between">
                     <div>
                         <img src="{% static 'image/profile.png' %}" class="rounded-circle " width="30" height="30" alt="">
-                        huixia
+                        {{ blog.author.username }}
                     </div>
-                    <div>20点40分</div>
+                    <div>发布时间：{{ blog.pub_time|date:"Y年m月d日 H时i分" }}</div>
                 </div>
             </div>
         </div>
+    {% endfor %}
     </div>
 {% endblock %}

DjangoBlogs/templates/pub_blog.html

@@ -2,7 +2,10 @@
 
 {% block title %}发布帖子{% endblock %}
 
+/* 发布帖子使用的 ajax请求方式  借助的jquery文件 */
+
 {% block head %}
+    <script src="{% static 'jquery/jquery-3.7.1.min.js' %}"></script>
     <link rel="stylesheet" href=" {% static 'wangeditor/style.css' %}">
     <script src=" {% static 'wangeditor/index.js' %}"></script>
     <script src=" {% static 'js/pub_blog.js' %}"></script>
@@ -23,29 +26,31 @@
 {% endblock %}
 
 {% block main %}
-    <h1>发布帖子</h1>
+	<h1>发布帖子</h1>
     <div class="mt-3">
         <form action="" method="POST">
+        {% csrf_token %}
             <div class="mb-3">
-                <label class="form-label">标题</label>"
+                <label class="form-label">标题</label>
                 <input type="text" name="title" class="form-control">
             </div>
             <div class="mb-3">
-                <label class="form-label">分类</label>"
+                <label class="form-label">分类</label>
-                <select name="category" class="form-select">
+                <select name="category" class="form-select" id="category-select">
-
+                    {% for category in categories %}
-
+                        <option value="{{ category.id }}">{{ category.name }}</option>
+                    {% endfor %}
                 </select>
             </div>
             <div class="mb-3">
-                <label class="form-label">我是内容</label>
+                <label class="form-label">内容</label>
                 <div id="editor—wrapper">
                     <div id="toolbar-container"><!-- 工具栏 --></div>
                     <div id="editor-container"><!-- 编辑器 --></div>
                 </div>
             </div>
             <div class="mb-3 text-end">
-                <button class="btn btn-primary">发布</button>
+                <button class="btn btn-primary" id="submit-btn">发布</button>
             </div>
         </form>
     </div>