크롤링 말고 다른 방법
계속 부트스트랩이랑 css, 자바스크립트만 쓰다가 파이썬을 쓰려니까
처음처럼 막막한 기분이 들었다
나무위키 크롤링도 안되고, 코드 입력 창에 직접 내용을 하나하나 입력해보다가 잘 안되서
이거 api 찾기 쉬운 다른 주제를 찾아야하나
너무 하기 싫었는데 다른 방법이 생각났다
셔츠를 빨다가 생각난건데 그냥 DB 입력하는 페이지를 따로 만들어서 DB를 쌓고
그 DB로 웹페이지를 생성해서 쓰면 되지 않을까라는 생각
(될지 안 될지는 모르겠다 일단 해보고 있는데)
DB 입력 페이지 생성
개별 캐릭터 페이지를 보고 입력해야 하는 정보를 추려서 입력 페이지를 만들었다.
플라스크를 쓰는데
@app.route('/')
def home():
return render_template('main.html')이 부분을 잘 입력했는데도 계속 오류가 떠서 왜 그런가 다시 찬찬히 봤는데
폴더 이름이 templastes 로 되어있다... 하...
templates로 바꿨더니 페이지가 잘 표시되고 DB 입력도 잘 된다.
다음은 서버에 DB를 쌓고 DB 정보를 바탕으로 개별 캐릭터 페이지, 메인 페이지의 캐릭터 카드를 자동으로 생성하는 것이다.
그 후엔 개별 캐릭터 페이지랑 메인 페이지 각각을 이어붙이면 주 기능은 완성이다.
코드
app.py
from flask import Flask, render_template, jsonify, request
app = Flask(__name__)
from pymongo import MongoClient
client = MongoClient('localhost', 27017)
db = client.dbsparta
@app.route('/')
def home():
return render_template('main.html')
@app.route('/input')
def input():
return render_template('input.html')
## API 역할을 하는 부분
# 1. 클라이언트가 준 정보 가져오기.
# 2. DB에 정보 삽입하기
# 3. 성공 여부 & 성공 메시지 반환하기
@app.route('/posting', methods=['POST'])
def posting_character():
# 클라이언트가 준 이름 가져오기
name_receive = request.form['name_give']
# 클라이언트가 준 소속 가져오기
group_receive = request.form['group_give']
# 클라이언트가 준 사진url 가져오기
portrait_receive = request.form['portrait_give']
# 클라이언트가 준 간략 소개 가져오기
short_desc_receive = request.form['short_desc_give']
# 클라이언트가 준 상세 소개 가져오기
long_desc_receive = request.form['long_desc_give']
# DB에 삽입할 post 만들기
doc = {
'name': name_receive,
'group': group_receive,
'portrait': portrait_receive,
'short_desc': short_desc_receive,
'long_desc': long_desc_receive
}
# posting에 post 저장하기
db.characterpost.insert_one(doc)
# 성공 여부 & 성공 메시지 반환
# ** 빈칸 있으면 알림 표시하는 기능 추가해야함
return jsonify({'msg': '캐릭터 정보가 저장 되었습니다.'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)input.html(캐릭터 정보 입력 저장 페이지)
<!DOCTYPE html>
<html lang="ko">
<head>
<title>캐릭터 정보 입력 페이지</title>
<!-- 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">
<!-- 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 type="text/javascript">
// $(document).ready(function () {
// $("#reviews-box").html("");
// showReview();
// });
function postCharacter() {
//화면에 입력된 이름, 소속, 사진url, 간략/상세 소개글을 가져옴
let name = $("#name").val();
let group = $("#group").val();
let portrait = $("#portrait").val();
let short_desc = $("#short_desc").val();
let long_desc = $("#long_desc").val();
// POST /posting 에 저장을 요청
$.ajax({
type: "POST",
url: "/posting",
data: {
name_give: name,
group_give: group,
portrait_give: portrait,
short_desc_give: short_desc,
long_desc_give: long_desc
},
success: function (response) {
alert(response["msg"]);
window.location.reload();
}
})
}
// function showReview() {
// $.ajax({
// type: "GET",
// url: "/review?sample_give=샘플데이터",
// data: {},
// success: function (response) {
// alert(response["msg"]);
// }
// })
// }
</script>
</head>
<body>
<h1>캐릭터 정보 입력 페이지</h1>
<h4>이곳에 정보를 입력하고 저장하면 캐릭터 페이지가 생성됩니다.</h4>
<button id="save" onclick="postCharacter()">저장하기</button>
<p></p>
<!-- 사진, 간략 소개, 상세 소개-->
<!-- API: 사진, 유튜브-->
<div>
<span>캐릭터 이름:</span>
<input id="name" style="width: 100px">
<span>캐릭터 소속:</span>
<input id="group" style="width: 100px">
</div>
<div>
소개 사진URL: <input id="portrait" style="width: 500px">
</div>
<p>간략 소개글</p>
<textarea id="short_desc" style="width: 700px; height: 200px"></textarea>
<p>상세 소개글</p>
<textarea id="long_desc" style="width: 700px; height: 500px"></textarea>
</body>
</html>
시작은 창대하나 끝은 미약하리라