pycharm开发django工程(二)

项目需求:

1. 从mongodb中读取数据,并显示到网页中

2. 在网页显示的每一页加入分页符

首先使用pycharm的企业版新建一个django的虚拟工程(参考我的上一个博客),这是初始的显示效果

这是原始的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'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'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>

这是从数据库里读取的效果

添加分页器

在上面的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'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>

这是最终的显示效果

本文中使用到的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;*/ }

Django工程读取mongodb并使用分页器的更多相关文章

  1. Django工程目录结构优化

    1.我看到这篇文章,写的不错,在此复制了一份,防止以后找不到! 感谢作者的翻译--->原文的链接:http://www.loonapp.com/blog/11/ 如果原文存在,请打开原文件阅读 ...

  2. 在线读取Mongodb数据库下载EXCEL文件

    版本:Mongodb2.4.8 通过页面下载Excel文件 jsp <%@ page language="java" contentType="text/html; ...

  3. Django工程搭建

    -----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3   2.安装django pip install django==1.11.11 ...

  4. Django工程的建立以及小网站的编写

    这篇博文会详细的介绍如何创建django工程,介绍我如何做了第一个网站.本文基于windows7安装了python2.7.12,Django1.8.18(LTS)版.采用的IDE为pycharm.建议 ...

  5. python web框架 django 工程 创建 目录介绍

    # 创建Django工程django-admin startproject [工程名称] 默认创建django 项目都会自带这些东西 django setting 配置文件 django可以配置缓存 ...

  6. django学习笔记【001】django版本的确定&创建一个django工程

    2.3 查看当前的django版本 python3. -m django --version 2.3.1 创建一个django工程 django-admin startproject mysite 在 ...

  7. Django工程创建

    方法一: 1.win+r进入cmd命令窗口: 2.找到Django的安装地址: 3.cmd窗口中利用cd 进入相应的文件夹,再输入命令如下: django-admin.exe startproject ...

  8. Django基于Pycharm开发之一【创建django工程】

    Django的工程结构,可以通过pycharm里面,选择创建django工程来直接创建,也可以通过命令行通过pip来安装. 一.通过命令行安装的步骤 Install Python. Install a ...

  9. Django系列:(1)PyCharm下创建并运行我们的第一个Django工程

    准备工作: 假设读者已经安装好python 2x或3x,以及安装好Django,以及Pycharm. 我的配置: – Python 2.7.11 – Pycharm Professional 5.0. ...

随机推荐

  1. 刚安装完jdk和eclipse需要配置什么?

    还需要配置环境变量,你还要下载 apache-tomcat WEB服务器,也就是说 系统能找到你的 服务器,具体配置:(在windows桌面上右击“我的电脑” —> “属性” —> “高级 ...

  2. cocos2d-x lua 触摸事件

    cocos2d-x lua 触摸事件 version: cocos2d-x 3.6 1.监听 function GameLayer:onEnter() local eventDispatcher = ...

  3. The Signals Of Process Communication

    在之前大概的概述了进程之间的通信,下面笔者具体述说一下进程通信中最古老的一种通信方式之一---信号(Signals ),信号是用户进程之间通信和同步的一种原始机制,操作系统通过信号来通知进程系统中发生 ...

  4. nodejs1

    介绍: 为什么使用Node 1.解决了高并发连接时的内存占用和资源共享问题 传统后台语言是多线程的,比如:每个用户占2m的内存,8G内存可以承载4000人,node是单线程,触发一个事件,可以容纳几万 ...

  5. Newtonsoft.Json.dll序列化为json,null值自动过滤

    var jSetting = new JsonSerializerSettings {NullValueHandling = NullValueHandling.Ignore}; var json = ...

  6. 换模板,修改了一下css,清新多了~

    基于elf template,改了一下字体颜色和背景.布局的宽度: 博客园修改css真是方便,如果可以直接编辑template代码就更赞了- 不过相对前端web自定义,我更在意后端的服务器是否稳定: ...

  7. iBeacon

    iBeacon[1] 是苹果公司2013年9月发布的移动设备用OS(iOS7)上配备的新功能.其工作方式是,配备有 低功耗蓝牙(BLE)通信功能的设备使用BLE技术向周围发送自己特有的ID,接收到该I ...

  8. CSS之导航菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. JDBC之初识

    JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,可以为多种关系数据库提供统一访问,它由一组用Java语言编写的类和接口 ...

  10. phpwind wap功能添加百度wap统计

    百度推出wap统计功能后,及大的方便了个站长对wap网站的统计.PHPWIND自带的wap功能虽然说功能不是太强,但是对百度来说是非常友好的,如果再进一不优化一下页面模板,这样会对网友访问网站信息有非 ...