LNMP系列网站零基础开发记录（三）
[目录]
扯淡吹逼之开发前奏
Django 开发环境搭建及配置
web 页面开发
Django app开发
Django 站点管理
Python 简易爬虫开发
Nginx&uWSGI 服务器配置
...
三、web页面开发
好吧，本来想单独写一章bootstrap的，但是前端确实没什么好写的，这里我们直接结合实际直接开搞吧。做WEB我习惯先把想要的页面模板做完，然后再根据razar或者这里要用到的django template修改。美工确实不太好，P得一手烂图，所以一般都用现成的开源框架，这里我们选用了现在很流行的bootstrap，由于懒得改CSS，所以全部用原生的代码，基本不加修改。
这里在强调一下我们的目标，做一个简单的开发错误查询网站，同时需要提供相应错误的解决方案
带着这样的目标，我们大概需要如下几个web页面：
- 主页（查询页面）
- 查询结果页面
- 错误详细页面
- 维护页面
对的，灰常的简单，页面很少，先给出几个页面的图吧（维护页面后面站点管理部分会介绍）
这里页面共有的 Header和Footer我们可以放到一个base.html页面，内容页通过模板继承实现，具体代码如下：
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>模板- {% block title %}{% endblock %}</title>
<script src="/media/javascript/jquery-1.11.1.js"></script>
<script src="/media/bootstrap/js/bootstrap.js"></script>
<link href="/media/bootstrap/css/bootstrap.css" rel="stylesheet"/>
</head> <body> <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="/media/image/icon.png">
</a>
</div> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav nav-d">
<li>
<a href="/">首页</a>
</li>
<li>
<a href="#">推荐</a>
</li>
</ul>
<form class="navbar-form pull-right form-inline" action="/search/" >
<div class="form-group"><input type="text" class="form-control" name="q" value="{{ q | default:'' }}" ></div>
<div class="form-group"><button type="submit" class="btn btn-default" >Go</button></div>
</form>
</div>
</div>
</div>
</div>
</nav>
<div class="spliter"></div>
<div class="container">
<div class="row">
<div class="col-md-3">
<div> </div>
{% block widget-nav %}
{% endblock %}
</div>
<div class="col-md-6">
<div> </div>
{% block content %}
{% endblock %}
</div>
</div>
</div>
<footer class="footer">
<p>XXXXXXXXXXXXXXXX | Powered By | <a href="http://www.miibeian.gov.cn/" target="_blank">京ICP备XXXXXX号</a> | 京公网安备XXXXXXXX</p>
</footer>
</body>
</html>
前面我们已经定义了/media/作为静态文件的根目录（Django 开发环境搭建及配置），因此我们把bootstrap整个目录放在/media/下面，并引入jquery.js, bootstrap.js以及bootstrap.css，注意jquery和bootstrap的顺序，同时注意引入相对路径。
首先说下bootstrap的部分，在大屏幕下显示效果如上述三幅图的所示，而切换到小屏幕时就会自动切换成下图，这是响应式设计的带来的优势，可以使我们的站点自适应于各种类型的设备，具体原理和实现方式请自行阅读bootstrap源码吧。
再说下django template部分，django tempalte以{% %}表示指令，{{ }}表示变量，指令需要有相应的{%end-op%}块，这个比起razar有些不方便。base.html中，我们定义了三个block，分别是
{% block title %}{% endblock %}
{% block widget-nav %}{% endblock %}
{% block content %}{% endblock% }
简单说来，和razar中的section一样，在继承的子模板中，如果定义了相同名称的block，那么母版中的相应block之间的内容换完全被替换，上面三个从名字和对应的区域应该很容易看出是干什么的了吧。
block中详细的实现部分因为涉及到了传入的参数，因此我们在app的实现中来详细讨论。
PS.
- 表达能力较差，以后慢慢更新，同时[目录]会随着跟新进度随时调整，欢迎大家拍砖！
- 网站链接会在数据积累一段时间后提供
LNMP系列网站零基础开发记录（三）的更多相关文章
- LNMP系列网站零基础开发记录（一）
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
- LNMP系列网站零基础开发记录（二）
[目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...
- 【转载】salesforce 零基础开发入门学习（三）sObject简单介绍以及简单DML操作（SOQL）
salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL) salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesfo ...
- IM开发者的零基础通信技术入门(三)：国人通信方式的百年变迁
[来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<中国通信的百年沉浮>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时内容有 ...
- 【转载】salesforce 零基础开发入门学习（四）多表关联下的SOQL以及表字段Data type详解
salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解 建立好的数据表在数据库中查看有很多方式,本人目前采用以下两种方式查看数据表. 1.采用schem ...
- 【转载】salesforce 零基础开发入门学习（五）异步进程介绍与数据批处理Batchable
salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable 本篇知识参考:https://developer.salesforce.com/trailhead/for ...
- 零基础开发一款微信小程序商城
零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...
- html5游戏开发-零基础开发《圣诞老人送礼物》小游戏
开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...
- MVC+Ext.net零基础学习记录（四）
在上一篇文章[MVC+Ext.net零基础学习记录(三)]中提到了利用MVC的Area可以做到项目分离,但是实际操作起来还是有很多问题的.比如,对于物理资源的访问,会报:没有相关资源 开始的时候,我在 ...
随机推荐
- string Format转义大括号:输入字符串的格式不正确。
String.Format("{0} world!","hello") //将输出 hello world!,没有问题,但是只要在第一个参数的任意位置加上一个大 ...
- Python之路【第二篇】：Python基础（一）
一.作用域 对于变量的作用域,执行声明并在内存中存在,该变量就可以在下面的代码中使用. 1 2 3 if 1==1: name = 'wupeiqi' print name 下面的结论对吗? ...
- mq队列管理器命令
dspmq: 队列管理器显示 QMCIPSA-------队列管理器 runmqsc QMSAA 运行查找Q队列名 运行MQ命令 runmqsc QmgrName 如果是默认队列管理器,可以不带其名 ...
- ubuntu下使用nethogs监控网络流量
NetHogs是一款小巧免费的开源命令行工具,用来按进程或程序实时统计网络带宽使用率. 对于使用类似于“repo tool”.“depot_tools”等工具checkout源码时非常有用,可以查看当 ...
- bootstrap知识小点
年底没什么项目做了,整理下最近做的网站使用到的bootstrap知识 一.导入bootstrap样式和脚本 <link href="css/bootstrap.min.css" ...
- Vue.js学习 Item11 – 组件与组件间的通信
什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有 ...
- HTML5+CSS3前端开发资源整合
HTML5+CSS3前端开发资源整合 推个广告 个人网站:http://www.51pansou.com HTML5视频下载:HTML5视频 HTML5源码下载:HTML5源码 meta相关: & ...
- win php nginx 配置小细节
win下配置php Nginx 首先 下载 php-Windows版本.下载Nginx Windows 版本 1> php.ini-production 修改为 php.ini 让其成为php的 ...
- 一月份实现Adb小程序
As Brian said: According to a post on xda-developers, you can enable ADB over WiFi from the device w ...
- API - .add()
jQuery的 .add 很像一个collection, 官方的这个demo很形象的表达了这个意思. <!doctype html> <html lang="en" ...