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 将通过验证的注册信息持久化到数据库