15일 프로젝트(feat. ajax)
정보공유 페이지 DB 로컬 테스트 완료🥳
1. 웹사이트 구동 비디오
https://www.notion.so/8-21-f5fdf50766c64b128b806cd24a9b4c54
2. 기능
1) 후기작성 버튼 클릭시 작성 form open / 재클릭시 form close
2) form의 후기 등록버튼 클릭시 DB로 데이터전송 테스트 완료
3) 후기 p태그 2줄만 보이게 작업 + 끝에 ...(줄임말)형식으로 처리
4) 전체글 보기 클릭 시 전문보기 가능 / 닫기 버튼 클릭 시 2줄로 줄어듬
3. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>전국유기견보호센터 정보검색</title>
<meta property="og:title" content="전국유기견보호센터 정보검색"/>
<meta property="og:description" content="센터정보를 손쉽게 찾고, 후기까지"/>
<meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}"/>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q"
crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl"
crossorigin="anonymous"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<style>
.inner {
width: 1000px;
margin: 0 auto;
}
.nav {
display: flex;
justify-content: flex-end;
margin-top: 30px;
margin-right: 200px;
}
.nav .item {
margin-right: 8px;
}
#form {
display: none;
}
.submit {
margin-top: 120px;
}
.review {
margin-top: 10px;
}
.form {
margin: 30px auto 50px;
width: 600px;
}
.description {
/*white-space: nowrap;*/
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2; /* 라인수 */
-webkit-box-orient: vertical;
word-wrap: break-word;
line-height: 1.2em;
height: 2.4em;
}
#description {
}
.review-title {
display: flex;
align-items: baseline;
}
.card-title {
margin-right: 8px;
}
</style>
<script>
$(document).ready(function () {
showList();
});
function openClose() {
if ($("#form").css("display") == "block") {
$("#form").hide();
} else {
$("#form").show();
}
}
function more() {
if ($(".description").is(':visible') == true) {
$("#description").removeClass('description')
$("#more_openClose").text("닫기");
} else {
$("#description").addClass('description');
$("#more_openClose").text("전체글 보기");
}
}
function makeList() {
let nickname = $('#nickname').val()
let title = $('#title').val()
let comment = $('#comment').val()
$.ajax({
type: "POST",
url: "/review",
data: {nickname_give: nickname, title_give: title, comment_give: comment},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
function showList() {
$.ajax({
type: "GET",
url: "/review",
data: {},
success: function (response) {
let reviews = response['all_reviews']
for (let i = 0; i < reviews.length; i++) {
let nickname = reviews[i]['nickname']
let title = reviews[i]['title']
let comment = reviews[i]['comment']
let temp_html = `<div class="card review" style="max-width: 1200px;">
<div class="card-body">
<div class="review-title">
<h5 class="card-title">${title}</h5>
<h6 class="card-subtitle mb-2 text-muted name">by ${nickname}</h6>
</div>
<p id="description" class="card-text description">${comment}</p>
<a href="#" id="more_openClose" onclick="more()" class="card-link more">전체글 보기</a>
</div>
</div>
`
$('#list').append(temp_html)
}
}
})
}
</script>
</head>
<body>
<div class="nav">
<button type="button" class="btn item btn-outline-secondary">유기견 보호센터 찾기</button>
<button type="button" class="btn item btn-outline-secondary">유기견 공고 조회</button>
<button type="button" class="btn item btn-outline-secondary">블로그</button>
<button type="button" class="btn item btn-outline-secondary">정보 공유</button>
</div>
<div class="inner">
<button type="button" onclick="openClose()" class="btn submit btn-primary">후기작성</button>
<div id="form" class="form">
<div class="mb-3">
<label class="form-label">작성자</label>
<input id="nickname" type="email" class="form-control"
placeholder="별칭을 입력하세요.">
</div>
<div class="mb-3">
<label class="form-label">제목</label>
<input id="title" type="title" class="form-control"
placeholder="30자 이내로 입력하세요.">
</div>
<div class="mb-3">
<label class="form-label">review</label>
<textarea id="comment" class="form-control" rows="3"></textarea>
</div>
<button onclick="makeList()" type="button" class="btn upload btn-primary">등록</button>
</div>
<div id="list">
<!-- 후기추가될부분-->
</div>
</div>
</body>
</html>4. app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
import requests
from bs4 import BeautifulSoup
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbpearl
## HTML을 주는 부분
@app.route('/')
def home():
return render_template('index.html')
@app.route('/review', methods=['GET'])
def listing():
reviews = list(db.reviews.find({}, {'_id': False}))
return jsonify({'all_reviews': reviews})
## API 역할을 하는 부분
@app.route('/review', methods=['POST'])
def saving():
nickname_receive = request.form['nickname_give']
title_receive = request.form['title_give']
comment_receive = request.form['comment_give']
doc = {
'nickname': nickname_receive,
'title': title_receive,
'comment': comment_receive
}
db.reviews.insert_one(doc)
return jsonify({'msg':'후기가 등록완료되었습니다.'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)Author And Source
이 문제에 관하여(15일 프로젝트(feat. ajax)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@lovvepearl/15일프로젝트2저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
