bbs 后端登录
def login(request):
if request.method == 'GET':
return render(request, 'login.html')
else:
username = request.POST.get('username')
password = request.POST.get('password')
code = request.POST.get('code').lower() # 会存在bug
# 1 校验验证码,取出老验证码，忽略大小写
old_code = request.session.get('code').lower()
if code == old_code:
# 2 去验证用户了---》
# 你们去实现：先根据用户名查出用户，check_password校验密码
# UserInfo.objects.filter(username=username,password=password).exists() # 错的
user = authenticate(username=username, password=password)
if user:
# 登录成功--->内部写session了
auth_login(request, user)
return JsonResponse({'code': 100, 'msg': '登录成功', 'url': '/'})
else:
return JsonResponse({'code': 101, 'msg': '用户名或密码错误'})
else:
return JsonResponse({'code': 102, 'msg': '验证码错误'})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-md-offset-3">
<h1 class="text-center">登录功能</h1>
<form id="login_form">
{% csrf_token %}
<div class="form-group">
<label for="">用户名</label>
<input type="text" name="username" class="form-control">
</div>
<div class="form-group">
<label for="">密码</label>
<input type="password" name="password" class="form-control">
</div>
<div class="form-group">
<label for="">验证码</label>
<div class="row">
<div class="col-md-6">
<input type="text" name="code" class="form-control">
</div>
<img src="/get_code/" alt="" class="col-md-6" height="35" id="id_img">
</div>
</div>
<div class="text-center" style="margin-top: 50px">
<input type="button" value="登录" class="btn btn-danger" id="id_submit">
<span class="error" style="color: darkred;margin-left: 10px" id="id_error"></span>
</div>
</form>
</div>
</div>
</div>
</body>
<script>
$('#id_img').click(function () {
// img 标签有个特性，只要src变了，他就会重新向src地址发请求拿数据
var url = $(this).attr('src') + '?' // /get_code/?????????
//console.log(url)
//var url = '/get_code/?time=' + '取当前时间'
$(this).attr('src', url)
})
// 使用ajax做登录
$('#id_submit').click(function () {
var serialize_data = $('#login_form').serializeArray()
var data = {}
// 简单方式
/*
$.each(serialize_data, function (i, v) {
data[v['name']] = v['value']
})
*/
//复杂方式---》属性选择器
var username = $('[name="username"]').val()
var password = $('[name="password"]').val()
var code = $('[name="code"]').val()
var csrfmiddlewaretoken = $('[name="csrfmiddlewaretoken"]').val()
data['username'] = username
data['password'] = password
data['code'] = code
data['csrfmiddlewaretoken'] = csrfmiddlewaretoken
$.ajax({
url: '/login/',
method: 'post',
data: data,
success: function (data) {
console.log(data)
if (data.code == 100) {
location.href = data.url
} else {
$('#id_error').html(data.msg)
}
}
})
})
</script>
</html>
1 在同一个浏览器中：
先打开登录页面：验证码---》在输入老的验证码--》就不能用了，只能用下面那个验证码
再打开一次登录页面：验证码
他俩相互影响，只能使用后面的验证码了
2 在不同浏览器中：
先打开登录：有验证码
再换ie浏览器：有验证码
他俩相互不影响
def index(request):
# 取出所有文章--》没有加分页
article_list = Article.objects.all().order_by('create_time')
# 推荐文章--》按阅读数高的排-->取5条
# article_hot = Article.objects.all().order_by('点赞数')
return render(request, 'index.html', {'article_list': article_list})
def logout(request):
auth_logout(request)
return redirect('/')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/js/jquery.min.js"></script>
<link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
<script src="/static/bootstrap/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="/static/font-awesome/css/font-awesome.min.css">
<style>
span {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="header">
<nav class="navbar navbar-default">
<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="/">博客园</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>
</ul>
{% if request.user.is_authenticated %}
<ul class="nav navbar-nav navbar-right">
<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="#">后台管理</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>
</ul>
{% else %}
<ul class="nav navbar-nav navbar-right">
<li><a href="/login/">登录</a></li>
<li><a href="/register/">注册</a></li>
</ul>
{% endif %}
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
<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">
<p><a href="">震惊，17岁少女。。。</a></p>
<p><a href="">霸道总裁爱上我</a></p>
<p><a href="">我的霸道男朋友</a></p>
</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><h3 class="panel-title">重金求子</h3></div>
<div class="panel-body">
<p><a href="">联系电话：18888888</a></p>
<p><a href="">微信：asdfasdf</a></p>
</div>
</div>
<div class="panel panel-danger">
<div class="panel-heading"><h3 class="panel-title">广告招商</h3></div>
<div class="panel-body"> Panel content</div>
</div>
</div>
<div class="col-md-7">
{% for article in article_list %}
<div class="media">
<h3 class="media-heading"><a href="">{{ article.title }}</a></h3>
<div class="media-left">
<a href="#">
<img alt="64x64" class="media-object" style="width: 64px; height: 64px;"
src="/media/{{ article.blog.userinfo.avatar }}">
</a>
</div>
<div class="media-body">
{{ article.desc }}
</div>
<div class="bottom-article" style="margin-top: 8px">
<span><a href="">{{ article.blog.userinfo.username }}</a></span>
<span>{{ article.create_time|date:'Y-m-d H:i:s' }}</span>
<span class="glyphicon glyphicon-thumbs-up">{{ article.up_number }}</span>
<span><i class="fa fa-address-card-o"
style="margin-right: 10px"></i><span>{{ article.commit_number }}</span></span>
</div>
</div>
<hr>
{% endfor %}
</div>
<div class="col-md-3">
<div class="panel panel-success">
<div class="panel-heading"><h3 class="panel-title">48小时排行榜</h3></div>
<div class="panel-body"> Panel content</div>
</div>
<div class="panel panel-info">
<div class="panel-heading"><h3 class="panel-title">72小时排行榜</h3></div>
<div class="panel-body"> Panel content</div>
</div>
<div class="panel panel-warning">
<div class="panel-heading"><h3 class="panel-title">Panel title</h3></div>
<div class="panel-body"> Panel content</div>
</div>
</div>
</div>
</div>
</body>
</html>
————————
————
1 后端
-拿出所有文章
#2 页面布局
-头部---》标题栏
-navbar--》删除一些，改文字
-点击下拉事件---》导入bootstrap的js
-中间部分：左：2 中：7 右：3
-左侧右侧：使用面板
-中间部分：for 循环文件---》media
# 3 admin的使用
-django提供给咱们的后台管理
-我们目前用来快速录入数据
-admin.py 注册表
admin.site.register(UserInfo)
# 4 开启media访问
-路由中加入：
path('media/<path:path>', serve, {'document_root': settings.MEDIA_ROOT}),
-用户头像，没有/media/前缀，自己拼接
-从文章到用户
文章--博客--用户
浙公网安备 33010602011771号