四、完成登录功能
4.1、首页和登录页面的配置
前端页面的初始文件，点此下载
（1）把下载好的文件里面的index.html文件拷贝到template文件夹内
（2）在根目录下新建static文件夹，用来存放静态文件，拷贝下载好的css、images、img、js、media到此文件夹下
在settings.py中设置路径
STATICFILES_DIRS = ( os.path.join(BASE_DIR, 'static'), )
（3）替换文件路径，将index.html中../替换成/static/
（4）配置url，在mxonline/ursl.py
from django.views.generic import TemplateView url(r'^$', TemplateView.as_view(template_name='index.html'), name='index'),
（5）登录页面
将login.html 拷贝到template文件夹下面，替换文件路径，../替换成/static/
配置login的url
url(r'^login/$', TemplateView.as_view(template_name='login.html'), name='login'),
（6）修改index.html的a标签，取消注释，更改跳转页面的地址
<a style="color:white" class="fr loginbtn" href="/login/">登录</a>
4.2、用户登录
（1）修改login的路由
from users import views url(r'^login/$', views.user_login, name='login'),
（2）在users/views.py书写login视图
from django.contrib.auth import authenticate, login def user_login(request): if request.method == 'POST': # 获取用户提交的用户名和密码 user_name = request.POST.get('username', None) pass_word = request.POST.get('password', None) # 成功返回user对象,失败None user = authenticate(username=user_name, password=pass_word) if user is not None: # 登录 login(request, user) return render(request, 'index.html') else: return render(request, 'login.html', {'msg':'用户名或密码错误'}) elif request.method == 'GET': return render(request, 'login.html')
（3）修改template/login.html
如果用户登录错误，应该有提示错误信息
<div class="error btns login-form-tips" id="jsLoginTips"></div>
修改为下面 <div class="error btns login-form-tips" id="jsLoginTips">{{ msg }}</div>
判断用户是否登录，加入已经登录，则显示用户姓名和图像及其个人中信息，如果没有登录，则显示登录和注册
<header>
<div class=" header">
<div class="top">
<div class="wp">
<div class="fl"><p>服务电话：<b>33333333</b></p></div>
{% if request.user.is_authenticated %}
<div class="personal">
<dl class="user fr">
<dd>bobby<img class="down fr" src="/static/images/top_down.png"/></dd>
<dt><img width="20" height="20" src="/static/media/image/2016/12/default_big_14.png"/></dt>
</dl>
<div class="userdetail">
<dl>
<dt><img width="80" height="80" src="/static/media/image/2016/12/default_big_14.png"/></dt>
<dd>
<h2>django</h2>
<p>bobby</p>
</dd>
</dl>
<div class="btn">
<a class="personcenter fl" href="usercenter-info.html">进入个人中心</a>
<a class="fr" href="/logout/">退出</a>
</div>
</div>
</div>
{% else %}
<!--登录后跳转-->
<a style="color:white" class="fr registerbtn" href="register.html">注册</a>
<a style="color:white" class="fr loginbtn" href="/login/">登录</a>
{% endif %}
</div>
</div>
<div class="middle">
<div class="wp">
<a href="index.html"><img class="fl" src="/static/images/logo.jpg"/></a>
<div class="searchbox fr">
<div class="selectContainer fl">
<span class="selectOption" id="jsSelectOption" data-value="course">
公开课
</span>
<ul class="selectMenu" id="jsSelectMenu">
<li data-value="course">公开课</li>
<li data-value="org">课程机构</li>
<li data-value="teacher">授课老师</li>
</ul>
</div>
<input id="search_keywords" class="fl" type="text" value="" placeholder="请输入搜索内容"/>
<img class="search_btn fr" id="jsSearchBtn" src="/static/images/search_btn.png"/>
</div>
</div>
</div>
<nav>
<div class="nav">
<div class="wp">
<ul>
<li class="active" ><a href="index.html">首页</a></li>
<li >
<a href="course-list.html">
公开课<img class="hot" src="/static/images/nav_hot.png">
</a>
</li>
<li >
<a href="teachers-list.html">授课教师</a>
</li>
<li ><a href="org-list.html">授课机构</a></li>
</ul>
</div>
</div>
</nav>
</div>
</header>