MVC模式开发图书商城项目分析

MVC模式开发图书商城项目分析

1. 功能分析

1、用户注册

2、用户登录

3、添加商品(CURD)

4、商品查看-- 列表查询

5、商品详情页面

6、将商品添加购物车

7、查看购物车

8、修改购物车

9、生成订单

10、订单查看(取消)

11、在线支付

12.下载销售榜单

游客(未登录): 注册、登陆、商品查看

商城注册用户 : 商品查看、添加商品到购物车、购物车管理、生成订单、订单管理、在线支付

管理员 : 添加商品、商品管理、查看订单 、榜单查看(导出)

2. 系统设计

1技术选型 (系统架构)

JSTL + JSP + Servlet + JavaBean + BeanUtils + FileUpload + JavaMail + DBUtils(JDBC) + C3P0 +  MySQL + MyEclipse10+ Tomcat7.0 + JDK6  + Windows

MVC 模式

JavaEE 三层结构   web层   service层   dao层

DAO 模式

2数据库设计

系统存在以下实体:用户、商品、订单、购物车

购物车不放入数据库 (Session或者Cookie实现)

用户表

create table users (

id int primary key auto_increment,

username varchar(40),

password varchar(100),

nickname varchar(40),

email varchar(100),

role varchar(100) ,

state int ,

activecode varchar(100),

updatetime timestamp  );

商品表

create table products(

id varchar(100) primary key ,

name varchar(40),

price double,

category varchar(40),

pnum int ,

imgurl varchar(100),

description varchar(255));

订单表

create table orders(

id varchar(100) primary key,

money double,

receiverinfo varchar(255),

paystate int,

ordertime timestamp,

user_id int ,

foreign key(user_id) references users(id)

);

用户与订单之间存在 一对多关系 : 在多方添加一方主键作为外键

订单和商品之间存在 多对多关系 : 创建第三张关系表,引入两张表主键作为外键 (联合主键)

订单项

create table orderitem(

order_id varchar(100),

product_id varchar(100),

buynum int ,

primary key(order_id,product_id),

foreign key(order_id) references orders(id),

foreign key(product_id) references products(id)

);

设置数据库环境

数据库 :create database estoresystem

3 工程环境搭建和网站部署

1) 导入jar包

导入mysql驱动  mysql driver / mysql-connector-java-5.0.8-bin.jar

导入c3p0  c3p0/c3p0-0.9.1.2.jar  将c3p0-config.xml 复制src下  将DataSourceUtils复制 cn.itcast.estore.utils  ----- 配置c3p0-config.xml数据库连接参数

导入dbutils apache commons\dbutils\commons-dbutils-1.4.jar

导入beanutils commons-beanutils-1.8.3.jar commons-logging-1.1.1.jar

导入fileupload commons-fileupload-1.2.1.jar commons-io-1.4.jar

导入javamail mail.jar

导入jstl jstl.jar standard.jar

2) 建立package结构 按照JavaEE 三层结构

cn.itcast.estore.web.servlet

cn.itcast.estore.web.filter

cn.itcast.estore.web.listener

cn.itcast.estore.service

cn.itcast.estore.dao

cn.itcast.estore.domain

cn.itcast.estore.utils

3) domain类编写

4) 工程发布

将bookEstore项目配置虚拟主机,以顶级域名方式进行发布

1) 将工程根目录 bookEstore目录 配置虚拟主机目录 ---- 配置conf/server.xml

<Host name="www.bookEstore.com"  appBase="myeclipse下的工程路径"

unpackWARs="true" autoDeploy="true"

xmlValidation="false" xmlNamespaceAware="false">

</Host>

2) 将工程目录下WebRoot 目录,配置缺省web应用

<Host name="www.estore.com"  appBase=" myeclipse下的工程路径"

unpackWARs="true" autoDeploy="true"

xmlValidation="false" xmlNamespaceAware="false">

<Context path="" docBase="WebRoot" />

</Host>

3) 将www.estore.com 虚拟主机配置缺省虚拟主机 ----- 能够用ip直接访问主机

<Engine name="Catalina" defaultHost="www.estore.com">

4) 修改本机域名解析文件 hosts ---- c:\windows\system32\drivers\etc

添加 127.0.0.1 www.bookEstore.com

3. 功能实现

1用户注册

1、 功能一: 用户注册 (技术点:验证码技术 、激活邮件技术)

1) 一次性验证码

原理:在生成验证码Servlet程序中,将生成验证码保存Session中,用户提交验证码 与 保存在Session验证码进行比较,如果相同,请求合法

2) 注册表单 JS校验

考虑JS校验是否可以抽取成框架

3) 处理form乱码问题 ---- 通用get post 乱码过滤器

4) 密码 MD5 加密

5) 激活邮件发送

6) 配置通用错误处理页面web.xml

<error-page>

<error-code>500</error-code>

<location>/500.jsp</location>

</error-page>

<error-page>

<error-code>404</error-code>

<location>/404.jsp</location>

</error-page>

500.jsp 显示错误的信息

404.jsp 自动刷新跳转回主页面

2用户登录

原理:用户输入正确用户名和密码,登陆成功,用户信息将会被保存Session对象中。 ------ 记住用户名和密码 、自动登陆

1) 登陆表单中,添加记住用户名 和 自动登陆功能

2) 登陆过程中判断 账户是否激活

3) 在login.jsp 显示记住用户名

在username 的input项中添加  value="${cookie.username.value}"

在勾选自动登陆 checkbox 添加

4) 登陆后注销功能

注销Session

3用户自动登录过滤器

自动登陆功能 对系统所有页面有效 (例如访问index.jsp  list_product.jsp  info_product.jsp 这些页面在访问时都将执行自动登陆 )

* 对于登陆相关页面不会执行自动登陆逻辑 (login.jsp 、LoginServlet 、InvalidateServlet )

1) 判断该请求页面是否需要自动登陆

2) 是否已经登陆

3) 是否含有自动登陆cookie

4) 自动登陆

5) 在LoginServlet 添加对于没有勾选记住用户名和自动登陆 处理代码 !!!!!!!

6) 在退出功能 InvalidateServlet 清除自动登陆信息

4商品添加

文件上传三个注意事项

1) input输入框 必须有name属性

2) 表单form 必须post提交方式

3) 设置form的enctype 为 multipart/form-data

表单提交时,校验分为两种 : 客户端校验 、服务器端校验  ------ 只有服务器端校验才能确保数据准确

商品图片上传到服务器端后,保存在哪个目录 ???  必须直接在WebRoot下及其除WEB-INF、META-INF 子目录外

一般情况下,一张表对应Domain类 --- DAO类 ---- Service类

5商品列表查看

列表中显示原图,因为原图比较大,页面加载非常缓慢 ,页面布局不会很美观 ---------------- 缩略图

* Java中通过图形界面技术,生成小图

在Product类中添加 getImgurl_s方法,用来获取缩略图路径

6商品详细信息查看

通过在列表中点击 商品图片或者商品名称 进入详情查看页面

7添加商品到购物车

购物车对象,不保存在数据库中,使用Session来保存用户购物车数据

保存购物车对象 Map<Product,Integer>  key 商品对象 value 商品购买数量

流程 :添加商品到购物车流程,点击添加到购物车,将商品id传递Servlet ,从Session中取出购物车对象,判断商品是否已经在购物车中,如果不在添加商品到购物车数量 1 ,在购物车取出原有数量+1

1) 如果Map的key是一个自定义对象,重写 hashcode和equals

2) 如果商品不在购物车中,需要根据商品 id 查询商品所有信息,添加购物车

3) 添加商品到购物车

Session中信息在服务器正常关闭时,会被序列化到硬盘中  ---- Product实现 Serializable接口 完成序列化

8显示与修改购物车数据

购物车信息保存在Session中,不需要去查询数据库,将Session中信息显示出来

1) 在购物车中显示总价

2) 购物车修改 :

清空购物车 : request.getSession().removeAttribute("cart");

删除购物车中单项商品 : cart.remove(product) ;  注意:删除一项后,判断购物车是否为空,如果为空 移除购物车对象

* 删除确认功能

写法一:直接在href中 触发js函数,询问用户是否确认,如果确认,location.href 发起删除请求  ----- <a href="javasript:confirmDel();" >...</a>

写法二:<a href="/delCart?id=xx" onclick="confirmDel(); "></a> 在链接中添加 onclick事件 ,询问用户是否确认,如果用户取消,通过JS阻止href事件提交

阻止href默认事件 : e.preventDefault() ---- 必须支持事件 FF支持、IE不支持

IE阻止href默认事件

function confirmDel(e){

// 询问用户是否确认

var isConfirm = window.confirm("商品不要了吗?多好的商品啊!");

if(!isConfirm){

// 用户选择取消,阻止 a 标签 默认事件 href发生

if(e&&e.preventDefault){

// e对象存在,preventDefault方法存在 ---- 火狐浏览器

e.preventDefault();

}else{

// 不支持e对象,或者没有preventDefault方法 ---- IE

window.event.returnValue = false;

}

}

}

修改购物车中商品购买数量  ---- JavaScript 控制购物数量修改

9订单生成

重点:

1) 向orders表插入订单信息后,同时需要向orderitem表插入 订单中每项数据

2) 多表插入 (数据完整性问题)  --- 事务管理

3) 订单生成后 ,商品数量更新减少

10订单列表查询与取消

管理查询订单 --- 所有人订单信息

普通用户 ---- 只能查询自己的订单

在订单生成后,查看订单列表 、也可以通过index.jsp 进入订单查看页面

重点:查询订单时,同时查询订单项目信息

1) 查询订单基本信息时,查询下单用户昵称和用户名

在Order类中 添加 用户的 username 和 nickname字段

select orders.*,users.username,users.nickname from orders,users where orders.user_id = users.id;

2) 查询订单项信息时,查询商品的名称和单价

在OrderItem类中 添加商品的name和price 字段

select orderitem.*,products.name,products.price from orderitem,products where orderitem.produtct_id = products.id and orderitem.order_id = ?

订单取消 : 删除订单表信息时,同时删除订单项信息 (订单项信息依赖 订单信息 ,必须先删除订单项)

注意事项

1) 可以取消未支付的订单,如果订单已经支付,将无法取消

2) 管理员不能取消任何用户未支付订单,普通用户只能取消 自己的未支付的订单

取消订单进行事务管理 :删除订单项、删除订单、恢复商品数量

11订单在线支付

1) 网站进行支付,根据易宝支付接口请求规范,生成易宝需要数据,将数据提交到易宝指定网址 https://www.yeepay.com/app-merchant-proxy/node

* 在提交支付请求给易宝,需要将请求中数据,使用易宝提供密钥和算法进行加密,获得数字签名 hmac码 ,将hmac码发送给易宝

2) 易宝会连接银行,进行支付

3) 支付后,浏览器会以重定向方式访问 网站回调程序,易宝在收到银行转账后,会以Socket方式通知网站

* 在浏览器重定向通知后,提供给用户支付成功显示页面 (不要去修改订单状态)

* 在网站收到易宝点对点通知后,回复易宝success,修改订单状态

数字签名原理:将数据 使用密钥和算法加密后 获得数字签名hmac,将数据和数字签名hmac一起发送给易宝,易宝采用同样密钥和算法对数据进行加密获得数字签名hmac,比较请求中数字签名hmac与加密后获得数字签名hmac是否一致,如果一致 签名hmac有效 (数据没有被篡改 )

流程入口: 未支付订单可以进行支付,管理员不允许支付

在线支付

1) pay.jsp 银行选择页面

2) OnlinePayServlet 准备易宝支付参数

* 提供密钥和算法  商家编号  真实的  将PaymentUtil 复制 utils包  , 将 merchantInfo.properties 复制 src

* responseURL 支付成功后 回调地址 ,该地址会收到 浏览器重定向和服务器点对点两次通知 ,确保该地址 可以被易宝访问  (estore项目必须要配置缺省虚拟主机)

将OnlinePayServlet准备易宝参数,传递JSP 确认

3) confirm.jsp 通过form的隐藏域 提交参数给易宝网址 https://www.yeepay.com/app-merchant-proxy/node

4) CallbackServlet 回调程序

收到浏览器重定向和服务器点对点两个通知

浏览器重定向,显示支付成功,不要修改订单状态

服务器点对点,修改订单状态,回复success

12销售榜单导出功能

获得商品销售情况,需要查询orderitem表  ------- 统计已支付订单项内容

1) 榜单中存在哪些信息?(已支付订单中商品)

商品信息 products表

销售数量 orderitem表

订单支付情况 orders表

select * from products,orderitem,orders where products.id = orderitem.product_id and orderitem.order_id = orders.id ;

进行商品分组查询 group by

select products.* , sum(orderitem.buynum) totalSaleNum from products,orderitem,orders where products.id = orderitem.product_id and orderitem.order_id = orders.id and orders.paystate = 1 group by products.id order by totalSaleNum desc;

2) 榜单文件是什么格式?

导出Excel 使用 POI类库

csv 格式文件 , 逗号分隔文件

1) 信息当中有,在两端加 双引号

2) 信息当中有" 在之前加双引号 转义

文件下载

设置Content-Type、Content-Disposition 头信息

文件流输出 (输出文件内容)

Excel 默认读取字符集gbk

时间: 2024-08-08 01:27:03

MVC模式开发图书商城项目分析的相关文章

分层模式开发+MVC模式开发--韩顺平雇员数据库管理

1.分层模式 在使用分层设计模式编写代码之前,我们更多的是采用面向过程然后眉毛胡子一把抓,在一两个程序代码里写完所有的功能,这样只适合于小型个人项目.因为不利于阅读和修改,只有编程的个人比较熟悉程序的结构.这不利于程序的扩展性和协同开发.所以,我们引入一个固定的模式来进行编程,使得所有代码结构清晰明确,而且易于扩展延伸. 此处介绍的一种模式是分层模式.把程序分成几个层次:界面层.业务逻辑层.数据层. 界面层:主要功能就是实现界面的显示.比如要在登陆页面显示输入框之类,就需要login.php中放

【Web开发】Mean web开发 01-Express实现MVC模式开发

简介 Mean是JavaScript的全栈开发框架.更多介绍 用Express实现MVC模式开发是Mean Web全栈开发中的一部分. Express 是一个基于 Node.js 平台的极简.灵活的 web 应用开发框架,它提供一系列强大的特性,帮助你创建各种 Web 和移动设备应用.Express官网. 两种文件夹结构 水平文件夹结构: 按照文件的功能来分类.整个应用的分类都放在一个按照MVC文件夹结构组合的目录之中.例如: app文件夹用于保存Express应用的逻辑部分相关代码,包含: c

使用mvc模式开发网站

看了韩顺平的j2ee的视频后,吧里面教的做了出来,感觉好极了,新手上路!!! 这个肯定不是原创,但是也不是转载,那我就姑且把它作为翻译吧,给其他看视频学习但是没有代码的同学一点福利吧 首先是login.jsp的登陆界面代码. <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <% String path = request.getConte

使用MVC模式开发程序,完成数据的模糊查询【转】

编写程序:使用MVC模式开发程序,完成数据的模糊查询. 要求: (1)index.jsp用于输入要查询的数据. (2)result.jsp:用于显示结果. (3)queryServlet:用于验证数据.实例化JavaBean.调用连接数据库.控制页面跳转 (4)queryDAO:用于连接数据库及进行数据库的操作如:查询.删除.更改等 (5)Student:JavaBean用于数据的封装,方便将查询结果在servlet与jsp页面之间进行传递等 以上几个部分共同构成了MVC模式,JSP为MVC模式

Extjs MVC模式开发,循序渐进,Helloworld

MVC模式案例(一) 即将实现网页的布局有三部分组成:顶部标题.左侧菜单和右侧主题内容显示.这里我们对案例的布局有个初步印象,方便今后我们的进一步学习. 了解了项目的最终效果,下面来看一下该案例最终的文件结构: 文件结构可以看出,在整个项目中,app文件夹是我们的主要工作目录,其中包含:controller(控制器).model(数据模型).store(数据集).view(视图).另外还有server文件夹,其主要目的是代替后台服务器为项目提供数据.这些内容我们将在今后的文章中逐步讲解,今天我们

.net使用mvc模式开发web应用 模型与视图间的数据处理

http://www.cnblogs.com/JeffreyZhao/archive/2009/02/27/mvc-use-strong-type-everywhere.html#3427764 本文来自于 主要讲到尽可能使用强类型作为action与view间的数据传递介质 不使用viewdata 为每一个视图建立一个数据传递Molde 缘由: 1.使用ViewData的坏处是必须使用字符串作为键进行访问.字符串是什么?是常量.分散在各处的常量是维护性的大敌,而使用ViewData则几乎无可避免

易商城系统模式开发易商城系统模式详解

易商城系统开发(李想.185.6504.8478)商业兴起于先商时期的商国,形成初期是以物换物的方式进行的社会活动.后来发展成为以货币为媒介进行交换从而实现商品流通的经济活动.现代的商业分为线下以及线上两种,极大提高了贸易的效率.以买卖方式使商品流通的经济活动.小编来给大家介绍一下易商城系统的具体细节: 易商城,一个新兴的商业模式(模式简介) 股权部分: 100元/股(每人只能投资一股,后期可用股权部分产生的收益进行复投) 1.静态分红: 每日返10元,返到150出局1股. 每位会员只能投入1股

MVC模式在游戏开发的应用

原地址: http://www.cocoachina.com/gamedev/2012/1129/5212.html MVC是三个单词的缩写,分别为:模型(Model).视图(View)和控制Controller).MVC是一个设计模式,它强制性地使应用程序的输入.处理和输出分开,将应用程序分成三个核心部件:模型.视图.控制器.它们各自处理自己的任务,关系如图所示: 模型是数据层,视图是表现层,控制器是逻辑层,也对应于程序运行中的数据输入,数据处理,数据输出基本三步骤.事实上,MVC模式开发也适

JDBC - 开发实例 - MVC模式

JDBC - 开发实例 - MVC模式  1. 在web.xml中配置连接数据库的信息 web.xml: <context-param> <param-name>server</param-name> //主机名 <param-value>localhost</param-value> </context-param> <context-param> <param-name>db</param-name&