码迷，mamicode.com
首页 > 其他好文 > 详细

完成注册功能

时间：2017-11-22 14:16:49      阅读：177      评论：0      收藏：0      [点我收藏+]

标签：navig   can   z-index   ble   isp   导航条   animation   model   body   

  1. js文件： onclick函数return True时才提交表单，return False时不提交表单。
  2. html文件：
    1. <form>中设置 action和method="post"
    2. <input> 中设置 name
  3. 主py文件中：
    1. from flask import  request, redirect, url_for
    2. @app.route(‘/regist/‘, methods=[‘GET‘, ‘POST’])

def regist():

   if request.method == ‘GET‘:

        return render_template(‘regist.html‘)

   else:

        username = request.form.get(‘username’)#获取form中的数据

        判断用户名是否存在:存在报错

  不存在，存到数据库中

       redirect重定向到登录页

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(20))
db.create_all()
@app.route(‘/‘)
def index():
    return render_template(‘index.html‘)

@app.route(‘/regist/‘,methods=[‘GET‘,‘POST‘])
def regist():
    if request.method==‘GET‘:
        return render_template(‘regist.html‘)
    else:
        usern=request.form.get(‘username‘)
        passw=request.form.get(‘password‘)
        user=User.query.filter(User.username==usern).first()
        if user:
            return u‘username existed.‘
        else:
            user1=User(username =usern,password=passw)
            db.session.add(user1)
            db.session.commit()
    return redirect(url_for(‘login‘))

if __name__ == ‘__main__‘:
    app.run()
import os

SQLALCHEMY_DATABASE_URI = ‘mysql+pymysql://root:@127.0.0.1:3306/mis_db?charset=utf8‘
SQLALCHEMY_TRACK_MODIFICATIONS = False

SELECT_KEY =os.urandom(24)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>维尼乐园</title>
</head>

<link rel="stylesheet" type="text/css" href="../static/css/20.css">
<script src="../static/js/1.js"></script>

</head>
<header class="navbar-wrapper">
    <div class="navbar navbar-black">
        <div class="container cl">
            <nav class="nav navbar-nav nav-collapse" role="navigation" id="Hui-navbar">
                <ul class="cl">
                    <li><a class="logo navbar-logo f-l mr-10 hidden-xs" href="base.html">首页</a></li>
                    <li><span class="logo navbar-slogan f-l mr-10 hidden-xs">简单 &middot; 快乐 &middot; 维尼世界</span></li>
                    <li><a class="denglu.html">登录</a></li>
                    <li><a class="zhuce.html">注册</a></li>
                    <li><a class="#">联系我们</a></li>
                        </ul>
                    </nav>
</div>

        <div class="container">
  <canvas id="c1"></canvas>
  <canvas id="c2"></canvas>
  <div class="snowglobe"></div>
  <div class="highlight"></div>
  <div class="base"></div>
  <div class="baseTop"></div>
  <div class="baseShadow"></div>
  <div class="tree"></div>
  <div class="tree2"></div>
  <div class="tree3"></div>
  <div class="tree4"></div>
  <div class="roof"></div>
  <div class="cabin"></div>
            <footer class="footer mt-20">
    <div class="container-fluid">
        <nav> <a href="#" target="_blank">关于我们</a> <span class="pipe">|</span> <a href="#" target="_blank">联系我们</a> <span class="pipe">|</span> <a href="#" target="_blank">法律声明</a> </nav>
        <p>Copyright &copy;2016 H-ui.net All Rights Reserved. <br>
            <a href="http://www.miitbeian.gov.cn/" target="_blank" rel="nofollow">京ICP备1000000号</a><br>
        </p>
    </div>
</footer>
            <nav class="navbar-userbar hidden-xs">

            </nav>

        </div>
    </div></header>
</html>
.navbar-wrapper{ height: 45px}
.navbar{ position:relative; z-index:1030}
.navbar-black{ background-color: #222}
.navbar-fixed-top{ position:fixed; top:0;left: 0; right: 0; z-index:1030}

/*logo*/
.logo{ display:inline-block; text-decoration:none; cursor:pointer}
a.logo:hover{ text-decoration:none}
.navbar .logo{height: 44px;line-height: 44px;margin-right: 10px;float: left}
.navbar-logo,.navbar-logo-m{font-size: 16px}
.navbar-slogan{ font-size:12px; cursor: default}
.navbar .container{ position:relative}
.navbar-userbar{position:absolute;top:0px; right:15px}
.navbar .container .navbar-userbar{ right:0px}

/*导航*/
.nav{ z-index:1}
.nav > ul{ font-size:0; line-height:0}
.nav > ul > li{ position:relative}
.nav > ul > li,.nav > ul > li > a{ display:inline-block; height:44px; line-height:44px;text-align:center;font-size:20px}
.nav > ul > li > a{ padding:0 20px}
.nav > ul > li > a:hover,.nav > ul > li.current > a{background-color:rgba(255,255,255,0.2); text-decoration:none;
    -webkit-transition: background-color 0.3s ease 0s;
    -moz-transition: background-color 0.3s ease 0s;
    -o-transition: background-color 0.3s ease 0s;
    -ms-transition: background-color 0.3s ease 0s;
    transition: background-color 0.3s ease 0s
}
@media (max-width: 767px) {
    .logo{ margin-right: 0}
    .navbar-nav{display: none}
    .navbar-nav > ul > li{ width: 100%; text-align: left}
    .navbar-nav > ul > li > a{display:block;padding:0 15px; text-align: left}
    .nav-collapse ul,.nav-collapse li {width: 100%;display: block}
    .js .nav-collapse {position: absolute;display: block;float:none; clear:both;max-height: 0;clip: rect(0 0 0 0);margin-left: -15px; margin-right: -15px;overflow: hidden;zoom: 1;
        -webkt-transition:max-height 284ms ease 0s;
        -moz-transition:max-height 284ms ease 0s;
        -o-transition:max-height 284ms ease 0s;
        -ms-transition:max-height 284ms ease 0s;
        transition:max-height 284ms ease 0s}
    .js-nav-active .nav-collapse.closed {max-height: none}
    .nav-collapse.opened {max-height: 9999px}
}

/*导航条风格-黑色*/
.navbar-black{background-color:#222;border-bottom:#080808 1px solid;-moz-box-shadow: 0 0 4px #333333;-webkit-box-shadow: 0 0 4px #333333;box-shadow: 0 0 4px #333333}
.navbar-black .logo{ color:lightseagreen }
.navbar-black .navbar-logo-m{color: #eee}
.navbar-black .navbar-nav > ul > li,
.navbar-black .navbar-nav > ul > li > a{ color:lavenderblush}
.navbar-black .navbar-nav > ul > li > a:hover,
.navbar-black .navbar-nav > ul > li.current > a{color:darkorange}
.navbar-black .navbar-userbar{ color: darkorange}
@media (max-width: 767px) {
.navbar-black .navbar-nav > ul > li{border-bottom: solid 1px #222}
.navbar-black .navbar-nav > ul > li > a:hover,
.navbar-black .navbar-nav > ul > li.current > a{ background: #777}
}

/*面包导航*/
.nav-toggle,a.nav-toggle{position:absolute; top:0px; right:15px; font-size: 20px; color:#999; padding:6px 11px;background-color:rgba(0,0,0,0.5);color:#fff;-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none}
.nav-toggle:hover,a.nav-toggle:hover{ text-decoration: none; color:#fff}



#c1,
#c2 {
  position: absolute;
  top: 0;
  left: 0;
  height: 300px;
  width: 300px;
  padding-left: 14cm;
  border-radius: 50%;

}

#c1 {
  z-index: -11;
}
#c2 {
  z-index: 1000;
}

.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: relative;
}

.snowglobe {
  height: 300px;
  width: 300px;
  border-radius: 50%;
  background-color: #dadee8;
  border: 2px solid #cad0de;
  z-index: -30;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;

}



.snowglobe:after {
  position: absolute;
  content: "";
  height: 280px;
  width: 290px;
  border-radius: 50%;
  top: 17px;
  background: #dadee8;
}

.base {
  position: relative;
  border-bottom: 50px solid #534f54;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  height: 0;
  width: 242px;
  margin-top: -60px;
  z-index: -10;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.base:after {
  position: absolute;
  content: "";
  top: 25px;
  left: -10px;
  width: 262px;
  height: 50px;
  border-radius: 125px / 25px;
  background: #534f54;
}

.baseTop {
  background-color: #fff;
  width: 242px;
  height: 40px;
  border-radius: 125px / 20px;
  margin-top: -72px;
  box-sizing: border-box;
  border-bottom: 8px solid #dadee8;
  z-index: -10;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.baseShadow {
  position: absolute;
  background-color: #a1a6b1;
  width: 275px;
  height: 60px;
  border-radius: 130px / 30px;
  top: 270px;
  z-index: -40;
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
}

.tree {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-bottom: 70px solid #8caba1;
  margin-top: 67px;
  margin-left: -80px;
  top: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.tree:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #7e9990;
}

.tree4 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 30px solid transparent;
  border-right: 30px solid transparent;
  border-bottom: 100px solid #516463;
  margin-top: 65px;
  margin-left: -50px;
  top: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.tree4:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-right: 30px solid transparent;
  border-bottom: 100px solid #5a706e;
}

.tree2 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #5a706e;
  margin-top: 67px;
  margin-left: 70px;
  top: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.tree2:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 70px solid #516463;
}

.tree3 {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 20px solid transparent;
  border-bottom: 80px solid #7e9990;
  margin-top: 69px;
  margin-left: -20px;
  top: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.tree3:after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-right: 20px solid transparent;
  border-bottom: 80px solid #8caba1;
}

.roof {
  position: absolute;
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 31.25px solid #ba616d;
  margin-top: 58px;
  margin-left: 30px;
  top: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.cabin {
  position: absolute;
  background: #534f54;
  display: inline-block;
  height: 40px;
  margin-top: 93px;
  margin-left: 30px;
  width: 80px;
  top: 27%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.cabin:before {
  border-bottom: 25px solid #534f54;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: -25px;
  width: 0;
}
.footer{border-top:1px solid #E8E8E8; padding:100px 0;font-family:tahoma,Arial;font-size:12px;color:#999;line-height:22px;text-align:center}
.footer a,.footer a:hover{color:#999}
var timer=setInterval(function() {
  var c1 = document.getElementById("c1");
  var c2 = document.getElementById("c2");
  var ctx1 = c1.getContext("2d");
  var ctx2 = c2.getContext("2d");
  c1.height = 300;
  c1.width = 300;
  c2.height = 300;
  c2.width = 300;

  ctx1.fillStyle = "white";
  ctx2.fillStyle = "white";
  var c1Flakes = [];
  var c2Flakes = [];

  function Flake(r) {
    this.x = Math.random() * 300;
    this.y = Math.random() * 250;
    this.r = r;
  }

  for (var i = 0; i <= 80; i++) {
    var flake = new Flake(2);
    c1Flakes.push(flake);
  }

  for (var i = 0; i <= 80; i++) {
    var flake = new Flake(3);
    c2Flakes.push(flake);
  }

  function render() {
    ctx1.clearRect(0, 0, 300, 300);
    ctx2.clearRect(0, 0, 300, 300);
    for (var i = 0; i < c1Flakes.length; i++) {
      ctx1.beginPath();
      ctx1.arc(c1Flakes[i].x, c1Flakes[i].y, c1Flakes[i].r, 0, Math.PI * 2);
      ctx1.fill();
      if (c1Flakes[i].y <= 245){
      c1Flakes[i].y+= .3;
      }
      else{
        c1Flakes[i].y = 0;
      }
    }

    for (var i = 0; i < c2Flakes.length; i++) {
      ctx2.beginPath();
      ctx2.arc(c2Flakes[i].x, c2Flakes[i].y, c2Flakes[i].r, 0, Math.PI * 2);
      ctx2.fill();
      if (c2Flakes[i].y <= 245){
      c2Flakes[i].y += .6;
      }
      else{
        c2Flakes[i].y = 0;
      }
    }
    requestAnimationFrame(render);
  }
  render();
})();

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

<link href="../static/css/login.css" rel="stylesheet" type="text/css">
  <script src="../static/js/login.js"></script>
</head>
<body bgcolor="#a9a9a9">

 <div class="box">

    <div class="titulo">登录</div>

       <div class="input_box1"  >
           <input type="username" id="uname" placeholder="请输入用户名" >

       </div>
       <div class="input_box2">
           <input type="password" id="upass"  placeholder="请输入密码">
       </div>
       <div id="error_box"><br></div>
   <div class="input_box3">
<a href="#" class="enviar">登录</a>

   </div>
   </div>
  </div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>

<link href="../static/css/login.css" rel="stylesheet" type="text/css">
  <script src="../static/js/login.js"></script>
</head>
<body bgcolor="#a9a9a9">

 <div class="box">

    <div class="titulo">注册</div>
  <form action="{{  url_for(‘regist‘) }}" method="post">
       <div class="input_box1"  >
           <input type="username" id="uname" placeholder="请输入用户名" >

       </div>
       <div class="input_box2">
           <input type="password" id="upass"  placeholder="请输入密码">
          <input type="password1" id="upass"  placeholder="请确认密码">
       </div>
       <div id="error_box"><br></div>
   <div class="input_box3">
<a href="#" class="enviar">注册</a>

   </div>
   </div>
  </div>
</div>
</body>
</html>
body {
    background: -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -webkit-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -webkit-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-color: #840b2a;
    background: -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -moz-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -moz-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-color: #840b2a;
    background: -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.15) 30%, rgba(255,255,255,.3) 32%, rgba(255,255,255,0) 33%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.3) 13%, rgba(255,255,255,0) 14%) 0 0, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 17%, rgba(255,255,255,.43) 19%, rgba(255,255,255,0) 20%) 0 110px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) -130px -170px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.2) 11%, rgba(255,255,255,.4) 13%, rgba(255,255,255,0) 14%) 130px 370px, -o-radial-gradient(rgba(255,255,255,0) 0, rgba(255,255,255,.1) 11%, rgba(255,255,255,.2) 13%, rgba(255,255,255,0) 14%) 0 0, -o-linear-gradient(45deg, #343702 0%, #184500 20%, #187546 30%, #006782 40%, #0b1284 50%, #760ea1 60%, #83096e 70%, #840b2a 80%, #b13e12 90%, #e27412 100%);
    background-size: 1000px 1000px, 410px 410px, 610px 610px, 530px 530px, 730px 730px, 1000px 1000px;
    background-color: #840b2a;
}
div{
    margin: auto;
}
*{
    margin: 0px;
    padding: 0px;
}
li{
    list-style-type: none;
    background-color: sandybrown;
}

.a{
    float: left;
}
.b{
    float: right;
}
a{
    background-color: #000;
    color: #FFF;
    font-weight: bold;
    background-repeat: no-repeat;
    background-position: right;
    font-size: 18px;
    text-decoration: none;
    padding: 0px 20px;
}
a:hover{

    background-color: #F30;
}
  function fnlogin() {
            var oUname = document.getElementById("uname");
            var oUpass = document.getElementById("upass");
            var oPas=document.getElementById("upas")
            var oError = document.getElementById("error_box");
            oError.innerHTML = "<br>"
            if (oUname.value.length < 6 || oUname.value.length > 12) {
                oError.innerHTML = "name:6-20";
                return;
            }
            else if(oUname.charCodeAt(0)>=48&&oUname.charCodeAt(0)<=57){
                oError.innerHTML="first number.";
                return;
            }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="only letter or number."
                }
            }
             if(oPas.value!=oPass.value){
                oError.innerHTML=‘密码输入不正确‘
            }

            if (oUpass.value.length < 6 || oUpass.value.length >20) {
                oError.innerHTML = "password:6-20";
                return;
            }
            window.alert("登录成功！")
        }

 

 

完成注册功能

标签：navig   can   z-index   ble   isp   导航条   animation   model   body   

原文地址：http://www.cnblogs.com/892356821qqcom/p/7872439.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！