부트스트랩 프레임워크를 아름답게 만드는 방법에 대한 예제 튜토리얼(Python)-파이썬 튜토리얼-php.cn

사실 이전 장의 내용 이후에는 페이지 레이어가 완성되어 기능을 쉽게 구현할 수 있지만 여전히 미학적 측면이 크게 부족한 것은 분명합니다. 지금은 좋은 프런트엔드가 있습니다. AmazeUI, Tencent의 WeUI 등과 같은 CSS 프레임워크입니다. 여기에서는 플라스크와 잘 통합되는 부트스트랩 프레임워크를 추천합니다

[관련 동영상 추천: 부트스트랩 튜토리얼]

설치 프레임워크

템플릿에서 부트스트랩의 CDN이나 로컬 경로를 직접 참조하는 것 외에도 플라스크의 부트스트랩 통합 패키지를 직접 적용할 수도 있습니다. 통합 패키지를 설치하려면:

pip3.6 installFlask-bootstrap

모든 플라스크 확장 패키지의 기본 패키지 이름입니다. 로 시작합니다. bootstrap의 경우에도 마찬가지입니다. 먼저 기본 파일의 선두에서 패키지를 가져옵니다.

fromFlask.ext.bootstrap import Bootstrap

그런 다음 부트스트랩을 수행합니다. 코드 초기화 및 수정:

bootstrap=Bootstrap(app)

초기화 후 다음을 사용할 수 있습니다. 이 패키지에 포함된 구성 요소 중 하나를 사용하기 위한 Jinja2의 상속 방법입니다. Bootstrap용 기본 템플릿입니다. 기본 템플릿은 부트스트랩의 일련의 요소를 직접 참조합니다.

jinja2에서 템플릿 상속을 사용하는 방법을 기억하세요. 사용하기 전에 먼저 기본 템플릿의 구조를 살펴보세요.

{% block doc -%}
<!DOCTYPE html>
<html{% block html_attribs %}{% endblock html_attribs %}>
{%- block html %}
 <head>
 {%- block head %}
 <title>{% block title %}{{title|default}}{% endblock title %}</title>

 {%- block metas %}
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 {%- endblock metas %}

 {%- block styles %}
 <!-- Bootstrap -->
 <link href="{{bootstrap_find_resource(&#39;css/bootstrap.css&#39;, cdn=&#39;bootstrap&#39;)}}" rel="external nofollow" rel="stylesheet">
 {%- endblock styles %}
 {%- endblock head %}
 </head>
 <body{% block body_attribs %}{% endblock body_attribs %}>
 {% block body -%}
 {% block navbar %}
 {%- endblock navbar %}
 {% block content -%}
 {%- endblock content %}

 {% block scripts %}
 <script src="{{bootstrap_find_resource(&#39;jquery.js&#39;, cdn=&#39;jquery&#39;)}}"></script>
 <script src="{{bootstrap_find_resource(&#39;js/bootstrap.js&#39;, cdn=&#39;bootstrap&#39;)}}"></script>
 {%- endblock scripts %}
 {%- endblock body %}
 </body>
{%- endblock html %}
</html>
{% endblock doc -%}

로그인 후 복사

소스 코드에서 볼 수 있듯이 이 기본 템플릿은 12 각 블록은 전체 문서(doc), html 속성(html_attribs), 전체 html(html), 전체 헤드 부분(head), 제목 부분(title), 메타코드 부분(metas) 및 CSS 스타일(styles) 본문 속성(body_attribs), 본문 부분(body), 탐색(navbar),
페이지 콘텐츠(content), js(스크립트)

및 제목, 메타, CSS, 그리고 js에는 모두 기본 콘텐츠가 있으므로 이를 사용할 때 {{super()}}

를 추가해야 합니다. 이 기본 템플릿의 구조에 따라 login.html의 코드를 다음과 같이 수정합니다.

{% extends "bootstrap/base.html"%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->
{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
 <p class="container">
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
 </p>
</p>
{% endblock %}

로그인 후 복사

지금 프로그램을 실행하세요. 표시된 결과는 다음과 같습니다.

지금보다 훨씬 더 아름답습니다. 생성된 HTML 코드는 다음과 같습니다.

<!DOCTYPE html>
<html>
 <head>
 <title>牛博客 </title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="external nofollow" rel="stylesheet">
 </head>
 <body>
 <nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
 </nav>
 <!--具体内容-->
 <p class="container">
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
 </p>
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
 </body>
</html>

로그인 후 복사

CDN 주소 주의, 이 주소 가끔 벽에 막힐 때가 있는데 어떻게 해야 할까요?

수정 방법은 Python 설치 디렉터리에서 Libsite-packagesflask_bootstrap 폴더를 찾는 것입니다. 해당 폴더에 __init__.py 파일이 있습니다.

수정합니다. 그런데 저는 bootcdn cdn 서버를 자주 사용합니다

로컬 방식으로 test 하고 123을 입력한 후 테스트해 보겠습니다. 결과는

이전 테스트 로그인 성공 페이지가 계속 표시되는데 이는 분명히 잘못된 것입니다. 일반적으로 bbs나 블로그는 로그인하기 전에 페이지로 이동하거나 지금 홈페이지로 이동합니다. 편의상 모두 홈페이지로 이동합니다. 동시에 사용자 이름이나 비밀번호가 올바르지 않으면 로그인 페이지에 프롬프트가 표시됩니다.

from flask import session #导入session对象

@app.route("/login",methods=["POST"])
def loginPost():
 username=request.form.get("username","")
 password=request.form.get("password","")
 if username=="test" and password=="123" :
 session["user"]=username
 return render_template("/index.html",name=username,site_name=&#39;myblog&#39;)
 else:
 return "登录失败"

로그인 후 복사

소스 로그인 성공 후의 코드는 다음과 같습니다:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>myblog</title>
</head>
<body>
<h1>这个站点的名字为 myblog </h1>
</body>
</html>

로그인 후 복사

아, 그런데 부트스트랩의 기본 템플릿은 참조되지 않습니다. index.html의 템플릿 코드를 수정하고

<🎜의 첫 번째 줄을 변경하세요. >{% 확장 "base.html" %}

수정됨

{% 확장 "bootstrap/base.html" %}

새로고침:

<!DOCTYPE html>
<html>
 <head>
 <title>blog</title>
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <!-- Bootstrap -->
 <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 </head>
 <body>
 <h1>这个站点的名字为 myblog </h1>
 </body>
</html>

로그인 후 복사

부트스트랩 프레임워크가 성공적으로 참조되었지만 모든 탐색 부분이 누락된 것을 확인하세요. 물론 지금은 탐색을 다시 작성할 수 없습니다. 사용자 정의된 기본 템플릿을 직접 수정하고 다른 템플릿이 이를 참조하도록 할 수 있습니다. 기본 템플릿을 다음과 같이 수정하세요.

{%extends "bootstrap/base.html "%}
{% block title%}牛博客 {% endblock %}<!--覆盖title标签-->

{% block navbar %}
<nav class="navbar navbar-inverse"><!-- 导航部分 -->
 导航
</nav>
{% endblock %}
{% block content %} <!--具体内容-->
<p class="container">
</p>
{% endblock %}

로그인 후 복사

그런 다음 홈 페이지 코드를 수정하세요.

{% extends "base.html" %}

{% block content %}
 <h1>这个站点的名字为 {{site_name}} </h1>
{% endblock %}

로그인 후 복사

로그인 페이지 코드를 다음과 같이 수정하세요. >

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
</p>
{% endblock %}

로그인 후 복사

아래 로그인 성공 페이지의 표시 결과는 다음과 같습니다.

단, 현재 페이지 스타일은 로그인 페이지와 일치합니다. (즉, 입력이 테스트가 아니며 123이 아님) 이전과 마찬가지로 로그인 오류 문자열을 반환하는 것 외에도 사용자는 학습을 마친 후 사용자 상태를 반영할 수 있는 방법이 필요합니다. flash 기능을 계속해서 default.py 파일을 수정해 보겠습니다.

from flask import flash

@app.route("/login",methods=["POST"])
def loginPost():
 username=request.form.get("username","")
 password=request.form.get("password","")
 if username=="test" and password=="123" :
 session["user"]=username
 return render_template("/index.html",name=username,site_name=&#39;myblog&#39;)
 else:
 flash("您输入的用户名或密码错误")
 return render_template("/login.html") #返回的仍为登录页

로그인 후 복사

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
 {% for message in get_flashed_messages() %}
 <p class="alert alert-warning">
 <button type="button" class="close" data-dismiss="alter">&times</button>
 {{message}}
 </p>
 {% endfor %}
 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
</p>
{% endblock %}

로그인 후 복사

좋아요. 아래에 test와 1234를 입력하면 표시되는 결과는 다음과 같습니다.

상태가 완벽하게 표시됩니다.

계속 미화하세요

로그인 페이지와 컨트롤러의 기본 기능은 완료되었으나, 이 페이지에만 해당 페이지를 차지하는 로그인 박스가 없습니다. 전체 화면입니다. 일반적으로 센터링 부분입니다. 이 부분은 부트스트랩의 그리드 시스템이 나타나는 부분입니다.

栅格系统简单说就是将一个container或container-fluid中分为12个列，每个列都可以合并或偏移，与html中的table类似，并且支持响应式，通过xs，sm，md，lg来进行不同屏幕尺寸的区分。下面用栅格系统对登录页进行一下修改：

{% extends "base.html"%}
{% block content %} <!--具体内容-->
<p class="container">
 <p class="row"></p>
 <p class="row">
 <#-- col-md-4表示合并4列，col-md-offset-4表示偏移4列 sm意思相同 --#>
 <p class="col-md-4 col-md-offset-4 col-sm-6 col-sm-offset-3">
 <p class="page-header">
 <h1>欢迎您登陆</h1>
 </p>
 {% for message in get_flashed_messages() %}
 <p class="alert alert-warning">
 <button type="button" class="close" data-dismiss="alter">&times</button>
 {{message}}
 </p>
 {% endfor %}

 <form method="post">
 <p class="form-group">
 <label for="username">用户名</label>
 <input type="text" class="form-control" name="username" id="username" placeholder="请输入用户名">
 </p>
 <p class="form-group">
 <label for="passworld">密码</label>
 <input type="password" class="form-control" name="password" id="passworld" placeholder="请输入密码">
 </p>
 <button type="submit" class="btn btn-default">登录</button>
 </form>
 </p>
 </p>
</p>
{% endblock %}

로그인 후 복사

显示结果如下：