selectList
my_flask.py
jsonify(파라미터=파라미터) => axios 보낼 응답값
from flask import Flask,request,redirect,jsonify
from flask.templating import render_template
from day12.daoemp import DaoEmp
app = Flask(__name__)
@app.route('/emp_list', methods=['POST'])
def emp_list():
de = DaoEmp()
list = de.selectList()
return jsonify(list = list)
if __name__ == '__main__':
app.run(debug=True, port=80, host='0.0.0.0')
emp.html
res=> emp_list()에서 list 값 받음
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_list(){
axios.post("/emp_list").then((res) => {
var obj_tbody = document.getElementById("my_tbody");
var list = res.data.list;
console.log(list);
var txt = "";
for(var i=0;i<list.length;i++){
var e_id= list[i].e_id;
var e_name= list[i].e_name;
var gen= list[i].gen;
var addr= list[i].addr;
txt += `
<tr>
<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
<td>${e_name}</td>
<td>${gen}</td>
<td>${addr}</td>
</tr>
`;
}
obj_tbody.innerHTML = txt;
});
}
</script>
</head>
<body onload="fn_list()"> <!-- body 요소 준비 다 되면 fn_list() 바로 실행 -->
EMP<br>
<table border="1px">
<thead>
<tr>
<td>사번</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</thead>
<tbody id="my_tbody">
<tr>
<td colspan="4">
검색된 데이터가 없습니다.
</td>
</tr>
</tbody>
</table>
<table border="1">
<tr>
<td>사번</td>
<td>
<input type="text" id="e_id"/>
</td>
<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="추가" onclick="fn_add()"/>
<input type="button" value="수정"onclick="fn_mod()"/>
<input type="button" value="삭제" onclick="fn_del()"/>
</td>
</tr>
</table>
</body>
</html>
console.log(list);
selectOne
my_flask.py
request.get_json() => axios 보낸 param 값
jsonify(파라미터=파라미터) => axios 보낼 응답값
from flask import Flask,request,redirect,jsonify
from flask.templating import render_template
from day12.daoemp import DaoEmp
app = Flask(__name__)
@app.route('/fn_one', methods=['POST'])
def fn_one():
data=request.get_json() #axios param 값 호출
e_id = data['e_id']
de = DaoEmp()
vo = de.select(e_id)
return jsonify(vo=vo) # axios 값 보냄
if __name__ == '__main__':
app.run(debug=True, port=80, host='0.0.0.0')
emp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_one(e_id){ //fn_list()에서 <a href="javascript:fn_one('${e_id}')"> 지정
console.log("e_id",e_id);
var param={
'e_id':e_id
}
// axios.post("url",my_flask 보낼 파라미터).then((my_flask받은 데이터)))
axios.post("/fn_one",param).then((res) => {
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var vo = res.data.vo;
console.log(vo);
//vo 값을 obj_e_id 대입
obj_e_id.value=vo.e_id;
obj_e_name.value=vo.e_name;
obj_gen.value=vo.gen;
obj_addr.value=vo.addr;
})
}
</script>
</head>
<body onload="fn_list()"> <!-- body 요소 준비 다 되면 fn_list() 바로 실행 -->
EMP<br>
<table border="1px">
<thead>
<tr>
<td>사번</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</thead>
<tbody id="my_tbody">
<tr>
<td colspan="4">
검색된 데이터가 없습니다.
</td>
</tr>
</tbody>
</table>
<table border="1">
<tr>
<td>사번</td>
<td>
<input type="text" id="e_id"/>
</td>
<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="추가" onclick="fn_add()"/>
<input type="button" value="수정"onclick="fn_mod()"/>
<input type="button" value="삭제" onclick="fn_del()"/>
</td>
</tr>
</table>
</body>
</html>
console.log("e_id",e_id);
console.log(vo)
Insert
my_flask.py
from flask import Flask,request,redirect,jsonify
from flask.templating import render_template
from day12.daoemp import DaoEmp
app = Flask(__name__)
@app.route('/emp_add', methods=['POST'])
def emp_add():
data=request.get_json() #axios param값 호출
e_id=data['e_id']
e_name=data['e_name']
gen=data['gen']
addr=data['addr']
print(e_id,e_name,gen,addr)
de = DaoEmp()
cnt= de.insert(e_id,e_name , gen, addr)
return jsonify(cnt=cnt) axios 응답값 보냄
if __name__ == '__main__':
app.run(debug=True, port=80, host='0.0.0.0')
print(e_id,e_name,gen,addr)
emp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_add(){
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var param={
'e_id':obj_e_id.value,
'e_name':obj_e_name.value,
'gen':obj_gen.value,
'addr':obj_addr.value
}
console.log(param)
// axios.post("url",my_flask 보낼 파라미터).then((my_flask받은 데이터)))
axios.post("/emp_add",param).then((res) => {
console.log(res.data.cnt);
var cnt = res.data.cnt
if(cnt==1){
alert("정상적으로 추가되었습니다.");
fn_list(); //list 새로고침
obj_e_id.value="";
obj_e_name.value="";
obj_gen.value="";
obj_addr.value="";
}else{
alert("추가도중 문제가 생겼습니다.")
}
})
}
console.log(param)
console.log(res.data.cnt);
Update
my_flask.py
from flask import Flask,request,redirect,jsonify
from flask.templating import render_template
from day12.daoemp import DaoEmp
app = Flask(__name__)
@app.route('/emp_mod', methods=['POST'])
def emp_mod():
data=request.get_json() #axios param값 호출
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)
if __name__ == '__main__':
app.run(debug=True, port=80, host='0.0.0.0')
emp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_mod(){
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var param={
'e_id':obj_e_id.value,
'e_name':obj_e_name.value,
'gen':obj_gen.value,
'addr':obj_addr.value
}
console.log(param)
axios.post("/emp_mod",param).then((res) => {
console.log(res.data.cnt);
var cnt = res.data.cnt
if(cnt==1){
alert("정상적으로 수정되었습니다.");
fn_list(); //list 새로고침
//값 비우기
obj_e_id.value="";
obj_e_name.value="";
obj_gen.value="";
obj_addr.value="";
}else{
alert("수정도중 문제가 생겼습니다.")
}
})
}
</script>
console.log(param)
console.log(res.data.cnt);
Delete
my_flask.py
from flask import Flask,request,redirect,jsonify
from flask.templating import render_template
from day12.daoemp import DaoEmp
app = Flask(__name__)
@app.route('/emp_del', methods=['POST'])
def emp_del():
data=request.get_json() #axios param값 호출
e_id=data['e_id']
de = DaoEmp()
cnt= de.delete(e_id)
return jsonify(cnt=cnt)
if __name__ == '__main__':
app.run(debug=True, port=80, host='0.0.0.0')
emp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_del(){
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var param={
'e_id':obj_e_id.value,
}
console.log(param)
axios.post("/emp_del",param).then((res) => {
console.log(res.data.cnt);
var cnt = res.data.cnt
if(cnt==1){
alert("정상적으로 삭제되었습니다.");
fn_list(); //list 새로고침
//값 비우기
obj_e_id.value="";
obj_e_name.value="";
obj_gen.value="";
obj_addr.value="";
}else{
alert("삭제도중 문제가 생겼습니다.")
}
})
}
</script>
console.log(param)
console.log(res.data.cnt);
원본
daoemp.py
import pymysql
class DaoEmp:
def __init__(self):
self.con = pymysql.connect(host='localhost', user='root', port=3305
,password='python', db='python', charset='utf8')
self.cur = self.con.cursor(pymysql.cursors.DictCursor)
def selectList(self):
sql = f'''
SELECT
e_id,
e_name,
gen,
addr
FROM emp
'''
self.cur.execute(sql)
list = self.cur.fetchall()
return list
def select(self,e_id):
sql = f'''
SELECT
e_id,
e_name,
gen,
addr
FROM emp
where
e_id= '{e_id}'
'''
self.cur.execute(sql)
vo = self.cur.fetchone()
return vo
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}')
'''
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}'
'''
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}'
'''
cnt = self.cur.execute(sql)
self.con.commit()
return cnt
def __del__(self):
self.cur.close()
self.con.close()
if __name__ == '__main__':
de= DaoEmp()
# vo = de.select(1)
# cnt = de.delete(3)
# print("cnt",cnt)
# print("vo",vo)
my_flask.py
from flask import Flask,request,redirect,jsonify
from flask.templating import render_template
from day12.daoemp import DaoEmp
app = Flask(__name__)
@app.route('/')
def main():
return redirect("static/emp.html")
@app.route('/emp_list', methods=['POST'])
def emp_list():
de = DaoEmp()
list = de.selectList()
return jsonify(list = list)
@app.route('/fn_one', methods=['POST'])
def fn_one():
data=request.get_json() #axios param값 호출
e_id = data['e_id']
de = DaoEmp()
vo = de.select(e_id)
return jsonify(vo=vo)
@app.route('/emp_add', methods=['POST'])
def emp_add():
data=request.get_json() #axios param값 호출
e_id=data['e_id']
e_name=data['e_name']
gen=data['gen']
addr=data['addr']
print(e_id,e_name,gen,addr)
de = DaoEmp()
cnt= de.insert(e_id,e_name , gen, addr)
return jsonify(cnt=cnt)
@app.route('/emp_mod', methods=['POST'])
def emp_mod():
data=request.get_json() #axios param값 호출
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', methods=['POST'])
def emp_del():
data=request.get_json() #axios param값 호출
e_id=data['e_id']
de = DaoEmp()
cnt= de.delete(e_id)
return jsonify(cnt=cnt)
if __name__ == '__main__':
app.run(debug=True, port=80, host='0.0.0.0')
emp.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script type="text/javascript">
function fn_list(){
axios.post("/emp_list").then((res) => {
var obj_tbody = document.getElementById("my_tbody");
var list = res.data.list;
console.log(list);
var txt = "";
for(var i=0;i<list.length;i++){
var e_id= list[i].e_id;
var e_name= list[i].e_name;
var gen= list[i].gen;
var addr= list[i].addr;
txt += `
<tr>
<td><a href="javascript:fn_one('${e_id}')">${e_id}</a></td>
<td>${e_name}</td>
<td>${gen}</td>
<td>${addr}</td>
</tr>
`;
}
obj_tbody.innerHTML = txt;
});
}
function fn_one(e_id){
console.log("e_id",e_id);
var param={
'e_id':e_id
}
// axios.post("url",my_flask 보낼 파라미터).then((my_flask받은 데이터)))
axios.post("/fn_one",param).then((res) => {
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var vo = res.data.vo;
console.log(vo);
obj_e_id.value=vo.e_id;
obj_e_name.value=vo.e_name;
obj_gen.value=vo.gen;
obj_addr.value=vo.addr;
})
}
function fn_add(){
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var param={
'e_id':obj_e_id.value,
'e_name':obj_e_name.value,
'gen':obj_gen.value,
'addr':obj_addr.value
}
console.log(param)
// axios.post("url",my_flask 보낼 파라미터).then((my_flask받은 데이터)))
axios.post("/emp_add",param).then((res) => {
console.log(res.data.cnt);
var cnt = res.data.cnt
if(cnt==1){
alert("정상적으로 추가되었습니다.");
fn_list(); //list 새로고침
obj_e_id.value="";
obj_e_name.value="";
obj_gen.value="";
obj_addr.value="";
}else{
alert("추가도중 문제가 생겼습니다.")
}
})
}
function fn_mod(){
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var param={
'e_id':obj_e_id.value,
'e_name':obj_e_name.value,
'gen':obj_gen.value,
'addr':obj_addr.value
}
console.log(param)
axios.post("/emp_mod",param).then((res) => {
console.log(res.data.cnt);
var cnt = res.data.cnt
if(cnt==1){
alert("정상적으로 수정되었습니다.");
fn_list(); //list 새로고침
obj_e_id.value="";
obj_e_name.value="";
obj_gen.value="";
obj_addr.value="";
}else{
alert("수정도중 문제가 생겼습니다.")
}
})
}
function fn_del(){
var obj_e_id= document.getElementById("e_id");
var obj_e_name= document.getElementById("e_name");
var obj_gen= document.getElementById("gen");
var obj_addr= document.getElementById("addr");
var param={
'e_id':obj_e_id.value,
}
console.log(param)
axios.post("/emp_del",param).then((res) => {
console.log(res.data.cnt);
var cnt = res.data.cnt
if(cnt==1){
alert("정상적으로 삭제되었습니다.");
fn_list(); //list 새로고침
obj_e_id.value="";
obj_e_name.value="";
obj_gen.value="";
obj_addr.value="";
}else{
alert("삭제도중 문제가 생겼습니다.")
}
})
}
</script>
</head>
<body onload="fn_list()"> <!-- body 요소 준비 다 되면 fn_list() 바로 실행 -->
EMP<br>
<table border="1px">
<thead>
<tr>
<td>사번</td>
<td>이름</td>
<td>성별</td>
<td>주소</td>
</tr>
</thead>
<tbody id="my_tbody">
<tr>
<td colspan="4">
검색된 데이터가 없습니다.
</td>
</tr>
</tbody>
</table>
<table border="1">
<tr>
<td>사번</td>
<td>
<input type="text" id="e_id"/>
</td>
<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="추가" onclick="fn_add()"/>
<input type="button" value="수정"onclick="fn_mod()"/>
<input type="button" value="삭제" onclick="fn_del()"/>
</td>
</tr>
</table>
</body>
</html>
