LNMP系列网站零基础开发记录（三）

时间：2022-09-05 18:50:44
[目录]

扯淡吹逼之开发前奏

Django 开发环境搭建及配置

web 页面开发

Django app开发

Django 站点管理

Python 简易爬虫开发

Nginx&uWSGI 服务器配置

...

三、web页面开发

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

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

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

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

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

LNMP系列网站零基础开发记录（三） LNMP系列网站零基础开发记录（三） LNMP系列网站零基础开发记录（三）

　　这里页面共有的 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源码吧。

LNMP系列网站零基础开发记录（三）

　　再说下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开发者的零基础通信技术入门&lpar;三&rpar;：国人通信方式的百年变迁

    [来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站: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&plus;Ext&period;net零基础学习记录（四）

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

随机推荐

  1. React-Native 渲染实现分析

    前言 React Native与传统的HybirdApp最大区别就是抛开WebView,使用JSC+原生组件的方式进行渲染,那么整个App启动/渲染流程又是怎样的呢? React Native启动流程 ...

  2. Rss 订阅：php动态生成xml格式的rss文件

    Rss 简介: 简易信息聚合(也 叫聚合内容)是一种描述和同步网站内容的格式.使用RSS订阅能更快地获取信息,网站提供RSS输出,有利于让用户获取网站内容的最新更新.网络用户可以在客户端借助于支持RS ...

  3. JavaScript通过ID获取元素坐标

    JavaScript通过ID获取元素坐标 function getElementPos(elementId) {    var ua = navigator.userAgent.toLowerCase ...

  4. SpringData —— HelloWorld

    SpringData 简介 优点 简化数据库访问,减少数据访问层的开发量. 支持的数据库类型 支持 NoSQL 存储,如 MongoDB,Redis. 支持关系型数据存储技术,如 jdbc,jpa. ...

  5. 把 MWeb Lite 的文档库文档和数据搬到 MWeb 正式版中

    MWeb Lite 版的文档库中的文档要搬到 MWeb 正式版中,如果 Lite 版的文档中没有图片或者只有少量图片,可以用导入导出为 Markdown 的方法. 否则的话请用以下方式(注意下面这个方 ...

  6. 【追寻javascript高手之路03】javascript对象大乱斗

    前言 昨天我们学习了下javascript中函数的参数与作用域的东东,现在回过头来看,其实都是与函数相关的,所以javascript中的函数仍然是王道,我们今天大概会发二篇或者三篇博客一起来巩固我们的 ...

  7. java 集合专练

    handsomecui的blog地址为:http://www.cnblogs.com/handsomecui/ 本人网站为:handsomecui.top 引言:本次主要练习单列集合:Collecti ...

  8. ZooKeeper连接并创建节点以及实现分布式锁操作节点排序输出最小节点Demo

    class LockThread implements Runnable { private DistributedLock lock; public LockThread(int threadId, ...

  9. yaf nginx 设置

    #test1server { listen 80; listen [::]:80; root /vagrant_data/aaa/public; index index.html index.htm ...

  10. Zabbix4&period;2&period;0使用Python连接企业微信报警

    目录 1. 配置企业微信 2. 脚本配置 2.1 安装python依赖的库 2.2 编写脚本 2. 搭建FTP 3. 配置Zabbix监控FTP 3.1 添加FTP模板 3.2 添加报警媒介 3.3 ...

相关文章