明：本次文章是看了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代碼。

現在，你的網頁上就會顯示你的店鋪位置了。

總結

在本文中，我們回答了“做一個網頁需要多少錢？怎么從地圖上添加店鋪位置？”這兩個問題，并提供了一些有用的技巧和建議。制作網頁的費用取決于許多因素，而添加店鋪位置非常簡單，只需要遵循以上步驟即可。希望這篇文章對你有所幫助！

歡迎關注！一起探討交流網絡運營、地圖標注和店鋪運營相關知識經驗，讓大家受益，三人行必有我師焉！