使用Flask開發簡單博客的教程（上）

01-30

今天分享一篇flask的教程文章，文章由簡書作者Andrew_liu原創。

原文地址點此進入 Flask博客源碼公開在Github

博客歡迎界面：

博客主頁：

緣起

最近想讀讀python方向的源碼, 想Pythonic一點, 左右看去, 最後決定讀Flask源碼.

既然決定讀源碼, 我認為首先要簡單的了解:

框架的功能
具體介面
實現一個簡單的輪子.

Flask我就不多介紹了, 網上一搜一大把, python幾大著名Web框架之一, 以其輕量級, 高可擴展性而著名.

那麼我們開始造輪子之旅吧

環境相關:nMac OS X 10.10.3nSublime Text 3nFLask 0.10.1nPython 3.4.1 # 請放手Python2.7.8, 擁抱Python3n

下文主要內容:

介紹Flask搭建博客依賴(隨著文章的圓滿, 會逐漸添加)
搭建博客歡迎頁面
搭建博客基本框架

Flask安裝及相關插件

框架及插件:

Flask
Flask-Script
Flask-WTF
flask-mongoengine
Flask-markdown
virtualenv(版本控制) Virtualenv簡明教程

資料庫:

mongo(了解並會使用一種NoSQL會有很大的好處)

環境配置

$ pip install virtualenvn$ virtualenv -p /usr/local/bin/python3.4 Flaskn$ source Flask/bin/activaten$ pip install Flask, Flask-Script, Flask-WTF, flask-mongoenginen

項目骨架

請根據下面的Tree文件結構建立文件夾和文件

$ tree ./nn./n├── README.mdn├── app/n│ ├── __init__.pyn│ ├── models.pyn│ ├── static/n│ ├── templates/n│ └── views.pyn├── config.pyn├── manage.pyn├── requirements.txtn

app為項目核心源碼
static為項目靜態文件
templates為項目HTML模板

Hello World

國際慣例, 編程第一步...

$ vim app/__init__.pynn# -*- coding: utf-8 -*- #!/usr/bin/env python from flask import Flasknnapp = Flask(__name__) #創建Flask類的實例napp.config.from_object("config") #從config.py讀入配置 #這個import語句放在這裡, 防止views, models import發生循環import from app import views, modelsn

views.py用於便攜Blog的主邏輯, 和Django中views.py功能相同

$ vim app/views.pynn# -*- coding: utf-8 -*- #!/usr/bin/env python from app import appnfrom flask import render_templatenn@app.route(/) def index(): return "Hello World!"n

運用Flask-Script為Flask編寫伺服器腳本, 產生類似Django的運行方式

$vim manage.pyn# -*- coding: utf-8 -*- #!/usr/bin/env python from flask.ext.script import Manager, Servernfrom app import appnnmanager = Manager(app)nmanager.add_command("runserver", n Server(host="127.0.0.1", port=5000, use_debugger=True))nnif __name__ == __main__:n manager.run()n

運行伺服器

$ python manage.py flaskn

瀏覽器打開http://127.0.0.1:5000/, 正式踏出第一步...

博客搭建框架

編寫歡迎頁面及樣式

$ vim app/templates/welcome.htmlnn<html>n <head>n {% if title %}n <title>{{ title }} - 雪憶</title>n {% else %}n <title>雪憶</title>n {% endif %}n <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">n <link rel="stylesheet" href="{{ url_for(static, filename=welcome.css) }}">n</head>n<body>n<div id="wrapper">n <div id="info">n <div id="info-content">n <h1><strong>Andrew Liu</strong> 雪憶</h1>n <p>雪憶, 如雪般單純, 冷靜思考.</p>n </div>n </div>n</div>n</body>n</html>n

$ vim app/static/welcome.css /* reset */n* {n margin: 0;n padding: 0;n}nn#wrapper {n position: absolute;n width: 100%;n height: 100%;n overflow: hidden;n}nnlabel {n cursor: pointer;n}nlabel:focus {n outline: none;n}nn/* for show */ html, body {n height: 100%;n}nnbody {n background: url(http://37.media.tumblr.com/f6c67ec2821a91051e4175f8a102e1e2/tumblr_n6rzpcsMk41st5lhmo1_1280.jpg) 50% 50%/cover;n}nnp {n margin-bottom: 15px;n}nn#info {n display: table;n background: rgba(0, 0, 0, 0.4);n height: 100%;n width: 100%;n}n#info #info-content {n display: table-cell;n vertical-align: middle;n text-align: center;n text-transform: uppercase;n color: #fff;n font-size: 12px;n}n#info #info-content h1 {n color: #fff;n border: 3px solid #fff;n text-align: center;n background: rgba(0, 0, 0, 0.1);n font-size: 22px;n font-weight: normal;n padding: 20px;n margin: 10px;n display: inline-block;n}n#info #info-content h1 strong {n display: block;n font-size: 26px;n}n

現在更改views.py

# -*- coding: utf-8 -*-n#!/usr/bin/env pythonnnfrom app import appnfrom flask import render_template, url_fornn@app.route(/)ndef index():n return render_template(welcome.html, title="Welcome")n

到現在為止我們已經完成了歡迎頁面的搭建

編寫博客主頁框架和樣式n$ vim app/templates/base.htmln<html>n <head>n {% if title %}n <title>{{ title }} - 雪憶</title>n {% else %}n <title>雪憶</title>n {% endif %}n <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">n <link rel="stylesheet" href="{{ url_for(static, filename=base.css) }}">n</head>n<body>n<header class="header">n <ul>n <li class="cor-1"></li>n <li class="cor-2"></li>n <li class="cor-3"></li>n <li class="cor-4"></li>n <li class="cor-5"></li>n </ul>n </header>n<div class="wrap">nnn<nav class="menu">n <ul>n <li>n <a href="#">Home</a>n </li>n <li>n <a href="#">Archive</a>n </li>n <li>n <a href="#">About me</a>n </li>n </ul>n </nav>n <aside class="sidebar">n <div class="widget">n <h2>Michael</h2>n <p>Hello, my name』s <b>Andrew Liu</b>. I』m 23 years old. I live in <b>NanJing (China)</b>. I am a <b>Pythoner</b>.<br> Contact Me:<br><b>liu.bin.coder@gmail.com</b></p>n </div>n <div class="widget">n <h2>Title</h2>n <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>n </div>nn </aside>n {% block content %}{% endblock %}n</div>n</body>n</html>n

$vim app/static/base.cssnn@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,800,700,600,300);nnbody {n margin:0;n font-family: Open Sans, sans-serif;n background: #eee;n}nnhr {n background:#dedede;n border:0;n height:1px;n}nn.header {n overflow: hidden;n display:block;n position:fixed;n top:0;n margin:0;n width:100%;n height:4px;n text-align:center;n}nn.header ul {n margin:0;n padding:0;n}nn.header ul li {n overflow:hidden;n display:block;n float:left;n width:20%;n height:4px;n}nn.header .cor-1 {n background:#f1c40f;n}nn.header .cor-2 {n background:#e67e22;n}nn.header .cor-3 {n background:#e74c3c;n}nn.header .cor-4 {n background:#9b59b6;n}nn.header .cor-5 {n background-color: hsla(10,40%,50%,1);n}nn.wrap {n width: 950px;n margin:25px auto;n}nnnav.menu ul {n overflow:hidden;n float:left;n width: 650px;n padding:0;n margin:0 0 0;n list-style: none;n color:#fff;n background: #1abc9c;n -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);n -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);n box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.55);n}nnnav.menu ul li {n float:left;n margin:0;n}nnnav.menu ul a {n display:block;n padding:25px;n font-size: 16px;n font-weight:600;n text-transform: uppercase;n color:#fff;n text-decoration: none;n transition: all 0.5s ease;n}nnnav.menu ul a:hover {n background:#16a085;n text-decoration: underline;n}nn.sidebar {n width:275px;n float:right;n}nn.sidebar .widget {n margin:0 0 25px;n padding:25px;n background:#fff;n transition: all 0.5s ease;n border-bottom: 2px solid #fff;n}nn.sidebar .widget:hover {n border-bottom: 2px solid #3498db;n}nn.sidebar .widget h2 {n margin:0 0 15px;n padding:0;n text-transform: uppercase;n font-size: 18px;n font-weight:800;n color:#3498db;n}nn.sidebar .widget p {n font-size: 14px;n}nn.sidebar .widget p:last-child {n margin:0;n}nn.blog {n float:left;n}nn.conteudo {n width:600px;n margin:25px auto;n padding:25px;n background: #fff;n border:1px solid #dedede;n -webkit-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);n -moz-box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);n box-shadow: 1px 1px 1px 0px rgba(204,204,204,0.35);n}nn.conteudo img {n margin:0 0 25px -25px;n max-width: 650px;n min-width: 650px;n}nn.conteudo h1 {n margin:0 0 15px;n padding:0;n font-family: Georgia;n font-weight: normal;n color: #666;n}nn.conteudo p:last-child {n margin: 0;n}nn.conteudo .continue-lendo {n color:#000;n font-weight: 700; n text-decoration: none;n transition: all 0.5s ease;n}nn.conteudo .continue-lendo:hover {n margin-left:10px;n}nn.post-info {n float: right;n margin: -10px 0 15px;n font-size: 12px;n text-transform: uppercase;n}nn@media screen and (max-width: 960px) {nn .header {n position:inherit;n}nn.wrap {n width: 90%;n margin:25px auto;n}n.sidebar {n width:100%;n float:right;n margin:25px 0 0;n}nn .sidebar .widget {n padding:5%;n}nn nav.menu ul {n width: 100%;n}nn nav.menu ul {n float:inherit;n}nn nav.menu ul li {n float:inherit;n margin:0;n}nnnav.menu ul a {n padding:15px;n font-size: 16px;n border-bottom:1px solid #16a085;n border-top:1px solid #1abf9f;n}nn.blog {n width:90%;n}nn.conteudo {n float:inherit;n width:101%;n padding:5%; n margin:0 auto 25px;n background: #fff;n border:1px solid #dedede;n}nn.conteudo img {n margin:0 0 25px -5%;n max-width: 110%;n min-width: 110%;n}nn .conteudo .continue-lendo:hover {n margin-left:0;n}nnn}nn@media screen and (max-width: 460px) {nn nav.menu ul a {n padding:15px;n font-size: 14px;n}nn.sidebar {n display:nonen}n .post-info {n display:none;n}nn .conteudo {n margin:25px auto;n }nn .conteudo img {n margin:-5% 0 25px -5%;n}n}n

在views.py編寫主頁測試代碼

# -*- coding: utf-8 -*-n#!/usr/bin/env pythonnnfrom app import appnfrom flask import render_template, url_fornn@app.route(/)ndef index():n return render_template(welcome.html, title="Welcome")nn@app.route(/home)ndef home():n return render_template(base.html, title="Home")n

打開瀏覽器, 訪問http://127.0.0.1:5000/home, 你會看到精美小清新的主頁框架

作者：Andrew_liu

鏈接：http://www.jianshu.com/p/70111d3821a5

你想更深入了解學習Python知識體系，你可以看一下我們花費了一個多月整理了上百小時的幾百個知識點體系內容：

【超全整理】《Python自動化全能開發從入門到精通》筆記全放送