转 Django+Bootstrap练习--我的类博客系统开发

转自：

http://blog.sina.com.cn/s/blog_7e050dc80102w312.html

本文记录了一个类博客网站从无到有的搭建过程，同时也是我入门django以及再次入门前端的过程。在建站过程中借鉴的博客、文档、视频等资料一并列出，希望能帮助到有需要的同学。

 

一直以来都有搭建个人网站的想法，目的有二：一是通过这个过程学习建站的知识，二来希望能像其他的技术大神们一样有个(xuan)优(ku)雅(bi)简(ge)洁(gao)的博客。之前暑假在实习的时候用wordpress在阿里云的云虚机主机上搭了个博客，由于web知识太久没接触，当时对html、php等知识可以说是两眼一抹黑。幸好wordpress的部署非常简单，跟着教程一路点点点就ok。然后再找了个看起来不那么low的模板往上一套，博客就算完成了。本来这事儿就算搞定了，个人博客什么的可以在互联网的角落里落灰了。直到有一天我突然想做一个爬虫的时候，发现这个云虚机主机上只能跑特定的程序，不能当一台真正的服务器用（免费的果然坑爹）。正巧在这个时候，知道了阿里云在搞云服务器的活动，针对学生只要9.9一个月。9.9就能畅享1G内存20G硬盘百M带宽的公网服务器， 简直业界良心。于是怒下单豪租一年，但是直到12月一次也登陆过...

复习PAT的日子可以说是写bug和debug的毅种循环。就这样过了一个月，12月初考完PAT之后终于有整块儿的时间进行网站的开发。这个时候的我已经手握强大但吃灰数月的阿里云服务器，自然已经看不上那半残的云主机。于是就开始了自己建站之路。

由于我有一定的html基础，所以学习顺序是Django（实现业务逻辑）--->Bootstrap（美化前端页面）-->Js（实现前端特定功能）-->HTML/CSS（系统地学习一遍）。这个过程同时也是我建站的过程。

 

零、网站是怎么炼成的

网站分为前端和后端两部分，后端负责选择呈现的内容和接收数据，前端负责展示内存和获取数据。对于最基本的静态页面（HTML文件），当你输入了一个网址敲下回车之后，目标服务器就会收到一个http请求（一般是GET），然后后端程序（Http服务器软件）就负责把相应的页面传送到浏览器，对于浏览器来说就是下载相应的页面（HTML文件），然后浏览器解析html文件并呈现出来，就完成了一个最简单的网页浏览过程。

所以一个网站能够被访问需要的最基本元素有：一台服务器（公网服务器或者PC），一个Http服务器软件程序（Apache/IIS等）,一个网页（HTML文件）。

为了能让HTML文件有统一的风格和漂亮的样式（比如字体的大小、按钮的颜色等），我们引入了CSS。

为了能在HTML上动态的实现一些功能（弹窗、改变页面文字等），我们引入了javascript（和Java并没有关系）。

为了能重复应用特定的html页面（模板），提高网站开发和显示效率。我们引入了动态页面，使用PHP、python、Java等语言。

至此，简单的服务器软件

具体可以参考我转载的文章：[ZT]从输入网址到显示网页的全过程分析

 

一、初学Django

随着技术的发展，现在早已不是当年那个html靠手写超链接靠粘贴的蛮荒时代。由于各种框架的出现，现在的web建设已经从造轮子变成了搭积木。框架说白了就是把各种最基本的零件组装成一个半成品，在上面稍加修改就可以完成可用但初级的产品。当然对于各种高流量大并发的高端网站，现成框架还是远远不够的。

由于我是看书苦手，所以在一开始就没有找来长篇的文档资料硬啃，而是选择了看视频入门。现在网上有很多mooc网站，选择面很广。我之前一直在网易云课堂看视频，所以这次就直接找来了潘炳臣老师讲的《Python Django 快速Web应用开发入门》学习。不得不说潘老师的声音很好听，我这个看一会儿视频就想关了刷论坛的人竟然一个不落全都看完了，当然他讲的内容对于初学者也是很不错的，每节课知识点不多而且都有总结回顾，节奏把握的很好。

但是这毕竟是个入门视频，对于搭建一个网站来说还是不够的。于是我又在网上找到了一些django网站开发的博客，跟着他们的步骤一步一步的搭起了简单的架子。我使用的是当时django最新的1.9版本，基于python3。django同时也提供支持python2的版本。理解了MVT模型、orm模型、模板之后搭建过程就比较简单了，我用的还是django自带的sqlite数据库，连设置数据库的步骤都免了。过程中遇到的一些问题，基本上都能通过百度和谷歌快速的找到答案。

分享一个debug的方法，django默认是打开debug模式的，所以如果模板或者数据库读写有任何错误，都会在错误页面写出来，仔细阅读错误描述或者搜索错误描述一般就能找到解决方案。

 

django学习资料：

菜鸟教程（各种互联网相关内容都有）

django（普通读音：姜go，文艺读音：詹go，我的脑内读音：大家go）的百度百科

潘炳臣-Python Django 快速Web应用开发入门

Tango with Django 中文文档

The Django Book 2.0

Django 基础教程

Django框架学习-Forms篇

django练习——博客系统优化

 

二、给架子披上外衣——Bootstrap

实现了基本的博客展示和评论功能之后，我就开始着手美化前端页面，使用了现在很流行的前端框架Bootstrap。前端框架可以理解为一个前端语言搭建的半成品库，用这个半成品库可以轻松的搭建简洁美观的web页面。Bootstrap把很多常用控件的样式都已经写好，比如button的按钮标签，它的颜色、大小、边距、点按的效果等都已经设置好，很方便的就能使用。

由于博客的展示用不到像大图轮播等炫酷的效果，所以对于bootstrap我只学习了能用到的部分。先是看了一部分网易云课堂李炎恢老师的Bootstrap视频教程，跟着教程和博客一点一点的优化了主页和展示页，后来又到宁皓网看了几集免费视频，优化了搜索框。所以对于有HTML基础的同学，我推荐的学习方法就是需要用什么就查文档，直接使用即可，不必系统的学习完之后再用。

Bootstrap在网上的资料非常多，需要注意的地方就是导入bootstrap的js文件的时候一定放在jquery后面，由于后续会有其他jquery插件也使用jquery库，所以jquery库可以放在模板文件的开头导入，只把bootstrap放在最后。

关于Bootstrap样式的自定义，这个其实很简单，只需要在HTML中插入自定义的CSS文件，就会覆盖bootstrap默认的样式。不建议在bootstrap源文件中修改样式。

 

Bootstrap学习资料：

李炎恢-Bootstrap视频教程

宁皓网（讲的不错，网上有免费的课程资源）

bootstrap的百度百科

bootstrap3中文文档

twitter bootstrap中文版

bootstrap菜鸟教程

 

三、JavaScript/jQuery及强大的插件

当前端的页面做的有点模样之后，还有一些验证和细节功能没有实现，同时我也展开了天(nao)马(dong)行(da)空(kai)的想象，想实现一些炫酷的功能。于是我的眼光转到了可以赋予html“魔性”的JavaScript。

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

由于Javascript博大精深，先系统的学一遍再用的话黄花菜都凉了。所以我就本着王婆卖瓜现学现卖的精神，直接搜索能实现各种功能的代码。由于网上大神很多，我的需求又十分普遍，所以大多能找到已经写好并且封装的插件，基本上拿来就能用。

在导入各种插件的时候需要注意的地方就是很多插件依赖jquery库，所以要在jquery库之后导入。如果继承模板使用插件，可以在继承的子模板中导入插件，也可以在父模板统一导入，在子模板加上{% load staticfiles %}。还有就是一定确认一个插件/库对于一个HTML页面只有一次导入，如果重复导入可能造成意想不到的问题。

由于js代码是由浏览器运行的，所以可以用浏览器来调试js代码。Safari、Chrome和Firefox都有开发者工具，只需打开开发者工具的console（控制台）标签即可看到js加载的信息，如果有语法错误就会在这里显示出来。

 

学习资料：

JavaScript 教程

Jquery教程

用到的库：

js-highlight库，可以控制页面元素高亮，用于搜索结果关键词高亮

bootstrapvalidator，简单好用的表单验证的插件

scrollup，生成返回页首按钮的插件

lightbox2 ，实现图片预览的灯箱插件

 

四、HTML5/CSS3

HTML本质上是一种格式控制语言。随着前端语言不断的发展，在引入了CSS之后，html和css的分工就比较明确了。既html负责定义内容（是什么），css负责控制内容样式（怎么展现）。html和css上手比较容易，在熟悉基本的标签和原理之后，其实完全可以边做边学。在本次建站过程中，前端基本上都是一边搜索一边参考w3school然后再实现的。网站上线之后我又找来了网易云课堂翁恺老师的html和css教程看了一遍，以期系统的学习前端语言。然而，通过和李刚老师的《疯狂HTML 5/CSS 3/JavaScript讲义》对比之后发现，云课堂上的教程还是讲的比较浅显。后续如果有需要还是要仔细啃书来学。

 

学习资料：

w3school

翁恺-HTML5入门

翁恺-CSS3

 

五、令人激动的时刻——部署到阿里云

网站在本地测试服务器上基本完美运行，于是我开始向服务器部署。部署的过程参考了自强学堂的这篇部署教程，教程使用的ubuntu系统，所以我也把阿里云服务器的操作系统改为ubuntu14.04版。由于我的osx系统自带ssh，所以直接使用了ssh来连接阿里云服务器，直接ssh 你的用户名@服务器的公网地址，然后输入服务器密码即可。ssh之后就可以用linux命令来操作服务器。

前面说到网页的浏览过程就是服务器软件根据浏览器请求的地址将存储在服务器上的页面传输给浏览器。部署的过程就是设置apache、pythonweb环境和上传网站。网站的上传我使用了osx下的Transmit。

需要注意的是，这篇教程配置sitename.conf（sitename可以换成自己网站的名字）的时候，网站所在位置是/home/tu/blog，所有路径包括标签内的路径都要改成自己的网站路径。对于第4步修改wsgi.py文件，如果你使用的是python3环境，那么一定要修改第七行，将"blog.settings"替换成你的"工程名字.settings"。原文说可以不修改，我就没改，然后就各种报400错误，我被这个问题困扰了2天，最后修改了就好了T_T.

服务器在大陆的网站必须要备案，具体办法可以参考万网的相关资料。办理备案的时间大约为半个月左右。

 

资料：Django 部署(Apache)

 

六、意料之外的问题——iphone的兼容性

上线之后便迫不及待的用手机打开网站，点击每一个链接查看实现效果——基本完美。直到打开一篇正文，发现右侧总是空出一部分背景色，不能完全做到主栅格占满全屏。其他正文都没问题，只有这一篇有bug，而且用mac上的Safari、Chrome浏览器，用安卓手机测试都没问题。找了很久也没有找到bug出现的原因，只好作罢。

 

七、代码管理——push到Github

Git是一个分布式的版本控制系统，而Github提供了一个公开的git托管服务，同时也是目前最流行的Git托管网站。对于git的操作可以参阅我的博文 git学习小结。将代码push到github上并公开就意味着代码的开源。可以使用客户端或者命令行的方式将代码push到github。

这个项目的github地址是：https://github.com/earther01/transfemail

 

写在最后

这个系统目前只是实现了最基本的存储、展示功能，并没有账号控制，主页也是十分简陋。这一部分和我的具体需求有关，一部分是由于时间仓促。本着先实现再完美的原则，也算走完了整个建站流程。目前一个简单的留言版已经实现，还没有上线。后续如果有时间的话，会继续充实主页，添加一些实用功能。