JAVA WEB快速入门之从编写一个JSP WEB网站了解JS…

2018-11-13 07:34:10来源：博客园阅读 ()

接上篇《JAVA WEB快速入门之环境搭建》，在完成了环境搭建后（JDK、Tomcat、IDE），现在是万事具备，就差写代码了，今天就来从编写一个JSP WEB网站了解JSP WEB网站的基本结构、调试、部署，至于为什么要先写JSP WEB，而不是直接上SSM(Spring、SpringMVC、Mybatis)，原因很简单，先得了解基础，再由浅入深，这是我的学习方法，如果一开始就写MVC，那么顶多也是照葫芦画瓢，很难深入，因为不知道原理，就无法扩展与灵活运用。好了废话不多说，开始本文的主题。

一、使用eclipse初始化一个JSP WEB项目(即：动态WEB项目)，步骤如下：

如上图示注意选择TOMCAT版本

如上图示勾选生成web.xml，当然如果不勾选也行，但后续如果有需要用到配置的地方就需要再单独添加，故这里我选择一并生成。

最后点击finish按钮即可生成WEB项目

WEB项目的结构如下图示，每个部份都有说明，该图引用自网络

如上步骤也可参考更详细的教程：http://www.runoob.com/jsp/eclipse-jsp.html

二、编写一个登录静态页面（login.html），注意静态页面（html）、动态页面(jsp)均应在WebContent目录下创建

后面采取默认即可，最后创建好空的login.html，然后写如下示例代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>login</title>
</head>
<body>
	<form action="/demo2/servlet/login" method="post">
		<div>
			<label for="userid">UserID:</label> <input type="text" name="uid" />
		</div>
		<div>
			<label for="pwd">Password:</label> <input type="password" name="pwd" />
		</div>
		<div>
			<button type="submit">Enter</button>
		</div>
	</form>
</body>
</html>

三、编写服务端处理逻辑类（LoginServlet），该类必需继承自HttpServlet，并按需重写相关的请求方法，例如此处是：doGet（处理GET请求）、doPost（处理POST请求）

自定义的Servlet类统一放在src目录下，按照JAVA 标准以包、类层级呈现

如上图示，包名一般是域名的反写，大家可能看到下面还有一个创建package-info.java的勾选项，具体用法可参考：PACKAGE-INFO.JAVA 作用及用法详解

创建好LoginServlet类后，编写如下代码：（主要是doPost，用于处理登录请求）

package cn.zuowenjun.java;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet(name="LoginServlet",urlPatterns= {"/servlet/login"})
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	/**
	 * @see HttpServlet#HttpServlet()
	 */
	public LoginServlet() {
		super();
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		response.getWriter().append("Served at: ").append(request.getContextPath());
	}

	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
	 *      response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		String uid = request.getParameter("uid");
		String pwd = request.getParameter("pwd");

		if (uid.isEmpty() || pwd.isEmpty()) {
			response.getWriter().append("the UserID and Passwrod cannot be empty!");
			return;
		}
		
		if(uid.equals("admin") && pwd.equals("java.web")) {
			HttpSession session= request.getSession();
			session.setAttribute("loginid", uid);
			String indexUrl= request.getContextPath()+"/jsp/index.jsp";
			response.sendRedirect(indexUrl);
			return;
		}
		else {
			response.getWriter().append("the UserID or Passwrod is wrong!");
		}
		

	}

}

servlet部署（映射）有两种方式，一种是在web.xml中使用如下配置：

  <servlet>
    <servlet-name>LoginServlet</servlet-name>
    <servlet-class>cn.zuowenjun.java.LoginServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>LoginServlet</servlet-name>
    <url-pattern>/servlet/login</url-pattern>
  </servlet-mapping>

另一种方式是使用注解，在servlet类名上方使用@WebServlet注解，在里面设置参数，如下：

@WebServlet(name="LoginServlet",urlPatterns= {"/servlet/login"})
public class LoginServlet extends HttpServlet {

... ...
}

这样登录页面的前后端交互写完了，如果登录成功则跳转至index.jsp页面，否则直接输出错误信息，下面就写index.jsp（动态页面）：

四、编写index.jsp（动态页面），我这里将所有jsp页面统一放在jsp目录中，以区分静态页面与动态页面，创建jsp页面的方法与创建静态页面方法基本相同，只是创建类型选择jsp File即可，在此不再重复介绍。

创建好空的index.jsp页面后，编写从SQL SERVER DB中获取表数据并显示在页面上的逻辑（即：查询数据），代码如下：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.SQLException"%>
<%@page import="java.sql.Statement"%>

<%!/*从SQL SERVER中获取测试数据*/
	private ResultSet getTestData(String sql) {
		try {
			Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
			Connection sqlConn = DriverManager.getConnection(
					"jdbc:sqlserver://xxxxxxx;DatabaseName=testDB", "dbuser", "password");
			Statement statement = sqlConn.createStatement();
			ResultSet set = statement.executeQuery(sql);
			return set;
		} catch (Exception ex) {
			ex.printStackTrace();
			return null;
		}

	}%>

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Index页面</title>
<style type="text/css">
	table{border:solid 2px black;border-collapse:collapse;}
	table th{color:blue;background-color:orange;border:solid 1px gray;padding:3px;}
	table td{border:solid 1px gray;padding:3px;}
</style>
</head>
<body>
<%
ResultSet pageData=getTestData("select top 100 sys_guid,FormId,EventId,MaxElapsedTime,SlowTotalCount,LastSlowRequestTime,DisabedRequest from TS_ConfigLimitRequest");
int colCount=pageData.getMetaData().getColumnCount();
%>
<table>
	<tr>
		<%for(int i=1;i<=colCount;i++) { %>
		<th><%=pageData.getMetaData().getColumnName(i) %></th>
		<%} %>
		<th>操作</th>
	</tr>
	<%while (pageData.next()){ %>
	<tr>
		<%for(int i=1;i<=colCount;i++) { %>
			<td><%=pageData.getString(i) %></td>
		<%} %>
		<td><a href="edit.jsp?sysguid=<%=pageData.getString("sys_guid")%>" target="_blank">编辑</a></td>
	</tr>
	<%} %>
	
</table>

</body>
</html>

　JSP生命周期及相关学习教程，可参考：http://www.runoob.com/jsp/jsp-life-cycle.html　

如上代码，涉及第一个重点：引用第三方JAR包（如：SQL SERVER JDBC），如何引用步骤如下：

1.先下载所需的JAR包（如这里我需要SQL SERVER JDBC的JAR包，下载地址：https://docs.microsoft.com/zh-cn/sql/connect/jdbc/download-microsoft-jdbc-driver-for-sql-server?view=sql-server-2017）

2.下载后将JAR包复制到WebContent\WEB-INF\lib目录下，然后选中JAR包右键，选择buid path-->configure buid path，如下图示：

3.然后如下图所示在Libaraies下选择WebContent\WEB-INF\lib目录下的mssql-jdbc-7.0.0.jre8.jar包，最后点击应用即可。

可以从项目的依赖类库中看到刚添加的JAR包，如下图示：

涉及第二个重点：使用原生JDBC操作数据库，由于这块涉及的内容比较多，故我这里借别人的图来展示一下JDBC的完整结构，代码中也只是用到了最基本的查询：

五、编写edit.jsp页面，用于可修改记录或删除记录（即：增、删、改），同样参照index.jsp的创建步骤

创建好edit.jsp空页面后，编写如下代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="java.sql.*" pageEncoding="UTF-8"%>

<%
	Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");
%>

<%!  //全局定义区


/*从SQL SERVER中获取测试数据*/
	private Connection getConnection() throws SQLException {
		Connection sqlConn = DriverManager.getConnection("jdbc:sqlserver://172.20.3.31:3341;DatabaseName=LMSKYEXPRESS",
				"dev07", "A5CF@#4E90$%%1F048C96BF;");
		return sqlConn;
	}

	private ResultSet getItemData(String sql, String sysguid) {
		try {
			Connection sqlConn = getConnection();
			PreparedStatement stmt = sqlConn.prepareStatement(sql);
			stmt.setString(1, sysguid);
			ResultSet set = stmt.executeQuery();
			return set;
		} catch (Exception ex) {
			ex.printStackTrace();
			return null;
		}

	}

	/*执行SQL,使用事务*/
	private String executeSql(String sql, String[] params) {
		Connection sqlConn = null;
		try {
			sqlConn = getConnection();
			sqlConn.setAutoCommit(false);
			PreparedStatement stmt = sqlConn.prepareStatement(sql);
			for (int i = 0; i < params.length; i++) {
				stmt.setObject(i + 1, params[i]);//参数是从1开始
			}

			stmt.execute();
			sqlConn.commit();
			return "执行成功！";
		} catch (SQLException sqlEx) {
			if (sqlConn != null) {
				try{
				sqlConn.rollback();
				}catch(SQLException sqlExtrn){
					return "执行失败，且回滚事务失败，原因：" + sqlExtrn.getMessage();
				}
			}
			return "执行失败，原因：" + sqlEx.getMessage();
		} catch (Exception ex) {
			return "执行失败，原因：" + ex.getMessage();
		}
	}

	/*是否FORM请求回调*/
	private Boolean isPostBack(HttpServletRequest request) {
		String postValue = request.getParameter("__formpost");
		if ("POST".equals(postValue)) {
			return true;
		} else {
			return false;
		}
	}%>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>edit页面</title>
</head>
<body>
	<%
		String execResult = "";
		if (isPostBack(request)) {
			String sysguid = request.getParameter("sysguid");
			String doAction = request.getParameter("doAction");
			String formId = request.getParameter("FormId");
			String eventId = request.getParameter("EventId");
			String maxElapsedTime = request.getParameter("MaxElapsedTime");
			String slowTotalCount = request.getParameter("SlowTotalCount");
			String lastSlowRequestTime = request.getParameter("LastSlowRequestTime");
			String disabedRequest = request.getParameter("DisabedRequest");
			 
			String sql=null;
			if("Save".equals(doAction)){
				sql = "update TS_ConfigLimitRequest set FormId=?,EventId=?,MaxElapsedTime=?,SlowTotalCount=?,LastSlowRequestTime=?,DisabedRequest=? where sys_guid=?";
				execResult = executeSql(sql, new String[] { formId, eventId, maxElapsedTime, slowTotalCount,
						lastSlowRequestTime, disabedRequest, sysguid });
			}else if("Delete".equals(doAction)) {
				sql="delete from TS_ConfigLimitRequest where sys_guid=?";
				execResult = executeSql(sql, new String[] { sysguid });
			}
			
		}

		String sysguid = request.getParameter("sysguid");

		ResultSet itemSet = getItemData(
				"select sys_guid,FormId,EventId,MaxElapsedTime,SlowTotalCount,LastSlowRequestTime,DisabedRequest from TS_ConfigLimitRequest where sys_guid=?",
				sysguid);
		if (!itemSet.next()) {
			out.println("不存在该条记录！");
			return;
		}
	%>
	<form method="post">
		<table>
			<tr>
				<td>FormId:</td>
				<td><input type="text" name="FormId"
					value="<%=itemSet.getString("FormId")%>" /></td>
			</tr>
			<tr>
				<td>EventId:</td>
				<td><input type="text" name="EventId"
					value="<%=itemSet.getString("EventId")%>" /></td>
			</tr>
			<tr>
				<td>MaxElapsedTime:</td>
				<td><input type="text" name="MaxElapsedTime"
					value="<%=itemSet.getString("MaxElapsedTime")%>" /></td>
			</tr>
			<tr>
				<td>SlowTotalCount:</td>
				<td><input type="text" name="SlowTotalCount"
					value="<%=itemSet.getString("SlowTotalCount")%>" /></td>
			</tr>
			<tr>
				<td>LastSlowRequestTime:</td>
				<td><input type="text" name="LastSlowRequestTime"
					value="<%=itemSet.getString("LastSlowRequestTime")%>" /></td>
			</tr>
			<tr>
				<td>DisabedRequest:</td>
				<td><select name="DisabedRequest">
						<option value=""
							<%if ("".equals(itemSet.getString("DisabedRequest"))) {%>
							selected <%}%>>-空-</option>
						<option value="true"
							<%if ("true".equals(itemSet.getString("DisabedRequest"))) {%>
							selected <%}%>>true</option>
						<option value="false"
							<%if ("false".equals(itemSet.getString("DisabedRequest"))) {%>
							selected <%}%>>false</option>
				</select></td>
			</tr>
		</table>
		<input type="hidden" name="sysguid" value="<%=sysguid%>">
		<button id="btnSave" type="submit" name="doAction" value="Save">Save</button>
		<button id="btnSave" type="submit" name="doAction" value="Delete">Delete</button>
		<input type="hidden" name="__formpost" value="POST">
	</form>
	<p
		style="color:<%if (!execResult.isEmpty() && execResult.startsWith("保存失败")) {%>red<%} else {%>green<%}%>">
		<%=execResult%>
	</p>
</body>
</html>

　如上代码主要涉及JDBC执行SQL语句，同时还特意使用了参数占位符以避免SQL注入，使用了事务以便可以演示事务的提交与回滚操作，具体的代码原理因篇幅有限就不介绍请参照相关文档。　

六、编写一个登录验证过滤器：LoginValidationFilter，以实现对某些目录下页面进行登录限制（如：本文示例的是jsp目录），过滤器必需实现Filter接口，过滤器的主要逻辑写在doFilter中，代码如下：

（过滤器相关知识：http://www.runoob.com/jsp/jsp-writing-filters.html）

package cn.zuowenjun.java;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.*;

/**
 * Servlet Filter implementation class LoginValidationFilter
 */
@WebFilter(filterName="LoginValidationFilter",urlPatterns="/jsp/*")
public class LoginValidationFilter implements Filter {

	/**
	 * Default constructor.
	 */
	public LoginValidationFilter() {
		// TODO Auto-generated constructor stub
	}

	/**
	 * @see Filter#destroy()
	 */
	public void destroy() {
		// TODO Auto-generated method stub
	}

	/**
	 * @see Filter#doFilter(ServletRequest, ServletResponse, FilterChain)
	 */
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {

		HttpServletRequest req = (HttpServletRequest) request;
		HttpServletResponse res = (HttpServletResponse) response;
		res.setCharacterEncoding("utf-8");
		res.setHeader("Pragma", "No-cache");// 禁止缓存
		res.setHeader("Cache-Control", "no-cache");
		res.setHeader("Expires", "0");
		PrintWriter out = res.getWriter();
		HttpSession session = req.getSession();
		if (session.getAttribute("loginid") != null) {
			chain.doFilter(request, response);
		} else {
			String indexUrl = req.getContextPath() + "/login.html";
			out.println("<script>alert('您没有登录登录，请先登录！need ReLogin!');this.location.href='" + indexUrl + "'; </script>");
		}
	}

	/**
	 * @see Filter#init(FilterConfig)
	 */
	public void init(FilterConfig fConfig) throws ServletException {
		// TODO Auto-generated method stub
	}

}

　Filter部署（映射）有两种方式，同servlet部署类假，一种是在web.xml中使用如下配置：

<filter>
    <filter-name>LoginValidationFilter</filter-name>
    <filter-class>cn.zuowenjun.java.LoginValidationFilter</filter-class>
</filter>
<filter-mapping>
   <filter-name>LoginValidationFilter</filter-name>
   <url-pattern>/jsp/*</url-pattern>
</filter-mapping>

另一种方式就是使用@WebFilter注解，配置如下：

@WebFilter(filterName="LoginValidationFilter",urlPatterns="/jsp/*")
public class LoginValidationFilter implements Filter {
...
}

如此一个简单的JSP WEB示例网站代码就写完了，包含：登录、验证登录、查看数据、编辑数据，下面贴出运行效果，注意由于是DEMO，故没有严格按照编码规范及UI用户体验，只是为了演示结果：

当然还有一种类型没有介绍，那就是监听器：Listener，主要是用来监听 ServletContext, HttpSession, HttpServletRequest 这三个对象中的属性变更信息事件的监听器，可参考：https://www.cnblogs.com/xdp-gacl/p/3969249.html,我们可以使用ServletRequestListener的requestInitialized、requestDestroyed方法来写一个简单的记录当前demo网站的在线用户人数，实现比较简单，在此就不再展开介绍了。

七、打包部署到WEB服务器（Tomcat）

1.打包WAR包：直接参考这篇文章即可：https://www.cnblogs.com/yjq520/p/7323934.html，本身也简单就是导出时选择WAR包类型即可，在此就不介绍了。

2.部署到TOMCAT：只需将打包好的WAR包复制到tomcat的webapps目录下即可，在第一次运行时tomcat会自动解包并生成一个目录，本DEMO的示例发布到TOMCAT的效果：

最后就直接在浏览器中访问URL即可：localhost:8080/demo2/xxxx;

附加2个编码小技巧：

1.创建一个JSP文件，默认字符编码并不是UTF-8，故需要手动调整一下设置，如下图所示：

2.在eclipse中运行调试JSP网站，如果本地安装了TOMCAT且后台一直运行着默认实例，那么可能调试时会报端口被占用，如果被占用了，就需要修改一下项目下的端口，方法如下图所示：

注意server.xml中有好几种Connector配置，一般我们只需改protocal="HTTP"的即可，因为我们是运行WEB项目,
另外大家也看到后面还有一个redirectPort配置项，这个的作用是：当用户用http请求某个资源URL，而该资源本身又被设置了必须要https方式访问，此时Tomcat会自动重定向到这个redirectPort设置的https端口。

最后小结：

1.JSP WEB项目中页面类一般包含：HTML、JSP、Servlet，其中：HTML、JSP文件是可以直接编辑HTML，而Servlet一般只是用于服务端请求的逻辑处理，并没有提供直接的HTML，若需响应成HTML，得自己使用JAVA代码来动态拼出HTML，原则上不建议在Servlet类中拼大量的HTML，完全可以采用JSP来代替。JSP可以HTML与JAVA语言混合，大家也看我上面的DEMO代码，有些地方我用HTML静态页面，而有些我又使用JSP动态页面。如果对比ASP.NET项目，那么JSP文件类似ASP.NET中的ASPX文件，而Servlet类似于ASHX

2.Listener：用于监听捕获WEB应用、上下文、会话的改变，并根据每种事件处理相关逻辑，Filter：用于拦截每一个请求，并在拦截中处理相关逻辑（如：身份验证、记日志等），这些类似于ASP.NET项目中的IIS管道事件、global全局事件；

3.大家有没有发现，JSP WEB，要么前后分离（HTML纯前端、Servlet纯后端），要么就是混合（JSP，包含HTML+Servlet），那有没有一种后端控制前端，后端与前端无需对应，但又能各自变化呢？答案是可以的，这就是下一篇我要介绍的SSM框架，在此只是引入为什么需要MVC模式；

4.以前使用VS+ASP.NET，发现微软的很多东西都是开箱即用，无需过多配置就能快速上手，而eclipse+JSP WEB需要各种配置，最主要是eclipse的编码体验确实与VS相差太远。后续考虑会学习基于IDEA或VS CODE IDE来写JAVA WEB项目，到时候再来分享。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有

上一篇：Hadoop高可用集群

下一篇：《快乐编程大本营》java语言训练班-第4课:java流程控制

国外程序员整理的Java资源大全（全部是干货） 2020-06-12
2020年深圳中国平安各部门Java中级面试真题合集（附答案） 2020-06-11
2020年java就业前景 2020-06-11
04.Java基础语法 2020-06-11
Java--反射(框架设计的灵魂)案例 2020-06-11

IDC资讯：主机资讯注册资讯托管资讯 vps资讯网站建设

网站运营：建站经验策划盈利搜索优化网站推广免费资源

网站联盟：联盟新闻联盟介绍联盟点评网赚技巧

行业资讯：搜索引擎网络游戏电子商务广告传媒

网络编程： Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它

服务器技术： Web服务器 Ftp服务器 Mail服务器 Dns服务器安全防护

软件技巧：其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷

网页制作： FrontPages Dreamweaver Javascript css photoshop fireworks Flash

程序设计： Java技术 C/C++ VB delphi

网络知识：网络协议网络安全网络管理组网方案 Cisco技术

操作系统： Win2000 WinXP Win2003 Mac OS Linux FreeBSD

热门词条

最新资讯

热门关注

热门标签