快速構建 Web 後臺管理應用

一、實驗介紹

1.1 實驗內容

本次實驗將學習如何利用Flask-AppBuilder快速生成專案結構，以及基本配置。

1.2 實驗知識點

• 認識Flask-AppBuilder
• 使用命令列介面快速生成專案結構
• Flask-AppBuilder的基本配置
• Flask-AppBuilder BaseView的基本用法
• Flask-AppBuilder ModelView的基本用法

1.3 實驗環境

• python 3.5.2
• Xfce終端

1.4 適合人群

本課程難度為初級，適合具有Python、Flask、SQLAlchemy基礎的同學。

二、實驗基礎

2.1 Flask-AppBuilder介紹

Flask-AppBuilder是基於Flask實現的一個用於快速構建Web後臺管理系統的簡單的框架。主要用於解決構建Web後臺管理系統時避免一些重複而繁瑣的工作，提高專案完成時間，它可以和 Flask/Jinja2自定義的頁面進行無縫整合，並且可以進行高階的配置。這個框架還集成了一些CSS和JS庫，包括以下內容：

• Google charts CSS and JS
• BootStrap CSS and JS
• BootsWatch Themes
• Font-Awesome CSS and Fonts

三、開發準備

3.1 安裝Flask-AppBuilder

在正式開發之前，首先我們要安裝Flask-AppBuilder。開啟XFce終端，輸入如下命令：

shiyanlou:~/ $ sudo pip3 install flask-appbuilder

安裝完成之後會自動為我們安裝所需依賴，效果如下圖所示：

3.2 建立專案目錄

現在我們建立一個目錄，之後的操作都在這個目錄中進行:

shiyanlou:~/ $ mkdir project
shiyanlou:~/ $ cd project

四、專案檔案結構

我們的專案結構如下：

其中app目錄下存放我們Web應用的相關指令碼檔案，babel存放國際化相關配置和匯出的翻譯字串。根目錄下則存放著Web應用的配置指令碼和主指令碼檔案。

五、實驗步驟

5.1 生成專案檔案

利用Flask-AppBuilder的命令列管理工具(fabmanager)可以很方便的生成專案的基本目錄結構以及一些相關的檔案和程式碼:

shiyanlou:project/ $ fabmanager create-app
Your new app name: ums
Your engine type, SQLAlchemy or MongoEngine [SQLAlchemy]:
Downloaded the skeleton app, good coding!

命令執行後會提示我們輸入app名稱，隨便起一個名字就可以。接下來要求選擇orm引擎型別，預設是SQLAlchemy。也可以選擇MongoEngine，但必須安裝'flask-mongoengine'，這裡我們使用'SQLAlchemy'，直接回車就可以了。效果如下圖所示：

專案結構檔案放在實驗樓的伺服器中，如果有的同學無法連線外網，則可以直接從以下連結下載：

wget http://labfile.oss.aliyuncs.com/courses/870/Flask-AppBuilder-Skeleton-master.zip

之後在當前目錄下解壓zip檔案，並將資料夾名字改為專案名稱：

unzip Flask-AppBuilder-Skeleton-master.zip
mv Flask-AppBuilder-Skeleton-master ums

現在我們的專案結構就自動生成了。同學們可以看一下自己的目錄結構，對比一下是不是和上面的結構一樣。

5.2 建立管理使用者

fabmanager還可以快速的建立管理使用者：

shiyanlou:project/ $ cd ums
shiyanlou:ums/ $ fabmanager create-admin
Username [admin]:
User first name [admin]:
User last name [user]:
Email [admin@fab.org]:
Password:
Repeat for confirmation:

至此，fabmanager已經替我們完成了一個基本的Web後臺管理系統，稍後我們將執行生成的程式碼。

5.3 執行指令碼

我們可以通過fabmanager來執行生成的指令碼：

shiyanlou:ums/ $ fabmanager run

也可以通過Python直譯器來執行專案根目錄下的run.py檔案：

shiyanlou:ums/ $ python3 run.py

之後開發伺服器將在http://localhost:8080 執行。開啟火狐瀏覽器，在位址列輸入http://localhost:8080，就會看到Flask-AppBuilder自動為我們生成的頁面。用之前我們生成的管理員賬戶登陸就可以進入到Web的後臺管理介面：

在導航欄中Flask-AppBuilder為我們自動生成了Security選單，子選單中包括了一些使用者、角色、檢視、選單、許可權等相關操作。

導航欄右側還包含了語言選單，可以選擇7個國家的語言，不過當我們自己增加程式碼後，就需要使用Flask-Babel進行國際化翻譯，在課程的後面我會詳細講解。

5.4 基本配置

Flask-AppBuilder具有高度的靈活性，可以通過配置專案根目錄下config.py檔案來實現我們想要的需求，下面講解一些常用的配置，更詳細的內容請參考官方文件(Flask-AppBuilder基本配置)：

5.4.1 資料庫配置

如果使用SQLAlchemy可以通過配置SQLALCHEMY_DATABASE_URI的值來指定資料庫連線。如果使用Mongdb可以配置MONGODB_SETTINGS的值。預設使用Sqlite資料庫，SQLALCHEMY_DATABASE_URI的值為'sqlite:///' + os.path.join(basedir, 'app.db')。

5.4.1 認證方式配置

Flask-Appbuilder可以通過配置AUTH_TYPE來指定應用使用的認證方式。

AUTH_TYPE = 0 | 1 | 2 | 3 | 4或AUTH_TYPE = AUTH_OID, AUTH_DB,AUTH_LDAP, AUTH_REMOTE AUTH_OAUTH。預設使用AUTH_DB的認證方式。

5.4.2 主題配置

Flask-AppBuilder集成了bootwatch，只需要配置APP_THEME的值就可以改變應用的主題風格。下面是config.py檔案中可供選擇的主題：

#APP_THEME = "bootstrap-theme.css"  # default bootstrap
#APP_THEME = "cerulean.css"
#APP_THEME = "amelia.css"
#APP_THEME = "cosmo.css"
#APP_THEME = "cyborg.css"  
#APP_THEME = "flatly.css"
#APP_THEME = "journal.css"
#APP_THEME = "readable.css"
#APP_THEME = "simplex.css"
#APP_THEME = "slate.css"   
APP_THEME = "spacelab.css"
#APP_THEME = "united.css"
#APP_THEME = "yeti.css"

把不使用的主題註釋掉，這裡我們使用APP_THEME = "spacelab.css"這項，重新執行開發伺服器看一下效果：

可以看到頁面的主題風格變了，是不是很方便呢？至此，我們這節實驗的內容就講完了。

5.5 基礎檢視

5.5.1 BaseView

BaseView是檢視中的基類，所有的檢視都繼承自它。當我們定義一個繼承自BaseView的子類時，BaseView自動將我們用@exposed修飾的urls註冊為Flask中的藍圖。

我們可以通過BaseView來實現自定義頁面，並新增到選單上或者通過一個連線來訪問它。這裡需要注意，作為路由的方法一定要用@exposed修飾，如果需要保護的路由則需要額外使用@has_access修飾。

現在我們來看一個小例子，通常我們使用F.A.B.框架都使用自動生成的專案結構，這樣我們只需要在app目錄下的views.py 檔案中修改程式碼即可。下面我們來看一個簡單例子：

from flask_appbuilder import AppBuilder, expose, BaseView
from app import appbuilder

class MyView(BaseView):
    route_base = "/myview"

    @expose('/hello/')
    def hello(self):
        return 'Hello World!'

    @expose('/message/<string:msg>')
    def message(self, msg):
        msg = 'Hello %s' % (msg)
        return msg

appbuilder.add_view_no_menu(MyView())

在這個程式碼中我們在ums/app/views.py中定義了一個BaseView的子類，同時註冊了兩個路由，在最後一行添加了檢視，但是沒有建立選單。其中route_base用於自定義相對路徑的url。我們可以通過如下urls來測試我們實現的兩個路由：

這裡需要注意一點就是在訪問urls的時候，一定要將檢視的名字作為路由的字首！

你會發現，這些方法都是公開的，為了只讓登陸使用者可以看到，我們為上面的兩個方法用@has_access修飾，修改ums/app/views.py：

from flask_appbuilder import AppBuilder, expose, BaseView
from app import appbuilder
from flask_appbuilder import has_access

class MyView(BaseView):
    default_view = 'hello'

    @expose('/hello/')
    @has_access
    def hello(self):
        return 'Hello World!'

    @expose('/message/<string:msg>')
    @has_access
    def message(self, msg):
        msg = 'Hello %s' % (msg)
        return msg

appbuilder.add_view_no_menu(MyView())

再次嘗試訪問上面的urls，發現會無法訪問，並重定向到了登陸頁面，登陸之後就可以正常訪問了。

下面我們再來看一下將檢視新增到選單，並渲染一個Jinja2模板的例子：

在專案根目錄下的/app/templates/目錄中，建立一個index.html，並新增如下程式碼：

{% extends "appbuilder/base.html" %}
{% block content %}
    <h1>{{ msg }}</h1>
{% endblock %}

編輯專案根目錄中的/app/views.py，給出 views.py 修改後的完整程式碼：

from flask_appbuilder import AppBuilder, expose, BaseView
from app import appbuilder
from flask_appbuilder import has_access

class MyView(BaseView):
    default_view = 'hello'

    @expose('/hello/')
    @has_access
    def hello(self):
        return 'Hello World!'

    @expose('/message/<string:msg>')
    @has_access
    def message(self, msg):
        msg = 'Hello %s' % (msg)
        return msg

    @expose('/welcome/<string:msg>')
    @has_access
    def welcome(self, msg):
        msg = 'Hello %s' % (msg)
        return self.render_template('index.html',msg = msg)

appbuilder.add_view(MyView, "Hello", category='My View')
appbuilder.add_link("Message", href='/myview/message/john', category='My View')
appbuilder.add_link("Welcome", href='/myview/welcome/student', category='My View')

在這個例子中我們添加了一個方法，並通過render_template渲染一個自定義模板，可以很方便的定製頁面。這裡需要注意一點，在模板中我們繼承了appbuilder/base.html這個基模板，它由F.A.B.提供，目的是為了保持風格的一致性

通過add_view和add_link這兩個方法，將在選單中生成連結訪問我們定義的路由，效果如下圖所示：

5.6 模型檢視

5.6.1 定義資料庫模型

這個例子需要在ums/app/models.py中定義兩個表，分別是儲存聯絡人詳細資訊的Contacts表和用來儲存分組資訊的ContactGroup表。定義表的時候需要繼承Model類，這個類和Flask-SQLALchemy中db.Model是一樣的。

• 定義ContactGroup表

ContactGroup表中需要定義兩個欄位，分別是作為主鍵的id欄位和非空唯一的分組名稱name欄位。編輯ums/app/models.py檔案：

from sqlalchemy import Column, Integer, String, ForeignKey, Date
from sqlalchemy.orm import relationship
from flask_appbuilder import Model

class ContactGroup(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique = True, nullable=False)

    def __repr__(self):
        return self.name

• 定義Contact表

Contact表中除了需要定義聯絡人的姓名、地址、生日、電話號、手機號之外，還需要關聯ContactGroup表的id值作為外來鍵，用來表示多對一的關係。ums/app/models.py檔案，新增程式碼：

class Contact(Model):
    id = Column(Integer, primary_key=True)
    name =  Column(String(150), unique = True, nullable=False)
    address =  Column(String(564))
    birthday = Column(Date)
    personal_phone = Column(String(20))
    personal_cellphone = Column(String(20))
    contact_group_id = Column(Integer, ForeignKey('contact_group.id'))
    contact_group = relationship("ContactGroup")

    def __repr__(self):
        return self.name

這兒給出 ums/app/models.py 的完整檔案：

from sqlalchemy import Column, Integer, String, ForeignKey, Date
from sqlalchemy.orm import relationship
from flask_appbuilder import Model

class ContactGroup(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique = True, nullable=False)

    def __repr__(self):
        return self.name

class Contact(Model):
    id = Column(Integer, primary_key=True)
    name =  Column(String(150), unique = True, nullable=False)
    address =  Column(String(564))
    birthday = Column(Date)
    personal_phone = Column(String(20))
    personal_cellphone = Column(String(20))
    contact_group_id = Column(Integer, ForeignKey('contact_group.id'))
    contact_group = relationship("ContactGroup")

    def __repr__(self):
        return self.name

5.6.2 定義檢視

通過繼承ModelView類可以實現我們自定義的檢視，F.A.B.可以針對我們定義好的資料庫模型生成建立、刪除、更新和顯示的功能。

檢視類中必須使用定義好的資料庫模型初始化datamodel屬性。

• 定義Contact模型的檢視

由於Contacts模型中包含很多欄位，所以在聯絡人檢視中我們使用label_columns、list_columns、show_fieldsets屬性來定製聯絡人檢視。下面來看一下這三個屬性的用法：

• label_columns：用於定義列的顯示名稱。
• list_columns：用於定義檢視中要顯示的欄位。
• show_fieldsets：用於檢視中顯示頁面中顯示的內容，還可以單獨定義 add_fieldsets 和 edit_fieldsets頁面中的內容。編輯 ums/app/views.py 檔案：

from flask_appbuilder import ModelView
from flask_appbuilder.models.sqla.interface import SQLAInterface
from .models import ContactGroup, Contact
from app import appbuilder, db

class ContactModelView(ModelView):
    datamodel = SQLAInterface(Contact)

    label_columns = {'contact_group':'Contacts Group'}
    list_columns = ['name','personal_cellphone','birthday','contact_group']

    show_fieldsets = [
                        (
                            'Summary',
                            {'fields':['name','address','contact_group']}
                        ),
                        (
                            'Personal Info',
                            {'fields':['birthday','personal_phone','personal_cellphone'],'expanded':False}
                        ),
                     ]
# 在聯絡人組檢視中，我們使用related_views來關聯聯絡人檢視，F.A.B.將自動處理他們之間的關係。
class GroupModelView(ModelView):
    datamodel = SQLAInterface(ContactGroup)
    related_views = [ContactModelView]

# 現在我們就差最後一步工作就要完成本次實驗了。
# 首先使用db.create_all()根據資料庫模型建立表，然後再將檢視新增到選單。

db.create_all()
appbuilder.add_view(GroupModelView,
                    "List Groups",
                    icon = "fa-address-book-o",
                    category = "Contacts",
                    category_icon = "fa-envelope")
appbuilder.add_view(ContactModelView,
                    "List Contacts",
                    icon = "fa-address-card-o",
                    category = "Contacts")

在新增選單的時候，我們指定了icon的值，它來源於Font-Awesome，我們使用圖示的時候可以在Font-Awesome官網中查詢喜歡的圖示。

現在我們在專案根目錄中執行如下命令：

shiyanlou:ums/ $ fabmanager run

然後開啟Firefox瀏覽器，在位址列中輸入http://127.0.0.1:8080/，之後登陸就可以看到我們實現的聯絡人Web應用了，效果如圖所示：

5.7 Flask-AppBuilder實現學校後臺管理

這部分內容我們將通過前面的學習來實現一個簡單的學校後臺管理系統

5.7.1 定義資料庫模型

在定義資料庫模型之前我們先匯入需要的包或模組，編輯app/models.py：

from flask import Markup, url_for, g
from flask.ext.appbuilder import Model
from flask.ext.appbuilder.models.mixins import AuditMixin, FileColumn, ImageColumn
from sqlalchemy import Table, Column, Integer, String, ForeignKey, Date, Float, Text
from sqlalchemy.orm import relationship
from flask_appbuilder.models.decorators import renders
from flask_appbuilder.models.sqla.filters import FilterStartsWith, FilterEqualFunction

• 定義學院管理模型

在學院模型中，我們將定義一個代表id的主鍵和代表學院名稱的name欄位。

#學院
class College(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

• 定義部門管理模型

在部門模型中，我們將定義一個代表id的主鍵和代表部門名稱的name欄位。

#部門
class Department(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

• 定義專業管理模型

在專業模型中，我們將定義一個代表id的主鍵和代表專業名稱的name欄位。

#專業
class Major(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

• 定義班級管理模型

在班級模型中，我們將定義一個代表id的主鍵和代表班級名稱的name欄位。

#班級
class MClass(Model):
    __tablename__ = 'mclass'
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

• 定義教師與學生管理模型

在定義教師資料模型和學生資料模型時除了定義一些教師和學生的個人資訊之外，由於教師和學生都和上面定義好的模型之間存在著多對一的關係，所以在教師和學生中都關聯了上面的相關模型。

這裡還定義了一個聯接表用來處理學生和教師之間的多對多關係，它將多對多關係劃分為兩個一對多關係。

#教師
class Teacher(Model):
    id = Column(Integer, primary_key=True)
    work_num = Column(String(30), unique=True, nullable=False)  #工號
    name = Column(String(50), nullable=False)
    college_id = Column(Integer, ForeignKey('college.id'), nullable=False)  #學院
    college = relationship("College")
    department_id = Column(Integer, ForeignKey('department.id'), nullable=False)    #部門
    department = relationship("Department")
    tel_num = Column(String(30), unique=True, nullable=False)   #電話號
    birthday = Column(Date)

    def __repr__(self):
        return self.name

assoc_teacher_student = Table('teacher_student', Model.metadata,
                                      Column('id', Integer, primary_key=True),
                                      Column('teacher_id', Integer, ForeignKey('teacher.id')),
                                      Column('student_id', Integer, ForeignKey('student.id'))
)

class Student(Model):
    id = Column(Integer, primary_key=True)
    stu_num = Column(String(30), unique=True, nullable=False)  #學號
    name = Column(String(50), nullable=False)  
    college_id = Column(Integer, ForeignKey('college.id'), nullable=False)
    college = relationship("College")
    major_id = Column(Integer, ForeignKey('major.id'), nullable=False)
    major = relationship("Major")
    mclass_id = Column(Integer, ForeignKey('mclass.id'), nullable=False)
    mclass = relationship("MClass")
    teachers = relationship('Teacher', secondary=assoc_teacher_student, backref='student')
    tel_num = Column(String(30), unique=True, nullable=False)   #電話號
    birthday = Column(Date)

    def __repr__(self):
        return self.name

• 這裡給出 ums/app/models.py 的完整檔案

from flask import Markup, url_for, g
from flask.ext.appbuilder import Model
from flask.ext.appbuilder.models.mixins import AuditMixin, FileColumn, ImageColumn
from sqlalchemy import Table, Column, Integer, String, ForeignKey, Date, Float, Text
from sqlalchemy.orm import relationship
from flask_appbuilder.models.decorators import renders
from flask_appbuilder.models.sqla.filters import FilterStartsWith, FilterEqualFunction

#學院
class College(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

#部門
class Department(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

#專業
class Major(Model):
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

#班級
class MClass(Model):
    __tablename__ = 'mclass'
    id = Column(Integer, primary_key=True)
    name = Column(String(50), unique=True, nullable=False)

    def __repr__(self):
        return self.name

#教師
class Teacher(Model):
    id = Column(Integer, primary_key=True)
    work_num = Column(String(30), unique=True, nullable=False)  #工號
    name = Column(String(50), nullable=False)
    college_id = Column(Integer, ForeignKey('college.id'), nullable=False)  #學院
    college = relationship("College")
    department_id = Column(Integer, ForeignKey('department.id'), nullable=False)    #部門
    department = relationship("Department")
    tel_num = Column(String(30), unique=True, nullable=False)   #電話號
    birthday = Column(Date)

    def __repr__(self):
        return self.name

assoc_teacher_student = Table('teacher_student', Model.metadata,
                                      Column('id', Integer, primary_key=True),
                                      Column('teacher_id', Integer, ForeignKey('teacher.id')),
                                      Column('student_id', Integer, ForeignKey('student.id'))
)

# 學生
class Student(Model):
    id = Column(Integer, primary_key=True)
    stu_num = Column(String(30), unique=True, nullable=False)  #學號
    name = Column(String(50), nullable=False)
    college_id = Column(Integer, ForeignKey('college.id'), nullable=False)
    college = relationship("College")
    major_id = Column(Integer, ForeignKey('major.id'), nullable=False)
    major = relationship("Major")
    mclass_id = Column(Integer, ForeignKey('mclass.id'), nullable=False)
    mclass = relationship("MClass")
    teachers = relationship('Teacher', secondary=assoc_teacher_student, backref='student')
    tel_num = Column(String(30), unique=True, nullable=False)   #電話號
    birthday = Column(Date)

    def __repr__(self):
        return self.name

5.7.2 定義檢視

• 編輯修改 ums/app/views.py 檔案

# 匯入相關的包和模組

from flask import render_template, flash
from flask.ext.appbuilder.models.sqla.interface import SQLAInterface
from flask.ext.appbuilder import ModelView, MultipleView, MasterDetailView
from app import appbuilder, db
from flask_appbuilder import AppBuilder, expose, BaseView, has_access, SimpleFormView
from flask_babel import lazy_gettext as _
from flask_appbuilder.charts.views import DirectByChartView

from wtforms import Form, StringField
from wtforms.validators import DataRequired
from flask_appbuilder.fieldwidgets import BS3TextFieldWidget
from flask_appbuilder.forms import DynamicForm

from flask_appbuilder.widgets import ListThumbnail
from .models import College, Department, Major, MClass, Teacher, Student
from flask_appbuilder.actions import action
from wtforms.ext.sqlalchemy.fields import QuerySelectField
from flask_appbuilder.fieldwidgets import BS3TextFieldWidget, Select2Widget

# 這裡定義了學院、部門、專業、班級、教師和學生的相關檢視。
# 程式碼比較簡單，直接關聯我們定義好的模型就可以了，程式碼如下：

class CollegeView(ModelView):
    datamodel = SQLAInterface(College)

class DepartmentView(ModelView):
    datamodel = SQLAInterface(Department)

class MajorView(ModelView):
    datamodel = SQLAInterface(Major)

class MClassView(ModelView):
    datamodel = SQLAInterface(MClass)

class TeacherView(ModelView):
    datamodel = SQLAInterface(Teacher)

class StudentView(ModelView):
    datamodel = SQLAInterface(Student)

db.create_all()

# 這裡將6個檢視作為子選單新增到了`School Manage`選單中：

appbuilder.add_view(CollegeView, "College", icon="gear", category='School Manage',)
appbuilder.add_view(DepartmentView, "Department", icon="gear",category='School Manage')
appbuilder.add_view(MajorView, "Major", icon="gear", category='School Manage')
appbuilder.add_view(MClassView, "MClass", icon="gear", category='School Manage')
appbuilder.add_view(TeacherView, "Teacher", icon="gear",category='School Manage')
appbuilder.add_view(StudentView, "Student", icon="gear",category='School Manage')

5.7.3 更改預設頁面

通常在登陸之後我們都希望顯示一些表示歡迎或者提示的內容，而F.A.B.自定義預設頁面也非常簡單。

首先我們在模板存放目錄修改檔案ums/app/templates/index.html：

{% extends "appbuilder/base.html" %}
{% block content %}
<div class="jumbotron">
  <div class="container">
    <h1> Welcome to XX school management system! </h1>
  </div>
</div>
{% endblock %}

接下來在ums/app/目錄下新建一個index.py檔案，並在檔案中定義一個繼承自IndexView的類：

from flask_appbuilder import IndexView

class MyIndexView(IndexView):
    index_template = 'index.html'

最後我們在ums/app/__init__.py檔案中，在AppBuilder初始化的時候，指定indexview的值。由於這個檔案中已經自動生成了一些程式碼，只在如下程式碼做相關改動即可：

from app.index import MyIndexView
appbuilder = AppBuilder(app, db.session, indexview=MyIndexView)

5.7.4 執行效果

現在我們在專案根目錄中執行如下命令：

shiyanlou:ums/ $ fabmanager run

然後開啟Firefox瀏覽器，在位址列中輸入http://127.0.0.1:8080/，之後登陸就可以看到我們實現的學校後臺管理系統了，效果如圖所示：

六、實驗總結

通過這節實驗的學習，我們應該掌握如下知識點：

• 如何使用fabmanager快速生成專案結構
• 如何配置Web應用
• 如何更改主題樣式
• 如何通過expose修飾器定義路由。
• 如何通過has_access修飾器來保護路由。
• 如何渲染模板。
• 如何將路由新增到選單。
• 如何定義資料庫和資料庫模型
• 如何定義針對資料庫模型相關聯的檢視
• 如何實現自定義預設頁面

七、參考連結