整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
oores是干凈和現(xiàn)代的餐廳HTML5站點(diǎn)模板，可以用作咖啡館和餐館,或任何食物相關(guān)業(yè)務(wù)的網(wǎng)站。可以展示餐廳的美食或者在線下單訂餐等。
有需要的同學(xué)可以前往網(wǎng)站下載。
Bootstrap介紹。
Bootstrap 是一個(gè)用于快速開發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。
在現(xiàn)代 Web 開發(fā)中，有幾個(gè)幾乎所有的 Web 項(xiàng)目中都需要的組件。
Bootstrap 為您提供了所有這些基本的模塊 - Grid、Typography、Tables、Forms、Buttons 和 Responsiveness。
此外，還有大量其他有用的前端組件，比如 Dropdowns、Navigation、Modals、Typehead、Pagination、Carousal、Breadcrumb、Tab、Thumbnails、Headers 等等。
有了這些，你就可以搭建一個(gè) Web 項(xiàng)目，并讓它運(yùn)行地更快速更輕松。
此外，由于整個(gè)框架是基于模塊的，您可以通過您自己的 CSS 位，甚至是項(xiàng)目開始后的一個(gè)大整改，來進(jìn)行自定義。
bootstrap有什么用？
使用bootstrap框架可以響應(yīng)式網(wǎng)站，bootstrap能使用適用pc和手機(jī)等不同分辨率的設(shè)備，我們不需要根據(jù)設(shè)備的不同而去擔(dān)心顯示效果。目前所有的瀏覽器都支持Bootstrap，所以我們在做網(wǎng)站的時(shí)候，也不要考慮瀏覽器的兼容問題。
Bootstrap的優(yōu)點(diǎn)是什么？
提供了一套完整的流式柵格系統(tǒng)，可以自動(dòng)適應(yīng)設(shè)備屏幕的大小，而且能快速地完成網(wǎng)站的搭建，bootstrap預(yù)先有很多的css類，例如，text-align，我們在使用的時(shí)候，直接命名即可，并且提供了很多插件，來供開發(fā)者使用，當(dāng)然你也可以定制組件，來完成網(wǎng)站的制作。
要
現(xiàn)如今，人們的生活節(jié)奏加快于是就對用餐的時(shí)間有了一定的要求。隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的發(fā)展，結(jié)構(gòu)目前手機(jī)的普及。在線訂餐系統(tǒng)也就運(yùn)營而出了，不僅可以解決用戶的用餐問題同時(shí)還解決了餐廳的銷量。通過對點(diǎn)餐系統(tǒng)的設(shè)計(jì)，改變了傳統(tǒng)了點(diǎn)餐方式通過電子信息和信息化技術(shù)來實(shí)現(xiàn)不接觸點(diǎn)餐，避免了人手不足造成的點(diǎn)餐取餐時(shí)間過長的問題。隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，點(diǎn)餐系統(tǒng)的開發(fā)技術(shù)逐漸成熟，開發(fā)成本也快速的下降。
本系統(tǒng)的開發(fā)和運(yùn)行將會(huì)給人們的用餐帶來巨大的便捷，使得用餐擺脫了時(shí)間和空間的限制。本系統(tǒng)內(nèi)部后臺采用Java開發(fā)，系統(tǒng)的總體劃分為前端和后端。前端模塊主要是用來展示現(xiàn)相關(guān)的訂餐頁面和餐點(diǎn)的數(shù)據(jù)渲染；后端則主要體用一些業(yè)務(wù)和邏輯上的處理服務(wù)。課題將運(yùn)用電子商務(wù)系統(tǒng)規(guī)劃設(shè)計(jì)與分析理論,項(xiàng)目管理理論，Push技術(shù)理論等。對中國點(diǎn)餐系統(tǒng)的運(yùn)營模式發(fā)展的基礎(chǔ)上，設(shè)計(jì)一套切實(shí)可行的點(diǎn)餐系統(tǒng)。
關(guān)鍵詞：在線訂餐；點(diǎn)餐系統(tǒng)；UML；軟件開發(fā)；MySQL數(shù)據(jù)庫
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 研究現(xiàn)狀 1
1.4 研究內(nèi)容 3
1.5 論文結(jié)構(gòu) 3
第2章 相關(guān)理論概述 4
2.1 HTML簡介 4
2.2 層疊樣式表技術(shù) 4
2.3 AJAX技術(shù) 4
2.4 MySQL數(shù)據(jù)庫 4
第3章 點(diǎn)餐平臺系統(tǒng)分析 6
3.1 需求概述 6
3.2 功能需求分析 6
3.3 非功能需求分析 8
3.4 可行性分析 8
第4章 系統(tǒng)的詳細(xì)設(shè)計(jì) 10
4.1 系統(tǒng)架構(gòu) 10
4.2 系統(tǒng)主要模塊功能設(shè)計(jì) 11
4.3 數(shù)據(jù)庫設(shè)計(jì) 12
第5章 點(diǎn)餐平臺的實(shí)現(xiàn) 16
5.1 點(diǎn)餐平臺前臺實(shí)現(xiàn) 16
5.2 點(diǎn)餐平臺后臺實(shí)現(xiàn) 23
第6章 點(diǎn)餐平臺測試 27
6.1 系統(tǒng)測試目標(biāo) 27
6.2 測試方法 27
6.3 測試用例 27
6.4 測試結(jié)果 29
第7章 總結(jié) 30
參考文獻(xiàn) 31
致 謝 31
針對不同用戶需求，本系統(tǒng)主要?jiǎng)澐至藘深愑脩粲美饕杏脩艉凸芾韱T組成，每一組不同的用例都包含了不同的系統(tǒng)模塊和使用權(quán)限。
（1）系統(tǒng)遵循開放模式，注冊用戶可以按照自己的需要查看配件和賬單結(jié)算；未注冊用戶也可以任意查看，但在生成訂單時(shí)要求正式登陸系統(tǒng)。
（2）菜品信息主要包括編碼、名稱、類型、活動(dòng)、描述和圖片等。
（3）提供查詢功能，可實(shí)現(xiàn)關(guān)鍵字模糊查詢，按照類別和活動(dòng)查詢。
（4）購物車中要清楚顯示編碼、名稱、價(jià)格和數(shù)量，并顯示總價(jià)格。
（5）為了方便用戶的操作，可以直接在購物車中刪除配件，如果用戶想繼續(xù)購買，通過點(diǎn)擊該連接可再次購買，更新數(shù)量。
（6）用戶在關(guān)閉瀏覽器之前，可隨時(shí)查看自己的購物車，并可隨時(shí)下訂單。
（7）用戶可以查看自己的訂單，并且可以更改訂單狀態(tài)。
（1）管理員擁有最大權(quán)限，可以進(jìn)入管理頁面并配置系統(tǒng)信息。
（2）管理員可以管理會(huì)員，對用戶信息進(jìn)行刪除。
（3）管理員可以隨時(shí)更新菜品信息，上傳新菜品，以及刪除菜品。
（4）管理員查看訂單，并更新訂單狀態(tài)。
明：本次文章是看了B站上的視頻和分享的代碼筆記后，自己敲了一遍代碼。然后再敲一遍代碼的同時(shí)寫文章梳理邏輯，看不懂的同學(xué)可以去看原文章和視頻。文章如有雷同，可聯(lián)系我刪除！視頻鏈接：
https://www.bilibili.com/video/BV1pq4y1W7a1?spm_id_from=333.999.0.0
博客目錄：
一、基于Django+mysql的點(diǎn)餐系統(tǒng)設(shè)計(jì)--第一篇(開篇：確認(rèn)需求功能、數(shù)據(jù)庫設(shè)計(jì)、程序設(shè)計(jì))
二、基于Django+mysql的點(diǎn)餐系統(tǒng)設(shè)計(jì)--第二篇(搭建工程、前后端調(diào)試)
三、基于Django+mysql的點(diǎn)餐系統(tǒng)設(shè)計(jì)--第三篇(編寫后臺員工管理頁面)
四、基于Django+mysql的點(diǎn)餐系統(tǒng)設(shè)計(jì)--第四篇(編寫后臺菜品分類管理功能)
五、基于Django+mysql的點(diǎn)餐系統(tǒng)設(shè)計(jì)--第五篇(編寫后臺店鋪管理頁面)
六、基于Django+mysql的點(diǎn)餐系統(tǒng)設(shè)計(jì)-第六篇(編寫后臺菜品管理頁面)
本章源碼下載地址：https://github.com/hopeSuceess/testorder/tree/testorder_2022051501
寫到第六篇簡單的增刪改查已經(jīng)都非常熟悉了，這里不做過多闡述，本篇針對以下重點(diǎn)功能進(jìn)行說明：父頁面添加路徑、外鍵、菜品分類瀏覽頁的查看菜品、圖片修改(另一種考慮更全面的方式)、商鋪和菜品分類的二級聯(lián)動(dòng)。
前端父頁面添加路徑比較簡單，但是非常重要。它是菜品管理頁面展示的入口，相關(guān)示例圖和代碼如下
外鍵對于數(shù)據(jù)表來說是很常見的，怎么將外鍵展示到頁面是一個(gè)技術(shù)點(diǎn)。前面講菜品分類管理的時(shí)候涉及到外鍵了，這次菜品管理涉及到店鋪、菜品分類兩個(gè)外鍵，但是從技術(shù)邏輯來說，菜品管理的外鍵展示和菜品分類管理的展示差不多，具體代碼如下：
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菜品分類瀏覽頁的查看菜品：前面在講菜品分類管理的時(shí)候有一個(gè)"查看菜品"的功能沒有實(shí)現(xiàn)。在寫完菜品分類管理的代碼后可以實(shí)現(xiàn)這一功能了。
現(xiàn)在開始實(shí)現(xiàn)查看菜品的功能，首先在myadmin/urls.py中添加菜品分類的路由
path('product/category/<int:sid>', product.categoryProduct, name="myadmin_categoryProduct_index"), #菜品分類-查看菜品瀏覽頁確定完url控制器，開始在views視圖中寫具體的邏輯，在myadmin/views/product.py中的實(shí)現(xiàn)看下圖
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:
# 查詢店鋪名稱中只要含有關(guān)鍵字就可以
list=list.filter(Q(price__contains=kw) | Q(name__contains=kw))
mywhere.append("keyword=" + kw)
list=list.order_by("id") # 對id排序
# 執(zhí)行分頁處理
pIndex=int(pIndex)
page=Paginator(list, 5) # 以5條每頁創(chuàng)建分頁對象
maxpages=page.num_pages # 最大頁數(shù)
# 判斷頁數(shù)是否越界
if pIndex > maxpages:
pIndex=maxpages
if pIndex < 1:
pIndex=1
list2=page.page(pIndex) # 當(dāng)前頁數(shù)據(jù)
plist=page.page_range # 頁碼數(shù)列表
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目錄下寫一個(gè)categoryProduct.html頁面，categoryProduct.html頁面的內(nèi)容如下：
{% extends "myadmin/base.html" %}
{% block main_body %}
<!-- Content Header (Page header) -->
<section class="content-header">
<h1>
菜品信息管理
<small>訂餐系統(tǒng)后臺管理</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>單價(jià)</th>
<th width="45">狀態(tài)</th>
<th>添加時(shí)間</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">未知狀態(tài)</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展示層也搞定了，現(xiàn)在需要在templates/category/index.html的"查看菜品"標(biāo)簽下放一個(gè)路徑進(jìn)行調(diào)試了，如下：
<a href="{% url 'myadmin_categoryProduct_index' vo.id %}" class="btn btn-warning btn-xs">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span> 查看菜品</a>在菜品分類瀏覽頁，點(diǎn)擊查看菜品，跳到了菜品詳情頁：
在上一篇店鋪管理中涉及到了圖片上傳和修改的功能，在本篇繼續(xù)介紹圖片修改(另一種考慮更全面的方式)。在菜品修改時(shí)，考慮更全面的代碼如下：
#后端代碼
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> ......菜品在新增或修改之前，需要帶出來其屬于哪個(gè)商鋪下的哪個(gè)菜品分類。本篇在實(shí)現(xiàn)菜品新增、修改的功能時(shí)，在后端傳入商鋪信息，前端在解析后端傳過來的商品信息時(shí)，通過ajax調(diào)用相對應(yīng)的菜品分類信息，商鋪和菜品分類的二級聯(lián)動(dòng)是本篇非常重要的一個(gè)知識點(diǎn)和功能點(diǎn)。
這里以新增菜品為例，闡述商鋪和菜品分類的二級聯(lián)動(dòng)。myadmin/views/product.py中add函數(shù)獲取店鋪信息并渲染到前端，代碼如下：
def add(request):
"""加載信息添加表單"""
# 獲取當(dāng)前所以店鋪
slist=Shop.objects.values("id", "name")
context={"shoplist": slist}
return render(request, "myadmin/product/add.html", context)templates/myadmin/product/add.html中，店鋪標(biāo)簽接收后端傳過來的店鋪信息，如下：
<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函數(shù)，沒錯(cuò)，店鋪級聯(lián)菜品分類靠的就是doLoadCategory函數(shù)。在調(diào)用店鋪標(biāo)簽時(shí)會(huì)自動(dòng)調(diào)用doLoadCategory函數(shù)，從而實(shí)現(xiàn)店鋪和菜品分類的同步展示。下邊看下doLoadCategory函數(shù)的代碼實(shí)現(xiàn)：
//自定義函數(shù)，實(shí)現(xiàn)通過店鋪id，Ajax加載對應(yīng)的菜品分類信息
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函數(shù)中的 url: "/myadmin/category/load/"+id, 它對應(yīng)myadmin/urls.py中的
path('category/load/<int:sid>', category.loadCategory, name="myadmin_category_load"), 該路由通過調(diào)用loadCategory函數(shù)實(shí)現(xiàn)對應(yīng)店鋪下菜品分類的展示。
loadCategory函數(shù)實(shí)現(xiàn)邏輯如下：
def loadCategory(request,sid):
clist=Category.objects.filter(status__lt=9,shop_id=sid).values("id","name")
# 返回QuerySet對象，使用list強(qiáng)轉(zhuǎn)成對應(yīng)的菜品分類列表信息
print(clist)
print(list(clist))
return JsonResponse({'data': list(clist)})最后看下商鋪和菜品分類二級聯(lián)動(dòng)的效果圖：
好了，本篇的重點(diǎn)功能講完了，下一篇講一下后臺賬號管理頁面
*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
