質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Bottle

Bottleは、PythonのWebサーバです。1つのPythonファイルで構成されており、非常に軽量。Web APIの作成や導入が簡単で、DjangoやFlaskに比べ使いやすくシンプルなことが特徴です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

解決済

1回答

3014閲覧

python-bottle、js、html、pythonを用いたログイン認証ができない

退会済みユーザー

退会済みユーザー

総合スコア0

Bottle

Bottleは、PythonのWebサーバです。1つのPythonファイルで構成されており、非常に軽量。Web APIの作成や導入が簡単で、DjangoやFlaskに比べ使いやすくシンプルなことが特徴です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

ログイン

ログインは、ユーザーがコンピューターシステムにアクセスするプロセスの事を呼びます。

Python

Pythonは、コードの読みやすさが特徴的なプログラミング言語の1つです。 強い型付け、動的型付けに対応しており、後方互換性がないバージョン2系とバージョン3系が使用されています。 商用製品の開発にも無料で使用でき、OSだけでなく仮想環境にも対応。Unicodeによる文字列操作をサポートしているため、日本語処理も標準で可能です。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0グッド

0クリップ

投稿2020/04/16 07:23

編集2020/04/18 04:50

前提・実現したいこと

ラズパイでpython-bottleを用いて簡単なwebサーバーを作りたいと思っています。
web機能として代表的なものを作ろうと思い、ログイン機能を実装しようとしています。
.pyや.js、.html、ネットワーク上でのデータのやり取りがどうやって行われているかも知りたいです。

発生している問題・エラーメッセージ

sendボタンを押したら.jsのadmiter()を呼んで、.pyのadMition呼んでとりあえずif文で認識させようとしているのですが405を吐いてしまいました。.jsのほうが呼べてないのか、.pyのほうが呼べてないのかわからないのですがsendボタンのonclickが原因だと思ってます。

GPIOピンの状態も表示されていますが省いています。 console上では 127.0.0.1 - - [16/Apr/2020 16:15:23] "POST / HTTP/1.1" 405 737 127.0.0.1 - - [16/Apr/2020 16:15:23] "POST /getButton HTTP/1.1" 200 37 webでは Error: 405 Method Not Allowed Sorry, the requested URL 'http://0.0.0.0:8080/' caused an error: Method not allowed.

該当のソースコード

html

1<!DOCTYPE html> 2<html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 6 <title>Login</title> 7 </head> 8 <body> 9 <main> 10 <h1>Login</h1> 11 <form action="" method="POST"> 12 <div> 13 userID : <input type="text" name="id" size="40"> 14 </div> 15 <div> 16 passward : <input type="text" name="pass" size="40"> 17 </div> 18 <div> 19 <input type="submit" value="send" onclick="admit()"> 20 </div> 21 </form> 22 </main> 23 <script type="text/javascript" src="static/js/caller.js" charset="utf-8"></script> 24 </body> 25</html>

JavaScript

1var SERVER_URL = "http://0.0.0.0:8080/" 2function admit(){ 3 callApi( 4 SREVER_URL + "admit", 5 { 6 var id = document.getElementById("id").value; 7 var passward = document.getElementById("pass").value; 8 }, 9 function(o){} 10 ); 11} 12function callApi(url, jsonObj, callback) { 13 var xhr = new XMLHttpRequest(); 14 xhr.open('POST', url); 15 xhr.setRequestHeader('Content-Type', 'application/json'); 16 xhr.setRequestHeader('Accept', 'application/json'); 17 18 xhr.onreadystatechange = (function(myxhr) { 19 return function() { 20 if (xhr.readyState == 4 && xhr.status == 200) { 21 callback(myxhr); 22 } 23 } 24 })(xhr); 25 26 xhr.send(JSON.stringify(jsonObj)); 27}

python

1import json 2from bottle import route, run, request, HTTPResponse, template, static_file 3import RPi.GPIO 4import atexit 5 6GPIO_PORT_LED_0 = 5 7GPIO_PORT_LED_1 = 6 8GPIO_PORT_BTN_0 = 20 9GPIO_PORT_BTN_1 = 21 10 11@route('/static/:path#.+#', name='static') 12def static(path): 13 return static_file(path, root='static') 14 15@route('/') 16def root(): 17 return template("login") 18 19# curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"id":"0", "pass":"0"}' http://0.0.0.0:8080/admit 20@route('/admit', method='POST') 21def adMition(): 22 var = repuest.json 23 24 if(var["id"]== "erbin_electro" and var["pass"]=="0000"): 25 return template("index") 26 else: 27 return template("login") 28 29# curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"num":"0", "onoff":true}' http://0.0.0.0:8080/setLed 30@route('/setLed', method='POST') 31def setLedEntry(): 32 var = request.json 33 # print (var) 34 if (var["num"] == "0" ): 35 RPi.GPIO.output(GPIO_PORT_LED_0, var["onoff"]) 36 elif (var["num"] == "1" ): 37 RPi.GPIO.output(GPIO_PORT_LED_1, var["onoff"]) 38 retBody = {"ret": "ok"} 39 r = HTTPResponse(status=200, body=retBody) 40 r.set_header('Content-Type', 'application/json') 41 return r 42 43# curl -H "Accept: application/json" -H "Content-type: application/json" -X POST -d '{"dummy":"0"}' http://0.0.0.0:8080/getButton 44@route('/getButton', method='POST') 45def getButtonEntry(): 46 retBody = { 47 "ret": "ok", 48 "btn_0": RPi.GPIO.input(GPIO_PORT_BTN_0), 49 "btn_1": RPi.GPIO.input(GPIO_PORT_BTN_1) 50 } 51 r = HTTPResponse(status=200, body=retBody) 52 r.set_header('Content-Type', 'application/json') 53 return r 54 55def main(): 56 print("Initialize port") 57 RPi.GPIO.setmode(RPi.GPIO.BCM) 58 RPi.GPIO.setup(GPIO_PORT_LED_0, RPi.GPIO.OUT) 59 RPi.GPIO.setup(GPIO_PORT_LED_1, RPi.GPIO.OUT) 60 RPi.GPIO.setup(GPIO_PORT_BTN_0, RPi.GPIO.IN, pull_up_down = RPi.GPIO.PUD_UP) 61 RPi.GPIO.setup(GPIO_PORT_BTN_1, RPi.GPIO.IN, pull_up_down = RPi.GPIO.PUD_UP) 62 RPi.GPIO.output(GPIO_PORT_LED_0, 0) 63 RPi.GPIO.output(GPIO_PORT_LED_1, 0) 64 65 print('Server Start') 66 run(host='0.0.0.0', port=8080, debug=True, reloader=True) 67 # run(host='0.0.0.0', port=8080, debug=False, reloader=False) 68 69def atExit(): 70 print("atExit") 71 RPi.GPIO.cleanup() 72 73if __name__ == '__main__': 74 atexit.register(atExit) 75 main()

試したこと

sendボタンがちゃんと機能するように<form>を使う。
onclickの書き方を正す、それによる.jsのスクリプトの改変。
idとpasswardのtextの取得ができるように.jsを変えた。
ぐらいしかできません。。。

補足情報

一応ディレクトリ構造です。cd MyServerしてからpython index.pyしています(語彙力)
MyServer
-views
-index.tpl
-login.tpl
-static
-js-caller.js
-admiter.js
index.py
bottle.py
bottle.pyc

ブラウザはラズパイ4のChromiumの最新バージョン、pythonは3.8.2
このサイト https://qiita.com/iwatake2222/items/3f86281312646fd9d893 を参考にやっていて、LEDを光らせたり、GPIOピンの状態を取得するのはできました。index.tpl(index.html)とcaller.jsは文字数の都合で載せていません。
python、htmlもjavascriptもホントにちょこっとだけしか勉強したことがなく、見てある程度理解しているようなレベルですので、簡単に説明していただけると幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

form action=""となっているのが原因でした。全く気付かなかった...

投稿2020/04/18 04:49

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問