明：本次文章是看了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选项前端代码实现

       </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">店铺封面：</label>
                  <div class="col-sm-4">
                    <input type="file" name="cover_pic" />
                  </div>
                </div>
                <div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">店铺logo：</label>
                  <div class="col-sm-4">
                    <input type="file" name="banner_pic" />
                  </div>
                </div>
              </div>

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

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)

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

            <div class="box-body table-responsive no-padding">
              <table class="table table-hover">
                <tr>
                  <th>ID</th>
                  <th>店铺名称</th>
                  <th>封面图片</th>
                  <th>Logo图片</th>
                  <th>联系电话</th>
                  <th  width="8%">当前状态</th>
                  <th>添加时间</th>
                  <th>修改时间</th>
                  <th>操作</th>
                </tr>
                {% for vo in shoplist %}
                <tr>
                  <td>{{ vo.id }}</td>
                  <td>{{ vo.name }}</td>
                  <td><img src="/static/uploads/shop/{{ vo.cover_pic }}" width="60"/></td>
                  <td><img src="/static/uploads/shop/{{ vo.banner_pic }}" width="40"/></td>
                  <td>{{ vo.phone }}</td>
                  <td >
                    {% if vo.status==1 %}
                      <span style="color:green">营业中..</span>
                    {% elif vo.status==2 %}
                      <span style="color:red">休息中..</span>
                    {% elif vo.status==9 %}
                      <span style="color:red">已删除</span>
                    {% else %}
                      <span style="color:red">未知状态</span>
                    {% endif %}
                  </td>
                  <td width="10%">{{ vo.create_at|date:'Y-m-d' }}</td>
                  <td width="10%">{{ vo.update_at|date:'Y-m-d' }}</td>
                  <td width="20%">
                    <a href="{% url 'myadmin_shop_edit' vo.id %}" class="btn btn-success btn-xs">
                      <span class="glyphicon glyphicon-edit" aria-hidden="true"></span> 编辑</a>
                    <button type="button" onclick="doDel('{% url 'myadmin_shop_del' vo.id %}')" class="btn btn-danger btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button>
                  </td>
                </tr>
                {% endfor %}
              </table>
            </div>

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

<div class="form-group">
                  <label for="inputPassword3" class="col-sm-2 control-label">店铺封面：</label>
                  <div class="col-sm-4">
                    <input type="file" name="cover_pic" />
                      <td><img src="/static/uploads/shop/{{ shop.cover_pic }}" width="60"/></td>

                  </div>
                </div>
                <div class="form-group">
                  <label class="col-sm-2 control-label">店铺logo：</label>
                  <div class="col-sm-4">
                    <input type="file" name="banner_pic"  />
                      <td><img src="/static/uploads/shop/{{ shop.banner_pic }}" width="60"/></td>

                  </div>
                </div>

后端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()函数

<script type="text/javascript">
  //自定义一个用于实现Ajax信息删除的函数
  function doDel(url){
    Modal.confirm({
      msg: "确定要删除吗？",
      title: ' 信息提示',
      btnok: '确定',
      btncl:'取消'
    }).on(function (e){
      if(e){ //判断是否点击了确定按钮
          window.location.href=url;

      }
    });
  }
</script>

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

<button type="button" onclick="doDel('{% url 'myadmin_shop_del' vo.id %}')" class="btn btn-danger btn-xs">
                      <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除</button>

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

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

当今数字化的时代，拥有一个网站已经成为了商家们必不可少的一部分。然而，对于许多人来说，制作一个网站可能会让他们感到困惑。他们可能会问：“做一个网页需要多少钱？怎么从地图上添加店铺位置？”在本文中，我们将回答这些问题，并提供一些有用的技巧和建议。

制作网页的费用

首先，让我们来谈谈制作网页的费用。这个问题的答案并不是非常简单，因为网页的制作费用取决于许多因素，例如网页的规模、复杂度、设计和功能等等。一般来说，一个简单的网站可能只需要几百元，而一个复杂的网站可能需要几千元或更多。

如果你想自己制作网站，那么你需要考虑购买域名和托管空间的费用。域名是你的网站的网址，例如www.example.com。托管空间是你的网站存储在互联网上的地方。域名和托管空间的费用取决于你选择的服务提供商和服务计划。

如果你不想自己制作网站，那么你可以考虑雇佣专业的网站设计师或公司。他们可以帮助你制作一个专业的网站，并提供一些额外的服务，例如SEO（搜索引擎优化）和网站维护等等。然而，这种选择可能会比自己制作网站更昂贵。

添加店铺位置

现在，让我们来谈谈如何在网页中添加店铺位置。这个过程非常简单，只需要遵循以下步骤：

1. 打开GoogleMaps（https://www.google.com/maps）。

2. 在搜索栏中输入你的店铺地址。

3. 点击搜索按钮。

4. 在地图上找到你的店铺位置。

5. 点击地图上的“分享”按钮。

6. 选择“嵌入地图”选项。

7. 复制生成的HTML代码。

8. 在你的网页中粘贴HTML代码。

现在，你的网页上就会显示你的店铺位置了。

总结

在本文中，我们回答了“做一个网页需要多少钱？怎么从地图上添加店铺位置？”这两个问题，并提供了一些有用的技巧和建议。制作网页的费用取决于许多因素，而添加店铺位置非常简单，只需要遵循以上步骤即可。希望这篇文章对你有所帮助！

欢迎关注！一起探讨交流网络运营、地图标注和店铺运营相关知识经验，让大家受益，三人行必有我师焉！