Django学习记录第八天—机构列表 + 模板
说到机构，这其实是一个单独的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">
</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="">
</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，可见模板还是很好用的。至于里面的数据我们明天再看。
外送文档一份。有兴趣的可以看一下。
