zoukankan html css js c++ java

完成登录功能，用session记住用户名

登录功能完成：

js:设置return
html:设置
1. form
2. input
py:
1. @app.route设置methods
2. GET
3. POST
  1. 读取表单数据
  2. 查询数据库
    1. 用户名密码对：
      1. 记住用户名
      2. 跳转到首页
    2. 用户名密码不对：
      1. 提示相应错误。

session：

从`flask`中导入`session`
设置`SECRET_KEY`
操作字典一样操作`session`：增加用户名`session['username']=`username

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)
# db.create_all()
#增加
# user = User(username ='daili',password='12345' )
# db.session.add(user)
# db.session.commit()
#查询
# user=User.query.filter(User.username =='vixx').first()
# print(user.username,user.password)
#删除
# user=User.query.filter(User.username =='vixx').first()
# db.session.delete(user)
# db.session.commit()
# #修改
# user=User.query.filter(User.username =='vixx').first()
# user.password='123456789'
# db.session.commit()
@app.route('/')
def base():
    return render_template('base.html')


@app.route('/login/', methods=['GET','POST'])
def login():
    if request.method=='GET':
        return render_template('login.html')
    else:
        usern=request.form.get('username')
        passw= request.form.get('password')
        user=User.query.filter(User.username==usern).first()
        if user:
            if user.passw==passw:
                session['user']=usern
                session.permanent=True
                return redirect(url_for('base'))
        else:
            return u'error usern or passw'

    #
    # return render_template('login.html')


@app.route('/regist/', methods=['GET','POST'])
def regist():
    if request.method=='GET':
        return render_template('regist.html')
    else:
        username=request.form.get('username')
        print(username)
        password= request.form.get('password')
        user=User.query.filter(User.username==username).first()
        if user:
            return 'username existed'
        else:
            user=User(username=username,password=password)

            db.session.add(user)
            db.session.commit()
            return redirect(url_for('login'))



@app.route('/zimoban/')
def zimoban():
    return render_template('zimoban.html')


@app.route('/zzimoban/')
def zzimoban():
    return render_template('zzimoban.html')


@app.route('/index/')
def index():
    return render_template('index.html')


if __name__ == '__main__':
    app.run(debug=True)

import os

SECRET_KEY=os.urandom(24)

SQLALCHEMY_DATABASE_URI='mysql+pymysql://root:@127.0.0.1:3306/test?charset=utf8'
SQLALCHEMY_TRACK_MODIFICATTONS = False

html文件：

{% extends 'base.html' %}
{% block title %}登录{% endblock %}
{% block head %}
<link rel="stylesheet" type="text/css" href="../static/css/20.css">
<script src="../static/JS/JS30.js"></script>
<script src="{{ url_for('static',filename='JS/JS30.js') }}"></script>
{% endblock %}
{% block main %}
    <body style="background: burlywood">
    <div class="box">
        <h1>登录/Login</h1>
         <form action="{{ url_for('login') }}" method="post">
        <div class="input_box">
            uesrname：<input id="name" type="username" placeholder="请输入用户名" name="username">
        </div>
        <div class="input_box">
            password：<input id="pass" type="password" placeholder="请输入密码" name="password">
        </div>
        <div id="error_box"><br>
        </div>
        <div class="input_box">
{#            <button onclick="fnLogin()">login</button>#}
            <input type="button" class="btn btn-info" onclick="fnLogin()"value="login">
            <a class="link-forget cl-link-blue" href="get_password.html">忘记密码</a><br>
            <a href="regist.html"><input type="button" class="btn btn-info" name="regist" value="新用户注册"></a>
        </div></form>
    </div>
    </body>
{% endblock %}

js文件：

function fnLogin() {
    var oUname = document.getElementById("name");
    var oError = document.getElementById("error_box");
    var oUword = document.getElementById("pass");

    var isoError = true;

    oError.innerHTML = "<br>";
    if (oUname.value.length < 6 || oUname.value.length > 12) {
        oError.innerHTML = "用户名为6到12位";
        return false;
    } else if ((oUname.value.charCodeAt(0) >= 48) && (oUname.value.charCodeAt(0) <= 57)) {
        oError.innerHTML = "用户名首位不能是数字";
        return false;
    } 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 = "用户名只能是字母与数字";
            return false;
        }
    }
    if ((oUword.value.length < 6) || (oUword.value.length > 20)) {
        oError.innerHTML = "password:6-20";
        return false;
    }
    return true;
    window.alert("登录成功！！")
}

结果如下:

查看全文

相关阅读:
Hadoop学习笔记（九）HDFS架构分析
 Hadoop学习笔记（九）HDFS架构分析
 Hadoop学习笔记（八）MapReduce深入分析
 Hadoop学习笔记（八）MapReduce深入分析
 Hadoop学习笔记（七）
Hadoop学习笔记（七）
Hadoop学习笔记（六）启动Shell分析
 Hadoop学习笔记（六）启动Shell分析
 「2018-11-05模拟赛」T5 传送机解题报告
 NOIP 2018 普及组解题报告

原文地址：https://www.cnblogs.com/laidaili/p/7871813.html