首页和登录页分离

1.登录模板login.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <form method="post">
        <p>用户名:<input type="text" name="username"></p>
        <p>密码:<input type="password" name="pwd"></p>
        <p><input type="submit" value="提交"></p>
        <hr>
    </form>
    <p> {{ result }}</p>
</body>
</html>

2.URL设置
这里写图片描述

 url(r'^login/', "hello.views.login")

表示浏览器访问login,就指向hello应用下views文件下login方法

3.在login方法下响应login模板和完成登录功能

def login(request):
    msg = {'result': ''}

    if request.method == 'POST':
        getUserName = request.POST.get('username')
        getPwd = request.POST.get('pwd')
        # 实例化UserLogin类
        loginObj = UserLogin(getUserName,getPwd)
        if loginObj.isLogin():
            myReponse = HttpResponse("<script>self.location='/index'</script>")
            myReponse.set_cookie('userlogin_username',getUserName,3600)
            return myReponse
        else:
            msg['result'] = '用户名或密码错误'

    myReponse = render_to_response("login.html", msg)
    return myReponse

其中我们使用了UserLogin类,并用此类中的方法完成了用户是否已经登录的验证。
UserClass.py:

# coding:utf-8

class UserLogin:
    userName = ''
    pwd = ''

    # 构造方法
    def __init__(self,username,pwd):
        self.userName = username
        self.pwd = pwd

    # 登录验证方法
    def isLogin(self):
        if self.userName == 'jack' and self.pwd == '123':
            return  True
        else:
            return False

在views.py中使用之前必须要引入:

from UserClass import UserLogin

表示从UserClass中导入UserLogin。

4.在login方法中,登录成功就跳转到了首页,首页显示登录用户名

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
   <h2>这是首页,当前登录用户是:{{ username }}</h2>
    <p><a href="##">安装退出</a></p>
</body>
</html>
def hi(request):
    msg = {'username':'游客'}
    if request.COOKIES.get('userlogin_username') != None :
        msg['username'] =  request.COOKIES.get('userlogin_username')
    myReponse = render_to_response("index.html",msg)
    return myReponse
### 回答1: 好的,这是一个关于如何创建一个华丽的登录页面的前后端分离的方案。 前端部分: 1. 使用 HTML CSS 创建登录页面的布局样式。可以使用响应式设计,使页面在不同的设备上都能很好地呈现。 2. 使用 JavaScript 实现表单验证功能,确保用户提交的数据是有效的。 3. 使用 Ajax 向后端发送登录请求,并处理后端返回的响应。 后端部分: 1. 使用后端语言(如 PHP、Java、Python 等)创建一个登录接口,用于处理前端发来的登录请求。 2. 在登录接口中,使用数据库(如 MySQL、MongoDB 等)来存储用户的注册信息,并根据用户提交的登录信息进行验证。 3. 如果登录信息验证成功,则在后端生成一个认证令牌(如 JWT),并将其返回给前端。如果登录信息验证失败,则返回相应的错误信息。 这样,就可以实现一个前后端分离登录页面了。希望这对你有帮助。 ### 回答2: 华丽的登录页面前后端分离实现可以分为前端部分后端部分。前端部分负责页面的展示用户交互,后端部分负责处理前端的请求并进行数据处理验证。 前端部分: 1. 设计一个华丽的登录页面,包括美观的界面设计、动画效果交互元素。 2. 使用HTMLCSS编写页面的结构样式,通过JavaScript添加交互行为。 3. 通过AJAX技术向后端发送登录请求,并实时更新页面。 后端部分: 1. 后端使用一种服务器端编程语言(如Java、Python等)编写处理登录请求的代码。 2. 设计登录接口,接收前端传递的用户名密码,并进行验证。 3. 对用户输入进行身份验证,比对数据库中的用户名密码是否匹配。 4. 返回登录结果给前端,如登录成功或失败,并根据结果进行相应操作。 前后端交互: 1. 前端通过AJAX技术将用户输入的用户名密码发送到后端。 2. 后端接收到请求后,进行身份验证,验证结果返回给前端。 3. 前端根据验证结果,展示对应的页面信息,如登录成功后跳转到主页,登录失败则提示错误信息。 总结: 通过前后端分离实现华丽的登录页面,可以提高用户体验页面加载速度,使页面更加美观高效。前端负责页面展示交互,后端负责处理请求数据验证。通过前后端的交互,实现用户的登录认证页面跳转。这样的实现方式可以提高系统的可维护性可扩展性,使前端后端开发工作可以并行进行。 ### 回答3: 要设计一个华丽的前后端分离登录页面,需要分别设计前端页面后端接口。 首先,前端页面需要有一个用户输入框密码输入框,以及一个登录按钮。在页面上可以加入一些背景图片、动画效果或渐变色来增加华丽感。可以使用HTMLCSS来实现美化的效果。使用JavaScript来处理用户的输入验证、API请求响应的处理。 后端需要设计相应的接口。接收前端发送的登录请求并进行验证,比如检查用户名密码是否匹配数据库中的记录。如果验证通过,后端应该返回一个包含用户信息一个用于验证会话的令牌。如果验证不通过,返回一个相应的错误信息。 前后端通信可以使用RESTful API进行。前端发送登录请求时,需要将用户名密码作为参数传递给后端的登录接口。后端在接收到请求后会进行验证,并返回相应的结果。前端根据后端返回的结果进行处理,比如跳转到登录成功页面或者展示相应的错误信息。 为了增加华丽感,可以在前端设计一个动态的登录效果。用户点击登录按钮后,页面可以展示一些华丽的过渡效果,比如过渡动画加载动画。登录成功后,可以展示一个美化的欢迎页面,或者跳转到其他页面。 总的来说,实现一个华丽的前后端分离登录页面需要从前端后端两个方面进行设计实现。前端需要美化页面,增加动画效果,处理用户输入后端的接口请求。后端需要设计相应的接口,进行用户验证并返回结果。通过合理的前后端通信美化效果可以打造一个华丽的登录页面。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值