bottle微框架从注册到应用（二）———注册功能

注册功能

一、前端页面register.html

为了节省代码建议去bootstrap荡吧，哈哈。。。这里只贴表单了

<form method="post" action="">
		<input style="border-radius: 10px" type="text" class="username" name="username" placeholder="请输入手机号"><br><br><br>
		<input style="border-radius: 10px" type="text" class="nickname" name="nickname" placeholder="请输入你的真实姓名"><br><br>
		
		<select class="sex">
				  <option value="1">男</option>
				  <option value="0">女</option>
		</select><br><br>
		
		<input style="border-radius: 10px" type="password" class="password" name="password" placeholder="请输入注册密码">
		<input style="border-radius: 10px" type="password" class="re_password" name="repassword" placeholder="再次输入密码"><br>
                 <span style="color: darkgoldenrod; margin-right: 5px"><a href="/login">跳转登录</a></span><br>
                 
		<div class="signin">
                 <input type="submit" class="submit" value="点击注册" >
        </div>
        
</form>

大概就是这样

二、接口主要验证功能分析

功能	方法
用户名	/^\w{5,20}$/
手机号	/^1[3-9]\d{9}$/
密码	验证两次密码是否一致

三、创建数据库models.py，完成后运行database.py

from sqlalchemy import Column, Integer, Sequence, String, Boolean, Enum
from utils.database import Base


class Users(Base):
    __tablename__ = 'users'
    id = Column(Integer, Sequence('id_seq'), primary_key=True, autoincrement=True)
    username = Column(String(20), unique=True)
    password = Column(String(20))
    img_url = Column(String(200))
    sex = Column(Integer, default=1)
    nickname = Column(String(50))
    is_delete = Column(Boolean, default=False)
    is_superuser = Column(Boolean, default=False)
	
	# 实现注册功能之前必须在这里添加所有字段
    def __init__(self, username, password, img_url, sex, nickname, is_delete, is_superuser):
        self.username = username
        self.password = password
        self.img_url = img_url
        self.sex = sex
        self.nickname = nickname
        self.is_delete = is_delete
        self.is_superuser = is_superuser

    def __repr__(self):
        return "<Users('%s')>" % self.username

四、ajax

说实话作为全栈开发工程师，前端并不是很优秀，大概思路是这样

// 注册功能
$(function(){
    message.showSuccess('请注册用户')

    // 1、正则验证用户名
    let $username = $('.username');
    let $password = $('.password');
    let $rpassword = $('.re_password');
    let $submit = $('.submit')
    $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('用户名可以正常使用')
        }
    }
    
    // 校验密码
    $rpassword.blur(fnCheckPassword);
    function fnCheckPassword() {
        let password = $('.password').val();
        let repassword = $('.re_password').val();
        if (password!==repassword) {
            message.showError('密码不一致')
        }else {
            message.showSuccess('密码一致')
        }
    }
    // 用户注册入口
    $submit.click(fnRegiterBtn);
    function fnRegiterBtn(){
    	// 阻止form默认事件
        event.preventDefault();
        let susename = $('.username').val();
        let snickname = $('.nickname').val();
        let ssex = $('.sex').val();
        let spassword = $('.password').val();
        let srepassword = $('.re_password').val();
        $.ajax({
            url: '/register',
            type: 'POST',
            dataType:'json',
            contentType:'application/json',
            data:{
               username: susename,
               nickname: snickname,
               sex: ssex,
               password: spassword,
               repassword: srepassword,
            },
            success(res) {
                if (res.data==1){
                    message.showSuccess('注册成功')
                    message.showSuccess('开始登录')
                    location.href ="/login"
                }
            }
        })
    }

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

五、实现视图代码，创建views.py

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



# 注册的视图，两个函数方法不一样，请求方式不一样，但是路由必须一致，也是缺点不想flask有插拔式图一次性定义请求方法
# 这里不加method默认为get，加载页面
@route("/register", method=['GET', 'POST'])
def register():
	if request.method == "POST":
		username = request.POST.getunicode('username')
	    nickname = request.POST.getunicode('nickname')
	    print(request.POST)
	    sex = request.POST.get('sex')
	    pwd = request.POST.getunicode('password')
	    repwd = request.POST.getunicode('repassword')
	    data = {
	        'u': username,
	        'p': pwd,
	        'rp': repwd,
	        'nickname': nickname,
	        'sex': sex
	    }
	    print(data)
	    if pwd == repwd:
	        users = Users(username=username, password=pwd, img_url='', sex=sex, nickname=nickname, is_delete=False, is_superuser=False)
	        print(users)
	        session.add(users)
	        session.commit()
	        # session.close()
	        return {'data': 1}
	    else:
	        return {'data': 0}
    return template('register.html', title='注册页面')

注册功能完毕

寄语

何所谓难，何所谓缺点，只不过是还没了解透彻！