整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
?前面给大家介绍了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小时内与您取得联系。
