mxonline实战3，编写首页及用户登录页面1

 
 
 
对应github地址：首页和用户登陆1
 
 
一. 显示首页
 
1. 修改mxonline/setttings.py
在TEMPLATES代码块修改DIRS为 'DIRS': [os.path.join(BASE_DIR, 'templates')],
 
2. 修改mxonline/urls.py，添加一行首页path，并导入TemplateView
 
 
3. 在templates文件夹中加入index.html文件，
此时就可以通过http://127.0.0.1:8000访问首页了，但是没有样式
 
4. 新建static目录，把静态资源文件放到此目录下，并在mxonline/settings.py下添加设置
并且把index.html中的所有".." 替换成"/static" , 我没加前面的"/"也可以，经验证，可以在IE中正常显示样式，但是在chrome浏览器中样式是乱的
 
 
 
二. 显示login页面
 
1. 拷贝login.html到templates目录， 修改login.html中的".."为"static"
2. 在mxonline/urls.py中添加
3. 查找templates/index.html中登录字样，将其中的href="login.html"修改为href="/login/"，并取消前后端的注释
4. 接着第3步的位置，点击紧接着下面一行的<div class="personal">前面的减号，收起代码段。暂时注释掉个人中心的代码，也就是在首页不显示用户登陆信息，最好先从后面写注释
 
注意：pycharm中可以用crtl+shift+r进行全局替换
 
 
 
 
三. 用户登陆
 
 
 
1. 修改mxonline/urls.py，在原基础上修改为如下
 
 
2. 新建users/urls.py，在多应用的情况下可让结构更加清晰
 
 
3. 编写users/views.py
views.py文件就是定义一个或多个函数，功能是：接收request的请求对象，处理后返回response对象
 
注意：
1） 这里view函数不能定义为login, 否则会与django.contrib.auth导入的login重名，导致递归调用自己
2）验证用户名和密码user = authenticate(user_name=username, pass_word=password)中，其中user_name和pass_word是authenticate()的参数，接收上面变量username, password的值
 
 
3） if user is not None and user.is_active中， user.is_active表示用户是否活跃,默认True。一般不想删除用户，而是将用户的is_active设为False
4） 这里还没定义用户中心页面，所以验证成功还是返回首页index.html，后面页面写好后，会修改
 
 
4. 修改templates/index.html页面中的form标签
修改action="/login/"
在</form>前加上{% csrf_token %}
 
 
5. 使用if模板标签来判断用户是否登陆，如果登陆就显示用户，如果没登陆就显示登陆，注册选项。
需要在templates/index.html中修改为如下
其中<div class="personal"...>为显示用户登陆时的效果，<div class="wp"...>为用户没登陆时的效果，使用request.user.is_authenticated来判断用户是否登陆
 
 
 
6. 使用户使用邮箱地址也能登陆
1）在users/views.py中定义一个类customBackend()
还需要导入UserProfile，Q以及ModelBackend
from django.db.models import Q
from .models import UserProfile
from django.contrib.auth.backends import ModelBackend
 
2）在mxonline/settings.py中添加
 
 
7. 用户名或者密码错误时，在login.html页面上给出提示信息
1）在users/views.py的 def my_login(request)中，修改验证不成功时的return语句，在{}中添加内容
2）修改templates/login.html的79行, 这个就是用来显示错误提示信息的
添加常量模板{{ msg }}
 
这时候因为logout功能还没写，所以需要先登进xadmin后台管理页面注销掉当前后，再进入首页点击登陆，来验证此功能
 
 
 
 
posted @ 2018-08-15 16:55  坚强的小蚂蚁  阅读(629)  评论(0)  编辑  收藏  举报