学生信息管理系统----创建项目及验证码生成

创建项目

  打开eclipse，创建一个空的项目：
  依次进行：File–>New–>Dynamic web project，出现以下弹窗。

  输入项目名称StudentManagerWeb，一直next，到了创建项目的最后一步在这里打上勾，点击Finish。

  项目结构如下：
      
src：java文件
WebContent：存放前端的目录，如CSS文件，JS，JSP文件等。
lib：存放jar文件。

导入网页模板

  将素材解压，将easyui，h-ui和index.jsp复制到WebContent目录下。其中index.jsp是网页打开默认访问的页面。打开之后可以看到这样的一句代码：

<jsp:forward page="/WEB-INF/view/login.jsp"></jsp:forward>

  即访问到这个index.jsp之后，会重定向到view/login.jsp页面。

  为什么会默认访问到index.jsp呢？
  我们可以打开WEB-INF目录下的web.xml，里面内容为：

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>StudentManagerWeb</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
</web-app>

  表示WebContent目录下，如果存在index.html，启动之后，那么就会优先访问index.html页面，是按照从上到下的顺序来进行访问，在我们的案例中，文件夹下不存在index.html和index.htm，所以默认访问的页面是目录中存在的index.jsp页面。若都没有这些文件，那么在访问时会报一个404的错误。
  因为用不着上面的部分代码，我们可以只保留一行，web.xml内部就只有以下这些了。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1">
  <display-name>StudentManagerWeb</display-name>
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

  因为view目录下并没有login.jsp，所以我们需要创建一个jsp文件。

  创建完成之后，我们在这个jsp的body中输入hello world 来验证。

  右击项目名称，选择Debug As ，选择第一项Debug on server，等待项目发布。
  此时发布之后，会在浏览器中显示刚刚body中的信息。

  接下来将模板复制到login.jsp中
  打开素材WEB-INF文件夹下的view，将login.jsp的内容拷贝到我们所创建的login.jsp的文件中。
  刷新浏览器可以看到这样的页面。

点击图片实现验证码的切换

  需要实现一个servlet的流程，即将用户行为传递到服务器，服务器对此行为作出一个响应。

• 创建包：com.ischoolbar.programmer.servlet
• 创建Servlet类：CpachaServlet，此类要继承HttpServlet。
• 在web.xml中配置

<servlet>
  	<description>验证码</description>
  	<servlet-name>CpachaServlet</servlet-name>
  	<servlet-class>com.ischoolbar.programmer.servlet.CpachaServlet</servlet-class>
  </servlet>
  <servlet-mapping>
  	<servlet-name>CpachaServlet</servlet-name>
  	<url-pattern>/CpachaServlet</url-pattern>
  </servlet-mapping>

• <servlet>标签：
• <description>标签：
• <servlet-name>标签：
• <servlet-class>标签：
• <servlet-mapping>标签：
• <url-pattern>标签：

  注意：<servlet>标签和<servlet-mapping>标签要成对存在。

  配置好之后，我们之后在浏览器中访问/CpachaServlet时，所有的请求都会对应到com.ischoolbar.programmer.servlet.CpachaServlet来进行响应。

  （1）测试CpachaServlet能否正常工作：

public class CpachaServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
	public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{
		res.getWriter().write("hello world");
	}
}

• HttpServletRequest request
• HttpServletResponse response

  测试一下：
  启动项目后，进入了默认的页面，我们在状态栏的后面加上CpachaServlet，即我们在web.xml中的servlet中配置的访问路径，回车进行访问，可以在页面上看到：
    
  说明我们已经可以访问CpachaServlet了。
  用户通过访问路径，通过配置文件将用户请求转送到了servlet文件里面，这个servlet接收到请求之后做出了一个回应，并输出在了浏览器页面中。

  （2）CpachaServlet代码完善：
  下面对代码再做一些修改：

public class CpachaServlet extends HttpServlet {
	private static final long serialVersionUID = 3198908369323678077L;
	public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{
		doPost(req,res);
	}	
	public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		res.getWriter().write("hello world");
	}
}

• doPost
  get

• doGet
  post

  以上代码是在doGet方法中调用了doPost方法，所以不论用什么方法进行提交，都能够进入到doPost方法中。

  考虑到代码的复用性，我们接下来定义一个工具类，用于生成验证码：
先定义一个名为com.ischoolbar.programmer.util的package，再定义一个名为CpachaUtil的工具类。

  （3）实现验证码功能
   ① Java代码：
  回到CpachaServlet，核心代码如下：

public class CpachaServlet extends HttpServlet {

	private static final long serialVersionUID = 3198908369323678077L;
	public void doGet(HttpServletRequest req,HttpServletResponse res) throws IOException{
		doPost(req,res);
	}
	public void doPost(HttpServletRequest req,HttpServletResponse res) throws IOException{
		String method = req.getParameter("method");
		if("loginCapcha".equals(method)){
			generateLoginCpacha(req, res);
			return;
		}
		res.getWriter().write("error method");
	}
	private void generateLoginCpacha(HttpServletRequest req,HttpServletResponse res) throws IOException{
		CpachaUtil cpachaUtil = new CpachaUtil();
		String generatorVCode = cpachaUtil.generatorVCode();
		// 创建的验证码，快速写到
		req.getSession().setAttribute("loginCapcha", generatorVCode);
		BufferedImage generatorRotateVCodeImage = cpachaUtil.generatorRotateVCodeImage(generatorVCode, true);
		ImageIO.write(generatorRotateVCodeImage,"gif",res.getOutputStream());
	}

②修改前端部分代码
  回到login.jsp，其中有两个部分与验证码相关。

• 一个是验证码的点击事件要触发CpachaServlet。
• 二是将请求发送到CpachaServlet。

<!--html 代码 -->
<div class="row cl">
     <div class="formControls col-8 col-offset-3">
          <input class="input-text size-L" name="vcode" type="text" placeholder="请输入验证码" style="width: 200px;">
          <img title="点击图片切换验证码" id="vcodeImg" src="CpachaServlet?method=loginCapcha">
     </div>
</div>

// JS代码
	$(function(){
		//点击图片切换验证码
		$("#vcodeImg").click(function(){
			this.src="CpachaServlet?method=loginCapcha&t="+new Date().getTime();
		});
	}

  这里的点击事件要触发，触发所指向的地址是CpachaServlet，因为我们要在这个Servlet中去处理请求。第二点，因为在CpachaServlet中String method = req.getParameter("method");一行用于获取请求中所携带的参数，就是这里的loginCapcha，用于判定这条请求是不是用来生成验证码的请求，如果是，就生成验证码并返回给前端页面。

修改之后进行保存，运行项目，可以看到验证码已经生成了。

web.xml其他的一些配置

  所有的servlet都需要在web.xml进行配置才能够使用。我们先打开web.xml进行配置，默认的404页面不好看，我们 可以先设置一下。
  打开web.xml在<web-app>的标签内添加以下代码：

  <error-page>
    <error-code>404</error-code>
    <location>/404.jsp</location>
  </error-page>
   <error-page>
    <error-code>500</error-code>
    <location>/500.jsp</location>
  </error-page>

  error-page：第一个指的是一旦发生了404错误，那么就跳转到404.jsp页面。第二个指的是发生了关于数据库的错误，就跳转到505.jsp页面。好看的页面可以提升用户体验。

  servlet 代表着业务逻辑的控制器。

 <servlet>
    <description>登录</description>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>com.lizhou.servlet.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/LoginServlet</url-pattern>
  </servlet-mapping>

servlet-name：表示servlet的名字是什么。
servlet-class：servlet所对应的java类是哪一个。
servlet-mapping：表示servlet的映射。
url-pattern：表示该servlet所对应的web访问路径。