Now word order can change dynamically.

app/static/js/word_operation.js

@@ -12,6 +12,19 @@ function familiar(theWord) {
             } else {
                 $("#freq_" + theWord).text(new_freq);
             }
+            
+            // 逐个寻找对应的词汇，词频减一，然后重新排序并渲染
+            for (let index = 0; index < wordFrequency.length; index++) {
+                const element = wordFrequency[index];
+                if (element.word == word) {
+                    wordFrequency[index].freq--;
+                    if (wordFrequency[index].freq == 0) {
+                        removeWord(word);
+                    }
+                }
+            }
+            sortWordFrequency();
+            renderWords();
         }
     });
 }
@@ -26,6 +39,16 @@ function unfamiliar(theWord) {
         success:function(response){
             let new_freq = parseInt(freq) + 1;
             $("#freq_" + theWord).text(new_freq);
+            
+            // 逐个寻找对应的词汇，词频加一，然后重新排序并渲染
+            for (let index = 0; index < wordFrequency.length; index++) {
+                const element = wordFrequency[index];
+                if (element.word == word) {
+                    wordFrequency[index].freq++;
+                }
+            }
+            sortWordFrequency();
+            renderWords();
         }
     });
 }
@@ -38,6 +61,98 @@ function delete_word(theWord) {
         url:"/" + username + "/" + word + "/del",
         success:function(response){
             $("#p_" + theWord).remove();
+
+            // 删除对应词汇
+            removeWord(word);
+            sortWordFrequency();
+            renderWords();
         }
     });
 }
+
+
+/* 
+         * wordFrequency的元素类型为
+         * interface Word {
+         *   word: string,
+         *   freq: number
+         * }
+         * */
+let wordFrequency = [];
+
+/**
+ * 初始化词频列表
+ */
+function init() {
+    // 获取所有的词频元素并逐个处理
+    const word_elements = document.getElementsByClassName("new-word");
+    for (const cur_element of word_elements) {
+        const word = cur_element
+            .querySelector("a.btn.btn-light[role=button]")  // 获取当前词频元素的词汇元素
+            .innerText  // 获取词汇值;
+        
+        const freq = Number.parseInt(cur_element.querySelector(`#freq_${word}`).innerText);   // 获取词汇的数量
+
+        wordFrequency.push({
+            word,
+            freq
+        });
+    }
+    renderWords();
+}
+
+/**
+ * 按照词频排序
+ * 词频相同时按照字典顺序排序
+ */
+function sortWordFrequency() {
+    wordFrequency.sort((a, b) => { 
+        if (a.freq == b.freq) {
+            return a.word == b.word ? 0 : (a.word > b.word ? 1 : -1); 
+        }
+        return b.freq - a.freq;
+    });
+}
+
+/**
+ * 使用模板将传入的单词转换为相应的HTML字符串
+ * @param { interface Word {
+ *   word: string,
+ *   freq: number,
+ * } } word
+*/
+function wordTemplate(word) {
+    // 这个模板应当与 templates/userpage_get.html 中的 <p id='p_${word.word}' class="new-word" > ... </p> 保持一致
+    return `<p id='p_${word.word}' class="new-word" >
+        <a id="word_${word.word}"  class="btn btn-light" href='http://youdao.com/w/eng/${word.word}/#keyfrom=dict2.index'
+           role="button">${word.word}</a>
+        ( <a id="freq_${word.word}" title="${word.word}">${word.freq}</a> )
+        <a class="btn btn-success" onclick="familiar('${word.word}')" role="button">熟悉</a>
+        <a class="btn btn-warning" onclick="unfamiliar('${word.word}')" role="button">不熟悉</a>
+        <a class="btn btn-danger" onclick="delete_word('${word.word}')" role="button">删除</a>
+    </p>`;
+}
+
+/**
+ * 将wordFrequency中的单词渲染为一个列表
+ * 这个列表将会被放置在一个class为word container的HTML元素中
+*/
+function renderWords() {
+    let container = document.querySelector(".word.container");
+    if (!container) {
+        // container不存在
+        container = document.createElement("div");
+        container.className = "word container";
+        document.body.appendChild(container);
+    }
+
+    container.innerHTML = "";
+    for (word of wordFrequency) {
+        container.innerHTML += wordTemplate(word);
+    }
+    // console.log(container.innerHTML);
+}
+
+function removeWord(word) {
+    wordFrequency = wordFrequency.filter((a) => a.word != word);
+}

app/templates/userpage_get.html

@@ -20,7 +20,7 @@
 
     <title>EnglishPal Study Room for {{ username }}</title>
 </head>
-<body>
+<body onload="init()">
 <div class="container-fluid">
     <p><b>English Pal for <font id="username" color="red">{{ username }}</font></b>
         <a class="btn btn-secondary" href="/logout" role="button">退出</a>
@@ -68,6 +68,7 @@
 
     {% if d_len > 0 %}
         <p><b>我的生词簿</b></p>
+        <div class="word container">
             {% for x in lst3 %}
                 {% set word = x[0] %}
                 {% set freq = x[1] %}
@@ -83,6 +84,7 @@
                     <a class="btn btn-danger" onclick="delete_word('{{ word }}')" role="button">删除</a>
                 </p>
             {% endfor %}
+        </div>
         <input id="selected-words2" type="hidden" value="{{ words }}">
     {% endif %}
 </div>