第一阶段冲刺1（超级食堂的web版本）
2022/6/14 23:20:32
本文主要是介绍第一阶段冲刺1（超级食堂的web版本），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
当时也就一个星期我做了注册登录页面和我们web的主界面，给大家展示一下
Login.jsp
<%@page import="java.util.*"%>
<%@page import="bean.*"%>
<%@page import="dao.*"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@page import="java.util.Date"%>
<%@page import="java.text.SimpleDateFormat"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<!-- Mirrored from www.zi-han.net/theme/hplus/login_v2.html by HTTrack Website Copier/3.x [XR&CO'2014], Wed, 20 Jan 2016 14:19:49 GMT -->
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<title>H+ 后台主题UI框架 - 登录</title>
<meta name="keywords" content="H+后台主题,后台bootstrap框架,会员中心主题,后台HTML,响应式后台">
<meta name="description" content="H+是一个完全响应式，基于Bootstrap3最新版本开发的扁平化主题，她采用了主流的左右两栏式布局，使用了Html5+CSS3等现代技术">
<link href="hplus/css/bootstrap.min.css" rel="stylesheet">
<link href="hplus/css/font-awesome.min93e3.css?v=4.4.0" rel="stylesheet">
<link href="hplus/css/animate.min.css" rel="stylesheet">
<link href="hplus/css/style.min.css" rel="stylesheet">
<link href="hplus/css/login.min.css" rel="stylesheet">
<!--[if lt IE 9]>
<meta http-equiv="refresh" content="0;ie.html" />
<![endif]-->
<script>
if(window.top!==window.self){window.top.location=window.location};
</script>
</head>
<body class="signin">
<div class="signinpanel">
<div class="row">
<div class="col-sm-7">
<div class="signin-info">
<div class="logopanel m-b">
<h1>[ H+ ]</h1>
</div>
<div class="m-b"></div>
<h4>欢迎使用 <strong>超级食堂</strong></h4>
<ul class="m-b">
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势一</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势二</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势三</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势四</li>
<li><i class="fa fa-arrow-circle-o-right m-r-xs"></i> 优势五</li>
</ul>
<strong>还没有账号？ <a href="zhuce.jsp">立即注册»</a></strong>
</div>
</div>
<div class="col-sm-5">
<form action="/shiwu/r2?method=denglu" method="post">
<h4 class="no-margins">登录：</h4>
<p class="m-t-md">登录到超级食堂</p>
<input type="text" class="form-control uname" placeholder="用户名" name="username" required="required" />
<input type="password" class="form-control pword m-b" placeholder="密码" name="password" required="required" />
<a href="zhuce.jsp">忘记密码了？</a>
<button class="btn btn-success btn-block">登录</button>
</form>
</div>
</div>
<div class="signup-footer">
<div class="pull-left">
<%
SimpleDateFormat sim=new SimpleDateFormat("yyyy年MM月dd日 a hh点mm分ss秒");
String newTime = sim.format(new Date());
%>
© 当前时间：<%=newTime %>
</div>
</div>
</div>
<script>
var w=<%= (String)request.getAttribute("message") %>
if(w!=null)
{
alert(q);
location.reload();
}
</script>
</body>
</html>
Zhuce.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
</head>
<body>
<form action="/shiwu/r2?method=zhuce" method="post" class="layui-form">
<div class="layui-container">
<br>
<h1 style=" text-color:"> 注 册</h1>
<br>
<br>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">账号框</label>
<div class="layui-input-block">
<input type="text" name="username" lay-verify="title" autocomplete="off" placeholder="请输入账号" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row">
<div class="layui-col-md6">
<div class="layui-form-item">
<label class="layui-form-label">密码框</label>
<div class="layui-input-block">
<input type="password" name="password" placeholder="请输入密码" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">手机</label>
<div class="layui-input-inline">
<input type="tel" name="number" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="text" name="email" lay-verify="required/email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"> 单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">年龄</label>
<div class="layui-input-inline">
<input type="text" name="age" lay-verify="required|phone" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<label class="layui-form-label">体重</label>
<div class="layui-input-inline">
<input type="text" name="weight" lay-verify="required/email" autocomplete="off" class="layui-input">
</div>
</div>
</div>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md2">
</div>
<div class="layui-col-md2">
<button type="submit" class="layui-btn layui-btn-radius layui-btn-normal" style="text-align:center;">提交</button>
</div>
<div class="layui-col-md3">
<button type="reset" class="layui-btn layui-btn-radius layui-btn-normal" style="text-align:center;">刷新</button>
</div>
</div>
</div>
</div>
</form>
<script>
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value){
if(value.length < 5){
return '标题至少得5个字符啊';
}
}
,pass: [
/^[\S]{6,12}$/
,'密码必须6到12位，且不能出现空格'
]
,content: function(value){
layedit.sync(editIndex);
}
});
//监听指定开关
form.on('switch(switchTest)', function(data){
layer.msg('开关checked：'+ (this.checked ? 'true' : 'false'), {
offset: '6px'
});
layer.tips('温馨提示：请注意开关状态的文字可以随意定义，而不仅仅是ON|OFF', data.othis)
});
});
var age=document.getelementById("age");
if(age>80||age<10)
{
alter("请输入正确年龄");
location.reload();
}
</script>
</body>
</html>
Daohang.jsp
<%@page import="com.mysql.cj.protocol.Message"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Insert title here</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<script src="layui/layui.js" charset="utf-8"></script>
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" media="all">
<script src="bootstrap/js/jquery-3.4.1.js" charset="utf-8"></script>
<script src="bootstrap/js/bootstrap.min.js" charset="utf-8"></script>
<style type="text/css">
body{
}
.center-in-center{
margin:0 auto;
padding:0;
display:block;
}
.ww{
margin:20px;
}
#w{
text-decoration:none;
color:black;
font-size:15px;
font-weight:bold;
}
hr{
height:2px;
background-color:#FFFF00;
}
.search-btn{
margin-top:25px;
float:left;
border:2px solid #ffc900;
width:90px;
height:50px;
background-color:#ffc900;
text-align:center;
line-height:50px;
}
.search-input{
margin-top:25px;
float:left;
border:2px solid #ffc900;
width:500px;
height:50px;
padding-left:5px;
}
.center{
margin-top:10px;
text-align:centern;
}
</style>
</head>
<body>
<script type="text/javascript">
if(<%= request.getAttribute("message")!=null %>){
layui.use('layer', function(){
var layer = layui.layer;
layer.msg('点赞成功');
});
//alert("点赞成功");
}
</script>
<div class="layui-carousel center-in-center" id="test1">
<div carousel-item >
<div > <img src="img/1.gif" style="width:100%;height:100%;"> </div>
<div><img src="img/2.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/3.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/6.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/5.jpg" style="width:100%;height:100%;"></div>
<div><img src="img/7.jpg" style="width:100%;height:100%;" ></div>
</div>
</div>
<div class="container-fluid ww">
<div class="row">
<div class="col-md-3" >
<img alt="石家庄铁道大学" src="img/石家庄铁道大学校标.png" height="100px" class="img-circle">
</div>
<div class="col-md-5">
<form action="/shiwu/r2?method=sousuo" method="post">
<input class="search-input" type="text" placeholder="请输入食物名称" name="name">
<input type="submit" class="search-btn" value="查询">
</form>
</div>
<div class="col-md-4"></div>
</div>
</div>
<div class="container">
<div class="row center ">
<div class="col-sm-3 col-md-3 col-xs-3 center">
<a href="/shiwu/r2?method=xiaochi"><img alt="小吃" src="img/小吃图标.png" id="lb66" width="100px" height="100px"></a>
<!-- <input name="小吃" value="小吃" type="hidden">-->
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb2" >
<a href="/shiwu/r2?method=mifan"><img alt="米饭" src="img/米饭图标.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb3" >
<a href="/shiwu/r2?method=miandian"><img alt="面点" src="img/面点图标.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-43 col-xs-3 center" id="lb4" >
<a href="/shiwu/r2?method=mianshi"><img alt="面食" src="img/面食图标.png" width="100px" height="100px"></a>
</div>
</div>
<div class="row ">
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb1" >
小吃
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb2" >
米饭
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb3" >
面点
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb4" >
面食
</div>
</div>
<div class="row ">
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb5">
<a href="/shiwu/r2?method=mianshipeicai"><img alt="面食配菜" src="img/面食配菜配菜.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb6" >
<a href="/shiwu/r2?method=zhongshijiancan"><img alt="中式简餐" src="img/中式简餐.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb7" >
<a href="/shiwu/r2?method=yinpin"><img alt="饮品" src="img/饮品.png" width="100px" height="100px"></a>
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb8" >
<a href="/shiwu/r2?method=tang"><img alt="汤" src="img/汤.png" width="100px" height="100px"></a>
</div>
</div>
<div class="row ">
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb5" >
面食配菜
</div>
<div class="col-sm-3 col-md-3 col-xs-3 center" id="lb6" >
中式简餐
</div><div class="col-sm-3 col-md-3 col-xs-3 center" id="lb7" >
饮品
</div><div class="col-sm-3 col-md-3 col-xs-3 center" id="lb8" >
汤
</div>
</div>
</div>
<div class="ww">
<div class="container">
<div >
<img alt="" src="img/图标.png" >
<a href="" id="w">学一特色美食</a>
<hr noshade="noshade">
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/天下好面.jpg" alt="天下好面" >
<div class="caption">
<h3>天下好面</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="天下好面" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"> </p>
</form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/正新鸡排.jpg" alt="正新鸡排" >
<div class="caption">
<h3>正新鸡排</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="正新鸡排" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/黄焖鸡米饭.jpg" alt="黄焖鸡米饭">
<div class="caption">
<h3>黄焖鸡米饭</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="黄焖鸡" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/铁板厨房.jpg" alt="铁板厨房" >
<div class="caption">
<h3>铁板厨房</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="铁板厨房" name="name">
<p><input type="submit" value="点赞"class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/闲闷湖茶饮.jpg" alt="闲闷湖茶饮" >
<div class="caption">
<h3>闲闷湖茶饮-研究所</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="天下好面" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/淮南牛肉汤.jpg" alt="淮南牛肉汤">
<div class="caption">
<h3>淮南牛肉汤</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="淮南牛肉饭" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div >
<img alt="" src="img/图标.png" >
<a href="" id="w">学二特色美食</a>
<hr noshade="noshade">
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/猪脚饭.jpg" alt="猪脚饭" >
<div class="caption">
<h3>猪脚饭</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="特色猪脚饭" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"> </p>
</form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/烤鱼饭.jpg" alt="烤鱼饭" >
<div class="caption">
<h3>无骨烤鱼饭</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="无骨烤鱼饭" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/熏肉大饼.jpg" alt="熏肉大饼">
<div class="caption">
<h3>熏肉大饼</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="水饺馄饨" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/特色水饺.jpg" alt="特色水饺" >
<div class="caption">
<h3>特色水饺</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="手工水饺" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/麻辣烫.jpg" alt="麻辣烫" >
<div class="caption">
<h3>骨汤麻辣烫</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="骨汤麻辣烫" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/炸鸡汉堡.jpg" alt="炸鸡汉堡">
<div class="caption">
<h3>美味炸鸡汉堡</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="美味炸鸡汉堡" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div >
<img alt="" src="img/图标.png" >
<a href="" id="w">综餐特色美食</a>
<hr noshade="noshade">
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/螺霸王螺蛳粉.jpg" alt="螺王王螺蛳粉" >
<div class="caption">
<h3>螺王王螺蛳粉</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="螺王王螺蛳粉" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"> </p>
</form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/自选餐.jpg" alt="自选餐" >
<div class="caption">
<h3>自选餐</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="自选餐" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/麦田密语烘焙房.jpg" alt="麦田密语烘焙房">
<div class="caption">
<h3>麦田密语烘焙房</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="麦田密语.烘焙" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/汇巢鲜茶.jpg" alt="汇巢鲜茶" >
<div class="caption">
<h3>汇巢鲜茶</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="汇巢鲜茶" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/鸭血粉丝汤.jpg" alt="鸭血粉丝汤" >
<div class="caption">
<h3>鸭血粉丝汤</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="鸭血粉丝" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
<div class="col-sm-5 col-md-4">
<div class="thumbnail">
<img src="img/拉面.jpg" alt="拉面">
<div class="caption">
<h3>拉面</h3>
<p></p>
<form action="/shiwu/r2?method=dianzan" method="post">
<input type="hidden" value="米饭套餐.拉面" name="name">
<p><input type="submit" value="点赞" class="btn btn-primary glyphicon glyphicon-thumbs-up" role="button"></p></form>
</div>
</div>
</div>
</div>
</div>
</div>
<hr style=" height:1px; ">
<div style=" text-align:center;">
石家庄铁道大学 铁道游击队制作 如有疑惑 请+Q：3011766738 <br>
<br><br>
</div>
<script>
layui.use('carousel', function(){
var carousel = layui.carousel;
//建造实例
carousel.render({
elem: '#test1'
,width: '100%' //设置容器宽度
,arrow: 'hover' //始终显示箭头
,anim: 'fade'
,indicator: 'none'
,height: '500px'
//,anim: 'updown' //切换动画方式
});
});
</script>
</body>
</html>
挺多的就不给大家进行一一的展示了
这篇关于第一阶段冲刺1（超级食堂的web版本）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-12-29设计Element UI表单组件居然如此简单！
- 2024-12-28一步到位：购买适合 SEO 的域名全攻略
- 2024-12-27OpenFeign服务间调用学习入门
- 2024-12-27OpenFeign服务间调用学习入门
- 2024-12-27OpenFeign学习入门：轻松掌握微服务通信
- 2024-12-27OpenFeign学习入门：轻松掌握微服务间的HTTP请求
- 2024-12-27JDK17新特性学习入门：简洁教程带你轻松上手
- 2024-12-27JMeter传递token学习入门教程
- 2024-12-27JMeter压测学习入门指南
- 2024-12-27JWT单点登录学习入门指南
