接着上节的内容，来添加前端的代码，http://4440271.blog.51cto.com/4430271/1663863
首先，在http://v3.bootcss.com/getting-started/找到一个样式：
这里使用http://v3.bootcss.com/examples/navbar-static-top/
的样式：
将页面下载下来，添加到：
中，添加完成后，需要在settings.py中引入改目录：
在statics目录中，有网页中的js,css的文件，这些文件需要拷贝到目录用：
这里给出下载地址：
中下载statics
这里要对页面的内容要做一些修改。这里只上传修改好的内容。
对于前端的介绍，详细描述在：http://4440271.blog.51cto.com/4430271/1663934
在url.py中添加
在views.py中添加视图:
index的页面部分基本完成
视图与html页面的链接过程都是一样的，因此之后的添加不做专门介绍，只在代码中给出解释。
接下来加入评论页面：
首先，评论页面继承自index
其次，评论页面主要的显示首先是bbs_detail的内容，然后显示评论的内容，还应该有添加评论的地方。用bbs_detail.html完成这一页面, 我们分别描述各个部分，在博客的最后一篇中，我们会给出完整的代码。
在views.py中，应当添加相应的模块：
对于评论部分
在views.py中
这里，有个地方需要说明，就是 content_type_id，他是对数据库中所有表排列后给每个表的id号，在我们的项目中，bbs表所在的id号为7；
同时在url中添加
其结果如下：
然后是发帖的页面及功能：
在页面部分，我们使用一个在线插件：http://www.tinymce.com/download/download.php
来使得输入页面比较美观：
将下载后的文件放到statics目录下
其用法在：http://www.tinymce.com/wiki.php/Installation
其页面效果：
实现代码部分如下：
<link href="/static/css/signin.css" rel="stylesheet">
{% extends ‘index.html‘ %}
{% block page-content %}
<!-- Place inside the <head> of your HTML -->
<script type="text/javascript" src="/static/tinymce/js/tinymce/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
selector: "textarea",
theme: "modern",
plugins: [
"advlist autolink lists link image charmap print preview hr anchor pagebreak",
"searchreplace wordcount visualblocks visualchars code fullscreen",
"insertdatetime media nonbreaking save table contextmenu directionality",
"emoticons template paste textcolor colorpicker textpattern"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
templates: [
{title: ‘Test template 1‘, content: ‘Test 1‘},
{title: ‘Test template 2‘, content: ‘Test 2‘}
]
});
</script>
<!-- Place this in the body of the page content -->
<form method="post" action="/bbs_sub/">
<h3>Title</h3>
<input type="text" name="title" class="form-control" placeholder="" required>
<hr>
<h3>Content</h3>
<textarea name="content"></textarea>
<hr>
<h3>Summary</h3>
<input type="text" name="summary" class="form-control" placeholder="Summary" required>
<br>
<div class="form-signin">
<button class="btn btn-lg btn-primary btn-block" type="submit">Save</button>
</div>
{# <input type=‘submit‘ value=‘Save‘ />#}
</form>
{% endblock %}
在views.py中，获取前端传来的数据，导入到数据库中：
def bbs_pub(request):
return render_to_response(‘bbs_pub.html‘)
def bbs_sub(request):
print request.POST.get(‘content‘)
title = request.POST.get(‘title‘)
content = request.POST.get(‘content‘)
summary = request.POST.get(‘summary‘)
author = models.BBS_user.objects.get(user__username=request.user)
models.BBS.objects.create(
title=title,
summary=summary,
content=content,
author=author,
view_count=1,
ranking=1,
#created_at=models.DateTimeField(auto_now_add=True), # 创建日期
#updated_at = models.DateTimeField(auto_now_add=True), # 修改日期
)
return HttpResponse("<h2>Bbs was published, please enter <br/><a href=‘/‘>return</a> to index!<h2>")
到此为止，其功能基本实现完成，但是，这个系统只是简单的将django中的内容的一个拼凑，其中还有很多的问题，比如事件处理等。
下一节中，我们将给出bbc_pro的完整代码和最终的显示效果。