码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2019-04-23 20:51:38      阅读:184      评论:0      收藏:0      [点我收藏+]

标签:运动鞋   现象   地址   serve   请求转发   utf-8   lang   doctype   浏览器   


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

注册界面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册 - 贵美·商城</title>
        <base href="<%=basePath%>">
         <link rel="icon" href="img/icon.png" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/register.css"/>
    </head>
    <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> </html>

所需接口和实现类的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为负责展示登录信息的界面)

登录界面:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE HTML >
<html>
  <head>
    <base href="<%=basePath%>">
    
        <title>登录 - 贵美·商城</title>
        <link rel="stylesheet" type="text/css" href="css/login.css"/>
    </head>
    <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>
</html>

所需接口和实现类的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:

package com.wuchuang.servlet;

import com.wuchuang.dao.IProductDAO;
import com.wuchuang.dao.impl.ProductDAOImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.List;
import java.util.Map;

// 映射路径。(相当于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:

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"+"views/";
%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>

<!DOCTYPE HTML>
<html>
  <head>
        <base href="<%=basePath%>">
         <link rel="icon" href="img/icon.png" type="image/x-icon">
        <link rel="stylesheet" type="text/css" href="css/base-aa24246264.css"/>
        <link rel="stylesheet" type="text/css" href="css/welcome-fc9359d842.css"/>
        <link rel="stylesheet" type="text/css" href="css/sidebar.css"/>
        <link rel="stylesheet" type="text/css" href="css/content.css"/>
        <title>贵美·商城</title>

  </head>
  
  <body>
        <!-- 头部导航 -->
        <jsp:include page="/views/header.jsp"></jsp:include>
       
        <!--搜索框-->
        <div class="logo"></div>
        <div id="com-search">
             <div class="search">    
            
            <div class="search-tab">                
                <span class="active">宝贝</span><span class="">店铺</span>            </div>        
                <div class="search-box">
                    <form action="/shop/search" method="post">
                        <input class="search-txt" placeholder="" type="text" name="wname">
                        <span class="search-btn"></span>            
                        <div class="suggest-box" style="display: none;"></div>
                    </form>
                </div>            
                <div class="hotword">
                    <a target="_blank" href="#" style="color:#FF3366">连衣裙</a>
                    <a target="_blank" href="#" style="color:#666666">运动鞋</a>
                    <a target="_blank" href="#" style="color:#FF3366">雪纺衫</a>
                    <a target="_blank" href="#" style="color:#FF3366">衬衫</a>
                    <a target="_blank" href="#" style="color:#666666">薄外套</a>
                    <a target="_blank" href="#" style="color:#666666">T恤</a>
                    <a target="_blank" href="#" style="color:#666666">套装</a>
                    <a target="_blank" href="#" style="color:#666666">牛仔裤</a>
                    <a target="_blank" href="#" style="color:#FF3366">小白鞋</a>
                    <a target="_blank" href="#" style="color:#666666">风衣</a>
                    <a target="_blank" href="#" style="color:#FF3366">绑带凉鞋</a>
                    <a target="_blank" href="#" style="color:#666666">粗跟单鞋</a>
                </div>        
        </div>
        </div>
        
        <!--导航 -->
        <div id="nav">
            <ul>
                <li>
                    <a href="#" class="selected">首页</a>
                </li>
                <li>
                    <a href="#">上衣</a>
                </li>
                <li>
                    <a href="#">裙子</a>
                </li>
                <li>
                    <a href="#">裤子</a>
                </li>
                <li>
                    <a href="#">女鞋</a>
                </li>
                <li>
                    <a href="#">包包</a>
                </li>
                <li>
                    <a href="#">配饰</a>
                </li>
                <li>
                    <a href="#">美妆</a>
                </li>
            </ul>
        </div>
        <hr />
        
        <!--广告轮播图-->
        <div class="ad">
            <div class="inner">
                <img src="img/ad1.jpg"/>
                <img src="img/ad2.jpg"/>
                <img src="img/ad1.jpg"/>
            </div>
        </div>
        
        <!--商品展示-->
        <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>

            <%--否则(如果不为空)则执行otherwise里的代码段--%>
            <c:otherwise>
                <div id="wrap" style="margin: 0px auto">
                    <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>
        
        <!-- 底部导航 -->
        <jsp:include page="/views/footer.jsp"></jsp:include>
        
        
    </body>
  </body>
</html>

所需接口和实现类的SQL语句:

 /*
    *  查询所有数据使用list
    *  因为是查询所有
    *  不需要返回参数
    */
    List<Map<String,Object>> allProduct();


实现类:
/*
        * 使用查询的sql语句,直接返回
        */
        String sql = "select * from 商品的表名";
        return DBUtil.excuteQuery(sql);

流程:

    用户输入URl-进入Servlet查询所有商品信息-主界面JSP负责展示。


 

 

 


 

  • (4)商品信息的详细介绍

 

所需的Servlet:

package com.wuchuang.servlet;

import com.wuchuang.dao.IProductDAO;
import com.wuchuang.dao.impl.ProductDAOImpl;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Map;

@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);
    }
}

 

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

标签:运动鞋   现象   地址   serve   请求转发   utf-8   lang   doctype   浏览器   

原文地址:https://www.cnblogs.com/lxr521/p/10758726.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!