python 学习 第九篇 前端应用

简介:

常见的jquery插件,实现前端效果

  模态弹框

学习网址:http://v3.bootcss.com/javascript/#modals

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
< div  class = "modal fade"  id = "changpass" >
   < div  class = "modal-dialog" >
     < div  class = "modal-content" >
       < div  class = "modal-header" >
         < button  type = "button"  class = "close"  data-dismiss = "modal" >< span  aria-hidden = "true" >&times;</ span >< span  class = "sr-only" >Close</ span ></ button >
         < h4  class = "modal-title" >修改密码</ h4 >
       </ div >
                         < form  id = "passwdForm"  class = "form-horizontal" >
                                 < input  type = "hidden"  name = "id"  id = "passwdid" >
 
                             < div  class = "form-group" >
                                 < label  for = "password"  class = "col-sm-2 control-label" >新密码< span  class = "red-fonts" ></ span ></ label >
                                 < div  class = "col-sm-8" >
                                     < input  id = "password"  name = "password"  type = "password"  class = "form-control" >
                                 </ div >
                             </ div >
 
                             < div  class = "form-group" >
                                 < label  for = "re_password"  class = "col-sm-2 control-label" >确认密码</ label >
                                 < div  class = "col-sm-8" >
                                     < input  id = "re_password"  name = "re_password"  type = "password"  class = "form-control" >
                                 </ div >
                             </ div >
 
                         < div  class = "modal-footer" >
                                 < button  type = "button"  class = "btn btn-default"  data-dismiss = "modal" >取消</ button >
                                 < button  type = "button"  class = "btn btn-primary"  id = "chpass" >确认</ button >
                         </ div >
                 </ form >
     </ div > <!-- /.modal-content -->
   </ div > <!-- /.modal-dialog -->
</ div > <!-- /.modal -->


jquery部分代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
     $("#chpass").click(function () {
         $.post("/modpasswd",$("#passwdForm").serialize(),function (data) {
             data=JSON.parse(data)
             if(data["code"]==0){
                  swal({
                     title:'修改成功',
                     text:"success",
                     type:'success',
                     },function(){
                         location.reload()
                     })
             }else{
                 swal('Error',data['errmsg'],'error')
             }
         })
     })

效果图

wKioL1f6E3XyTb-bAAAk1Q73xSQ862.png

sweetalert弹出信息

wKiom1f6FCviPmOFAAA2HTYWb6I742.png

datatable美化表格

学习网址:https://datatables.net/

jquery代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$('#editable').DataTable({
     'bDestory': true,
     "language": {
         "lengthMenu": "每页 _MENU_ 条记录",
         "zeroRecords": "没有找到记录",
         "sInfo": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 ),显示第 _START_ 至 _END_ 项(总共 _TOTAL_ 项)",
         "infoEmpty": "无记录",
         "infoFiltered": "(从 _MAX_ 条记录过滤)",
         "sSearch": "搜索:",
         "oPaginate": {
         "sFirst": "首页",
         "sPrevious": "上一页",
         "sNext": "下一页",
         "sLast": "末页"
         }
     },
     "order": [[ 0,"asc" ]]
});

效果图

wKioL1f6FPnziKUQAABhOvzQOJs922.png



本文转自 shouhou2581314 51CTO博客,原文链接:http://blog.51cto.com/thedream/1859901,如需转载请自行联系原作者

相关文章
|
15小时前
|
算法 数据处理 索引
告别低效搜索!Python中Trie树与Suffix Tree的实战应用秘籍!
【7月更文挑战第21天】探索Python中的字符串搜索效率提升:使用Trie树与Suffix Tree。Trie树优化单词查询,插入和删除,示例展示其插入与搜索功能。Suffix Tree,复杂但强大,适用于快速查找、LCP查询。安装[pysuffixtree](https://pypi.org/project/pysuffixtree/)库后,演示查找子串及最长公共后缀。两者在字符串处理中发挥关键作用,提升数据处理效率。**
|
1天前
|
缓存 测试技术 Python
Python中的装饰器详解与应用
在Python编程中,装饰器是一种强大的工具,它可以让我们在不修改函数代码的情况下,增加额外的功能和逻辑。本文将深入探讨装饰器的工作原理、常见应用场景以及如何自定义装饰器,帮助读者更好地理解和利用Python中这一重要的编程技术。
|
2天前
|
前端开发 数据库 开发者
构建可维护的Web应用:Python模板引擎与ORM的协同工作
【7月更文挑战第19天】在Web开发中,可维护性至关重要。Python搭配Flask或Django框架,利用模板引擎(如Jinja2)和ORM(如SQLAlchemy或Django ORM)增强开发效率和代码质量。模板引擎桥接前后端,ORM简化数据库操作,两者协同提升可读性和可测试性。例如,Flask用Jinja2渲染动态HTML,Django通过ORM处理数据库模型。这种分离关注点的方法降低了耦合,增强了应用的可维护性。
11 1
|
2天前
|
中间件 API 开发者
深入理解Python Web框架:中间件的工作原理与应用策略
【7月更文挑战第19天】Python Web中间件摘要:**中间件是扩展框架功能的关键组件,它拦截并处理请求与响应。在Flask中,通过`before_request`和`after_request`装饰器模拟中间件行为;Django则有官方中间件系统,需实现如`process_request`和`process_response`等方法。中间件用于日志、验证等场景,但应考虑性能、执行顺序、错误处理和代码可维护性。
7 0
|
2天前
|
JSON 中间件 数据处理
实践出真知:通过项目学习Python Web框架的路由与中间件设计
【7月更文挑战第19天】探索Python Web开发,掌握Flask或Django的关键在于理解路由和中间件。路由连接URL与功能,如Flask中@app.route()定义请求响应路径。中间件在请求处理前后执行,提供扩展功能,如日志、认证。通过实践项目,不仅学习理论,还能提升构建高效Web应用的能力。示例代码展示路由定义及模拟中间件行为,强调动手实践的重要性。
|
3天前
|
监控 前端开发 JavaScript
构建高效实时应用:Python WebSocket在前后端分离架构中的实践
【7月更文挑战第18天】WebSocket助力实时Web应用,通过一次握手建立持久连接,解决HTTP实时性问题。Python中可用Flask-SocketIO创建WebSocket服务器,前端JavaScript使用Socket.IO库连接。确保安全可采用HTTPS、认证及跨域限制。示例代码展示如何实现双向实时通信。
20 4
|
4天前
|
Web App开发 存储 JavaScript
前端如何学习Node.js及Node.js的主要用途
【7月更文挑战第16天】 学习Node.js对前端开发者至关重要,涉及理解其基于V8的运行时环境、JavaScript基础、安装与验证、核心模块(如fs、http、path)及npm管理。实践项目,如用Express建服务器,参与开源,深入学习异步编程和事件循环。Node.js用于服务器开发、构建工具、本地开发服务器和实时应用,提升全栈能力。借助官方文档和各种资源加速学习。
14 4
|
4天前
|
前端开发 JavaScript API
探索Python Django中的WebSocket集成:为前后端分离应用添加实时通信功能
【7月更文挑战第17天】现代Web开发趋势中,前后端分离配合WebSocket满足实时通信需求。Django Channels扩展了Django,支持WebSocket连接和异步功能。通过安装Channels、配置设置、定义路由和消费者,能在Django中实现WebSocket交互。前端使用WebSocket API连接后端,实现双向数据流,如在线聊天功能。集成Channels提升Web应用的实时性和用户体验,适应实时交互场景的需求。**
25 6
|
4天前
|
JavaScript 前端开发 网络协议
从理论到实践:全面剖析Python Web应用中的WebSocket实时通信机制
【7月更文挑战第17天】WebSocket在实时Web应用中扮演重要角色,提供全双工通信,减少延迟。本文详述了Python中使用`websockets`库创建服务器的步骤,展示了一个简单的echo服务器示例,监听8765端口,接收并回显客户端消息。客户端通过JavaScript与服务器交互,实现双向通信。了解WebSocket的握手、传输和关闭阶段,有助于开发者有效利用WebSocket提升应用性能。随着实时需求增长,掌握WebSocket技术至关重要。
17 6
|
5天前
|
存储 缓存 安全
Python元组不可变序列的奥秘与应用方式
Python 中的元组(Tuple)是一种有序的、不可变的数据结构,它是序列的一种特殊形式,就像一个固定大小的盒子,一旦放入物品就无法更换或移除。 元组可以包含任何类型的数据,如数字、字符串甚至是其他元组。 相比列表,元组在很多场景下提供了更高效、安全的选择。