微信外卖点餐系统开发教程

1，首先我们讲解技术实现原理

上面这幅图便是我们点餐系统的首页

首先布局采用3个div，首部进行图片放置，宣传，

中间部份作为店铺内容，主要从数据库中获取数据，然后动态地进行JS布局

底部设为position:fixed,使其悬浮

在进入首页之前我们网页会对用户进行一个认证，需要用户关注该公众号，然后获取用户的openid和基本信息，然后进数据库中进行查找openid，若没有就存入我们数据。把获得的openid写入session中用来保持用户登录状态。

此处博主在开发过程中遇到的一个问题就是通过url获取openid时，我错误地认为其是以json信息返回，于是采用获取json的ajax方法获取，尝试多遍无果，最后采用直接读取网页内容存入字符串中进行解析。

后面在添加

接下来就通过点击店铺进入具体的菜品界面

这个地方我们给每个店铺进入的链接后面添加的参数

<%for(int i = 0; i < len; i++){%>
li[i++].οnclick=function(){window.location="shangpin.jsp?param="+<%=i+1%>;}
<%}%>

商品界面通过这个参数进行查询不同的数据库然后动态加载数据到界面中

这里我们看下数据库

其中id全是auto_increment,primary key.

我们设置了两个数据库，一个分类数据库left，一个商品right，其中right通过id1号对应left的id号关联，于是我们便可以通过对应的id1的编号进行分类显示

对于获取用户操作后选择的商品，这里我们采用add函数，一旦用户点击一下加号，我们执行一次add函数，通过标签spname(display:none)来添加该加号元素对应处的商品名

$(".add").click(function () {  
		$(this).prevAll().css("display", "inline-block");  
		var n = $(this).prev().text();  
		var num = parseInt(n) + 1;  
		if (num == 0) { return; }  
		$(this).prev().text(num);  
		var danjia = $(this).next().text();//获取单价  
		var a = $("#totalpriceshow").html();//获取当前所选总价  
		$("#totalpriceshow").html((a * 1 + danjia * 1).toFixed(2));//计算当前所选总价  
		var nm = $("#totalcountshow").html();//获取数量  
		$("#totalcountshow").html(nm*1+1);  
		var sp1 = $(".spname").html();
		$(".spname").html(sp1+$(this).next().next().text()+" ");
		jss();//<span style='font-family: Arial, Helvetica, sans-serif;'></span>   改变按钮样式
	});