JSP实战项目:学生信息管理系统的总结

前言

简单学习了一下JSP，不知道以后老师怎么教的，不过我是感觉到JSP的真谛还是Java，无论是按照MVC或者三层模式，一般Control层都是servlet来写，Model层都是用纯java来写，当然，在JSP文件中，也是可以进行这些操作的，毕竟在JSP的<%…%>中完全可以写java代码，而servlet的本质就是java的一个类。但是一般在开始时总是界面与逻辑分开，否则整个项目结构混乱，代码冗余。所以我觉的学JSP本质还是学java，学servlet。

正文

整个项目差不多就包含学生信息的增删改，准备添加一个文件上传，不过还没添加，嘿嘿嘿。后面再说。

在这个过程中我遇到了不少问题，下面我就想起什么就讲什么吧~

前端部分

1. 前端完美居中之flex布局：

在登陆界面这种只需要一个div完美居中的情况，flex布局是在一个不错的方法：

body{
    display:flex;//设置body为flex布局
    justify-content:center;	//设置布局主轴上的对齐方式为居中
    align-items:center;//设置另一轴的对齐方式为居中
}

这种布局下，body里的内容就会完美居中。

另外在回顾一下flex布局里的所有属性：

• 容器属性

  1. flex-direction:　决定主轴的方向，即项目排列的方向，有四个可能的值：row(默认)|row-reverse|column|column-reverse
  2. flex-wrap:默认情况下，item排列在一条线上，即主轴上，flex-wrap决定当排列不下时是否换行以及换行的方式，可能的值nowrap(默认)|wrap|wrap-reverse
  3. flex-flow:flex-direction和flex-wrap的简写形式，如：row wrap|column wrap-reverse等。默认值为row nowrap，即横向排列 不换行。
  4. justify-content:决定item在主轴上的对齐方式，可能的值有flex-start（默认），flex-end，center，space-between，space-around。
  5. align-items:决定了item在交叉轴上的对齐方式，可能的值有flex-start|flex-end|center|baseline|stretch
  6. align-content:该属性定义了当有多根主轴时，即item不止一行时，多行在交叉轴轴上的对齐方式。注意当有多行时，定义了align-content后，align-items属性将失效。

• 容器属性

  1. order：order的值是整数，默认为0，整数越小，item排列越靠前。
  2. flex-grow：定义了当flex容器有多余空间时，item是否放大。默认值为0，即当有多余空间时也不放大；可能的值为整数，表示不同item的放大比例
  3. flex-shrink：定义了当容器空间不足时，item是否缩小。默认值为1，表示当空间不足时，item自动缩小，其可能的值为整数，表示不同item的缩小比例。
  4. flex-basis：表示项目在主轴上占据的空间，默认值为auto，其可为具体数值(px)。
  5. flex：flex属性是flex-grow、flex-shrink和flex-basis三属性的简写总和。
  6. align-self：　align-self属性允许item有自己独特的在交叉轴上的对齐方式，它有六个可能的值：auto|flex-start|flex-end|center|baseline|stretch。默认值为auto。

2. 前端onsubmit属性

这个属性真有点用~这个属性是用在submit按钮上的，他可以在你提交表单之前进行数据的审核。在审核通过后再上传，如果审核不通过，则不提交。具体代码如下。

//表单部分
<input type="submit" value="提交" onsubmit="return check()">

//JS部分
function check(){
    //执行判断，注意要返回一个boolean值，该值来确定是否需要提交表单	
}

3. Jquery的ajax请求

由于原生JS的ajax请求有点负载，所以我还是采用了jquery。所以还是具体介绍一下jquery的ajax请求。

1. $(“#id”).load(url,data,function(response,status,xhr))

这种请求方法可以直接将请求到的数据添加到指定元素中（其本质还是get()方式）。

url：（必选）请求的地址

data:（可选）要发送的数据,采用键值存储发送，多个数据时采用花括号：{key1:value1,key2:value2}

function():（可选），在服务器反馈后执行的函数。

response：服务器返回的数据

status：服务器返回的status值

xhr：服务器返回的xhr对象

2. $.get(url,data,function(response,status,xhr)

这个基本的get请求，get()只请求数据，不对数据做任何处理。

但是jquery将jsonp也封装进了get方法中，所以我们再调用get方法时，可以使用jsonp进行传输，但一般是是直接传字符串:

$.get(url,data,function(data,status,xhr){})

如果需要使用JSONP来请求，需要再声明：

$.get(url,data.function(data,status,xhr){},"JSONP")

关于JSON与JSONP，可以看一下这一篇文章，还是比较易懂。

3. $.get(url,data,function(response,status,xhr)

回顾一下，get与post：

get:

• 数据追加到url中传输，因此保密性较差，直接可视化，不适用于账户，密码等信息的传输。
• 由于url的限制，也不适用于较长数据的传输，一般url的数据量在1KB左右。
• 由于使用url直接传输，因此传输效率会比post方式高。

post：

• post是将数据封装为HTTP消息发送给服务器，这样做有以下优点：
• 数据传输量相较于get()方法得到提升，一般文件传输都是利用该方法
• 数据保密性得到一定性的保护，无法直接获取，但需要注意的是，通过抓包，任然可以获得post提交的所有数据。所以我们在传输密码时，一般是通过加密传输，不传明文密码。这一点，在HTTPS中得到了较好的解决。但是HTTPS需要申请且价格昂贵，所以目前对于数据的加密任是最好方法。

4.$.ajax({ type:”get”,url:”url”,data:””,async:true,function(data,status,xhr){} })

注意：async即异步，一般默认是true，即，你删掉async这个选项，则默认为true，还记得ajax的含义么：

Asynchronous JavaScript and XML

第一个就是async，所以如果是false，就没意义了对吧，不过也许有的情况有用，了解到就好。

5. $.getJSON(url,data,function(response,status,xhr)

我觉得这是jquery中最好用的一个方法了，因为他将请求到的JSON字符串直接转换为JSON对象了，直接用key和value属性就可以使用了，舒服的板~

4. JS的cookies的使用

之前一直是使用的localStorage或者sessionStorage来存储数据，使用这个就很便捷，直接使用key来取value值就行了，我好像还有一个专门的文章来介绍，不过最终好像还是cookies使用的较多一点，可能是兼容性的原因，然年后我发现cookies的使用比localStorage要复杂一些，所以还是看一下：

设置cookie：

function setCookie(cname,cvalue,exdays)
{
  var d = new Date();//实例化一个时间
  d.setTime(d.getTime()+(exdays*24*60*60*1000));//设置过期时间的变量
  var expires = "expires="+d.toUTCString();//将Date()对象转化为数组
  document.cookie = cname + "=" + cvalue + "; " + expires;//设置cookie
}

获取cookie值：

function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');//分割cookie字符串
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();//去除空格
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }//搜索是否存在该cookie，是则返回值
  return "";
}

注意：可以看出，JS的cookie的API设计似乎没有localStorage那么友好，毕竟很多年前的东西了。所以document.cookie是直接获得整个cookie，以键值对用”=”连接起来，具体获得对应的值还需要我们自己来处理字符串，emmmm，从体验上来说，没有那么友好，但还有一点值得注意的是，document.cookie是一个方法，当你对他进行赋值操作的时候。他是直接识别”=”添加键值，而对其进行取值的时候，是以字符串返回所有的cookie值。

上面获取cookie的方法不是唯一的，因为处理字符串的方式不是唯一的，包括正则也是不错的方法

后端部分

1. 关于MVC的理解我觉得也是学到的一部分，即将视图，模型，控制分离，而且无论是哪种设计方式，最终目的是保证层次的清晰。这样无论是对一次开发还是重构，都是及其重要的。

2. 另外对于JSP这门后端语言，我觉得要理解其精髓，还是要学习servlet，java。因为model，controller层，一般都是采用servlet或者java来开发，似乎很少有用JSP来写逻辑层面的东西的。

3. 在开发时我遇到了一个BUG卡了我好几天，搜索也没有结果，知道我理解其原因，啧啧啧：

我用java写好后端数据库交互层后，直接写了mian函数进行测试，成功！但是在我使用JSP文件发送ajax请求时，后端文件报错，无法找到sql驱动文件，我检查了sql文件，确实是在Java Resource的library中，并且直接运行java文件也通过了。。。搜索了很久，突然想到既然是javaweb程序，是不是在调用库文件时时使用的WebContent->WEB-INF->lib下的库文件，而不是调用java的库文件。我直接将sql驱动添加到javaweb的库中。nice，运行成功！

4. 关于eclipse的问题，在测试的某一段时间，发现整个工程没有更新了，修改了代码也没有用，以前也发生过，一般重启一下server就ok了，可这次重启也没用，没办法，清除缓存把，我直接清除了工程的缓存。然后。。。就是java程序无法运行，一直报错：无法找到main函数入口。在网上看到很多这种情况，但一般都说是classpath设置不对，但我另一个工程却可以运行，所以明显不是这种情况，然后我看到了这篇文章
   我按照第二条的方法，发现我有个库文件报错，直接移除，ok，解决（可是这和我的main函数有什么关系呢？？？）

5. 最后在java那些库文件的语法方面我就不再BB了，反正是固定的API，按文档写就OK（其实是我懒，哈哈哈）~~~

最后

最后我觉得我还是有个大问题，那就是变量的命名问题。。。This is a problem。很多不规范，这个在我以后的实践中尽量解决，比如~写个文档啊，哈哈哈。

所以这个项目就告一段落，前端的框架看一下就开学了~~~只能开学去看Python的GUI编程了~