1. flask_cors 모듈을 설치해야 합니다.
pip install flask_cors
2. 해당 모듈을 app.py에 import로 불러와서 적용합니다.
from flask_cors.extension import CORS
app = Flask(__name__, static_url_path="", static_folder="static")
CORS(app)
emp.svelte
<script>
import {onMount} from "svelte";
let txt=""
let mylist =[
{'e_id':1,'e_name':1,'gen':1,'addr':1},
{'e_id':2,'e_name':2,'gen':2,'addr':2},
{'e_id':3,'e_name':3,'gen':3,'addr':3},
{'e_id':4,'e_name':4,'gen':4,'addr':4},
]
const fn_list = ()=>{
fetch('http://localhost/emp_list.ajax',{
method : "POST",
body : JSON.stringify({'menu':'짬뽕'}),
headers : {'Content-Type':'application/json'}
}).then(res=> res.json())
.then(data =>{
mylist = data.list;
})
}
const fn_add = ()=>{
let param = {
'e_id':document.querySelector("#e_id").value,
'e_name':document.querySelector("#e_name").value,
'gen':document.querySelector("#gen").value,
'addr':document.querySelector("#addr").value
}
fetch('http://localhost/emp_add.ajax',{
method : "POST",
body : JSON.stringify(param),
headers : {'Content-Type':'application/json'}
}).then(res=> res.json())
.then(data =>{
let cnt = data.cnt;
if(cnt ==1) {
alert("정상적으로 추가되었습니다.");
fn_list();
document.querySelector("#e_id").value="";
document.querySelector("#e_name").value="";
document.querySelector("#gen").value="";
document.querySelector("#addr").value="";
}else {
alert("추가도중 문제가 생겼습니다.");
}
})
}
const fn_mod = ()=>{
let param = {
'e_id':document.querySelector("#e_id").value,
'e_name':document.querySelector("#e_name").value,
'gen':document.querySelector("#gen").value,
'addr':document.querySelector("#addr").value
}
fetch('http://localhost/emp_mod.ajax',{
method : "POST",
body : JSON.stringify(param),
headers : {'Content-Type':'application/json'}
}).then(res=> res.json())
.then(data =>{
let cnt = data.cnt;
if(cnt ==1) {
alert("정상적으로 수정되었습니다.");
fn_list();
document.querySelector("#e_id").value="";
document.querySelector("#e_name").value="";
document.querySelector("#gen").value="";
document.querySelector("#addr").value="";
}else {
alert("수정도중 문제가 생겼습니다.");
}
})
}
const fn_del = ()=>{
var flag = confirm("한번 지워진 데이터는 복구 불가합니다. \n 그래도 지우시렵니까?");
if(!flag) {
return;
}
let param = {
'e_id':document.querySelector("#e_id").value
}
fetch('http://localhost/emp_del.ajax',{
method : "POST",
body : JSON.stringify(param),
headers : {'Content-Type':'application/json'}
}).then(res=> res.json())
.then(data =>{
let cnt = data.cnt;
if(cnt ==1) {
alert("정상적으로 삭제되었습니다.");
fn_list();
document.querySelector("#e_id").value="";
document.querySelector("#e_name").value="";
document.querySelector("#gen").value="";
document.querySelector("#addr").value="";
}else {
alert("삭제도중 문제가 생겼습니다.");
}
})
}
function fn_one(){
let e_id = this.text;
fetch('http://localhost/emp_one.ajax',{
method : "POST",
body : JSON.stringify({'e_id':e_id}),
headers : {'Content-Type':'application/json'}
}).then(res=> res.json())
.then(data =>{
let vo = data.vo;
document.querySelector("#e_id").value=vo.e_id;
document.querySelector("#e_name").value=vo.e_name;
document.querySelector("#gen").value=vo.gen;
document.querySelector("#addr").value=vo.addr;
})
}
onMount(async() =>{
fn_list();
})
</script>
<table border="1">
<thead>
<tr>
<th>사번</th>
<th>이름</th>
<th>성별</th>
<th>주소</th>
</tr>
</thead>
<tbody>
{#each mylist as e}
<tr>
<td><a on:click={fn_one}>{e.e_id}</a></td>
<td>{e.e_name}</td>
<td>{e.gen}</td>
<td>{e.addr}</td>
</tr>
{/each}
</tbody>
</table>
<table border="1">
<tr>
<td>사번</td>
<td>
<input type="text" id="e_id">
</td>
</tr>
<tr>
<td>이름</td>
<td>
<input type="text" id="e_name">
</td>
</tr>
<tr>
<td>성별</td>
<td>
<input type="text" id="gen">
</td>
</tr>
<tr>
<td>주소</td>
<td>
<input type="text" id="addr">
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="추가" on:click={fn_add}/>
<input type="button" value="수정" on:click={fn_mod}/>
<input type="button" value="삭제" on:click={fn_del}/>
</td>
</tr>
</table>
myflask.py
from flask import Flask,redirect,json
from flask.globals import request
from flask.json import jsonify
from day14server.daoemp import DaoEmp
from flask_cors.extension import CORS
app = Flask(__name__, static_url_path="", static_folder="static")
CORS(app)
@app.route("/")
def main():
return redirect("/index.html")
@app.route('/fetch.ajax',methods=['POST','GET'])
def ajax_fetch():
# 방식2
data = json.loads(request.data)
print(data.get('menu'))
return jsonify({'message':'ok'})
@app.route('/emp_list.ajax', methods=['POST','GET'])
def ajax_emp_list():
de = DaoEmp()
list = de.selectList()
return jsonify({'list':list})
@app.route('/emp_one.ajax', methods=['POST'])
def ajax_emp_one():
data = json.loads(request.data)
e_id = data['e_id']
de = DaoEmp()
vo= de.selectOne(e_id)
return jsonify({'vo':vo})
@app.route('/emp_add.ajax', methods=['POST'])
def ajax_emp_add():
data = json.loads(request.data)
e_id = data['e_id']
e_name = data['e_name']
gen = data['gen']
addr = data['addr']
de = DaoEmp()
cnt = de.insert(e_id, e_name, gen, addr)
return jsonify({'cnt':cnt})
@app.route('/emp_mod.ajax', methods=['POST'])
def ajax_emp_mod():
data = json.loads(request.data)
e_id = data['e_id']
e_name = data['e_name']
gen = data['gen']
addr = data['addr']
de = DaoEmp()
cnt = de.update(e_id, e_name, gen, addr)
return jsonify({'cnt':cnt})
@app.route('/emp_del.ajax', methods=['POST'])
def ajax_emp_del():
data = json.loads(request.data)
e_id = data['e_id']
de = DaoEmp()
cnt = de.delete(e_id)
return jsonify({'cnt':cnt})
if __name__ == "__main__":
app.run(host="0.0.0.0",debug=True, port=80)
'파이썬 > 수업내용' 카테고리의 다른 글
[Python] React (0) | 2024.07.17 |
---|---|
[Python] Vue - CRUD (0) | 2024.07.16 |
[python] Svelte-CRUD (0) | 2024.07.15 |
[Pytho] Svelte (1) | 2024.07.15 |
[Python] Vue.js (0) | 2024.07.15 |