[정글 3일차] - 미니 프로젝트

69311 단어 junglejungle
  1. 이미지 업로드

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>
  1. 선택자에 변수 넣기
    https://github.com/sooojungee/TIL/blob/master/jQuery/180627.%5BjQuery%5D%20%EC%84%A0%ED%83%9D%EC%9E%90%EC%97%90%20%EB%B3%80%EC%88%98%20%EB%84%A3%EA%B8%B0.md

  2. jinja2 플라스크 강좌
    https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=mksun8472&logNo=221552606651

좋은 웹페이지 즐겨찾기