zoukankan      html  css  js  c++  java
  • flask_ajax登录注册

    
    
    
    
    

    Flask_restful。

    注册的html
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
    
        <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    
          <script>
        function register_data(){
    
            var u =  $("#d_user").val();
            var p =  $("#d_pass").val();
    
            if(p!="" && u!="")
            {
    
                  $.ajax({
                   type: "post",
    
                   url: "/register_data/",
    
                   data: {
                       'username':u,
                       'password':p
                   },
    
                   dataType: "json",
                   success: function(data){
                       // console.log(data.success_data);
                       // alert("注册成功!" + data.success_data);
    
    
                       var a = data.success_data;
    
                       $("#sd").html(a+":     注册成功");
    
                   }
               });
            }
    
            else{
                alert("不能为空");
            }
        }
    
    
    
    
    
    
      </script>
    
    
    </head>
    <body>
        <h1 align="center">注册</h1>
        <table align="center" border="1px">
            <tr>
                <td>用户名:</td>
                <td><input type="text" id = "d_user"></td>
            </tr>
    
    
            <tr>
                <td>密码:</td>
                <td><input type="password" id = "d_pass"></td>
            </tr>
    
            <tr>
                <td><a href="javaScript:register_data()">注册</a></td>
                <td><a href="{{url_for('login')}}">登录</a></td>
            </tr>
    
        </table>
    
        <p id="sd" align="center"> </p>
    
    </body>
    </html>
    登录的html
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>登录</title>
      <script src="../static/jq/jquery-2.1.0.js"></script>
    {#  '''#}
    {#  ajax使用有5步#}
    {#  1创建异步对象#}
    {#  2设置请求方式和请求地址#}
    {#  3发送请求#}
    {#  4监听状态的变化#}
    {#  5处理返回的结果#}
    {#  '''#}
      <script>
        function tijiao(){
    
            var u =  $("#u1").val();
            var p =  $("#p1").val();
    
            if(p!="" && u!="")
            {
    
                  $.ajax({
                   type: "post",
    
                   url: "/login_data/",
    
                   data: {
                       'username':u,
                       'password':p
                   },
    
                   dataType: "json",
                   success: function(data){
                       console.log(data);
                       alert("登录成功!");
                   }
               });
            }
    
            else{
                alert("不能为空");
            }
        }
    
    
    
    
    
    
      </script>
    </head>
    <body>
    <h1 align="center" >登录</h1>
    
    
    <table border="1px" align="center">
      <tr>
        <td>username:</td>
        <td><input id="u1" value=""></td>
      </tr>
    
      <tr>
        <td>password:</td>
        <td><input id="p1" value=""></td>
      </tr>
    
      <tr>
        <td><a href="javaScript:tijiao()">登录</a></td>
      </tr>
    </table>
    
    
    </body>
    </html>
    config.py
    HOSTNAME = '127.0.0.1'
    PORT     = '3306'
    DATABASE = 'stu'
    USERNAME = 'root'
    PASSWORD = '123456'
    DB_URI = 'mysql+pymysql://{}:{}@{}:{}/{}?charset=utf8'.format(USERNAME,PASSWORD,HOSTNAME,PORT,DATABASE)
    SQLALCHEMY_DATABASE_URI = DB_URI
    
    SQLALCHEMY_TRACK_MODIFICATIONS = False

    py代码

    from flask import Flask, url_for, render_template
    from flask_restful import Api, Resource, reqparse, inputs
    from  flask_sqlalchemy import SQLAlchemy
    import config
    
    '''
    (输入) Flask_restful01 有一个验证、类似于wtf的验证   (输入验证)
     通过 postman 进行输入
    '''
    app = Flask(__name__)
    app.config.from_object(config)
    api = Api(app)
    
    db = SQLAlchemy(app)
    
    class User(db.Model):
        __tablename__ = 'user'
        id = db.Column(db.Integer,primary_key=True)
        username = db.Column(db.String(50))
        password = db.Column(db.String(50))
    
    
    
    #这是一个接受ajax数据的api
    class RegisterView(Resource):
        '''
        注册
        '''
    
        def post(self):
            # 获取解析对象
            parser = reqparse.RequestParser()
            # 获取username  是否是str类型  ,提示用户名验证错误!
            parser.add_argument("username",required=True)
            parser.add_argument("password",required=True)
    
    
            # 拿到这个传来的参数
            args = parser.parse_args()
            # 打印ajax传递来的参数
            print("获取全部传来的值:",args)
            print("username: ",args.get("username"))
            print("password: ",args.get("password"))
    
            us = args.get("username")
            pa = args.get("password")
    
            u = User.query.filter(User.username == us).first()
            if u:
                return {"success_data":"用户名已经存在"}
            else:
                new_user = User(username = us,password = pa)
                db.session.add(new_user)
                db.session.commit()
                return {"success_data": us}
    
    
    # 方式一、在Postman里面输入:http://127.0.0.1:8888/login/?username=哇咔咔 会传递信息 哇咔咔 给username
    # 方式二、通过jquery的方式、给后端进行传参、
    api.add_resource(RegisterView, "/register_data/")
    
    
    
    
    
    
    #这是一个接受ajax数据的api
    class LoginView(Resource):
        '''
        登录
        '''
    
        def post(self):
            # 获取解析对象
            parser = reqparse.RequestParser()
            # 获取username  是否是str类型  ,提示用户名验证错误!
            parser.add_argument("username",required=True)
            parser.add_argument("password",required=True)
    
    
    
    
            # 拿到这个传来的参数
            args = parser.parse_args()
            # 打印ajax传递来的参数
            print("获取全部传来的值:",args)
            print("username: ",args.get("username"))
            print("password: ",args.get("password"))
    
    
            user_data = args.get("username")
    
            # 获取username的字段
            # print("打印前端传来的值:",args.get("username"))
            return {"username": user_data}
    
    
    # 方式一、在Postman里面输入:http://127.0.0.1:8888/login/?username=哇咔咔 会传递信息 哇咔咔 给username
    # 方式二、通过jquery的方式、给后端进行传参、
    api.add_resource(LoginView, "/login_data/")
    
    
    
    @app.route('/login/')
    def login():
    
        return render_template("login.html")
    
    
    @app.route('/')
    def hello_world():
    
        return render_template("register.html")


    if __name__ == '__main__': db.drop_all() db.create_all() app.run(debug=True, port=8887)
  • 相关阅读:
    (转)如何最佳地使用memcached?
    win7 安装 memcached
    (转)怎么把主机的文件复制到虚拟机上
    memcache和redis本质区别在哪里?
    关于memcached
    (转)memcached注意事项
    (转)Memcached深度分析
    《项目架构那点儿事》——快速构建Junit用例
    《项目架构那点儿事》——工具类,你喜欢你就拿去
    《项目架构那点儿事》——Hibernate泛型Dao,让持久层简洁起来
  • 原文地址:https://www.cnblogs.com/yuanjia8888/p/14048762.html
Copyright © 2011-2022 走看看