对应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后台管理页面注销掉当前后,再进入首页点击登陆,来验证此功能
 
 
 
 

mxonline实战3,编写首页及用户登录页面1的更多相关文章

  1. flutter 制作一个用户登录页面

    flutter 制作一个用户登录页面 用户登录效果图如下: 登录页面如下: import 'package:flutter/material.dart'; import 'package:flutte ...

  2. 6、Django实战第6天:用户登录

    今天开始,我们需要来写后台逻辑了.... 后台逻辑代码都是编写在views.py文件里面,今天要完成的登录功能,因此来编辑users.views.py 这里我们根据请求方法来判断分为2种情况,网页默认 ...

  3. PHP实现用户登录页面

    PHP学习日常,放在上面记录一下咯 我用了bootstrap框架,这样的界面要好看一点 登录页面: 必须用户名.密码.验证码都输入正确才能登录成功喔,否则出现下面提示 登陆成功之后,登录和注册选项切换 ...

  4. react 项目实战(二)创建 用户添加 页面 及 fetch请求 json-server db.json -w -p 8000

    1.安装 路由 npm install -S react-router@3.x 2.新增页面 我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...

  5. JSP内置对象---用户登录页面(get和post)

    Login.jsp 页面: <%@ page language="java" import="java.util.*" contentType=" ...

  6. 用户登录页面——jdbc

    登录页面程序login.jsp <%@ page language="java" import="java.util.*" pageEncoding=&q ...

  7. mxonline实战16:首页配置和xadmin进阶,Ueditor

      对应github地址:第16天   一. 首页配置 1. courses/models.py -->class Course增加字段,迁移数据库

  8. Android布局管理器-使用TableLayout表格布局管理器实现简单的用户登录页面

    场景 Android布局管理器-使用FrameLayout帧布局管理器显示层叠的正方形以及前景照片: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...

  9. JSP内置对象---request对象(用户登录页面(setAttribute))

    在上节 request.jsp 中 添加脚本语句: <% request.setAttribute("password", "123456"); %> ...

随机推荐

  1. ASP.NET 网页动态添加客户端脚本

    在System.Web.UI.Page类中包含了RegisterStarupScript()和RegisterClientScriptBlock()两个方法,使用这两个方法可以实现向Web页面动态添加 ...

  2. 复利计算--web版--总结--软件工程

    复利计算项目 估计用时 实际用时 时间(小时) 5.5小时  6.5小时 总共代码行 500  550 功能包含 单利/复利计算,本金计算,求投资年限,求投资项目利率估计 (计算利息和,计算时间,计算 ...

  3. 我所理解的 PHP Trait

    Trait 是从 PHP 5.4 加入的一种细粒度代码复用的语法.以下是官方手册对 Trait 的描述: Trait 是为类似 PHP 的单继承语言而准备的一种代码复用机制.Trait 为了减少单继承 ...

  4. c# 调用外包程序 等待处理完成结果

    string root = @"J:\yaoqianshu"; string pythonPath = "解压缩拷贝启动动画测试(新).py"; string ...

  5. [转]go中的main函数和init函数

    Go里面有两个保留的函数:init函数(能够应用于所有的package)和main函数(只能应用于package main).这两个函数在定义时不能有任何的参数和返回值.虽然一个package里面可以 ...

  6. 关于Safari浏览器使用的几点总结

    声明:下载的是Safari英文版本,在Windows操作系统下使用. 一.Safari浏览器中的开发者调试工具隐藏得比较深,找了好久才找到的,方法:按一下键盘上的alt键,浏览器上方就会弹出一个开发者 ...

  7. Tomcat的windows10集群搭建(一台电脑同时运行多个tomcat配置方法)

    配置方法(好久不配置了,忘记了,今天还是总结下吧): 1.官网下载tomcat ,我下载了tomcat6.0和tomcat7.0(以便区分) 官网地址:http://tomcat.apache.org ...

  8. jQuery自定义动画

    $(function(){ $(".btn1").click(function(){ $(','opacity':'toggle'}); }); $(".btn2&quo ...

  9. [label][OS] 制作 U 盘安装 Windows 7

    U盘安装完美的WIN7操作系统教程 [编辑] 请使用正版系统   http://item.jd.com/965031.html   以保证您的电脑信息安全 此教程适用与 win7及win8 准备工作 ...

  10. FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG

    发现FIREDAC(DELPHI10 or 10.1)提交数据给ORACLE数据库的一个不是BUG的BUG,提交的表名大小写是敏感的. 只要有一个表名字母的大小写不匹配,ORACLE就会认为是一个不认 ...