[Python] Vue - CRUD

설치

기존 프로젝트에서 axios로 서버와 통신 하기 위해서는 이를 node_modules에 설치해야한다. 이때 다음과 같은 명령어를 사용하면 된다.

npm install axios

이후 /node_modules에 axios가 추가된 것을 확인할 수 있다.

vue 에서 사용 시 import axios from "axios"를 해야 한다.

 

 

 

 

 

- static안에 있는 파일은 vue에서 배포 받은걸 저장한 파일이다.

 

 

 

 

daoemp.py

import pymysql

class DaoEmp:
    def __init__(self):
        self.con = pymysql.connect(host='127.0.0.1', port= 3305, user='root', password='python',
                       db='python', charset='utf8')

        self.cur = self.con.cursor(pymysql.cursors.DictCursor)    
        
        
        
    def selectList(self):
        sql = "SELECT * FROM emp"
        self.cur.execute(sql)

        list = self.cur.fetchall() 
        return list
                
    def selectOne(self,e_id):
        sql = f"""
        SELECT
            e_id,e_name,gen,addr
        FROM
            emp
        WHERE
            e_id = '{e_id}'
        """
        print(sql)
        self.cur.execute(sql)

        vo = self.cur.fetchone() 
        return vo 
    
    def __del__(self):
        self.cur.close()
        self.con.close()  
        
        
    def insert(self,e_id,e_name,gen,addr):
        sql = f""" 
        INSERT INTO emp
            (e_id,e_name,gen,addr)
        VALUES
            ('{e_id}','{e_name}','{gen}','{addr}')
        """
        print(sql)
        
        cnt = self.cur.execute(sql)
        self.con.commit()
        return cnt 
    
    def update(self,e_id,e_name,gen,addr):
        sql = f""" 
            UPDATE emp 
            SET 
                e_name='{e_name}',
                gen='{gen}',
                addr='{addr}'
            WHERE 
                e_id = '{e_id}'
            """
        print(sql)
        
        cnt = self.cur.execute(sql)
        self.con.commit()
        return cnt             
    
    def delete(self,e_id):
        sql = f""" 
            DELETE FROM emp
            WHERE 
                e_id='{e_id}'
            """
        print(sql)
        
        cnt = self.cur.execute(sql)
        self.con.commit()
        return cnt
    
    
                
# if __name__ == '__main__':
#     de = DaoEmp()
#     vo = de.selectOne('1') 
#     print("vo",vo)         
    
if __name__ == '__main__':
    de = DaoEmp()
    cnt = de.insert('4','4','4','4') 
    print("cnt",cnt)

 

myflask.py

from flask import Flask,redirect,json
from flask.globals import request
from flask.templating import render_template
from flask.json import jsonify
from day15server.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('/axios.ajax',methods=['POST','GET'])
def ajax_axios():
    menu=request.get_json()
    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 = request.get_json()
    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 = request.get_json()
    e_id = data['param']['e_id']
    e_name = data['param']['e_name']
    gen = data['param']['gen']
    addr = data['param']['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 = request.get_json()
    e_id = data['param']['e_id']
    e_name = data['param']['e_name']
    gen = data['param']['gen']
    addr = data['param']['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 = request.get_json()
    e_id = data['param']['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)

 

Emp.vue

<script setup>
import {onMounted, reactive} from 'vue'
import axios from "axios";

let list = reactive([
  
]);

function fn_list(){
  //emp_list.ajax
  axios.post('http://localhost/emp_list.ajax', {
  }).then(function (resp) {
    console.log(resp.data.list);
    list.splice(0);
    let mylist = resp.data.list;
    for(let i=0; i<mylist.length; i++){
      //let vo = list[i];
      list.push(mylist[i]);
    }
  })
}

function fn_one(e){
  //emp.one.ajax
  let e_id = e.target.text;
  axios.post('http://localhost/emp_one.ajax', {
    'e_id' : e_id
  }).then(function (resp) {
    let vo = resp.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;

    console.log(resp.data.vo);
  })
}


function fn_add(){
  //emp_add.ajax
  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
  }
  axios.post('http://localhost/emp_add.ajax', {
    'param' : param
  }).then(function (resp) {
    var cnt = resp.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_mod(){
  //emp_mod.ajax
  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
  }
  axios.post('http://localhost/emp_mod.ajax', {
    'param' : param
  }).then(function (resp) {
    var cnt = resp.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_del(){
  //emp_del.ajax
  var flag = confirm("한번 지워진 데이터는 복구 불가. 그래도 지우실겁니까?")
  if(!flag) {
    return;
  }

  let param = {
    'e_id':document.querySelector("#e_id").value,
  }
  axios.post('http://localhost/emp_del.ajax', {
    'param' : param
  }).then(function (resp) {
    var cnt = resp.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("삭제 도중 문제가 발생했습니다.")
    }
  })
}

onMounted(()=>{
  fn_list();
})

</script>

<template>
  <table border="1">
    <thead>
      <tr>
        <th>사번</th>
        <th>이름</th>
        <th>성별</th>
        <th>주소</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="e in list">
        <td><a @click="fn_one($event)">{{e.e_id}}</a></td>
        <td>{{e.e_name}}</td>
        <td>{{e.gen}}</td>
        <td>{{e.addr}}</td>
      </tr>
    </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="추가" @click="fn_add"/>
        <input type="button" value="수정" @click="fn_mod"/>
        <input type="button" value="삭제" @click="fn_del"/>
      </td>
    </tr>
  </table>



</template>
<style scoped>

</style>