Django教程

Django常用项目结构以及cookiecutter-django。

Django第三方库推荐

Python一直是我最喜欢的语言，在这个寒假打算认真学习一下Python的Web框架。在Django和Tornado之间我选择了前者，没有特别的原因，网上人云亦云的，肯定不会有一方离另一方差很远，我就直接去看了看Github上两个项目的活跃度，所以选择了前者。

应该说Django坚持自己造轮子，确实为开发者节约了不少的时间，我很看重它的扩展功能，packages数量十分丰富。Django采用的是最流行也是我最熟悉的MVC设计模式，虽然在之前的一个PHP(Laravel)项目中也是采用的MVC模式，但一直都没怎么吃透，始终在各层分离的时候不是很清晰，所以也可趁学习Django对MVC的概念进行强化。

Django另一个我特别喜欢的特性就是Application，它与Project的概念不同，一个APP就相当于一个功能模块，一个Project可以包含多个APP，一个APP可以同时被多个Project引用，App增加了代码的复用机会，提高了扩展性和松耦合性，Django中很多的packages都是以APP的形式存在的。

2013年1月7日注册微博至今已经发了1000条微博了。微博带给了我太多的改变，必须在这里感谢一下。

我承认，最先申请微博是因为某苍姓明星，第一个关注的是她，第二个关注的就是创新工场李开复。这两年，社会上发生了太多的事情，开心的不开心的，深沉的悲哀的，都已成
往事，但感谢微博，这些，我都没有错过。

在我眼里，微信和QQ更多的是熟人的圈子，而微博则更多是围绕着名人或者一个自己感兴趣的圈子。我关注的600人里，IT圈子的人就有300+。有了微博，我不像以前
那样在大学里按着学校的计划一步一步学，而是学得更有激情，了解到太多学校里可能连老师都不知道的东西。通过微博，我可以了解到在大城市里(我说的是互联网意识高的那
些城市)的程序员最近都在关注着什么，现在主流的技术是什么，虽然大多数我并不会去接触，但至少我要知道有这些东西，身处“互联网的浪潮”，如果连周围的东西都看不清
，又怎么能在浪潮之巅尽情弄潮呢！

微博有时也会让人迷失，无聊的时候一遍一遍的刷着，很多人就这样沉迷其中。我不排斥碎片化的消息，但既然是碎片化的消息为何不用碎片化的时间去对待它，而不是让碎片化
的消息来将我们原本的时间碎片化。

对于微博，现在有很多人唱衰，我不置可否。确实，由于言论审核以及对某些人的打击让微博少了很多的自由，我认为在打击谣言方面，确实是需要Z·F来管理，但是他们在做
这些事情的时候做得太不明不白了，很多公众根本就不知道它到底做了些什么，这，我也只能呵呵了。另外，微信的兴起，也让微博的地位颤抖了一下，但是我认为微信和微博本
身并不冲突，侧重点不同，谁都不可能完全取代谁。不过还好，目前看来确实看不到一种可以彻底颠覆微博或者微信模式的社交平台诞生，至少，国内没有。

总之，感谢微博！

说实话，这样一部片子，很不想跟它写观后感的，但由于辅导员布置的寒假任务需要有这一项，那我就勉为其难地写一写观感。毕竟，这部片子我很早就开始在微博上听到，并且
在8月份首播时也是天天晚上守着电视观看的。

首先，抛开其他的，从片子本身来说，这种大型纪录片还是非常令人震撼的，与浪潮之巅一样，能深深地让人体会到身处互联网时代的我们是有多么地幸运。全片分为十集：时代
、浪潮、能量、再构、崛起、迁徙、控制、忧虑、世界、眺望，向我们全面展示了信息时代的发展过程以及其当前的影响力。

我是一个90后，电脑系统从Windows Xp一直用到Windows 10，从老式的闪屏电脑到最新的高清平板电脑，从MTK国产手机到最新的MIUI手机，我统
统都经历过，深刻地体会到技术力量的不断推进给我们人类生活带来的方便和生活方式上带来的改进。我相信互联网正以改变一切的力量，在全球范围(以后也一定会扩展到外太
空去)掀起一场影响人类所有层面的深刻边个，人类正站在一个新时代到来的前沿。

纪录片中说，对于互联网，人类未知的远远大于已知的，但我认为，在互联网方面，人类未知的远远小于已知的，但人类未通过互联网创造的远远大于人类所有历史中所已知的。
我们不仅要理解互联网，体会互联网，更要使用互联网为未来创造，给人类带来更加深远的影响。

作为一名计算机专业的大学生，我深深地被这些改变所震撼。从各个新兴互联网公司的崛起，比如小米、淘宝、京东等让我们年轻人也看到了希望，互联网行业远没有饱和。微博
改变了新闻传播的方式，支付宝改变了金钱传播的方式，Coursera改变了教育的方式。当互联网产品越来越多地替代了现实生活中的事务时，我们就进入了互联网时代。
目前，内陆人们的互联网意识完全不及沿海地区的人们，可以预见，今后的互联网不仅会更多地渗透入我们的日常生活，还会渗透到各个地区，各个行业，实现真正的公平。

最后就说说我对这部片不满意的地方了，每次看到CCAV那欲说还休的嘴脸我也是醉了。片中多次出现长城这个镜头，让人难免联想到GFVV这个众所周知但又没人敢承认的
东西。据悉，全球仅有四个国家屏蔽了facebook、twitter等世界最大的几个社交网站，包括朝鲜，伊朗，叙利亚和其它国家。这些国家的ZF都深喑控制言论的
方法，将言论自由牢牢地控制在自己手上。互联网发展到今天，如果还要拿国情来当借口，那么总有一天这些国家会因为闭关锁国而没落。还记得中国的第一封跨洋电子邮件的内
容：Across the Great Wall we can reach every corner in thee world（越过长城，走向世界），而在某
些国家可能一封电子邮件也很难发出去，所以，即使是在互联网这个整个人类历史上最开放的阶段，也依然存在着不公平的现象，改变这种现象，需要的是我们新一代的计算机人
。

总之，这部纪录片让我们对互联网有了更加深刻的理解，互联网绝不仅是一场技术上的变革，而是一场社会变革，它势必会引领人类进入一个全新的时代。而我们计算机专业的学
生也应该有危机感，抱着终身学习的态度，务必让自己处于浪潮之巅。

看到知乎上一个问题：为什么有人说日本人冷漠？这是我特别喜欢的一个回答：

日本人有一颗，只要你不影响别人，随便你怎么变态的包容心，和不管自己怎么变态，都不能影响别人的责任感；
中国人有一颗，只要你和别人不一样，就觉得你需要教导的温暖爱心，和不管自己多么平庸，都要去影响教导别人的责任感。

我没去过日本，不知道日本人到底是怎么样的，所以这段话暂且抛弃国籍因素，至少我遇到的人，基本上都属于后者，而我自己更愿意做前者。

之前看日本电视剧《Legal High》，从第一季第一集开始我就一直在想，这样的电影到底在宣传一种什么样的价值观，还是纯粹的搞笑，古美门律师到底是好人还是坏
人呢？直到看到第二季的最后一集，我仿佛明白了一些。日本的电视剧并没有那么强烈刻意地去宣传一种价值观，而是非常微妙的在传达，让观众自己去领悟，自己去总结。

归根结底，是对人性的一种尊重。人也是一种动物，有自己的欲望，无论是对金钱还是对道德都一样，我从不否定。

我不愿强加自己的观点到别人身上去，只要不是自己所关心爱护的，只要不是关乎切身利益的，别人做什么，关我屁事。最讨厌的就是那种自以为自己的道理是正确的，并且并没
有从自己的那个道理中获得什么的人。

我献血我捐款，不是为了做个好人，也不是因为整个社会都觉得这样对我才去做，而是因为我想通过这样的方式帮助别人
我不给路边的乞丐钱财，不为别的，就是觉得他们太懒了
姓方的那个校长，我就诅咒他，妨碍社会进步，还让我无法自由上网。
很多热门事件我不发表意见，不为别人，因为我知道自己可能没有全面了解事实，当然我绝不是那种不会提意见的人，该说就说，该骂就骂
我也经常看那些心灵鸡汤，但只是看看而已，因为我知道，无论别人怎么走，无论马云怎么成功，即使我完全按照别人的生活方式、成长轨迹走，也不会成长为第二个他，当然我
也不想成为第二个他，要做就做最好的自己。

PS：以上观点只是个人吐槽，无关对错，无关善恶。

根据以往的经验，做规划最好是做一些能够量化的目标，这样会更加有行动力。但今年，我不打算这样做，很多时候我觉得我的大学过得太理性了，一点儿都不精彩，每天除了写
代码就是去学习如何写代码。我不想再每天都窝在寝室了，虽然现实让我不得不面对未来，但今年我想在大量的未知中体会后青春时代的精彩。所以今年，就围绕以下几个关键词
：

• 实习：等了好久终于等到今天，终于可以验证这几年的学习成果了，终于可以用自己的双手为未来打拼了。
• 减肥：额，说实话，我身高160体重70，但看起来其实不胖的，只是身体已经因为脂肪太多出现一些毛病了，所以今年必须狠下心了。
• 健康：自打前年得了肾结石后就非常关注身体健康了，虽然我从来没想过要多长寿，今朝有酒今朝醉呗，但就目前看来再这样宅下去，我真正的人生还没开始就溘然长逝了。
• 女朋友：采访过多位学长学姐，十有八九说大学最遗憾的事情就是没有谈恋爱。我不是别人都在谈恋爱我就去谈恋爱，也不是不想谈恋爱，是一直找不到那个人，希望今年能加一把劲。
• 换装备：每次回家家人都强烈要求我去买几件成熟的衣服，而我却一直觉得衣服没穿烂就不用去买新的，而且衣服多了对于我这个重度选择困难患者简直是一种折磨，但是，毕竟该找工作了，还是换一换装备吧。
• 说到做到：我一直自诩为一个重信用的人，不过总是答应了别人的事情到最后时间却有点畏惧了，归根结底是自己不够勇敢和太爱做承诺了，所以今后一定少说什么承诺，但每个承诺务必保证说到做到。正如漩涡鸣人：说到做到，这就是我的忍道！

bootstrap是由Twitter退出的一个用于前端开发的开发工具包，其中包含了许多简洁大方的css样式和实用的js插件，当然，它是移动设备优先的响应式开发方式。

breakpoints断点定义

• bootstrap的响应式breakpoints定义
• 首先是移动设备有限，所以默认情况的样式是针对移动设备的，往上主要就是两个断点： md(>=768px iPad)、lg(>=992px正常的Web尺寸)

栅格系统

1
2
3
4

<div class="row">
  <div class="col-md-1"></div>
  <div class="col-md-1"></div>
</div>

Utilities

• 从4.x才开始的

• 有几种常见样式并不存在于utilities里面，如font-size/line-height/height ，建议直接写在html的style里

Border

• 需要注意的是border不支持breakpoints

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

  border border-top border-right border-bottom border-left border-bottom-0 # border-radius rounded rounded-top rounded-right rounded-bottom rounded-left rounded-circle # 圆形 rounded-0 # 没有圆角 # border-color border-primary border-secondary border-success border-danger border-warning border-info border-light border-dark border-white

Color

• 设置字体颜色

  1 2 3 4 5 6 7 8 9 10

  .text-primary .text-secondary # 深灰色 .text-success .text-danger # 红色 .text-warning .text-info .text-light # 浅灰色 .text-dark # 黑色 .text-muted .text-white

• 设置背景颜色

  1 2 3

  .bg-secondary # 深灰色 .bg-light # 浅灰色 .bg-dark # 黑色

Cursor

• 只要给元素加上role="button"即可增加cursor: pointer属性

Display

• 以d开头
• 可取的值有none、inline、inline-block、block、table、table-cell、table-row、flex、inline-flex

Flex

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

d-flex	# flex布局

# 排列方向
flex-row
flex-row-reverse
flex-column
flex-column-reverse
.flex-sm-row
.flex-sm-row-reverse
.flex-sm-column
.flex-sm-column-reverse
.flex-md-row
.flex-md-row-reverse
.flex-md-column
.flex-md-column-reverse
.flex-lg-row
.flex-lg-row-reverse
.flex-lg-column
.flex-lg-column-reverse
.flex-xl-row
.flex-xl-row-reverse
.flex-xl-column
.flex-xl-column-reverse

# 内容布局
justify-content-start
justify-content-end
justify-content-center
justify-content-between
justify-content-around

Sizing

• 不支持breakpoint

• 宽度

  1 2 3 4

  w-25 w-50 w-75 w-100 # width: 100%

• 高度

  1 2 3 4

  h-25 h-50 h-75 h-100 # height: 100%

Overflow

1
2
3
4

overflow-auto
overflow-hidden
overflow-visible
overflow-scroll

Positoin

1
2
3
4
5

position-static
position-relative
position-absolute
position-fixed
position-sticky

Spacing

• m表示margin，p表示padding
• t、b、l、r分表表示top、bottom、left、right
• x表示水平方向left和right
• y表示垂直方向top和bottom
• 可以加上响应式参数{property}{sides}-{breakpoint}-{size}
• size的取值有0、1、2、3、4、5、auto

Text

• align item

  1 2 3 4 5

  align-item-center align-item-start align-item-end align-item-baseline align-item-stretch

• text alignment

  1 2 3 4 5 6 7

  text-left text-center text-right # 添加breakpoint text-sm-left text-md-left

• font weight

  1 2 3 4 5

  font-weight-bolder font-weight-bold # 700 font-weight-normal # font-weight: 400 font-weight-light font-italic # 斜体

• wrap

  1 2	text-nowrap text-truncate # 截断，用省略号表示

• justify-content

  1 2	justify-content-center justify-content-between

• vertical-align

  1	align-middle # vertical-align: middle

特殊功能(使用Tips)

• **下拉选择列表(需要bootstrap.js)**：

  1 2 3 4 5 6 7 8 9

  <div class="form-group"> <label for="sel1">Select list:</label> <select class="form-control" id="sel1"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> </select> </div>

• input的属性(居然没有哪个地方写了的，我也是醉了，难道只有我没有找到，还是只有我什么基础都没有还来用bootstrap):

  1 2 3

  <input placeholder="Enter email"> placeholder属性表示在输入框内预先显示的文字 <input type="email"> type会影响到该输入框的展现形式，它的值可以是checkbox、email、file、password、text(文本输入框) <input class="form-control"> input只有加了这个类才会呈现得好看一点，并且默认宽度会变成100\%

• 表单里面点击按钮禁止跳转，不要讲button的type设置为subbmit或者不设置，必须将其设置为type="button"才不会强制刷新当前页面

• 使用jquery控制carousel跳转:

  1 2 3 4 5 6 7 8 9

  $('.carousel-control').click(function(e){ e.stopPropagation(); var goTo = $(this).data('slide'); if(goTo=="prev") { $('#carousel-id').carousel('prev'); } else { $('#carousel-id').carousel('next'); } });

常用网址

百度的CDN： http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap-theme.min.css http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js 全局CSS样式：http://v3.bootcss.com/css/ 组件：http://v3.bootcss.com/components/ JavaScript插件：http://v3.bootcss.com/javascript/ jQuery UI Bootstrap：http://www.bootcss.com/p/jquery-ui-bootstrap/ Glyphicons字体图标：http://v3.bootcss.com/components/#glyphicons **实例精选(几个简单的模板)**：http://v3.bootcss.com/getting-started/#examples

红尘往事莫笑痴人看不穿
百年间五行山下情仇如烟
望不断的前尘难用自由换
弃了心回忆偏又纠缠

若经历过太多的爱恨嗔癫
谁还能潇洒纵横这人世间
回首早已沧海桑田物易人迁
徒留我在这云巅

回想那年锁子金甲傲气敢齐天
呼风唤雨叱咤间风云变
流光一舞搅碎星辰日月山河颤
怒指苍穹要让诸佛烟消云散

后来多少次落日凝望西边的天
迷失了自己也蹉跎了时间
谁不肯放过回忆在孤独中执念
五百年的沧桑不过是转眼

爱过笑过终究是曲终人散
流年飞逝中早已无可逆转
无法抗争的命运遗忘了誓言
留下谁不甘的心酸

那束住了回忆的不过是一个圈
却太轻易的遗忘了从前
某一刻回头看清了灵魂的背叛
才终于等到了旅途的终点

是谁一次次寂寞凝望晚霞满天
杀死了回忆也斩断了羁绊
又是谁还孤独等在无尽的黑暗
怀念着故人守候在云巅

五百年的沧桑不过是转念

我听歌向来不去研究演唱者的唱功，最看重的必须是歌词，我想，就是因为方文山的歌词，才会有那么多杰迷。

这首《云巅之上》是我在中国原创音乐基地发现的，第一次听就被震撼到了，当时
酷狗音乐里还没有它的歌词，我就立马为它添加了歌词文件，不过我已经不用酷狗好多年了。这首歌的歌词十分有意境，我想每一个身怀远大报复的人听到这首歌都会遥想一下自己站在云巅之上的感觉。

十岁不愁、二十不悔、三十而立、四十不惑、五十知天命、六十 耳顺、七十古来稀。现在的我正处于风华正茂的二十几岁，马上步入大学，经常臆想着自己毕业不用多久就能升职加薪，当上总经理，出任CEO，赢取白富美，走上人生巅峰。可是，另一方面，我又有一些害怕，就像高考前夜，我很害怕，害怕的不是自己发挥失常，不是自己考不上理想的学校，害怕的是未知的未来。无论是高考还是大学毕业，都为我打开一扇通往未知的大门，门后究竟是什么，我完全不知道，有时我会想得很美，有时又想得很糟。很多次，我会想象，多年后的自己面对夕阳会在想什么呢?还会不会想起当年某一天自己曾许下的豪言壮语?身边又是否会有一个人陪伴呢？

人生几何，只有走过后才有资格笑看人生，走出去吧，去看看这个世界。连世界都没观过的年轻人，哪儿来的世界观。

一直都希望能成为一个Full
Developer，现在唯一的短板就是前端(美工就不说了)。但是在学习期间却遇到太多的问题，无论从时间还是从动力方面考虑暂时都无法认真地去学习前端。

首先，我个人确实不喜欢前端，在大一还错误地以为那是女生才应该去做的。其次，纵观近年来前端的发展趋势，Bootstrap，jquery的流行，nodejs，r
uby的兴起令前端呈现出一片繁荣的景象，并且大有取代后端的趋势，现在完全使用前端的全栈方案也一下冒出来许多。但这些到底是昙花一现还是真的大势所趋？无论怎样，
前端代替后端我觉得是不可能的，这两年前端确实比后端火，但福兮祸所依，谁又能知道下一次谁又会站在浪潮之巅呢！所以目前还是多深入自己已经掌握的方向，毕竟，找第一
份工作还是挺重要的。前端虽然很繁荣，但在我看来，这其中有很大一部分处于混乱之中，而且后端的东西已经很多了，但前端的比后端多好多倍，技术栈数不胜数，这让一个选
择困难症患者怎么去学习。

浅尝辄止，会一点基础，就能使用别人的现有代码，虽然不能很好实现自己的想法，但已经能做很多的事情了。我目前在前端已经学习了html(5)/css(3)/js/
jquery/Ajax/bootstrap等技术或框架，当然，只是会一点点运用而已。另外，由于自学中经常会接触到前端的一些知识点，记性不好，所以决定以后前端
的一些笔记同样记录到博客上来。

JavaScript & Ajax & jQuery

TODO: 逐步用原生方法替换jQuery，参考You-Dont-Need-jQuery

• 判断是否是非数字: isNaN(a)
• 生产环境直接全局屏蔽掉console.log的输出，只需要复写即可:console.log=()=>{}
• 包含关系(超集): TypeScript > ES2016 > ES2015 > ES5
• 常用CDN
  • cdnjs

基本语法

• ?.可选链optionalChaining，a?.b，表示如果a对象存在那么取a.b属性，否则直接返回null，而不会因为找不到属性报错，但是这个语法在vue2的template中无法使用。这居然是14.x才开始能用的
• ??双问号，a ?? b，如果左边的值为null或者undefined，那么就返回右边的值，需要注意的是左边为false的时候依然是左边的值
• js也是有switch语句的
• if条件语句如果有逗号，其实是按照最后一个值作为判断的: if (a = '123', b = '234', a > b)

变量

• 获取变量所占用的内存大小可以使用object-sizeof

1
2
3
4
5
6
7

var $a;	// es6以前定义变量，if (true) {var a = 1;} console.log(a); 输出为1
let $b;	// es6用于定义跨级作用域本地变量，if (true) {let b = 1;} console.log(b);输出为undefined
const $c;	// 定义常量
window.test = 123;	// 声明全局变量
a = {...b}	// 变量克隆

const [a, ...b]	= [1, 2, 3, 4]	// a=1, b=4	解构赋值

Virtualenv可用于创建独立的Python环境，在这些环境里面可以选择不同的Python版本或者不同的Packages，并且可以在没有root权限的情况下在环境里安装新套件，互相不会产生任何的影响。

以下就是使用Virtualenv搭建Python3.4+Django1.7.4的过程：

准备工作

安装Virtualenv和Python3(因为有些Linux发行版默认没有安装Python3的)

1
2

sudo pip install virtualenv
sudo apt-get install python3

建立一个新的工作环境

1
2
3

virtualenv --no-site-packages --python=python3.4 test_env
# 如果出现The executable python does not exist 错误，那么可以这样使用
virtualenv --no-site-packages --python=3.4 test_env

其中，--no-site-packages表示不包括系统全局的Python安装包，这样会更令环境更干净--python=python3.4指定Python的版本未系统已经安装了的Python3.4 test_env是建立的环境的名称

进入环境测试并安装Django

使用source test_env/bin/activate命令进入开发环境，然后查看Python版本，再使用pip install django安装django

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

➜  virtualenv  ls
test_env
➜  virtualenv  source test_env/bin/activate  # 如果是windows则是source test_env/Script/activate
(test_env)➜  virtualenv  python
Python 3.4.0 (default, Apr 11 2014, 13:05:11)
[GCC 4.8.2] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import django
Traceback (most recent call last):
  File "<stdin>", line 1, in <module>
ImportError: No module named 'django'
>>> exit()
(test_env)➜  virtualenv  pip install django
Collecting django
  Using cached Django-1.7.3-py2.py3-none-any.whl
Installing collected packages: django
Successfully installed django-1.7.3
(test_env)➜  virtualenv  python
Python 3.4.0 (default, Apr 11 2014, 13:05:11)
[GCC 4.8.2] on linux
Type "help", "copyright", "credits" or "license" for more information.
>>> import django

import django没有发生错误，证明已经成功安装Django了

开始第一个Django app

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

(test_env)➜  virtualenv  django-admin startproject mysite
(test_env)➜  virtualenv  ls
mysite  test_env
(test_env)➜  virtualenv  cd mysite     

(test_env)➜  mysite  python manage.py runserver
Performing system checks...
System check identified no issues (0 silenced).
You have unapplied migrations; your app may not work properly until they are applied.
Run 'python manage.py migrate' to apply them.
January 24, 2015 - 14:52:09
Django version 1.7.3, using settings 'mysite.settings'
Starting development server at http://127.0.0.1:8000/
Quit the server with CONTROL-C.
[24/Jan/2015 14:52:17] "GET / HTTP/1.1" 200 1759

需要注意的是，新建的项目的文件夹mysite并不是仅仅存在在那个虚拟环境里，而是在实际的文件中，只是运行它使用的是虚拟的环境而已，不信呆会儿退出该虚拟环境后，你可以用实体环境在该目录下测试。

现在就可以直接访问http://127.0.0.1:8000，不需要端口映射，可直接访问：

退出虚拟环境

最后退出，直接在该环境中使用deactivate命令即可退出