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

                
  • 所在地区

    更多
    全部 {% for city in all_citys %} {{ city.name }} {% endfor %}
  •             {% for course_org in all_orgs %}
                    

    联系
    服务
    {% 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.*)/$', ActiveUserView.as_view(),name="user_active"),
        url(r'^forget/$', ForgetPwdView.as_view(), name="forget_pwd"),
        url(r'^reset/(?P.*)/$', 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.*)/$', 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}}。

    你可能感兴趣的:(25.课程机构列表数据展示(含如何把上传图片等文件保存并显示在网页))