html制作网站 java 网页制作java

转载

mob6454cc7042a2 2023-07-12 22:10:34

文章标签 html制作网站 java java web servlet xml 文章分类 Java 后端开发

使用MyEclipse开发工具，开发一个HelloServlet程序

step1：新建一个WebProject，起名字为servlettest
step2：在src目录下，新建一个包com.bzxy.test
step3：在包下，新建一个类HelloServlet
step4：让HelloServlet去继承HttpServlet，继承之后调出service方法，该service方法能够接收浏览器端发送过来的请求，也可以向浏览器端响应。
step5：在WEB-INF下找到web.xml文件，在web.xml文件中对第4步创建的HelloServlet进行配置。
step6：将已经写好，并且配置好的WebProject,也就是servlettest项目部署到tomcat服务器中。
step7：打开浏览器，在浏览器地址栏输入地址访问
http://localhost:8080/WebProject名字/url-pattern地址
http://localhost:8080/servlettest/h具体使用步骤可点击本处

练习：编写servlet在网页上显示当前时间

新建一个名为webtest的web工程
在webtest工程下，创建一个名为DateServlet的类。Date d=new Date(); d...
用浏览器访问webtest工程时，能够在浏览器中输出当前系统时间

代码中简单添加了其他的用法

代码部分：

DateServlet.java

package com.bzxy.test;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Date;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//在服务器的一个servlet类，编写的该servlet类能够向页面输出/显示系统时间
public class DateServlet extends HttpServlet{
	
	//调用service方法
	//该服务器端的service方法可以和浏览器进行交互
	//浏览器端 --> 服务器端的service方法  request
	//浏览器端 <-- 服务器端的service方法  response
	@Override
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		
		//text/html设置支持页面标记的，charseet=utf-8设置中文乱码问题的
		response.setContentType("text/html;charset=utf-8");
		
		PrintWriter pw = response.getWriter();
		Date d = new Date();
		pw.println("<div style='color:red;font-size:35px'>"+d+"</div>");
		pw.println("<br/>");
		pw.println("<a href='http://www.baidu.com'>点我去百度</a>");
		pw.write("<a href='http://www.baidu.com'>to baidu</a>");
		
	}
	
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<!-- 配置DateServlet -->
	<servlet>
		<servlet-name>DateServlet</servlet-name>
		<servlet-class>com.bzxy.test.DateServlet</servlet-class>
	</servlet>
	<servlet-mapping>
		<servlet-name>DateServlet</servlet-name>
		<url-pattern>/date</url-pattern>
	</servlet-mapping>
</web-app>

效果图：

在浏览器中输入http://localhost:8080/webtest/date

html制作网站 java 网页制作java_servlet

如何在项目中添加Html？

第一步：

选中WebRoot下选择New中Other，输入html，选择Basic Templates（基础模板）并输入名称

html制作网站 java 网页制作java_java_02

html制作网站 java 网页制作java_servlet_03

点击Finish

第二步：

若j将名字修改为registe.html有两种方法：

①点击F2

②选择页面，右键选择Refactor中Rename，如图所示：

html制作网站 java 网页制作java_web_04

左边Design设计，右边Preview用浏览器打开

html制作网站 java 网页制作java_web_05

Design中，上方红框内的优点为：能够边编辑边查看，其中上下箭头可调节

html制作网站 java 网页制作java_xml_06

在代码任意区域，如图显示，可格式化。使用的快捷键为：Ctrl+Shift+F

html制作网站 java 网页制作java_web_07

第三步：

访问时页面的网址为：http://localhost:8080/servlettest/registe.html

servlet的功能

1）向浏览器响应内容

（1）response.setContentType("text/html;charset=utf-8"); 响应到浏览器的内容支持标记，支持CSS属性，同时也能够设置中文乱码问题。
（2）PrintWriter pw=response.getWriter();pw.println(“你好”);pw.write(“<div>你好</div>”);

2）接收浏览器发送过来的请求

浏览器发送到服务器端的请求中获取参数值的方法（两种）如下：

方法一：

请求中参数值的传递格式：

key1=value1&key2=value2&key3=value3…

http://localhost:8080/servlettest/registe?username=zs&pwd=aaakey值和value值都不一样使用的方法：
request.getParameter(key) ---> value（String）

方法二：

请求中参数值的传递格式：

key=value1&key=value2&key=value3&key=value4…

key值一样，value值不一样的使用方法：
request.getParameterValues(key); ---> value（String[]）针对中文乱码问题进行补充可点击本处

浏览器端向服务器端发送请求的方式

（1）get请求方式

浏览器发送get请求的情况：

①在浏览器地址栏输入一个地址回车的请求
②点击超链接
<a href=”http://www.baidu.com”>你好</a><a href=”url-pattern的地址”>hello</a>当点击hello，发送的请求是url-pattern对应的servlet。
针对如何NullPointException问题解决可点击本处
③表单默认提交，或者设置属性method=”get”

get请求方式，会将数据在浏览器地址栏上一起发送，提交的数据只能是少量的数据，因为数据会显示在浏览器地址栏上，数据相对来说不安全，但是效率高一些。

（2）post请求方式

浏览器发送post请求的情况：

①表单提交，需要设置表单属性method=”post”

post请求方式，会将数据封装在一个包中，随着请求一起发送，浏览器地址栏是看不到这些数据的，这种方式可提交大量数据，相对比较安全，但是效率相对低一些。

代码部分：

RegisteServlet.java

package com.bzxy.test;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//表示服务器端的一个servlet，该servlet主要功能是接收浏览器端registe.html页面
//发送过来的请求和请求中包含的参数
//浏览器端（页面）  <==>   服务器端（servlet）  <==>   服务器端（数据库）
public class RegisteServlet extends HttpServlet{
	
	//调用service方法
	protected void service(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//System.out.println("测试...");
		//未添加以下代码时，访问网址http://localhost:8080/servlettest/registe.html
		//点击提交之后，页面空白，网址变为：http://localhost:8080/servlettest/registe?username=...&pwd=...&smt=...
		
		//##用户名用英文输入，否则乱码，需进一步处理
		//request请求；response响应
		//http://localhost:8080/servlettest/registe?username=zs&pwd=aaa
		//通过request接收请求参数的值
		String s1 = request.getParameter("username");
		String s2 = request.getParameter("pwd");
		//http://localhost:8080/servlettest/registe
		//?username=zs&pwd=aa&
		///love=readbook&love=write&love=playbook&smt=%E6%8F%90%E4%BA%A4
		//String[]表示字符串类型的数组，该数组中应该存储4个value值
		String[] s3 = request.getParameterValues("love");
		
		//通过response向页面返回结果
		PrintWriter pw = response.getWriter();
		pw.println(s1);
		pw.println(s2);
		//s3 --> readbook write playball online
		//下标       0		1   	2		3
		//若多选项选择包含readbook，则显示readbook
		pw.println(s3[0]); //根据下标对应的内容输出
		//若四个多选项都选择，则显示[readbook, write, playbook, online]
		pw.println(Arrays.toString(s3)); //借助于toString方法，可直接将数组中所有的内容输出
		
	}
	
}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
	http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
	<welcome-file-list>
		<welcome-file>index.jsp</welcome-file>
	</welcome-file-list>

	<!-- 对com.bzxy.test包下的HelloServlet进行配置 -->
	<servlet>
		<servlet-name>hello</servlet-name> <!-- 对要配置的Servlet起别名 -->
		<servlet-class>com.bzxy.test.HelloServlet</servlet-class> <!-- 配置的Servlet的位置，写所在的包名+类名即可 -->
	</servlet>
	<servlet-mapping>
		<servlet-name>hello</servlet-name> <!-- 要和上面的servlet-name的内容保持一致 -->
		<url-pattern>/ho</url-pattern> <!-- 浏览器访问服务器端servlet的url地址 -->
	</servlet-mapping>

	<!-- 对com.bzxy.test包下的RegisteServlet进行配置 -->
	<servlet>
		<servlet-name>RegisteServlet</servlet-name> <!-- 对要配置的Servlet起别名 -->
		<servlet-class>com.bzxy.test.RegisteServlet</servlet-class> <!-- 配置的Servlet的位置，写所在的包名+类名即可 -->
	</servlet>
	<servlet-mapping>
		<servlet-name>RegisteServlet</servlet-name> <!-- 要和上面的servlet-name的内容保持一致 -->
		<url-pattern>/registe</url-pattern> <!-- 浏览器访问服务器端servlet的url地址 -->
	</servlet-mapping>
</web-app>

registe.html

<!-- 版本信息 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Insert title here</title>
	</head>
	<body>
		<!-- action="" 表示点击提交按钮此表单会向哪个servlet发送请求，双引号中写哪一个url-pattern地址，
		此表单就会向哪一个servlet发送请求。【访问页面，点击提交，成功访问到RegisteServlet】-->
		<!-- 默认浏览器地址栏中会显示数据，method="get"；而不显示则修改为，method="post" -->
		<form action="registe" method="post">
			用户名：<input type="text" name="username"/>
			<br/>
			密码：<input type="password" name="pwd"/>
			<br/>
			兴趣爱好：读书<input type="checkbox" name="love" value="readbook"/>
				        写字<input type="checkbox" name="love" value="write"/>
				        打球<input type="checkbox" name="love" value="playball"/>
				        上网<input type="checkbox" name="love" value="online"/>
			<br/>
			<input type="submit" name="smt" value="提交"/>
		</form>
		
		<!-- 测试超链接的请求方式 -->
		<a href="http://www.baidu.com">你好</a>
		<br/>
		<!-- 根据username接收为空，异常为NullPointerException -->
		<!-- <a href="registe">hello</a> -->
		<a href="ho">hello</a>
	</body>
</html>