开发一个带有Servlet(Java小程序)的webapp(重点)

开发一个带有Servlet(Java小程序)的webapp(重点)

开发步骤是怎样的?

  1. 第一步:在webapps目录下新建一个目录,起名crm(这个crm就是webapp的名字)。当然,也可以是其它项目,比如银行项目,可以创建一个目录bank,办公系统可以创建一个oa。

注意:crm就是这个webapp的根

  1. 第二步:在webapp的根下新建一个目录:WEB-INF

注意:这个目录的名字是Servlet规范中规定的,必须全部大写,必须一模一样。必须的必须。

  1. 第三步:在WEB-INF目录下新建一个目录:classes

注意:这个目录的名字必须是全部小写的classes。这也是Servlet规范中规定的。另外这个目录下一定存放的是Java程序编译之后的class文件(这里存放的是字节码文件)。

  1. 第四步:在WEB-INF目录下新建一个目录:lib

注意:这个目录不是必须的。但如果一个webapp需要第三方的jar包的话,这个jar包要放到这个lib目录下,这个目录的名字也不能随意编写,必须是全部小写的lib。例如java语言连接数据库需要数据库的驱动jar包。那么这个jar包就一定要放到lib目录下。这Servlet规范中规定的。

  1. 第五步:在WEB-INF目录下新建一个文件:web.xml

注意:这个文件是必须的,这个文件名必须叫做web.xml。这个文件必须放在这里。一个合法的webapp,web.xml文件是必须的,这个web.xml文件就是一个配置文件,在这个配置文件中描述了请求路径和Servlet类之间的对照关系。

这个文件最好从其他的webapp中拷贝,最好别手写。没必要。复制粘贴

<?xml version="1.0" encoding="UTF-8"?>

<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                      https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
  version="5.0"
  metadata-complete="true">


</web-app>
  1. 第六步:编写一个Java程序,这个小Java程序也不能随意开发,这个小java程序必须实现Servlet接口。
  • 这个Servlet接口不在JDK当中。(因为Servlet不是JavaSE了。Servlet属于JavaEE,是另外的一套类库。)
  • Servlet接口(Servlet.class文件)是Oracle提供的。(最原始的是sun公司提供的。)
  • Servlet接口是JavaEE的规范中的一员。
  • Tomcat服务器实现了Servlet规范,所以Tomcat服务器也需要使用Servlet接口。Tomcat服务器中应该有这个接口,Tomcat服务器的CATALINA_HOME\lib目录下有一个servlet-api.jar,解压这个servlet-api.jar之后,你会看到里面有一个Servlet.class文件。
  • 重点:从JakartaEE9开始,Servlet接口的全名变了:jakarta.servlet.Servlet
  • 注意:编写这个Java小程序的时候,java源代码你愿意在哪里就在哪里,位置无所谓,你只需要将java源代码编译之后的class文件放到classes目录下即可。
  1. 第七步:编译我们编写的HelloServlet

重点:你怎么能让你的HelloServlet编译通过呢?配置环境变量CLASSPATH

CLASSPATH=.;C:\dev\apache-tomcat-10.0.12\lib\servlet-api.jar

思考问题:以上配置的CLASSPATH和Tomcat服务器运行有没有关系?

没有任何关系,以上配置这个环境变量只是为了让你的HelloServlet能够正常编译生成cla

  1. 第八步:将以上编译之后的HelloServlet.class文件拷贝到WEB-INF\classes目录下。

  2. 第九步:在web.xml文件中编写配置信息,让“请求路径”和“Servlet类名”关联在一起。

  • 这一步用专业术语描述:在web.xml文件中注册Servlet类。

  • <?xml version="1.0" encoding="UTF-8"?>
    
    <web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
      xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
      xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee
                          https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
      version="5.0"
      metadata-complete="true">
    
    	<!--servlet描述信息-->
    	<!--任何一个servlet都对应一个servlet-mapping -->
    	<servlet>
    		<servlet-name>fdsafdsagfdsafdsa</servlet-name>
    		<!--这个位置必须是带有包名的全限定类名-->
    		<servlet-class>com.bjpowernode.servlet.HelloServlet</servlet-class>
    	</servlet>
    
    	<!--servlet映射信息-->
    	<servlet-mapping>
    		<!--这个也是随便的,不过这里写的内容要和上面的一样。-->
    		<servlet-name>fdsafdsagfdsafdsa</servlet-name>
    		<!--这里需要一个路径-->
    		<!--这个路径唯一的要求是必须以 / 开始-->
    		<!--当前这个路径可以随便写-->
    		<url-pattern>/fdsa/fd/saf/d/sa/fd/sa/fd</url-pattern>
    	</servlet-mapping>
    	
    </web-app>
  1. 第十步:启动Tomcat服务器

  2. 第十一步:打开浏览器,在浏览器地址栏上输入一个url,这个URL必须是:

  • http://127.0.0.1:8080/crm/fdsa/fd/saf/d/sa/fd/sa/fd
    非常重要的一件事:浏览器上的请求路径不能随便写,这个请求路径必须和web.xml文件中的url-pattern一致。
    注意:浏览器上的请求路径和web.xml文件中的url-pattern的唯一区别就是:浏览器上的请求路径带项目名:/crm
    浏览器上编写的路径太复杂,可以使用超链接。(非常重要:html页面只能放到WEB-INF目录外面。)
    
    以后不需要我们编写main方法了。tomcat服务器负责调用main方法,Tomcat服务器启动的时候执行的就是main方法。我们javaweb程序员只需要编写Servlet接口的实现类,然后将其注册到web.xml文件中,即可。

总结一下:一个合法的webapp目录结构应该是怎样的?

webapproot
     |------WEB-INF
     		  |------classes(存放字节码)
     		  |------lib(第三方jar包)
     		  |------web.xml(注册Servlet)
     |------html
     |------css
     |------javascript
     |------image
     ....

浏览器发送请求,到最终服务器调用Servlet中的方法,是怎样的一个过程?(以下这个过程描述的很粗糙。其中还有很多步骤我省略了。)

  • 用户输入URL,或者直接点击超链接:http://127.0.0.1:8080/crm/fdsa/fd/saf/d/sa/fd/sa/fd
  • 然后Tomcat服务器接收到请求,截取路径:/crm/fdsa/fd/saf/d/sa/fd/sa/fd
  • Tomcat服务器找到crm项目
  • Tomcat服务器在web.xml文件中查找/fdsa/fd/saf/d/sa/fd/sa/fd 对应的Servlet是:com.bjpowernode.servlet.HelloServlet
  • Tomcat服务器通过反射机制,创建com.bjpowernode.servlet.HelloServlet的对象。
  • Tomcat服务器调用com.bjpowernode.servlet.HelloServlet对象的service方法。
关于JavaEE的版本
  • JavaEE目前最高版本是 JavaEE8
  • JavaEE被Oracle捐献了,Oracle将JavaEE规范捐献给Apache了。
  • Apache把JavaEE换名了,以后不叫JavaEE了,以后叫做 jakarta EE。
  • 以后没有JavaEE了。以后都叫做Jakarta EE。
  • JavaEE8版本升级之后的"JavaEE 9",不再是"JavaEE9"这个名字了,叫做JakartaEE9
  • JavaEE8的时候对应的Servlet类名是:javax.servlet.Servlet
  • JakartaEE9的时候对应的Servlet类名是:jakarta.servlet.Servlet (包名都换了)
  • 如果你之前的项目还是在使用javax.servlet.Servlet,那么你的项目无法直接部署到Tomcat10+版本上。你只能部署到Tomcat9-版本上。在Tomcat9以及Tomcat9之前的版本中还是能够识别javax.servlet这个包。
解决Tomcat服务器在DOS命令窗口中的乱码问题(控制台乱码)

将CATALINA_HOME/conf/logging.properties文件中的内容修改如下:

java.util.logging.ConsoleHandler.encoding = GBK

向浏览器响应一段HTML代码

public void service(ServletRequest request, ServletResponse response){
    response.setContentType("text/html");
    PrintWriter out = response.getWriter();
    out.print("<h1>hello servlet!</h1>");
}
在Servlet中连接数据库,怎么做?

Servlet是Java程序,所以在Servlet中完全可以编写JDBC代码连接数据库。
在一个webapp中去连接数据库,需要将驱动jar包放到WEB-INF/lib目录下。(com.mysql.cj.jdbc.Driver 这个类就在驱动jar包当中。)

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
这里提供一个简单的WebApp代码示例,使用HTML、CSS和JavaScript编写。该WebApp一个简单的待办事项列表,用户可以添加、删除和标记已完成的任务。 HTML代码: ``` <!DOCTYPE html> <html> <head> <title>Todo List</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="wrapper"> <h1>Todo List</h1> <input type="text" id="new-task" placeholder="Add new task"> <button id="add-task">Add</button> <ul id="task-list"></ul> </div> <script src="app.js"></script> </body> </html> ``` CSS代码: ``` body { font-family: Arial, sans-serif; } .wrapper { max-width: 500px; margin: 0 auto; padding: 20px; background-color: #f2f2f2; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.2); } h1 { text-align: center; } input[type="text"] { padding: 10px; width: 70%; border-radius: 5px; border: none; box-shadow: 0 0 5px rgba(0,0,0,0.1) inset; } button { padding: 10px; background-color: #007bff; color: #fff; border: none; border-radius: 5px; cursor: pointer; } button:hover { background-color: #0062cc; } ul { list-style: none; padding: 0; margin: 0; } li { padding: 10px; margin: 5px 0; background-color: #fff; border-radius: 5px; box-shadow: 0 0 5px rgba(0,0,0,0.1); display: flex; justify-content: space-between; align-items: center; } li.completed { background-color: #d7ffd7; } li.completed .task-text { text-decoration: line-through; color: #999; } ``` JavaScript代码: ``` const newTaskInput = document.getElementById('new-task'); const addTaskButton = document.getElementById('add-task'); const taskList = document.getElementById('task-list'); function addTask() { if (newTaskInput.value.trim() === '') { return; } const taskText = newTaskInput.value.trim(); const taskItem = document.createElement('li'); const taskTextElement = document.createElement('span'); const deleteButton = document.createElement('button'); const completeButton = document.createElement('button'); taskTextElement.textContent = taskText; deleteButton.textContent = 'Delete'; completeButton.textContent = 'Complete'; deleteButton.addEventListener('click', deleteTask); completeButton.addEventListener('click', completeTask); taskItem.appendChild(taskTextElement); taskItem.appendChild(deleteButton); taskItem.appendChild(completeButton); taskList.appendChild(taskItem); newTaskInput.value = ''; } function deleteTask(event) { event.target.parentNode.remove(); } function completeTask(event) { event.target.parentNode.classList.toggle('completed'); } addTaskButton.addEventListener('click', addTask); ``` 以上代码实现了一个简单的WebApp,可以自由添加、删除和标记任务。当用户点击“完成”按钮时,任务将被标记为已完成,并在列表项上应用“completed”类。当用户点击“删除”按钮时,任务将被删除。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值