?前面給大家介紹了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小時內與您取得聯系。