web项目
1.关于web项目目的:
将web阶段所有学过的知识点复习总结.
2.关于web项目功能:
功能:
1、用户注册
2、用户登录
3、添加商品(上传)
4、商品查看-- 列表查询
5、商品详情页面
6、将商品添加购物车
7、查看购物车
8、修改购物车
9、生成订单
10、订单查看(取消)
11、在线支付
12、销售榜单查看
会对项目进行重构.
会使用注解+动态代理实现细粒度权限控制.
添加关于ajax操作
对于订单操作时,使用ajax
在线支付功能
3.系统分析
1.通过UML用例图来确定当前用户以及所具有的功能
游客(未登录): 注册、登陆、商品查看
商城注册用户 : 商品查看、添加商品到购物车、购物车管理、生成订单、订单管理、在线支付
管理员 : 添加商品、商品管理、查看订单 、榜单查看(导出)
2.系统设计
1.技术选型
JSTL + JSP + Servlet + JavaBean + BeanUtils + FileUpload + JavaMail + DBUtils(JDBC) + C3P0 + MySQL + MyEclipse10+ Tomcat7.0 + JDK6 + Windows
MVC 模式
JavaEE 三层结构
DAO 模式
2.数据库设计
E-R图 实体关系图.
对于我们当前项目有这些实体 用户 商品 购物车 订单
通过E-R图可以分析出我们数据库中表与表之间的关系,以及每一个表中的属性。
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;
--------------------------------------------------------------------
4.环境搭建
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.创建包结构
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
UML中类图画法
4.工程发布
将estore项目配置虚拟主机,以顶级域名方式进行发布
在浏览器上直接输入www.estore.com就可以访问到我们的工程.
1.在tomcat的conf目录下的server.xml文件中配置
1.修改tomcat的端口 80.
2.配置虚拟主机
3.在C:\Windows\System32\drivers\etc\hosts文件中配置
127.0.0.1 www.estore.com
注意:在启动tomcat时,不需要将工程estore工程部署到tomcat.
=========================================================================================
功能实现:
1.注册操作
1.一次性验证码
2.表单的js校验(非空校验)
服务器端的校验
3.全局编码过滤器
4.密码md5加密
5.发送激活邮件
6.通用错误页面配置
2.实现注册功能
1.修改静态页面
直接创建一个jsp,将page.html页面内容复制到home.jsp页面.
在index.jsp中添加一个请求转发操作
2.在home.jsp页面上添加一个注册的连接。
注册
3.创建一个regist.jsp页面
页面上有
1.username
2.password
3.email
4.nickname
还需要一个repassword 确认密码
还需要一个验证码
4.在页面上产生验证码
1.将new_words.txt复制到WEB-INF目录下.
2.在regist.jsp页面上
注意编码问题.
5.完成注册的流程
regist.jsp---->RegistServlet-----UserService UserDao
关于用户的role与state
对于注册的用户它的role我们默认设置为"user",state默认设置为0 代表没有激活,
对于激活码,我们在注册时,要生成。通过uuid生成.
注册成功后跳转到 regist_success.jsp页面,在页面上显示3秒后跳转到首页.
问题:
1.怎样让3秒数字变化.
通过js代码来完成
var interval;
window.onload = function() {
interval = window.setInterval("fun()", 1000); //设置1秒调用一次fun函数
};
function fun() {
var time = document.getElementById("s").innerHTML;
//判断如果等于0了,不在进行调用fun函数,
if (time == 0) {
window.clearInterval(interval);
return;
}
document.getElementById("s").innerHTML = (time - 1);
}
2.关于乱码处理
使用全局的编码过滤器
EncodingFilter完成post与get请求的编码处理.
6.关于注册操作的校验问题
1.表单校验
就是通过js代码完成.
1.在