西北乱跑娃 --- bottle微框架从注册到应用（三）

一、前端页面实现，创建login.html

<form method="post" action="">
		<input style="border-radius: 20px" type="text" class="username" name="form-username" placeholder="用户名"><br><br>
		<input style="border-radius: 20px" type="password" class="password" name="form-password" placeholder="密码"><br>
		<span style="color: darkgoldenrod; margin-right: 5px">没有用户名<a href="/register">点击注册</a></span>
		<div class="signin">
			<input type="submit" value="点击登录" >
		</div>
</form>

二、在static下的js中创建login.js

// 登录功能
$(function(){
    message.showSuccess('请登录用户')
    let $username = $('.username');
    $username.blur(fnCheckUsername);
    function fnCheckUsername() {
        let username = $('.username').val();
        if (username==='') {
            message.showError('用户名不能为空')
            return;
        }
        if(!(/^\w{5,20}$/).test(username)){
            message.showError('用户名长度为5-20位')
        }else {
            message.showSuccess('用户名可以正常使用')
        }
        $.ajax({
            url:'/tx',
            type:'POST',
            data:{
               username:username,
                },
            success(res){
                if(res.image){
                    $('.avtar_img').attr('src',res.image)
                }
            }
        })

    }
	// 指定浏览器显示响应式
    let hd = $(window).width();
	// alert(wd)
    if (hd>=620) {
        $('.login-form').css("width", "30%");
    } else {
        $('.login-form').css("width", "80%");
    }
})

三、后端代码

from bottle import template, request, redirect, response
from bottle import route
from .models import Users
from utils.database import session


# 接口视图为了接受ajax并验证用户是否存在，如果存在则返回用户头像，类似于QQ登录
@route("/tx", method='POST')
def tx():
    username = request.forms.getunicode('username')
    result = session.query(Users).filter_by(username=username).first().img_url
    return {'image': result}


# 负责加载登录页面
@route("/login")
def login():
	# title建议添加，方面直接在模板中渲染标题
    return template('login.html', title='登录页面')


# 负责提交post表单
@route("/login", method='POST')
def do_login():
	# 这里一定要重视，如果使用request.forms.get会出现中文乱码，因此强烈建议所有表单使用 request.forms.getunicode()
    username = request.forms.getunicode('form-username')
    password = request.forms.getunicode('form-password')
    try:
    	users = session.query(Users).filter_by(username=username).first().password
    except:
    	session.rollback()
    	users = session.query(Users).filter_by(username=username).first().password
    finally:
	    if users:
	        if users == password:
	            val = session.query(Users).filter_by(username=username).first().nickname
	            如果登录成功，在 response.set_cookie设置属性，生成的cookie字典中account为键，val为值。secret为加密中的salt，max_age为cookie的过期时间
	            response.set_cookie("account", val, secret='123', max_age=800)
	            # db_session.remove()
	            return redirect('/')
	        else:
	            return '用户名或密码错误  <a href="/login">重新登录</a>'
	    else:
	        return redirect('/register')

四、官方文档对cookie的属性解释

五、bottle提升cookie安全性

持续更新2019.9.8