JavaWeb笔记

最新推荐文章于 2024-07-22 14:15:06 发布

派大星ye

最新推荐文章于 2024-07-22 14:15:06 发布

阅读量400

点赞数

分类专栏： JavaWeb 文章标签： java html web

本文链接：https://blog.csdn.net/weixin_49116135/article/details/127057636

版权

JavaWeb 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

包含JDBC、HTML、CSS、JS等笔记

摘要由CSDN通过智能技术生成

以下笔记借鉴于黑马Javaweb视频，记录为个人学习笔记参考。

包含JDBC-HTML-CSS-JS等概念

JDBC

JDBC就是使用Java语言操作关系型数据库的一套API

//1.注驱动
Class.forName("com.mysql.jdbc.Driver");
//2.茯取连按对象
String url = "jdbc:mysql://127.0.0.1:3306/db1？useSSL=false";
String username "root";
String password "12345678";
Connection conn = DriverManager.getConnection(url,username,password);
//3.定义SQL
String sql = "update account set money = 2000 where id 1";
//14.获取执行sqL的对
Statement stmt = conn.createStatement(); 
//5.执行sq1
int count =  stmt.executeUpdate(sql); 
//6.处理结果
//System.out.println(count); 
//7.释放资源
stmt.close();
conn.close():

JDBC简介

概念：

JDBC就是使用Java语言操作关系型数据库的一套API
全称:(Java DataBase Connectivity)Java数据库连接

在这里插入图片描述

本质：

官方(sun公司)定义的一套操作所有关系型数据库的规则，即接口
各个数据库厂商去实现这套接口，提供数据库驱动jar包
我们可以使用这套接口(JDBC)编程，真正执行的代码是驱动jar包中的实现类

好处：

各数据库厂商使用相同的接口，java代码不需要针对不同数据库分别开发
可随时替换底层数据库，访问数据库的java 代码基本不变

快速入门

语法

//1.注驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//2.茯取连按对象
String url = "jdbc:mysql://127.0.0.1:3306/db1？useSSL=false";
String username "root";
String password "12345678";
Connection conn = DriverManager.getConnection(url,username,password);
//3.定义SQL
String sql = "update account set money = 2000 where id 1";
//14.获取执行sqL的对象statement
Statement stmt = conn.createStatement(); 
//5.执行sq1-通过execute方法
int count =  stmt.executeUpdate(sql); //受影响的行数
//6.处理结果
//System.out.println(count); 
//7.释放资源
stmt.close();
conn.close():

API详解

DriverManager驱动管理

DriverManager(驱动管理类)作用：

注册驱动
获取数据库连接

Connection数据库连接对象

Connection(数据库连接对象)作用：

获取执行SQL的对象
管理事务

//获取执行SQL的对象
//普通执行SQL对象
 Statement createStatement()
//预编译SQL的执行SQL对象:防止SQL注入
 PreparedStatement prepareStatement(sql)
//执行存储过程的对象
 CallableStatement prepareCall(sql)

//JDBC事务管理:Connection接口中定义了3个对应的方法
//开启事务:
				setAutoCommit(true/false);
//true为自动提交事务;false为手动提交事务,即为开启事务 
//提交事务:			
              commit(); 
//回滚事务:
              rollback();
//举例
try{
  conn.setAutoCommit(false);
int count1 =  stmt.executeUpdate(sql1); 
int count2 =  stmt.executeUpdate(sql2); 
  conn.commit();
}catch(Exception throwables){
  conn.rollback();
  throwables.printStackTrace();
}

Statement

Statement作用:

执行SQL语句

int executeUpdate(sql);
//执行DML、DDL语句
//返回值:(1)DML语句影响的行数
//			(2)DDL语句执行后,执行成功也可能返回0
ResultSet executeQuery(sql);
  //执行DQL语句 >返回值:ResultSet结果集对象

ResultSet

ResultSet(结果集对象)作用：

封装了DQL查询语句的结果

ResultSet executeQuery(sql);
  //执行DQL语句 >返回值:ResultSet结果集对象

获取查询结果

xxx.next();
//(1)将光标从当前位置向前移动一行(2)判断当前行是否为有效行 >返回值：
//true：有效行，当前行有数据 false：无效行，当前行没有数据
xxx.getXxx(参数); //获取数据
//xxx：数据类型；如：int getlnt(参数)；String getString(参数) 
/*
参数：
int：列的编号，从1开始
String：列的名称
*/

举例

在这里插入图片描述

//循环判断游标是否是最后一行末尾 
while(rs.next()){
//获取数据 
  rs.getXxx(参数);}

prepareStatement

PreparedStatement作用：

预编译SQL语句并执行：预防SQL注入问题

SQL注入

SQL注入是通过操作输入来修改事先定义好的SQL语句，用以达到执行代码对服务器进行攻击的方法。

//① 获取PreparedStatement对象
//SQL语句中的参数值,使用?占位符替代
String sql "select from user where username=? and password=?"
//通过Connection对象获取,并传入对应的sgl语句
PreparedStatement stmt =  conn.prepareStatement(sql);
//② 设置参数值
//PreparedStatement对象:
/*setXxx(参数1,参数2):给?赋值 
Xx:数据类型;如setInt(参数1,参数2) 
  参数:
参数1:?的位置编号,从1开始
参数2:?的值*/
//③ 执行SQL 不需要再传递sql
executeUpdate();
executeQuery();

PreparedStatement好处：

预编译SQL，性能更高
防止SQL注入：将敏感字符进行转义

数据库连接池

数据库连接池是个容器，负责分配、管理数据库连接(Connection)
它允许应用程序重复使用一个现有的数据库连接，而不是再重新建立一个；
释放空闲时间超过最大空闲时间的数据库连接来避免因为没有释放数据库连接而引起的数据库连接遗漏

好处：

资源重用
提升系统响应速度
避免数据库连接遗漏

实现

标准接口：DataSource

官方(SUN)提供的数据库连接池标准接口，由第三方组织实现此接口。
功能：获取连接Connection getConnection()

常见的数据库连接池：

DBCP
C3P0
Druid

Druid

Druid(德鲁伊)连接池是阿里巴巴开源的数据库连接池项目,功能强大，性能优秀，是ava语言最好的数据库连接池之一。

使用步骤

public static void main(String[]args)throws Exception{
//1.导入jar包
//2.定义配置文件
//3.加载配置文件
Properties prop = new Properties();
prop.Load(new FileInputstream(name:"src/db.properties")); 
//4.获取连接池对象
DataSource dataSource = DruidDataSourceFactory.createDataSource(prop);
//5.获取数据库连接Connection
Connection connection = dataSource.getConnection();
}

Html

参考地址

HTML是一门语言，所有的网页都是用HTML这门语言编写出来的
HTML(HyperText Markup Language)：超文本标记语言

超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容

标记语言：由标签构成的语言
HTML运行在浏览器上，HTML标签由浏览器来解析
HTML标签都是预定义好的。例如：使用展示图片
W3C标准：网页主要由三部分组成

结构：HTML

表现：CSS

行为：JavaScript

基础标签

标签	描述
`<h1>-<h6>`	标题
`<font>`	文本字体、尺寸、颜色
`<b>`	粗体
`<i>`	斜体
`<u>`	下划线
`<center>`	文本居中
`<p>`	段落
`<br>`	换行
`<hr>`	水平线

在这里插入图片描述

图片/音/视频标签

标签	描述
`<img>`	图片
`<audio>`	音频
`<video>`	视频

img

src：规定显示图像的URL(统一资源定位符)
height：定义图像的高度
width：定义图像的宽度

audio

src:：规定音频的URL
controls：显示播放控件

video

src：规定视频的URL
controls：显示播放控件

超链接标签

标签	描述
`<a>`	超链接

href：指定访问资源的URL
arget：指定打开资源的方式

_seIf：默认值，在当前页面打开
_blank：在空白页面打开

列表标签

标签	描述
`<ol>`	有序列表
`<ul>`	无序列表
`<li>`	列表项

在这里插入图片描述

表格标签

标签	描述
`<table>`	表格
`<tr>`	行
`<td>`	单元格
`<th>`	表头单元格

在这里插入图片描述

布局标签

标签	描述
`<div>`	定义HTML文档中的一个区域部分，经常与CSS一起使用，用来布局网页
`<span>`	用于组合行内元素

表单标签

标签	描述
`<from>`	表单
`<input>`	表单项，通过ype属性控制输入形式
`<label>`	为表单项定义标注
`<select>`	下拉列表
`<option>`	下拉列表的列表项
`<textarea>`	文本域

form：定义表单

action：规定当提交表单时向何处发送表单数据，URL
method：规定用于发送表单数据的方式
- get：浏览器会将数据直接附在表单的actionURL之后,大小有限制
- post：浏览器会将数据放到http请求消息体中。大小无限制

表单标签-表单项

在这里插入图片描述

举例

在这里插入图片描述

CSS

CSS(Cascading Style Sheet):层叠样式表，是一门语言,用于控制网页表现
W3C标准:网页主要由三部分组成

结构:HTML
表现:CSS
行为:JavaScript

导入方式

内联样式

在标签内部使用style属性，属性值是css属性键值对

<div style="color:red"> Hello CSS~ </div>

内部样式

定义

<style type="text/css">
div{ color:red;} </style>

外部样式

定义ink标签，引入外部的css文件

<link rel="stylesheet" href="demo.css">

CSS选择器

在这里插入图片描述

JavaScrip

参考地址

JavaScript（JS）是一门跨平台、面向对象的脚本语言，来控制网页行为的，它能使网页可交互
W3C标准：网页主要由三部分组成

结构：HTML
表现：CSS
行为：JavaScript

JavaScript和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

导入方式

内部脚本：将JS代码定义在HTML页面中
外部脚本：将S代码定义在外部S文件中，然后引入到HTML页面中

内部脚本

在这里插入图片描述

外部脚本

在这里插入图片描述

基础语法

书写语法

区分大小写：与va一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无
单行注释：//注释内容多行注释 /**/
大括号表示代码块

输出语句

使用window.alert(); 写入警告框

在这里插入图片描述

使用document.write(); 写入HTML输出

在这里插入图片描述

使用console.log(); 写入浏览器控制台

在这里插入图片描述

变量

JavaScript中用var关键字(variable的缩写)来声明变量
var test 20； test=“张三“；

JavaScript是一门弱类型语言，变量可以存放不同类型的值
变量名需要遵循如下规则：

组成字符可以是任何字母、数字、下划线(_)或美元符号($)
数字不能开头
建议使用驼峰命名

ECMAScript6新增了Iet关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明

新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型

JavaScript中分为:原始类型和引用类型
5种原始类型：

number：数字（整数、小数、NaN(Not a Number)
string：字符、字符串,单双引皆可
boolean：布尔.true,false
null：对象为空
undefined：当声明的变量未初始化时,该变量的默认值是undefined

使用typeof运算符可以获取数据类型

在这里插入图片描述

运算符

在这里插入图片描述

和=区别

在这里插入图片描述

类型转换

在这里插入图片描述

流程控制语句

与java一样

函数

函数（方法）是被设计为执行特定任务的代码块

//定义：JavaScript函数通过function关键词进行定义，语法为：
function functionName(参数1,参数2)
{ 要执行的代码
}
//形式参数不需要类型。因为JavaScript；是弱类型语言
//返回值也不需要定义类型，可以在函数内部直接使用return返回即可
function add(a,b){ 
return a b; }
//调用
let result = add(1,2);

数组

JavaScript Array对象用于定义数组

//定义
//方式1
var 变量名 = new Array(元素列表); 
var arr =  new Array(1,2,3);
//方式2
var 变量名 = [元素列表];
var arr = [1,2,3];

//访问
arr [索引] = 值;
arr[0] = 1;

//删除元素
arr.splice(0,1);
//添加
arr.push(100);

//Js数组类似于Java集合，长度，类型都可变

String

//定义
//方式一
var 变量名 = new String(s);
var str = new String("hello");
//方式二
var 变量名 =s；
var str ="hello";
var str ='hello';

/*
charAt()  返回在指定位置的字符。
indexof() 检索字符串。
*/

自定义对象

var 对象名称 = {
属性名称1:属性值1， 
属性名称2:属性值2，
  ...
函数名称：function(形参列表){}
...
};

//举例
var person = {
  name:"zhangsan", 
  age:23, 
  eat:function (){
    alert("干饭~");
  }
};

BOM

（Browser Object Model）浏览器对象模型
JavaScript将浏览器的各个组成部分封装为对象

Window：浏览器窗口对象
Navigator：浏览器对象
Screen：屏幕对象
History：历史记录对象
Location：地址栏对象

Window

Window：浏览器窗口对象

//window.可以省略
window.alert("abac");

属性(部分)获取其他BOM对象

在这里插入图片描述

方法（部分）

在这里插入图片描述

History

在这里插入图片描述

Location

在这里插入图片描述

举例

在这里插入图片描述

DOM

（Document Object Model）文档对象模型将标记语言的各个组成部分封装为对象

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

JavaScript通过DOM，就能够对HTML进行操作了

改变HTML元素的内容
改变HTML元素的样式(CSS)
对HTML DOM事件作出反应
添加和删除HTML元素

W3C DOM标准被分为3个不同的部分:

a.核心DOM:针对任何结构化文档的标准模型

Document：整个文档对象
Element：元素对象
Attribute：属性对象
Text：文本对象
Comment：注释对象

b.XML DOM:针对XML文档的标准模型

c.HTML DOM:针对HTML文档的标准模型

.Image：
Button ：

获取element

获取：使用Document岖时象的方法来获取

getElementByld：根据id属性值获取，返回一个Element对象
getElementsByTagName：根据标签名称获取，返回Element对象数组
getElementsByName：根据name属性值获取，返回Element对象数组
getElementsByClassName：根据class属性值获取，返回Elementi对象数组

具体使用根据文档

事件监听

事件绑定

//方式一：通过HTML标签中的事件属性进行绑定
<input type="button"onclick='on()'> 
  function on(){
  alet("我被点了");
}

//方式二：通过DOM元素属性绑定 -推荐
<input type="button"id="btn">
document.getElementByld("btn").onclick = function(){alert("我被点了");}