第一步：
/* * 用户注册的界面。 * 用户点击注册按钮，会跳转到注册界面，用户填写完注册信息则会跳转到此Servlet。 * 在此Servlet中我们首先需要设置编码格式。 * 第二步是获取请求参数，就是用户在注册界面填写的信息。 * 第三步则是需要验证用户名是否已经被注册，如果已经被注册则提示用户名被占用。 * 如果没有被注册则将用户的信息添加到数据库表中。 * 最后请求转发到注册界面。 * * 该Servlet需要配合注册的JSP页面进行使用。 * */
第二步：
/* * 登录界面的实现。 * 用户点击登录跳转到登录的JSP界面， * 点击提交则跳转到此Servlet中进行账号密码是否正确的判断。 * * 首先需要设置浏览器的编码格式，因为是POST的提交方式，可能在过程中会出现中文乱码的现象。 * 然后是获取请求参数，分别是账号和密码。 * 第三步是调用DAO层对账号密码所在的数据库表进行查询，校验账号密码是否正确， * 使用if语句进行判断，如果账号密码为空，则提示账号密码错误。 * 因为如果账号密码都为空，则是意味着在数据库中匹配不到。 * 否则，将登陆成功，并且请求转发到主界面。 * 在提交关键数据时需要使用session-会话对象 * * session 会话对象 共享数据：session共享/会话共享 特点： 同一次会话 共享数据可以获取 （会话：从共享数据开始 到 浏览器关闭/主动清除 。不受请求转发和重定向的影响 只要存到session中 浏览器不关闭 或者 不主动清除 都可以获取） 代码 ：HttpSession session = req.getSession();//获取session对象 ession.setAttribute("关键字",数据对象名); 该Servlet需要配合登录界面的JSP页面进行使用。 * */
第三步：
/* * 主界面。 * * 用户在地址栏输入网址，则跳转到此界面。 * 此界面调用DAO层的查询所有商品的SQL语句查询所有商品。 * 查询完所有商品之后，共享数据（关键字和对象名），该关键字在商品展示界面使用。 * 再使用请求转发到负责展示数据的JSP界面。 * * 此Servlet配合主界面的JSp文件。 * */
第四步：
/* * 商品信息的详细介绍界面。 * * 首先需要获取请求参数，也就是用户所点击的商品ID。 * 然后调用DAO层进行该条商品的查询。 * 第三步是共享数据。 * 其次是请求转发到负责展示商品详细信息的JSP界面。 * * 该Servlet需要配合展示商品详细信息的JSP界面进行使用。 * */
第五步：
/* * 搜索框搜索某条信息，根据条件返回相应的数据。 * * 第一步是设置浏览器返回的编码格式。 * 第二步是获取请求参数。 * 第三步是调用DAO层的SQL语句进行条件的查询。 * 第四步是共享数据。 * 第五步则是请求转发到负责展示数据的JSP页面。 * * 该Servlet需要配合主界面进行使用。 * */
- （1）用户注册：
Servlet：
@WebServlet("/register") public class RegisterServlet extends HttpServlet { /* * 用户注册的界面。 * 用户点击注册按钮，会跳转到注册界面，用户填写完注册信息则会跳转到此Servlet。 * 在此Servlet中我们首先需要设置编码格式。 * 第二步是获取请求参数，就是用户在注册界面填写的信息。 * 第三步则是需要验证用户名是否已经被注册，如果已经被注册则提示用户名被占用。 * 如果没有被注册则将用户的信息添加到数据库表中。 * 最后请求转发到注册界面。 * * 该Servlet需要配合注册的JSP页面进行使用。 * */ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //设置编码格式。 req.setCharacterEncoding("UTF-8"); //获取请求参数。 String telephone = req.getParameter("telephone"); String password = req.getParameter("password"); String email = req.getParameter("email"); String username = req.getParameter("username"); //验证用户名是否已经被注册，唯一校验性。 IUserDAO dao = new UserDAOImpl(); boolean username1 = dao.isUsername(username); if (username1){ //如果用户名已用，则提示用户名被占用。 req.setAttribute("name","很抱歉，用户名已存在"); }else{ //如果没有注册则将用户信息添加到数据库中 //String telephone, String password, String email, String username User user = new User(telephone,password,email,username); dao.insert(user); req.setAttribute("user","注册成功"); } //请求转发到注册界面。 req.getRequestDispatcher("/views/register.jsp").forward(req,resp); } }
头部的JSp：
<li><a href="/shop/views/register.jsp">注册</a></li>
注册界面：
<body> <div class="wrap"> <div class="guimeilogo"></div> <div class="register"> <div class="top"> <h1>新用户注册</h1> <a href="#">已有账号</a> </div> <div class="mid">
<--!
form表单提交到了上面的Servlet中。
--> <form action="/shop/register" method="post"> <input type="text" name="telephone" id="telephone" placeholder="手机号" required="required"/> <div class="sec"> <input type="text" name="code" id="code" placeholder="验证码" required="required" /> <a class="send" onclick="send()"> 发送验证码 </a> <script> function send(){ return false; } </script> </div> <input type="password" name="password" id="password" placeholder="密码" required="required" /> <input type="text" name="email" id="email" placeholder="邮箱" required="required" /> <input type="text" name="username" id="username" placeholder="亲，您的昵称" required="required" /> <input type="submit" id="submit" value="注册"/> ${name} </form> </div> </div> </div> </body>
所需接口和实现类的SQL语句：
/* * 用户注册---> 需要添加的SQL语句，将用户的信息添加到另一张数据库表单中 * 根据注册要求 分别为 * telephone（手机号） * password(密码) * email（邮箱） * username（用户名） */ boolean insert(User u); 实现类： @Override public boolean insert(User u) { String sql = "insert into user (telephone,password,email,username) values (?,?,?,?)"; return DBUtil.excuteUpdate(sql,u.getTelephone(),u.getPassword(),u.getEmail(),u.getUsername()); }
流程：
点击注册-转到注册JSP页面-填写信息,提交信息-Servlet处理。
- （2）用户登录：
所需的Servlet：
@WebServlet("/login") public class LoginServlet extends HttpServlet { /* * 登录界面的实现。 * 用户点击登录跳转到登录的JSP界面， * 点击提交则跳转到此Servlet中进行账号密码是否正确的判断。 * * 首先需要设置浏览器的编码格式，因为是POST的提交方式，可能在过程中会出现中文乱码的现象。 * 然后是获取请求参数，分别是账号和密码。 * 第三步是调用DAO层对账号密码所在的数据库表进行查询，校验账号密码是否正确， * 使用if语句进行判断，如果账号密码为空，则提示账号密码错误。 * 因为如果账号密码都为空，则是意味着在数据库中匹配不到。 * 否则，将登陆成功，并且请求转发到主界面。 * 在提交关键数据时需要使用session-会话对象 * * session 会话对象 共享数据：session共享/会话共享 特点： 同一次会话 共享数据可以获取 （会话：从共享数据开始 到 浏览器关闭/主动清除 。不受请求转发和重定向的影响 只要存到session中 浏览器不关闭 或者 不主动清除 都可以获取） 代码 ：HttpSession session = req.getSession();//获取session对象 ession.setAttribute("关键字",数据对象名); 该Servlet需要配合登录界面的JSP页面进行使用。 * */ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置编码格式。 req.setCharacterEncoding("UTF-8"); // 获取请求参数。 String username = req.getParameter("username"); String password = req.getParameter("password"); // 调用DAO层。进行查询。 IUserDAO dao = new UserDAOImpl(); Map<String, Object> islogin = dao.islogin(username, password); // 如果账号密码为空，则提示账号密码错误。 // 因为如果账号密码为空则是意味着在数据库中匹配不到。 if (islogin == null){ req.setAttribute("C","对不起，您的账号或密码错误"); req.getRequestDispatcher("/views/login.jsp").forward(req,resp); // 否则 将成功登录。（使用Session） // 并且请求转发到主界面。 }else { HttpSession session = req.getSession(); session.setAttribute("W",islogin); resp.sendRedirect("/shop/home"); } } }
头部的JSP：
<li><a href="/shop/views/login.jsp">登录</a></li> （shop为工程名，views为目录名，login.jsp为负责展示登录信息的界面）
登录界面：
<body> <div class="wrap"> <div class="guimeilogo"></div> <div class="login"> <div class="top"> <h1>贵美商城</h1> <a href="">新用户注册</a> </div> <div class="mid"> <form action="/shop/login" method="post"> <input type="text" name="username" id="username" placeholder="手机号" required="required" /> <input type="password" name="password" id="password" placeholder="密码" required="required" /> <input type="submit" id="submit" value="立即登录"/> ${C} </form> </div> </div> </div> </body>
所需接口和实现类的SQL语句：
/* * 用户登陆 * * 查询数据库数据，账户密码符合则跳转，否则则提示账户或密码错误。 */ Map<String,Object> islogin(String username,String password); 实现类： @Override public Map<String, Object> islogin(String username, String password) { String sql = "select * from 用户表的表名 where 账户名 = ? and 密码名 = ?"; List<Map<String, Object>> list = DBUtil.excuteQuery(sql, username, password); if (list.size()>0){ return list.get(0); } return null; }
流程：
点击登录-跳转到登录界面-填写信息,提交信息-Servlet进行处理，返回最终结果。
- （3）主界面
所需的Servlet：
// 映射路径。（相当于Web.xml里的配置路径） @WebServlet("/home") public class HomeServlet extends HttpServlet { /* * 主界面。 * * 用户在地址栏输入网址，则跳转到此界面。 * 此界面调用DAO层的查询所有商品的SQL语句查询所有商品。 * 查询完所有商品之后，共享数据（关键字和对象名），该关键字在商品展示界面使用。 * 再使用请求转发到负责展示数据的JSP界面。 * * 此Servlet配合主界面的JSp文件。 * */ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { //1 调用DAO层 IProductDAO dao = new ProductDAOImpl(); //1、1 查询所有数据 List<Map<String, Object>> list = dao.allProduct(); //2 共享数据 req.setAttribute("list",list); //3 请求转发到负责展示数据的JSP req.getRequestDispatcher("/views/index.jsp").forward(req,resp); } }
所需输入的url：
http://localhost:8080/shop/home
主界面的JSP：
<!--商品展示--> <h2>贵美优选</h2> <%--如果需要添加搜索功能的话，就需要用到JSP的if语句 组成分为： <c:choose> <c:when test="${empty als}"></c:when> ${empty 数据关键字}（意为如果这组数据为空就执行when里的代码） ============================ 如果数据不为空则执行 <c:otherwise></c:otherwise> 的数据 </c:choose> --%> <%--开启循环--%> <c:choose> <%--如果als里数据为空则执行when里的代码段（搜索框）--%> <%--意思就是如果没有使用搜索框则展示when里的数据--%> <c:when test="${empty als}"> <div id="wrap" style="margin: 0px auto"> <%-- 使用forEach循环数据库文件。 需要获取图片、价格、收藏数、简介的详细信息。 使用${关键字，数据库数据名称} --%> <c:forEach var="list" items="${list}"> <!-- 商品信息 --> <div class="products"> <!--商品图片--> <%--商品图片绑定数据库表的ID--%> <a href="/shop/product?pid=${list.pid}" class="pimg" style="background-image: url(${list.pimage});"></a> <div class="info"> <div class="part"> <!--商品价格--> <div class="price">￥${list.shopPrice}</div> <div class="collect"> <!--商品收藏--> <i class="icon-star"></i>${list.collect} </div> </div> <i class="icon-select"> <!--商品简介--> </i>${list.pdesc} </div> </div> </c:forEach> </div> </c:when>
所需接口和实现类的SQL语句：
/* * 查询所有数据使用list * 因为是查询所有 * 不需要返回参数 */ List<Map<String,Object>> allProduct(); 实现类： /* * 使用查询的sql语句，直接返回 */ String sql = "select * from 商品的表名"; return DBUtil.excuteQuery(sql);
流程：
用户输入URl-进入Servlet查询所有商品信息-主界面JSP负责展示。
- （4）商品信息的详细介绍
所需的Servlet：
@WebServlet("/product") public class ProductServlet extends HttpServlet { /* * 商品信息的详细介绍界面。 * * 首先需要获取请求参数，也就是用户所点击的商品ID。 * 然后调用DAO层进行该条商品的查询。 * 第三步是共享数据。 * 其次是请求转发到负责展示商品详细信息的JSP界面。 * * 该Servlet需要配合展示商品详细信息的JSP界面进行使用。 * */ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 获取请求参数（pid） String pid = req.getParameter("pid"); // 调用DAO层。 IProductDAO dao = new ProductDAOImpl(); Map<String, Object> map = dao.allProductByID(Integer.parseInt(pid)); // 共享数据。 req.setAttribute("map",map); // 请求转发到负责展示商品详细信息的主要界面。 req.getRequestDispatcher("/views/product.jsp").forward(req,resp); } }
展示商品详细信息的JSP页面：
<body> <!-- 头部导航 --> <jsp:include page="/views/header.jsp"></jsp:include> <c:choose> <%--empty map 判断的是共享数据是否为空 而不是映射路径
如果为空则显示商品不存在 --%> <c:when test="${empty map}"> <h1>对不起，暂无该商品信息</h1> </c:when> <c:otherwise> <div class="wrap"> <img src="${map.pimage}" /> <div class="description"> <form action="/shop/Addcart.do" method="post"> ${l} <h2>${map.pdesc}</h2> <div class="old_price"> 原价： <span> ￥${map.marketPrice} </span> </div> <div class="price"> 折扣价： <span> ￥${map.shopPrice} </span> </div> <div> 尺码：均码 </div> <div class="count"> 数量： <span class="s">－</span> <input type="text" value="1" name="num" class="num" /> <span class="s">＋</span> </div> <input type="hidden" name="pid" value="${map.pid}" /> <div> <input type="submit" value="加入购物车" class="goods_cart" /> </div> <div> <input type="submit" value="立即购买" class="buy"/> </div> </form> </div> </div> </c:otherwise> </c:choose> </body>
所需接口和实现类的SQL语句：
/* * 根据用户点击的商品的ID查询该商品的所有数据 * 查询单条使用MAP集合，需要返回ID */ Map<String,Object> allProductByID(int pid); 实现类： /* * 根据用户点击的商品的ID查询该商品的所有数据 * 查询单条使用MAP集合，需要返回ID * */ @Override public Map<String, Object> allProductByID(int pid) { String sql = "select * from product where pid = ?"; List<Map<String, Object>> list = DBUtil.excuteQuery(sql, pid); if (list.size()>0){ return list.get(0); } return null; }
流程：
首先在主界面的商品图片绑定数据库表的ID-点击图片就会获得iD-进入Servlet-查询该条ID的所有信息-JSp页面负责展示。
- （5）搜索框
所需的Servlet：
@WebServlet("/search") public class SearchServlet extends HttpServlet { /* * 搜索框搜索某条信息，根据条件返回相应的数据。 * * 第一步是设置浏览器返回的编码格式。 * 第二步是获取请求参数。 * 第三步是调用DAO层的SQL语句进行条件的查询。 * 第四步是共享数据。 * 第五步则是请求转发到负责展示数据的JSP页面。 * * 该Servlet需要配合主界面进行使用。 * */ @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // 设置浏览器数据返回的编码格式。 req.setCharacterEncoding("UTF-8"); // 获取请求参数 String search = req.getParameter("wname"); // 调用DAO层的SQL语句进行条件查询 IProductDAO dao = new ProductDAOImpl(); List<Map<String, Object>> allsearch = dao.getAllsearch("%"+search+"%"); // 共享数据。 req.setAttribute("als",allsearch); // 请求转发（将要展示的数据转发到负责展示的JSP界面） req.getRequestDispatcher("/views/index.jsp").forward(req,resp); } }
所需要的JSP页面：
<c:forEach var="als" items="${als}"> <!-- 商品信息 --> <div class="products"> <!--商品图片--> <%--商品图片绑定数据库表的ID--%> <a href="/shop/product?pid=${als.pid}" class="pimg" style="background-image: url(${als.pimage});"></a> <div class="info"> <div class="part"> <!--商品价格--> <div class="price">￥${als.shopPrice}</div> <div class="collect"> <!--商品收藏--> <i class="icon-star"></i>${als.collect} </div> </div> <i class="icon-select"> <!--商品简介--> </i>${als.pdesc} </div> </div> </c:forEach> </div> </c:otherwise> </c:choose>
所需接口和实现类的SQL语句：
/* * 根据用户输入的信息 * 使用条件查找的SQL语句。 * 因为不知道用户输入的是什么，会返回多少查询结果 * 所以使用List集合。 */ List<Map<String,Object>> getAllsearch(String search); 实现类： /* * 搜索框的查询语句，使用条件查询。 * */ @Override public List<Map<String, Object>> getAllsearch(String search) { String sql = "select * from product where pname like ?"; return DBUtil.excuteQuery(sql,search); }
流程：
用户点击搜索栏输入内容-进入Servlet调用DAO层查询数据库与之相符合的内容-返回给JSP页面进行展示。