前端从数据库获取请求参数

前端html页面上的数据是从数据库中取出来的,如何从数据库中取出数据然后体现在前端页面上

1.首先,在views里面定义函数,返回所需要的数据

def index(request):
    articles = models.Article.objects.all()
    return render(request,‘index.html‘,{‘articles‘:articles})

# def category(request,id):
#     categories = models.Category.objects.all()
#     articles = models.Article.objects.filter(category_id=id)
#     return render(request,‘category.html‘,{‘categories‘:categories,‘articles‘:articles})


def category(request,id):
    category_obj = models.Category.objects.get(id=id)
    articles = models.Article.objects.filter(category=category_obj)
    return render(request,‘category.html‘,{‘articles‘:articles,‘category_obj‘:category_obj})


def article(request):
    request.method #请求方式
    request.GET.get(‘key‘,‘‘) #url?key=value
    request.POST.get(‘key‘,‘‘) #url key-value
    request.COOKIES.get(‘key‘,‘xx‘)
    request.path_info() #请求的路径/post/cate
    request.FILES.get(‘key‘) #获取文件
    request.META #请求头相关的都在这里
    request.body  #请求json格式,body里面的内容



    if request.method==‘GET‘:
        return render(request,‘post.html‘)
    else:
        title = request.POST.get(‘title‘)
        content = request.POST.get(‘content‘)
        category = request.POST.get(‘category‘)
        models.Article.objects.create(title=title,content=content,category_id=category)
        return HttpResponseRedirect(‘/‘)

def archive(request):
    categories = models.Category.objects.all()

 2.然后在前端html页面定义相应的变量,变量的名字要跟views函数里面返回的变量相对应

{% for category in categories %}

                            <li class="list-group-item d-flex justify-content-between align-items-center pr-2 py-2">
                                <a class="category-item" href="/category/{{ category.id }}"
                                   title="查看【{{ category.name }}】分类下所有文章">{{ category.name }}</a>
                                <span class="badge text-center"
                                      title="当前分类下有{{ category.article_set.count }}篇文章">{{ category.article_set.count }}</span>
                            </li>

                        {% endfor %}





                    {% for article in articles %}
                    <div class="media mb-1 mb-sm-2 p-2 p-lg-3">
                        <div class="align-self-center mr-2 mr-lg-3 w-25 modal-open">
                            <a href="./detail.html" target="_blank">
                                <img class="w-100 article-img" src="https://tendcode.com/cdn/article/191029/python_shell.png"
                                     alt="{{article.title}}">
                            </a>
                        </div>
                        <div class="media-body">

                            <div class="text-muted mb-2 f-12">


                                <img class="avatar"
                                     src="https://tendcode.com/media/avatar/2019/07/27/91ef76c6a7efce1b99717f97a851f3deb48f6510.png"
                                     alt="Hopetree">

                                <span>Hopetree</span>
                                <span><i class="fa fa-calendar-times-o ml-2 mr-1"></i>{{article.create_time}}</span>
                            </div>
                            <h2 class="mt-0 font-weight-bold text-info f-17">
                                <a href="/article/" target="_blank">{{article.title}}</a>
                            </h2>
                            <p class="d-none d-sm-block mb-2 f-15">{{article.content}}</p>

                            <div class="text-muted mb-0 f-12">
                                <a class="cate" href="/category/hello-python/" title="查看当前分类下更多文章">
                                    <i class="fa fa-book mr-1"></i>{{article.category.name}}</a>
                                <span><i class="fa fa-eye ml-2 mr-1"></i>226</span>
                                <a href="/article/yaml_and_jinja2/#comment-block" target="_blank" title="查看文章评论">
                                    <i class="fa fa-comments ml-2 mr-1"></i>8</a>
                            </div>
                        </div>
                    </div>

                    {%endfor%}

 3.如果点击标题需要跳转的话,记得在html页面配置要跳转的页面

{% for category in categories %}

                            <li class="list-group-item d-flex justify-content-between align-items-center pr-2 py-2">
                                <a class="category-item" href="/category/{{ category.id }}"
                                   title="查看【{{ category.name }}】分类下所有文章">{{ category.name }}</a>
                                <span class="badge text-center"
                                      title="当前分类下有{{ category.article_set.count }}篇文章">{{ category.article_set.count }}</span>
                            </li>

                        {% endfor %}

 

前端从数据库获取请求参数

上一篇:关于数据库字段的一点思考


下一篇:Docker-compose封装mysql并初始化数据以及redis