摘要：注原文作者，原文地址為在這個教程中，我們將使用和構建一個博客。在開發期間，這將允許我們把它們運行在不同的端口例如和。現在我們將進入目錄并使用運行這個腳本。示例創建一篇文章為了創建一篇文章，你需要發送一個請求給。

  
注：原文作者 John Kevin M. Basco，原文地址為 Building a blog using Flask and AngularJS Part 1

在這個教程中，我們將使用 Flask 和 AngularJS 構建一個博客。

這是這個系列教程的第一部分，在這部分我們將專注于構建 REST API ，該 API 將被 AngularJS 應用使用。

該應用的目標非常簡單：

允許任何用戶注冊

允許注冊的用戶登錄

允許登錄的用戶創建博客

允許在首頁展示博客

允許登錄的用戶退出

這個應用在該系列教程的最后應該看起來像這樣：

該教程假設你能順暢的寫 Python 的代碼，知道怎樣設置一個虛擬環境以及熟悉終端窗口

我們將使用的目錄結構應該看起來像這樣：

我們將使用的包如下：

Flask-RESTful - Flask 的 RESTful 擴展

Flask-SQLAlchemy - Flask 的 SQLAlchemy 擴展

Flask-Bcrypt - Flask 的 一個為你的應用提供 bcrypt 哈希的工具擴展

Flask-HTTPAuth - 一個為 Flask 路由提供 Basic and Digest HTTP authentication 的擴展

Flask-WTF - http://docs.jinkan.org/docs/flask-wtf/

WTForms-Alchemy - 一個 WTForms 擴展，能很簡單的基于表單創建模型的工具集

marshmallow - 是一個 ORM/ODM/ 的框架，用于轉換復雜的數據類型，http://marshmallow.readthedocs.org/en/latest/quickstart.html

為了使事情更加簡單，在 blog/server/ 目錄下創建一個名稱為 requirements.txt 的文件，并且把以下內容拷貝進去：

Flask==0.10.1
Flask-Bcrypt==0.6.0
Flask-HTTPAuth==2.2.1
Flask-RESTful==0.2.12
Flask-SQLAlchemy==1.0
Flask-WTF==0.10.0
Jinja2==2.7.3
MarkupSafe==0.23
SQLAlchemy==0.9.7
SQLAlchemy-Utils==0.26.9
WTForms==2.0.1
WTForms-Alchemy==0.12.8
WTForms-Components==0.9.5
Werkzeug==0.9.6
aniso8601==0.83
decorator==3.4.0
infinity==1.3
intervals==0.3.1
itsdangerous==0.24
marshmallow==0.7.0
py-bcrypt==0.4
pytz==2014.4
six==1.7.3
validators==0.6.0
wsgiref==0.1.2

進入 blog/server/ 目錄，并且運行 pip install -r requirements.txt 命令來安裝必須的包

首先，在 blog/server/app 目錄下創建一個文件并命名為 config.py，然后復制和粘貼以下的內容到文件中：

DEBUG = True
WTF_CSRF_ENABLED = False

然后在 blog/server/app/ 目錄下創建一個文件命名為 server.py。這就是我們將放置我們初始的代碼的地方。復制和粘貼以下的代碼到文件中：

import os

from flask import Flask
from flask.ext import restful
from flask.ext.restful import reqparse, Api
from flask.ext.sqlalchemy import SQLAlchemy
from flask.ext.bcrypt import Bcrypt
from flask.ext.httpauth import HTTPBasicAuth

basedir = os.path.join(os.path.abspath(os.path.dirname(__file__)), "../")

app = Flask(__name__)
app.config.from_object("app.config")

# flask-sqlalchemy
app.config["SQLALCHEMY_DATABASE_URI"] = "sqlite:///" + os.path.join(basedir, "app.sqlite")
db = SQLAlchemy(app)

# flask-restful
api = restful.Api(app)

# flask-bcrypt
flask_bcrypt = Bcrypt(app)

# flask-httpauth
auth = HTTPBasicAuth()

@app.after_request
def after_request(response):
    response.headers.add("Access-Control-Allow-Origin", "*")
    response.headers.add("Access-Control-Allow-Headers", "Content-Type,Authorization")
    response.headers.add("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE")
    return response

import views

在這個文件中，我們初始化了 Flask，加載了從一個配置文件中加載了配置文件的變量，創建了 flask-sqlalchemy，flask-restful 對象等等。。。而且我們也在 after_request 函數中加了一些響應頭，它允許跨域資源共享（CORS），這將允許我們的托管服務器（REST API）和客戶端（AngularJS app）在不同的域以及不同的子域（例如：api.johnsblog.com 和 johnsblog.com）。在開發期間，這將允許我們把它們運行在不同的端口（例如：localhost:8000 和 localhost:5000）。

現在我們已經完成了應用的初始化部分，讓我們定義 models，在 blog/server/app/ 目錄下創建一個文件并命名為 models.py，然后拷貝和粘貼以下代碼到文件中：

from flask import g

from wtforms.validators import Email

from server import db, flask_bcrypt

class User(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    email = db.Column(db.String(120), unique=True, nullable=False, info={"validators": Email()})
    password = db.Column(db.String(80), nullable=False)
    posts = db.relationship("Post", backref="user", lazy="dynamic")

    def __init__(self, email, password):
        self.email = email
        self.password = flask_bcrypt.generate_password_hash(password)

    def __repr__(self):
        return "" % self.email

class Post(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    title = db.Column(db.String(120), nullable=False)
    body = db.Column(db.Text, nullable=False)
    user_id = db.Column(db.Integer, db.ForeignKey("user.id"))
    created_at = db.Column(db.DateTime, default=db.func.now())

    def __init__(self, title, body):
        self.title = title
        self.body = body
        self.user_id = g.user.id

    def __repr__(self):
        return "" % self.title

在以上的代碼中，我們定義了一個用戶和文章的模型，用戶模型有一個 id 作為它的主鍵，被定義成 integer 類型，email 和 password 屬性被定義成 strings。通過 posts 屬性它也和 POST 模型有關聯。POST 模型也有一個 id 作為它的主鍵，并也被定義成 integer，title 和 body 屬性被定義成 strings。它也有一個 user_id 屬性被定義成 integer 并作為 User 模型的 id 屬性的外鍵。它還有一個 created_at 屬性被定義成 DateTime。

現在我們已經完成了模型定義部分，讓我們定義 forms，我們將使用 forms 校驗我們的用戶輸入。為了 form 校驗，我們將使用是一個名稱為 WTForms 的 Flask 擴展，并且我們將使用 WTForms-Alchemy 擴展它 來更快更簡單的定義我們的 forms。在 blog/server/app 目錄下創建一個新文件并命名為 forms.py，然后拷貝和粘貼以下代碼到文件中：

from flask.ext.wtf import Form

from wtforms_alchemy import model_form_factory
from wtforms import StringField
from wtforms.validators import DataRequired

from app.server import db
from models import User, Post

BaseModelForm = model_form_factory(Form)

class ModelForm(BaseModelForm):
    @classmethod
    def get_session(self):
        return db.session

class UserCreateForm(ModelForm):
    class Meta:
        model = User

class SessionCreateForm(Form):
    email = StringField("name", validators=[DataRequired()])
    password = StringField("password", validators=[DataRequired()])

class PostCreateForm(ModelForm):
    class Meta:
        model = Post

為了使得 WTForms-Alchemy 能與 Flask-WTF 一起工作，我們定義了一個類命名為 ModelForm，它繼承自 BaseModelForm ，由 WTForms-Alchemy 提供。你可以在這里找到更多的信息 - http://wtforms-alchemy.readthedocs.org/en/latest/advanced.html#using-wtforms-alchemy-with-flask-wtf

以上代碼是非常完美的。但是如果你不明白以上代碼做了什么，我建議你讀 WTForms 的文檔 https://wtforms.readthedocs.org/en/latest/# 和 WTForms-Alchemy 的文檔 http://wtforms-alchemy.readthedocs.org/en/latest/index.html 。

為了在我們的 responses 中把我們的 model 實例渲染成 JSON，我們首先需要把它們轉換成原生的 Python 數據類型， Flask-RESTful 可以使用 fields 模塊 和 marshal_with() 裝飾器（更多的詳細信息請移步 - http://flask-restful.readthedocs.org/en/latest/quickstart.html#data-formatting）。當我開始構建 REST API 的時候我不知道 Flask-RESTful 支持這個，因此我以 Marshmallow 完成 http://marshmallow.readthedocs.org/en/latest/ 。在 blog/server/app/ 目錄下創建一個新文件并命名為 serializers.py，然后拷貝和粘貼以下代碼到文件中：

from marshmallow import Serializer, fields

class UserSerializer(Serializer):
    class Meta:
        fields = ("id", "email")

class PostSerializer(Serializer):
    user = fields.Nested(UserSerializer)

    class Meta:
        fields = ("id", "title", "body", "user", "created_at")

現在我們已經完成了我們將使用的 models，forms 和 serializers 的定義，讓我們定義 views 并且使用。在 blog/server/app/ 目錄下創建一個新文件并命名為 views.py ，然后拷貝和粘貼以下代碼到文件中：

from flask import g
from flask.ext import restful

from server import api, db, flask_bcrypt, auth
from models import User, Post
from forms import UserCreateForm, SessionCreateForm, PostCreateForm
from serializers import UserSerializer, PostSerializer

@auth.verify_password
def verify_password(email, password):
    user = User.query.filter_by(email=email).first()
    if not user:
        return False
    g.user = user
    return flask_bcrypt.check_password_hash(user.password, password)

class UserView(restful.Resource):
    def post(self):
        form = UserCreateForm()
        if not form.validate_on_submit():
            return form.errors, 422

        user = User(form.email.data, form.password.data)
        db.session.add(user)
        db.session.commit()
        return UserSerializer(user).data

class SessionView(restful.Resource):
    def post(self):
        form = SessionCreateForm()
        if not form.validate_on_submit():
            return form.errors, 422

        user = User.query.filter_by(email=form.email.data).first()
        if user and flask_bcrypt.check_password_hash(user.password, form.password.data):
            return UserSerializer(user).data, 201
        return "", 401

class PostListView(restful.Resource):
    def get(self):
        posts = Post.query.all()
        return PostSerializer(posts, many=True).data

    @auth.login_required
    def post(self):
        form = PostCreateForm()
        if not form.validate_on_submit():
            return form.errors, 422
        post = Post(form.title.data, form.body.data)
        db.session.add(post)
        db.session.commit()
        return PostSerializer(post).data, 201

class PostView(restful.Resource):
    def get(self, id):
        posts = Post.query.filter_by(id=id).first()
        return PostSerializer(posts).data

api.add_resource(UserView, "/api/v1/users")
api.add_resource(SessionView, "/api/v1/sessions")
api.add_resource(PostListView, "/api/v1/posts")
api.add_resource(PostView, "/api/v1/posts/")

上面的 verify_password 函數被 auth.verify_password 裝飾，并將被 Flask-HTTPAuth 使用來鑒定用戶。它基本上通過 email 來獲取用戶，以及通過校驗給出的密碼是否與數據庫中存儲的密碼匹配。

UserView 類將處理用戶的注冊請求，SessionView 類將處理用戶的登錄請求，PostListView 將處理獲取文章列表和創建文章的請求。最后，PostView將處理獲取單篇文章的請求。在文件的底部，我們簡單的設置了 API 的資源路由。

我們也需要創建一個名稱為 db_create.py 的文件。我們將運行這個腳本來初始化數據庫。現在我們將進入 blog/server/ 目錄并使用 python db_create.py 運行這個腳本。

from app.server import db

db.create_all()

我們需要創建的另外一個文件是 run.py。這是一個腳本，我們將通過運行它來運行一個 REST API 服務。

from app.server import app

app.run()

如果你正確的遵循了以上步驟，你現在應該可以通過進入 blog/server/ 目錄并運行 python run.py 來運行 REST API 服務。

為了注冊一個用戶你需要發送一個 POST 請求給 localhost:5000/api/v1/users。這個請求屬性是 email 和 password。這里有 curl 請求來創建一個用戶

curl --dump-header - -H "Content-Type: application/json" -X POST -d "{"email": "johndoe@gmail.com","password": "admin"}" http://localhost:5000/api/v1/users

為了登陸一個用戶，你需要通過使用 POST 請求發送一個用戶的登陸資格給 localhost:5000/api/v1/sessions。示例：

curl --dump-header - -H "Content-Type: application/json" -X POST -d "{"email": "johndoe@gmail.com","password": "admin"}" http://localhost:5000/api/v1/sessions

為了創建一篇文章，你需要發送一個 POST 請求給 localhost:5000/api/v1/posts。需要的屬性是 title 和 body。因為創建文章的時候要求用戶是已經登陸的，注意你需要發送一個包含 base64 編碼的用戶資格的 Authorization header ，它是通過冒號（":"）分離的。示例：

curl --dump-header - -H "Content-Type: application/json" -H "Authorization: Basic am9obmRvZUBnbWFpbC5jb206YWRtaW4=" -X POST -d "{"title": "Example post","body": "Lorem ipsum"}" http://localhost:5000/api/v1/posts

為了獲取所有保存的文章，你需要發送一個 GET 請求給http://localhost:5000/api/v1/posts 。示例：

curl -i http://localhost:5000/api/v1/posts

除了使用 curl，你也可以使用更高級的 REST 客戶端 Chrome 擴展來測試 API。

該教程的第一部分到這里就結束了。在教程的第二部分，我們將專注于構建一個 AngularJS web 應用，它將調用我們已經創建的 REST api。

如果你發現了這篇文章的一些錯誤或是你有一些問題想問，請在下面留下你的評論。

我希望你喜歡該教程的一部分。在教程的第二部分見。

可用的 REST API 源碼在 Github 上，如果你喜歡這個教程，并且它對你有幫助，請給星，下載和 fork 它 - https://github.com/basco-johnkevin/building-a-blog-using-flask-and-angularjs

你也可以在 Twitter 上關注我 - https://twitter.com/johnkevinmbasco