使用 Python 从 0 开发属于你的个人管理系统 10 篇 ｜ 结合 Bootstrap，高效又好看

前面我们了解了网页的渲染使用，那么是不是我们的每个 HTML 页面都需要自己去写呢，像 HTML，CSS ，JS 这些文件当然是不需要我们自己从头开始写起的。

我们可以使用 Bootstrap 框架来写我们的前端页面，它是一个基于 HTML，CSS ，JS 的框架，我们可以使用它快速搭建前端页面，简单点说就是，我们去引用 Bootstrap 提供的相关静态资源文件，就可以很快的写出漂亮的表单等页面。

有一个叫做「flask_bootstrap」的库，可以直接使用它来进行操作：

from flask import Flask
from flask_bootstrap import Bootstrap

def create_app():
  app = Flask(__name__)
  Bootstrap(app)

  return app

这样我们就可以在前端引用 Bootstrap 。

另一种方式就是你也可以直接去下载 Bootstrap 的静态资源到 templates 中去引用。

去哪儿找 bootstrap 模板？

给你推荐一个不错的 bootstrap 模板文件，里面有各种好看的模板页面供你选择：

地址在这：

https://startbootstrap.com/themes

其中有免费版本和收费版本，不过大部分免费版本已经够你使用了。

比如这个「sb-admin」就挺好。

如何结合到你的项目中去？

如何将模板文件为你所用呢？其实很简单，毕竟你之前已经知道如何渲染网页了。

比如现在你下载好了 「sb-admin」的模板文件：

你可以把必要的文件复制到你项目中的对应位置，然后进行渲染。

假设现在你的项目创建目录是这样的：

.
└── mysystem
    ├── Pipfile
    ├── Pipfile.lock
    ├── __init__.py
    ├── static
    ├── templates
    └── views.py

你可以将模板文件中必要的静态资源文件放到 static 下：

mysystem/static
├── css
│   ├── sb-admin-2.css
│   └── sb-admin-2.min.css
├── img
│   ├── undraw_posting_photo.svg
│   ├── undraw_profile.svg
│   ├── undraw_profile_1.svg
│   ├── undraw_profile_2.svg
│   ├── undraw_profile_3.svg
│   └── undraw_rocket.svg
├── js
│   ├── demo
│   ├── sb-admin-2.js
│   └── sb-admin-2.min.js
└── vendor
    ├── bootstrap
    ├── chart.js
    ├── datatables
    ├── fontawesome-free
    ├── jquery
    └── jquery-easing

将下载到的 index.html 文件放到 templates 下：

mysystem/templates
└── index.html

在你的项目中的初始化 py 文件中导入 Flask：

from flask import Flask

app = Flask('personal_system')

接着在视图层 view.py 中渲染这个页面：

from flask import render_template
from mysystem import app


@app.route('/', methods=['GET'])
def index():
    return render_template('index.html', title='个人管理系统')

回到 index.html 中，将你静态资源的引用使用上篇讲到的模板语言实现：

比如加载 css 文件的时候应该改成这样：

<link href=”{{ url_for(‘static’, filename=’css/sb-admin-2.min.css’) }}” rel=”stylesheet”>

加载图片的时候改成这样：

<img class=”rounded-circle” src=”{{ url_for(‘static’, filename=’img/undraw_profile_3.svg’) }}” alt=”…”>

加载 js 文件的时候改成这样：

<script src=”{{ url_for(‘static’, filename=’vendor/bootstrap/js/bootstrap.bundle.min.js’) }}”></script>

export FLASK_APP=views.py

flask run

打开地址 http://127.0.0.1:5000/：

可以看到现在你的项目页面变得如此好看。

我们接下来就可以使用它提供得一些组件，比如按钮，表格，标签等等。不需要自己动手从 0 去开发前端的各种样式，而你要做的就是写好逻辑层的数据，然后展现在前端页面，并与之做一些简单的数据交互就可以了。

现在你可以下载你喜欢的模板文件，尝试将你的首页渲染成你想要的样子，你接下来的目标就是，让数据动起来，从你的个人任务 todo-list 开始？

我们下篇见，peace！