[정글 3일차] - 미니 프로젝트
- 이미지 업로드
flask 이미지 업로드 gridfs를 이용해서 해보려고 했으나 쉽지 않았다.
기존 방식대로 이미지 url을 입력받아서 하는 걸로 했다!
원래대로라면 이미지 서버를 따로 두고 써야 하는 것 같다. 그런데 그게 잘 되지 않음..ㅜ
-> 네이버 지도 크롤링
iframe을 크롤링해줘야 했음!
이때 selenium을 사용했어야 해서 포기.
-> gridFS로 이미지 url을 서버에 올리기
쉽지 않았음 ㅜㅜ
https://taehyeki.tistory.com/159
https://grapestore.tistory.com/25
https://wiznxt.tistory.com/
from dis import code_info
from flask import Flask, render_template, jsonify, request
from pymongo import MongoClient
from bs4 import BeautifulSoup
from bson.json_util import dumps
import requests
from werkzeug.utils import secure_filename
import os
from flask_pymongo import PyMongo
import gridfs
app = Flask(__name__)
client = MongoClient('mongodb://test:[email protected]', 27017) # mongoDB는 27017 포트로 돌아갑니다.
db = client.dbmuckji # 'dbmuckji'라는 이름의 db를 만들거나 사용합니다.
@app.route('/')
def home():
return render_template('index.html')
@app.route('/api/addpage')
def addPage():
return render_template('add.html')
@app.route('/api/addPhoto')
def addPhoto():
return render_template('addPhoto.html')
@app.route('/api/add', methods=['POST'])
def addMenu():
# 1. 클라이언트로부터 데이터를 받기
food_receive = request.form['food_give']
category_receive = request.form['category_give']
shop_name_receive= request.form['shop_name_give']
shop_address_receive= request.form['shop_address_give']
# 3. dbmuckji DB로 보낼 데이터 정리
food = {
'food_name': food_receive,
'food_category': category_receive,
'shop_name': shop_name_receive,
'shop_address': shop_address_receive,
'shop_img': 0,
'like':0, # like를 0으로 세팅
'hate':0, # hate를 0으로 세팅
'food_code':0, # food_code를 0으로 세팅
'shop_url':0
# 'shop_url':url_receive,
}
# 3. mongoDB에 데이터 넣기
# insert_one()은 inserted_id 속성을 지닌 object 리턴
x = db.shop.insert_one(food)
# 4. food_code 업데이트
# insert가 제대로 되었으면 실행
if x:
result = list(db.shop.find().sort('_id',-1).limit(1))
code = result[0]['_id']
food_code = dumps(code)[10:18] # String타입으로 형변환 및 timestamp 부분 자르기
db.shop.update_one({'_id':code},{'$set':{'food_code':food_code}})
return jsonify({'result': 'success'})
else:
return(jsonify({'result': 'insertfail'}))
APP_ROOT = os.path.dirname(os.path.abspath(__file__))
@app.route('/fileUpload', methods = ['GET', 'POST'])
def fileUpload():
f = request.files['file']
f.save('./uploads/' + secure_filename(f.filename))
files = os.listdir("./uploads")
# client.app.config['MONGO_DBNAME']= 'dbmuckji'
# client.app.config['MONGO_URI'] = ' mongodb://test:[email protected]/shop'
# mongo = PyMongo(client.app)
target = os.path.join(APP_ROOT, './uploads') #folder path
f = request.files['file']
filename = secure_filename(f.filename)
destination = "/".join([target, filename])
f.save(destination)
fs = gridfs.GridFS(db)
file_img_id = fs.put(f)
# db.img.insert_one({'img2': file_img_id})
# fs.put(f, filename = filename)
# ## file find ##
# data = client.grid_file.fs.files.find_one({'filename': filename})
# print('data값', data)
# ## file download ##
# my_id = data['_id']
# outputdata = fs.get(my_id).read()
# output = open('./images/'+'back.jpeg', 'wb')
# output.write(outputdata)
return jsonify({'msg':'저장에 성공했습니다.'})
# food = {
# 'food_name': 0,
# 'food_category': '한식',
# 'shop_name': 0,
# 'shop_address': 0,
# 'shop_img': destination,
# 'like':0, # like를 0으로 세팅
# 'hate':0, # hate를 0으로 세팅
# 'food_code':0, # food_code를 0으로 세팅
# 'shop_url':0
# # 'shop_url':url_receive,
# }
# db.shop.insert_one(food) #insert into database mongo db
# return render_template('add.html')
@app.route('/login')
def loginPage():
return render_template('login.html')
# 회원가입 데이터 입력
@app.route('/insert')
def insertPage():
return render_template('login.html')
@app.route('/insert', methods=['POST'])
def insertInfo():
# 1. 클라이언트로부터 데이터를 받기
username_receive = request.form['username_give'] # 클라이언트로부터 username을 받는 부분
id_receive = request.form['id_give'] # 클라이언트로부터 id를 받는 부분
password_receive = request.form['password_give'] # 클라이언트로부터 pw를 받는 부분
userinfo = {
'username' : username_receive,
'id' : id_receive,
'password' : password_receive
}
db.users.insert_one(userinfo)
return jsonify({'result': 'success'})
# 로그인
@app.route('/login', methods=['POST'])
def login():
# 1. 클라이언트로부터 데이터를 받기
id_receive = request.form['id_give'] # 클라이언트로부터 id를 받는 부분
password_receive = request.form['password_give'] # 클라이언트로부터 pw를 받는 부분
find_target = db.users.find_one({'id':id_receive})
# 로그인 할 아이디가 없을 경우
if find_target is None :
return jsonify({'result': 'not'})
target_id = find_target['id']
target_password = find_target['password']
if(id_receive == target_id and password_receive == target_password):
return jsonify({'result': 'success'})
else :
return jsonify({'result': 'fail'})
if __name__ == '__main__':
app.run('0.0.0.0',port=5000,debug=True)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오늘 뭐 먹지?</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Optional JavaScript -->
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- css 파일 분리 -->
<!-- <link rel="stylesheet" type="text/css" href = "../static/style.css"> -->
<link rel="stylesheet" type="text/css" href = "{{url_for('static', filename='style.css')}}" rel="stylesheet">
<!-- js -->
<script src ="../static/addjavascript.js"></script>
<!-- <script src ="{{url_for('static', filename='javascript.js')}}"></script> -->
<!--img 참고-->
<!-- <img src="{{ url_for('static', filename='rome.jpg') }}"/> -->
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">메뉴 추가하기</h1>
<p class="lead">추가하고 싶은 메뉴와 식당을 입력해주세요!</p>
<hr class="my-4">
<div>
<div>
<div class="form-group">
<label for="post-url">추가하고 싶은 메뉴를 입력하세요</label>
<input id="food_name" class="form-control" placeholder="메뉴를 입력하세요" required>
</div>
<div class="form-group">
<label for="post-url">메뉴의 카테고리를 선택하세요</label>
<div class="field is-grouped">
<p class="control">
<input type="checkbox" name="category" id="한식">
한식
</p>
<p class="control">
<input type="checkbox" name="category" id="중식">
중식
</p>
<p class="control">
<input type="checkbox" name="category" id="일식">
일식
</p>
<p class="control">
<input type="checkbox" name="category" id="양식">
양식
</p>
<p class="control">
<input type="checkbox" name="category" id="기타">
기타
</p>
</div>
</div>
<!-- <div class="form-group">
<label for="post-url">식당의 네이버 지도 url을 입력하세요</label>
<input id="shop_url" class="form-control" placeholder="네이버 지도 url을 입력하세요">
</div> -->
<div class="form-group">
<label for="post-url">식당을 추천해주세요</label>
<input id="shop_name" class="form-control" placeholder="식당을 입력하세요" required>
</div>
<div class="form-group">
<label for="post-url">식당 위치를 입력해주세요</label>
<input id="shop_address" class="form-control" placeholder="식당 위치를 입력하세요" required>
</div>
<button type="button" class="button" onclick="addMenu()">다음으로</button>
</div>
</div>
</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>오늘 뭐 먹지?</title>
<!-- Bulma CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
<!-- Optional JavaScript -->
<!-- jQuery and Bootstrap Bundle (includes Popper) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
<!-- css 파일 분리 -->
<!-- <link rel="stylesheet" type="text/css" href = "../static/style.css"> -->
<link rel="stylesheet" type="text/css" href = "{{url_for('static', filename='style.css')}}" rel="stylesheet">
<!-- js -->
<script src ="../static/addjavascript.js"></script>
<!-- <script src ="{{url_for('static', filename='javascript.js')}}"></script> -->
<!--img 참고-->
<!-- <img src="{{ url_for('static', filename='rome.jpg') }}"/> -->
</head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<body>
<div class="wrap">
<div class="jumbotron">
<h1 class="display-4">메뉴 추가하기</h1>
<p class="lead">추가하고 싶은 메뉴와 식당을 입력해주세요!</p>
<hr class="my-4">
<div>
<div>
<div class="form-group">
<p>
<form action="/fileUpload" method="POST" enctype = "multipart/form-data">
<input type = "file" name = "file" id= "shop_img"/>
<input type = "submit" value="이미지 저장"/>
</p>
</div>
<button type="button" class="button" onclick="turnPage()">메뉴 추가하기</button>
</div>
</div>
</div>
</div>
</body>
</html>
-
jinja2 플라스크 강좌
https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mksun8472&logNo=221552606651
Author And Source
이 문제에 관하여([정글 3일차] - 미니 프로젝트), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@letsbebrave/정글-3일차-미니-프로젝트저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)