[目录]
扯淡吹逼之开发前奏
Django 开发环境搭建及配置
web 页面开发
Django app开发
Django 站点管理
Python 简易爬虫开发
Nginx&uWSGI 服务器配置
...

三、web页面开发

  好吧,本来想单独写一章bootstrap的,但是前端确实没什么好写的,这里我们直接结合实际直接开搞吧。做WEB我习惯先把想要的页面模板做完,然后再根据razar或者这里要用到的django template修改。美工确实不太好,P得一手烂图,所以一般都用现成的开源框架,这里我们选用了现在很流行的bootstrap,由于懒得改CSS,所以全部用原生的代码,基本不加修改。

这里在强调一下我们的目标,做一个简单的开发错误查询网站,同时需要提供相应错误的解决方案

  带着这样的目标,我们大概需要如下几个web页面:

  1. 主页(查询页面)
  2. 查询结果页面
  3. 错误详细页面
  4. 维护页面

  对的,灰常的简单,页面很少,先给出几个页面的图吧(维护页面后面站点管理部分会介绍)

  

  这里页面共有的 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>&nbsp;</div>
{% block widget-nav %}
{% endblock %}
</div>
<div class="col-md-6">
<div>&nbsp;</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.

  1. 表达能力较差,以后慢慢更新,同时[目录]会随着跟新进度随时调整,欢迎大家拍砖!
  2. 网站链接会在数据积累一段时间后提供

LNMP系列网站零基础开发记录(三)的更多相关文章

  1. LNMP系列网站零基础开发记录(一)

    [目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...

  2. LNMP系列网站零基础开发记录(二)

    [目录] 扯淡吹逼之开发前奏 Django 开发环境搭建及配置 web 页面开发 Django app开发 Django 站点管理 Python 简易爬虫开发 Nginx&uWSGI 服务器配 ...

  3. 【转载】salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)

    salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)   salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesfo ...

  4. IM开发者的零基础通信技术入门(三):国人通信方式的百年变迁

    [来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<中国通信的百年沉浮>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时内容有 ...

  5. 【转载】salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解

    salesforce 零基础开发入门学习(四)多表关联下的SOQL以及表字段Data type详解   建立好的数据表在数据库中查看有很多方式,本人目前采用以下两种方式查看数据表. 1.采用schem ...

  6. 【转载】salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable

    salesforce 零基础开发入门学习(五)异步进程介绍与数据批处理Batchable   本篇知识参考:https://developer.salesforce.com/trailhead/for ...

  7. 零基础开发一款微信小程序商城

    零基础开发一款微信小程序商城 一个朋友问我能不能帮忙做个商城?我一个完整网页都写不出的 菜鸟程序员,我该怎么拒绝呢?好吧,看在小程序这么火的形势下,我还是答应了!找了个开源项目,差不多花了三天时间搞定 ...

  8. html5游戏开发-零基础开发《圣诞老人送礼物》小游戏

    开言: 以前lufy前辈写过叫“ HTML5游戏开发-零基础开发RPG游戏”的系列文章,在那里面我学习了他的引擎以及了解了游戏脚本.自从看了那几篇文章,我便对游戏开发有了基本的认识.今天我也以零基础为 ...

  9. MVC+Ext.net零基础学习记录(四)

    在上一篇文章[MVC+Ext.net零基础学习记录(三)]中提到了利用MVC的Area可以做到项目分离,但是实际操作起来还是有很多问题的.比如,对于物理资源的访问,会报:没有相关资源 开始的时候,我在 ...

随机推荐

  1. IIS报错 未将对象引用设置到对象的实例。

    在vs中运行正常的项目 ,发布到IIS总是提示 未将对象引用设置到对象的实例. 运行静态页面 html正常,只是打开.aspx页面的时候报错,在确保了数据库,配置,权限均正常的情况下. 错误原因:先安 ...

  2. .NET中的字符串你了解多少?

    字符串的特性 1.不可变性        由于字符串是不可变的的,每次修改字符串,都是创建了一个单独字符串副本(拷贝了一个字符串副本).之所以发生改变只是因为指向了一块新的地址.        ps: ...

  3. Android照相机应用

    前言 Android在设计架构的时候,采用了mashup(混搭)的设计理念,也就是说一切都是组建,自己写的是组件,别人提供的也是组件,使用的时候只要符合相关协议就可以把他们当作自己的组件.比如系统提供 ...

  4. thinkphp foreach循环生成二维数组的方法

    先做个问题记录,另外下面是做的过程中遇到的一个没想明白的现象 foreach($result as $key => $val ){ $wzList[$key]['lik']=$val[0]; $ ...

  5. linux iostat命令详解 磁盘操作监控工具

    Linux系统中的 iostat是I/O statistics(输入/输出统计)的缩写,iostat工具将对系统的磁盘操作活动进行监视. 它的特点是汇报磁盘活动统计情况,同时也会汇报出CPU使用情况. ...

  6. LotusPhp起步:经典的HelloWorld

    写了几篇LotusPhp,一直没有跑个程序,感觉好像步骤有点错,所以先上个经典的Demo,HelloWorld吧 先按推荐目录建好文件夹,如果懒的建,下面有下载的Demo包,解压就可以用,因为简单,也 ...

  7. psd图片到html

    正确的做法是:拿到psd后,先不要做别的,直接在文本编辑器中将网页的框架写出来,不要假设这块将来css要去怎么渲染,完全自然化的标签,不加任何的css.写完之后在各个浏览器运行之后确保大体定位都没有问 ...

  8. .Net异步编程之Async与Await的使用

    参考教程:http://www.cnblogs.com/x-xk/archive/2013/06/05/3118005.html http://www.cnblogs.com/tdws/p/56790 ...

  9. Oracle 查看相关优化器参数

    select x.ksppinm name, y.ksppstvl value, y.ksppstdf isdefault, decode(bitand(y.ksppstvf, 7), 1, 'MOD ...

  10. Oracle 11g 执行计划管理2

    1.创建测试数据 SQL> conn NC50/NC50 Connected. SQL)); SQL> insert into tab1 select rownum,object_name ...