web项目笔记

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.配置虚拟主机
                <Engine name="Catalina" defaultHost="www.estore.com">
                <Host name="www.estore.com"  appBase="D:\java1110\workspace\estore" unpackWARs="true" autoDeploy="true">
                    <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs"
                           prefix="localhost_access_log." suffix=".txt"
                           pattern="%h %l %u %t &quot;%r&quot; %s %b" />
                           
                    <Context path="" docBase="D:\java1110\workspace\estore\WebRoot"/>

                  </Host>
                  
            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中添加一个请求转发操作
            <jsp:forward page="/home.jsp"/>
            
        2.在home.jsp页面上添加一个注册的连接。
            <a href="${pageContext.request.contextPath}/regist.jsp">注册</a>    
            
        3.创建一个regist.jsp页面
            页面上有
                1.username
                2.password
                3.email
                4.nickname
                
                还需要一个repassword 确认密码
                还需要一个验证码
                
        4.在页面上产生验证码
            1.将new_words.txt复制到WEB-INF目录下.
            2.在regist.jsp页面上
                <img src="${pageContext.request.contextPath}/checkImg" οnclick="change();" id="cimg">
            注意编码问题.
                
        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.在<form οnsubmit="return checkForm();">
                2.校验，只校验非空.
                    function checkNull(fieldName){
                        var value = document.getElementById(fieldName).value;

                        var reg = /^\s*$/; //代表0个或多个空字符。        

                        if(reg.test(value)){
                            document.getElementById(fieldName+"_message").innerHTML="<font color='red'>"+fieldName+"不能为空</font>";
                            return false;
                        }else{
                            return true;
                        }
                    }
            2.服务器端校验
                在javaBean中做一个校验方法
                    public Map<String, String> validation() {
                        Map<String, String> map = new HashMap<String, String>();
                        if (username == null || username.trim().length() == 0) {
                            map.put("regist.username.error", "用户名不能为空");
                        }
                        if (password == null || password.trim().length() == 0) {
                            map.put("regist.password.error", "密码不能为空");
                        }
                        return map;
                    }
                    
                在通过BeanUtils将请求参数封装到javaBean后，调用校验方法.
                如果判断Map集合中有数据，说明存储了错误信息，就跳转到regist.jsp页面。
                在页面上展示错误信息，使用jstl标签。
                
                
                
        7.关于发送激活邮件
            邮箱 duhongabcdef@163.com
            密码  abc123
            
            关于激活邮件发送我们在UserService中的regist方法中完成。
            
            关于MailUtils工具使用:
                    1.props.setProperty("mail.host", "自己邮箱的smtp");
                    2.return new PasswordAuthentication("邮箱帐户", "密码");
                    3.message.setFrom(new InternetAddress("发送者邮箱"));
            
                注意:关于发送的信息问题:
                String emailMsg="注册成功，
                    请<a href='http:/