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

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

作者: hs_a2d1 | 来源:发表于2018-01-29 20:41 被阅读0次

    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}}。

    相关文章

      网友评论

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

          本文链接:https://www.haomeiwen.com/subject/rbjfzxtx.html