美文网首页python学习实践Python 运维生活不易 我用python
Django学习记录第八天—机构列表 + 模板

Django学习记录第八天—机构列表 + 模板

作者: Rokkia | 来源:发表于2017-06-29 20:45 被阅读184次

    说到机构,这其实是一个单独的app,我们来创建一个app,name organization。OK开始吧。

    image.png image.png image.png

    不要忘了要加到settings中的app里哦!

    image.png

    这里我不自觉的想了一下怎么去定义一个app,想了半天没有想到好的形容词,就来官网看了一下。有这么一段话。

    手残波浪线

    app是一个可以做blog系统,数据库记录,或者一个简单投票app的web应用。恩,还是很朦胧,也许我们做的多了就可以慢慢理解了。加油吧。

    搞定,创建好app后,我们来创建一下model,因为数据是支撑一切项目的基础。
    看看我们的organization都需要说明字段。

    image.png

    还有一个就是需要一个商品详情。
    OK,来写一下。

    class Organization(models.Model):
        name = models.CharField(max_length=20, verbose_name=u'课程名')
        course_num = models.IntegerField(default=0, verbose_name=u'课程数')
        students_num = models.IntegerField(default=0, verbose_name=u'学习人数')
        address = models.CharField(max_length=200, verbose_name=u'地址')
        image = models.ImageField(upload_to='photos/%Y/%m/%d', verbose_name=u'图片')
        desc = models.CharField(max_length=200, verbose_name=u'机构详情')
        addtime = models.DateField(verbose_name=u'添加时间', default=datetime.datetime.now)
    
        class Meta:
            verbose_name = u'机构'
            verbose_name_plural = verbose_name
    
        def __unicode__(self):
            return self.name
    

    里面有个ImageField,大家可能不太清楚,看一下文档,使用FileField或者ImageField,大概需要下面几步。

    • 设置MEDIA_ROOT,
    • 设置upload_to参数
    • 获取局对路径的方式 {{ object.mug_shot.url }}

    这里有个特别注意地方,在MEDIA_ROOT最后不加/ 在upload_to一开始位置不加/

    image.png

    关于MEDIA_ROOT需要注意的是MEDIA与STATIC_ROOT一定不能相同,否则可能会原地爆炸。

    image.png

    我们发现,其实他还有个Course这么一个属性,我们为什么没有写在这里面呢?因为其实organization是course的一个外键,所以我们需要将organization写道course里面。这么说来我们就需要来创建一个course了。我们需要创建一个course的app。至于app的理解我会找个合适的机会在跟大家解释(好吧,我承认我现在也有点搞不清)。

    image.png image.png image.png

    然后我们来创建以下course的model。

    image.png image.png

    还有一个课程详情需要写。
    来写一下,model.

    class CourseModel(models.Model):
        name = models.CharField(max_length=50, verbose_name=u'课程名称')
        time = models.IntegerField(default=0, verbose_name=u'时长')
        students_num = models.IntegerField(default=0, verbose_name=u'学习人数')
        org = models.ForeignKey(Organization, verbose_name=u'组织', null=True, blank=True)
        collection_num = models.IntegerField(default=0, verbose_name=u'收藏数')
        simple_desc = models.CharField(max_length=200, verbose_name=u'简介')
        degree = models.CharField(max_length=15, choices=(('senior', u'高级'), ('intermediate', u'中级'), ('primary', u'初级')),default='primary', verbose_name=u'难度')
        desc = models.CharField(max_length=200, verbose_name=u'详情')
        image = models.ImageField(upload_to='courses/%Y/%m/%d', verbose_name=u'图片', default='default.png')
        addtime = models.DateField(verbose_name=u'添加时间', default=datetime.datetime.now)
    
        class Meta:
            verbose_name = u'课程'
            verbose_name_plural = verbose_name
    
        def __unicode__(self):
            return self.name
    

    OK,这两个解决之后,我们可以来makemigrations

    makemigrations
    ...
    ...
    SyntaxError: Non-ASCII character '\xe6' in file /Users/mac/Desktop/Study/Python/TestProject/apps/organizations/models.py on line 17, but no encoding declared; see http://python.org/dev/peps/pep-0263/ for details
    

    这是什么鬼,不要方,因为我们使用中文的问题。
    我们在两个model前加上

    # _*_ coding:utf8 _*_
    

    再来执行一遍。OK,没问题
    看一下数据库。

    image.png

    我们来看一下coursemodel这个表

    image.png

    这里我们发现其实org存的是org_id也就是存的是organization的id。
    model写完了,我们需要修改我们的xadmin,xadmin是什么?能吃吗?能,鸡肉味。忘了的看一下前面吧。
    写一个course的。三步曲。

    • 第一步
    import xadmin
    from course.models import CourseModel
    
    class CourseModelAdmin(object):
        list_display = ['id', 'name', 'simple_desc']  # 添加要显示的列
        search_fields = ['id', 'name', 'simple_desc']  # 要查询的列
        list_filter = ['id', 'name', 'simple_desc']  # 要筛选的列
    
    xadmin.site.register(CourseModel, CourseModelAdmin)
    
    • 然后,apps.py中
    from django.apps import AppConfig
    
    class CourseConfig(AppConfig):
        name = 'course'
    
        verbose_name = u'课程'
    
    • 最后, __init__.py中
    default_app_config='course.apps.CourseConfig'
    

    这样我们就可以添加我们的数据了 。

    image.png

    我们添加几个数据,然后用来显示。

    数据有了,我们就该写我们的界面了机构列表页。
    这个又回到了上一篇的步骤,修改html...。今天要讲一个别的,叫做模板的一个东西,额,template貌似就是模板的意思。不管了,先搞起来。

    首先为什么使用这个东西。

    image.png image.png image.png

    这三个界面的样式其实基本一样,只是中间的信息在变,所以就出现了模板这东西,我们可以让不变的部分都使用一样的。变得部分再单独显示。

    怎么用呢?要使用一个奇怪的东西。叫做{% block name %}可变的部分{% endblock %},散了,来代码吧。
    首先创建一个base界面。

    image.png

    然后,我们将三个界面中的任意一个的代码copy过来。
    然后我们要来找什么地方是可变的了。
    首先是这个title

    image.png
    {% block title %}<title>公开课列表 - 慕学在线网</title>{% endblock %}
    

    我们改写成这样。然后在找找。

    image.png

    这个包含left layout 与 right layout的section,需改后。

    {% block content_section %}
        <section>
        <div class="wp">
            <div class="list" style="margin-top:0;">
                <div class="left layout">
                    <div class="head">
                        <ul class="tab_header">
                            <li class="active"><a href="?sort=">最新 </a></li>
                            <li ><a href="?sort=hot">最热门</a></li>
                            <li ><a href="?sort=students">参与人数</a></li>
                        </ul>
                    </div>
                    <div id="inWindow">
                        <div class="tab_cont " id="content">
                        <div class="group_list">
    
                                <div class="box">
                                    <a href="course-detail.html">
                                        ![](../media/courses/2016/12/mysql.jpg)
                                    </a>
                                    <div class="des">
                                        <a href="course-detail.html">
                                            <h2>xadmin进阶开发</h2>
                                        </a>
                                        <span class="fl">时长:<i class="key">30</i></span>
                                        <span class="fr">学习人数:2  </span>
                                    </div>
                                    <div class="bottom">
                                        <a href="course-detail.html"><span class="fl">来自慕课网</span></a>
                                        <span class="star fr  notlogin
                                            " data-favid="15">
                                            1
                                        </span>
                                    </div>
                                </div>
                        </div>
                        <div class="pageturn">
                            <ul class="pagelist">
                                            <li class="active"><a href="?page=1">1</a></li>
                                            <li><a href="?page=2" class="page">2</a></li>
                                    <li class="long"><a href="?page=2">下一页</a></li>
                            </ul>
                        </div>
                    </div>
                    </div>
                </div>
                <div class="right layout">
                    <div class="head">热门课程推荐</div>
                    <div class="group_recommend">
    
                        <dl>
                            <dt>
                                <a target="_blank" href="">
                                    ![](../media/courses/2016/11/540e57300001d6d906000338-240-135_n0L8vbw.jpg)
                                </a>
                            </dt>
                            <dd>
                                <a target="_blank" href=""><h2> django与vuejs实战项目2</h2></a>
                                <span class="fl">难度:<i class="key">高级</i></span>
                            </dd>
                        </dl>
                    </div>
                </div>
            </div>
        </div>
    </section>
    {% endblock %}
    

    由于太长了,我删了一部分。大家明白就行使用{% block content_section %}{% endblock %}包裹住这个section。其他就不再介绍了,然后我们需要将这个base的html的静态文件地址改一下../改成{% static '' %}

    这些处理完成后,我们怎么使用这个base呢。
    我们来到org-list.html
    第一行一定要写

    {% extends 'base-list.html' %}
    

    如果第一句不是这个,是会报错的!!
    然后写入静态文件

    {% load staticfiles %}
    

    这个不是必写的,防止下面会用到。然后就是使用我们的block了。以title为例子。

    {% block title %}<title>课程机构列表 - 慕学在线网</title>{% endblock %}
    
    image.png

    来个截图吧,这样清楚。
    这样之后,我们将其他都删了就行了。
    于是我们的org-list.html就变成了这样。

    image.png

    OK,可见模板还是很好用的。至于里面的数据我们明天再看。

    外送文档一份。有兴趣的可以看一下。

    资料下载地址
    资料直接下载

    坚持三十天,一起加油!

    相关文章

      网友评论

        本文标题:Django学习记录第八天—机构列表 + 模板

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