者:杨明翰
来源:https://blog.csdn.net/piantoutongyang/article/details/50878214
一、前戏
前后端分离已成为互联网项目开发的业界标准使用方式,通过nginx+tomcat的方式(也可以中间加一个nodejs)有效的进行解耦,并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务(多种客户端,例如:浏览器,车载终端,安卓,IOS等等)打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。
核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。
在互联网架构中,名词解释:
Web服务器:一般指像nginx,apache这类的服务器,他们一般只能解析静态资源。
应用服务器:一般指像tomcat,jetty,resin这类的服务器可以解析动态资源也可以解析静态资源,但解析静态资源的能力没有web服务器好。
一般都是只有web服务器才能被外网访问,应用服务器只能内网访问。
二、术业有专攻(开发人员分离)
以前的JavaWeb项目大多数都是java程序员又当爹又当妈,又搞前端,又搞后端。
随着时代的发展,渐渐的许多大中小公司开始把前后端的界限分的越来越明确,前端工程师只管前端的事情,后端工程师只管后端的事情。正所谓术业有专攻,一个人如果什么都会,那么他毕竟什么都不精。
大中型公司需要专业人才,小公司需要全才,但是对于个人职业发展来说,我建议是分开。
1、对于后端java工程师:
把精力放在java基础,设计模式,jvm原理,spring+springmvc原理及源码,linux,mysql事务隔离与锁机制,mongodb,http/tcp,多线程,分布式架构,弹性计算架构,微服务架构,java性能优化,以及相关的项目管理等等。
后端追求的是:三高(高并发,高可用,高性能),安全,存储,业务等等。
2、对于前端工程师:
把精力放在html5,css3,jquery,angularjs,bootstrap,reactjs,vuejs,webpack,less/sass,gulp,nodejs,Google V8引擎,javascript多线程,模块化,面向切面编程,设计模式,浏览器兼容性,性能优化等等。
前端追求的是:页面表现,速度流畅,兼容性,用户体验等等。
术业有专攻,这样你的核心竞争力才会越来越高,正所谓你往生活中投入什么,生活就会反馈给你什么。并且两端的发展都越来越高深,你想什么都会,那你毕竟什么都不精。
通过将team分成前后端team,让两边的工程师更加专注各自的领域,独立治理,然后构建出一个全栈式的精益求精的team。
三、原始人时代(各种耦合)
几曾何时,我们的JavaWeb项目都是使用了若干后台框架,springmvc/struts + spring + spring jdbc/hibernate/mybatis 等等。
大多数项目在java后端都是分了三层,控制层,业务层,持久层。控制层负责接收参数,调用相关业务层,封装数据,以及路由&渲染到jsp页面。然后jsp页面上使用各种标签或者手写java表达式将后台的数据展现出来,玩的是MVC那套思路。
我们先看这种情况:需求定完了,代码写完了,测试测完了,然后呢?要发布了吧?你需要用maven或者eclipse等工具把你的代码打成一个war包,然后把这个war包发布到你的生产环境下的web容器里,对吧?
发布完了之后,你要启动你的web容器,开始提供服务,这时候你通过配置域名,dns等等相关,你的网站就可以访问了(假设你是个网站)。那我们来看,你的前后端代码是不是全都在那个war包里?包括你的js,css,图片,各种第三方的库,对吧?
好,下面在浏览器中输入你的网站域名(www.xxx.com),之后发生了什么?(这个问题也是很多公司的面试题)我捡干的说了啊,基础不好的童鞋请自己去搜。
浏览器在通过域名通过dns服务器找到你的服务器外网ip,将http请求发送到你的服务器,在tcp3次握手之后(http下面是tcp/ip),通过tcp协议开始传输数据,你的服务器得到请求后,开始提供服务,接收参数,之后返回你的应答给浏览器,浏览器再通过content-type来解析你返回的内容,呈现给用户。
那么我们来看,我们先假设你的首页中有100张图片,此时,用户的看似一次http请求,其实并不是一次,用户在第一次访问的时候,浏览器中不会有缓存,你的100张图片,浏览器要连着请求100次http请求(有人会跟我说http长连短连的问题,不在这里讨论),你的服务器接收这些请求,都需要耗费内存去创建socket来玩tcp传输(消耗你服务器上的计算资源)。
重点来了,这样的话,你的服务器的压力会非常大,因为页面中的所有请求都是只请求到你这台服务器上,如果1个人还好,如果10000个人并发访问呢(先不聊服务器集群,这里就说是单实例服务器),那你的服务器能扛住多少个tcp连接?你的带宽有多大?你的服务器的内存有多大?你的硬盘是高性能的吗?你能抗住多少IO?你给web服务器分的内存有多大?会不会宕机?
这就是为什么,越是大中型的web应用,他们越是要解耦。理论上你可以把你的数据库+应用服务+消息队列+缓存+用户上传的文件+日志+等等都扔在一台服务器上,你也不用玩什么服务治理,也不用做什么性能监控,什么报警机制等等,就乱成一锅粥好了。但是这样就好像是你把鸡蛋都放在一个篮子里,隐患非常大。如果因为一个子应用的内存不稳定导致整个服务器内存溢出而hung住,那你的整个网站就挂掉了。
如果出意外挂掉,而恰好这时你们的业务又处于井喷式发展高峰期,那么恭喜你,业务成功被技术卡住,很可能会流失大量用户,后果不堪设想。(注意:技术一定是要走在业务前面的,否则你将错过最佳的发展期哟,亲~)
此外,你的应用全部都耦合在一起,相当于一个巨石,当服务端负载能力不足时,一般会使用负载均衡的方式,将服务器做成集群,这样其实你是在水平扩展一块块巨石,性能加速度会越来越低,要知道,本身负载就低的功能or模块是没有必要水平扩展的,在本文中的例子就是你的性能瓶颈不在前端,那干嘛要水平扩展前端呢???还有发版部署上线的时候,我明明只改了后端的代码,为什么要前端也跟着发布呢???
正常的互联网架构,是都要拆开的,你的web服务器集群,你的应用服务器集群+文件服务器集群+数据库服务器集群+消息队列集群+缓存集群等等。
四、JSP的痛点
以前的javaWeb项目大多数使用jsp作为页面层展示数据给用户,因为流量不高,因此也没有那么苛刻的性能要求,但现在是大数据时代,对于互联网项目的性能要求是越来越高,因此原始的前后端耦合在一起的架构模式已经逐渐不能满足我们,因此我们需要需找一种解耦的方式,来大幅度提升我们的负载能力。
1、动态资源和静态资源全部耦合在一起,服务器压力大,因为服务器会收到各种http请求,例如css的http请求,js的,图片的等等。一旦服务器出现状况,前后台一起玩完,用户体验极差。
2、UI出好设计图后,前端工程师只负责将设计图切成html,需要由java工程师来将html套成jsp页面,出错率较高(因为页面中经常会出现大量的js代码),修改问题时需要双方协同开发,效率低下。
3、jsp必须要在支持java的web服务器里运行(例如tomcat,jetty,resin等),无法使用nginx等(nginx据说单实例http并发高达5w,这个优势要用上),性能提不上来。
4、第一次请求jsp,必须要在web服务器中编译成servlet,第一次运行会较慢。
5、每次请求jsp都是访问servlet再用输出流输出的html页面,效率没有直接使用html高(是每次哟,亲~)。
6、jsp内有较多标签和表达式,前端工程师在修改页面时会捉襟见肘,遇到很多痛点。
7、如果jsp中的内容很多,页面响应会很慢,因为是同步加载。
8、需要前端工程师使用java的ide(例如eclipse),以及需要配置各种后端的开发环境,你们有考虑过前端工程师的感受吗。
基于上述的一些痛点,我们应该把整个项目的开发权重往前移,实现前后端真正的解耦!
五、开发模式
以前老的方式是:
1、产品经历/领导/客户提出需求
2、UI做出设计图
3、前端工程师做html页面
4、后端工程师将html页面套成jsp页面(前后端强依赖,后端必须要等前端的html做好才能套jsp。如果html发生变更,就更痛了,开发效率低)
5、集成出现问题
6、前端返工
7、后端返工
8、二次集成
9、集成成功
10、交付
新的方式是:
1、产品经历/领导/客户提出需求
2、UI做出设计图
3、前后端约定接口&数据&参数
4、前后端并行开发(无强依赖,可前后端并行开发,如果需求变更,只要接口&参数不变,就不用两边都修改代码,开发效率高)
5、前后端集成
6、前端页面调整
7、集成成功
8、交付
六、请求方式
以前老的方式是:
1、客户端请求
2、服务端的servlet或controller接收请求(后端控制路由与渲染页面,整个项目开发的权重大部分在后端)
3、调用service,dao代码完成业务逻辑
4、返回jsp
5、jsp展现一些动态的代码
新的方式是:
1、浏览器发送请求
2、直接到达html页面(前端控制路由与渲染页面,整个项目开发的权重前移)
3、html页面负责调用服务端接口产生数据(通过ajax等等,后台返回json格式数据,json数据格式因为简洁高效而取代xml)
4、填充html,展现动态效果,在页面上进行解析并操作DOM。
总结一下新的方式的请求步骤:
大量并发浏览器请求-→web服务器集群(nginx)-→应用服务器集群(tomcat)-→文件/数据库/缓存/消息队列服务器集群,同时又可以玩分模块,还可以按业务拆成一个个的小集群,为后面的架构升级做准备。
关注微信公众号:Java技术栈,在后台回复:架构,可以获取我整理的 N 篇最新架构教程,都是干货。
七、前后分离的优势
1、可以实现真正的前后端解耦,前端服务器使用nginx。前端/WEB服务器放的是css,js,图片等等一系列静态资源(甚至你还可以css,js,图片等资源放到特定的文件服务器,例如阿里云的oss,并使用cdn加速),前端服务器负责控制页面引用&跳转&路由,前端页面异步调用后端的接口,后端/应用服务器使用tomcat(把tomcat想象成一个数据提供者),加快整体响应速度。(这里需要使用一些前端工程化的框架比如nodejs,react,router,react,redux,webpack)
2、发现bug,可以快速定位是谁的问题,不会出现互相踢皮球的现象。页面逻辑,跳转错误,浏览器兼容性问题,脚本错误,页面样式等问题,全部由前端工程师来负责。接口数据出错,数据没有提交成功,应答超时等问题,全部由后端工程师来解决。双方互不干扰,前端与后端是相亲相爱的一家人。
3、在大并发情况下,我可以同时水平扩展前后端服务器,比如淘宝的一个首页就需要2000+台前端服务器做集群来抗住日均多少亿+的日均pv。(去参加阿里的技术峰会,听他们说他们的web容器都是自己写的,就算他单实例抗10万http并发,2000台是2亿http并发,并且他们还可以根据预知洪峰来无限拓展,很恐怖,就一个首页。。。)
4、减少后端服务器的并发/负载压力。除了接口以外的其他所有http请求全部转移到前端nginx上,接口的请求调用tomcat,参考nginx反向代理tomcat。且除了第一次页面请求外,浏览器会大量调用本地缓存。
5、即使后端服务暂时超时或者宕机了,前端页面也会正常访问,只不过数据刷不出来而已。
6、也许你也需要有微信相关的轻应用,那样你的接口完全可以共用,如果也有app相关的服务,那么只要通过一些代码重构,也可以大量复用接口,提升效率。(多端应用)
7、页面显示的东西再多也不怕,因为是异步加载。
8、nginx支持页面热部署,不用重启服务器,前端升级更无缝。
9、增加代码的维护性&易读性(前后端耦在一起的代码读起来相当费劲)。
10、提升开发效率,因为可以前后端并行开发,而不是像以前的强依赖。
11、在nginx中部署证书,外网使用https访问,并且只开放443和80端口,其他端口一律关闭(防止黑客端口扫描),内网使用http,性能和安全都有保障。
12、前端大量的组件代码得以复用,组件化,提升开发效率,抽出来!
八、注意事项
1、在开需求会议的时候,前后端工程师必须全部参加,并且需要制定好接口文档,后端工程师要写好测试用例(2个维度),不要让前端工程师充当你的专职测试,推荐使用chrome的插件postman或soapui或jmeter,service层的测试用例拿junit写。ps:前端也可以玩单元测试吗?
2、上述的接口并不是java里的interface,说白了调用接口就是调用你controler里的方法。
3、加重了前端团队的工作量,减轻了后端团队的工作量,提高了性能和可扩展性。
4、我们需要一些前端的框架来解决类似于页面嵌套,分页,页面跳转控制等功能。(上面提到的那些前端框架)。
5、如果你的项目很小,或者是一个单纯的内网项目,那你大可放心,不用任何架构而言,但是如果你的项目是外网项目,呵呵哒。
6、 以前还有人在使用类似于velocity/freemarker等模板框架来生成静态页面,仁者见仁智者见智。
7、这篇文章主要的目的是说jsp在大型外网java web项目中被淘汰掉,可没说jsp可以完全不学,对于一些学生朋友来说,jsp/servlet等相关的java web基础还是要掌握牢的,不然你以为springmvc这种框架是基于什么来写的?
8、如果页面上有一些权限等等相关的校验,那么这些相关的数据也可以通过ajax从接口里拿。
9、对于既可以前端做也可以后端做的逻辑,我建议是放到前端,为什么?因为你的逻辑需要计算资源进行计算,如果放到后端去run逻辑,则会消耗带宽&内存&cpu等等计算资源,你要记住一点就是服务端的计算资源是有限的,而如果放到前端,使用的是客户端的计算资源,这样你的服务端负载就会下降(高并发场景)。类似于数据校验这种,前后端都需要做!
10、前端需要有机制应对后端请求超时以及后端服务宕机的情况,友好的展示给用户。
九、扩展阅读
1、其实对于js,css,图片这类的静态资源可以考虑放到类似于阿里云的oss这类文件服务器上(如果是普通的服务器&操作系统,存储在到达pb级的文件后,或者单个文件夹内的文件数量达到3-5万,io会有很严重的性能问题),再在oss上配cdn(全国子节点加速),这样你页面打开的速度像飞一样, 无论你在全国的哪个地方,并且你的nginx的负载会进一步降低。
2、如果你要玩轻量级微服务架构,要使用nodejs做网关,用nodejs的好处还有利于seo优化,因为nginx只是向浏览器返回页面静态资源,而国内的搜索引擎爬虫只会抓取静态数据,不会解析页面中的js,这使得应用得不到良好的搜索引擎支持。同时因为nginx不会进行页面的组装渲染,需要把静态页面返回到浏览器,然后完成渲染工作,这加重了浏览器的渲染负担。浏览器发起的请求经过nginx进行分发,URL请求统一分发到nodejs,在nodejs中进行页面组装渲染;API请求则直接发送到后端服务器,完成响应。
3、如果遇到跨域问题,spring4的CORS可以完美解决,但一般使用nginx反向代理都不会有跨域问题,除非你把前端服务和后端服务分成两个域名。JSONP的方式也被淘汰掉了。
4、如果想玩多端应用,注意要去掉tomcat原生的session机制,要使用token机制,使用缓存(因为是分布式系统),做单点,对于token机制的安全性问题,可以搜一下jwt。
5、前端项目中可以加入mock测试(构造虚拟测试对象来模拟后端,可以独立开发和测试),后端需要有详细的测试用例,保证服务的可用性与稳定性。
十、总结
前后端分离并非仅仅只是一种开发模式,而是一种架构模式(前后端分离架构)。千万不要以为只有在撸代码的时候把前端和后端分开就是前后端分离了,需要区分前后端项目。
前端项目与后端项目是两个项目,放在两个不同的服务器,需要独立部署,两个不同的工程,两个不同的代码库,不同的开发人员。前后端工程师需要约定交互接口,实现并行开发,开发结束后需要进行独立部署,前端通过ajax来调用http请求调用后端的restful api。前端只需要关注页面的样式与动态数据的解析&渲染,而后端专注于具体业务逻辑。
、使用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://serverIP;DatabaseName=testDB", "user", "password"); 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项目,到时候再来分享。
对于「JavaWeb」项目网站,我相信很多小伙伴们在学过网页前端和服务器交互之后,自己也能写出一个注册和登录的功能,但是对于那些想搞破坏或者很无聊的人来说,他们可能会利用一些技术拼命的注册,这里就会导致我们的数据库内容不断增加没用的帐号,后台管理时你要是看到一大堆垃圾帐号,是不是很生气。
这个时候,我们可以通过一些方式来解决,例如一个IP在某个时间段内只能注册一个,或者更简单的,利用JS设置验证码。这当然是一个好的方法,但是在某些比较重要的网站里,只用JS写个验证码是远远不够的。所以,此时你就需要用到一个更高级的验证码功能了——邮箱验证码或者手机验证码。
但对于手机验证码来说,那是要花钱的,而我们只是做个小网站,学习而且,那么用邮箱验证码来说是更划算的,免费哦。
首先,肯定是写个简单的网页,包括用户名和注册邮箱啦
主页源码
主页网页显示
再然后填入相关用户名和邮箱,点击获取验证码,然后进入你的邮箱查看,如图
输入相关信息
邮箱查看验证码
是不是很神奇呢?
目录结构
功能实现的部分代码
另外,如果你是一个柯南迷,可以去看看我的主页有关柯南的文章哦,由于小新创作时间短,所以文章数量有待提高,而你的「关注」就是我创作的动力,UpUp!!!
*请认真填写需求信息,我们会在24小时内与您取得联系。