前提・実現したいこと
ラズパイで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もホントにちょこっとだけしか勉強したことがなく、見てある程度理解しているようなレベルですので、簡単に説明していただけると幸いです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。