javaWeb01(WEB环境的搭建)

敢敢130

已于 2024-06-04 17:52:55 修改

阅读量701

点赞数

文章标签： java eclipse

于 2022-03-24 16:26:23 首次发布

本文链接：https://blog.csdn.net/weixin_67465673/article/details/123712387

版权

思维导图

笔记：

一、jdk下载

1.jdk指的是什么？jdk指的是java的开发工具

下载jdk途径：http://www.oracle.com/index.html:指的上传了要查找的

2.如何测试java环境配置成功？

打开本机配置器：（徽标键+R）搜索cmd找到配置器，在其中写到javac -version显示如：javac 1.8.0_73,说明你下载的版本即为成功！

二、Tomcat

3.Tomcat是什么？入门级服务器

为什么要使用它？免费，使用比较简单；可以通过浏览器拿到IP地址访问该服务器

4.目录结构

bin：是一个可执行文件，很多exe文件

conf：配置文件

lib：类库

logs：日志文件

temp：临时文件

webapps：web应用用于手动配置web项目

work：底层文件夹会有如：java.class

修改端口号（不建议修改）：在配置文件夹里选择server.xml，右键用笔记本（高级记事本）打开，找到端口号修改即可，注意要关闭服务器，并且重新启动。为避免端口号被占用，服务器只能被重新启动一次，再一次重启一定要先关闭服务器

手动部署web应用：把html项目复制到webapps里去，在浏览器输入：lacalhost：8080/html-XX/xxx.html

如何与eclipse关联（三种方式）：解析私信

如何启用TomCat：点击server，右击菜单选择start即可启用

三、web项目

如何创建：

------------------------------------------------------------------------------------------------------------

-------------------------------------------------------------------------------------------------------------------------

设置默认编码模式： Window-->Preferences-->搜索jsp-->jspFiles-->修改即可

补充一点：jsp与html的区别：jsp有page代码<%@ page language="java"

contentType="text/html;charset=utf-8"pageEnciding="utf-8"%> html没有这行代码

四、代码块

务必保证自己的开发环境可用

1.将99乘法表用表格输出
单数行用灰色
*如果鼠标悬停，弹出"你想干啥？"
提示：用条件判断 js的onmouseover事件或者jQuery的mouseover都ok

2.打图型
*
**
***
****

*
***
*****
*******
*****
***
*
单数行用蓝色
双数行用红色

3.布局登录界面(html) form

用户名
密码
确定&取消

4.完成回顾js的作业

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!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>
<script>
$(function(){
	  $("table tr:even").css("background","pink");
		$("table tr:odd").css("background","blue");
})

function yr(){
	  alert("你要干哈？");
}

</script>
</head>
<body>


	<%
		//1、将99乘法表用表格输出
   //单数行用灰色
  // *如果鼠标悬停，弹出"你想干啥？"
   //提示：用条件判断 js的onmouseover事件或者jQuery的mouseover都ok
   out.print("<table border='1' cellspacing='0' cellpadding='0' onmouseover='yr()'>");
		for(int i=1;i<10;i++){
			out.print("<tr>");
			for(int j=1;j<10;j++){
				if(j>i){
					out.print("<td>&nbsp;</td>");
				}else{
					out.print("<td>"+j+"x"+i+"="+i*j+"</td>");

				}
			}
			out.print("</tr>");
		}
		out.print("</table>");
	//2、打图型
			/* 
			*
			**
			*** 
			****
			*/
		 for(int i=0;i<4;i++){
			for(int j=0;j<=i;j++){
				out.print("*");
			}
			out.print("<br/>");
		} 
			/* 
		    *
		   ***
		  *****
		 *******
		  *****
		   ***
		    * 
		    */
		      for (int i = 1; i <= 5; i++) {//打印上半部分空格
		            for (int j = 1; j <= 5 - i; j++) {
		                out.print("&nbsp;");
		            }
		            for (int j = 1; j <= 2 * i - 1; j++) {//打印上半部分*
		                out.print("*");
		            }
		            out.print("<br/>");
		        }
		        for (int i = 4; i >= 1; i--) {
		            for (int j = 1; j <= 5 - i; j++) {
		                out.print("&nbsp;");
		            }
		            for (int j = 1; j <= 2 * i - 1; j++) {
		                out.print("*");
		            }
		            out.print("<br/>");
		        }
		  /*单数行用蓝色
		    双数行用红色 */
		    
		    

	//3、3.布局登录界面(html) form

//用户名
//密码
//确定&取消
   	
		
	%>
	<form action="#">
	<lable>用户名：</lable><input /><br/>
	<label>密码：</label><input type="password"/><br/>
	<input type="button" value="注册">&nbsp;&nbsp;<input type="submit" value="登录"/>
	
	</form>
	

</body>
</html>

五、回顾

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作用2：时钟特效</title>
				<script type="text/javascript">
					function myf(){
						//实例化一个日期对象
						var d = new Date();
						//依次来获取年月日时分秒
						// var y = d.getYear()+1900;//年
						var y = d.getFullYear();//年
						var m = d.getMonth()+1;//月
						// var r = d.getDay();//星期数
						var r = d.getDate();//日
						var h = d.getHours();//时
						var f = d.getMinutes();//分
						var s = d.getSeconds();//秒
						var str = y+"年"+m+"月"+r+"日 "+h+":"+f+":"+s;
						//根据id拿到div 
						document.getElementById("aa").innerHTML = str;
						
						//递归:自己调用自己
						setTimeout("myf()",1000);
					}
					
					
				</script>
			</head>
			<body>
				<div id="aa"></div>
			</body>
		</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>作业1：使用正则表达式验证表单内容</title>
		<style type="text/css">
		body{
			margin:0;
			padding:0;
			font-size:14px;
			line-height:25px;
		}
		.main{
			width:900px;
			margin-left:auto;
			margin-right:auto;
			}
		
		.left{
			text-align:right;
			width:180px;
			height:25px;
			padding-right:5px;
			}
		.inputs{
			width:130px;
			height:16px;
			border:solid 1px #666666;
			float:left;
			margin-right:5px;
			}
		.prompt{
			margin-left:10px;
			color:#F00;
			}	
		</style>
		<script type="text/javascript">
		function $(elementId){
		  return document.getElementById(elementId).value;
			}
		function divId(elementId){
		  return document.getElementById(elementId);
			}
		//用户名验证
		function checkUser(){
		  var user=$("user");
		  var userId=divId("user_prompt");
		   userId.innerHTML="";	
		  var reg=/^[a-zA-Z][\w_]{4,15}$/;	
		    if(reg.test(user)==false){
			   userId.innerHTML="用户名不正确";
			return false;
			  }
			  return true;
			}
		//验证邮箱
		function checkEmail(){
		  var email=$("email");
		  var email_prompt=divId("email_prompt");
		  email_prompt.innerHTML="";
		  var reg=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;	
		    if(reg.test(email)==false){
			  email_prompt.innerHTML="Email格式不正确，例如web@sohu.com";
			return false;
			  }
			  return true;
		}
		//验证手机号码
		function checkMobile(){
			var mobile=$("mobile");
			var mobileId=divId("mobile_prompt");
			var regMobile=/^1\d{10}$/;
			if(regMobile.test(mobile)==false){
				mobileId.innerHTML="手机号码不正确，请重新输入";
				return false;
				}
				mobileId.innerHTML="";
				return true;
			}
			
			//密码验证
		function checkPwd(){
		  var pwd=$("pwd");
		  var pwdId=divId("pwd_prompt");
		   pwdId.innerHTML="";	
		  var reg=/^[a-zA-Z0-9]{4,10}$/;	
		    if(reg.test(pwd)==false){
			   pwdId.innerHTML="密码不能含有非法字符，长度在4-10之间";
			return false;
			  }
			  return true;
			}
			
		function checkRepwd(){
		  var repwd=$("repwd");
		  var pwd=$("pwd");
		  var repwdId=divId("repwd_prompt");
		   repwdId.innerHTML="";
		    if(pwd!=repwd){
			   repwdId.innerHTML="两次输入的密码不一致";
			return false;
			  }
			  return true;
			}
		
		
		
		</script>
		</head>
		
		<body>
		<div class="main"><img src="images/logo.jpg" alt="logo"/></div>
		<div class="main"><table width="100%" border="0" cellspacing="0" cellpadding="0">
		  <tr>
		    <td class="left"></td>
		    <td>&nbsp;</td>
		  </tr><tr>
		    <td class="left">用户名：</td>
		    <td><input id="user" type="text" class="inputs" onblur="checkUser()" /><div id="user_prompt" class="prompt"></div></td>
		  </tr>
		 <tr>
		    <td class="left">Email地址：</td>
		    <td><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt" class="prompt"></div></td>
		  </tr>
		 <tr>
		    <td class="left">手机号码：</td>
		    <td><input id="mobile" type="text" class="inputs" onblur="checkMobile()" /><div id="mobile_prompt" class="prompt"></div></td>
		  </tr>
		 <tr>
		    <td class="left">登录密码：</td>
		    <td><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" /><div id="pwd_prompt" class="prompt"></div></td>
		  </tr>
		 <tr>
		    <td class="left">密码确认：</td>
		    <td><input id="repwd" type="password"  class="inputs" onblur="checkRepwd()" /><div id="repwd_prompt" class="prompt"></div></td>
		  </tr>
		 <tr>
		    <td class="left">&nbsp;</td>
		    <td><input name="" type="image" src="images/login.jpg" /></td>
		  </tr>
		
		  
		</table>
		</div>
		</body>
		</html>