Django学习第六天

 启动项目命令

python manage.py runserver

取消模态框功能

js实现列表数据删除

第二种实现思路

使用jquery修改模态框标题

编辑页面拿到数据库数据显示默认数据功能实现

想要去数据库中获取数据时：对象/字典

三种不同的数据类型

使用Ajax传入数据实现表单编辑，删除，修改功能

order1.py

import json
import randomfrom django.shortcuts import render
from django.http import JsonResponse, HttpResponse
from app01 import models
from app01.utils.bootstrap import BootStrapModelForm
from django.views.decorators.csrf import csrf_exempt
from datetime import datetime
from app01.utils.pagination import Paginationclass OrderModelForm(BootStrapModelForm):class Meta:model = models.Order# field = "__all__"# fields = [""]exclude = ["oid", "admin"]def order_list(request):queryset = models.Order.objects.all().order_by('-id')page_object = Pagination(request, queryset)form = OrderModelForm()context = {'form': form,'queryset': page_object.page_queryset,'page_string': page_object.html()}return render(request, 'order_list.html', context)@csrf_exempt
def order_add(request):""" 新建订单 （Ajax请求）"""form = OrderModelForm(data=request.POST)if form.is_valid():# 额外增加一些不是用户输入的值（自己计算值）form.instance.oid = datetime.now().strftime("%Y%m%d%H%M%S") + str(random.randint(1000, 9999))# 固定设置管理员ID# form.instance.admin = 当前登录系统管理员的ID# keys = list(request.session.keys())# print(keys)form.instance.admin_id = request.session["info"]["id"]# 保存到数据库中form.save()return JsonResponse({"status": True})# return HttpResponse(json.dumps({"status": True}))return JsonResponse({"status": False, 'error':  form.errors})def order_delete(request):""" 删除订单 """uid = request.GET.get("uid")exists = models.Order.objects.filter(id=uid).exists()if not exists:return JsonResponse({"status": True, 'error': "删除失败，数据不存在"})models.Order.objects.filter(id=uid).delete()return JsonResponse({"status": True})def order_detail(request):""" 根据ID获取订单明细 """# 方式1# uid = request.GET.get("uid")# row_object = models.Order.objects.filter(id=uid).first()# if not row_object:#     return JsonResponse({"status": False, 'error': "数据不存在，"})## # 从数据库中获取到一个对象 row_object# result = {#     "status": True,#     "data": {#         "title": row_object.title,#         "price": row_object.price,#         "status": row_object.status,#     }# }# return JsonResponse({"status": True, "data": result})# 方式2uid = request.GET.get("uid")row_dict = models.Order.objects.filter(id=uid).values("title", "price", "status").first()if not row_dict:return JsonResponse({"status": False, "error": "数据不存在。"})# 从数据库中获取到一个对象 row_objectresult = {"status": True,"data": row_dict}return JsonResponse(result)@csrf_exempt
def order_edit(request):""" 编辑订单 """uid = request.GET.get("uid")row_object = models.Order.objects.filter(id=uid).first()if not row_object:return JsonResponse({"status": False, "tips": "数据不存在。"})form = OrderModelForm(data=request.POST, instance=row_object)if form.is_valid():form.save()return JsonResponse({"status": True})return JsonResponse({"status": False, "error": form.errors})

order_list.html

{% extends 'layout.html' %}{% block content %}
<div class="container"><div style="margin-bottom: 10px"><input type="button" value="新建订单1" class="btn btn-primary" data-toggle="modal" data-target="#myModal"><input id="btnAdd" type="button" value="新建订单2" class="btn btn-primary"></div><div class="panel panel-default"><!-- Default panel contents --><div class="panel-heading"><span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>订单列表</div><!-- Table --><table class="table table-bordered"><thead><tr><th>ID</th><th>订单号</th><th>名称</th><th>价格</th><th>状态</th><th>管理员</th><th>操作</th></tr></thead><tbody>{% for obj in queryset %}<tr uid="{{ obj.id }}"><th>{{ obj.id }}</th><td>{{ obj.oid }}</td><td>{{ obj.title }}</td><td>{{ obj.price }}</td><td>{{ obj.get_status_display }}</td><td>{{ obj.admin.username }}</td><td><input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑"><input uid="{{ obj.id }}" class="btn btn-danger btn-xs btn-delete" type="button" value="删除"></td></tr>{% endfor %}</tbody></table></div><div class="clearfix"><ul class="pagination" style="float:left;">{{ page_string }}</ul></div>
</div><!-- 新建/编辑 订单（对话框） -->
<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">新建</h4></div><div class="modal-body"><form id="formAdd"><div class="clearfix">{% for field in form %}<div class="col-xs-6"><div class="form-group" style="position: relative;margin-bottom: 20px;"><label>{{ field.label }}</label>{{ field }}<span class="error-msg" style="color: red; position: absolute"></span></div></div>{% endfor %}</div></form></div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button><button id="btnSave" type="button" class="btn btn-primary">保 存</button></div></div></div>
</div><!--删除-->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document"><div class="alert alert-danger alert-dismissible fade in" role="alert"><h4>是否确定删除？</h4><p style="margin: 10px 0;">删除后可能会出现不一样的问题</p><p style="text-align: right;"><button id="btnConfirmDelete" type="button" class="btn btn-danger">确 定</button><button type="button" class="btn btn-default" data-dismiss="modal">取 消</button></p></div></div>
</div>
{% endblock %}{% block js %}
<script type="text/javascript">var DELETE_ID;var EDIT_ID;$(function () {bindBtnAddEvent();bindBtnSaveEvent();bindBtnDeleteEvent();bindBtnConfirmDeleteEvent();bindBtnEditEvent();})function bindBtnAddEvent() {$("#btnAdd").click(function () {//将正在编辑的ID设置为空EDIT_ID = undefined;//清空对话框中的数据$("#formAdd")[0].reset();//设置对话框的标题$("#myModalLabel").text("新建");//点击新建按钮，显示对话框$('#myModal').modal('show')});}function bindBtnSaveEvent() {$("#btnSave").click(function() {// 清除错误信息$("#error-msg").empty();if(EDIT_ID) {//编辑doEdit();} else {//添加doAdd();}});}function doEdit() {// 向后台发送请求$.ajax({url: "/order/edit/" + "?uid=" + EDIT_ID,type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success: function (res) {if(res.status) {alert("修改成功");// 清空表单$("#formAdd")[0].reset();//关闭对话框$('#myModal').modal('hide');location.reload();} else {if (res.tips) {alert(res.tips);} else {$.each(res.error, function (name, errorList) {$("#id_" + name).next().text(errorList[0]);})}}}});}function doAdd() {// 向后台发送请求$.ajax({url: "/order/add/",type: "post",data: $("#formAdd").serialize(),dataType: "JSON",success: function (res) {if(res.status) {alert("创建成功");// 清空表单$("#formAdd")[0].reset();//关闭对话框$('#myModal').modal('hide');location.reload();} else {$.each(res.error, function (name, errorList) {$("#id_" + name).next().text(errorList[0]);})}}});}function bindBtnDeleteEvent() {$(".btn-delete").click(function() {//alert("点击了删除");$("#deleteModal").modal('show');//获取当前行的ID并赋值给全部变量DELETE_ID = $(this).attr("uid")});}function bindBtnConfirmDeleteEvent() {$("#btnConfirmDelete").click(function () {//点击确认删除按钮，将全局变量中设置的那个要删除ID发送到后台$.ajax({url: "/order/delete/",type: "GET",data: {uid: DELETE_ID},dataType: "JSON",success: function (res) {if(res.status){
<!--                        //alert("删除成功");-->
<!--                        //隐藏删除框-->
<!--                        $("deleteModal").modal('hide');-->
<!--                        //在页面上将当前一行数据删除（js)-->
<!--                        $("tr[uid='" + DELETE_ID + "']").remove();-->
<!--                        //要删除的ID置空-->
<!--                        DELETE_ID = 0;-->//简单的实现思路location.reload();}else{//删除失败alert(res.error);}}})});}function bindBtnEditEvent() {$(".btn-edit").click(function () {//清空对话框中的数据$("#formAdd")[0].reset();var uid = $(this).attr("uid");EDIT_ID = uid;//发送Ajax去后端获取当前行的相关数据$.ajax({url: "/order/detail/",type: "get",data:{uid:uid},dataType:"JSON",success: function (res) {if(res.status) {//将数据赋值到对话框中的标签中$.each(res.data, function (name, value) {$("#id_" + name).val(value);})//修改对话框的标题$("#myModalLabel").text("编辑");//点击编辑，显示对话框$("#myModal").modal('show');} else {alert(res.error);}}})});}
</script>
{% endblock %}

导入echarts图表

出现图表加载不出来的问题

可能是

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.1/dist/echarts.min.js"></script>

放在了

<script type="text/javascript">// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('m1'));// 指定图表的配置项和数据var option = {title: {text: 'ECharts 入门示例'},tooltip: {},legend: {data: ['销量']},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10, 10, 20]}]};// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);

的后面了