因为有一个设计的要求,我们自己要选一个小项目去完成。本人就选了一个叫做“斑鱼馆”点餐系统的小项目。学艺不精,不喜勿喷。
首先,肯定是要解餐馆点餐流程的。大概分成了已下几个小步骤:
(1)数据库设计要符合范式要求。
(2)浏览、查询菜品,查看菜品详情
(3)浏览评论,发布评论,点赞
(4)实现登录、注册功能。
(5)实现订位下单功能。
明白功能需求:浏览、查询菜品、查看菜品详情;浏览、发布评论,查看评论,统计评论数;各个菜品点赞;实现登录、注册功能;实现下单功能;设置用户头像;调整音乐;积分兑换各个奖品;用户资料显示;弹窗功能;
了解数据需求:面记录每个用户的账号,密码,姓名,手机号,头像,钱,积分;记录每个菜品的评论、评论数、点赞数;用户的订单信息;记录每个奖品的信息。
功能方面的需求可以让我们知道我们大概需要啥功能,大多还是前端的。
数据需求就需要连接数据库,跟数据库有关的操作,因为博主大三学的SQLSERVER,所以都是sql语言。
数据库逻辑级设计:图1:全局ER图
图2:用户表
图3:订单表
图4:点赞表
图5:评论表
系统功能模块清单:
模块编号 模块名称 模块功能描述
M1 新账户注册模块 新用户的注册
M2 已有账户登录模块 账户登录验证
M3 菜品信息模块 查看菜品信息
M4 点菜模块 订单
M5 会员中心模块 查看用户信息
M6 奖品模块 积分兑换奖品
M7 音乐播放模块 播放BGM
代码:
Login.jsp
<form action="pdyh">
<p class="clearfix"><span class="floatl">帐号:</span><em class="floatr">
<input type="text" class="ltxt floatl" name="zh" placeholder="请输入账号">
</em></p>
<p class="clearfix"><span class="floatl">密码:</span><em class="floatr">
<input type="password" class="ltxt floatl" name="password" placeholder="请输入密码">
</em></p>
<p class="clearfix lbtn">
<input type="submit" class="orange-btn floatl lbtn-dl" value="登录">
<a href="register.html" class="floatr red-btn">申请VIP</a></p>
<a href="忘记密码.html">忘记密码</a>
</form>
Pdyh.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String zh=request.getParameter("zh");
String pwd =request.getParameter("password");
PrintWriter out = response.getWriter();
if(zh==null || zh.isEmpty()||pwd==null || pwd.isEmpty()) {
//System.out.print("账户或密码不能为空!");
request.setAttribute("cw", "账户或密码不能为空!");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
try {
BUsersDao dal=new BUsersDao();
bUsers currentUser = dal.getOne(zh, pwd);
if(currentUser==null){
System.out.println("账户或密码不匹配!");
request.setAttribute("cuowu", "账户或密码不匹配!!!");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
HttpSession session=request.getSession();
session.setAttribute("zh", zh);
//System.out.println(session.getAttribute("zh"));
request.setAttribute("cg", "登录成功!");
//out.write("<script>alert('登录成功!');</script>");
//request.getRequestDispatcher("index.html").forward(request, response);
//request.getRequestDispatcher("index.html").forward(request, response);
response.sendRedirect("index.jsp");
//
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
} 代码片
Register.html
<form action="xyh" method="post">
<p class="clearfix"><span class="floatl">帐号:</span><em class="floatr">
<input type="text" class="ltxt floatl" name="zh" placeholder="请输入账号(可中文跟数字)">
</em></p>
<p class="clearfix"><span class="floatl">密码:</span><em class="floatr">
<input type="password" class="ltxt floatl" name="pwd" placeholder="请输入密码(只能是数字)">
</em></p>
<p class="clearfix"><span class="floatl">姓名:</span><em class="floatr" >
<input type="text" class="ltxt floatl" name="name" placeholder="请输入姓名">
</em></p>
<p class="clearfix"><span class="floatl">手机:</span><em class="floatr">
<input type="tel" class="ltxt floatl" name="phone" placeholder="请输入手机(只能是十一位数字)">
</em></p>
<p class="clearfix"><span class="floatl">头像:</span><em class="floatr" >
<input type="file" class="ltxt floatl" name="photo" >
</em></p>
<p class="lbtn" style=" text-align:center;">
<input type="submit" class="orange-btn lbtn-dl" value="注 册">
</p>
<p class="lbtn" style=" text-align:center;">
<input type="reset" class="orange-btn lbtn-dl" value="重填">
</p>
</form>
Xyh.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
//HttpSession session = request.getSession();
//String a=(String)session.getAttribute("zh");
//System.out.print(a);
String zh=request.getParameter("zh");
String name =request.getParameter("name");
String pwd =request.getParameter("pwd");
int pwd1 = Integer.parseInt(pwd);
String phone =request.getParameter("phone");
int phone1 = Integer.parseInt(phone);
String photo ="D://"+request.getParameter("photo");
System.out.println(photo);
BUsersDao usersDao= new BUsersDao();
bUsers user = new bUsers();
user.setZh(zh);
user.setName(name);
user.setPwd(pwd1);
user.setPhone(phone1);
user.setPhoto(photo);
boolean b = usersDao.insert(user);
//System.out.print(b);
//System.out.print("232323");
request.setAttribute("error", "注册成功");
request.getRequestDispatcher("login.jsp").forward(request, response);
}
忘记密码.html
<form action="wjmm" method="post">
<p class="clearfix"><span class="floatl">输入帐号:</span><em class="floatr">
<input type="text" class="ltxt floatl" name="zh">
</em></p>
<p class="clearfix"><span class="floatl">输入新密码:</span><em class="floatr">
<input type="password" class="ltxt floatl" name="password">
</em></p>
<p class="clearfix lbtn" style="text-align:center;">
<input type="submit" class="orange-btn floatl lbtn-dl" value="确认" style="text-align:center;">
</p>
</form>
Wjmm.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Served at: ").append(request.getContextPath());
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String zh=request.getParameter("zh");
String xmm=request.getParameter("password");
BUsersDao dal=new BUsersDao();
boolean a=dal.upDate_1(xmm, zh);
if(a==true){
System.out.println("密码修改成功!");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
System.out.println("密码修改失败!");
request.getRequestDispatcher("忘记密码.html").forward(request, response);
}
}
Xiugaiyonghuming.jsp
<form action="Xgyhm" method="post">
<p>用户名:</p>
<p><input type="text" class="etxt" name="yhm"></p>
<p class="tips">以中文或英文字母开头,限4-16个字符,一个汉字为两个字符</p>
<p><input type="submit" class="ebtn orange-btn" value="确 定"></p>
</form>
Xgyhm.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String xzh=request.getParameter("yhm");
HttpSession session=request.getSession();
String zh=(String) session.getAttribute("zh");
try{
BUsersDao dal=new BUsersDao();
boolean a=dal.upDate(xzh,zh);
if(a==true){
//System.out.println("修改成功!");
request.setAttribute("cg", "修改成功!");
bUsers user1 = dal.find(zh);
session.removeAttribute("zh");
request.removeAttribute("user");
session.setAttribute("zh", xzh);
request.setAttribute("user", user1);
request.getRequestDispatcher("Hyzx").forward(request, response);
}else{
//System.out.println("修改失败!");
request.setAttribute("sb", "修改失败!");
}
}catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
Membercenter.jsp
<%
bUsers user=(bUsers)request.getAttribute("user");
String a =user.getPhoto();
//String a="D:/1.jpg";
//System.out.println(a);
String b = Base64Util.GetImageStr(a);
request.setAttribute("b", b);
//System.out.print(b);
%>
<div class="body">
<div class="mem-top clearfix">
<em class="floatl mem-img"><img src="data:image/jpg;base64,${b}" width="30%" alt="头像"></em>
<div class="mem-intro floatr">
<p><b>${user.getZh()}</b></p>
<p>账户余额:<strong>${user.getQianbao()}元</strong></p>
<p><a href="card.jsp">我的VIP会员卡</a>,我还不是VIP,<br /><a href="register.html">申请成为VIP</a></p>
</div><!--mem-intro-->
</div><!--mem-top-->
<dl class="mem-orderlist mem">
<dt>订单</dt>
<dd>
<p><a href="Yuding" class="clearfix"><span class="floatl"><i class="icon-pencil"></i>预定中</span><em class="floatr">0<i class="icon-chevron-right"></i></em></a></p>
<p><a href="yichengjiao.html" class="clearfix"><span class="floatl"><i class="icon-check"></i>已成交</span><em class="floatr">0<i class="icon-chevron-right"></i></em></a></p>
<p><a href="weichengjiao.html" class="clearfix"><span class="floatl"><i class="icon-check-empty"></i>未成交</span><em class="floatr">0<i class="icon-chevron-right"></i></em></a></p>
</dd>
</dl>
<dl class="mem-score mem">
<dt>会员积分</dt>
<dd>
<p><a href="jifenlieb.html" class="clearfix"><span class="floatl"><i class="icon-money"></i>现有积分:<b class="orange">${user.getJifen() }</b></span><em class="floatr">积分记录<i class="icon-chevron-right"></i></em></a></p>
<p><a href="jifenhuodong.html" class="clearfix"><span class="floatl"><i class="icon-gift"></i>积分活动</span><em class="floatr"><i class="icon-chevron-right"></i></em></a></p>
<p><a href="jifenguize.html" class="clearfix"><span class="floatl"><i class="icon-book"></i>积分规则</span><em class="floatr"><i class="icon-chevron-right"></i></em></a></p>
</dd>
</dl>
<dl class="mem-set mem">
<dt>账户设置</dt>
<dd>
<p><a href="xiugaiyonghuming.jsp" class="clearfix"><span class="floatl"><i class="icon-user"></i>${user.getZh() }</span><em class="floatr">修改<i class="icon-chevron-right"></i></em></a></p>
<p><a href="xiugaimima.html" class="clearfix"><span class="floatl"><i class="icon-edit"></i>修改密码</span><em class="floatr">0<i class="icon-chevron-right"></i></em></a></p>
</dd>
</dl>
Xiugaimima.html
<div class="body">
<h3 class="fn-tit"><a href="javascript:history.go(-1);" class="nback">返回</a><b class="tit">修改密码</b></h3>
<div class="jf-body">
<div class="edit">
<form action="XgMima" method="post">
<p>当前密码:</p>
<p><input type="password" class="etxt" name="pwd"></p>
<p>新密码:</p>
<p><input type="password" class="etxt" name="xmima"></p>
<p>确认新密码:</p>
<p><input type="password" class="etxt" name="qrmima"></p>
<p class="tips">密码长度至少6个字符,最多32个字符</p>
<p><input type="submit" class="ebtn orange-btn" value="确 定"></p>
</form>
</div>
</div>
Xgmm.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//String pwd=request.getParameter("pwd");
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String xmima=request.getParameter("xmima");
String qrmima=request.getParameter("qrmima");
HttpSession session=request.getSession();
String zh=(String) session.getAttribute("zh");
if(xmima.length()<6){
System.out.println("密码小于六位数,请重新输入!");
request.getRequestDispatcher("xiugaimima.html").forward(request, response);
}else if(xmima.equals(qrmima)==false){
System.out.println("两次密码输入不一致!");
request.getRequestDispatcher("xiugaimima.html").forward(request, response);
}else{
try{
BUsersDao dal=new BUsersDao();
boolean a=dal.upDate_1(xmima, zh);
if(a==true){
System.out.println("密码修改成功!");
request.getRequestDispatcher("Hyzx").forward(request, response);
}else{
System.out.println("密码修改失败!");
request.getRequestDispatcher("xiugaimima.html").forward(request, response);
}
}catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
Foodlist.jsp
<form class="clearfix" action="chaxun">
<input type="submit" class="sbtn icon-search">
<input type="text" name="keys" id="keys" class="stxt" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" value="寻找菜品、店面" >
<a href="Hyzx" title="我的订单" class="floatr"></a>
</form>
Chaxun.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
//response.getWriter().append("Servedat: ").append(request.getContextPath());
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String caipin=request.getParameter("keys");
if(("惠心上品斑鱼火锅").equals(caipin)){
request.getRequestDispatcher("foodcontent.jsp").forward(request, response);
}
else if(("惠心上品重庆火锅").equals(caipin)){
request.getRequestDispatcher("cqhg.jsp").forward(request, response);
}
else if(("东坡肉").equals(caipin)){
request.getRequestDispatcher("东坡肉.jsp").forward(request, response);
}
}
Foodlist.jsp
<div class="container">
<ul class="assort clearfix">
<li class="ast1 floatl ast-cur"><a href="#">全部<i class="icon-caret-down"></i></a></li>
<li class="ast2 floatl"><a href="特色菜.jsp">特色菜<i class="icon-caret-down"></i></a></li>
<li class="ast3 floatl"><a href="店长推荐.jsp">店长推荐<i class="icon-caret-down"></i></a></li>
<li class="ast4 floatl"><a href="精品上市.jsp">精品上市<i class="icon-caret-down"></i></a></li>
</ul>
<!--assort-->
<ul class="foodlist">
<li>
<h3 class="tit"><a href="foodcontent.jsp">惠心上品斑鱼火锅</a></h3>
<div class="foodintro clearfix"> <a href="foodcontent.jsp" class="foodimg floatl"><img src="images/cpimg.jpg" alt="菜品图片"></a>
<div class="foodcon floatl">
<p>单价:<b>¥38</b></p>
<p class="fts orange">VIP:¥0.1</p>
<p>制作时间:<b>10分钟</b></p>
<p>可获积分:<b>380分</b></p>
<p>特点:<b>鲜嫩可口</b></p>
<p><b>回味无穷~</b></p>
<p class="btn fts clearfix"><a href="foodcontent.jsp" class="floatl orange-btn">点菜</a><i class="icon-ok floatl dci"></i></p>
</div>
<!--foodcon-->
</div>
<!--foodintro-->
<form action="xdz">
<%
BUsersDao usersDao= new BUsersDao();
pinglun pl = new pinglun();
long dz=usersDao.getId(1);
int pls=usersDao.plzs(pl);
//System.out.println(dz);
%>
<p class="fcomment clearfix">
<span class="floatl" ><i class="icon-thumbs-up"></i><button type="submit" onclick="myFunction()" style=" backgournd:blue; width:15px; height:20px;border:none;">赞</button>
<em id="dz"><input type="text" id="lcc" name="name" value="<%=dz %>" style="width:20px; height:25px;border:none;color:red;"></em></span>
<span class="floatl"><a href="foodcontent.jsp"><i class="icon-comment"></i>评论<em><%=pls %></em></a></span>
<span class="floatl" style="border-right:0; border-right:none;color:red;"><a href="#"><i class="icon-share-alt"></i>转发</a></span>
</p>
</form>
<em class="lt ltred">特色<br>
推荐</em> </li>
<li>
<h3 class="tit"><a href="cqhg.jsp">惠心上品重庆火锅</a></h3>
<div class="foodintro clearfix"> <a href="cqhg.jsp" class="foodimg floatl"><img src="images/huoguo .jpg" alt="菜品图片"></a>
<div class="foodcon floatl">
<p>单价:<b>¥50</b></p>
<p class="fts orange">VIP:¥32</p>
<p>制作时间:<b>15分钟</b></p>
<p>可获积分:<b>400分</b></p>
<p>特点:<b>麻辣爽口</b></p>
<p><b>胃口大开~~</b></p>
<p class="btn fts clearfix"><a href="cqhg.jsp" class="floatl orange-btn">点菜</a><i class="dci icon-ok floatl"></i></p>
</div>
<!--foodcon-->
</div>
<!--foodintro-->
<form action="cqxdz">
<%
//pinglun pl = new pinglun();
long cqdz=usersDao.getId(2);
int cqpls=usersDao.cqplzs(pl);
//int pls=usersDao.plzs(pl);
//System.out.println(dz);
%>
<p class="fcomment clearfix"> <span class="floatl"><i class="icon-thumbs-up"></i><button type="submit" onclick="myFunction()" style=" backgournd:blue; width:15px; height:20px;border:none;">赞</button>
<em id="cq"><input type="text" id="yf" name="name" value="<%=cqdz %>" style="width:20px; height:25px;border:none;color:red;"></em></span>
<span class="floatl"><a href="cqhg.jsp"><i class="icon-comment-alt"></i>评论<em><%=cqpls %></em></a></span>
<span class="floatl" style="border-right:0; border-right:none;"><a href="#"><i class="icon-share-alt"></i>转发</a></span>
</p>
</form>
<em class="lt ltgreen">新品<br>
上市</em> </li>
</ul>
<p class="fenye clearfix"><a href="#" class="floatl clearfix"><i class="icon-caret-left floatl"></i><span class="floatl">上一页</span></a><a href="foodlist2.jsp" class="floatr clearfix"><i class="icon-caret-right floatr"></i><span class="floatr">下一页</span></a></p>
</div>
Cqhg.jsp
<%
HttpSession session_1=request.getSession();
session_1.setAttribute("jifen", 400);
session_1.setAttribute("danjia",50);
session_1.setAttribute("caipin", "惠心上品重庆火锅");
%>
<div class="body">
<div class="topsearch">
<form class="clearfix" action="chaxun">
<input type="submit" class="sbtn icon-search">
<input type="text" name="keys" id="keys" class="stxt" onfocus="if (value==defaultValue)value=''" onblur="if(!value)value=defaultValue" value="寻找菜品、店面" >
<a href="Hyzx" title="我的订单" class="floatr"></a>
</form>
</div><!--topsearch-->
<div class="container">
<ul class="assort clearfix">
<li class="ast1 floatl"><a href="foodlist.jsp">全部<i class="icon-caret-down"></i></a></li>
<li class="ast2 floatl"><a href="特色菜.jsp">特色菜<i class="icon-caret-down"></i></a></li>
<li class="ast3 floatl"><a href="店长推荐.jsp">店长推荐<i class="icon-caret-down"></i></a></li>
<li class="ast4 floatl ast-cur"><a href="精品上市.jsp">精品上市<i class="icon-caret-down"></i></a></li>
</ul><!--assort-->
<div class="food-content">
<h3 class="fn-tit"><a href="javascript:history.go(-1);" class="nback">返回</a><b class="tit">惠心上品重庆火锅</b></h3>
<div class="fn-img"><img src="images/huoguo .jpg" alt="菜品图片"></div>
<div class="fn-intro">
<p>单价:<b>¥50</b><span class="fts orange">VIP:¥32</span></p>
<p>制作时间:<b>15分钟</b><span>可获积分:<b>400分</b></span></p>
<p>特点:<b>麻辣爽口,胃口大开~</b></p>
<p class="btn fts clearfix"><a href="order_1" class="floatl">点菜</a><i class="icon-ok floatl dci"></i></p>
</div><!--fn-intro-->
<h2 class="comment-tit clearfix"><b class="floatl">客户评价</b><a href="#cform" class="floatr"><i class="icon-comment"></i>我要评价</a></h2>
<% BUsersDao usersDao= new BUsersDao();
ArrayList<pinglun> list = usersDao.cqfindAll();%>
<%
for(int i=0; i < list.size(); i++){
out.println("<p><i class='icon-comment-alt'></i>"+" "+list.get(i).getNicheng()+" "+list.get(i).getSj()+" "+"</p>"+"<p id='font'>"+list.get(i).getPl()+"</p>"+"</br>"); %>
<% }
%>
Pdyh.java
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
String zh=request.getParameter("zh");
String pwd =request.getParameter("password");
PrintWriter out = response.getWriter();
if(zh==null || zh.isEmpty()||pwd==null || pwd.isEmpty()) {
//System.out.print("账户或密码不能为空!");
request.setAttribute("cw", "账户或密码不能为空!");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
try {
BUsersDao dal=new BUsersDao();
bUsers currentUser = dal.getOne(zh, pwd);
if(currentUser==null){
//System.out.println("账户或密码不匹配!");
request.setAttribute("cuowu", "账户或密码不匹配!!!");
request.getRequestDispatcher("login.jsp").forward(request, response);
}else{
HttpSession session=request.getSession();
session.setAttribute("zh", zh);
//System.out.println(session.getAttribute("zh"));
request.setAttribute("cg", "登录成功!");
//out.write("<script>alert('登录成功!');</script>");
//request.getRequestDispatcher("index.html").forward(request, response);
request.getRequestDispatcher("index.jsp").forward(request, response);
//response.sendRedirect("index.jsp");
}
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
}
<script type="text/javascript">
var a="${cg}";
if(a !='')
alert(a);
</script>
这里只是讲了一个大概,如果有需要帮助的同学可以关注一下学长哦~