25.课程机构列表数据展示（含如何把上传图片等文件保存并显示在网

1.登录xadmin添加5个城市，北上广深天津，并在org.models.py的citydict里添加str
2.添加机构，需要传入几个logo。先配置上传数据储存路径。在项目根目录下创建media文件夹，再在settings.py里

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

由于之前models里

image = models.ImageField(upload_to="org/%Y/%m",verbose_name="logo")

上传图片后会自动保存在media文件夹下的2018/01里。再给CourseOrg一个str。再加个机构类别字段

category = models.CharField(default='pxjg',verbose_name= '机构类别',max_length=20,choices=(('pxjg','培训机构'),('gr','个人'),('gx','高校')))

然后添加10个机构。数据迁移，makemigrations、migrate。views.py:

from django.shortcuts import render
from django.views.generic import View

from .models import CourseOrg, CityDict
# Create your views here.

class OrgView(View):
    """
    课程机构列表功能
    """
    def get(self, request):
        #课程机构
        all_orgs = CourseOrg.objects.all()
        #城市
        all_citys = CityDict.objects.all()
        return render(request, "org-list.html", {
            "all_orgs":all_orgs,
            "all_citys":all_citys
        })

传城市和机构到前端，前端以循环的方式展示。org-list.html

                <li>
                    <h2>所在地区</h2>
                    <div class="more">更多</div>
                    <div class="cont">
                        <a href="?ct="><span class="active">全部</span></a>
                            {% for city in all_citys %}
                                <a href="?city=1&ct="><span class="">{{ city.name }}</span></a>
                            {% endfor %}
                    </div>
                </li>

            {% for course_org in all_orgs %}
                <dl class="des difdes">
                    <dt>
                        <a href="org-detail-homepage.html">
                            <img width="200" height="120" class="scrollLoading" data-url="{{ MEDIA_URL }}{{ course_org.image }}"/>
                        </a>
                    </dt>
                    <dd>
                        <div class="clearfix">
                             <a href="org-detail-homepage.html">
                                 <h1>{{ course_org.name }}</h1>
                                 <div class="pic fl">

                                         <img src="{% static 'images/authentication.png' %}"/>

                                         <img src="{% static 'images/gold.png' %}"/>

                                 </div>
                             </a>
                        </div>
                        <ul class="cont">
                            <li class="first"><p class="pic9">课程数：<span>1</span></p><p class="c7">学习人数：<span>1000</span></p></li>
                            <li class="c8" style="padding-left:18px;">北京市海淀区中关村北大街</li>
                            <li class="pic10" style="padding-left:18px;">经典课程：

                                    <a href="/diary/19/">c语言基础入门</a>

                                    <a href="/diary/16/">数据库基础</a>

                            </li>
                        </ul>
                    </dd>
                    <div class="buy start_groupbuy jsShowPerfect2" data-id="22"><br/>联系<br/>服务</div>
                </dl>
            {% endfor %}

数据库里image文件以字符串形式存储，即相对路径地址。光把它写在data-url里还不够，这里需要绝对路径。这样写

data-url="{{ MEDIA_URL }}{{ course_org.image }}"

但是再html文件里应用MEDIA_URL需要现在settings.py里加上 'django.core.context_processors.media'，它可以把MEDIA_URL 注册进html文件

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [os.path.join(BASE_DIR, 'templates')]
        ,
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
                'django.core.context_processors.media'
            ],
        },
    },
]

打开网页还是不显示图片。查看网页源代码，发现图片处data-url="/media/org/2018/01/imooc.png"，这个url需要在urls.py配置个函数处理，但不需要响应函数，django自带的serve函数即可。

from django.conf.urls import url, include
from django.contrib import admin
from django.views.generic import TemplateView
from users.views import LoginView, RegisterView,ActiveUserView,ForgetPwdView,ResetView,ModifyPwdView
from organization.views import OrgView
from django.views.static import serve
from MxOnline.settings import MEDIA_ROOT
import xadmin

from apps.users.views import login

urlpatterns = [
    url(r'^xadmin/', xadmin.site.urls),
    url('^$', TemplateView.as_view(template_name="index.html"),name="index"),
    url('^login/$', LoginView.as_view(),name="login"),  #as_view()方法判断是post还是get然后返回响应函数名
    url('^register/$', RegisterView.as_view(),name="register"),
    url(r'^captcha/', include('captcha.urls')),
    url(r'^active/(?P<active_code>.*)/$', ActiveUserView.as_view(),name="user_active"),
    url(r'^forget/$', ForgetPwdView.as_view(), name="forget_pwd"),
    url(r'^reset/(?P<active_code>.*)/$', ResetView.as_view(),name="reset_pwd"),
    url(r'^modify_pwd/$', ModifyPwdView.as_view(),name="modify_pwd"),
    #课程机构首页
    url(r'^org_list/$', OrgView.as_view(), name="modify_pwd"),
    #配置上传文件的访问处理函数
    url(r'^media/(?P<path>.*)/$', serve,{"document_root":MEDIA_ROOT})
]

这样就显示图片了。再显示一共多少家机构。

from django.shortcuts import render
from django.views.generic import View

from .models import CourseOrg, CityDict
# Create your views here.

class OrgView(View):
    """
    课程机构列表功能
    """
    def get(self, request):
        #课程机构
        all_orgs = CourseOrg.objects.all()
        org_nums = all_orgs.count()
        #城市
        all_citys = CityDict.objects.all()
        return render(request, "org-list.html", {
            "all_orgs":all_orgs,
            "all_citys":all_citys,
            "org_nums":org_nums
        })

再传入org_nums，{{org_nums}}。