CSS grid 4칸으로 설정 후 메인페이지 버튼 크기 수정
버튼에 hover 기능 추가
.main-page-btn {
grid-column: 1/2;
grid-row: 2/3;
height: 100px;
margin: auto 0px 0px 0px;
border-radius: 20px;
font-size: larger;
background-color: transparent;
border-width: 2px;
}
.main-page-btn:hover {
color: white;
border: none;
background-color: gray;
transition: 0.3s;
}
CSS 배경 동그라미로 설정 하는 법
border-radius: 70%;
fetch 이용해서 pymongo로 post
<script>
function save_info() {
let myname = $('#myname').val();
let mbti = $('#mbti').val();
let hobby = $('#hobby').val();
let blog = $('#blog').val();
let comment = $('#comment').val();
let formData = new FormData();
formData.append('myname_give', myname);
formData.append('mbti_give', mbti);
formData.append('hobby_give', hobby);
formData.append('blog_give', blog);
formData.append('comment_give', comment);
fetch('/bucket', { method: "POST", body: formData, }).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload();
});
}
<python>
@app.route("/bucket", methods=["POST"])
def bucket_post():
myname_receive = request.form['myname_give']
mbti_receive = request.form['mbti_give']
hobby_receive = request.form['hobby_give']
blog_receive = request.form['blog_give']
comment_receive = request.form['comment_give']
doc = { 'myname': myname_receive,
'mbti':mbti_receive,
'hobby':hobby_receive,
'blog':blog_receive,
'comment':comment_receive}
db.info.insert_one(doc)
return jsonify({'msg': '저장완료!'})
Post 성공!
fetch 이용해서 get 실행
<script>
function show_info() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result'];
console.log(rows)
alert(data["msg"]);
})
}
<python>
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_infos = list(db.infos.find({},{'_id':False}))
return jsonify({'msg': 'GET 연결 완료!'})
콘솔에 undefined로 확인됨
GET 연결 완료! 메시지는 확인됨
Git 커밋하는 법
git branch : branch 생성
git checkout branch이름 : branch 이동
git add
git commit -m "메모"
: wq 저장 후 닫기
내일 목표
- get 기능 완성하기
