分别使用使用jQuery和Vue完成点餐系统

最新推荐文章于 2021-05-09 20:20:01 发布
最新推荐文章于 2021-05-09 20:20:01 发布
阅读量367 收藏 6
点赞数
文章标签： javascript json ViewUI
原文链接：https://my.oschina.net/u/3490747/blog/909891
版权

需求说明：

1.当点击点餐按钮时，对应的菜品将被添加到购物车当中，并且在“点餐按钮”被点击时候，不能被再次点击；

2.购物车中的操作：点击“+”或“-”，被选中菜品的数量以及购物车中的菜品总数和总额相应变化；当被选中菜品的数量小于1时，将被从购物车中删除，同时它的点餐按钮回复可选状态；

3：当点击清空购物车时，购物车内的菜品全部被删除，菜品总数和总额同时清零，所有点餐按钮恢复可点击状态。

/*------------------------------------jQuery版---------------------------------------*/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点餐jQuery版</title>
<style>
*{ margin:0; padding:0}
body{font-size:14px}
h1,h2,h3,h4,h5,h6{ font-weight:normal}
ul{ list-style:none}
i,strong,em{ font-style:normal; font-weight:normal}
p,dt,dd{ padding:5px 0}
button{ padding:5px 10px}
.wrap{ width:500px; padding:20px;position: relative;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
li{ padding:10px; margin-bottom:20px; background:#efefef; position:relative;border-radius: 10px;}
hr{ margin:50px 0}
h2,dt{ font-size:24px; font-weight:bold; padding:10px 0}
h5{ font-size:16px; font-weight:bold}
h6{font-size:14px; padding:5px 0}
.cateList p{ font-size:12px; margin-right:80px}
.cateList .orderBtn{ position:absolute; top:20px; right:20px; border-radius: 5px;}
.shopping_cart{ position:relative}
.shopping_cart .price{ position:absolute; top:10px; right:10px; font-size:18px;}
.shopping_cart em{ font-size:24px}
.clearBtn{ position:absolute; top:10px; right:0;}
.shoppingList{position: relative;}
.shoppingList .price{position: absolute; top: 5px; right:10px;}
.shoppingList h5{margin-bottom: 20px;}
</style>
</head>

<body>
<div class="wrap">
	<h2>菜单</h2>
	<ul class="cateList">
        <li id="cate1" data-name="宫保鸡丁" data-price="22">
            <h5>宫保鸡丁</h5>
            <p>是一道闻名中外的特色传统名菜。鲁菜、川菜、贵州菜中都有收录，原料、做法有差别。</p>
            <h6>价格:<em>22</em></h6>
            <button type="button" class="orderBtn">点餐</button>
        </li>
        <li id="cate2" data-name="鱼香肉丝" data-price="18">
            <h5>鱼香肉丝</h5>
            <p>是一道闻名中外的特色传统名菜。鲁菜、川菜、贵州菜中都有收录，原料、做法有差别。</p>
            <h6>价格:<em>18</em></h6>
            <button type="button" class="orderBtn">点餐</button>
        </li>
        <li id="cate3" data-name="红烧茄子" data-price="15">
            <h5>红烧茄子</h5>
            <p>是一道闻名中外的特色传统名菜。鲁菜、川菜、贵州菜中都有收录，原料、做法有差别。</p>
            <h6>价格:<em>15</em></h6>
            <button type="button" class="orderBtn">点餐</button>
        </li>
    </ul>
    <hr>
    
    <div class="shopping_cart">
        
        <dl>
            <dt>购物车</dt>
            <dd id="total_count">总数:<em>0</em>元</dd>
            <dd id="total_price">总额:<em>0</em>元</dd>
            <dd><button id="clearBtn" type="button" class="clearBtn">清空购物车</button></dd>
        </dl>
        
        
        
        <ul id="shoppingList" class="shoppingList">
            <!--<li>
                <h5>宫保鸡丁</h5>
                <p>价格:<em>28</em></p>
                <p><button type="button">-</button> 数量:<em>1</em> <button type="button">+</button></p>
            </li>-->
        </ul>
    
    </div>

</div>

</body>
</html>
<script src="jquery-1.11.3.min.js"></script>

<script>
	var cate_arr=[
		/*{	
			"id":"cate1",
			"name":"宫保鸡丁",
			"price":32,
			"num":1,
		},*/
	];  //设置空数组，用来盛放被点的菜品的json数据，交于后台使用

	
//点餐
$('.orderBtn').click(function(){
	
	$(this).prop('disabled',true);//按钮禁用
	
	var pa=$(this).parent('li');  //点餐按钮的父级元素(li)
	var json={};	//定义一个空的json
	json.id=pa.attr('id');  //为json添加'li'的属性-->id
	json.name=pa.attr('data-name'); //为json添加'li'的属性-->data-name
	json.price=pa.attr('data-price'); //为json添加'li'的属性-->data-price
	json.num=1;
	cate_arr.push(json);  //将被选中的菜品的id、菜名、价格以json格式追加进cate_arr数组中
	console.log(cate_arr)
	
	//刷新购物车
	ref(cate_arr);
	
});



function ref(arr){  //刷新购物车函数 传入数组(cate_arr 被选菜品)参数
	var total_count=0;//总数量
	var total_price=0;//总价格
	var html="";  //初始化购物车内容
	for(var i=0; i<arr.length; i++){  //for循环被选菜品数组 
		html+='<li data-id="'+arr[i].id+'"><h5>'+arr[i].name+'</h5><p class="price">价格:<em>'+arr[i].price+'</em></p><p><button class="subBtn" type="button">-</button> 数量:<em>'+arr[i].num+'</em> <button class="addBtn" type="button">+</button></p></li>';  //购物车加入内容
		total_count+=arr[i].num;//总数量
		total_price+=arr[i].price*arr[i].num;	//总价格
	};
	$('#shoppingList').empty().append(html);  //先清空购物车内容，在添加新的内容
	$('#total_count em').text(total_count);
	$('#total_price em').text(total_price);
};



//购物车加减数量

$('#shoppingList').on('click','.subBtn,.addBtn',function(){  //绑定事件监听
	var cls=$(this).prop('class');
	var em=$(this).siblings('em');
	var pa=$(this).parents('li');
	var n=parseInt(em.text());
	
	switch(cls){
		case "subBtn":
		n--;  
		for(var j=0; j<cate_arr.length; j++){
			if(cate_arr[j].id==pa.attr('data-id')){
				cate_arr[j].num=n;
				if(n<1){  //当菜品数量被减至小于1时，删除被选菜品
					pa.remove();
					$('#'+cate_arr[j].id+' .orderBtn' ).prop('disabled',false);  //恢复按钮点击状态
					cate_arr.splice(j,1);  //数组中删除数据
				};
				ref(cate_arr);		
			}
		};
		em.text(n);
		
		break;
		case "addBtn":
		n++;
		for(var j=0; j<cate_arr.length; j++){
			if(cate_arr[j].id==pa.attr('data-id')){
				cate_arr[j].num=n;
				ref(cate_arr);		
			}
		};
		em.text(n);
		break;
	}

})


//清空购物车
$('#clearBtn').click(function(){
	$('#shoppingList').empty();
	$('#total_count em').text(0);
	$('#total_price em').text(0);
	$('.orderBtn').prop('disabled',false);
	cate_arr=[];
});
	
</script>

/*------------------------------------vue版---------------------------------------*/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>点餐Vue版</title>
<script src="vue.js"></script>
<style>
*{ margin:0; padding:0}
body{font-size:14px}
h1,h2,h3,h4,h5,h6{ font-weight:normal}
ul{ list-style:none}
i,strong,em{ font-style:normal; font-weight:normal}
p,dt,dd{ padding:5px 0}
button{ padding:5px 10px}
.wrap{ width:500px; padding:20px;position: relative;margin: auto;top: 0;left: 0;right: 0;bottom: 0;}
li{ padding:10px; margin-bottom:20px; background:#efefef; position:relative;border-radius: 10px;}
hr{ margin:50px 0}
h2,dt{ font-size:24px; font-weight:bold; padding:10px 0}
h5{ font-size:16px; font-weight:bold}
h6{font-size:14px; padding:5px 0}
.cateList p{ font-size:12px; margin-right:80px}
.cateList .orderBtn{ position:absolute; top:20px; right:20px; border-radius: 5px;}
.shopping_cart{ position:relative}
.shopping_cart .price{ position:absolute; top:10px; right:10px; font-size:18px;}
.shopping_cart em{ font-size:24px}
.clearBtn{ position:absolute; top:10px; right:0;}
.shoppingList{position: relative;}
.shoppingList .price{position: absolute; top: 5px; right:10px;}
.shoppingList h5{margin-bottom: 20px;}
</style>
</head>

<body>
<div class="wrap" id="box">
	<h2>菜单</h2>
	<ul class="cateList">
        <!-- v-for指令将所有菜品加入到li中 -->
        <li v-for='(item,i) in arr'>
        	<h5>{{ item.name }}</h5>  <!-- 菜名 -->
        	<p>{{ item.des }}</p>  <!-- 描述 -->
        	<h6>{{ item.price }}</h6>  <!-- 价格 -->
        	<button type="button" class="orderBtn" @click='order(i)' :disabled='item.disable'>点餐</button>  <!-- 绑定点击事件（点菜函数） -->
        </li>

    </ul>
    <hr>
    
    <div class="shopping_cart">
        
        <dl>
            <dt>购物车</dt>
            <dd id="total_count">总数:<em>{{ totalNum }}</em>个</dd>
            <dd id="total_price">总额:<em>{{ totalPrice }}</em>元</dd>
            <dd><button id="clearBtn" type="button" class="clearBtn" @click='clear'>清空购物车</button></dd>
        </dl>
        
        <ul id="shoppingList" class="shoppingList">
            <!--<li>
                <h5>宫保鸡丁</h5>
                <p>价格:<em>28</em></p>
                <p><button type="button">-</button> 数量:<em>1</em> <button type="button">+</button></p>
            </li>-->
            <li v-for='(item,i) in shoppingList'>
            	<h5>{{ item.name }}</h5>
            	<p class="price">价格:<em>{{ item.price }}</em></p>
                <p><button type="button" @click='sub(i)'>-</button> 数量:<em>{{ item.num }}</em> <button type="button" @click='add(i)'>+</button></p>
            </li>
        </ul>
    
    </div>

</div>

</body>
</html>
<script>
	var vm=new Vue({
		el: '#box',
		data: {
			arr:[  //将菜品以json对象的方式装入arr数组中 name-菜名 des-菜品描述 price-价格 disable-按钮状态  mark-在数组中的编号
				{name:'宫保鸡丁', des:'宫保鸡丁选用鸡肉为主料，佐以花生米、黄瓜、辣椒等辅料烹制而成。', price:22, disable:false, mark:0},
				{name:'鱼香肉丝', des:'一道特色传统名菜，以鱼香调味而得名，属川菜。', price:18, disable:false, mark:1},
				{name:'木须肉', des:'木须肉原名木樨肉，是一道常见的特色传统名菜，属八大菜系之一的鲁菜。', price:15, disable:false, mark:2}
			],
			shoppingList:[],  //首先定义一个空数组，用来装入选中的菜品信息
			totalNum: 0,  //初始化购物车菜品总量
			totalPrice: 0  //初始化购物车菜品总价格
		},
		methods:{
			order: function(i){  //点菜函数
				this.totalNum++;
				this.totalPrice+=this.arr[i].price;
				this.arr[i].disable=true;

				//shoppingList数组中追加进菜名 价格 数量 和 *编号（这里编号用来记录哪道菜品，以便后边恢复按钮的可点击状态）
				this.shoppingList.push( {name:this.arr[i].name, price:this.arr[i].price, num:1, mark:this.arr[i].mark });  
			},
			sub: function(i){  //购物车内减少数量函数
				this.shoppingList[i].num--;  //选中菜品数量递减

				if(this.shoppingList[i].num<1){  //判断条件：如果菜品数量被减至小于1时
					this.totalNum--;
					this.totalPrice-=this.shoppingList[i].price;
					this.arr[this.shoppingList[i].mark].disable=false;  //点菜按钮恢复
					this.shoppingList.splice(i,1)  //在shoppingList数组中清除掉数量已经为零的菜品

					return;
				};
				this.totalNum--;  //2-- >1  
				this.totalPrice-=this.shoppingList[i].price;
				console.log(this.shoppingList[i].mark)

			},
			add: function(i){  //购物车内增加数量函数
				this.totalNum++;  //总量递增
				this.shoppingList[i].num++;  //选中菜品数量递增
				this.totalPrice+=this.shoppingList[i].price;  //总价递增
				
			},
			clear: function(){
				this.totalNum=0;
				this.totalPrice=0;
				this.shoppingList=[];  //被选菜品数组清零
				for(var i=0 ; i<this.arr.length ; i++){
					this.arr[i].disable=false;  //所有按钮恢复状态
					console.log(this.arr[i].disabled)
				};
			}
		}
	})
</script>

（个人认为）

比起jQuery，vue用来处理数据转换逻辑更加清晰，代码更加简洁。

转载于:https://my.oschina.net/u/3490747/blog/909891

chunzhuang9775
关注
jquery和原生js分别实现点菜单
weixin_43700362的博客
11-27 211
jquery实现的大概思路： 在box1里面有几个li，li里是复选框，里面是菜品名称，可以同时选择多个li。 在box2里存放左右按钮， 点右按钮时，把box1被选的菜品删除，并且在box3里加入； 点左按钮的时候，把box3被选的菜品删除，并且在box1里加入； box3里面暂时存放ul，以便接受box1添加过来的菜品。 程序： <!DOCTYPE html> <html l...
springboot+vue+mysql外卖点餐管理系统源码（包安装+讲解）
最新发布
chengchunhin1的博客
02-21 949
技术架构：springboot+vue+mysql外卖点餐系统，主要包括管理员、用户、商家、骑手四个用户角色，对于用户角色不同，所使用的功能模块相应不同。管理员；首页、个人中心、用户管理、商家管理、菜品分类管理、骑手管理、系统管理、菜品管理、订单管理、配送单管理、商品评价管理商家；用户；骑手；首页、个人中心、订单管理、配送单管理、商品评价管理等功能模块的管理维护等操作。
vue之导入Bootstrap以及jQuery的两种方式
dichengpai8268的博客
02-26 428
Vue引入bootstrap主要有两种方法 方法一：在main.js中引入，此方法导入的bootstrap中对于html，body的一些预设置的css样式可能无效。 一、引入jQuery 在当前项目的目录下（就是package.json），运行命令cnpm install jquery --save-dev 若是运行报错，则运行cnpm install jquery（cnpm...
简单的JQuery订餐系统
03-22
使用JQuery做的简易的订餐系统，界面部局完美，可以加深对JQuery的认识！
Web:Web端点餐系统（HTML5 + CSS3 + JS(jQuery)）
05-10
系统简介 该 Web点餐系统 是为了给食堂提供下一天的菜品做参考，使用HTML5 + CSS3 + JS(jQuery)进行前端开发，数据库采用本地数据库WebSQL，不使用后端开发。 系统实现以下基本功能： 首页导航有三个：首页、我的订单、订单统计 在首页中： 展示当天菜品、热卖菜品、推荐菜品，显示完整的信息。 实现点菜，结果显示在合适位置中，所点的菜能够取消。 点菜的“提交”是将数据保存到本地，然后在“我的订单”中重现这些数据。 在我的订单页面中，能够从保存在本地的数据中心提取出数据并能显示，并能添加和删除。 在订单统计页面中，用图表显示当天热卖前三的菜品统计结果。统计结果用不同类型的图表展示以下维度：菜品、价格、口味、食材。 系统设计 系统功能结构图： 系统实现 首页（当天菜品）/推荐菜品/热买菜品 页面布局的核心html文件 让按钮或标签实现跳转界面：嵌套</
vue引入bootstrap 、jquery
weixin_42931967的博客
01-28 145
一、引入jquery 1、安装jquery npm install jquery --save-dev 2、在build文件夹下面找到webpack.base.conf.js 在module.exports 里面添加 const webpack = require("webpack") plugins: [ new webpack.ProvidePlugin({ $:"jquery...
订货.html vue jquery 制作点餐界面
12-23
html 订货.html vue jquery 制作点餐界面
vue实现仿饿了么点餐静态页面.zip
10-28
在本项目"vue实现仿饿了么点餐静态页面.zip"中，开发者运用了现代前端技术栈，包括Vue.js和jQuery，来构建一个类似于饿了么的点餐系统静态页面。这个项目旨在模拟实际的在线点餐流程，提供用户友好的交互体验。以下...
小次郎点餐系统增删改查外卖系统
02-22
根据标签，我们可以推测系统可能使用了关系型数据库，如MySQL或SQL Server，因为它们能够提供稳定的数据存储和查询能力，适应高并发的点餐场景。此外，数据库优化，如索引的建立、查询语句的优化，都是保障系统响应...
微信小程序点餐系统.rar
04-16
开发者可能使用如jQuery、Vue.js或React.js等流行的前端框架，它们简化了DOM操作，提高了代码的可维护性和性能。 3. **RIA（Rich Internet Applications）**：点餐系统作为一个富互联网应用，提供了类似桌面应用的...
在线点餐系统
04-04
根据三层架构 ：表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）以及DBUtility,编写的在线点餐系统
jQuery仿美团外卖订餐购物车代码
04-27
jQuery仿美团外卖订餐购物车代码 jQuery仿美团外卖订餐购物车代码
jQuery仿美团外卖APP订餐购物车JAVA代码
08-28
jQuery仿美团外卖APP订餐购物车JAVA代码，有商品分类，计算价格
-jq-属性操作-`prop()`-`attr()`/-jq-点餐系统-/-jq-文本操作-`html()`-`text()`-`val()`
不懂帕斯的博客
05-09 145
01-jq-属性操作-prop()-attr() <body> <div class="box" id="box1" data-index=1>前端小白</div> <input type="text" name="username" id="un" placeholder="请输入用户名"> <script> $(function () { // prop()
前端学习笔记（脚手架构建的vue项目中引入jquery和bootstrap）
Never-Say-Never
11-02 338
1、引入jquery 1.1、下载依赖 cnpm install jquery --save-dev 1.2、修改 build/webpack.base.conf.js 配置文件 加入 webpack 对象 var webpack = require('webpack') 在 module.exports 里面加入： plugins: [ new webpack.Pro...
三十四、jquery练习 手机点餐demo
weixin_40976555的博客
06-22 861
一、所用知识点：1.jquery事件绑定方法：(1) bind():类似于js中事件的监听方法；   语法:  $(selector).bind(event,data,function,map) selector:被选元素；event:添加到元素的事件（一个或多个）；data:可选，传递到函数的额外数据；function:执行函数；map:事件映射 ({event:function, event:...
基于Vue与jQuery模拟饿了么点餐Demo
Mrlonely思考笔记
11-02 995
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&am
jquery 实现菜单功能
彻底拆分，一切可控！
08-21 629
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> .right_tab_none{ background-color: gray;
jquery实现菜单功能（单击展开或者关闭）-一般应用于后台
weixin_30410999的博客
01-08 153
<!doctype html> <html> <head> <meta charset="gb2312"> <title>jquery实现菜单功能（单击展开或者关闭）-一般应用于后台</title> <script src="js/jquery-1.11.1.min.js"></script> ...
基于SSM和Vue的点餐平台系统源码及教程
本项目资源包含的ssm233点餐平台系统是一个完整的Java Web应用程序，它结合了SSM（Spring、Spring MVC和MyBatis）框架以及Vue.js前端技术，为用户提供了一个前后端分离的点餐平台。本项目不仅适用于初学者和进阶学习...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值