웹 개발 main course 단어장 만들기

박경준·2021년 6월 7일
0

main course - 웹 개발

목록 보기
1/4

단어장을 만들어보았다...!

  • 메인 페이지

    1. 단어 검색

      단어가 단어장에 이미 있는 단어인지 검색 → 있으면 하이라이트, 없으면 상세 페이지로 이동

    2. 단어장에 있는 단어를 클릭했을 때 상세 페이지로 이동

  • 상세 페이지

    1. 단어 저장 또는 삭제
      • 단어가 이미 존재하면 삭제 버튼, 아니면 저장 버튼 노출
      • 저장 버튼을 누르면 DB에 저장하고 삭제 버튼으로 바뀜
      • 삭제 버튼을 누르면 DB에서 삭제하고 메인 페이지로 이동
    2. 예문 저장과 삭제
      • 저장된 단어의 경우 예문 칸이 보여지게 하기
      • 예문을 저장하면 목록 맨 아래에 추가
      • 예문에 단어가 포함되지 않으면 얼럿 띄우기
      • 예문을 선택해서 삭제할 수 있음

가장 특이했던 부분은 예문을 삭제하는 것이었는데, DB에서 word로 검색 후 몇번째 데이터인지를 알아내서 row를 찾은 후 해당 row를 삭제해주면 된다.

detail.html

function delete_ex(i) {
  console.log("deleting", i)
  $.ajax({
    type: "POST",
    url: `/api/delete_ex`,
    data: {
      word_give: word,
      number_give: i
    },
    success: function (response) {
      get_examples()
    }
  });
}
<li id="ex-${i}">${example}&nbsp;&nbsp;&nbsp;<a href="" onclick="delete_ex(${i})">delete</a></li>

app.py

@app.route('/api/delete_ex', methods=['POST'])
def delete_ex():
    word_receive = request.form['word_give']
    number_receive = int(request.form["number_give"])
    target_example = list(db.examples.find({"word": word_receive}))[number_receive]
    db.examples.delete_one(target_example)
    return jsonify({'result': 'success', 'msg': f'example #{number_receive} of "{word_receive}" deleted'})

그 밖에 깨알같은 문법들이 있다.

  • main() 함수를 호출함 -> main의 template인 index.html로 이동, 이동하면서 msg를 파라미터로 넘겨줌
if r.status_code != 200:
  return redirect(url_for("main", msg = "단어가 이상해요 ㅜㅜ")) # 

  • GET 요청일때 파라미터로 값을 받는 예시
@app.route('/api/get_examples', methods=['GET'])
def get_exs():
    word_receive = request.args.get("word_give")
function get_examples() {
  $("#example-list").empty()
  $.ajax({
    type: "GET",
    url: `/api/get_examples?word_give=${word}`
    ...

  • jinja 문법
let words = {{ words|tojson }}; // 딕셔너리를 json 타입으로 바꿔줘야 html escape가 안생김
@app.route('/')
def main():
  ...
  return render_template("index.html", words = words, msg = msg)
  # render_template 안에 변수로 사용할 값들을 전달해주면 front에서 사용할 수 있음.
{{ definition.example.encode('ascii', 'ignore').decode('utf-8')|safe }}
<!-- 예문에서 깨지는 특수문자를 없애고(encode, decode), html tag escape 안시키기(|safe) -->
profile
빠굥

0개의 댓글