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

前台需求分析

一：用户模块

  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";

}

时间： 2024-08-22 14:57:13

SSH实战 · 唯唯乐购项目（上）的相关文章

TT乐购商城

TT乐购商城郑重承诺并保证:TT乐购商城销售的商品均为真品,我们保证商品质量,假一赔十.本原则依据<中华人民共和国消费者权益保护 法>.<中华人民共和国产品质量法>及其它规定制定. 凡在TT乐购商城上购物的顾客,如果您认为商品存在假货问题,请出据相关质检机关的证明或检测报告,经云联天下质检部确认核实我们将承诺假一赔十.TT乐购商城TT乐购商城TT乐购商城

配置github的SSH key及GitHub项目上传方式一——使用终端命令行

GitHub是一个开源的大仓库,我们经常从github上下载项目进行学习和研究,下面是一个完整的步骤--往GitHub上传一个新项目. 一.注册GitHub账号 1.注册GitHub账号,地址:https://github.com 注册账户 账户选择 2.登录: 登录.png 3.登录之后的页面,是我们star其他人的一些信息,类似于QQ空间的好友状态 D2A62592-D46E-43B8-82B5-1628131CBC67.png 二.配置GitHub的SSH key 1.查看系统中是否配置过

电商新发展优颂乐购迎风起航

现如今电子商务发展的新时代已经到来,许多社会人士以及刚毕业的年轻人都渴望发展自己的事业,而在网络购物行业飞速发展的优颂乐购商城也在学习中不断的进步,优颂乐购商城项目发展的速度加快,也使得加盟优颂乐购商城的加盟商盈利的更多,优颂乐购商城现已经找准自己未来要走的路,而加盟商值得拥有! 优颂乐购拥有先进潮流的时尚风格,简洁舒适的设计布局,种类繁多的商品货源,在商城的旗下服装鞋帽.电器家居.电子数码.美妆美肤.母婴玩具.箱包礼品等等各种日用百货.并在发展的同时建立了新型的电商市场,优颂乐购商城的总部立志

Spark入门实战系列--6.SparkSQL（上）--SparkSQL简介

[注]该系列文章以及使用到安装包/测试数据 可以在<倾情大奉送--Spark入门实战系列>获取 1.SparkSQL的发展历程 1.1 Hive and Shark SparkSQL的前身是Shark,给熟悉RDBMS但又不理解MapReduce的技术人员提供快速上手的工具,Hive应运而生,它是当时唯一运行在Hadoop上的SQL-on-Hadoop工具.但是MapReduce计算过程中大量的中间磁盘落地过程消耗了大量的I/O,降低的运行效率,为了提高SQL-on-Hadoop的效率,大量的

配置SSH环境详细步骤+反转项目

反转项目+SSH详细配置过程(每步截图) 一.创建DataSource 1.配置连接数据库的一些基本动作 2.注意:选择第三项,然后点击Add 点击Add后出现如下图,选择你要导入的数据库 3.Finished 二.新建Web Project 注意:Target runtime 选这个,而不是Tomcat 7.0 三.添加struts能力 1注意Target. Runtime的选择 2.此处注意选择spring plugin 四.添加spring能力 1.注意Target runtime的选择:

如何将本地项目上传到github

首先需要一个github账户,可去github的官方网址:https://github.com   注册一个: 需要用到的管理工具git,下载地址:https://git-scm.com/  :安装 准备工作做好了,开始吧 1.1   创建一个本地项目 我的本地项目是通过vue-cli脚手架搭建的,有兴趣的可以点击 这里 看一下: 进到自己的本地项目文件下,右键-选择git bash here(如下图) 1.2  建立本地仓库 如上点击git bash here之后即可打开git客户端黑窗口,

【项目实战派】图像处理项目硬件选型

[项目实战派]图像处理项目的硬件平台选型 一直以来我都对嵌入式系统比较感兴趣,因为感到图像处理最终还是要走向便携式.移动化的.这里讲自己对图像处理项目的硬件平台选型这块的想法进行交流,欢迎交流.批评. 一.典型图像处理系统构建 ①相机与镜头--这部分属于成像器件,通常的视觉系统都是由一套或者多套这样的成像系统组成,如果有多路相机,可能由图像卡切换来获取图像数据,也可能由同步控制同时获取多相机通道的数据.根据应用的需要相机可能是输出标准的单色视频(RS-170/CCIR).复合信号(Y/C).RG

优颂乐购——电子商务未来的发展趋势

未来十年,一个以为了信息为载体,分享和互交为基础,超越传统商业模式和商业要素的新时代正在孕育和构建.网商生逢其时,并将大有作为.他们,以及正在崛起的电商群体,将证明自己是未来商业发展的主体,并对传统商业领域产生广泛而积极的影响.-----马云. 电子商务未来的发展趋势是怎样的呢? 仁者见仁智者见智,有人认为,电子商务未来几大大趋势,关键词分别是:移动化,平台化,三四五线城市,B2C,大数据,精准化营销和个性化服务以及互联网金融. 电子商务最近一年面临巨大拐点: 1.以马云主导的淘宝系,以及京东.

应用程序框架实战三十八:项目示例VS解决方案的创建(一)

进行项目开发的第一步,是创建出适合自己团队习惯的VS解决方案,虽然我已经提供了项目示例,但毕竟是我创建的,你直接使用可能并不合适,另外你如果尝试模仿重新创建该示例,中间可能碰到各种障碍,特别是项目间的依赖关系. 本文的目的是帮助.Net架构初学者能顺利搭建起适合自己的VS解决方案,我会在本文演示曾经用过的几种不同风格的目录结构,你可以根据自己的习惯选择一种并自行修改. 本系列假定你已经熟悉如何创建.NET类库等基础知识,并具有.Net开发经验,我不会详细到每一个细节.如果你是.Net初学者,尚未