EC2(amazon linux2)上でflaskを用いてログイン認証の機能を用いたページを作成しようとしています。
ログイン前のページにはcssが反映されるのですが、ログイン後のページにはcssが反映されません。
bootsstrapの様にフルパスで指定するとcssが反映されます。
また、アドレスバーにcssファイルにパスを指定するとブラウザ上でcssファイルが表示されます。
個人的んは、ログイン前後でhtmlファイルの相対位置が変わっているのかなと思います。
どのようにすればログイン後のhtmlファイルにもcssを反映させることができるでしょうか?
file構成
.
├── falsk_auth_app
│ ├── dblogin.py
│ ├── pycache
│ │ └── dblogin.cpython-37.pyc
│ ├── static
│ │ └── css
│ │ └── home1.css
│ ├── templates
│ │ ├── home1.html
│ │ ├── home.2.html
│ │ ├── home.html
│ │ ├── login.html
│ │ └── logout.html
│ ├── test.1.py
│ └── test.py
└── README.md
python3.7
1import flask 2import flask_login 3from flask import Flask, render_template, request,Response, abort, redirect,url_for,session 4from flask_login import LoginManager, login_user, logout_user, login_required, UserMixin 5from collections import defaultdict 6from boto3.session import Session 7import dblogin 8 9app = Flask(__name__) 10login_manager = LoginManager() 11login_manager.init_app(app) 12app.config['SECRET_KEY'] = "secret" 13 14#---インスタンス化--- 15class User(UserMixin): 16 def __init__(self, id, name, password): 17 self.id = id 18 self.name = name 19 self.password = password 20 21# ログイン用ユーザー作成 22users = { 23 1: User(1, "test", "test"), 24 2: User(2, "test1", "test1") 25} 26 27 28# ユーザーチェックに使用する辞書作成 29nested_dict = lambda: defaultdict(nested_dict) #importしたdefaultdictを利用 30user_check = nested_dict() 31for i in users.values(): 32 user_check[i.name]["password"] = i.password 33 user_check[i.name]["id"] = i.id 34 35@login_manager.user_loader 36def load_user(user_id): 37 return users.get(int(user_id)) 38 39####################################################### 40 41@app.route('/login', methods=["GET", "POST"]) 42def login(): 43 if(request.method == "POST"): 44 # ユーザーチェック 45 if(request.form["username"] in user_check and request.form["password"] == user_check[request.form["username"]]["password"]): 46 login_user(users.get(user_check[request.form["username"]]["id"])) # ユーザーが存在した場合はログイン 47 if request.form["username"] == "test": #testの場合にはhome 48 return redirect("/home/") 49 elif request.form["username"] == "test1": #test1の場合にはhome1 50 return redirect("/home1/") 51 else: #失敗したら401エラーを返す 52 return abort(401) 53 else: 54 return render_template("login.html") 55 56 57@app.route('/home1/') 58@login_required #パスワードかけたいページにこの文を追加 59def home(): 60 df = dblogin.dblogin_haisui() 61 df_values = df.values.tolist() 62 df_columns = df.columns.tolist() 63 print(df_values) 64 return render_template("home1.html", 65 df_values = df_values, 66 df_columns = df_columns 67 ) 68 69@app.route('/home/') 70@login_required 71def home1(): 72 73 return render_template("home.html") 74 75# ログアウトパス 76@app.route('/logout') 77def logout(): 78 flask_login.logout_user() 79 return redirect(url_for('login')) 80 81if __name__ == '__main__': 82 app.run(host = '0.0.0.0',debug =True)
html
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <!-- Required meta tags --> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <link rel="stylesheet" href="static/css/home1.css" > 8 <title>シンプルなログインフォーム</title> 9 </head> 10 <body> 11 <p>a</p> 12 <table> 13 <thead> 14 <tr>{%- for i in df_columns %}<th>{{ i|e }}</th>{%- endfor %}</tr> 15 </thead> 16 <tbody> 17 {%- for i in df_values %} 18 <tr>{% for j in i %}<td>{{ j|e }}</td>{% endfor %}</tr> 19 {%- endfor %} 20 </tbody> 21 </table> 22 23 24 <div class="px-4 py-3"> 25 <input type="button" class="botton_logout" value="ログアウト" onclick="window.location.href='/logout'"> 26 </div> 27 28 </body> 29</html>
css
1@charset "UTF-8"; 2p { 3 font-size: 100px; 4} 5table { 6 margin-left: 2em; 7 border: none; 8 border-collapse: collapse; 9 border-spacing: 0; 10 color: black; 11 font-size: 12px; 12 table-layout: fixed; 13 text-align: right; 14 padding: 0.4em; 15} 16thead { 17 border-bottom: 1px solid black; 18 vertical-align: bottom; 19} 20tbody tr:nth-child(odd) { 21 background: #f5f5f5; 22} 23tr, th, td { 24 text-align: right; 25 vertical-align: middle; 26 padding: 0.5em 0.5em; 27 line-height: normal; 28 white-space: normal; 29 max-width: none; 30 border: none; 31} 32th { 33 font-weight: bold; 34}
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/11 21:43
2021/10/11 23:47