๋ฐ์ํ
- โstatus_give = oldโ ์ผ ๋๋ง ์๋ฌธ ์์ฑ ์นธ ๋์ฐ๊ธฐ
- input ๋ฐ์ค์ ์ ๋ ฅ๋ ์๋ฌธ์ด ํด๋น ๋จ์ด๋ฅผ ํฌํจํ๊ณ ์๋์ง ํ์ธ
- ์์ผ๋ฉด DB์ examples ์ปฌ๋ ์ ์ ์๋ฌธ ์ ์ฅ.
- ์๋ฌธ๋ค ์ค์์ ํด๋น ๋จ์ด์ ๊ดํ ๊ฒ๋ง ์ฐพ์์์ ๋ณด์ฌ์ฃผ๋ ํจ์๋ฅผ ๋ง๋ค์ด
- ํ์ด์ง ๋ก๋ฉ ์, ์ ์๋ฌธ ์ ์ฅ ์, ๊ธฐ์กด ์๋ฌธ ์ญ์ ์ ํจ์ ์คํ.
- ์๋ฌธ ์ญ์ ์ ์ฌ๋ฌ ์๋ฌธ ์ค ์ด๋ค ๊ฒ์ธ์ง ๊ตฌ๋ถ์ ํ๊ธฐ ์ํด ๊ฐ ์ค์ id ๋ถ์ฌ
- ๋จ์ด ์ญ์ ์ ํด๋น ์๋ฌธ๋ค๋ ๊ฐ์ด ์ง์์ค.
{% if status=="old" %} <!-- status๊ฐ old์ด๋ฉด -->
<div id="examples" class="container"> // <!-- ์๋ฌธ div ํํ -->
<h3 style="text-align: center;margin-bottom:1rem">Write your own sentences!</h3>
<ul id="example-list">
<li id="ex-0">This sentence contains the word 'word'. <a
href="javascript:delete_ex(0)">delete</a></li>
<li id="ex-1">I don't like using the MS Word program. <a
href="javascript:delete_ex(1)">delete</a></li>
</ul>
<div class="d-flex justify-content-between" style="margin-left:20px;">
<input id="new-example" class="form-control form-control-sm" style="margin-right: 0.5rem">
<button class="btn btn-outline-secondary btn-sm" onclick="add_ex()">add</button> <!-- add ๋ฒํผ ํด๋ฆญํ๋ฉด add_ex() ํจ์ ํธ์ถ -->
</div>
</div>
{% endif %}
@app.route('/api/get_examples', methods=['GET'])
def get_exs():
#์๋ฌธ ๊ฐ์ ธ์ค๊ธฐ
word_receive = request.args.get("word_give")
result = list(db.examples.find({"word": word_receive}, {'_id': 0}))
print(word_receive, len(result))
return jsonify({'result': 'success', 'examples': result})
@app.route('/api/save_ex', methods=['POST'])
def save_ex():
#์๋ฌธ ์ ์ฅํ๊ธฐ
word_receive = request.form['word_give'] #word_receive ๋ผ๋ ์ด๋ฆ์ผ๋ก word_give๋ฅผ ๋ฐ์
example_receive = request.form['example_give'] #example_receive ๋ผ๋ ์ด๋ฆ์ผ๋ก example_give๋ฅผ ๋ฐ์
doc = {"word": word_receive, "example": example_receive} #๋ํ๋จผํธ์ ์ ์ฅ
db.examples.insert_one(doc) #๋ํ๋จผํธ๋ฅผ db์ examples ์ปฌ๋ ์
์ ์ ์ฅ
return jsonify({'result': 'success', 'msg': f'example "{example_receive}" saved'})
@app.route('/api/delete_ex', methods=['POST'])
def delete_ex():
#์๋ฌธ ์ญ์ ํ๊ธฐ
word_receive = request.form['word_give'] #word_recive ๋ผ๋ ์ด๋ฆ์ผ๋ก word_give๋ฅผ ๋ฐ์
number_receive = int(request.form["number_give"]) #number_receive ๋ผ๋ ์ด๋ฆ์ผ๋ก number_give๋ฅผ ์ ์ํ์ผ๋ก ๋ฐ์
example = list(db.examples.find({"word": word_receive}))[number_receive]["example"]
#example์ db์ examples ์ปฌ๋ ์
์์ word์ ํด๋นํ๋ ์๋ฌธ ๋ฆฌ์คํธ ์ค number_receive ๋ฒ์งธ example ๋ฌธ์ฅ.
print(word_receive, example)
db.examples.delete_one({"word": word_receive, "example": example})
return jsonify({'result': 'success', 'msg': f'example #{number_receive} of "{word_receive}" deleted'})
function get_examples() {
$("#example-list").empty()
$.ajax({
type: "GET",
url: `/api/get_examples?word_give=${word}`,
data: {},
success: function (response) {
let examples = response["examples"];
for (let i = 0; i < examples.length; i++) {
let example = examples[i]["example"];
console.log(example)
let html_temp = `<li id="ex-${i}">${example} <a
href="javascript:delete_ex(${i})">delete</a></li>`
$("#example-list").append(html_temp)
}
}
});
}
function add_ex() { //๋จ์ด๋ฅผ ์ ์ฅํ๋ add_ex ํจ์
let new_ex = $('#new-example').val(); //new_ex๋ผ๊ณ new-example input ๋ฐ์ค ์ ์ธ
if (!new_ex.toLowerCase().includes(word.toLowerCase())) { //๋ง์ฝ ์๋ฌธ์๋ก ์ด๋ฃจ์ด์ง new_ex๊ฐ์ด ์๋ฌธ์๋ก๋ง ์ด๋ฃจ์ด์ง word ๋จ์ด๋ฅผ ํฌํจํ์ง ์์ผ๋ฉด
alert(`the word '${word}' is not included.`); // ์๋ฌธ์ ๋จ์ด๋ฅผ ํฌํจ์์ผ๋ฌ๋ผ๋ alret ๋์ฐ๊ธฐ
return; //๋ฆฌํดํ์ฌ ๋ฉ์ถ๊ธฐ
}
console.log(new_ex)
$.ajax({
type: "POST",
url: `/api/save_ex`,
data: {
word_give: word,
example_give: new_ex
}, // ๋จ์ด์ ์๋ฌธ ์ฃผ๊ธฐ
success: function (response) { //์ฑ๊ณตํ๋ฉด
get_examples(); //get_examples ํจ์๋ฅผ ํธ์ถํด์ ์๋ฌธ์ ๊ฐ์ ธ์ค๊ณ
$('#new-example').val(""); //new-example input ๋ฐ์ค๋ ๋น์์ค.
}
});
}
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()
}
});
}
//status๊ฐ old์ผ ๊ฒฝ์ฐ์๋ง ์๋ฌธ๋ค์ ๊ฐ์ ธ์์ ๋ณด์ฌ์ค
$(document).ready(function () {
{% if status=="old" %}
get_examples()
{% endif %}
๋ฐ์ํ
'๐ฉโ๐ป Learn programming' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[โก] ์์ ๋น ์นดํ Daily ๋ฌธ์ ํ์ด (2022๋ 1ํ ์์๋ฌธ์ ) (0) | 2022.05.05 |
---|---|
[๋๋ง์ ๋จ์ด์ฅ] 13. ์์ฑ ์ฝ๋ (0) | 2022.05.04 |
[๋๋ง์ ๋จ์ด์ฅ] 11. ์์ฑ๋ ๋์ด๊ธฐ - ogํ๊ทธ, favicon (0) | 2022.05.04 |
[๋๋ง์ ๋จ์ด์ฅ] 10. ๋ชฉ๋กํ์ด์ง - ์ฌ์ ์ ์๋ ๋จ์ด์ผ ๋ (0) | 2022.05.04 |
[๋๋ง์ ๋จ์ด์ฅ] 9. ๋ชฉ๋กํ์ด์ง - ๊ฒ์ ๊ธฐ๋ฅ ๋ง๋ค๊ธฐ (0) | 2022.05.04 |