zoukankan      html  css  js  c++  java
  • 完成登录功能,用session记住用户名

    登录功能完成:

    1.js:设置return

    function fnLogin() {
                var oUname=document.getElementById("uname");
                var oUpass=document.getElementById("upass");
                var oError=document.getElementById("error_box");
                var isError=true;
                oError.innerHTML="<br>"
    
                 //uname
                if ((oUname.value.length < 6) || (oUname.value.length > 20)) {
                    oError.innerHTML = "用户名要6-20位";
                    isError=false;
                    return isError;
                }else if ((oUname.value.charCodeAt(0)>=48)&&(oUname.value.charCodeAt(0)<=57)){
                    oError.innerHTML="首字母必须是字母";
                    isError=false;
                    return isError;
                }else {
                    for(var i=0;i<oUname.value.length;i++){
                        if ((oUname.value.charCodeAt(i)<48)||(oUname.value.charCodeAt(i)>57)&&(oUname.value.charCodeAt(i)<97) ||(oUname.value.charCodeAt(i)>122)){
                            oError.innerHTML="用户名只能是字母和数字";
                            isNotError=false;
                            return isError;
                        }
                    }
                }
                //upass
                if ((oUpass.value.length < 6 )|| (oUpass.value.length > 20)) {
                    oError.innerHTML = "密码要6-20位";
                    isError=false;
                    return isError;
                }
                return isError;
        window.alert("登录成功!")
            }

    2.html:设置

    1. form
    2. input
    {% extends'base.html' %}
    {% block title %}登录{% endblock %}
    {% block head %}
        <link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/login.css') }}">
        <script src="{{ url_for('static',filename='/js/login.js')}}"></script>
    {% endblock %}
    
    {% block main %}
    
    <div class="box">
        <h2>登录</h2>
        <form action="{{ url_for('login') }}" method="post">
        <div class="input_box">
            <input id="uname" type="text"placeholder="请输入用户名" name="username">
            <input id="unickname" type="text"placeholder="请输入昵称" name="nickname">
        </div>
    
        <div class="input_box">
            <input  id="upass" type="password"placeholder="请输入密码" name="password">
        </div>
    
        <div class="input_box">
            <a href="{{ url_for('enroll') }}">没有账号?立即注册</a>
        </div>
    
        <div id="error_box"><br></div>
        <div class="input_box">
            <button class="button" onclick="fnLogin()">登录</button>
        </div>
        </form>
    </div>
    {% endblock %}

    3.py:

    1. @app.route设置methods
    2. GET
    3. POST
      1. 读取表单数据
      2. 查询数据库
        1. 用户名密码对:
          1. 记住用户名
          2. 跳转到首页
        2. 用户名密码不对:
          1. 提示相应错误。
    from flask import Flask, render_template, request, redirect, url_for, session
    from flask_sqlalchemy import SQLAlchemy
    import config
    
    app=Flask(__name__)
    app.config.from_object(config)
    db=SQLAlchemy(app)
    
    # 创建用户模型
    class User(db.Model):
        __tablename__ = 'user'
        id = db.Column(db.Integer,primary_key=True,autoincrement=True)
        username = db.Column(db.String(20),nullable=False)
        password = db.Column(db.String(20),nullable=False)
        nickname=db.Column(db.String(50))
    
    # db.create_all()
    # 首页
    @app.route('/')
    def index():
        return render_template('base.html')
    
    #登录
    @app.route('/login/',methods={'GET','POST'})
    def login():
        if request.method=='GET':
            return render_template('login.html')
        else:
            username = request.form.get('username')  # 获取form中的数据
            password = request.form.get('password')
            nickname = request.form.get('nickname')
            user = User.query.filter(User.username == username).first()
            if user:
                if user.password==password:
                    session['user'] = username
                    session.permanent=True
                    return redirect(url_for('index'))  # 返回到首页
            else:
                return u'error username or password' #输出错误
    
    
    #注册
    @app.route('/enroll/',methods={'GET','POST'})
    def enroll():
        if request.method=='GET':
            return render_template('enroll.html')
        else:
            username=request.form.get('username')# 获取form中的数据
            password=request.form.get('password')
            nickname=request.form.get('nickname')
            user = User.query.filter(User.username == username).first()
            if user:
                return u'username existed'
            else:
                user = User(username=username, password=password, nickname=nickname)
                db.session.add(user)#数据库操作
                db.session.commit()
                return redirect(url_for('login'))# 重定向到登录页
    
    
     #提问
    @app.route('/questions/')
    def questions():
        return render_template('questions.html')
    
    
    if __name__ == '__main__':
        app.run(debug=True)

    session:

    1. 从`flask`中导入`session`
    2. 设置`SECRET_KEY`
    3. 操作字典一样操作`session`:增加用户名`session['username']=`username
    import os
    SECRET_KEY = os.urandom(24)
    
    
    SQLALCHEMY_DATABASE_URI = 'mysql+pymysql://root:@127.0.0.1:3306/mis_db?charset=utf8'
    SQLALCHEMY_TRACK_MODIFICATIONS = False

    1.网页运行结果:

    成功运行跳转到首页:

    2.数据库运行结果:

     

  • 相关阅读:
    Struts2多文件上传
    Struts2单文件上传
    java验证码
    spring-day01
    Spring MVC篇一、搭建Spring MVC框架
    连接oracle数据库
    spring 核心技术
    Spring的特点
    spring连接数据库
    oracle学习第六天
  • 原文地址:https://www.cnblogs.com/iamzhuangyuan/p/7871801.html
Copyright © 2011-2022 走看看