Flask jinja2
https://blog.naver.com/pk3152/221358858486
1 //================================== 2 {{ 변수명 }} 3 {% 파이썬 소스코드 %} 4 {#주석 #} 5 6 {# 7 주석1 8 주석 2 9 ... 10 #} 11 //================================== 12 for문과 if문은코드가 끝이 났다는 것을 알려줘야 합니다. 13 for문 : {% endfor %} 14 if문 : {% endif %} 15 {% for i in range(10)%} 16 <div>jinja2 is great!!!</div> 17 {% endfor %} 18 19 {% if num == 1 %} 20 <h1>good</h1> 21 {% elif num == 2 %} 22 <h1>bad</h1> 23 {% else %} 24 <h1>not</h1> 25 {% endif %} 26 //=================================== 27 28 {{ 변수 | int }} #숫자 문자 타입 변환 방법 29 10이 넘는 경우에만 okay라는 문구를 출력하는 방법입니다. 30 <div> 31 {% if myNum|int > 10 %} 32 <span>Okay</span> 33 {% endif %} 34 </div> 35 36 {{ 변수 | str }} #문자 변환 예제 37 myNum 변수가 1000을 넘은 경우에 해당하는 값을 화면에 문구와 함께 출력 38 <div> 39 {% if muNum > 1000 %} 40 감사합니다. {{ myNum | str }}번째 방문하셨습니다. 41 {% endif %} 42 </div> 43 44 //===================================== 45 부모의 html을 물려받아 똑같이 사용할 수 있다. 46 자식템플릿에서 {% extends 상속받을 html이름 %} 47 48 전부 상속받는 것이 아니라,일부분을 수정하고 싶은 경우 49 block 블록이름 중간에 Space 50 {% block 블록이름 %} 51 소스코드 52 ... 53 {% endblock %} 54 55 {% extends 부모html %} 56 {% block 부모 템플릿의 블록이름 %} 57 변경하고자 하는 소스코드 58 ... 59 {% endblock %} 60 //====================================== 61 62 <link rel="stylesheet" type="text/css" href="{{url_for('static',filename='css/style.css')}}"> 63 <script type="text/javascript" src="{{url_for('static',filename='js/main.js')}}"></script> 64 <img src="{{url_for('static',filename='img/img1.jpg')}}"> 65 66 app.run(host="0.0.0.0",port=PORT,debug=True) 67 app.run(host="0.0.0.0",port=PORT) #有没有debug 都一样 没有调试信息 68 host="0.0.0.0" #这样可以通过输入IP 访问 69 port=PORT 随机端口
login 功能
1 //form.html 2 <html> 3 <head> 4 <title> form 태그로 로그인 만들었습니다. </title> 5 </head> 6 <body> 7 {% block main %} 8 <form method="POST" action="/login"> 9 <div>아이디: <input type="text" name="id" placeholder="아이디"> </div> 10 <div>비밀번호: <input type="password" name="password" placeholder="비밀번호"></div> 11 <input type="submit" value="로그인"> 12 </form> 13 <input type="submit" value="register" onclick="window.location.href='/register';return false;" > 14 {{text}} 15 {% endblock %} 16 </body> 17 </html>
1 //register.html 2 {% extends "form.html" %} 3 {% block main %} 4 <form action="/registering" method="post"> 5 <div> 아이디 : <input type="text" name="reg_id"></div> 6 <div> 비밀번호 :<input type="password" name="reg_pwd"></div> 7 <div> 닉네임 :<input type="text" name="reg_nick"></div> 8 <div class="div_3"><div> <input type="submit" class="button"> </div></div> 9 </form> 10 {% endblock %}
python
1 from flask import render_template,request,url_for,redirect 2 3 lists_id=[] #保存ID 4 lists_pwd=[]#保存密码 5 lists_nick=[] #保存网名 6 text="" 7 8 @app.route('/') 9 def main(): 10 return render_template("form.html",text=text)#显示默认地址 11 12 @app.route("/register") #接受 register请求 13 def register(): 14 return render_template("register.html") #显示register.html 15 16 @app.route("/registering",methods=["POST"]) #注册 17 def registering(): 18 id=request.form["reg_id"] #post里获得字段 19 pwd=request.form["reg_pwd"] 20 nick=request.form["reg_nick"] 21 22 lists_id.append(id) #添加列表里 23 lists_nick.append(nick) 24 lists_pwd.append(pwd) 25 return redirect("/") #跳转到首页 26 27 @app.route("/login",methods=["POST"]) 28 def login(): 29 global text 30 id=request.form["id"] 31 pwd=request.form["password"] 32 33 for i in range(len(lists_id)):#遍历查询 34 if(id==lists_id[i]): #ID 一样 35 if(pwd==lists_pwd[i]): #密码一样 36 return lists_nick[i]+"님이 접속하였습니다!!" 37 else: 38 text="비밀번호 오류" 39 return redirect("/") 40 text="아이디가 없습니다" #如果没有值 41 return redirect("/")
1 Flask 서버 예제 : 2 1. py 파일을 만든다. 3 파일명 : 파일명 : flask_server.py 4 5 2. 코딩 6 from flask import Flask 7 app = Flask(__name__) 8 9 @app.route("/") 10 def hello(): 11 return "Hello World!" 12 13 if __name__ == "__main__": 14 app.run(host='192.168.0.1', port=9999, debug=True) #아이피주소, 포트주소 15 16 3. 실행 17 1. 라즈베리파이에 설치되어있는 Thonny로 실행 18 2. 터미널에서 python ./flask_server.py 19 바탕화면에 저장시[cd home/pi/Desktop/해당 폴더] 20 21 Flask +Jinja2 서버 예제 : 22 23 1. py 파일을 만든다. 24 파일명 : 파일명 : flaskJinja_server.py 25 26 2. flaskJinja_server.py 코딩 27 from flask import Flask,render_template 28 import datetime 29 app = Flask(__name__) 30 @app.route("/") 31 def gettime(): 32 localtime = datetime.datetime.now() 33 strTimes = localtime.strftime("%Y-%m-%d %H:%M") 34 templateData = { 35 'title' : 'localtime', 36 'time' : strTimes 37 } 38 return render_template('main.html', **templateData) 39 40 if __name__ == "__main__": 41 app.run(host='0.0.0.0', port=8888, debug=True) #아이피주소, 포트주소 42 43 3.templates폴더에 html 파일을 만든다. 44 파일명 : 파일명 : main.html 45 46 <html> 47 <head> 48 <title>{{title}}</title> 49 </head> 50 51 <body> 52 <p>LocalTime : </p> 53 <p>{{time}}</p> 54 </body> 55 56 4. 실행 57 1-2. 라즈베리파이에 설치되어있는 Thonny로 실행 58 1-2. 터미널에서 python ./flaskJinja_server.py 59 바탕화면에 저장시[cd home/pi/Desktop/해당 폴더] 60 61 3. 인터넷 익스플로러에서 localhost:8888
socket IO
1.安装 pip install flask-socketio
Python 代码 （没有namespace）
1 #https://jiayi.space/post/shi-yong-flask-socketiojin-xing-websockettong-xin 2 #https://www.cnblogs.com/franknihao/p/7550043.html 3 #pip install flask-socketio 4 5 #!/usr/bin/env python 6 from flask import Flask, render_template, session, request 7 from flask_socketio import SocketIO, emit 8 9 """ 10 未命名的事件使用send()，已经命名的事件用emit()。 11 发送事件时，如果把broadcast参数设为True，那么同一个namespace下的所有连接都会收到该事件 12 13 1.后端如何得到前端数据 14 1）如果前端提交的方法为POST： 15 后端接收时要写methods=[‘GET’,‘POST’] 16 xx=request.form.get(xx); 17 xx=request.form[’‘xx’] 18 2）如果是GET 19 xx=request.args.get(xx) 20 2.后端向前端传数据 21 1) 传单个数据` 22 return render_template(‘需要传参网址’,xx=u’ xx’)； 23 前端接收： 24 {{xx}} 25 2) 传多个数据 26 先把数据写进字典，字典整体传 27 return render_template(‘需要传参网址’,**字典名’)； 28 前端接收： 29 {{字典名.变量名}} 30 """ 31 app = Flask(__name__) 32 app.config['SECRET_KEY'] = 'secret!' 33 34 socketio = SocketIO(app) 35 36 @app.route('/') 37 def index(): 38 return render_template("index.html") 39 40 @socketio.on('py_connect') #对应socket.emit('py_connect', {data: 'connected!'});//发送消息 41 def py_conn_fun(msg):# 要连接所以首先执行 42 print("connected:"+msg['data']) 43 emit('js_response', {'data': msg['data']})#发消息到 javascript 对应js_response 接收 44 45 @socketio.on('py_data_string') #单个字符串 46 def my_fun_string(msg): 47 emit('js_response', {'data': 'is string'}) 48 49 @socketio.on('py_data_code') #多个字符串 50 def my_fun_code(msg): 51 emit('js_response',{'code':'200','data':'start to process...'}) 52 53 @socketio.on('py_data_list') #list 54 def my_fun_list(msg): 55 emit('js_response', {'data': msg['data']}) 56 57 @socketio.on('py_data_brodcast') #广播 打开两个页面 可以互相传递消息 58 def my_fun_brodcast(msg): 59 emit('js_response', {'data': msg['data']}, broadcast=True) 60 61 if __name__ == '__main__': 62 #socketio.run(app,host="0.0.0.0",port=6000)#手机无法访问 63 socketio.run(app,host="0.0.0.0")#手机可以访问
templates/index.html 文件
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <title>Flask-SocketIO Test</title> 5 <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> 6 <script type="text/javascript" src="https://cdn.bootcss.com/socket.io/1.5.1/socket.io.min.js"></script> 7 <script src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script> 8 <script type="text/javascript" charset="utf-8"> 9 // 10 $(document).ready(function() { 11 var socket = io.connect();//建立连接 12 13 //接收消息 14 socket.on('connect', function() { 15 socket.emit('py_connect', {data: 'connected!'});//发送消息给python 16 }); 17 18 //msg参数传递 19 socket.on("js_response",function(msg){ 20 $('#log').append('<br>' + $('<div/>').text('Received #' + msg.code +': ' + msg.data).html()); 21 }); 22 23 //代码发送 24 $("#btn_code").click(function(){ 25 socket.emit('py_data_code', {data: $('#emit_data').val()}); 26 }); 27 28 //字符串 发送 29 $("#btn_string").click(function(){ 30 socket.emit('py_data_string', {data: $('#emit_data').val()}); 31 }); 32 33 //list 发送 34 $("#btn_list").click(function(){ 35 socket.emit('py_data_list', {data: $('#emit_data').val()}); 36 }); 37 38 //广播发送 浏览器打开两个页面 39 $("#btn_BrodCast").click(function(){ 40 socket.emit('py_data_brodcast', {data: $('#emit_data').val()}); 41 }); 42 }); 43 </script> 44 </head> 45 <body> 46 <input type="text" name="emit_data" id="emit_data" placeholder="Message"> 47 <input type="button" id="btn_code" value="提交code"> 48 <input type="button" id="btn_string" value="提交string"> 49 <input type="button" id="btn_list" value="提交list"> 50 <input type="button" id="btn_BrodCast" value="提交BrodCast"> 51 <div id='log'></div> 52 </body> 53 </html>
返回JSON
1 from flask import Flask, jsonify 2 app = Flask(__name__) 3 4 @app.route('/') 5 def root(): 6 t = { 7 'a': 1, 8 'b': 2, 9 'c': [3, 4, 5] 10 } 11 return jsonify(t) #字典变成Json形式 12 13 if __name__ == '__main__': 14 app.debug = True 15 app.run()
显示图表格
view.py
1 import numpy as np 2 import matplotlib.pyplot as plt 3 import os,sys 4 5 @app.route('/chartTest') 6 def chartTest(): 7 a = np.arange(8)#生成0~8 8 plt.plot(a) #画图 9 fn = getattr(sys.modules['__main__'], '__file__') 10 prj_path=os.path.abspath(os.path.dirname(fn)) #获得路径 11 prj_folder=prj_path.split("\\")[-1] #获得最后的名字 12 plt.savefig(prj_folder+'/static/images/new_plot.png') #保存图片 13 return render_template('chartTest.html', name = 'new_plot', url ='/static/images/new_plot.png') #渲染 包括路径
chartTest.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head> 7 <body> 8 <p>{{ name }}</p><!--传递文字--> 9 <img src={{ url}} alt="Chart" height="320" width="240"> <!--x显示图片--> 10 </body> 11 </html>
