声明：本次文章是看了B站上的视频和分享的代码笔记后，自己敲了一遍代码。然后再敲一遍代码的同时写文章梳理逻辑，看不懂的同学可以去看原文章和视频。文章如有雷同，可联系我删除！视频链接：

https://www.bilibili.com/video/BV1pq4y1W7a1?spm_id_from=333.999.0.0

博客目录：

一、基于Django+mysql的点餐系统设计--第一篇(开篇：确认需求功能、数据库设计、程序设计)

二、基于Django+mysql的点餐系统设计--第二篇(搭建工程、前后端调试)三、基于Django+mysql的点餐系统设计--第三篇(编写后台员工管理页面)

四、基于Django+mysql的点餐系统设计--第四篇(编写后台菜品分类管理功能)

五、基于Django+mysql的点餐系统设计--第五篇(编写后台店铺管理页面)

本章源码下载地址：https://github.com/hopeSuceess/testorder/tree/testorder_20220221_01

原本是写完后台员工管理就要将后台店铺管理呢，一时疏忽写完后台员工管理跳过后台店铺管理先写了后台菜品分类管理。好了，开始讲后台店铺管理。

后台店铺管理和员工管理、菜品分类逻辑一样，代码包含增删改查。遵循MTV思想：url控制器访问路由，路由找到匹配的views，views的函数进行逻辑判断后出现两种情况，第一种是不需要增删改查数据库，直接调用templates将页面展现给用户；第二种情况是需要增删改查数据库，调用models(将数据增删改查)后将响应结果通过templates展示给用户。因为代码逻辑和上几篇文章的代码逻辑差不多，本篇文章就不详细阐述增删改查了，而是对本次代码编写种出现的文件上传/修改和ajax技术进行阐述。

　　在店铺新增和修改过程中涉及到了图片，先看看具体想要的效果页面，然后咱们再一步步实现它。

　　从效果图可以看出，新增页面、编辑页面都涉及到了店铺封面和店铺logo。可以先在templates/myadmin/shop/add.html和templates/myadmin/shop/edit.html入手，想让上传图片或修改图片，需要提供上传/修改的入口不是。看下面前端代码的实现逻辑：

　　templates/myadmin/shop/add.html店铺封面、店铺logo选项前端代码实现

       
                
                  店铺封面：
                  
                    
                  
                
                
                  店铺logo：
                  
                    
                  
                
              

　　前端代码实现了页面可以上传图片的功能，下面开始后端代码发挥将图片保存到指定位置的作用了。看下面后端代码的具体实现

def insert(request):
    '''执行添加'''
    try:
        # 店铺封面图片的上传处理
        myfile = request.FILES.get("cover_pic",None) #获取用户上传的图片
        if not myfile: #如果图片为空，校验提示
            return HttpResponse("没有店铺封面上传文件信息")
　　　　　　# 给写入后台的图片命名，split('.')是以.做分割，pop()是删除最后一项并返回最后一项的名字，这里是将图片的格式返回，如png、jpg
        cover_pic = str(time.time())+"."+myfile.name.split('.').pop()   
　　　　　　#打开刚才命名的文件名写入图片
        destination = open("./static/uploads/shop/"+cover_pic,"wb+")
        for chunk in myfile.chunks():  # 运用循环控制语句分块写入文件
            destination.write(chunk)
        destination.close() # 关闭打开的文件

        #图标Logo图片的上传处理
        myfile = request.FILES.get("banner_pic",None)
        if not myfile:
            return HttpResponse("没有图标Logo上传文件信息")
        banner_pic = str(time.time())+"."+myfile.name.split('.').pop()
        destination = open("./static/uploads/shop/"+banner_pic, "wb+")
        for chunk in myfile.chunks():
            destination.write(chunk)
        destination.close()
　　　　#以上，将店铺封面和图标Logo写入到指定的目录下了，下面需要将店铺封面和图标Logo的文件名写入到数据库
        
        # 实例化model，封装信息，并执行添加
        ob = Shop()
        ob.name = request.POST['name']
        ob.phone = request.POST['phone']
        ob.address = request.POST['address']
        ob.cover_pic = cover_pic   #将店铺封面名称写入到数据库
        ob.banner_pic = banner_pic　　#将图标Logo名称写入到数据库
        ob.status = 1
        ob.create_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        ob.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        ob.save()
        context = {"info": "添加成功!"}
        return render(request,"myadmin/info.html", context)
    except Exception as err:
        context = {"info": "添加失败"}
        return render(request, "myadmin/info.html", context)

　　写到这里，图片的新增完成了，咱们看一下用户查询的时候怎么展示？后端将数据渲染到前端，前端通过循环控制语句将信息都遍历出来。进一步的通过在指定目录下进行参数配置将对应的图片展示出来。

            
              
                {% for vo in shoplist %}
                
                {% endfor %}
              

                

                  
ID
                  
店铺名称
                  
封面图片
                  
Logo图片
                  
联系电话
                  
当前状态
                  
添加时间
                  
修改时间
                  
操作
                

                  
{{ vo.id }}
                  
{{ vo.name }}
                  

                  

                  
{{ vo.phone }}
                  

                    {% if vo.status == 1 %}
                      营业中..
                    {% elif vo.status == 2 %}
                      休息中..
                    {% elif vo.status == 9 %}
                      已删除
                    {% else %}
                      未知状态
                    {% endif %}
                  
                  
{{ vo.create_at|date:'Y-m-d' }}
                  
{{ vo.update_at|date:'Y-m-d' }}
                  

                    
                       编辑
                    
                       删除
                  
                
            

　　写完了关于图片的新增和查看，接着写一下图片的更新。在templates/myadmin/shop/edit.html页面中将需要更新的图片展示到页面

                  店铺封面：
                  
                    
                      

                  
                
                
                  店铺logo：
                  
                    
                      

                  
                

后端myadmin/views/shop.py的update函数接收判断前端传过来的name="cover_pic"、name="banner_pic",如果传过来为空则不需要更新图片，如果传过来的不为空需要将新图片更新保存。代码如下图

def update(request,sid):
    '''执行编辑信息'''
    try:
        ob = Shop.objects.get(id=sid)
        ob.name = request.POST['name']
        ob.phone = request.POST['phone']
        ob.address = request.POST['address']
        ob.status = request.POST['status']
        ob.update_at = datetime.now().strftime("%Y-%m-%d %H:%M:%S")

        # 店铺封面图片的上传处理
        myfile = request.FILES.get("cover_pic", None)
        if myfile is not None:
            cover_pic = str(time.time()) + "." + myfile.name.split('.').pop()
            destination = open("./static/uploads/shop/" + cover_pic, "wb+")
            for chunk in myfile.chunks():
                destination.write(chunk)
            destination.close()
            ob.cover_pic = cover_pic
        else:
            pass

        # 上传logo图片的处理
        myfile1 = request.FILES.get("banner_pic", None)
        if myfile1 is not None:
            banner_pic = str(time.time()) + "." + myfile1.name.split('.').pop()
            destination1 = open("./static/uploads/shop/" + banner_pic, "wb+")
            for chunk in myfile1.chunks():
                destination1.write(chunk)
            destination1.close()
            ob.banner_pic = banner_pic
        else:
            pass
        ob.save()
        context = {"info":"修改成功!"}
    except Exception as err:
        print(err)
        context = {"info": "修改失败！"}
    return render(request, "myadmin/info.html", context)

　　至此，图片的上传、编辑、查询写完了，接下来要梳理下ajax的逻辑了

　　看下图，点击删除首先出现一个弹出按提示，然后用户再决定是否是继续进行删除还是取消删除。这个弹窗实现的功能就是不改变全局页面的情况下进行局部功能的变动。这个弹窗用到了ajax技术。

　　从前端代码看ajax技术的使用，templates/myadmin/base.html中实现doDel()函数

　　templates/myadmin/shop/index.html中删除选项点击事件中套上doDel()函数

                       删除

　　这样就实现了点击删除出现先弹框提示的功能了。

　　以上，店铺管理两个要点都讲完了，下一篇章开始写菜品管理的代码了。