메인 페이지
단어 검색
단어가 단어장에 이미 있는 단어인지 검색 → 있으면 하이라이트, 없으면 상세 페이지로 이동
단어장에 있는 단어를 클릭했을 때 상세 페이지로 이동
상세 페이지
가장 특이했던 부분은 예문을 삭제하는 것이었는데, 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} <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'})
그 밖에 깨알같은 문법들이 있다.
if r.status_code != 200:
return redirect(url_for("main", msg = "단어가 이상해요 ㅜㅜ")) #
@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}`
...
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) -->
scrollIntoView(), toLowerCase()...