Django个人博客搭建--4--在前端显示后台数据

有了bootstrap的加入我可以搭建多种多样的网页前端，在bootstrap官网点击‘组件’

这里有足够多的组件可以使用。
我的个人博客首页要有：导航条显示不同文章分类，登录和退出，显示用户名，列表组显示后台精选的文章。

这就是初步样式，由于博客还在开发阶段，所以文章只是一些写得很粗糙的笔记
这里一个框里分别有：标题，图片，作者，内容的一部分，创建日期。点击列表进入具体文章展示详情。

<a href="文章详情的路由">
    <div class="row" style="margin-left: 20px;margin-right: 20px">
        <div class="col-sm-12 col-md-12">
            <div class="thumbnail">
                <h2 style="margin: 20px 10px">标题h2>
                <img src="图片路径" alt="" style="width: 100px">
                <div class="caption">
                    <div class="container" style="width:100%;height: 100px;overflow: hidden;text-overflow: ellipsis;margin-bottom: 10px">
                        <h4 style="height: 30px;overflow: hidden">作者h4>
                        <p style="margin: 20px">内容p>
                    div>
                    <p>
                        <small style="color: black">发表时间：small>
                        <small>{
    { article.create_time }}small>
                    p>
                div>
            div>
        div>
    div>
a>

这个是展示一个框的代码，修改这个框的代码花了我很长时间，一开始总是出现框里内容分别显示的情况，后来我改掉一个div里面出现多个div的代码，把一些div换成p标签，即一个div里只能包含一个div，不这样其实问题不大，如果你对你的前端样式没有过多要求，你大可在官网上把代码复制下来直接使用。
前端样式修改好后，再在代码外围加上一行包裹的代码：for循环

这时候转到视图函数项目目录下的urls.py给项目配置路由，否则你执行的时候什么都看不到

from django.urls import path
from django.conf.urls import url
from blog import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',views.shouye,name='shouye'),
    url(r'^show/$',views.show),
]

把那个文件修改成这样，path是新版本django路由的调用方法，url是旧版本的调用方法，两种都可以使用，只是要注意：在使用url时的格式

path('',views.shouye)

表示首页，后面的views.shouye是当跳转到首页时执行views.py中的shouye方法。

path('',views.shouye,name='shouye')

name的使用方便的后面a标签跳转页面
转到view.py

def show(request):
    articleList = Article.objects.all()
    return render(request,'show.html',{
     'articles':articleList})

articleList = Article.objects.all()是对模型函数的调用，作用是拿去Article表里的所有数据

return render(request,'show.html',{
     'articles':articleList})

跳转到show.html的同时，把刚刚拿去的数据放在一个叫articles的容器里带过去
此时回到html进行修改
由于我们的精选文章并不是一直都那么多个，有时候一两个，有时候十几个。我们不可能每当多一个精选文章的时候，就去写一个新的代码，这是对服务器资源的浪费。
所以我们需要用到for循环，遍历所有的文章。
既在刚刚的html代码外围写上这两句：

{% for article in articlelist %}
	这里写刚刚的代码
{% endfor %}

articlelist为刚刚views.py那里拿到的数据，道理跟普通的for循环其实是一样的，只是语句形式变了而已。
然后我们把拿到的数据命名为article，这样我们就可以分别使用数据库拿到的各个数据了

{% for article in articlelist %}
    <a href="/detail/?nid={
      { article.pk }}">
        <div class="row" style="margin-left: 20px;margin-right: 20px">
            <div class="col-sm-12 col-md-12">
                <div class="thumbnail">
                    <h2 style="margin: 20px 10px">{
    { article.title }}h2>
                    <img src="static/media/{
      { article.img }}" alt="" style="width: 100px">
                    <div class="caption">
                        <div class="container" style="width:100%;height: 100px;overflow: hidden;text-overflow: ellipsis;margin-bottom: 10px">
                            <h4 style="height: 30px;overflow: hidden">{
    { article.user }}h4>
                            <p style="margin: 20px">{
    { article.body|slice:'70'| linebreaks }}p>
                        div>
                        <p>
                            <small style="color: black">发表时间：small>
                            <small>{
    { article.create_time }}small>
                        p>
                    div>
                div>
            div>
        div>
    a>
{% endfor %}

与普通的拿去数据格式一样，article.title代表model中的文章标题
article.user代表作者。
这里有一个难点：
一开始我在调用数据库图片的时候发现无论怎么调用都找不到图片地址，因为我的图片存放在media文件夹（media文件夹也需要像静态文件一样在setting调用），但是在html调用的时候，如果调用多个静态文件可能会出岔子，所以我把media文件夹转移到了static文件夹下，这样调用的时候就只需调用static文件，在使用static/media/ 语句调用media，但是我发现，从后台拿到的img只是一个路径，还是一个字典型的。如果直接使用{ { article.img }}根本调用不出什么。
想了好久，我们何不把字典里的路径拿出来呢？

def shouye(request):
    articleList = Article.objects.all()
    ar = articleList.values('img')
    for i in ar:
        articleList.img = i['img']
    return render(request,'blogmuban/shoye.html',{
     'articlelist':articleList})

这段代码的意思是：先把表里的数据拿出来，然后拿出含有img的字典，通过for语句，逐个把字典们 换成路径们 这样前台就能直接拿去用啦！

---

前几天加了个前端html代码上safe过滤器之后，上面这个for循环已经用不上了！