Python flask+css+js+ajax 综合复习

flask 基本语法结构

注：这里练习的时候把装饰器的@给忘记了，导致访问404

下面练习一下在前段向后端传递参数

get请求需要用 request.args.get('变量') 去接收，

get请求的参数都是放置在url中的，如 http://127.0.0.1:33334/?user=python

这样就可以获取到了user的值了

post请求的参数部分是放置在body里面的，url中没有直接的体现

获取的语法 request.form.get('user')

render_template 是用来渲染页面的。

结合render_template与 request.form.get('user'),来获取post的参数

前端页面

注意，这里练习的时候把form写成了from了，导致点击submit按钮没反应

　 action='/'是把数据提交的地址，也就是数据是谁来接收的

post请求提交获取参数的样例已经实现。

前段内容回顾

html
    head
        style    手写css
        link     引入css
    body
        h1~h6    标题
        table    表格
            tr,td
        form     表单
            input ,button
        p        段落
        img      图片
        a        超链接

        div 和span  (这两个没有默认的样式，一个是盒子，一个事行内元素)

        script   #引入js

选择器

1、元素选择器

2、id选择器用#号开头来表示

#part1{
   color:blue;
}

3、class选择器用.开头来表示，这些选择器中， class的使用居多。它的定位准确。

.font-yellow{
    color:yellow;
}

当引用class选择器的时候，也可以选择多个，   如：  
<div class'font-yellow font-30'>hello</div>

4、属性选择器

<div xxx='reoboot'> hello div </div>
<div xxx='python'> hello again </div>

[xxx='reboot']{
    color:red;  
}
这样的话，只有第一行会引用到，
[xxx]{
    color:red;
}
这样的话，两行都会被引用到了

5、层级选择器

<div> 
   <p> 一个段落 </p>
</div>
<p> 第二个段落 <p>

div p{
   color:red;
 }
这样的话，只有第一个会被引用到。

Jquery

用法：
    $(选择器).操作函数()
       html 操作或者获取元素的内容
       val  操作或者获取输入框的值
       on   绑定事件
       find(选择器)  查找元素的内容
       .show  显示
       .hide  隐藏
       css    修改css样式

<div>
    <p> </p>
<div>
<button id='click-btn' class="btn btn-success">
</button>
<input type="text' id='test'>

<script src='jquery.js'></script>
<script>
   $('div p').html(xxx123).css('color','red').hide(3000)     #支持链式的写法
   $('#click-btn').on('click',function(){
     $('#test').val('haha python is good')

   })
   $('#test').val('hello python')

</script>

this

浏览器的console中点击的话就会显示 1，这四个都是显示1，那怎么区分是点击了哪个呢？看下面

点击下看看，this显示的是什么

下面用jquery，来包装下：

现在点击的话就可以取到想要的东西了

这两种的效果是一样的，区别在于，下面的这种写法，里面有cache的机制，写多了，会比上面的那种写法快。

2017-07-05总结学习

　　学习了一段时间，jquery的语法和ajax的语法，傻傻分不清楚，慢慢的来做总结

　　jquery,绑定事件：

　　　　$('xxx').on('click',function(){})

　　ajax:

　　　　$.get,$.post,$.getJSON

　　　　$.ajax是底层的方法，可以看jquery的原代码

作业问题总结

　　遇到的问题是，

　　修改完密码后，调出如图的黑色界面，但是北京内容的内容可以显示，密码确实已经被修改了。

　　问题在于，模态框没有关闭。---no ,no ,别人指导错了，不是这个原因，看下面详解：

　　点击答案

　　模态窗加载的时候，会多出一个 class='modal-backdrop'的一行，不清楚为什么不能自动消除，需要代码给移除

　　另外：

　　可以在这里查看定义id名字的信息，这里有9个.update-btn,命名重复了。

验证输入框中的内容，比如长度　　

<body>

    <p>

        输入框的长度校验

    </p>

    username:<input id="test-input" type="text" name="usename">

    <button id="hello">hello</button>

    <script src="./jquery.min.js"></script>

    <script>

        var input=$('#test-input')

        input.on('change',function(){

            var vall=$(this).val()

            if(vall.length>10){

                alert('too long!')

            }else if(vall.length<3){

                alert('too short!!')

            }

        })

    </script>

</body>

　　这里用的是change.在输入框中输入完毕后，鼠标离开，才会在console.log()中显示输入的东西

　　这里复习一下val的用法：　　

三个简单实用的用于 DOM 操作的 jQuery 方法：

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值

　 var() 返回值的用法如实例所示，当然也可以设置值，

  $('#hello').on('click',function () {
    input.val('hello world')

　当然，html中也有自己限制长度的，maxlength='5' #可以限制最长，

绑定事件需要注意的事项 　

<body>

    <button id="hello">hello</button>

    <button id="world">world</button>

    <script src="./jquery.min.js"></script>

    <script>

        $(document).on('click','#hello',function () {

            $('#world').on('click',function () {

                alert('world')

            })

        })

    </script>

</body>

　　这段代码需要注意的地方：

　　1、使用了ducument，这个是防止页面加载完之前就绑定了事件，加载完之后再访问就不起作用了

　　2、这种嵌套式的，这么写会有一个问题，就是点击hello button多少次，再点击world button，就会跳出多少次

　　解决这个问题的办法：添加.off()　

 　　$('#world').off().on('click',function () {}

作业代码：

效果如下图所示，实现增删改查：

flask代码

 #!/usr/bin/python

 from flask import Flask,render_template,request,redirect,session

 import MySQLdb as mysql

 con = mysql.connect(host='59.110.12----',user='wo----',passwd='123------',db='-------')

 con.autocommit(True)

 cur =con.cursor()

 app = Flask(__name__)

 import until

 from until import app_index,app_login,app_delete,app_adduser,app_updatepw,app_getpw

 # use random

 app.secret_key = 'iouasoiduio89127398981273'

 @app.route('/usertemp')

 def usertemp():

     if 'user' in session:

         return render_template('usertemp.html',user=session['user'],users=app_index())

 @app.route('/')

 def index():

     if 'user' in session:

         return render_template('index.html',user=session['user'],users=app_index())

     else:

         return redirect('/login')

 @app.route('/login',methods=['GET','POST'])

 def login():

     if request.method=='GET':

         return render_template('login.html')

     elif request.method=='POST':

         user = request.form.get('user')

         pwd = request.form.get('pwd')

         app_user = app_login(user,pwd)

         if app_user:

             session['user'] = user

             return redirect('/')

         else:

             return 'wrong user. or passwd'

 @app.route('/delete')

 def deleteuser():

     user = request.args.get('user')

     print 'user',user

     app_delete(user)

     return 'ok' 

 @app.route('/changepw',methods=['GET','POST'])

 def changepw():

    # if request.method == 'GET':

    #     user = request.args.get('user')

    #     return render_template('changepw.html',user=user)

    #elif request.method == 'POST':

     user = request.form.get('user')

     oldpwd = request.form.get('oldpwd')

     newpwd = request.form.get('newpwd')

     confirmpwd = request.form.get('confirmpwd')

     pwd = list(app_getpw(user))

     pwd = ''.join(pwd)

     pwd = pwd.strip()

     if pwd!=oldpwd:

         return 'wrong old password'

     if newpwd!=confirmpwd:

         return 'new pwd not equal to confirmpwd'

     app_updatepw(newpwd,user)

     return 'ok'

 ##@app.route('/adduser')

 ##def adduser():

 ##    user = request.args.get('user')

 ##    pwd = request.args.get('pwd')

 ##    if (not user) or (not pwd):

 ##        return 'need username and password'

 ##

 ##    sql = 'insert into user values ("%s","%s")'%(user,pwd)

 ##    cur.execute(sql)

 ##    return 'ok'

 @app.route('/adduser',methods=['GET','POST'])

 def adduser():

     #if request.method == 'GET':

     #    return render_template('adduser.html')

     #elif request.method =='POST':

     #user = request.form.get('user')

    # pwd = request.form.get('pwd')

     user = request.args.get('user')

     pwd = request.args.get('pwd')

     app_adduser(user,pwd)

     #return redirect('/')

     return 'ok' 

 @app.route('/logout')

 def logout():

     del session['user']

     return redirect('/login')

 if __name__=="__main__":

     app.run(host='0.0.0.0',port=33333,debug=True)

数据库代码：

 #!/usr/bin/python

 import MySQLdb as mysql

 from config import ST,DB_PORT,DB_USER,DB_PASSWD,DB_DBNAME,DB_CHARSET

 sql_all = 'select * from user'

 sql_login = 'select * from user where (username="%s") and (password="%s")'

 sql_delete = 'delete from user where username="%s"'

 sql_adduser = 'insert into user values ("%s","%s")'

 sql_updatepw = 'update user set password="%s" where username="%s"'

 sql_getpw = 'select password from user where username="%s"'

 def app_index():

     con = mysql.connect(host=ST,port=DB_PORT,user=DB_USER,passwd=DB_PASSWD,db=DB_DBNAME,charset=DB_CHARSET)

     con.autocommit(True)

     cur =con.cursor()

     cur.execute(sql_all)

     res = cur.fetchall()

     cur.close()

     con.close()

     return res

 def app_login(username,passwd):

     con = mysql.connect(host=ST,port=DB_PORT,user=DB_USER,passwd=DB_PASSWD,db=DB_DBNAME,charset=DB_CHARSET)

     con.autocommit(True)

     cur =con.cursor()

     cur.execute(sql_login%(username,passwd))

     res = cur.fetchone()

     cur.close()

     con.close()

     return res

 def app_delete(username):

     con = mysql.connect(host=ST,port=DB_PORT,user=DB_USER,passwd=DB_PASSWD,db=DB_DBNAME,charset=DB_CHARSET)

     con.autocommit(True)

     cur =con.cursor()

     cur.execute(sql_delete%(username))

     res = cur.fetchone()

     cur.close()

     con.close()

 def app_adduser(username,passwd):

     con = mysql.connect(host=ST,port=DB_PORT,user=DB_USER,passwd=DB_PASSWD,db=DB_DBNAME,charset=DB_CHARSET)

     con.autocommit(True)

     cur =con.cursor()

     cur.execute(sql_adduser%(username,passwd))

     res = cur.fetchone()

     cur.close()

     con.close()

 def app_updatepw(passwd,username):

     con = mysql.connect(host=ST,port=DB_PORT,user=DB_USER,passwd=DB_PASSWD,db=DB_DBNAME,charset=DB_CHARSET)

     con.autocommit(True)

     cur =con.cursor()

     cur.execute(sql_updatepw%(passwd,username))

     res = cur.fetchone()

     cur.close()

     con.close()

 def app_getpw(username):

     con = mysql.connect(host=ST,port=DB_PORT,user=DB_USER,passwd=DB_PASSWD,db=DB_DBNAME,charset=DB_CHARSET)

     con.autocommit(True)

     cur =con.cursor()

     cur.execute(sql_getpw%(username))

     res = cur.fetchone()

     cur.close()

     con.close()

     return res

until.py

前端代码：用于生产异步获取首页的列表

 <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <link rel="stylesheet" href="/static/bootstrap.css">

      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

 </head>

 <body>

        <!-- 一下代码是数据库里面调出来的数据，然后做页面用户展示-->

         <table class="table table-bordered table-striped table-hover">

            {% for u in users %}

            <tr class="success">

                <td >{{u[0]}}</td>

                <td>{{u[1]}}</td>

                <td>

          <!-- 模态窗，点击修改用户名密码的按钮，会跳出一个窗口-->

                 <!-- Button trigger modal -->

           <span data-userr="{{u[0]}}" class="edituser-btn glyphicon glyphicon-edit" aria-hidden="true" data-toggle="modal" data-target="#yourModal"></span>

                 <!-- Modal -->

                 <div class="modal fade  bs-example-modal-sm" id="yourModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

                   <div class="modal-dialog modal-sm" role="document">

                     <div class="modal-content">

                       <div class="modal-header">

                         <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                         <h4 class="modal-title" id="myModalLabel">Change Password</h4>

                       </div>

                       <div class="modal-body">

   <!-- 跳出修改密码的窗口，这是窗口的内容-->

  <form method='post' class="form-horizontal" >

     <input type='hidden' name='user' value="{{u[0]}}">

     <div class="form-group form-group-sm">

       <label for="inputPassword3" class="col-sm-2 control-label">oldpwd</label>

       <div class="col-sm-8">

         <input type="text" class="oldpwd-input form-control" id="inputPassword3" placeholder="oldpwd"  name='oldpwd'>

       </div>

     </div>

     <div class="form-group form-group-sm" >

       <label class="col-sm-2 control-label">newpw</label>

       <div class="col-sm-8">

         <input type="text" class="newpwd-input form-control"  name='newpwd'>

       </div>

     </div>

     <div class="form-group form-group-sm">

       <label class="col-sm-2 control-label">confirm</label>

       <div class="col-sm-8">

         <input type="text" class="confirmpwd-input form-control"  name='confirmpwd'>

       </div>

     </div>

    <!--

      oldpwd:<input class='oldpwd-input' type='text' name='oldpwd'>

      <br >

      newpwd:<input class='newpwd-input' type='text' name='newpwd'>

      <br >

      confirmpwd:<input class='confirmpwd-input' type='text' name='confirmpwd'>

      <br >

     -->

  </form>

                       </div>

                       <div class="modal-footer">

                         <button type="button" class="btn btn-success" data-dismiss="modal">Close</button>

                         <button type="button" data-userr="{{u[0]}}" class="update-pwd btn btn-success"  >Update</button>

                       </div>

                     </div>

                   </div>

                 </div>

                </td>

   <!-- 模态窗结束-->

                 <!-- 用户删除-->

                <td>

                    {% if user=='admin' %}

                            <span data-user="{{u[0]}}" class="deluser-btn glyphicon glyphicon-trash" aria-hidden="true"></span>

                    {% endif %}

                </td>

            </tr>:

            {% endfor %}

            <!--

              <div class="row">

                <div class='col-md-4 col-md-offset-4'>

                   <a href="/logout" class='btn btn-success'>logout</a>

               </div>

            </div>

            -->

     </table>

 <script src="/static/jquery.min.js"></script>

 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

usertemp.html

主要的ajax、jquery的操作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <link rel="stylesheet" href="/static/bootstrap.css">

     <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">

 </head>

 <body>

 <p id='content'>

 </p>

  <!-- 这个是ajax异步获取来的用户列表展示页面显示的地方-->

 <div class='row'>

     <div class='col-md-4 col-md-offset-4' id='user-table'>

     </div>

 </div>

  <!--logout button 和增加用户的模态框按钮 -->

 <div class="col-md-4 col-md-offset-4">

       <a href="/logout" class='btn btn-success'>logout</a>

        <!-- Button trigger modal -->

         <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">

            ADD USER

         </button>

         <!-- Modal -->

         <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

           <div class="modal-dialog" role="document">

             <div class="modal-content">

               <div class="modal-header">

                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

                 <h4 class="modal-title" id="myModalLabel">Modal title</h4>

               </div>

               <div class="modal-body">

  <!--跳出来的增加用户的界面， -->

 <form action='/adduser' class='form-inline' method='post'>

     <div class='form-group'>

         <label>User</label>

         <input type='text' id='adduser-input' name='user' class='form-control'>

     </div>  

     <div class='form-group'>

         <label>Pwd</label>

         <input type='text' id='addpwd-input' name='pwd' class='form-control'>

     </div>  

 </form>

               </div>

               <div class="modal-footer">

                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

                    <button type="button" class="btn btn-success" id='confirm-adduser'>Add</button>

               </div>

             </div>

           </div>

         </div>

 </div>

  <!-- 模态框结束--> 

 <script type="text/javascript" src='/static/jquery.min.js'></script>

 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

 <script>

   <!-- ajax 实现更改用户的密码,然后传递给后端去操作，前端做展示-->

 $(document).on('click','.update-pwd',function(){

     var user = username

     var oldpwd = $(" input[ name='oldpwd' ] ").val()

     var newpwd = $(" input[ name='newpwd' ] ").val()

     var confirmpwd = $(" input[ name='confirmpwd' ] ").val()

     if(newpwd != confirmpwd){

          alert('The two new password not match!!')

     }

     $.post('/changepw',{'user':username,'oldpwd':oldpwd,'newpwd':newpwd,'confirmpwd':confirmpwd},function(data){

         if(data != 'ok'){

           alert('The old password is not correct!!')

         }

         if(data == 'ok'){

            $(".modal-backdrop").remove();

            getUser()

           $('#yourModal').modal('hide')

         }

     })

 })

  <!-- 这一步是为了获取点击用户按钮时，是对哪个用户做的操作，存到username变量中，然后传递给上面的更改密码做使用-->

 $(document).on('click','.edituser-btn',function(){

     username=$(this).data('userr')

     alert(username)

 })

  <!-- 删除用户，直接拼凑删除用户的url来做删除-->

 $(document).on('click','.deluser-btn',function(){

     var user = $(this).data('user')

     $.get('/delete?user='+user,function(res){

         if(res=='ok'){

             alert('delete success!!')

             getUser()

         }

     })

 })

  <!-- 利用函数来对获取到的页面做展示-->

 function getUser(){

     $.get('/usertemp',function(data){

         $('#user-table').html(data)

     })

 }

  <!-- 执行以下这个函数，就会显示这个页面,第一次登陆进来的时候做展示-->

 getUser()

  <!-- 增加用户操作-->

 $('#confirm-adduser').on('click',function(){

     var user = $('#adduser-input').val()

     var pwd = $('#addpwd-input').val()

     var url = '/adduser?user='+user+'&pwd='+pwd

     $.get(url,function(data){

        if(data=='ok'){

             $('#myModal').modal('hide')

             getUser()

        }

     })

 })

 </script>

 </body>

index.html