主界面
主界面
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
{% load static %}
<script src="{% static 'bootstrap/js/jquery.js' %}"></script>
<link rel="stylesheet" href="{% static 'bootstrap/css/bootstrap.min.css' %}">
<script src="{% static 'bootstrap/js/bootstrap.min.js' %}"></script>
</head>
<body>
{# 这是一个官网拉来的导航栏 #}
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">BBS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">文章 <span class="sr-only">(current)</span></a></li>
<li><a href="#">随笔</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
{# 这里判断用户是否已经登录，来展示不一样的按钮，直接用request。user就可以了，因为后端传来了request #}
{% if request.user.is_authenticated %}
<li><a href="#">{{ request.user.username }}</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">更多操作 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg">修改密码</a></li>
<li><a href="#">修改头像</a></li>
<li><a href="#">后台管理</a></li>
<li role="separator" class="divider"></li>
<li><a href="/logout/">注销</a></li>
</ul>
</li>
{% else %}
<li><a href="/register/">注册</a></li>
<li><a href="/login/">登录</a></li>
{% endif %}
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">重金求子</h3>
</div>
<div class="panel-body">
事成之后，上海别墅一套
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">百万大奖</h3>
</div>
<div class="panel-body">
赶紧拨打电话领取把
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">在线直播</h3>
</div>
<div class="panel-body">
点我点我，有你好看~
</div>
</div>
</div>
<div class="col-md-8">
<ul class="media-list">
{% for article in page_queryset %}
<li class="media"><a href="/{{ article.blog.userinfo.username }}/article/{{ article.pk }}"><h4 class="media-heading">{{ article.title }}</h4></a>
<div class="media-left">
<a href="#">
<img class="media-object" src="/media/{{ article.blog.userinfo.avatar }}" alt="..." width="60">
</a>
</div>
<div class="media-body">
{{ article.desc }}
</div>
<br>
{#这里是备注信息#}
<span><a href="/{{ article.blog.userinfo.username }}/">{{ article.blog.userinfo.username }} </a></span>
<span>发布于 {{ article.create_time|date:'Y-m-d' }} </span>
<span><span class="glyphicon glyphicon-comment"></span>评论数({{ article.comment_num }}) </span>
<span><span class="glyphicon glyphicon-thumbs-up"></span>点赞数({{ article.up_num }})</span>
</li>
<hr>
{% endfor %}
</ul>
{{ page_obj.page_html|safe }}
</div>
<div class="col-md-2">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">重金求子</h3>
</div>
<div class="panel-body">
事成之后，上海别墅一套
</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">百万大奖</h3>
</div>
<div class="panel-body">
赶紧拨打电话领取把
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">在线直播</h3>
</div>
<div class="panel-body">
点我点我，有你好看~
</div>
</div>
</div>
</div>
</div>
{# 模态框，用来修改密码的 #}
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2 class="text-center">修改密码</h2>
<div class="form-group">
<label for="username">用户名</label>
<input type="text" name="username" disabled value="{{ request.user.username }}" id="username"
class="form-control">
</div>
<div class="form-group">
<label for="old_password">原密码</label>
<input type="password" name="old_password" id="old_password" class="form-control">
</div>
<div class="form-group">
<label for="new_password">新密码</label>
<input type="password" name="new_password" id="new_password" class="form-control">
</div>
<div class="form-group">
<label for="confirm_password">确认密码</label>
<input type="password" name="confirm_password" id="confirm_password" class="form-control">
</div>
<input type="button" id="b1" class="btn btn-primary" value="提交">
<button type="button" class="btn btn-default " data-dismiss="modal">取消</button>
<span style="color: red" id="error"></span>
<br>
<br>
</div>
</div>
</div>
</div>
</div>
<script>
$('#b1').on('click', function () {
$.ajax({
url: '/set_password/',
type: 'post',
data: {
'old_password': $('#old_password').val(),
'new_password': $('#new_password').val(),
'confirm_password': $('#confirm_password').val(),
'csrfmiddlewaretoken': '{{ csrf_token }}'
},
success: function (data) {
if (data.code == 1000) {
window.location.href = data.url
} else {
$('#error').text(data.msg)
}
}
})
})
</script>
</body>
</html>
后端代码：
from utils.mypage import Pagination #自己导入的分页代码
def home(request):
# 将当前网站上的所有的文章全部展示到前端页面
article_list = models.Article.objects.all()
page_obj = Pagination(current_page=request.GET.get('page',1),all_count=article_list.count())
page_queryset = article_list[page_obj.start:page_obj.end]
return render(request,'home.html',locals())
