单表操作的内容
我们这里对数据库单表的操作包含增删改查四部分
具体链接数据库的方式我们是通过pymysql，当然你也可以用其他的。
两种方式的概念与区别
1、新url的方式
主要就是我们每一次向后台提交并访问数据时，后台都会给我们
跳转到一个新的界面，来完成我们的操作
2、模态对话框的方式
就是我们可以在页面不刷新的情况下，完成前后台数据之间的交互
两者最大的区别就是新url肯定会刷新页面，而模态框可以让页面不刷新进行交互
新url方式
新url主要利用render和redirect对浏览器页面进行重新刷新，还有a标签进行页面跳转
a：相当于重新向
render：模板引擎渲染新页面
redirect：重定向跳到另一个页面
前端html页面
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>新url</title> <link rel="stylesheet" href="/static/css/reset.css"> <link rel="stylesheet" href="/static/css/style.css"> <style type="text/css"> {#* { margin:0; padding:0; }#} li { list-style:none; } {#body { background-color: #222222; }#} .xs_ul { font-size:0; line-height:0; } .xs_ul li {display:inline-block; font-size:20px; line-height:20px; background:#fff;} .xs_ul li a { display:block; width:80px; text-align:center; padding:15px 30px; border:1px solid #000; color:#999; text-decoration:none; } .xs_box{ position: absolute; right: 50px; top: 40px; } </style> </head> <body> <div class="xs_box"> <ul class="xs_ul"> <!--点击增加班级跳转到新url中去添加信息--> <li class="xs_li_13"><a href="/add_classes/">增加班级</a></li> </ul> </div> <section> <!--for demo wrap--> <h1>班级列表</h1> <div class="tbl-header"> <table cellpadding="0" cellspacing="0" border="0"> <thead> <tr> <th>ID</th> <th>班级名称</th> <th>操作</th> </tr> </thead> </table> </div> <div class="tbl-content"> <table cellpadding="0" cellspacing="0" border="0"> <tbody> {% for item in classes %} <tr> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <!--a标签提交数据只能通过GET提交，所以删除或者更新我们想要携带数据只能通过?在后面进行拼接--> <td><a href="/delete_classes/?id={{ item.id }}" onclick="return del()">删除</a>| <a href="/update_classes/?id={{ item.id }}">更新</a> </td> </tr> {% endfor %} </tbody> </table> </div> </section> <div class="made-with-love"> Made with <i>♥</i> by <a target="_blank" href="#">hesujian</a> </div> </body> <script src="/static/js/jquery.min.js"></script> <script src="/static/js/index.js"></script> <script type="text/javascript" src="/static/js/jq_button.js"></script> <script type="text/javascript" src="/static/js/xs.js"></script> <script type="text/javascript"> $(document).ready(function() { $(".xs_li_13").xs999(13); }); </script> <script> function del() { let res = window.confirm("确认删除?"); if (res == false) { return false; }; } </script> </html>
后端路由管理并处理页面
def classes(request): # 生成一个操作数据库 sq = Classes() classes = sq.select_all() # 返回一个页面（html与数据库融合过后的） return render(request,"classes.html",{"classes":classes}) def add_classes(request): if request.method == 'GET': # 如果请求方式是GET，那么说明是第一次按下添加操作 # 返回一个新的静态页面让他去做添加操作 return render(request,"add_class.html") else: # 如果请求方式是POST，那么说明是写好数据提交上来的 classname = request.POST.get("classname") sq = Classes() sq.add_data(classname) # 返回的是一个重定向的页面 return redirect("/classes/") def delete_classes(request): id = request.GET.get("id") sq = Classes() sq.delete_data(id) return redirect('/classes/') def update_classes(request): sq = Classes() if request.method == 'GET': id = request.GET.get("id") classes = sq.select_one(id) return render(request,'update_class.html',{'class':classes}) else: id = request.POST.get("id") classname = request.POST.get("classname") sq.update_data(id,classname) return redirect('/classes/') # 写好路由关系映射 urlpatterns = [ url(r'^admin/', admin.site.urls), url(r'^classes',classes), url(r'^add_classes',add_classes), url(r'^delete_classes', delete_classes), url(r'^update_classes', update_classes), ]
模态对话框
主要通过ajax与后台进行信息之间的交互，保证页面不进行刷新
通过给特定标签绑定click事件，在事件中通过jq对象对页面进行一些简单的修改以及与后台的数据交互
ajax参数
$.ajax({
type: 'post', //向后台提交数据的方式
url: "/model_add_classes/", //提交给后台的url，因为这里是本站跳转，直接写uri就可以
data: {"classname": $('.classname').val()},
//data是向后台提交的数据，用字典的方式传送，后台通过key进行取值
//success是后台成功返回信息的情况，对应函数里的参数就是后台发送的数据
success: function (data) {
if (data == 'ok') {
//刷新页面通过 window.location.href = '/model_classes';
window.location.href = '/model_classes';
} else {
$('.tips').text("用户名不能为空");
{#console.log(data);#}
}
;
},
});
后台与ajax对应的代码
def model_classes(request): sq = Classes() classes = sq.select_all() # 正常访问页面还是通过render渲染一个页面回去 return render(request, "model_classes.html", {"classes": classes}) def model_add_classes(request): # 前台通过ajax传过来的数据返回的是文本，通过 HttpResponse("ok") classname = request.POST.get("classname") if classname: sq = Classes() sq.add_data(classname) return HttpResponse("ok") else: return HttpResponse("notok") def check_classes(request): id = request.POST.get("id") sq = Classes() classes = sq.select_one(id) return HttpResponse(classes['name']) def model_update_classes(request): id = request.POST.get("id") classname = request.POST.get("classname") sq = Classes() sq.update_data(id,classname) return HttpResponse("ok") urlpatterns = [ url(r'^model_classes',model_classes), url(r'^model_add_classes',model_add_classes), url(r'^check_classes',check_classes), url(r'^model_update_classes',model_update_classes)]