列表ID的显示
起初ID显示的是数据库中的id，因为数据库中的id是自增长的，所以删除一条后，这里显示就叉开了，这里使用索引的方式来显示。
这个功能实现的逻辑：
第一：定义一个表格的架构，用id=‘idc-list’来获取表格tbody的内容
1
| ID | 5机房 | 6手机 | 7操作 | 8
|---|
第二步：使用jquery来获取tbody的数据。利用each循环来排列后端返回给的数据
1 function getList(){ 2 $.getJSON('/listapi?table_name=idc',function(res){ 3 var html_str = '' 4 $.each(res,function(i,j){ 5 html_str += '' 6 html_str += ''+j[3]+'' 7 html_str += ''+j[1]+'' 8 html_str += ''+j[2]+'' 9 html_str += ''10 html_str += ''11 })12 //console.log([$('#idc-list').html()])13 14 render_table('my-idc-table',html_str)15 16 })17 }18 19 getList() 这里使用到了定义到laylou2.html中的render_table函数
1 function render_table(table_id,html_str){ 2 var $table = $('#'+table_id) 3 4 var $tbody = $table.find('tbody') 5 6 if($tbody.html()){ 7 $table.DataTable().destroy() #销毁实例，这个DataTable是用的第三方插件，来显示table的 8 } 9 $tbody.html(html_str)10 $table.DataTable({11 12 bLengthChange:false #开关，是否显示一个每页长度的选择条（须要分页器支撑）13 });14 }
第三步：在后端把数据传递给前端之前，就可以吧索引加上。
后端通过在数据库中select * form 表名； 获取到的数据是个元组，格式如下：
((12L, u'\u5929\u6d25', u'1810'), (13L, u'\u6cb3\u5317', u'188'), (14L, u'\u5317\u4eac', u'1999'), (15L, u'\u5317\u4eac', u'199'), (16L, u'\u53f0\u6e7e', u'111'), (20L, u'\u6d77\u5357', u'1234'))
然后在后端把索引加入。
1 def listapi():2 rev_table_name = request.args.get('table_name')3 result = db.list(rev_table_name)4 new_result = []5 for i in range(len(result)):6 new_result.append(list(result[i]) + [i+1]) #利用数组相加的方法给添加上索引7 print new_result8 return json.dumps(new_result) 方法二：利用列表生成式来简写 [list(a[i])+[i+1] for i in range(len(a))] ，原理一样
方法三：如何用map实现？
增加用户的实现
前端代码：
1 2 3
| ID | 7机房 | 8手机 | 9操作 | 10
|---|
模态窗跳转是通过，data-target="#add-idc-modal"来控制的。
然后jquer通过"add-confirm"来确认提交的信息，然后通过ajax传递给后端增加的信息。
1 $('#add-confirm').click(function(){ 2 var o=$('#add-form').serialize() 3 $.post('/addapi',o,function(res){ 4 res = JSON.parse(res) 5 console.log(res.code) 6 if(res.code==0){ 7 getList() 8 $('#add-idc-modal').modal('hide') 9 $('#add-form')[0].reset()10 swal('添加成功','','success')11 }else{12 swal(res.msg,'','error')13 }14 })15 }) serialize 序列化功能，form表单中提交的信息都可以给序列化出来
这里传递给后端的table_name是通过隐藏的input来实现的。
flask代码：
@app.route('/addapi', methods=['POST']) def addapi(): rev_dict = request.form.to_dict() #转换为字典 rev_tab_name = rev_dict.pop('table_name') result = db.add(rev_tab_name,rev_dict) return json.dumps(result) @app.route('/listapi') mysql代码：
1 def add(self,table_name,table_val): #table_val格式 : {name=xxx,mobile=wwww}2 table_key = ','.join(table_val.keys()) 3 key_val = ','.join(["'%s'"%v for v in table_val.values()]) 4 # sql = "insert into %s (%s) values (%s)"%(table_name,col_names,values)5 sql = "insert into %s (%s) values (%s)"%(table_name,table_key,key_val)6 self.execute(sql)7 return { 'code':0}
删除某个条目
删除的条目想起初想的是利用username来删除，结果没有实现，结果用id来删除比较方便。
这里之前用过模板继承，可否来记得，定义一个大的模板layout2.html，layout2.html中定义了大的框架块。然后其他的小选项中可以来引用这个大的块，然后还可以在添加自己的内容，这里html的代码能模块话，当然页面中相同的利用jquey操作也可以模块化，定义到layout2.html中，下面就利用模块化来删除某个条目。
layout2.html 中代码
1 function bind_delete(selector,table_name){ 2 $(document).on('click',selector,function(){ 3 var id = $(this).attr('data-id') #获取id的值 4 5 swal({ 6 title: "confirm", 7 text: "确认删除"+$(this).attr('data-name')+"?", 8 type: "warning", 9 showCancelButton: true,10 confirmButtonColor: "#DD6B55",11 confirmButtonText: "yes",12 closeOnConfirm: false13 },14 function(){15 $.post('/deleteapi',{id:id,table_name:table_name},function(res){16 if(res=='ok'){17 18 swal('success','','success') 19 getList()20 }else{21 swal('error','删除失败','error')22 }23 })24 });25 })26 27 } idc.html 中的代码：
bind_delete('.del-btn','idc') #直接就一行调用函数的代码，传入需要操作的对象及表名字。
flask 代码：
1 def deleteapi():2 table_name = request.form.get('table_name')3 row_id = request.form.get('id')4 print '=='*405 print row_id6 result = db.remove(table_name,row_id)7 return 'ok' mysql 代码：
1 def remove(self,table_name,row_id):2 sql = 'delete from %s where id=%s'%(table_name,row_id)3 print '++++'*304 print sql5 res = self.execute(sql)6 print res 7 return res
期间遇到一个数据库报错的问题
1 def execute(self,sql): 2 # error handle 3 try: 4 print self.cursor.execute(sql) 5 return self.cursor 6 except mysql.OperationalError as e: 7 # connect 8 print e 9 print 'reconnect db'10 self.connect()11 time.sleep(1)12 return self.execute(sql)
执行的时候一直输出， reconnect db.....
排查的方法是mysql的报错打印出来， as e: 再print e.
实现左侧图标点击高亮
前端代码：
思路：通过location.pathname，获取当前在哪个目录下，然后通过find，找到这个元素，在对其父层做active处理，便实现了这个效果
小知识点
1
这两种写法是相同的，第二种是第一种的简写。
下拉框的实现
机房>>>新增机器>>>IDC 下拉框的实现
可以通过下拉框来选择机房。
12 34 67
通过jquery & ajax去调用数据库的数据库返回。
1 function getidc(){ 2 $.getJSON('/listapi?table_name=idc',function(res){ 3 var option_str = '' 4 $.each(res,function(i,v){ 5 option_str += '' 6 }) 7 $('#add-idc-select').html(option_str) 8 }) 9 }10 11 getidc()
时间选择器
基于的css/js
href="/static/bootstrap-datetimepicker.css"
src='/static/bootstrap-datetimepicker.js'
这两个是基于jquery的，得写到jquery的下面。
代码：
$('#add-pc-time,#update-pc-time').datetimepicker({ startView: 2, minView: 2, format:"yyyy-mm-dd"})
update后端数据在前端展示
实现的功能，点击update后会把后端的数据展示的表里面，修改后，点击更新会提交到后端。
第一步：
首先要把后端的内容在前端展示，设计的思路是吧需要展示的内容都绑定到update键上面。然后再利用each循环，展示到table当中
update button需要绑定的内容：
1 function getList(){ 2 $.getJSON('/listapi?table_name=pc',function(res){ 3 var html_str = '' 4 $.each(res,function(i,j){ 5 html_str += '' 6 html_str += ''+j[7]+'' 7 html_str += ''+j[1]+'' 8 html_str += ''+j[2]+'' 9 html_str += ''+j[3]+''10 html_str += ''+j[4]+''11 html_str += ''+j[5]+''12 html_str += ''+j[6]+''13 html_str += ''14 html_str += ''15 html_str += ''16 html_str += ''17 html_str += ''18 })19 //console.log([$('#pc-list').html()])20 21 render_table('my-pc-table',html_str)22 23 })24 } 点击update后内容的回调：
1 $(document).on('click','.update-btn',function(){2 $('#update-pc-modal').modal('show') //跳出模态框3 // console.log($(this).data()) //定义的都是data-XX开头，所以通过$(this).date()就可以获取这些关键字4 $.each($(this).data(),function(i,v){5 //console.log(i,'----->',v)6 $('#update-pc-form').find('[name='+i+']').val(v) //通过name选择器来选择，然后做显示。7 8 })9 })
下一步就是更新后的内容返回给后端了：
update的代码与add相似，就是把数据序列化后传递给后端：
$('#update-pc-btn').click(function(){ var o=$('#update-pc-form').serialize() alert(o) $.post('/updateapi',o,function(res){ res = JSON.parse(res) console.log(res) console.log(res.code) if(res.code==0){ getList() $('#update-pc-modal').modal('hide') swal('更新成功','','success') }else{ swal(res.msg,'','error') } }) }) 然后flask接受传递来的数据，
1 def updateapi(): 2 allval = request.form.to_dict() 3 print '%%'*40 4 table_name = allval.pop('table_name') 5 print table_name 6 print allval 7 res = db.update(table_name,allval) 8 if res == 'ok': 9 return '{"code":0}'10 else:11 return '{"code":1}' 执行数据库：
1 def update(self,table_name,args):2 arg_id = args.pop('id')3 temp = ['%s="%s"'%item for item in args.items()] //循环的item是个元组的形式4 update_str = ','.join(temp)5 sql = 'update %s set %s where id=%s'%(table_name,update_str,arg_id)6 db.execute(sql)7 return 'ok'
用户登录基础的session实现
1 #coding=utf-8 2 from flask import Flask,render_template,request,redirect,session 3 from dbutil import db 4 import json 5 #from dbutil import db 6 7 app = Flask(__name__) 8 app.secret_key='1234567890' 9 10 @app.route('/')11 def index():12 #res = db.list('users')13 #return json.dumps(res)14 return redirect('/idc')15 16 @app.route('/login', methods=['POST','GET'])17 def login():18 if request.method == "GET":19 if 'username' in session: #判断session是否已经存在了20 return redirect('/idc')21 else:22 return render_template('login.html')23 if request.method == "POST":24 username = request.form.get('username')25 password = request.form.get('password')26 res = db.list('user',where={ 'username':username,'password':password})27 print 'res===>',res28 if len(res) == 0:29 return 'login error'30 else:31 session['username'] = username #增加到session里面32 return redirect('/idc')33 34 @app.route('/logout')35 def logout():36 del session['username'] #退出删除session37 return redirect('/login') 1 def list(self,table_name,col_name='*',where={}): 2 #select * from user where username='admin' and password='admin'; 判断用户是否存在 3 sql = 'select %s from %s'%(col_name,table_name) 4 print 'where',where 5 if where: 6 temp = ' where ' 7 temp += 'and'.join([' %s="%s" '%item for item in where.items()]) 8 sql += temp 9 print 'sql',sql10 print sql11 res = self.execute(sql)12 return res.fetchall() ##数据库中查找用户是否存在！！
flask login_required 用法：
定义一个方法：
def login_required(f): @wraps(f) def decorated_function(*args, **kwargs): if not session.get('username'): return redirect('/login') return f(*args, **kwargs) return decorated_function 然后每个url都去@调用这个方法就实现了seesion的引用
@app.route('/secret_page')@login_requireddef secret_page(): pass
另外还可以定义一次，在请求调用这个，不必每个页面都去调用了，@app.before_request，后面做详细学习。
token的使用
token 主要用于调用api接口时候的验证。
基本的原理如同下面的小例子：
首先我们需要基于一种加密算法，如 base64 ，可正反互解的。然后根据根据客户传递过来的信息，如用户名、密码、role，再加上过期时间做加密，然后把这串字符作为token传给客户，下次访问的时候url中带上token，服务器端做解密，然后核对用户信息，时间是否过期等，如果正常则返回给客户所需要的信息。
1 #!/usr/bin/python 2 #coding: utf-8 3 4 import base64 5 import time 6 7 secret_key = 'woqunianmailegebiao' 8 9 10 def create_token(user,role): #加密过程11 temp = '%s|%s|%s|%s'%(secret_key,user,role,int(time.time()+60*60*12))12 return base64.b64encode(temp)13 14 #print create_token('reboot','admin')15 def verify_token(token): #解密验证过程16 temp = base64.b64decode(token).split('|')17 if len(temp) ==4:18 secret,user,role,expire_time = temp19 if secret == secret_key:20 if int(expire_time) > time.time():21 return { 'code':0,'user':user,'role':role}22 else:23 return { 'code':20,'msg':'expire time !!'}24 else:25 return { 'code':10,'mes':"wrong key"}26 else:27 return { 'code':1,'msg':'wrong token'}28 29 #print verify_token('d29xdW5pYW5tYWlsZWdlYmlhb3xyZWJvb3R8YWRtaW58MTUwMTYyNDYwMQ==') 如果通过登录的方式，就把token传递给前端了，前端可以使用自己生成url的方法来使请求的url带上token的字段
首先定义一个myget的方法，来对$.get请求的内容做填丛
1 //定义api请求的方法2 $.myget = function(url,data,fn){3 if(localStorage.token){4 $.get(url+'?access_token'+localStorage.token,data,fn)5 }else{6 location.href='/login'7 }8 } 然后在请求listapi时，代替传统的$.api
1 function getList(){ 2 3 $.myget('/listapi','table_name=idc',function(res){ 4 var res = JSON.parse(res) 5 //$.getJSON('/listapi?table_name=idc',function(res){ 6 var html_str = '' 7 $.each(res,function(i,j){ 8 html_str += '' 9 html_str += ''+j[3]+''10 html_str += ''+j[1]+''11 html_str += ''+j[2]+''12 html_str += ''14 html_str += ''15 })16 //console.log([$('#idc-list').html()])17 18 render_table('my-idc-table',html_str)19 20 })21 }22 23 getList()
绘图展示
获取内存信息的土著方法：
1 import time 2 3 4 def get_mem(): 5 with open('/proc/meminfo') as f: 6 total = f.readline().split()[1] 7 free = f.readline().split()[1] 8 ava = f.readline().split()[1] 9 buf = f.readline().split()[1]10 cache = f.readline().split()[1]11 print ('free %s ava %s')%(free,ava)12 13 14 while True:15 get_mem()16 time.sleep(2) 利用psutil的升华版 #!/usr/bin/python # coding: utf-8 import psutil as ps import time def get_mem(): mem_info = ps.virtual_memory().available print mem_info while True: get_mem() time.sleep(2)
psutil 模块