整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
?前面給大家介紹了Vue的組件功能，本文我們通過一個評論列表的案例來鞏固下組件的內容，具體效果如下:
在這里插入圖片描述
??我們先來整理下基礎的頁面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
</head>
<body>
<div id="app">
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
},
methods: {
}
})
</script>
</body>
</html>
??在基礎頁面的基礎上我們來添加 底部的 評論列表，用bootstrap來實現。如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="./lib/vue-2.4.0.js"></script>
<link rel="stylesheet" href="./lib/bootstrap-3.3.7.css">
</head>
<body>
<div id="app">
<ul class="list-group">
<!--循環取出列表數據-->
<li class="list-group-item" v-for="(item ,i) in list" :key="item.id">
<span class="badge">{{item.name}}</span>
{{item.content}}
</li>
</ul>
</div>
<script>
var vm=new Vue({
el: "#app",
data: {
list: [
{id: Date.now(),name:"波波烤鴨1",content:"非常棒..."},
{id: Date.now(),name:"波波烤鴨2",content:"非常棒..."},
{id: Date.now(),name:"波波烤鴨3",content:"非常棒..."}
]
},
methods: {}
})
</script>
</body>
</html>
在這里插入圖片描述
??現在我們通過Vue的組件來添加 評論的頭部，
在這里插入圖片描述
在這里插入圖片描述
組件使用
在這里插入圖片描述
效果
在這里插入圖片描述
??組件添加好后，我們通過點擊 發表評論 來添加內容到 評論列表中。實現的邏輯是
在這里插入圖片描述
在這里插入圖片描述
在這里插入圖片描述
效果
在這里插入圖片描述
添加的效果是實現了，但是在 第一次刷新的時候顯示的還是 固定的數據，這時我們可以 在Vue實例的生命周期的方法的 created 中再顯示的調用一次 加載數據的方法
在這里插入圖片描述
在這里插入圖片描述
這樣開始加載的就是 localStorage中的數據了。搞定~
完整代碼
程派微信號：codingpy
本文系作者 Django學習小組?授權編程派原創發表，并經編程派編輯，轉載請注明出處及微信ID（codingpy）。
通過前五周的時間我們開發了一個簡單的個人 Blog，本周我們將實現 blog 文章的評論功能。（快速查看前五期內容，請點擊文末鏈接）
實現思路
首先需要為評論（Comment）設計一個數據庫表，并編寫相應的 Model，將評論與文章關聯，再編寫發表評論的視圖，設置相應的 url 即可。
評論的 Model 設計
請點擊閱讀原文，查看詳細代碼
參照大部分博客評論的樣式，我們的 BlogComment Model 包含這些字段：
user_name：用戶在評論前先要填寫他們想使用的昵稱
user_email：用戶在評論前先要填寫他們想使用的郵箱
body：用戶提交的評論內容
created_time：評論提交時間
article：評論關聯的文章，因為一個評論只能關聯某一篇文章，而一篇文章下可能有多個評論，因此是一對多的關系，使用 ForeignKey
評論的表單
表單用來給服務器后臺提交用戶填寫的數據，例如平時我們看到的填寫登錄、注冊信息的頁面就是一個登錄、注冊表單，用戶填寫表單信息后，點擊提交按鈕，表單中填寫的內容就會打包發送給服務器后臺。
我們需要為用戶填寫評論設置一個表單，django 的 form 模塊為我們提供了自動生成表單的功能，如果對表單不熟悉請參閱：官方文檔：表單概述 ，以了解基本的表單使用方法（如果你對表單感覺很陌生的話）。
下面我們使用 Django 的 ModelForm （ django ModelForm 介紹 ）類為我們自動生成表單。首先在 blog 目錄下新建一個 forms.py （和 models.py 同一目錄）文件用來存放 form 的代碼：
請點擊閱讀原文，查看詳細代碼
視圖函數
這里我們一如既往堅持使用基于類的通用視圖，由于涉及到評論表單的提交處理，因此我們使用 FormView。這里對 FormView 的使用稍作講解。
在 Django 的基于函數的視圖中，涉及表單的處理的視圖其邏輯一般是這樣的：
請點擊閱讀原文，查看詳細代碼
即，首先判斷用戶是否通過表單 POST 了數據過來，如果是，則根據 POST 過來的數據構建一個表單，如果數據驗證合法（form.is_valid），則創建評論，否則返回表單提交頁。如果沒有 POST 數據，則做其他相應的事情。FormView 把這些邏輯做了整合，無需寫那么多 if else 語句：
請點擊閱讀原文，查看詳細代碼
為了方便地重定向回原來提交評論的文章詳情頁面，我們為文章（Article）的模型新增一個方法：get_absolute_url，調用該方法將得到該 Article 對應的 url，例如這是文章 1 的 url：http://localhost:8000/article/1，則調用后返回 /article/1，這樣調用 HttpResponseRedirect 后將返回該 url 下的文章詳情頁。
請點擊閱讀原文，查看詳細代碼
同時為了在詳情頁渲染一個評論表單，稍微修改一下 ArticleDetailView 的視圖函數，把評論表單 form 插入模板上下文中：
請點擊閱讀原文，查看詳細代碼
URL 設置
設置模板文件
新增了一個 comment.html 文件以渲染評論表單和評論列表，并且修改了 detail.html 文件以在文章詳情頁顯示評論表單和評論列表，修改了blog/tatic 下的 style.css 為評論添加樣式，由于代碼比較多，就不貼出來了，主要是 html 和 css 的前端相關代碼，請到 GitHub 倉庫 更新相關的模板和靜態資源文件。
至此，整個評論功能的框架做好了，顯示效果如下：
當然這只是一個評論的框架，很多細節有待處理和完善，但無論如何，用戶已經可以為我們的文章發表評論意見了。
前情回顧
第一周：Django學習與實戰（一）：編寫博客的 Model 和首頁面
第二周：Django學習與實戰（二）：博客詳情頁面和分類頁面
第三周：Django學習與實戰（三）：文章列表分頁和代碼語法高亮
第四周：Django學習與實戰（四）：基于類的通用視圖詳解
第五周：Django學習與實戰（五）：標簽云與文章歸檔
程序越來越火，而小程序需要學會的基本語音則是HTML+CSS+JS,今天給大家帶來HTML的列表標簽和注釋標簽的講解，希望大家看完能對HTML有多一點的了解。
<font color="設置文字顏色" size="文字的大小">要操作的文字的內容</font>
color 有三種表現方式 ：
直接使用英文單詞進行表示 red green yello
使用十六進制數字表示 #33cc66
使用RGB顏色值配置 rgb（255,255.0）
注意：屬性值size的范圍是1-7，就算是寫為大于7的數字，還是會呈現7的大小
<h1></h1> <h2></h2> <h3></h3><h4></h4><h5></h5><h6></h6>
標題標簽可以自動換行，從h1到h6字體的大小越來越小
標題標簽自動換行
<hr/> 需要在標簽內結束 屬性：color ：表示設置水平線的顏色 size：設置水平線的粗細，范圍是1-7
注釋標簽
java中有三種注釋：單行注釋，多行注釋，文檔注釋
在html中的注釋<!-- 注釋的內容 --> 不會在頁面中進行顯示
實現空格的操作  
從學習HTML開始，帶你一步一步學習，直到開發一個小程序。喜歡的還請點個贊，加個收藏；想繼續關注的，還請添加關注；如果有什么話想說，可以發表評論。希望以上本篇內容能讓大家有說收獲，感謝大家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
