Java Web开发技术

最新推荐文章于 2024-08-06 10:22:43 发布

kwy1226

最新推荐文章于 2024-08-06 10:22:43 发布

阅读量1.6k

点赞数 2

分类专栏： Java Web 文章标签： java javaweb jsp jdbc 数据库

本文链接：https://blog.csdn.net/m0_53382671/article/details/122080477

版权

JAVA Web技术

一、Web前端开发基础技术

1.HTML标记语言

2.CSS样式

CSS外部样式表是以引用的方式链接到当前页面或多个页面中，因此，凡是引用该CSS样式的页面，都可以使用。

<link type="text/css" rel="stylesheet" href="css/input.css"/>

id选择器的方式呈现：#tagName id=“tagName”
类选择器： .tagName class=“tagName”

如果需要对html中已有标记进行修饰，则可以直接使用该标记作为本样式的tagName。

3.JavaScript

JavaScript VS脚本

一种基于对象和事件驱动（event-drive)的，用于Web应用的实现客户端动态交互脚本语言。

<script type="text/javascript">
	function sayHello(){
		alert("Hello,欢迎你！");
	}
	</script>
	<body>
		<form>
			<input type="button"  value="点击" onclick="sayHello()"/>
		</form>
	</body>

取网页中相应的区域块

	<title>js修改html内容</title>
	</head>
	<script type="text/javascript">
	function changeText(){
		document.getElementById('myDIV').innerHTML="good good study,day day up";
	}
	</script>
	<body>
		<div id="myDIV">好好学习，天天向上</div>
			<input type="button"  value="点击" onclick="changeText()"/>
	</body>

简单注册表单练习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>用户注册</title>
		<style type="text/css">
		fieldset{
			width: 300px;
			height: 200px;
			border-radius: 5px;   
			margin: auto;       
			border-left: none;  
			border-right: none;    
		}  
		</style>
	</head>
//表单验证
		<script type="text/javascript">
		function validateForm(thisForm){
			with(thisForm){
				if(username.value==""){
					alert("用户账号不可以为空，请填写！");
					return false;
				}
				if(password1.value.length<6||password1.value.length>20){}
				    alert("用户密码输入长度必须在6-20之间！");
				    return false;
				}
				else{
					return true;
				}
				if(password1.value!=password2.value){
					alert("两次密码输入不一致，请重新输入!")；
					return false;
				}
				else{
					return true;
				}
			}
		}
		</script>
		
		<body>
			<fieldset>
				<legend style="text-align: center;">新用户注册</legend>
				<form action="#" method="post" onsubmit="return validateForm(this)">
				<p>用户账号：<input type="text" name="username"/></p>
				<p>用户密码：<input type="password" name="password1"/></p>
				<p>确认密码：<input type="password" name="password2"/></p>
				<input type="submit" value="注册"/>
			    </form>	
			</fieldset>
	</body>
</html>

验证email格式

验证方式：@前必须有字符

@与最后一个 . 之间必须有字符

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<script type="text/javascript">
	    function checkEmail(thisForm){
			with(thisForm){
				var apos=email.value.indexOf('@');
				var dotpos=email.value.lastIndexOf('.');
				if(apos<1||dotpos-apos<2){
					alert("email格式不正确，请重新输入！");
					return false;
				}
				else{
					return true;
				}
			}
		}
	</script>
		<body>
			<form action="#" method="post" onsubmit="return checkEmail(this)">
				email:<input type="text" name="email" />
				<input type="submit" value="验证email格式" />
			</form>
	</body>
</html>

验证电话号码格式 1[34578]+9个数字

正则表达式：/^1[34578]\d{9}$/

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<script type="text/javascript">
	    function checkPhonenumber(thisForm){
			with(thisForm){
				var phone=phonenumber.value;
				if(!(/^1[34578]\d{9}$/.test(phone))){
					alert("电话号码格式不正确，请重新输入！");
					return false;
				}
				else{
					return true;
				}
			}
		}
	</script>
		<body>
			<form action="#" method="post" onsubmit="return checkPhonenumber(this)">
				电话号码:<input type="text" id="phonenumber" />
				<input type="submit" value="验证电话号码格式" />
			</form>
	</body>
</html>

动态显示当前时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时间显示</title>	
	</head>
	<script type="text/javascript">
	    function dynamicShowTime(){
			var now=new Date();
			var year=now.getFullYear();
			var month=now.geyMonth()+1;
			var date=now.getDate();
			var hour=now.getHours();
			var minute=now.getMinutes();
			var second=now.getSeconds();
			var week;
			if(now.getDay()==0) week="星期日"；
			if(now.getDay()==1) week="星期一"；
			if(now.getDay()==2) week="星期二"；
			if(now.getDay()==3) week="星期三"；
			if(now.getDay()==4) week="星期四"；
			if(now.getDay()==5) week="星期五"；
			if(now.getDay()==6) week="星期六"；
			var message="现在时间："+year+"年"+month+"月"+date+"日&nbsp;&nbsp;"+hour+":"+minute+":"+second+"&nbsp;&nbsp;"+week;
			document.getElementById('time').innerHTML=message;
		}
	</script>
	<body onload="dynamicShowTime()">
		<div id="time"></div>
	</body>
</html>

二、JSP开发技术

1.JSP概述与开发环境搭建

2.JSP基础语法

jsp注释：（在运行源码上看不到，而HTML注释可以看到）

1.多行注释 /*定义一个字符串对象

定义一个字符串对象

例如： String s = new String(“欢迎你！”); out.println(“s”); 运行结果为欢迎你！

2.<%-- 这是jsp注释 --%>

下面这种是将Java代码写入jsp注释中，他不会运行，但在运行源码中会显示

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

<!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>
<% 
String s=new String("hello javascript");
out.println(s);
%>
<!-- 这是html注释，现在时间是<%=new Date().toLocaleString()%> -->
</body>
</html>


hello javascript

<!-- 这是html注释，现在时间是2021-11-20 16:08:37 -->

JSP表达式：<%=变量|表达式%>
例如： <%=3+4%> 运行为 7 123321的平方根为：<%=Math.sqrt(123321)%> 运行为

<body>
123321的平方根为：<%=Math.sqrt(123321)%><br/>
<% 
String s=new String("hello javascript");
%>
<%=s %>
</body>

3.JSP指令元素

4.JSP动作元素

5.JSP内置对象

三、数据库连接

1.数据库MySQL安装

数据库管理系统（DBMS）： MySQL ，SQL Server，Oracle，DB2，Sybase 下载MySQL

2.Navicat安装与配置

安装第三方的数据库可视化管理软件：navicat http://www.navicat.com.cn

3.SQL基本操作

SQL结构化查询语言

查询数据：select * from tableName;全查 select * from tableName where condition;条件查询

插入数据：insert into tableName values(value1,value2,…);顺序不可变

insert into tableName values(field1,field2,…) values(value1,value2,…);顺序可以变

（更新）修改数据：update tableName set field1=newValue1,field2=newValue2,… where condition;

删除数据：delete from tableName where condition;只删除表中数据

drop 删除表

创建表
create table member(
    id int auto_increment not null,       //id自增
    username varchar(30) not null,
    psw varchar(20) not null,
    primary key(id)
)
插入数据
insert into member(username,psw) values("lucene","123456");
查询数据
select * from member;
修改数据
update member set username='zhangsan' where id=2;    //修改id为2数据的名称
删除数据
delete from member where id=1;    //删除id为1的数据

4.JDBC基本操作

JDBC Java DataBase Connectivity Java数据库连接：是一种用于执行SQL语句的Java API，可以为多种关系数据库提供统一访问，它由一组用Java语言编写的类和接口。
JDBC基本功能：1.建立与数据库的连接； 2.发送SQL语句； 3.处理数据库操作结果；
在JDBC里，在Java API有与数据库进行交互的接口和类：java.sql.

1.DriverManager:驱动管理器主要作用是完成数据库驱动管理

2.Connection:数据库连接对象主要用来执行SQL语句

3.ResultSet:结果集对象，主要用来保存查询结果

JDBC基本操作

JDBC连接数据库基本步骤：

1.加载驱动

2.建立连接对象

3.创建语句对象

4.获得SQL语句的执行结果

5.关闭建立的对象，释放资源

驱动程序：

Oracle数据库 oracle.jdbc.driver.OracleDriver

SQL Server 2005/2008 数据库 com.microsoft.sqlserver.jdbc.SQLServerDriver

MySQL数据库 com.mysql.jdbc.Driver

数据库连接字符串:（连接数据库需要）

Connection conn=DriverManager.getConnection(连接字符串URL,数据库账号,数据库口令)；

不同数据库连接字符串：

Oracle数据库: 连接字符串URL “jdbc:oracle:thin:@localhost:1521/databaseName”

SQL Server 2005/2008: 连接字符串URL “jdbc:sqlserver://localhost:1433;databasename==xxx”

MySQL数据库: 连接字符串URL “jdbc:mysql://localhost:3306/databaseName”

数据库建立连接
package com_luence_dbutil;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.SQLException;

public class DBConnection {
public static void main(String[] args) {
	String url="jdbc:mysql://localhost:3306/test";
	String user="root";
	String password="******";
	try {
	//步骤1.加载数据库驱动程序
	Class.forName("com.mysql.jdbc.Driver");
	//步骤2.建立连接对象
	try {
		Connection conn=DriverManager.getConnection(url,user,password);
		if(conn!=null) {
			System.out.println("数据库连接成功！");
		}
		else {
			System.out.println("数据库连接失败！");
		}
	} catch (SQLException e) {
		// TODO Auto-generated catch block
		e.printStackTrace();
	}
	}
	catch(ClassNotFoundException e) {
		//TODO Auto-generated catch block
		e.printStackTrace();
	}
  }
}

1.数据查询
package com_luence_dbutil;

import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.sql.Statement;

public class DBConnection {
public static void main(String[] args) {
	String url="jdbc:mysql://localhost:3306/test";
	String user="root";
	String password="******";
	try {
	//步骤1.加载数据库驱动程序
	Class.forName(