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进行全局替换

三. 用户登陆

Django用户验证可参考：https://www.cnblogs.com/linxiyue/p/4060213.html

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

转载于:https://www.cnblogs.com/regit/p/9482463.html

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

Vue.js-Day09【项目实战(附带完整项目源码)-day04：用户个人中心页面、用户登录页面、将项目打包部署到服务器上、项目汇报、实训心得】
Vue.js实训[基础理论(5天)+项目实战(5天)]博客汇总表[详细笔记] 实战项目源码[链接:https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA 提 ...
html网页设计一个简单的用户登录页面
结果代码 login.html <!DOCTYPE html> <html lang="en"> <head><meta charset ...
3、Vue+ElementUI制作用户登录页面
前面两篇简单了解了一下vue和SPA,现在来用Vue+ElementUI做一个用户登录页面,ElementUI是Element出的一套针对vue的UI库,类似的UI库非常多,ElementUI只是其中 ...
flutter 一个用户登录页面
一个用户登录页面输入校验 import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart';void m ...
php编写用户登录页面,PHP实现用户登录页面
PHP学习日常,放在上面记录一下咯我用了bootstrap框架,这样的界面要好看一点登录页面: 必须用户名.密码.验证码都输入正确才能登录成功喔,否则出现下面提示登陆成功之后,登录和注册选项切换 ...
实战SSM_O2O商铺_48【用户登录】用户登录Dao-Service-Controller-View层的开发
文章目录概述 Dao层接口 mapper映射文件 LocalAuthDao.xml 单元测试 Service层接口实现类 MD5密码加密工具类单元测试 Controller层 LocalAu ...
php编写用户登录页面,js+php实现静态页面实时调用用户登陆状态的方法
这篇文章主要介绍了js+php实现静态页面实时调用用户登陆状态的方法,采用在静态页面中使用js调用php页面从而实现用户登录状态的实时调用功能,需要的朋友可以参考下本文实例讲述了js+php实现静态 ...
将页面转发到用户登录页面
通过<jsp:forward>动作标识可以将请求转发到其他的Web资源,如另一个JSP页面,Html页面,Servlet页面 <jsp:forward>动作标识的语法格式: & ...
react 项目实战（二）创建用户添加页面及 fetch请求 json-server db.json -w -p 8000...
1.安装路由 npm install -S react-router@3.x 2.新增页面我们现在的应用只有一个Hello React的页面,现在需要添加一个用于添加用户的页面. 首先在/src目 ...

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

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

最新文章

热门文章