첫 번째 팀 mini-Project (3)

4. 코드 작성 (언어 : Python, DB : MongoDB)💻

4.2 식물 검색 페이지 (식물 검색 - 이름,사진 / 설명)🔎

• client에서 요청
• 서버에서 처리
• client에서 보여주기

1. client에서 요청하기📢

검색창에 들어가면 우선 검색 결과가 나타나는 부분을 비워준다.
검색 input에 입력되는 값을 받아오고

function search_plant() {
    $('#plant-list-wrap').empty()
    let keyword = $('#input-word').val()

데이터를 받아오는 것이기 때문에 Get으로 요청하고, input에 입력됐던 값을 서버에 보내준다.

    $.ajax({
        type: "GET",
        url: '/searchplant',
        data: {keyword_give : keyword},
                    

---

2. 서버에서 받기 📥

client로부터 받은 keyword를 이용하여 크롤링을 시작한다.

• 식물 이름과 이미지 크롤링하기

@app.route('/searchplant', methods=['get'])
def searching_main():
    searchlist = []
    keyword = request.args.get('keyword_give')    
    headers = {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
    
    // 1. 아래 링크에서 검색어가 입력되는 부분에 keyword를 넣어 검색을 시작한다.(requests 패키지 이용)
    data_main = requests.get("https://www.fuleaf.com/search?term=" + keyword, headers=headers)
    
    // 2. bs4 패키지를 이용하여 크롤링하기 알맞은 형태로 변경한다.
    soup_main = BeautifulSoup(data_main.text, 'html.parser')
    
    // 3. 검색 결과가 여러 개 나올 수 있기 때문에 select를 이용한다.
    plants_main = soup_main.select('#plants_list > ul > div')
    
    // 4. select는 리스트를 결과물로 내놓기 때문에 반복문을 돌린다.
    for plant in plants_main:
        imgs = plant.select_one('a > div.plant__image')
        
        // 5. split을 이용해서 원하는 이미지 url을 뽑아내고, copy selector로 식물 이름도 솎아낸다.
        img_plants = str(imgs).split('url(')[1].split(');')[0]
        title_plants = plant.select_one('div.plant__title-flex > h3').text

• 식물 설명 크롤링하기

        // 1. 사이트 내에서 각 식물이 갖는 고유번호를 뽑아낸다.
        code = str(plant).split('count/')[1].split('"><div')[0]
        
        // 2. 식물 설명은 다른 링크에 있기 때문에 requests와 bs4를 다시 이용해준다.
        data_desc = requests.get(f"https://www.fuleaf.com/plants/detail/{code}", headers=headers)
        soup_desc = BeautifulSoup(data_desc.text, 'html.parser')
        
        // 3. 식물 설명도 split을 통해 원하는 부분만 뽑아낸 후 크롤링을 마무리한다.
        plants_descs = str(soup_desc).split('intro">')[1].split('</h3>')[0]

• client에 데이터 보내기

        // client에 딕셔너리 형태로 크롤링 완료된 데이터들을 보내준다.
        dict = {'img_plant': img_plants, 'title_plant': title_plants, 'plants_desc': plants_descs}        
        searchlist.append(dict)
    return jsonify({'result' : searchlist})

---

3. client에서 보여주기 📖

서버로부터 응답을 받으면 넘어 온 데이터를 검색 페이지에 붙여준다.

        success: function (response) {
            let result = response['result']
            for (let i = 0; i <result.length; i++) {
                let title = result[i]['title_plant']
                let image = result[i]['img_plant']
                let desc = result[i]['plants_desc']

                let temp_html = `<div class="search_table">
                                    <div style="border-right: solid lightgray"><img src="${image}"></div>
                                    <div>
                                        <div class="search_name">${title}</div>
                                        <div class="search_review">${desc}</div>
                                    </div>
                                </div>`
                $('#plant-list-wrap').append(temp_html)
            }                        
        }
    })
}