分享一個易買網項目的實例教程

                             

0.開發流程：

1.項目約定：

   6群組：

小組專案名稱：EasyBuy_flc或(EasyBuy_01)

小組資料庫名稱：EasyBuy_flc

版本控制工具：svn，不再使用

將來可以將自己小組的專案上傳到git上

 

開發流程控制：     

組長：所有的html

頁改為

jsp#html

##      A

組員：設計資料庫，書寫資料表中文欄位名稱

      B組員：設計實體類別

專案開發步驟

1.

資料庫設計

 

  easybuy_user（使用者表）   1

  EU_USER_ID varchar    ##  EU_USER_NAME varchar     

真實姓名

  EU_PASSWORD varchar                 性別（

T，F）

  EU_BIRTHDAY date            EU_EMAIL varchar         

電子郵件

====================== ======================================

   easybuy_product_category (商品分類表)  

#2

 EPC_ID        

EPC_ID       

 EPC_NAME              

#N對

 

EPC_PARENT_#N

 EPC_PARENT_f=c_

# 

================================easybuy_product

（商品表）

 表格3

   EP_ID            商品編號

###   EP_NAME #  #####

   EP_PRICE         商品價格

   EP_STOCK        #目前商品所屬分類的父分類編號

#   EPC_CHILD_ID     

#目前商品所屬分類

   EP_FILE_NAME     

商品圖片名稱#====== ====================================================

 

easybuy_order

（訂單表） 表

4

##T 

##EO_ID          

EO_ID          ## ##'訂單編號

 

EO_USER_ID       命令所屬使用者

 

EO_USER_NAME   ## 

##EO_USER_NAME   

## 

##EO_USER_NAME  

 

EO_USER_ADDRESS  

訂單外送地址

 

##EO_CREATE_TIME   

# 

EO_COST          

本單金額

 

#EO_STATUS      

EO_TYPE          

#訂單類型

（本項目未啟用）

=================== ====================================

 

easybuy_order_detail 

（訂單詳情表）

表格5 

   EOD_ID          

訂購詳情編號

#白

#白

#白白編號

#'c感染

##EO_ID           

#訂單編號

 

EP_ID          #商品數量

 EOD_COST        

單商品金額

================= ===============================================

 easybuy_news （新聞表）   

#6

## 

   EN_ID      ##   EN_ID      

##   EN_ID     

 

   EN_TITLE        已參考標題

## 

   EN_CONTENT      "新聞內容

 

   EN_CREATE_TIME   ====

==== ============================================

 

easybuy_comment （評論表）  表7

 

EC_ID            

註解編號       

註解編號

 

o_o_f##o_o_CON 評論內容

 

EC_CREATE_TIME   #註解建立時間

 

EC_REPLY       

#EC_REPLY      

# 

EC_REPLY_TIME     評論回覆時間

 

EC_NICK_NAME      

EC_NICK_NAME      

人EC_NICK_NAME   ================================================= ===============

 

2.#專案架構的建構

 

2.1從實體層開始 

Entity層程式碼如下:

# User使用者類別：

Product_category產品類別：

#Product商品資訊表：

Order訂單表：

Order_detail訂單詳情表：

News資訊表：

User_address位址類別：

Count類別：

開始著手項目：1：

我的登入：

功能是：效驗，驗證碼，登入成功跳到頁面。

開始分層：

工具BaseDao:

package cn.com.dao;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedStatement;import java.sql.ResultSet;import javax.naming.Context;import javax.naming.InitialContext;import javax.sql.DataSource;public class BaseDAO {public static final String driver = "com.mysql.jdbc.Driver";public static final String url = "jdbc:mysql://localhost:3306/easybuy?useUnicode=true&charaterEncoding=UTF-8";public static final String username = "root";public static final String pwd = "1234";public Connection con=null;public PreparedStatement ps=null;public ResultSet rs=null;    //获取连接getConnectionpublic Connection getConnection() throws Exception {//加载驱动        Class.forName(driver);if (con == null || con.isClosed()) {
            con = DriverManager.getConnection(url, username, pwd);
        }return con;
    }//查询 executeQuerypublic ResultSet executeQuery(String sql, Object...objects) throws Exception {
        con = getConnection();
        ps = con.prepareStatement(sql);for (int i = 0; i <p></p>dao層：<div class="cnblogs_code"></div><pre class="brush:php;toolbar:false">   select(String name,String pwd)  Exception;

}

dao的實作層：

  UserDaoImpl  BaseDAO   select(String name,String pwd) ="select count(1) from easybuy_user where loginname=? and loginname=?"=(rs!==rs.getInt("id"

services層：

   select(String name,String pwd)

services實作層：

public class UserServiceImpl implements IUserService{

	UserDaoImpl dao=new UserDaoImpl();
@Override
	public int select(String name, String pwd) throws Exception {
		
		return dao.select(name, pwd);
	}
@Override
 public List<User> getAllList() throws Exception {
  
  return dao.getAllList();
 }
}

# 靜態頁面：

	登录 还没有商城账号，立即注册
用户名
密    码
验证码	看不清 <script>$("#msg").html("");</script><script>$("#msg").html("验证码不一致");</script>

MD5加密工具：

public class Md5Tool{           public String getMD5(String pwd){          //用于加密的字符   char md5String[] ={'0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'};          try{//使用平台的默认字符集将此String编码为bytex序列，并将结果存储到一个新的byte数组中   byte[] btInput=pwd.getBytes();               //信息摘要是安全的单向哈希函数，它接受任意大小的数据，并输出固定长度的哈希值。   MessageDigest mdInst=MessageDigest.getInstance("MD5");              //MessageDisgest对象通过使用update方法处理数据，使用指定的byte数组更新摘要               mdInst.update(btInput);             //摘要更新之后，通过调用disgest()执行哈希计算，获得密文   byte[] md = mdInst.digest();//把密文转换成十六进制的字符串形式   int j=md.length;               char str[] = new char[j*2];               int k=0;              for(int i=0;i<j>>>4&0xf];    //5   str[k++] = md5String[byte0&0xf];    //F           }                          //返回经过加密后的字符串return new String(str);
          }catch（Exception e）               return null;
}
}
}</j>

###

验证码问题：

1.为什么要在网站中加入验证码？

解析：为了防止机器恶意注册，1s内在我们的数据库中形成N条记录

2.验证码实现机制：

 解析：为了防止浏览器读取缓存中的验证码图片，首先在形成验证码的Servlet处理程序中设置浏览器不缓存，第二种手段就是给请求的Servlet加一个随机数，这样就保证每次都从服务器拿一张验证码图片。说白了验证码就是一个服务器端的后台类(Servlet)，以流的方式回送到客户端浏览器，用img标签承载。

3.雕虫小技

解析：验证的时候先进行验证码的校验，如果发现验证码不匹配， 就不用再验证用户名和密码，这样就省去了和数据库的一次交互。

验证码工具书写：

package cn.buy.util;import java.awt.Color;import java.awt.Font;import java.awt.Graphics;import java.awt.image.BufferedImage;import java.util.Random;public class AuthCode {public static final int AUTHCODE_LENGTH = 5;        //验证码长度  public static final int SINGLECODE_WIDTH = 15;  //单个验证码宽度  public static final int SINGLECODE_HEIGHT = 30; //单个验证码高度  public static final int SINGLECODE_GAP = 4;     //单个验证码之间间隔  public static final int IMG_WIDTH = AUTHCODE_LENGTH * (SINGLECODE_WIDTH + SINGLECODE_GAP);  public static final int IMG_HEIGHT = SINGLECODE_HEIGHT;  
      public static String getAuthCode() {  
        String authCode = "";  for(int i = 0; i 

验证码的servlet书写：

public class AuthCodeServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
        doPost(request, response);
    }public void doPost(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {

        String authCode = AuthCode.getAuthCode();  
        
        request.getSession().setAttribute("authCode", authCode); //将验证码保存到session中，便于以后验证  try {  //发送图片  ImageIO.write(AuthCode.getAuthImg(authCode), "JPEG", response.getOutputStream());  
        } catch (IOException e){  
            e.printStackTrace();  
        } 
    }

}

验证码的Ajax，，登录的效验，，鼠标悬停和离开：

前台页面显示js:

1.光标的显示和离开

2.验证码的显示

 

<script>$(function() {
        $("#myid").click(function() {
            $.ajax({
                url : "/EasyBuy/AuthCodeServlet",
                type : "get",
                success : function(dom) {
                    document.getElementById("authImg").src = "AuthCodeServlet";
                }
            });
        });    
    });
    $(function(){
    var erro=0;
        $(".l_user").focus(function() {
            $("#lid").html("请输入用户名");
                });
        $(".l_user").blur(function(){if($(this).val()==""){
                $("#lid").html("");
            }else if ($(this).val() != ""
                            && /^[a-zA-Z]{1}([a-zA-Z]|[0-9]){4,15}$/.test($(this).val())) {
                        $("#lid").html("");
            } else {
                $("#lid").html("请输入正确的用户名(首字母为英文,5-15位)");
            }
        });
        
        $(".l_pwd").focus(function(){
            $("#pid").html("请输入密码");
        });
        $(".l_pwd").blur(function(){if($(this).val()==""){
            erro=1;
                $("#pid").html("");
            }else if ($(this).val() != ""
                            && /^.{1,16}$/.test($(this).val())) {
                            erro=0;
                        $("#pid").html("");
            } else {
                $("#pid").html("密码格式不正确");
                erro=1;
            }
        });
    });
    
    
    function checks(myform) {if (myform.luser.value == "") {
            $("#lid").html("请输入用户名");return false;
        }else if (myform.lpwd.value =="") {
            $("#pid").html("请输入密码");return false;
        }return true;
    }
</script>

 

根据前台页面表单里action的跳转：servelet:

Md5Tool md5Tool=new Md5Tool();
IUserService service = new UserServiceImpl();if("login".equals(resquest.getParameter("title")){
    String name=request.getParameter("luser");
    String pwds=request.getParameter("lpwd");if(name==null&&pwds==null){
        response.sendRedirect("/EasyBuy/Login.jsp");
}else{
        name=new String(name.getBytes("iso-8859-1"),"utf-8");
        pwds=new String(pwds.getBytes("iso-8859-1"),"utf-8");
        String mm=(String)request.getSession().getAttribute("authCode");
        String yy=request.getParameter("yzm");  //获取验证码if(!yy.equest(mm)){
                    request.getSession().setAttribute("mm","flag");
                    response.sendRedirect("/EasyBuy/Login.jsp");
            }else{try{
                 request.getSession().setAttribute("user",service.getAllList(name));
                 pwds=md5Tool.getMD5(pwds);                 int num=service.select(name,pwds);                 if(num>0){
                        request.setAttribute("uname".service.getAllList(name).getUserName());
                        request.getRequestDispatcher("/Index.jsp").forward(request,response);
             }else{
                   response.sendRedirect("/EasyBuy/Login.jsp");
            }
          }catch(Exception e){
                   e.printStackTrace();
          }
                 }
 
      }

      }


}

 2.注册：

效果图：

输入正确后即可显示登陆

在dao层：

public interface IUserDao {//插入用户信息传递一个用户对象public int add(User users) throws Exception;

}

dao实现层：

public class UserDaoImpl extends BaseDAO implements IUserDao{

    @Overridepublic int add(User users) throws Exception {
        String sql="insert into easybuy_user values(null,?,?,?,?,?,?,?,0)";
        Object[]  obj={users.getLoginName(),users.getUserName(),users.getPassword(),users.getSex(),users.getIdentityCode(),users.getEmail(),users.getMobile()};int num = executeUpdate(sql, obj);return num;
    }
}

services层：

   add(User users) throws Exception;
}

services实现层：

public class UserServiceImpl implements IUserService{

    UserDaoImpl dao=new UserDaoImpl();
    @Overridepublic int add(User users) throws Exception {        return dao.add(users);
    }
}

在我的servlet层：

      Md5Tool md5Tool =  (.equals(request.getParameter(= = = <fileitem> items =<fileitem> iter == == (filename.equals(.println(fileItem.getString(  (filename.equals(.println(fileItem.getString(  (filename.equals(.println(fileItem.getString(  (filename.equals(= fileItem.getString( (sex.equals(  (sex.equals(  (filename.equals(  (filename.equals(  (filename.equals(  (filename.equals(== fileItem.getString( (!=  num = (num ></fileitem></fileitem>

 我的前台页面：

                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               

	注册                     已有商城账号，我要登录
* 登录用户名
* 密码
* 确认密码
* 真实姓名
* 性别	男  女
* 身份证号
* 邮箱
* 手机
* 验证码	看不清                                                                   <script> $("#msg").html("");</script>                                                                       <script> $("#msg").html("验证码不一致");</script>
	我已阅读并接受《用户协议》

            

jq的实现：

<script>  
    $(function(){
        $("#myid").click(function(){
            $.ajax({
                url:"/EasyBuy/AuthCodeServlet",
                type:"get",
                success:function(){
                    document.getElementById("authImg").src ="AuthCodeServlet";
                }
            });
        });
        
        $(".l_user").blur(function(){
            $.ajax({
                type:"get",
                url:"<%=path%>/LoginServlet?login="+$(".l_user").val(),
                success:function(dom){if(dom){
                        $("#uid").html("用户名已被注册，请重新命名");    
                    }
                        
                }
            });
        });
    
    });       
</script>

 3.我的新闻资讯：

页面显示：

点更多的时候：

在我的dao层：

public interface INewsDAO{     //查询资讯//资讯的分页 public List<news> newsList(int pageSize, int PageIndex) throws Exception;//咨询的数量，配合分页一起 public int newscount() throws Exception;//根据我的id查资讯 public List<news> newsList(String id) throws Exception;

}</news></news>

在我的dao层的查数据：

public class NewsDAOImpl extends BaseDAO implements INewsDAO{
    @Override     public List<news> newsList(String id) throws Exception{//新闻放到集合里List<news> list = new ArrayList<news>();//把sql语句放到结果集里ResultSet rs=executeQuery("select * from easybuy_news where id=? LIMIT 0,1",id);//调用我的工具类Tool<news> tool = new Tool<news>();//将我的rs对象转成集合了list.add(tool.list(rs,News.class).get(0));//查询我的分页数据，上一页，下一页。rs=executeQuery("select * from (select * from easybuy_news order by id desc) a where id order by id desc LIMIT 0,1",id);if(rs.next()){
                  rs=executeQuery("select * from (select * from easybuy_news order by id desc) a where id order by id desc LIMIT 0,1",id);
               list.add(tool.list(rs,News.class).get(0));
            }else{
               list.add(null);
            }
             rs=executeQuery("select * from easybuy_news where id>? LIMIT 0,1",id);if(rs.next()){
            rs=executeQuery("select * from easybuy_news where id>? LIMIT 0,1"，id);
            list.add(tool.list(rs,News.class).get(0));
}
            close();return list;
}

  
@Overridepublic List<news> newsList(int pageSize, int PageIndex) throws Exception{
         ResultSet rs=executeQuery(“select * from easybuy_news order by id desc LIMIT ?,?”,(PageIndex-1)*pageSize,pageSize);
         Tool<news> tool = new Tool<news>();
         List<news> list = tool.list(rs,News.class);
         close();return list;

}

@Overridepublic int newscount() throws Exception{       int count=0;
       ResultSet rs=executeQuery("select count(1) from easybuy_news");       if(rs.next()){
              count=rs.getInt(1);
}              return count;
}

}</news></news></news></news></news></news></news></news></news>

Tool工具类：

public class Tool<t> {
    @SuppressWarnings("unchecked")public  List<t> list(ResultSet rs,Class<t> cls) throws Exception{
        List<t> list=new ArrayList<t>();
        Field[] fields = cls.getDeclaredFields();if(rs!=null){while (rs.next()) {
                Object obj=cls.newInstance();for (Field field : fields) {
                    String name=field.getName();
                    Method method = cls.getDeclaredMethod("set"+name.substring(0,1).toUpperCase()+name.substring(1),field.getType());try {
                        
                        method.invoke(obj,rs.getObject(name));
                    } catch (Exception e) {continue;
                    }

                }
                list.add((T)obj);
            }
        }return list;
    }
}</t></t></t></t></t>

 

在我的services层：

public interface INewsService {//查询资讯public List<news> newsList(int pageSize, int PageIndex) throws Exception;public int newscount() throws Exception;public List<news> newsList(String id) throws Exception;
}</news></news>

services实现层：

public class NewsServiceImpl  implements INewsService{
    INewsDAO dao=new NewsDAOImpl();
    @Overridepublic List<news> newsList(int pageSize, int PageIndex) throws Exception {        return dao.newsList(pageSize,PageIndex);
    }
    @Overridepublic List<news> newsList(String id) throws Exception {return dao.newsList(id);
    }
    @Overridepublic int newscount() throws Exception {return dao.newscount();
    }

}</news></news>

我的servlet层：

public class NewsServlet extends HttpServlet {public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        INewsService Service=new NewsServiceImpl();
        String type=request.getParameter("type");
        String id=request.getParameter("id");
        String pageindex=request.getParameter("pageindex");
        Page<news> page=new Page<news>();try {if("top5news".equals(type)){
            request.setAttribute("News",Service.newsList(id));
            }else if("newstable".equals(type)||(pageindex!=null&&!"".equals(pageindex))){if(pageindex!=null&&!"".equals(pageindex)){
                    page.setPageIndex(Integer.parseInt(pageindex));
                }
            page.setPageCount(Service.newscount());
            page.setPageList(Service.newsList(page.getPageSize(), page.getPageIndex()));
            request.setAttribute("page",page);
            }
            request.getRequestDispatcher("MyJsp.jsp").forward(request, response);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}</news></news>

 在我的前台页面：

index.jsp

<div>
                <span><a>更多 </a></span>新闻资讯</div>
            

                             
• [ 特惠 ]${item.title }
                         

集合NewsList在三级分类里：

//资讯集合request.setAttribute("clist", list);
            request.setAttribute("NewsList",newsService.newsList(5,1));
            request.getRequestDispatcher(url).forward(request, response);

 index.jsp:

<set> </set>
  
<div></div><p>title.jsp:</p><div class="cnblogs_code"><pre class="brush:php;toolbar:false">


<if>
<forward></forward>
</if>            
<div>
    <div>
        
        <span>
            <span>加入收藏</span>
        </span>
        <span>
            <span>送货至：</span>
            <span>
                <span>四川</span>
                <div>
                    <div></div>
                    <div>
                        <h2 id="请选择所在的收货地区">请选择所在的收货地区</h2>
                        <table>
                          <tr>
                            <th>A</th>
                            <td>
<span>安徽</span><span>澳门</span>
</td>
                          </tr>
                          <tr>
                            <th>B</th>
                            <td><span>北京</span></td>
                          </tr>
                          <tr>
                            <th>C</th>
                            <td><span>重庆</span></td>
                          </tr>
                          <tr>
                            <th>F</th>
                            <td><span>福建</span></td>
                          </tr>
                          <tr>
                            <th>G</th>
                            <td>
<span>广东</span><span>广西</span><span>贵州</span><span>甘肃</span>
</td>
                          </tr>
                          <tr>
                            <th>H</th>
                            <td>
<span>河北</span><span>河南</span><span>黑龙江</span><span>海南</span><span>湖北</span><span>湖南</span>
</td>
                          </tr>
                          <tr>
                            <th>J</th>
                            <td>
<span>江苏</span><span>吉林</span><span>江西</span>
</td>
                          </tr>
                          <tr>
                            <th>L</th>
                            <td><span>辽宁</span></td>
                          </tr>
                          <tr>
                            <th>N</th>
                            <td>
<span>内蒙古</span><span>宁夏</span>
</td>
                          </tr>
                          <tr>
                            <th>Q</th>
                            <td><span>青海</span></td>
                          </tr>
                          <tr>
                            <th>S</th>
                            <td>
<span>上海</span><span>山东</span><span>山西</span><span>四川</span><span>陕西</span>
</td>
                          </tr>
                          <tr>
                            <th>T</th>
                            <td>
<span>台湾</span><span>天津</span>
</td>
                          </tr>
                          <tr>
                            <th>X</th>
                            <td>
<span>西藏</span><span>香港</span><span>新疆</span>
</td>
                          </tr>
                          <tr>
                            <th>Y</th>
                            <td><span>云南</span></td>
                          </tr>
                          <tr>
                            <th>Z</th>
                            <td><span>浙江</span></td>
                          </tr>
                        </table>
                    </div>
                </div>
            </span>
        </span>
        
        <span>
            <span>
                <div></div>
                <if>你好，欢迎您:<a>${user.userName }</a>  
 | <a>我的订单</a> |<a>注销</a>                  
                </if>
                <if>
 你好，请<a>登录</a>  
<a>免费注册</a>
                </if>
                            </span>
            <span>
                <div>
                    <a>收藏夹</a>
                    <div>
                        <div></div>
                        <div>
                            <ul>
                                <div>暂无收藏商品！</div>                            </ul>
                        </div>
                    </div>     
                </div>
                <div>
                    <a>客户服务</a>
                    <div>
                        <div></div>
                        <div>
                            <ul>
                                <li><a>售后流程</a></li>
                                <li><a>订购方式</a></li>
                                <li><a>隐私声明</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
                <div>
                    <a>网站导航</a>
                    <div>
                        <div></div>
                        <div>
                            <ul>
                                <li><a>精品女装</a></li>
                                <li><a>生活电器</a></li>
                            </ul>
                        </div>
                    </div>    
                </div>
            </span>
            <span>| 关注我们：</span>
            <span><a>新浪</a><a>微信</a></span>
            <span>| <a>手机版 <img  src="/static/imghwm/default1.png" data-src="images/s_tel.png" class="lazy" alt="分享一個易買網項目的實例教程" ></a></span>
        </span>
    </div>
</div>
<div>
    <div><a><img  src="/static/imghwm/default1.png" data-src="images/logo.png" class="lazy" alt="分享一個易買網項目的實例教程" ></a></div>
    <div>
        <form>
            <input>
            <input>
        </form>                      
        <span>
             
                                    <a>咖啡</a>
                                                        <a>iphone 6S</a>
                                                        <a>新鲜美食</a>
                                                        <a>蛋糕</a>
                                                        <a>日用品</a>
                                                        <a>连衣裙</a>
                                                        </span>
    </div>
<div>



<if>

        <div>购物车 [ <span>${pcount}</span> ]</div>
     </if>
     <if>
        <div>购物车 [ <span>0</span> ]</div>
     </if>
        <div>
        <if>
               <!--Begin 购物车未登录 Begin-->

            <div>还未登录！<a>马上登录</a> 查看购物车！</div>
            <!--End 购物车未登录 End-->
            </if>
            <!--Begin 购物车已登录 Begin-->
            <if>
            <ul>
            <if>
            <foreach>
            
                <li>
                    <div><a><img  src="/static/imghwm/default1.png" data-src="images/${item.fileName }" class="lazy" alt="分享一個易買網項目的實例教程" ></a></div>
                    <div><a>${item.name }</a></div>
                    <div>
<font>${item.price }</font> X${item.count }</div>
                </li>
            </foreach>
         
             </if>
            </ul>
            <if>0}">
            <div>
            <div>共计  <font>￥</font><span>${pprice }</span>
</div>
            <div><a>去购物车结算</a></div>
             </div>
             </if>
              <if>
              <div>
               <div>购物车内还没有商品，赶快选购吧！</div>
              </div>       
              </if>
            </if>
        <!--End 购物车已登录 End-->
        </div>
    </div>
</div>
<!--End Header End--> 
<!--Begin Menu Begin-->


<script>function deleteCartGoods(rec_id)
{
Ajax.call(&#39;delete_cart_goods.php&#39;, &#39;id=&#39;+rec_id, deleteCartGoodsResponse, &#39;POST&#39;, &#39;JSON&#39;);
}/**
 * 接收返回的信息 */function deleteCartGoodsResponse(res)
{  if (res.error)
  {
    alert(res.err_msg);
  }  else
  {
      document.getElementById(&#39;ECS_CARTINFO&#39;).innerHTML = res.content;
  }
}</script>