使用bootstrip_flask以适配bootstrip4.x

24012401 · May 31, 2020 · 8f280a0 · 8f280a0
1 parent cb7b720
commit 8f280a0
Show file tree

Hide file tree

Showing 4 changed files with 96 additions and 20 deletions.
diff --git a/python_web/flasky/README.md b/python_web/flasky/README.md
@@ -6,4 +6,9 @@
 ## 激活虚拟环境
 - source venv/bin/activate
 ## 退出虚拟环境
-- deactivate
+- deactivate
+## 调整包搜索路径到虚拟环境中
+- 更改PYTHONPATH环境变量
+- export PYTHONPATH=$PYTHONPATH:/home/lk234/pyFile/python_web/flasky/venv/lib/python3.6/site-packages
+- 检查$PATHONPATH中是否有增加的路径
+- [注] 仅适用于当前终端
diff --git a/python_web/flasky/template.py b/python_web/flasky/template.py
@@ -2,8 +2,10 @@
 # Jinja2 模板引擎
 
 from flask import Flask, render_template
+from flask_bootstrap import Bootstrap
 
 app = Flask(__name__)
+bootstrap = Bootstrap(app)
 
 @app.route('/')
 def index():

diff --git a/python_web/flasky/templates/index.html b/python_web/flasky/templates/index.html
@@ -1,16 +1,51 @@
-<!DOCTYPE html>
-<html>
+<!doctype html>
+<html lang="en">
+    <head>
+        {% block head %}
+        <!-- Required meta tags -->
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 
-<head>
+        {% block styles %}
+            <!-- Bootstrap CSS -->
+            {{ bootstrap.load_css() }}
+        {% endblock %}
 
-</head>
-
-<body>
-    <h1>Hello World!</h1>
-    <!--标记路由-->
-    <a href="{{ url_for('r404') }}">404</a>
-    <!--img css js的静态文件使用的路由-->
-    <img src="{{ url_for('static', filename='img/main.jpg') }}"
-</body>
+        <title>Your page title</title>
+        {% endblock %}
+    </head>
+    <body>
+        <!-- Your page content -->
+        {% block content %}
+        <div class="alert alert-primary" role="alert">
+            A simple primary alert—check it out!
+          </div>
+          <div class="alert alert-secondary" role="alert">
+            A simple secondary alert—check it out!
+          </div>
+          <div class="alert alert-success" role="alert">
+            A simple success alert—check it out!
+          </div>
+          <div class="alert alert-danger" role="alert">
+            A simple danger alert—check it out!
+          </div>
+          <div class="alert alert-warning" role="alert">
+            A simple warning alert—check it out!
+          </div>
+          <div class="alert alert-info" role="alert">
+            A simple info alert—check it out!
+          </div>
+          <div class="alert alert-light" role="alert">
+            A simple light alert—check it out!
+          </div>
+          <div class="alert alert-dark" role="alert">
+            A simple dark alert—check it out!
+          </div>
+        {% endblock %}
 
+        {% block scripts %}
+            <!-- Optional JavaScript -->
+            {{ bootstrap.load_js() }}
+        {% endblock %}
+    </body>
 </html>
diff --git a/python_web/flasky/templates/user.html b/python_web/flasky/templates/user.html
@@ -1,13 +1,47 @@
-<h1>Hello {{ name }}!</h1>
+<!-- <h1>Hello {\{ name }\}!</h1> -->
 
 <!--Jinja2能识别所有类型的变量，甚至是一些复杂的类型，录入列表字典和对象-->
-<!-- <p>A value from a dictionary:{{ mydict['key'] }}</p>
-<p>A value from a list:{{ mylist[3] }}</p>
-<p>A value from a list, with a variable index:{{ mylist[myintvar] }}</p>
-<p>A value from an object's method:{{ myobj.somemethod() }}</p> -->
+<!--即使{\{ . }\}已被html注释 注释掉，仍会识别，所以对于注释内容要打乱{\{ . }\}格式-->
+<!-- <p>A value from a dictionary:{\{ mydict['key'] }\}</p>
+<p>A value from a list:{\{ mylist[3] }\}</p>
+<p>A value from a list, with a variable index:{\{ mylist[myintvar] }\}</p>
+<p>A value from an object's method:{\{ myobj.somemethod() }\}</p> -->
 
 <!--变量的值可以用过滤器修改-->
-<!-- <h1>Hello {{ name|capitalize }}!</h1> -->
+<!-- <h1>Hello {\{ name|capitalize }\}!</h1> -->
 
 <!--常用过滤器-->
-<!-- safe capitalize lower upper title trim striptags -->
+<!-- safe capitalize lower upper title trim striptags -->
+
+{% extends "bootstrap/base.html" %}
+
+{% block title %}Flasky{% endblock %}
+
+{% block navbar %}
+<div class="navbar navbar-inverse" role="navigation">
+    <div class="container">
+        <div class="navbar-header">
+            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
+                <span class="sr-only">Toggle navigation</span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </button>
+            <a class="navbar-brand" href="/">Flasky</a>
+        </div>
+        <div class="navbar-collapse collapse">
+            <ul class="nav navbar-nav">
+                <li><a href="/">Home</a></li>
+            </ul>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block content %}
+<div class="container">
+    <div class="page-header">
+        <h1>Hello, {{ name }}!</h1>
+    </div>
+</div>
+{% endblock %}