完成注册功能-CSDN博客

本文链接：https://blog.csdn.net/qq_35219823/article/details/88402593

完成注册功能

js文件： onclick函数return True时才提交表单，return False时不提交表单。
html文件：
1. <form>中设置 action和method="post"
2. <input> 中设置 name
主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("登录成功！")
        }