[Python] Svelte - MVVM 패턴 으로 CRUD

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)