【綜合練習】社群網站（一）：實作 1 - 解答 | 程式專案

{"id":576194,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n\\t\u003ctitle\u003eDocument\u003c/title\u003e\\n\\t\u003cscript src=\\\"https://code.jquery.com/jquery-3.4.1.min.js\\\"\u003e\u003c/script\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n    \\n    \u003c!--======================= 文章列表頁面 =======================--\u003e\\n    \u003cdiv id=\\\"home-page\\\"\u003e\\n        \u003cdiv class=\\\"btn-group\\\"\u003e\\n            \u003cbutton class=\\\"bg-dark js-filter\\\" data-type=\\\"全部\\\"\u003e全部\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-blue js-filter\\\" data-type=\\\"新聞\\\"\u003e新聞\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-red js-filter\\\" data-type=\\\"愛情\\\"\u003e愛情\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-purple js-filter\\\" data-type=\\\"八卦\\\"\u003e八卦\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-orange js-filter\\\" data-type=\\\"購物\\\"\u003e購物\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-yellow js-filter\\\" data-type=\\\"笑話\\\"\u003e笑話\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-cyan js-filter\\\" data-type=\\\"閒聊\\\"\u003e閒聊\u003c/button\u003e\\n            \u003cbutton class=\\\"bg-dark float-right js-show-form-page\\\"\u003e發文\u003c/button\u003e\\n        \u003c/div\u003e\\n        \u003cdiv id=\\\"post-list\\\"\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"123\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e文章類型\u003c/span\u003e文章標題\u003c/h3\u003e\\n                \u003cp\u003e文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容......\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"456\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e文章類型\u003c/span\u003e文章標題\u003c/h3\u003e\\n                \u003cp\u003e文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容......\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"post-item card\\\" data-id=\\\"7\\\"\u003e\\n                \u003ch3\u003e\u003cspan class=\\\"tag bg-orange\\\"\u003e文章類型\u003c/span\u003e文章標題\u003c/h3\u003e\\n                \u003cp\u003e文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容文章內容......\u003c/p\u003e\\n                \u003cspan class=\\\"gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003ch3 class=\\\"text-center\\\" id=\\\"bottom-text\\\"\u003e底部\u003c/h3\u003e\\n    \u003c/div\u003e\\n    \\n    \\n    \u003c!--======================= 新增文章頁面 =======================--\u003e\\n    \u003cdiv id=\\\"form-page\\\"\u003e\\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cselect id=\\\"form-type\\\"\u003e\\n                \u003coption value=\\\"\\\"\u003e請選擇文章類型\u003c/option\u003e\\n                \u003coption value=\\\"新聞\\\"\u003e新聞\u003c/option\u003e\\n                \u003coption value=\\\"愛情\\\"\u003e愛情\u003c/option\u003e\\n                \u003coption value=\\\"八卦\\\"\u003e八卦\u003c/option\u003e\\n                \u003coption value=\\\"購物\\\"\u003e購物\u003c/option\u003e\\n                \u003coption value=\\\"笑話\\\"\u003e笑話\u003c/option\u003e\\n                \u003coption value=\\\"閒聊\\\"\u003e閒聊\u003c/option\u003e\\n            \u003c/select\u003e\\n            \u003cinput id=\\\"form-title\\\" type=\\\"text\\\" placeholder=\\\"文章標題...\\\"\u003e\\n            \u003ctextarea id=\\\"form-content\\\" rows=\\\"8\\\" cols=\\\"40\\\" placeholder=\\\"文章內容 (必須滿 20 字以上)...\\\"\u003e\u003c/textarea\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"btn-group\\\"\u003e\\n            \u003cbutton class=\\\"bg-gray js-show-post-list\\\"\u003e取消\u003c/button\u003e \\n            \u003cbutton class=\\\"bg-orange js-create-post\\\"\u003e送出\u003c/button\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n    \\n    \u003c!--======================= 文章檢視頁面 =======================--\u003e\\n    \u003cdiv id=\\\"post-page\\\"\u003e\\n        \u003cdiv class=\\\"btn-group\\\"\u003e\\n            \u003cbutton class=\\\"bg-orange js-show-post-list\\\"\u003e返回文章列表\u003c/button\u003e\\n        \u003c/div\u003e\\n        \\n        \u003cdiv class=\\\"postItem card\\\"\u003e\\n            \u003ch3\u003e\\n                \u003cspan class=\\\"tag bg-orange\\\" id=\\\"post-type\\\"\u003e類型\u003c/span\u003e\\n                \u003cspan id=\\\"post-title\\\"\u003e標題\u003c/span\u003e\\n                (\u003cspan id=\\\"post-author\\\"\u003e作者\u003c/span\u003e)\\n            \u003c/h3\u003e\\n            \u003cp id=\\\"post-content\\\"\u003e文章內容文章內容文章內容....\u003c/p\u003e\\n            \u003cspan id=\\\"post-date\\\"\u003e2020-01-01\u003c/span\u003e\\n        \u003c/div\u003e\\n        \\n        \u003ch3 class=\\\"text-center\\\" id=\\\"comments-length\\\"\u003e 20 則留言\u003c/h3\u003e\\n        \\n        \u003cdiv class=\\\"card\\\"\u003e\\n            \u003cinput type=\\\"text\\\" id=\\\"comment-input\\\"\u003e\\n            \u003cbutton class=\\\"bg-orange js-create-comment\\\"\u003e留言\u003c/button\u003e\\n        \u003c/div\u003e\\n        \\n        \u003cdiv id=\\\"comment-list\\\"\u003e\\n            \u003cdiv class=\\\"comment-item card\\\"\u003e\\n                \u003cstrong\u003e小明\u003c/strong\u003e\\n                \u003cspan\u003e留言內容留言內容留言內容...\u003c/span\u003e\\n                \u003cspan class=\\\"float-right gray\\\"\u003e2020-01-01\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"comment-item card\\\"\u003e\\n                \u003cstrong\u003eTony\u003c/strong\u003e\\n                \u003cspan\u003eblabalba\u003c/span\u003e\\n                \u003cspan class=\\\"float-right gray\\\"\u003e2020-11-12\u003c/span\u003e\\n            \u003c/div\u003e\\n            \u003cdiv class=\\\"comment-item card\\\"\u003e\\n                \u003cstrong\u003e小明\u003c/strong\u003e\\n                \u003cspan\u003e留言內容留言內容留言內容...\u003c/span\u003e\\n                \u003cspan class=\\\"float-right gray\\\"\u003e2020-01-01\u003c/span\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n    \\n\u003c/body\u003e\\n\u003c/html\u003e\\n\",\"css\":\"body {\\n    padding: 30px;\\n    color: #444444;\\n    background-color: #eeeeee;\\n}\\n\\n#form-page,\\n#post-page {\\n    display: none;\\n}\\n\\n#form-page,\\n#post-page,\\n#home-page {\\n    max-width: 600px;\\n    margin: auto;\\n}\\n\\n.btn-group {\\n    margin: 15px 0px;\\n}\\n\\n.post-item {\\n    font-size: 0.9rem;\\n    cursor: pointer;\\n    margin: 30px 0px;\\n}\\n\\n.comment-item {\\n    margin: 15px 0px;\\n}\\n\\n.post-item h3,\\n.post-item p {\\n    margin: 10px 0px;\\n}\\n\\n.card {\\n    padding: 15px;\\n    border-radius: 5px;\\n    background-color: #ffffff;\\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);\\n    transition: 0.2s;\\n}\\n\\n.card:hover {\\n    box-shadow: 0px 3px 5px rgba(0, 0, 0, .2);\\n}\\n\\nbutton {\\n    padding: 5px 10px;\\n    border-width: 0;\\n    border-radius: 5px;\\n    box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);\\n    font-size: 0.9rem;\\n    color: #ffffff;\\n}\\n\\n.tag {\\n    color: #ffffff;\\n    padding: 2px 6px;\\n    display: inline-block;\\n    margin-right: 5px;\\n    border-radius: 5px;\\n}\\n\\n.bg-cyan {\\n    background-color: #1bbc9c;\\n}\\n\\n.bg-green {\\n    background-color: #2fcc70;\\n}\\n\\n.bg-blue {\\n    background-color: #2a80b9;\\n}\\n\\n.bg-yellow {\\n    background-color: #f1c40f;\\n}\\n\\n.bg-orange {\\n    background-color: #f49c14;\\n}\\n\\n.bg-red {\\n    background-color: #e84b3d;\\n}\\n\\n.bg-purple {\\n    background-color: #9c59b8;\\n}\\n\\n.bg-dark {\\n    background-color: #34495e;\\n}\\n\\n.bg-gray {\\n    background-color: #808b8d;\\n}\\n\\n\\n.gray {\\n    color: #aaaaaa;\\n}\\n\\n.float-right {\\n    float: right;\\n}\\n\\n.text-center {\\n    text-align: center;\\n}\\n\\n\\n#form-page select,\\n#form-page input,\\n#form-page textarea {\\n    width: 100%;\\n    box-sizing: border-box;\\n    margin: 15px auto;\\n    display: block;\\n    border: 1px solid #ccc;\\n    border-radius: 5px;\\n    padding: 10px;\\n    font-size: 0.9rem;\\n}\\n\\n#form-page select,\\n#form-page input {\\n    height: 30px;\\n}\\n\\n#post-page input {\\n    width: calc(100% - 55px);\\n    box-sizing: border-box;\\n    border: 1px solid #ccc;\\n    border-radius: 5px;\\n    padding: 8px;\\n    font-size: 0.9rem;\\n}\",\"js\":\"\"}","created_at":"2023-07-28T10:15:59.667+08:00","updated_at":"2023-07-28T10:16:04.551+08:00","name":"【綜合練習】社群網站（一）：實作 1 - 解答","language":"web","screenshot":{"url":null},"parent_id":576192,"plugin":"const seeds = [\n    {\n        \"type\": \"笑話\",\n        \"title\": \"很大的鴨子\",\n        \"content\": \"大可大，非常大。\",\n        \"author\": \"misomochi\",\n        \"date\": \"2020-01-01T00:00:00.000Z\",\n        \"comments\": [\n            {\n                \"author\": \"tp6al4:\",\n                \"content\": \"有笑\",\n                \"date\": \"2001-08-23T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"brian1219:\",\n                \"content\": \"哈哈\",\n                \"date\": \"2001-08-23T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"kuan50118:\",\n                \"content\": \"可以\",\n                \"date\": \"2001-08-24T08:27:00.000Z\"\n            },\n        ]\n    },\n    {\n        \"type\": \"新聞\",\n        \"title\": \"鮑威爾左手掌骨折 將無限期休兵\",\n        \"content\": `鮑威爾左手掌骨折 將無限期休兵\n\n2020-02-02 10:34聯合報 / 記者毛琬婷／即時報導\n\n本季打出亮眼表現的暴龍隊得分後衛鮑威爾（Norman Powell）又傳出傷情，他在昨天與活塞隊的比賽中不慎弄傷左手掌，造成左手第四掌骨骨折，將無限期休戰。\n\n鮑威爾本季才因肩傷缺席了11場比賽，他從去年12月19日後就未再上場，直到1月13日對戰馬刺隊的比賽才順利歸隊，而他本季也一掃前4季場均只有個位數的低迷表現，本季出賽\n38場繳出場均15.3分、3.9籃板、1.7助攻的成績，成為暴龍重要得分來源之一。\n\n不過今天傳出鮑威爾左手掌骨折的消息，球隊也將他放進傷兵名單，且歸期未定，而他不是本季暴龍遭遇傷病的其中一員，羅瑞（Kyle Lowry）、席亞康（Pascal Siakam）、小\n加索（Marc Gasol）、伊巴卡（Serge Ibaka）、范弗利特（Fred VanVleet）等人也都曾因傷缺陣達雙位數。\n\n在傷兵頻頻的情況下，暴龍仍展現團隊陣容深度，目前以35勝14負的戰績暫居東區第2，近期更打出一股10連勝氣勢，距離追平隊史最長11連勝只差一步。`,\n        \"author\": \"phoenix286\",\n        \"date\": \"Sun Feb  2 14:07:34 2020\",\n        \"comments\": [\n            {\n                \"author\": \"a11011788\",\n                \"content\": \"好慘\",\n                \"date\": \"02/02 14:14\"\n            },\n            {\n                \"author\": \"jk8177919\",\n                \"content\": \"蠻多場都是靠他救的\",\n                \"date\": \"02/02 14:48\"\n            },\n            {\n                \"author\": \"dajyunlin\",\n                \"content\": \"早日康復\",\n                \"date\": \"02/02 16:09\"\n            },\n        ]\n    },\n    {\n        \"type\": \"笑話\",\n        \"title\": \"小明練武功\",\n        \"content\": \"\\n    小明是個習武之人，有一天一位大師要傳授畢生絕學給小明 ，小明便開始苦練基礎 ，\\n    每天到筋疲力盡為止。\\n    在傳授那天 ，大師對著小明說:「你這呆徒！\\n    不留一點體力，我要怎麼把功夫傳給你？」\\n 小明：「可是師父，留體力學，好難。」\",\n        \"author\": \"bbo214\",\n        \"date\": \"2020-01-01T00:00:00.000Z\",\n        \"comments\": [\n            {\n                \"author\": \"Agdanpanda:\",\n                \"content\": \"有笑給推\",\n                \"date\": \"2001-12-17T04:38:00.000Z\"\n            },\n            {\n                \"author\": \"henry8168:\",\n                \"content\": \"XD\",\n                \"date\": \"2001-12-17T04:46:00.000Z\"\n            },\n            {\n                \"author\": \"VerilogMai:\",\n                \"content\": \"推\",\n                \"date\": \"2001-12-17T05:03:00.000Z\"\n            },\n        ]\n    },\n    {\n        \"type\": \"笑話\",\n        \"title\": \"什麼飲料最好玩？\",\n        \"content\": \"喝剩的飲料\",\n        \"author\": \"xuan9612\",\n        \"date\": \"2020-01-01T00:00:00.000Z\",\n        \"comments\": [\n            {\n                \"author\": \"nighthunt:\",\n                \"content\": \"還行啦\",\n                \"date\": \"2001-05-23T17:52:00.000Z\"\n            },\n            {\n                \"author\": \"bomb1000:\",\n                \"content\": \"清新\",\n                \"date\": \"2001-05-23T18:23:00.000Z\"\n            },\n            {\n                \"author\": \"axion6012:\",\n                \"content\": \"不錯\",\n                \"date\": \"2001-05-23T18:24:00.000Z\"\n            },\n        ]\n    },\n    {\n        \"type\": \"購物\",\n        \"title\": \"1/25~2/8 PCHOMEx街口優惠8%\",\n        \"content\": `提醒ㄧ下 第二週今天開始了\n街口帳戶或是銀行帳戶扣款儲值PChome $2500\n會有200現金回饋+50的街口幣\n之後可用來搭配Line導購5%以上來購買商品\n用儲值進去導購是可以得到回饋的：）`,\n        \"author\": \"polarbeer\",\n        \"date\": \"Sat Feb  1 00:41:32 2020\",\n        \"comments\": [\n            {\n                \"author\": \"sieda\",\n                \"content\": \"line導購只有1%啊\",\n                \"date\": \"2001-01-24T17:34:00.000Z\"\n            },\n            {\n                \"author\": \"jamesmile\",\n                \"content\": \"哪裡有2500啊怎麼沒看到@@\",\n                \"date\": \"2001-01-24T17:35:00.000Z\"\n            },\n            {\n                \"author\": \"davidaustin\",\n                \"content\": \"500+2000\",\n                \"date\": \"2001-01-24T17:35:00.000Z\"\n            },\n        ]\n    },\n    {\n        \"type\": \"愛情\",\n        \"title\": \"該送禮物嗎\",\n        \"content\": `我男30 對方女26\n有打算在情人節告白\n不知道要不要送情人節禮物呢?\n如果告白死就QQ了\n目前有牽手親吻 但就是沒有確立關係\n所以對方FB還是寫單身\n認識時間只有三個月 但我想要確立關係 會不會太急呢?\n如果要送禮物 我該告白時一起送 還是得到答覆後再拿出呢?\n另外假設進展順利\n一開始就送手錶合適嗎? 其實對方已經有手表了\n但手錶代表的意義蠻深的 所以有想送 但怕隔年不好提升禮物等級(?)\n或是首飾類(手鐲 項鍊)比較好? 對方喜歡耳環 但之前有送過了\n請各位幫忙給點意見 謝謝大家`,\n        \"author\": \"risD\",\n        \"date\": \"Sun Feb  2 17:10:00 2020\",\n        \"comments\": [\n            {\n                \"author\": \"Firenzea:\",\n                \"content\": \"錶\",\n                \"date\": \"2001-02-02T09:12:00.000Z\"\n            },\n            {\n                \"author\": \"jason032323:\",\n                \"content\": \"物不是重點\",\n                \"date\": \"2001-02-01T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"meishan31:\",\n                \"content\": \"不要\",\n                \"date\": \"2001-02-02T09:52:00.000Z\"\n            },\n        ]\n    },\n    {\n        \"type\": \"購物\",\n        \"title\": \"買麥當勞或肯德基送漢堡王\",\n        \"content\": `★ 活動辦法｜憑「當日」購買麥當勞或肯德基的「套餐」發票明細，即可免費兌換漢堡王\n全新限時主打星「義式青醬烤時蔬雞腿堡」或者「義式青醬烤時蔬里肌堡」一個！\n★ 兌換數量｜限量一萬份，數量有限，換完為止\n★ 活動日期｜即日起至12/10\n★ 活動門市｜全台漢堡王門市 (P.S.機場店\u0026兒童樂園店不適用)\n\n★ 注意事項｜\n1.每日上午10:30後供應。\n2.活動商品數量限一萬份，換完為止。\n3.每人僅可兌換一次，每次限兌換一個漢堡。\n4.兌換時需出示發票明細紙本，若破損不全或填載模糊不清，恕不提供兌換。\n5.未附明細之紙本發票、電子載具恕不適用。\n6.活動限臨櫃兌換，外送恕不適用。\n7.若發生問題或不可抗力因素導致活動無法進行，漢堡王有保留變更或終止本活動時間、\n內容之權利。`,\n        \"author\": \"greenruler\",\n        \"date\": \"Thu Dec  5 11:12:42 2019\",\n        \"comments\": [\n            {\n        \"author\": \"b10485762000:\",\n        \"content\": \"12/05\",\n        \"date\": \"2001-01-31T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"macrose\",\n                \"content\": \"首先，你要找的到漢堡王\",\n                \"date\": \"2001-12-05T03:13:00.000Z\"\n            },\n            {\n                \"author\": \"sdhpipt\",\n                \"content\": \"好奇妙的活動\",\n                \"date\": \"2001-12-04T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"xufuu\",\n                \"content\": \"高雄還沒開幕\",\n                \"date\": \"2001-12-04T16:00:00.000Z\"\n            },\n        ]\n    },\n    {\n        \"type\": \"新聞\",\n        \"title\": \"英國正式脫歐 結束47年歐盟成員身分\",\n        \"content\": `經過三年半，英國決定在台灣時間2月1號早上7點，正式脫歐。英國首相強生強調，脫歐\n對英國來講，是新的開始而非結束。\n\n英國當地時間1月31號晚間11點，倫敦大笨鐘的影像投影在倫敦唐寧街10號首相官邸，預\n錄的鐘聲響徹雲霄，也代表英國正式脫離歐盟，結束了長達47年的歐盟成員身份，成為史\n上第一個脫歐的國家。同一時間，英國脫歐黨號召大批民眾聚集在國會大廈外的廣場，慶\n祝這歷史性的時刻。\n\n現場民眾表示，「太棒了，這一刻等太久了，為了脫歐付出了很大代價。」也有民眾指出\n，「我非常興奮，太棒了，這也是我們想要的，這是一場辛苦的奮戰，波瑞斯(強生)加油\n。」\n`,\n        \"author\": \"S7617921\",\n        \"date\": \"Sat Feb  1 21:24:54 2020\",\n        \"comments\": [\n            {\n                \"author\": \"ECZEMA:\",\n                \"content\": \"歷史大事啊!\",\n                \"date\": \"2001-01-31T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"tomchow76:\",\n                \"content\": \"英國脫歐是一種歷史的必然\",\n                \"date\": \"2001-01-31T16:00:00.000Z\"\n            },\n            {\n                \"author\": \"kinomon:\",\n                \"content\": \"神串留名\",\n                \"date\": \"2001-01-31T16:00:00.000Z\"\n            },\n        ]\n    },\n]\n\nvar post = DB.table('post'); //文章的資料表\nvar comment = DB.table('comment'); //留言的資料表\nfunction initDB () {\n    post.delete({})\n    comment.delete({})\n    \n    comment_arr = []\n    \n    seeds.forEach(function (p, idx) {\n        \n        p.date = new Date(p.date)\n        var comments = p.comments\n        delete p['comments']\n        \n        post.create(p, obj =\u003e {\n            comments = comments.map(function (c) {\n              c.postId = obj.id\n              c.date = new Date(c.date)\n              return c\n            });\n            comment_arr = comment_arr.concat(comments)\n            \n            comment.create(comment_arr, console.log)\n        })\n    });\n}\n\n\n\nvar post = DB.table('post'); //文章的資料表\nvar comment = DB.table('comment'); //留言的資料表\nvar userName = USER_NAME;\nvar postId;\ninitDB()\n\n\n$('.js-show-form-page').click(showFormPage); //「發文」按鈕點擊時，切換表單頁面\n$('.js-show-post-list').click(showHomePage); //「取消」按鈕點擊時，切換文章列表頁面\n$('#home-page').on('click', '.post-item', showPostPage); //「取消」按鈕點擊時，切換文章列表頁面\n\n\n// 切換「文章檢視」頁面\nfunction showPostPage () {\n    $('#home-page').hide();\n    $('#post-page').show();\n    $('#form-page').hide();\n\n    postId = $(this).data('id')\n    post.read({ id: postId }, updatePost); // 這裏欄位名稱是 id\n    comment.find({ postId: postId }, updateComment); // 這裏欄位名稱是 postId，別搞混\n}\n\n// 切換「文章新增」頁面\nfunction showFormPage () {\n    $('#home-page').hide();\n    $('#post-page').hide();\n    $('#form-page').show();\n}\n\n// 切換「文章列表」頁面\nfunction showHomePage () {\n    $('#home-page').show();\n    $('#post-page').hide();\n    $('#form-page').hide();\n}\n\n$('.js-create-post').click(createPost); //「送出」按鈕點擊\n$('.js-filter').click(filter); //「分類」按鈕點擊\n$('.js-create-comment').click(createComment); // 新增留言\n\npost.read({}, updatePostList); // 專案執行時預先更新首頁文章列表\n\n// 新增文章到資料表\nfunction createPost () {\n    var typeVal = $('#form-type').val();\n    var titleVal = $('#form-title').val();\n    var contentVal = $('#form-content').val();\n\n    if (typeVal !== '' \u0026\u0026 titleVal !== '' \u0026\u0026 contentVal.length \u003e 20) {\n\n        $('#form-type').val(''); //清空\n        $('#form-title').val(''); //清空\n        $('#form-content').val(''); //清空\n\n        post.create({\n            type: typeVal,\n            title: titleVal,\n            content: contentVal,\n            author: userName,\n            date: new Date,\n        }, console.log);\n        showHomePage();\n        post.read({}, updatePostList);\n    } else {\n        alert('請確認文章類型、標題皆有填寫，且文章內容不得低於 20 字！');\n    }\n}\n\n// 更新首頁的文章列表\nfunction updatePostList (data) {\n    $('#post-list').empty();\n    data.forEach(function (d) {\n        var color = typeToClass(d.type);\n        var html = `\n        \u003cdiv class=\"post-item card\" data-id=\"${d.id}\"\u003e\n            \u003ch3\u003e\u003cspan class=\"tag ${color}\"\u003e${d.type}\u003c/span\u003e${d.title}\u003c/h3\u003e\n            \u003cp\u003e${d.content.slice(0, 90)}\u003c/p\u003e\n            \u003cspan class=\"gray\"\u003e${d.date.slice(0, 10)}\u003c/span\u003e\n        \u003c/div\u003e\n        `\n        $('#post-list').append(html);\n    });\n\n    if (data.length \u003e 0) {\n        $('#bottom-text').text('底部');\n    } else {\n        $('#bottom-text').text('無相關文章');\n    }\n}\n\n// 顯示特定類型的文章\nfunction filter () {\n    var typeVal = $(this).data('type');\n    if (typeVal == '全部') {\n        post.read({}, updatePostList);\n    } else {\n        post.read({type: typeVal}, updatePostList);\n    }\n}\n\n// 顯示指定文章\nfunction updatePost (data) {\n    $('#post-type').text(data[0].type);\n    $('#post-title').text(data[0].title);\n    $('#post-author').text(data[0].author);\n    $('#post-content').text(data[0].content);\n    $('#post-date').text(data[0].date.slice(0, 10));\n\n    $('#post-type').removeClass();\n    $('#post-type').addClass('tag');\n    $('#post-type').addClass(typeToClass(data[0].type));\n}\n\n// 新增文章\nfunction createComment () {\n    var contentVal = $('#comment-input').val();\n    $('#comment-input').val('');\n\n    comment.create({\n        content: contentVal,\n        author: userName,\n        date: new Date,\n        postId: postId\n    }, console.log);\n    comment.find({postId: postId}, updateComment);\n}\n\n// 更新留言\nfunction updateComment (data) {\n    $('#comment-list').empty();\n    data.forEach(function (d) {\n        var html = `\n        \u003cdiv class=\"comment-item card\"\u003e\n            \u003cstrong\u003e${d.author}\u003c/strong\u003e\n            \u003cspan\u003e${d.content}\u003c/span\u003e\n            \u003cspan class=\"float-right gray\"\u003e${d.date.slice(0, 10)}\u003c/span\u003e\n        \u003c/div\u003e\n        `\n        $('#comment-list').append(html);\n    });\n    $('#comments-length').text(data.length + '則留言');\n}\n\n// 根據文章類型對應顏色的標籤\nfunction typeToClass (type) {\n    if (type == '新聞') {\n        return 'bg-blue';\n    }\n    if (type == '愛情') {\n        return 'bg-red';\n    }\n    if (type == '八卦') {\n        return 'bg-purple';\n    }\n    if (type == '購物') {\n        return 'bg-orange';\n    }\n    if (type == '笑話') {\n        return 'bg-yellow';\n    }\n    if (type == '閒聊') {\n        return 'bg-cyan';\n    }\n}","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":33,"hashid":"p93s4j3v9","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}