Django工程讀取mongodb並使用分頁器

来源:http://www.cnblogs.com/kylinlin/archive/2016/02/08/5184934.html
-Advertisement-
Play Games

pycharm開發django工程（二） 項目需求： 1. 從mongodb中讀取數據，並顯示到網頁中 2. 在網頁顯示的每一頁加入分頁符 首先使用pycharm的企業版新建一個django的虛擬工程（參考我的上一個博客），這是初始的顯示效果 這是原始的html文件，css文件在本文的最後，至於圖片...


pycharm開發django工程（二）

 

項目需求：

1. 從mongodb中讀取數據，並顯示到網頁中

2. 在網頁顯示的每一頁加入分頁符

 

首先使用pycharm的企業版新建一個django的虛擬工程（參考我的上一個博客），這是初始的顯示效果

clip_image002

這是原始的html文件，css文件在本文的最後，至於圖片就隨意照一張改名就行 

{% load static %}

<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
    <title>Blog &ndash; Layout Examples &ndash; Pure</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css' %}">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css' %}">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' %}">
    <link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">
    <link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">
</head>

<body>

<div class="content pure-u-1 pure-u-md-3-4">
    <div>
        <!-- A wrapper for all the blog posts -->
        <div class="posts">
            <h1 class="content-subhead">Pinned Post</h1>
            <!-- A single blog post -->

            <section class="post">
                <header class="post-header">
                    <img class="post-avatar" alt="Tilo Mitra&#x27;s avatar" height="48" width="48"
                         src="{% static 'img/common/tilo-avatar.png' %}">
                    <h2 class="post-title">Introducing Pure</h2>
                    <p class="post-meta">
                        By <a href="#" class="post-author">Tilo Mitra</a> under <a
                            class="post-category post-category-design" href="#">CSS</a> <a
                            class="post-category post-category-pure" href="#">Pure</a>
                    </p>
                </header>

                <div class="post-description">
                    <p>

                        Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the <a
                            href="https://speakerdeck.com/tilomitra/pure-bliss">slides from the presentation</a>.
                        Although it looks pretty minimalist, we’ve been working on Pure for several months. After many
                        iterations, we have released Pure as a set of small, responsive, CSS modules that you can use in
                        every web project.
                    </p>
                </div>
            </section>
        </div>
    </div>
</div>
</body>
</html>

首先要安裝mongoengine 

pip3 install mongoengine
然後在settings.py文件中定義mongodb的連接（要連接的mongodb資料庫名為test，使用到的是test資料庫里的一張名為sample的表） 
from mongoengine import connect 
connect('test', host='127.0.0.1', port=27017)

 

在models.py文件中定義讀取的資料庫欄位

from django.db import models 
from mongoengine import * 

connect('test', host='127.0.0.1', port=27017) # 指明要連接的資料庫 

class ArtiInfo(Document): 
    title = StringField() 
    url = StringField() 
    price = StringField() 
    pub_date = StringField() 
    look = StringField() 
    area = ListField(StringField()) # 定義列表類型 
    cates = ListField(StringField()) 

    meta = { 'collection': 'sample'} # 指明連接資料庫的哪張表 

for i in ArtiInfo.objects[:10]: # 測試是否連接成功 
    print(i.title)

在這裡可以直接運行models.py文件，看是否能讀出資料庫里的內容，註意要把資料庫中的欄位全部定義出來

 

修改views.py文件，定義要傳遞到html文件中的內容

from django.shortcuts import render 
from myblog.models import ArtiInfo 

def index(request): 
    article = ArtiInfo.objects[:10] #只顯示前10個內容 
    context = { 
        'ArtiInfo':article 
    } 

    return render(request, 'index.html', context) # 傳遞context參數

 

修改index.html文件，在文件中迴圈顯示從資料庫中讀取的數據

{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
    <title>Blog &ndash; Layout Examples &ndash; Pure</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css' %}">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css' %}">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' %}">
    <link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">
    <link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">
</head>

<body>

<div class="content pure-u-1 pure-u-md-3-4">
    <div>
        <!-- A wrapper for all the blog posts -->
        <div class="posts">
            <h1 class="content-subhead">Pinned Post</h1>
            {% for item in ArtiInfo %}
                <!-- A single blog post -->
                <section class="post">
                    <header class="post-header">
                        <img class="post-avatar" alt="Tilo Mitra&#x27;s avatar" height="48" width="48"
                             src="{% static 'img/common/tilo-avatar.png' %}">
                        <h3 class="post-title">{{ item.title }}</h3>
                        <p class="post-meta">
                            By <a href="#" class="post-author">{{ item.pub_date }}</a>
                            {% for each in item.cates %}
                                <a class="post-category post-category-design" href="#">{{ each }}</a>
                            {% endfor %}
                        </p>
                    </header>

                    <div class="post-description">
                        <p>
                            {{ item.url }}
                        </p>
                    </div>
                </section>
            {% endfor %}
        </div>
    </div>
</div>
</body>
</html>

 

這是從資料庫里讀取的效果

clip_image004

 

添加分頁器

 

在上面的views.py文件中添加分頁器 

from django.shortcuts import render 
from myblog.models import ArtiInfo 
from django.core.paginator import Paginator 

def index(request): 
    limit = 1 #限制每一頁顯示的條目數量 
    article = ArtiInfo.objects 
    paginator = Paginator(article, limit) 
    page_num = request.GET.get('page', 1) #從url中獲取頁碼參數 
    loaded = paginator.page(page_num) 

    context = { 
        'ArtiInfo':loaded 
    } 

    return render(request, 'index.html', context)

 

在Index.html文件的末尾處添加分頁器 

{% load static %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="A layout example that shows off a blog page with a list of posts.">
    <title>Blog &ndash; Layout Examples &ndash; Pure</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css' %}">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-old-ie-min.css' %}">
    <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css' %}">
    <link rel="stylesheet" href="{% static 'css/layouts/blog-old-ie.css' %}">
    <link rel="stylesheet" href="{% static 'css/layouts/blog.css' %}">
</head>
<body>

    <div class="content pure-u-1 pure-u-md-3-4">
        <div>
            <!-- A wrapper for all the blog posts -->
            <div class="posts">
                <h1 class="content-subhead">Pinned Post</h1>
                {% for item in ArtiInfo %}
                <!-- A single blog post -->
                <section class="post">
                    <header class="post-header">
                        <img class="post-avatar" alt="Tilo Mitra&#x27;s avatar" height="48" width="48" src="{% static 'img/common/tilo-avatar.png' %}">

                        <h3 class="post-title">{{ item.title }}</h3>

                        <p class="post-meta">
                            By <a href="#" class="post-author">{{ item.pub_date }}</a>
                            {% for each in item.cates %}
                                <a class="post-category post-category-design" href="#">{{ each }}</a>
                            {% endfor %}
                        </p>
                    </header>

                    <div class="post-description">
                        <p>
                            {{ item.url }}
                        </p>
                    </div>
                </section>
                {% endfor %}
            </div>
        <div class="main-content-pagitor">
            {% if ArtiInfo.has_previous %}
                <a href="?page={{ ArtiInfo.previous_page_number }}"> 上一頁</a>
            {% endif %}
            <span>{{ ArtiInfo.number }} of {{ ArtiInfo.paginator.num_pages }}</span>
            {% if ArtiInfo.has_next %}
                <a href="?page={{ ArtiInfo.next_page_number }}">下一頁</a>
            {% endif %}
        </div>
        </div>
    </div>

</body>
</html>

 

 

這是最終的顯示效果

clip_image006

本文中使用到的css文件如下： 

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: rgb(61, 146, 201);
}
a:hover,
a:focus {
    text-decoration: underline;
}

h3 {
    font-weight: 100;
}

/* LAYOUT CSS */
.pure-img-responsive {
    max-width: 100%;
    height: auto;
}

#layout {
    padding: 0;
}

.header {
    text-align: center;
    top: auto;
    margin: 3em auto;
}

.sidebar {
    background: rgb(61, 79, 93);
    color: #fff;
}

.brand-title,
.brand-tagline {
    margin: 0;
}
.brand-title {
    text-transform: uppercase;
}
.brand-tagline {
    font-weight: 300;
    color: rgb(176, 202, 219);
}

.nav-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.nav-item {
    display: inline-block;
    *display: inline;
    zoom: 1;
}
.nav-item a {
    background: transparent;
    border: 2px solid rgb(176, 202, 219);
    color: #fff;
    margin-top: 1em;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 85%;
}
.nav-item a:hover,
.nav-item a:focus {
    border: 2px solid rgb(61, 146, 201);
    text-decoration: none;
}

.content-subhead {
    text-transform: uppercase;
    color: #aaa;
    border-bottom: 1px solid #eee;
    padding: 0.4em 0;
    font-size: 80%;
    font-weight: 500;
    letter-spacing: 0.1em;
}

.content {
    padding: 2em 1em 0;
}

.post {
    padding-bottom: 2em;
}
.post-title {
    font-size: 2em;
    color: #222;
    margin-bottom: 0.2em;
}
.post-avatar {
    border-radius: 50px;
    float: right;
    margin-left: 1em;
}
.post-description {
    font-family: Georgia, "Cambria", serif;
    color: #444;
    line-height: 1.8em;
}
.post-meta {
    color: #999;
    font-size: 90%;
    margin: 0;
}

.post-category {
    margin: 0 0.1em;
    padding: 0.3em 1em;
    color: #fff;
    background: #999;
    font-size: 80%;
}
    .post-category-design {
        background: #5aba59;
    }
    .post-category-pure {
        background: #4d85d1;
    }
    .post-category-yui {
        background: #8156a7;
    }
    .post-category-js {
        background: #df2d4f;
    }

.post-images {
    margin: 1em 0;
}
.post-image-meta {
    margin-top: -3.5em;
    margin-left: 1em;
    color: #fff;
    text-shadow: 0 1px 1px #333;
}

.footer {
    text-align: center;
    padding: 1em 0;
}
.footer a {
    color: #ccc;
    font-size: 80%;
}
.footer .pure-menu a:hover,
.footer .pure-menu a:focus {
    background: none;
}

@media (min-width: 48em) {
    .content {
        padding: 2em 3em 0;
        margin-left: 25%;
    }

    .header {
        margin: 80% 2em 0;
        text-align: right;
    }

    .sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
    }
}

.main-content-pagitor  {
    width: 50%;
    padding: 10px 20px 5px 20px;
    overflow: auto;
    margin: auto;
    /*position: relative;*/
    text-align: center;
}
.main-content-pagitor a {
    color: #cccccc;
    padding: 0 5px 0 5px;
}
.main-content-pagitor span {
    color: #585858;

    /*padding: 20px 20px 20px 20px;*/

}

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 第3章（第12講）興趣點（ POI）搜索功能
    分類：C#、Android、VS2015、百度地圖應用； 創建日期：2016-02-04 一、簡介 POI（Point of Interest），中文可以翻譯為“興趣點”。在地理信息系統中，一個POI可以是一棟房子、一個商鋪、一個郵筒、一個公交站等。 1、POI檢索 百度地圖SDK提供三種類型的PO
  • Windows 10 的音頻和 MIDI API將統一
    微軟一統 Windows 10 的音頻和 MIDI API 微軟在夏季NAMM上的A3E大會上做了主題演講，他們對Windows 10的音頻和MIDI API都做了新的規劃，開發者針對Windows 10開發的應用在手機、平板、桌面電腦、Raspberry Pi 2上也可以運行。 微軟之前在音頻方面
  • linux塊設備驅動架構(轉)
    基本概念 塊設備（blockdevice） --- 是一種具有一定結構的隨機存取設備，對這種設備的讀寫是按塊進行的，他使用緩衝區來存放暫時的數據，待條件成熟後，從緩存一次性寫入設備或者從設備一次性讀到緩衝區。 字元設備（Character device） ---是一個順序的數據流設備，對這種設備的讀
  • Ubuntu 14.04 LTS 下升級 gcc 到 gcc-4.9、gcc-5 版本
    如果沒記錯的話，阿裡雲ECS上的Ubuntu也是LTS版本。 如果還在使用較舊版本的Ubuntu，或者是Ubuntu LTS，那麼我們是很難體驗新版gcc的。怎麼辦呢？ 我們或許可以自己去編譯用舊版本的gcc去編譯新版本，但比較繁瑣而且坑點較多。如果有現成的包就好啦！ 原來，在toolchain/t
  • 丙申年把真假美猴王囚禁在容器中跑 ASP.NET Core 1.0
    丙申年把真假美猴王囚禁在容器中跑 ASP.NET Core 1.0¶警告您當前查看的頁面是未經授權的轉載！ 如果當前版本排版錯誤，請前往查看最新版本：http://www.cnblogs.com/qin-nz/p/aspnetcore-run-on-mono-in-year-of-monkey.ht...
  • 平凡的KTV後臺，不平凡的KTV數據
    之前就是說過“一個項目有很多重要的步驟以及功能”，那我們現在就來看看對於KTV項目來說；後臺是處於什麼樣的重要作用！ 首先就得瞭解KTV後臺的一些功能了： 1.歌曲管理 、歌手管理 、設置資源路徑 2.新增歌手、歌手查詢、新增歌曲、歌曲查詢、更改歌曲路徑以及退出點歌系統 一.後臺登錄界面 01.判斷
  • Java 迴圈中標簽的作用
    continue和break可以改變迴圈的執行流程，但在多重迴圈中，這兩條語句無法直接從內層迴圈跳轉到外層迴圈。在C語言中，可以通過goto語句實現多重迴圈的跳轉，但在非迴圈結構中使用goto語句會使程式的結構紊亂，可讀性變差。因此Java就發明瞭一種帶標簽的continue和break語句，實際上...
  • Python成長之路第二篇（1）_數據類型內置函數用法
    數據類型內置函數用法int 關於內置方法是非常的多這裡呢做了一下總結 (1）__abs__(...)返回x的絕對值 #返回x的絕對值!!!都是雙下劃線 x.__abs__() <==> abs(x) 例如： #!/usr/bin/python print "abs(-45) : ", abs(-45
一周排行
    -Advertisement-
    Play Games
  • 如何基於surging跨網關跨語言進行緩存降級
    基於.NET Framework 4.8 開發的深度學習模型部署測試平臺，提供了YOLO框架的主流系列模型，包括YOLOv8~v9，以及其系列下的Det、Seg、Pose、Obb、Cls等應用場景，同時支持圖像與視頻檢測。模型部署引擎使用的是OpenVINO™、TensorRT、ONNX runti... ...
  • 十年沉澱，重啟開發之路
    十年沉澱，重啟開發之路 十年前，我沉浸在開發的海洋中，每日與代碼為伍，與演算法共舞。那時的我，滿懷激情，對技術的追求近乎狂熱。然而，隨著歲月的流逝，生活的忙碌逐漸占據了我的大部分時間，讓我無暇顧及技術的沉澱與積累。 十年間，我經歷了職業生涯的起伏和變遷。從初出茅廬的菜鳥到逐漸嶄露頭角的開發者，我見證了 ...
  • C#.NET體系圖文概述—2024最全總結
    C# 是一種簡單、現代、面向對象和類型安全的編程語言。.NET 是由 Microsoft 創建的開發平臺，平臺包含了語言規範、工具、運行，支持開發各種應用，如Web、移動、桌面等。.NET框架有多個實現，如.NET Framework、.NET Core（及後續的.NET 5+版本），以及社區版本M... ...
  • 班級擂臺（光榮）榜 - 極簡教育小工具
    前言 本文介紹瞭如何使用三菱提供的MX Component插件實現對三菱PLC軟元件數據的讀寫，記錄了使用電腦模擬，模擬PLC，直至完成測試的詳細流程，並重點介紹了在這個過程中的易錯點，供參考。 用到的軟體： 1. PLC開發編程環境GX Works2，GX Works2下載鏈接 https:// ...
  • web server apache tomcat11-31-websocket
    前言 整理這個官方翻譯的系列，原因是網上大部分的 tomcat 版本比較舊，此版本為 v11 最新的版本。 開源項目 從零手寫實現 tomcat minicat 別稱【嗅虎】心有猛虎，輕嗅薔薇。 系列文章 web server apache tomcat11-01-官方文檔入門介紹 web serv ...
  • day31-jQuery
    1、jQuery介紹 jQuery是什麼 jQuery是一個快速、簡潔的JavaScript框架，是繼Prototype之後又一個優秀的JavaScript代碼庫（或JavaScript框架）。jQuery設計的宗旨是“write Less，Do More”，即倡導寫更少的代碼，做更多的事情。它封裝 ...
  • aardio爬蟲) 實戰篇：逆向有道翻譯web介面
    前言 之前的文章把js引擎(aardio封裝庫) 微軟開源的js引擎(ChakraCore))寫好了，這篇文章整點js代碼來測一下bug。測試網站：https://fanyi.youdao.com/index.html#/ 逆向思路 逆向思路可以看有道翻譯js逆向（MD5加密，AES加密）附完整源碼 ...
  • 面試官：這就是你理解的Java多線程基礎？
    引言 現代的操作系統（Windows，Linux，Mac OS）等都可以同時打開多個軟體（任務），這些軟體在我們的感知上是同時運行的，例如我們可以一邊瀏覽網頁，一邊聽音樂。而CPU執行代碼同一時間只能執行一條，但即使我們的電腦是單核CPU也可以同時運行多個任務，如下圖所示，這是因為我們的 CPU 的 ...
  • Python文本統計與分析從基礎到進階
    掌握使用Python進行文本英文統計的基本方法，並瞭解如何進一步優化和擴展這些方法，以應對更複雜的文本分析任務。 ...
  • Redis多數據源，看這篇就夠了
    背景 Redis多數據源常見的場景： 分區數據處理：當數據量增長時，單個Redis實例可能無法處理所有的數據。通過使用多個Redis數據源，可以將數據分區存儲在不同的實例中，使得數據處理更加高效。 多租戶應用程式：對於多租戶應用程式，每個租戶可以擁有自己的Redis數據源，以確保數據隔離和安全性。 ...
所有分類