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、元素选择器
<style>
p{
color:red;
}
</style>
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代码
1 #!/usr/bin/python 2 from flask import Flask,render_template,request,redirect,session 3 import MySQLdb as mysql 4 5 con = mysql.connect(host='59.110.12----',user='wo----',passwd='123------',db='-------') 6 con.autocommit(True) 7 cur =con.cursor() 8 9 app = Flask(__name__) 10 import until 11 from until import app_index,app_login,app_delete,app_adduser,app_updatepw,app_getpw 12 # use random 13 app.secret_key = 'iouasoiduio89127398981273' 14 15 @app.route('/usertemp') 16 def usertemp(): 17 if 'user' in session: 18 return render_template('usertemp.html',user=session['user'],users=app_index()) 19 20 @app.route('/') 21 def index(): 22 if 'user' in session: 23 return render_template('index.html',user=session['user'],users=app_index()) 24 else: 25 return redirect('/login') 26 27 @app.route('/login',methods=['GET','POST']) 28 def login(): 29 if request.method=='GET': 30 return render_template('login.html') 31 elif request.method=='POST': 32 user = request.form.get('user') 33 pwd = request.form.get('pwd') 34 app_user = app_login(user,pwd) 35 if app_user: 36 session['user'] = user 37 return redirect('/') 38 else: 39 return 'wrong user. or passwd' 40 41 @app.route('/delete') 42 def deleteuser(): 43 user = request.args.get('user') 44 print 'user',user 45 app_delete(user) 46 return 'ok' 47 48 @app.route('/changepw',methods=['GET','POST']) 49 def changepw(): 50 # if request.method == 'GET': 51 # user = request.args.get('user') 52 # return render_template('changepw.html',user=user) 53 #elif request.method == 'POST': 54 user = request.form.get('user') 55 oldpwd = request.form.get('oldpwd') 56 newpwd = request.form.get('newpwd') 57 confirmpwd = request.form.get('confirmpwd') 58 pwd = list(app_getpw(user)) 59 pwd = ''.join(pwd) 60 pwd = pwd.strip() 61 if pwd!=oldpwd: 62 return 'wrong old password' 63 if newpwd!=confirmpwd: 64 return 'new pwd not equal to confirmpwd' 65 app_updatepw(newpwd,user) 66 return 'ok' 67 68 ##@app.route('/adduser') 69 ##def adduser(): 70 ## user = request.args.get('user') 71 ## pwd = request.args.get('pwd') 72 ## if (not user) or (not pwd): 73 ## return 'need username and password' 74 ## 75 ## sql = 'insert into user values ("%s","%s")'%(user,pwd) 76 ## cur.execute(sql) 77 ## return 'ok' 78 79 @app.route('/adduser',methods=['GET','POST']) 80 def adduser(): 81 #if request.method == 'GET': 82 # return render_template('adduser.html') 83 #elif request.method =='POST': 84 #user = request.form.get('user') 85 # pwd = request.form.get('pwd') 86 user = request.args.get('user') 87 pwd = request.args.get('pwd') 88 app_adduser(user,pwd) 89 #return redirect('/') 90 return 'ok' 91 92 @app.route('/logout') 93 def logout(): 94 del session['user'] 95 return redirect('/login') 96 97 98 99 100 101 if __name__=="__main__": 102 app.run(host='0.0.0.0',port=33333,debug=True)