码迷，mamicode.com
首页 > 其他好文 > 详细

SSH实战 · 唯唯乐购项目（上）

时间：2017-01-03 18:31:35      阅读：433      评论：0      收藏：0      [点我收藏+]

标签：--   set   过程   jsp页面   org   传递   邮箱   get   attribute   

前台需求分析
一：用户模块
  1. 注册
    • 前台JS校验
    • 使用AJAX完成对用户名(邮箱)的异步校验
    • 后台Struts2校验
    • 验证码
    • 发送激活邮件
    • 将用户信息存入到数据库
  2. 激活
    • 点击激活邮件中的链接完成激活
      • 根据激活码，查询数据库中是否有该用户；
      • 如果有则激活，否则不激活；
  3. 登录
    • 输入用户名、密码、验证码(前台，后台数据校验)
    • 用户名、密码都正确同时用户状态必须是激活状态
  4. 退出
    • 销毁session。
 
二：一级分类模块
  1. 查询一级分类
    • 将一级分类存入session中（每个页面都一样的数据）
  2. 查询某个一级分类
    • 查询所有一级分类，同时查询到该一级分类下的所有二级分类
    • 查询该分类下所有的商品，带分页显示
三：商品模块
  1. 查询热门商品
    • 查询热门商品：限制查10个
  2. 查询最新商品
    • 查询最新商品：限制查10个
  3. 查询某个分类商品
    • 根据分类的ID进行查询商品
  4. 查询某个二级分类商品
    • 根据二级分类的ID进行查询商品
  5. 查询某个商品信息
    • 根据商品ID进行查询商品
 
四：购物模块
  1. 添加到购物车
    • 将商品添加到购物车
  2. 从购物车中移除商品
    • 将商品从购物车中移除
  3. 清空购物车
    • 将所有的商品信息从购物车中移除
 
五：订单模块
  1. 生成订单
    • 将购物车中的信息存入到数据库（生成订单）
      • 清空购物车
  2. 为订单付款
    • 在线支付功能
    • 修改订单状态
    • 修改订单信息（收货地址，联系方式，收货人等）
  3. 查询我的订单
    • 根据用户ID查询订单
  4. 查询某个订单详情
    • 根据订单ID查询订单
 
后台需求分析
一：用户模块
  1. 添加用户     ·   后台只添加管理员用户
  2. 删除用户
  3. 查询用户
  4. 修改用户
二：一级分类
  1. 添加一级分类
  2. 删除一级分类
    • 级联删除一级分类下的所有二级分类
  3. 修改一级分类
    • 级联修改一级分类下的所有二级分类
  4. 查询一级分类
    • 分页查询
三：二级分类
  1. 添加二级分类
    • 选择所属的一级分类进行添加
  2. 删除二级分类
    • 删除二级分类下的所有商品
  3. 修改二级分类
  4. 查询二级分类
    • 分页查询
 
五：商品模块
  1. 添加商品
    • 选择商品所属二级分类进行添加
    • 上传商品图片
  2. 修改商品
    • 修改商品二级分类
    • 修改商品图片
  3. 删除商品
  4. 查询商品
    • 商品查询（带分页）
 
六：订单模块
  1. 查询订单
    • 查询所有订单（带分页）
      • 异步加载所有订单
 
页面设计
完成前台静态页面的设计。
数据库设计
 
原则：至少一个模块一张表。
用户表：
    • 用户ID
    • 用户名
    • 密码
    • 真实姓名
    • 邮箱
    • 细致
    • 电话
    • 用户状态：0--激活；1--未激活
    • 激活码
sql语句：
CREATE TABLE `user` (
  `uid` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(255) DEFAULT NULL,
  `password` varchar(255) DEFAULT NULL,
  `name` varchar(255) DEFAULT NULL,
  `email` varchar(255) DEFAULT NULL,
  `phone` varchar(255) DEFAULT NULL,
  `addrress` varchar(255) DEFAULT NULL,
  `state` int(11) DEFAULT NULL,
  `code` varchar(64) DEFAULT NULL,
  PRIMARY KEY (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=utf8;
 
 一级分类表：
    • 一级分类ID
    • 一级分类名称
CREATE TABLE `category` (
  `cid` int(11) NOT NULL AUTO_INCREMENT,
  `cname` varchar(255) DEFAULT NULL,
  PRIMARY KEY (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=12 DEFAULT CHARSET=utf8;
 
二级分类表：
    • 二级分类ID
    • 二级分类名称
    • 一级分类ID（外键指向一级分类主键ID）
CREATE TABLE `categorysecond` (
  `csid` int(11) NOT NULL AUTO_INCREMENT,
  `csname` varchar(255) DEFAULT NULL,
  `cid` int(11) DEFAULT NULL,
  PRIMARY KEY (`csid`),
  KEY `FK936FCAF21DB1FD15` (`cid`),
  CONSTRAINT `FK936FCAF21DB1FD15` FOREIGN KEY (`cid`) REFERENCES `category` (`cid`)
) ENGINE=InnoDB AUTO_INCREMENT=71 DEFAULT CHARSET=utf8;
 
商品表：
    • 商品ID
    • 商品名称
    • 商品商城价格
    • 商品描述
    • 商品市场价格
    • 商品描述
    • 商品图片（路径）
    • 二级分类ID（外键指向二级分类主键ID ）   
CREATE TABLE `product` (
  `pid` int(11) NOT NULL AUTO_INCREMENT,
  `pname` varchar(255) DEFAULT NULL,
  `market_price` double DEFAULT NULL,
  `shop_price` double DEFAULT NULL,
  `image` varchar(255) DEFAULT NULL,
  `pdesc` varchar(255) DEFAULT NULL,
  `is_hot` int(11) DEFAULT NULL,
  `pdate` datetime DEFAULT NULL,
  `csid` int(11) DEFAULT NULL,
  PRIMARY KEY (`pid`),
  KEY `FKED8DCCEFB9B74E02` (`csid`),
  CONSTRAINT `FKED8DCCEFB9B74E02` FOREIGN KEY (`csid`) REFERENCES `categorysecond` (`csid`)
) ENGINE=InnoDB AUTO_INCREMENT=86 DEFAULT CHARSET=utf8;
 
订单表：
    • 订单ID
    • 订单时间
    • 订单金额
    • 订单状态
    • 订单地址
    • 订单电话
    • 订单收货人
    • 用户ID（外键指向用户表的主键ID）
CREATE TABLE `orders` (
  `oid` int(11) NOT NULL AUTO_INCREMENT,
  `total` double DEFAULT NULL,
  `ordertime` datetime DEFAULT NULL,
  `state` int(11) DEFAULT NULL,
  `name` varchar(20) DEFAULT NULL,
  `phone` varchar(20) DEFAULT NULL,
  `addr` varchar(50) DEFAULT NULL,
  `uid` int(11) DEFAULT NULL,
  PRIMARY KEY (`oid`),
  KEY `FKC3DF62E5AA3D9C7` (`uid`),
  CONSTRAINT `FKC3DF62E5AA3D9C7` FOREIGN KEY (`uid`) REFERENCES `user` (`uid`)
) ENGINE=InnoDB AUTO_INCREMENT=9004 DEFAULT CHARSET=utf8;
 
 
订单项表：（需要参与业务逻辑中）
    • 主键ID
    • 商品ID（指向）
    • 订单ID（）
    • 数量
    • 小计
CREATE TABLE `orderitem` (
  `itemid` int(11) NOT NULL AUTO_INCREMENT,
  `count` int(11) DEFAULT NULL,
  `subtotal` double DEFAULT NULL,
  `pid` int(11) DEFAULT NULL,
  `oid` int(11) DEFAULT NULL,
  PRIMARY KEY (`itemid`),
  KEY `FKE8B2AB6166C01961` (`oid`),
  KEY `FKE8B2AB6171DB7AE4` (`pid`),
  KEY `FKE8B2AB6140ACF87A` (`oid`),
  CONSTRAINT `FKE8B2AB6140ACF87A` FOREIGN KEY (`oid`) REFERENCES `orders` (`oid`),
  CONSTRAINT `FKE8B2AB6171DB7AE4` FOREIGN KEY (`pid`) REFERENCES `product` (`pid`)
) ENGINE=InnoDB AUTO_INCREMENT=17 DEFAULT CHARSET=utf8;
 
 
后台用户表：
    • 用户名
    • 密码
 
表关系分析图
其中 ： 订单项表是商品表和订单表之间多对多关系产生的中间表。
技术分享

 

 
 编码实现
一：SSH整合
  1. 参考之前得SSH项目实战  ·  项目环境搭建——http://www.cnblogs.com/panweiwei/p/6212609.html。
 

　　2. 引入前端页面 ---- 页面都放到WebRoot/WEB-INF下。

    • 引入静态页面
      • 将HTML静态页面都复制到WebRoot/WEB-INF/jsp目录下.
      • 将JS、CSS文件分别复制到WebRoot/js、WebRoot/css目录下.
 

　　3. 访问首页

    • 创建包的格式：
* cn.itcast.shop.index
* action
* cn.itcast.shop.user
* action
* service
* dao
* vo
    • 编写Action
      • IndexAction
    • 改造jsp和文件路径
      • 将html静态页面改为jsp页面文件
      • 将jsp中的css、js、图片路径改为绝对路径（${pageContext.request.contextPath} ）
    • 配置Action
      • 配置applicationContext.xml
 <!-- 首页访问的Action 注意：千万不要忘记scope-->
 <bean id="indexAction" class="cn.itcast.shop.index.action.IndexAction" scope="prototype"></bean>
      • 配置struts.xml
 <!-- 配置首页访问的Action -->
 <action name="index" class="indexAction">
     <result name="index">/WEB-INF/jsp/index.jsp</result>
 </action>
 
用户模块：注册
一：改装页面 
  1. 将页面中能共用的菜单、头部区域提出来（新建一个head.jsp）
  2. 在原来网页的头部处将head.jsp包入就好：
          <@% include file="head.jsp" %>
 
二：跳转到注册界面
  1. 点击注册链接进行跳转（添加到一个Action中，从Action中完成页面转向）
    • 修改注册的访问路径
                         ${pageContext.request.contextPath}/user_registePage.action
    • 编写Action
    • 配置applicationContext.xml
<!-- 用户模块的Action -->
<bean id="userAction" class="cn.itcast.shop.user.action.UserAction" scope="prototype"></bean>
    • 配置struts.xml
     <!-- 配置用户模块的Action -->
     <action name="user_*" class="userAction" method="{1}">
         <result name="registPage">/WEB-INF/jsp/regist.jsp</result>
     </action>
    • 修改register.jsp页面：
      • 替换css、图片的路径
                     ./css 替换成 ${pageContext.request.contextPath}/css
                    ./images 替换成 ${pageContext.request.contextPath}/images
      • 包含head.jsp。当然了，原页面中相应的内容删掉
<@% include file="head.jsp" %>
  1. 用户注册校验
       2.1 前台校验：页面中凡是涉及到提交表单的都要进行验证。
    • 统一字段名的name、id（与数据库表中字段、实体类中的字段对应）；
    • 加 JS。
    • AJAX异步校验：验证数据库中是否已存在输入的用户名
      • 事件触发：onblur
      • 编写AJAX代码：向action中提交：传递username参数
      • 编写antion：

*  接收username：模型驱动接收                          

*  编写实体类：User；                          

*  映射文件：User.hbm.xml；                           

*  将实体类与映射文件配置到spring中。

      • 编写DAO

                         *  继承HibernateDaoSupport；

            • 在配置中注入sessionFactory  
      • 编写Service

                         *  注入UserDao；                            

　　　　　　　　  *  配置事务管理；   

       2.2 后台数据校验
    • 在Action所在包下创建一个校验的xml
      • 创建一个与Action类名-validation.xml（只针对register方法进行校验）
      • UserAction-user_regist-validation.xml
  <!DOCTYPE validators PUBLIC
          "-//Apache Struts//XWork Validator 1.0.3//EN"
          "http://struts.apache.org/dtds/xwork-validator-1.0.3.dtd"> 
  <validators>
 <!-- 校验用户名 -->
 <field name="username">
     <field-validator type="requiredstring">
         <message>用户名不能为空!</message>
     </field-validator>
 </field>
 
 <!-- 校验用户名 -->
 <field name="password">
     <field-validator type="requiredstring">
         <message>密码不能为空!</message>
     </field-validator>
 </field>
 
 <!-- 校验邮箱 -->
 <field name="email">
     <field-validator type="email">
         <message>邮箱格式不正确!</message>
     </field-validator>
 </field>
   </validators>
    • 在struts.xml中配置INPUT逻辑视图
         <!-- 配置用户模块的Action -->
          <action name="user_*" class="userAction" method="{1}">
              <result name="registPage">/WEB-INF/jsp/register.jsp</result>
              <result name="input">/WEB-INF/jsp/register.jsp</result>
          </action>
    • 在register.jsp页面先引入struts标签
               <%@ taglib uri="/struts-tags" prefix="s"%>
    • 在相应的位置回显错误提示信息。如密码验证提示如下：
  <span><s:fielderror fieldName="password"/></span>
 
  1. 用户注册
    • 将数据保存到数据库
      • 完善user对象
                     *  用户状态默认为0(未激活状态);
                     *  激活码采用工具类(UUID)生成(32位激活码);
    • 发送激活邮件
      • 电子邮箱：邮件服务器上的一块空间；
      • 技术分享

         

        邮件服务器：类比于web服务器(tomcat),有相应的服务器软件；
      • 邮件协议：大公司发送和接收服务器分开，也可以都用一个服务器。
                           SMTP:简单的邮件发送协议；
                           POP3:接收邮件的一个协议；
      • 邮件发送的全过程：理论上需要联网，但是通过搭建在本地的服务器，可以在本地进行邮件的发送。

 

      • 搭建邮箱服务器：
        • 安装邮箱服务器（易邮邮箱服务器，就按默认的安装在C盘）
        • 修改域名：工具-->服务器设置-->单域名改为：shop.com
        • 注册几个内部账号：账号-->新建账号。密码设为55555
        • 注册一个商城官方账号：service    密码：55555
      • 安装邮件客户端软件（可以接发邮件）：避免了网页版session的过期离线问题。
        • 流行的有软件有：outlook（微软收费）、foxmail（免费，选用foxmail）
        • 配置
                              * 配置发送邮件服务器：localhost
                              * 配置接收邮件服务器：localhost
      • 编码实现邮件发送
 
  1. 用户激活
    • 在邮箱客户端中点击激活链接：
      • 根据链接中传递的激活码进行查询
                         * 如果用户不为空：修改用户状态：0  -->  1，向前台传递激活成功消息。
                         * 如果用户为空：激活码失效或被篡改，向前台传递激活失败消息。
 
  1. 用户登录
    • 登录页面跳转链接
      • 将html编写为login.jsp，并更换引用路径以及菜单头文件
      • 修改页面上的登录链接为${pageContext.request.contextPath}/user_loginPage.action
      • 编写Action中的方法
      • struts.xml中配置页面转向
    • 登录功能实现
      • 添加login.jsp中的表单action
      • 接收用户输入的用户名、密码——模型驱动会自动接收；
      • 调用userService，进行查询——参数：用户名、密码、用户状态。
      • 登录成功：跳转到首页，并将用户信息显示在首页。
      • 登录失败：跳转回登录页面，并将错误信息显示在登录页面。
  2. 用户退出
    • 给链接加action的路径，点击退出链接
      • 销毁session
//销毁session
ServletActionContext.getRequest().getSession().invalidate();
      • 页面跳转
  1. 验证码
    • 在com.weiwei.shopping.user下编写单独的验证码Action类；
    • 在spring、struts配置文件中完成配置；
             applicationContext.xml 中：
　　　　　　<!-- 配置验证码Action -->
　　　　　　<bean id="checkImgAction" class="com.weiwei.shopping.user.action.CheckImgAction" scope="prototype"></bean>
             struts.xml 中：
          <!-- 验证码Action -->
          <action name="checkImg" class="checkImgAction"></action>
    • 页面中需要的位置显示验证码
          <img id="rightcode" class="captchaImage" src="${pageContext.request.contextPath}/checkImg.action" title="点击更换验证码" onclick="ChangeCodeImg()" />
    • 编写JS，点击刷新验证码
/*点击更换验证码图片*/
function ChangeCodeImg(){
     /*取到验证码图片*/
     var codeImg = document.getElementById("rightcode");
     /*由于浏览器的缓存，所以需要加上时间戳*/
     codeImg.src = "${pageContext.request.contextPath}/checkImg.action?" + new Date().getTime();
}
    • 提交到action，在action中进行比较，表单输入的与session中的验证码不相等则相应请求不提交。
/*判断验证码，验证码正确则提交，否则不提交*/
//从session中获取正确的验证码
String rightcode = (String) ServletActionContext.getRequest().getSession().getAttribute("checkcode");
//与表单提交的验证码比较
if(!formcode.equalsIgnoreCase(rightcode)){
      //不相等
      this.addActionError("验证码输入错误！");
      return "loginPage";
}
User existUser = userService.checkLogin(user);
if(existUser == null){
      //登录失败
      this.addActionError("查无此人,登录失败！");
      return "login";
} else{
      //登录成功
      //将用户的信息存到session中，在进行页面的跳转
      ServletActionContext.getRequest().getSession().setAttribute("existUser", existUser);
      this.addActionMessage("登录成功！");
      return "loginPage";
}
 

SSH实战 · 唯唯乐购项目（上）

标签：--   set   过程   jsp页面   org   传递   邮箱   get   attribute   

原文地址：http://www.cnblogs.com/panweiwei/p/6245697.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！