MLPlatform开发日志

Posted lxrm的博客空间

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了MLPlatform开发日志相关的知识,希望对你有一定的参考价值。

step1,创建maven web project,

    • 参见教程(并没有完全根据该教程操作,具体操作过程有参见changkongProject)

step2,往项目中添加网上下载的若干view层模板

step3,在工程中添加“注册”页面/src/main/webapp/jsp/register.html,并且使用javascript和正则表达式+HTML的onSubmit事件对用户输入的信息进行合法性验证

    • 在/src/main/webapp/jsp/login.html  的基础上创建register.html
      • 主要是将<form>中的子标签改成如下形式:
        <form method="post" class="am-form">
              
              <label for="email">用户名:</label>
              <input type="text" name="" id="username" value="admin" maxlength="20">
              <br>
              <label for="password">密码:(请输入密码)</label>
              <input type="password" name="" id="password" value="">
              <br>
              <label for="password">请确认密码:(请再次输入密码)</label>
              <input type="password" name="" id="password" value="">
              <br>
              <label for="email">邮箱:</label>
              <input type="text" name="" id="email" value="请保证邮箱地址有效,便于密码找回">
              <br>
              
              <br />
              <div class="am-cf">
                <input type="submit" name="" value="注册" class="am-btn am-btn-primary am-btn-sm am-fl">
                <input type="reset" name="" value="重置 " class="am-btn am-btn-primary am-btn-sm am-fr">
              </div>
            </form>
    • 添加输入信息验证功能:
      • step1,在HTML页面的<form>标签中添加onSubmit事件
        <form .........  onSubmit="validate()">

        其中validate()是JavaScript函数,如下:

      • step2,编写JavaScript函数,并且嵌在HTML页面中
        <script language="JavaScript">
            /*使用HTML的onSubmit事件+JavaScript函数+正则表达式
                实现注册页面表单中各个标签对应的输入值的合法性
                规则:
                    用户名必须是使用数字、字母、下划线生成的
                    两次的密码输入必须一致
                    邮箱必须是合法的邮箱地址*/
              function validate(registerForm){
                  if(registerForm.password.value!=registerForm.passwordAssure.value){
                      alert("两次输入的密码不一致!");
                      registerForm.passwordAssure.focus();//让焦点定位到passwordAssure框
                      registerForm.passwordAssure.select();//选中passwordAssure框中全部内容
                      return false;
                  }
              
                  //验证用户输入的Email格式是否正确
                  var email=registerForm.email.value;
                  if(!/^\\w+@\\w+.\\w+$/.test(email)){
                      alert("EMAIL输入格式不正确!");
                      registerForm.email.focus();//让焦点定位到email框
                      registerForm.email.select();//选中email框中全部内容
                      return false;
                  }
                  
                  return true;
              }
          </script>

step4,为整个project添加全局错误处理页面

    • 编程思路:修改WebApp/src/main/webapp/WEB-INF/web.xml,在里面添加<error-page>标
        • <error-page>
                  <error-code>404</error-code>
                  <location>/html/errorpage/admin-404.html</location>
          </error-page>
            <error-page>
                  <error-code>403</error-code>
                  <location>/html/errorpage/admin-403.html</location>
              </error-page>
              <error-page>
                  <error-code>500</error-code>
                  <location>/html/errorpage/admin-500.html</location>
              </error-page>
              <error-page>
                  <exception-type>java.lang.NullPointerException</exception-type>
                  <location>/html/errorpage/admin-NullPointerException.html</location>
              </error-page>
           
    • 编程结果:使得整个工程中对相应的错误作出统一的处理
      • 如,不管是请求的哪个页面,只要请求的资源不存在时,都会自动调用 MLPlatform Maven WebApp/src/main/webapp/jsp/admin-404.html页面
      • 实际运行过程:只要服务器没有找到请求的资源,服务器就会抛出404错误,根据web.xml的配置,404错误会自动跳转到admin-404.html页面,在浏览器中展示该页面的内容
      • 再如,只要请求的资源超出自己拥有的权限,服务器就会拒绝处理,并抛出403错误代码,根据web.xml的配置,遇到服务器抛出403错误时,会自动跳转到/jsp/admin-403.html页面,并在浏览器展示该页面的内容
      • 再如,服务器内部发生了故障而不能相应用户的请求,服务器就会抛出500错误代码,根据上述web.xml中的配置,遇到服务器抛出500错误时,会自动跳转到/jsp/admin-500.html页面,并在浏览器展示该页面的内容
      • 再如,如果服务器代码运行过程中抛出了没有处理的NullPointerException异常,根据上述web.xml中的配置,遇到服务器抛出NullPointerException异常时,会自动跳转到/jsp/admin-NullPointerException.html页面,并在浏览器展示该页面的内容
    • 测试:浏览器地址栏故意输入一个不存在的URL,结果如下:

step5,为整个web project添加数据库

    • 使用mysql数据库
    • 管理员身份运行DOS ——————执行 mysql -u root -p ------>输入密码
    • 创建新的数据库:create database mlplatform;
    • 在上述数据库中添加userInfo表格,并且为该表格添加一条测试数据(用户administrator的相关信息)
      • 将myeclipse中userInfo.sql拷贝到d:
      • 在DOS下执行source d:/userInfo.sql 
    • 经历了上述操作之后,就已经在MySQL中建立了一个数据库mlplatform,并且在该数据库中添加了userInfo表格,后面我们的web project就使用这个数据库 
    • 备注:如何让自己的web project使用mysql数据库?
      • step1,首先确保你的计算机上拥有mysql软件环境
      • step2,在mysql中创建你这个web project中想要使用的数据库,如本例中创建的mlplatform数据库
      • step3,下载你的mysql的驱动程序(一个jar包),并且将它放置在Tomcat安装目录下的/lib文件夹下,重启Tomcat

          •       
      • step4,在你的web project中编写程序使用mysql数据库
        • 使用的数据库驱动程序是mysql数据库驱动
        • 使用的数据库(如mlplatform)是在mysql中创建的数据库
        • 使用的用户名和密码是连接mysql的用户名和密码
        •   

step6,替换myeclipse中集成的原有的部署了changkongProject的Tomcat服务器,替换为计算机中安装的另一个Tomcat服务器,并且将MLPlatform Maven Project部署到替换后的Tomcat服务器上

    • 具体操作过程参见博客  
    • 备注:如何让你的web project使用Tomcat?
      • 首先确保你的计算机中已经正确安装了Tomcat
      • 其次应该将该Tomcat集成到myeclipse中
      • 之后将你的web project部署到Tomcat上
      • 启动Tomcat
      • 浏览器访问你的web project  

step7,20170414,重构用户注册页面,将其由html页面变成JSP页面

    • 原本是src/main/webapp/jsp/register.html
    • 改成 src/main/webapp/jsp/user/register.jsp页面
    • 不仅将html页面改成JSP页面,还变换了文件的存放路径,所以要改动页面代码中引入的amazeui.min.css ,  favicon.png的位置
    • 修改了该页面中的form标签,使其action=“UpdateDatabase.jsp”
    • src/main/webapp/jsp/user/UpdateDatabase.jsp页面中使用jdbc相关API来操作mysql数据库,企图将用户注册信息添加到mlplatform数据库的userInfo表格中

step8,20170417,添加用户注册信息持久化页面和读取数据库数据生成用户列表页面

    • 在JSP页面中直接使用java.sql.*中提供的API操作mysql数据库mlplatform
    • 将src/main/webapp/jsp/user/register.jsp页面中填写的注册信息,保存到数据库mlplatform的userInfo表格中
    • 并且在JSP页面中使用相应的API读取数据库userInfo表中的信息,生成用户列表,并在该JSP页面中进行展示
    • 相应程序:
      • src/main/webapp/jsp/user/UpdateDatabase.jsp  ,将注册页面填写的信息保存到数据库中
      • src/main/webapp/jsp/user/UserList.jsp,从数据库中读取用户数据,生成用户列表并在JSP页面中以table的格式展示出来

 step9,20170419,为自己的web project的*.jsp页面集合添加header.jsp   toolbar.jsp   footer.jsp,那么以后再添加新的*.jsp时就可以重用这些页面头、工具栏和页面尾了

    • 思想:
      • 从所有页面中抽离出头部、尾部和工具栏,这样再次添加新的*.jsp时就可以直接在自己的*.jsp中动态包含(或静态包含)这些独立的代码文件(页面头、尾、工具栏对应的文件)
      • 一来可以避免重复造车轮(即避免重复编写相同代码)
      • 二来增加程序的可维护性:如后来某一时刻想要改造一下工具栏格式甚至内容,只需在toolbar.jsp中作出相应修改即可,不用依次修改所有*.jsp页面  
    • 具体编程实现:
      • Myeclipse---MLPlatform Maven Webapp/src/main/webapp/jsp下添加了一个新的文件夹/components  ,这个文件夹下专门存放可重用的JSP页面代码,如这次所添加的header.jsp  toolbar.jsp   footer.jsp
      • header.jsp  页面头部
      • toolbar.jsp  页面工具栏
      • footer.jsp   页面尾部

step10,20170419,在step9所做的工作的基础上,修改MLPlatform Maven Webapp/src/main/webapp/jsp/user/UserList.jsp页面

    • <%@ page language="java" contentType="text/html; charset=UTF-8"
          pageEncoding="UTF-8"%>
      <%@ page import="java.sql.*" %>
      <%@ page import="java.util.Date" %>
      <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <title>在JSP中直接操作数据库:获取userInfo表格内容,展示成table</title>
      <link rel="alternate icon" type="image/png" href="../../img/favicon.png"/>
      <link rel="stylesheet" href="../../css/amazeui.min.css"/>
      <link rel="apple-touch-icon-precomposed" href="../../image/app-icon72x72@2x.png"/>
      <link rel="stylesheet" href="../../css/admin.css"/>
        <style>
          .header {
            text-align: center;
          }
          .header h1 {
            font-size: 200%;
            color: #333;
            margin-top: 30px;
          }
          .header p {
            font-size: 14px;
          }
        </style>
      </head>
      <body>
          <jsp:include page="../components/header.jsp"/>
          <jsp:include page="../components/toolbar.jsp"/>
      
      
      <%--start of contents--%>
           参照admin-table.html页面编写本页面的table的展示样式
      
      <%--end of contents--%>
      <jsp:include page="../components/footer.jsp"/>
      
      </body>
      </html>
    • 使用<jsp:include>标签动态包含其他文件到本JSP页面(如本例中就动态包含了footer.jsp  header.jsp   toolbar.jsp)

    • 这样一来可以避免重复编写上述三个文件的代码  

step11,20170420,修改或添加相关页面,使得用户登录时,查询数据库mlplatform的userInfo表格,如果用户输入的用户名在该表格中存在,且密码与用户名相匹配,则跳转到“管理平台页面”,否则跳转到错误页,指明用户输入的信息错误,并给出重新登录的链接

    • 设计原则:
      • 不包含java代码的页面就设计成*.html,包含java代码的页面才设计成*.jsp
      • 至于为何这么设计?因为动态页面请求和静态页面请求的响应方式不同,动态页面响应速度相对于静态页面响应速度而言较低,所以能用*.html的就不要用*.jsp
    • 设计思路:

      • 实际实现时,将上述login_check.jsp替换成了checkDatabase.jsp。并且添加了logout.jsp页面  
    • 编程实现: 
      • login文件夹下的所有文件

 

step12,20170424.通过向客户端添加Cookie对象的方式,实现“记住用户名和密码,七天内免登陆”的功能

    • 原理:服务器端可以向客户端添加一些Cookie对象,并且设置这些Cookie对象的生存时间,这些Cookie对象可以保存在客户端机器上,这样一来客户端机器就可以随时取用这些Cookie信息。
    • 编程思路:
      • step1,用户输入登录信息,并且通过数据库验证之后,判定其为合法用户,跳转到login_success.jsp页面,在该页面通过request对象获取login.jsp页面输入的用户名和密码,使用这些数据创建Cookie对象,并且用response对象将这些新建的Cookie添加到客户端机器上。具体代码如下:
        <%@page contentType="text/html" pageEncoding="GBK"%>
        <%@page import="javax.servlet.http.Cookie" %>
        <html>
        <head><title>www.mldnjava.cn,MLDN高端Java培训</title></head>
        <body>
        <center>
        <h1>登陆操作</h1>
        <h2>登陆成功</h2>
        <h2>
            欢迎<font color="red"><%=request.getParameter("uname")%></font>光临!
            请点击此处进行注销<a href="logout.jsp">注销</a>
        </h2>    
            <%
                /*这段程序用于记住用户名和密码,使得下次该用户可以免登陆
                  编程思路:使用request对象获取登陆页面输入的用户名和密码;
                          然后创建Cookie对象,存储用户名和密码
                          之后使用response对象将上述包含有用户名和密码信息的cookie对象添加至客户端
                          
                */
                Cookie usernameCookie=new Cookie("username",request.getParameter("username"));
                Cookie passwordCookie=new Cookie("password",request.getParameter("password"));
                /*如果不加此代码,那么该cookie只是保存在客户端浏览器上,浏览器关闭后该cookie就消失了
                   只有添加了此行代码,该cookie才会保存在客户端机器上
                */
                usernameCookie.setMaxAge(604800);//保存604800s=7day
                passwordCookie.setMaxAge(604800);
                response.addCookie(usernameCookie);
                response.addCookie(passwordCookie);
             %>
        
        
        </center>
        </body>
        </html>
      • step2,在login.jsp页面,先检查客户端机器中是否有相应的Cookie,如果有,就将form表单中相应标签的默认值赋值成Cookie中相应值,如果没有,就需要用户亲自输入。具体代码如下:     

    • 上述实例的运行机制:

      • 用户第一次通过UserLogin.jsp登录该网站时,如果用户输入的用户名和密码通过了数据库的验证,则跳转到login_success.jsp页面,并且在该页面通过request获取用户输入的用户名和密码,并用他们生成新的Cookie对象(一定要设置该Cookie的生存时间)

      • 之后使用response.addCookie(Cookie)将上面新建的Cookie对象添加到客户端机器上  
      • 之后用户再次使用该客户端机器登录我们的网站的时候,都会将客户端机器上保存的Cookie信息一并发送到服务器上
      • 服务器端使用request.getCookies()可以获取客户端机器上曾经保存的Cookie信息,如果客户端机器上保存的Cookie中包含曾经输入的用户名和密码,那么就可以获取该用户名和密码,并且将Cookie中的用户名和密码作为UserLogin.jsp页面相应标签的默认值

step13,20170424,将原有的manageplatform.html改造,抽离出header.jsp,footer.jsp

    • 改造结果:
      • 文件夹下部分内容,包括:
      • /PartOfAPage子文件夹下的所有内容,该文件夹下的文件是页面头部、页面尾部、页面工具栏独立而成的文件

      •  

        使用上述独立文件+页面具体内容===>组装成ManagePlatformDashBoard.jsp页面  
      • 修改上述所得 ManagePlatformDashBoard.jsp页面,添加Cookie相关程序,并修改jsp/login/UserLogin.jsp页面中的相关链接,使得登陆成功后跳转到ManagePlatformDashBoard.jsp页面,由此login-success.jsp页面被废弃。 

step14,20170502,尝试在使用javabean将jsp页面中的html标签和java代码分离,提高代码的可重用性以及可维护性

    • step1,编写javabean,即
      package test;
      
      public class TestJavaBean {
      
          private String name;
          public void setName(String name){
              this.name=name;
          }
          public String getName(){
              return this.name;
          }
      }
    • step2,在*.jsp中使用上面定义的javabean

      • (未使用)方法一,可以使用<%@page import=""%>   来引入上述javabean,然后在scriptlet中声明一个该类的对象并使用

      • (使用)方法二,可以使用<jsp:javaBean >标签来引入上述自定义的javabean,然后在scriptlet中直接使用该标签声明的javabean实例,如下代码
          • 方法二对应的代码:
            <html>
            <head><title/>
            </head>
            <body>
                This is my JSP page. <br>
                <jsp:useBean id="test" scope="page" class="test.TestJavaBean"/>
                <%
                    test.setName("lxrm");
                    String name=test.getName();
                 %>
                 <h1><%=name %></h1>
              </body>
            </html>
    • step3,由于每次新定义了一个javabean之后,都需要重启Tomcat才能生效,非常不方便,所以要在Tomcat安装目录的server.xml中进行相关的配置,使得每次重新定义一个javabean之后,不需要重启Tomcat,具体配置方式如下:

      开发模式下降reloadable置为true,但是项目部署的时候一定要将其置为false,否则会影响网站服务器响应速度。

    • 可能出现的bug:

        • bug1,上述步骤都进行完之后,就可以启动Tomcat,并且通过浏览器访问test/testJavaBean.jsp页面,看看我们自定义的javabean是否被成功引入相应的Jsp页面,但是访问时可能报错,说找不到我们定义的javabean,经过排查发现是因为我们的*.java文件并没有被编译,修改相应的配置后该bug被解决:项目名--》右键----》properties---》java build path

step15,20170502,修改之前的注册页面

    • 目标:
      • 在Jsp中引入javabean,使得代码被进一步分离
      • 完善注册、验证功能:
        • 用户在表单中填写相应信息(用户名、密码、email等),进行注册;
        • 表单提交前要进行输入验证:
          • 用户名必须是合法的标识符
          • 两次输入的密码必须一致
          • email格式必须一致
          • age必须是一个有效的数值
      • 如果用户输入正确,则跳转到相应页面,并且显示注册信息,
      • 如果用户输入不正确,则在错误的地方进行提示,并且将正确的部分保留下来
    • 参考程序:《java web开发实战经典.pdf   P200》  
    • 实际编程实现:
      • step1,修改了register.jsp页面,将JavaScript中对输入进行验证改为在javabean中对输入内容进行格式验证  
      • step2,添加了Register.java这个javabean,这个javabean中定义了和register.jsp表单标签同名的类属性及其对应的setter和getter方法,
      • step3,并且在Register.java这个javabean中添加了相应的成员方法来验证表单标签输入的内容是否合法
      • step4,在register.jsp页面中实例化Register这个javabean,并且调用其中的方法
      • step5,register.jsp页面的<form action="CheckInputs.jsp">,在CheckInputs.jsp中使用Register对应的javabean实例将表单标签值赋值给该javabean实例,并且调用isValidate()函数验证输入数据是否满足格式要求,若满足,则跳转到UpdateDatabase.jsp,否则跳转到register.jsp页面,并且显示错误提示
      • 具体程序:
        register.jsp 注册页面+显示错误信息
        Register.java javabean(setter、getter+isValidate()+getErrorMsg())
        CheckInputs.jsp

        获取register.jsp中的表单标签的值,并且自动匹配javabean中相应属性,自动调用相应setter函数为属性赋值

        调用javabean实例的isValidate()函数进行输入验证

        根据isValidate()函数的返回值决定跳转的目的页面,若输入没有错误,则跳转到UpdateDatabase.jsp

        若输入有错误,则跳转到register.jsp

        UpdateDatabase.jsp 将通过验证的注册信息持久化到数据库