oores是干凈和現代的餐廳HTML5站點模板，可以用作咖啡館和餐館,或任何食物相關業務的網站。可以展示餐廳的美食或者在線下單訂餐等。

有需要的同學可以前往網站下載。

Bootstrap介紹。

Bootstrap 是一個用于快速開發 Web 應用程序和網站的前端框架。

在現代 Web 開發中，有幾個幾乎所有的 Web 項目中都需要的組件。

Bootstrap 為您提供了所有這些基本的模塊 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。

此外，還有大量其他有用的前端組件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。

有了這些，你就可以搭建一個 Web 項目，并讓它運行地更快速更輕松。

此外，由于整個框架是基于模塊的，您可以通過您自己的 CSS 位，甚至是項目開始后的一個大整改，來進行自定義。

bootstrap有什么用？

使用bootstrap框架可以響應式網站，bootstrap能使用適用pc和手機等不同分辨率的設備，我們不需要根據設備的不同而去擔心顯示效果。目前所有的瀏覽器都支持Bootstrap，所以我們在做網站的時候，也不要考慮瀏覽器的兼容問題。

Bootstrap的優點是什么？

提供了一套完整的流式柵格系統，可以自動適應設備屏幕的大小，而且能快速地完成網站的搭建，bootstrap預先有很多的css類，例如，text-align，我們在使用的時候，直接命名即可，并且提供了很多插件，來供開發者使用，當然你也可以定制組件，來完成網站的制作。

要

現如今，人們的生活節奏加快于是就對用餐的時間有了一定的要求。隨著計算機網絡技術的發展，結構目前手機的普及。在線訂餐系統也就運營而出了，不僅可以解決用戶的用餐問題同時還解決了餐廳的銷量。通過對點餐系統的設計，改變了傳統了點餐方式通過電子信息和信息化技術來實現不接觸點餐，避免了人手不足造成的點餐取餐時間過長的問題。隨著互聯網技術的發展，點餐系統的開發技術逐漸成熟，開發成本也快速的下降。

本系統的開發和運行將會給人們的用餐帶來巨大的便捷，使得用餐擺脫了時間和空間的限制。本系統內部后臺采用Java開發，系統的總體劃分為前端和后端。前端模塊主要是用來展示現相關的訂餐頁面和餐點的數據渲染；后端則主要體用一些業務和邏輯上的處理服務。課題將運用電子商務系統規劃設計與分析理論,項目管理理論，Push技術理論等。對中國點餐系統的運營模式發展的基礎上，設計一套切實可行的點餐系統。

關鍵詞：在線訂餐；點餐系統；UML；軟件開發；MySQL數據庫

Abstract

Nowadays, people's pace of life accelerates, so there are certain requirements for dining time. With the development of computer network technology, the structure of the current popularity of mobile phones. The online ordering system is also operational, which can not only solve the problem of users, but also solve the sales of restaurants. Through the design of the ordering system, the traditional way of ordering is changed through electronic information and information technology to achieve no contact ordering, avoiding the problem of too long ordering time caused by the lack of manpower. With the development of Internet technology, the development technology of the ordering system is gradually mature, and the development cost is also falling rapidly reduced.

The development and operation of this system will bring great convenience to people's dining, so that the dining can get rid of the limitation of time and space. The internal background of the system is developed by Java, and the overall system is divided into front end and back end. The front-end module is mainly used to show the data rendering of the relevant ordering pages and meals; the back-end module mainly uses some business and logical processing services. The project will use the theory of electronic commerce system planning, design and analysis, project management theory, Push technology theory, etc. On the basis of the development of the operation mode of the Chinese ordering system, a set of practical ordering system is designed.

Keywords: Online ordering; ordering system; UML; software development; MySQL database

目 錄

第1章 引言 1

1.1 研究背景 1

1.2 選題意義 1

1.3 研究現狀 1

1.4 研究內容 3

1.5 論文結構 3

第2章 相關理論概述 4

2.1 HTML簡介 4

2.2 層疊樣式表技術 4

2.3 AJAX技術 4

2.4 MySQL數據庫 4

第3章 點餐平臺系統分析 6

3.1 需求概述 6

3.2 功能需求分析 6

3.3 非功能需求分析 8

3.4 可行性分析 8

第4章 系統的詳細設計 10

4.1 系統架構 10

4.2 系統主要模塊功能設計 11

4.3 數據庫設計 12

第5章 點餐平臺的實現 16

5.1 點餐平臺前臺實現 16

5.2 點餐平臺后臺實現 23

第6章 點餐平臺測試 27

6.1 系統測試目標 27

6.2 測試方法 27

6.3 測試用例 27

6.4 測試結果 29

第7章 總結 30

參考文獻 31

致 謝 31

針對不同用戶需求，本系統主要劃分了兩類用戶用例，主要有用戶和管理員組成，每一組不同的用例都包含了不同的系統模塊和使用權限。

（1）系統遵循開放模式，注冊用戶可以按照自己的需要查看配件和賬單結算；未注冊用戶也可以任意查看，但在生成訂單時要求正式登陸系統。

（2）菜品信息主要包括編碼、名稱、類型、活動、描述和圖片等。

（3）提供查詢功能，可實現關鍵字模糊查詢，按照類別和活動查詢。

（4）購物車中要清楚顯示編碼、名稱、價格和數量，并顯示總價格。

（5）為了方便用戶的操作，可以直接在購物車中刪除配件，如果用戶想繼續購買，通過點擊該連接可再次購買，更新數量。

（6）用戶在關閉瀏覽器之前，可隨時查看自己的購物車，并可隨時下訂單。

（7）用戶可以查看自己的訂單，并且可以更改訂單狀態。

（1）管理員擁有最大權限，可以進入管理頁面并配置系統信息。

（2）管理員可以管理會員，對用戶信息進行刪除。

（3）管理員可以隨時更新菜品信息，上傳新菜品，以及刪除菜品。

（4）管理員查看訂單，并更新訂單狀態。

明：本次文章是看了B站上的視頻和分享的代碼筆記后，自己敲了一遍代碼。然后再敲一遍代碼的同時寫文章梳理邏輯，看不懂的同學可以去看原文章和視頻。文章如有雷同，可聯系我刪除！視頻鏈接：

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

博客目錄：

一、基于Django+mysql的點餐系統設計--第一篇(開篇：確認需求功能、數據庫設計、程序設計)

二、基于Django+mysql的點餐系統設計--第二篇(搭建工程、前后端調試)

三、基于Django+mysql的點餐系統設計--第三篇(編寫后臺員工管理頁面)

四、基于Django+mysql的點餐系統設計--第四篇(編寫后臺菜品分類管理功能)

五、基于Django+mysql的點餐系統設計--第五篇(編寫后臺店鋪管理頁面)

六、基于Django+mysql的點餐系統設計-第六篇(編寫后臺菜品管理頁面)

本章源碼下載地址：https://github.com/hopeSuceess/testorder/tree/testorder_2022051501

寫到第六篇簡單的增刪改查已經都非常熟悉了，這里不做過多闡述，本篇針對以下重點功能進行說明：父頁面添加路徑、外鍵、菜品分類瀏覽頁的查看菜品、圖片修改(另一種考慮更全面的方式)、商鋪和菜品分類的二級聯動。

　　前端父頁面添加路徑比較簡單，但是非常重要。它是菜品管理頁面展示的入口，相關示例圖和代碼如下

　　外鍵對于數據表來說是很常見的，怎么將外鍵展示到頁面是一個技術點。前面講菜品分類管理的時候涉及到外鍵了，這次菜品管理涉及到店鋪、菜品分類兩個外鍵，但是從技術邏輯來說，菜品管理的外鍵展示和菜品分類管理的展示差不多，具體代碼如下：

    for vo in list2:
        shopDetail=Shop.objects.get(id=vo.shop_id)
        vo.shopname=shopDetail.name
        categoryDetail=Category.objects.get(id=vo.category_id)
        vo.categoryname=categoryDetail.name

　菜品分類瀏覽頁的查看菜品：前面在講菜品分類管理的時候有一個"查看菜品"的功能沒有實現。在寫完菜品分類管理的代碼后可以實現這一功能了。

　　現在開始實現查看菜品的功能，首先在myadmin/urls.py中添加菜品分類的路由

    path('product/category/<int:sid>', product.categoryProduct, name="myadmin_categoryProduct_index"), #菜品分類-查看菜品瀏覽頁

　　確定完url控制器，開始在views視圖中寫具體的邏輯，在myadmin/views/product.py中的實現看下圖

def categoryProduct(request,sid,pIndex=1):
    '''瀏覽信息'''
    list=Product.objects.filter(status__lt=9, category_id=sid)
    # smod=Product.objects
    # list=smod.filter(status__lt=9)
    mywhere=[]

    # 獲取、判斷并封裝keyword建搜索
    kw=request.GET.get("keyword", None)
    if kw:
        # 查詢店鋪名稱中只要含有關鍵字就可以
        list=list.filter(Q(price__contains=kw) | Q(name__contains=kw))
        mywhere.append("keyword=" + kw)

    list=list.order_by("id")  # 對id排序
    # 執行分頁處理
    pIndex=int(pIndex)
    page=Paginator(list, 5)  # 以5條每頁創建分頁對象
    maxpages=page.num_pages  # 最大頁數

    # 判斷頁數是否越界
    if pIndex > maxpages:
        pIndex=maxpages
    if pIndex < 1:
        pIndex=1
    list2=page.page(pIndex)  # 當前頁數據
    plist=page.page_range  # 頁碼數列表

    for vo in list2:
        shopDetail=Shop.objects.get(id=vo.shop_id)
        vo.shopname=shopDetail.name
        categoryDetail=Category.objects.get(id=vo.category_id)
        vo.categoryname=categoryDetail.name

    # 封裝信息加載模板輸出
    context={"productlist": list2, 'plist': plist, 'pIndex': pIndex, 'maxpages': maxpages, 'mywhere': mywhere}
    return render(request, "myadmin/product/categoryProduct.html", context)

　　寫完了views視圖層開始寫templates展示層，在templates/product目錄下寫一個categoryProduct.html頁面，categoryProduct.html頁面的內容如下：

{% extends "myadmin/base.html" %}

{% block main_body %}
    <!-- Content Header (Page header) -->
    <section class="content-header">
      <h1>
        菜品信息管理
        <small>訂餐系統后臺管理</small>
      </h1>
      <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首頁</a></li>
        <li class="active">菜品信息管理</li>
      </ol>
    </section>

    <!-- Main content -->
    <section class="content container-fluid">

      <div class="row">
        <div class="col-xs-12">
          <div class="box">
            <div class="box-header">
              <h3 class="box-title"><i class="fa fa-calendar"></i> 菜品信息表</h3>

            </div>
            <!-- /.box-header -->
            <div class="box-body table-responsive no-padding">
              <table class="table table-hover">
                <tr>
                  <th>ID</th>
                  <th>店鋪名稱</th>
                  <th>菜品分類</th>
                  <th>菜品圖片</th>
                  <th>菜品名稱</th>
                  <th>單價</th>
                  <th  width="45">狀態</th>
                  <th>添加時間</th>
                </tr>
                {% for vo in productlist %}
                <tr>
                  <td>{{ vo.id }}</td>
                  <td>{{ vo.shopname }}</td>
                  <td>{{ vo.categoryname }}</td>
                  <td><img src="/static/uploads/product/{{ vo.cover_pic }}" width="30"/></td>
                  <td>{{ vo.name }}</td>
                  <td>{{ vo.price }}</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>
                </tr>
                {% endfor %}
              </table>
            </div>
            <!-- /.box-body -->
            <div class="box-footer clearfix">

              <ul class="pagination pagination-sm no-margin pull-right">
                <li><a href="{% url 'myadmin_product_index' pIndex|add:-1 %}?{{ mywhere|join:'&' }}">?</a></li>
                {% for p in plist %}
                  <li {% if pIndex==p %}class="active"{% endif %}><a href="{% url 'myadmin_product_index' p %}?{{ mywhere|join:'&' }}">{{ p }}</a></li>
                {% endfor %}
                <li><a href="{% url 'myadmin_product_index' pIndex|add:1 %}?{{ mywhere|join:'&' }}">?</a></li>
              </ul>
            </div>
          </div>
          <!-- /.box -->
        </div>
      </div>

    </section>
    <!-- /.content -->
{% endblock %}

　　templates展示層也搞定了，現在需要在templates/category/index.html的"查看菜品"標簽下放一個路徑進行調試了，如下：

  <a href="{% url 'myadmin_categoryProduct_index' vo.id %}" class="btn btn-warning btn-xs">
                      <span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查看菜品</a>

　　在菜品分類瀏覽頁，點擊查看菜品，跳到了菜品詳情頁：

　　在上一篇店鋪管理中涉及到了圖片上傳和修改的功能，在本篇繼續介紹圖片修改(另一種考慮更全面的方式)。在菜品修改時，考慮更全面的代碼如下：

#后端代碼

def update(request,sid):
    try:
        # 獲取原圖片
        oldpicname=request.POST['oldpicname']
        # 圖片的上傳處理
        myfile=request.FILES.get("cover_pic", None)
        if not myfile:
            cover_pic=oldpicname
        else:
            cover_pic=str(time.strftime("%Y%m%d.%H%M%S"))+"."+myfile.name.split('.').pop()
            destination=open("./static/uploads/product/"+cover_pic, "wb+")
            for chunk in myfile.chunks():
                destination.write(chunk)
            destination.close()

        productList=Product.objects.get(id=sid)
        productList.shop_id=request.POST['shop_id']
        productList.category_id=request.POST['category_id']
        productList.name=request.POST['name']
        productList.price=request.POST['price']
        productList.cover_pic=request.POST['cover_pic']
        productList.update_at=datetime.now().strftime("%Y-%m-%d %H:%M:%S")
        productList.save()
        context={'info': '修改成功！'}

        # 判斷并刪除老圖片
        if myfile:
            os.remove("./static/uploads/product/"+oldpicname)
    except Exception as err:
        print(err)
        context={'info': '添加失敗！'}
        # 判斷并刪除新圖片
        if myfile:
            os.remove("./static/uploads/product/"+cover_pic)
    return render(request, "myadmin/info.html", context)

　　templates/myadmin/product/edit.html圖片更改的前端代碼如下：

......

<input type="hidden" name="oldpicname" value="{{ product.cover_pic }}" />

......

<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" /><br/>
    <img src="/static/uploads/product/{{ product.cover_pic }}" width="200"/>
  </div>
</div>

 ......

　　菜品在新增或修改之前，需要帶出來其屬于哪個商鋪下的哪個菜品分類。本篇在實現菜品新增、修改的功能時，在后端傳入商鋪信息，前端在解析后端傳過來的商品信息時，通過ajax調用相對應的菜品分類信息，商鋪和菜品分類的二級聯動是本篇非常重要的一個知識點和功能點。

　　這里以新增菜品為例，闡述商鋪和菜品分類的二級聯動。myadmin/views/product.py中add函數獲取店鋪信息并渲染到前端，代碼如下：

def add(request):
    """加載信息添加表單"""
    # 獲取當前所以店鋪
    slist=Shop.objects.values("id", "name")
    context={"shoplist": slist}
    return render(request, "myadmin/product/add.html", context)

　　templates/myadmin/product/add.html中，店鋪標簽接收后端傳過來的店鋪信息，如下：

<div class="col-sm-4">
  <select name="shop_id" id="shop_id" onchange="doLoadCategory()" class="form-control select2" style="width: 100%;">
    {% for svo in shoplist %}
      <option value="{{ svo.id }}">{{ svo.name }}</option>
    {% endfor %}
  </select>
</div>

　　在上面的代碼中，大家可以看到doLoadCategory函數，沒錯，店鋪級聯菜品分類靠的就是doLoadCategory函數。在調用店鋪標簽時會自動調用doLoadCategory函數，從而實現店鋪和菜品分類的同步展示。下邊看下doLoadCategory函數的代碼實現：

  //自定義函數，實現通過店鋪id，Ajax加載對應的菜品分類信息
  function doLoadCategory(){
    //獲取選中的id號
    var id=$("#shop_id").val();
    $("#category_id").empty();
    $.ajax({
        url: "/myadmin/category/load/"+id,
        type: 'get',
        data: {},
        dataType:'json',
        success:function(res){
            if(res.data.length<1)
                return;
            var data=res.data;
            var select=$("#category_id")
            for(var i=0;i<data.length;i++){
                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(select)
                //select.append('<option value="'+data[i].id+'">'+data[i].name+'</option>'); 
            }

        }
    });

  }

　　這里說下doLoadCategory函數中的 url: "/myadmin/category/load/"+id, 它對應myadmin/urls.py中的

path('category/load/<int:sid>', category.loadCategory, name="myadmin_category_load"), 該路由通過調用loadCategory函數實現對應店鋪下菜品分類的展示。

loadCategory函數實現邏輯如下：

def loadCategory(request,sid):
    clist=Category.objects.filter(status__lt=9,shop_id=sid).values("id","name")
    # 返回QuerySet對象，使用list強轉成對應的菜品分類列表信息
    print(clist)
    print(list(clist))
    return JsonResponse({'data': list(clist)})

　　最后看下商鋪和菜品分類二級聯動的效果圖：

好了，本篇的重點功能講完了，下一篇講一下后臺賬號管理頁面