小项目-购物网站个别功能的具体实现思路-上(新手)

小项目-购物网站个别功能的具体实现思路-上(新手)


第一步:
/*
*  用户注册的界面。
*  用户点击注册按钮,会跳转到注册界面,用户填写完注册信息则会跳转到此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页面进行展示。


 

posted @ 2019-04-23 20:23 浪子。 阅读( ...) 评论( ...) 编辑 收藏
表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
相关推荐
©️2020 CSDN 皮肤主题: 创作都市 设计师:CSDN官方博客 返回首页