# Flask ## 介紹 ### Flask 是一個使用 Python 語言開發的輕量級 Web 應用框架。近年來因為Python簡單易學的語法以及強大的生態系統，所以在Web開發領域也逐漸受到青睞。其中Flask的哲學是保持核心簡單但擴充性強，它只提供了路由、模板、靜態檔案等最基本的功能，其他大多數功能則是通過擴展提供，這樣可以讓我們按需求選擇。 ### Flask強調概念明確、低耦合度和可擴充性。和Django等全能框架不同， ## ## 程式碼說明 ### 首先先以Python切入 ### Python ```Python # 匯入會用到的庫 from flask import Flask from flask import render_template from flask import Flask, request, jsonify import threading import requests, socket import pymysql # from flask_cors import CORS # 若有跨域需求再開，練習通常用不到 ``` ### 接著我這邊與網路上的寫法有些不同，我直接寫成物件導向的方式，實測下來沒太大問體 #### 先設定多線呈方式，及設定好資料庫連線位置 ```Python class Website(threading.Thread): def __init__(self): threading.Thread.__init__(self) self.db = pymysql.connect(host='140.125.21.65', port=3307, user='VIP125', passwd='@VIPvip125', db='VIP125', charset='utf8') self.app = Flask(__name__) # CORS(self.app) ``` ### 路由設定 #### 這邊統一教學，我設定成前後端分離的方式，將頁面與API做個區分，之後若是要單獨架設頁面或是API都可以直接修改 ```Python #前端顯示 self.app.add_url_rule('/', 'Index', self.Index) self.app.add_url_rule('/next/', 'Next', self.Next) # API self.app.add_url_rule('/api/get_data', 'get_data', self.get_data,methods=['get']) self.app.add_url_rule('/api/get_one_data/', 'get_one_data', self.get_one_data, methods=['get']) ``` ### 前端頁面導向 #### 這邊提供純頁面及需要攜帶部分參數的簡單方式 ```Python # 前端 def Index(self): return render_template('Index.html') def Next(self,id): # 攜帶參數 return render_template('Next.html',id = id) ``` ### 後端資料 #### 建議先看過一部份的資料庫語法後再來接觸 ```Python # 後端API def get_data(self): cursor = self.db.cursor() sql = "select * from teaching_sql_1" cursor.execute(sql) data = cursor.fetchall() print(f'ALL_data = {data}') return jsonify(data) def get_one_data(self,id): cursor = self.db.cursor() sql = f"SELECT * FROM teaching_sql_1 WHERE student_id='{id}';" print(sql) cursor.execute(sql) data = cursor.fetchall() print(f'user_id = {data}') return jsonify(data) ``` ### 完整程式 ```Python from flask import Flask from flask import render_template from flask import Flask, request, jsonify import threading import requests, socket import pymysql # from flask_cors import CORS class Website(threading.Thread): def __init__(self): threading.Thread.__init__(self) self.db = pymysql.connect(host='140.125.21.65', port=3307, user='VIP125', passwd='@VIPvip125', db='VIP125', charset='utf8') self.app = Flask(__name__) # CORS(self.app) #前端顯示 self.app.add_url_rule('/', 'Index', self.Index) self.app.add_url_rule('/next/', 'Next', self.Next) # API self.app.add_url_rule('/api/get_data', 'get_data', self.get_data,methods=['get']) self.app.add_url_rule('/api/get_one_data/', 'get_one_data', self.get_one_data, methods=['get']) def run(self): #self.app.run() self.app.run(host="0.0.0.0", port="5500") # 前端 def Index(self): return render_template('Index.html') def Next(self,id): # 攜帶參數 return render_template('Next.html',id = id) # 後端API def get_data(self): cursor = self.db.cursor() sql = "select * from teaching_sql_1" cursor.execute(sql) data = cursor.fetchall() print(f'ALL_data = {data}') # 返回 JSON 响应 return jsonify(data) def get_one_data(self,id): cursor = self.db.cursor() sql = f"SELECT * FROM teaching_sql_1 WHERE student_id='{id}';" print(sql) cursor.execute(sql) data = cursor.fetchall() print(f'user_id = {data}') return jsonify(data) if __name__ == '__main__': website = Website() website.run() ``` ### 前端(HTML) #### 這邊就以基礎的HTML與JS進行 #### 有簡單的利用AJAX去撈資料、頁面跳轉 #### Index.html ``` HTML Flask HTML CSS Example

Flask

Hello World!
``` #### Next.html ```HTML Title
```