目录
Statement和PreparedStatement预编译的区别(面试题)\
针对预编译对象原生操作方式 -->引入Commons-dbUtils
CSS (Cascading Style Sheet :层叠样式表)
Day1
1. JDBC原生7大操作步骤涉及的到的API
//1)导包---导入msyql驱动包
2)注册驱动--->Class.forName("com.mysql.jdbc.Driver") ; //为了向后兼容 ---在加载类
本身注册驱动需要用到java.sql.DriverManager:驱动管理类(管理诸如JDBC的服务)
提供静态功能:
1)注册驱动public static void registerDriver(Driver driver) throws SQLException
参数为:java.sql.Drvier---->需要接口的实现类---驱动jar包里面com.mysql.jdbc.Drvier如果上面的写法使用 DriverManager.registerDriver(new com.mysql.jdbc.Driver());这种方式,会多注册一遍
com.mysql.jdbc.Driver的原码里面
public class Driver extends NonRegisteringDriver implements java.sql.Driver {
public Driver() throws SQLException {
}static { //静态代码块
try {
DriverManager.registerDriver(new Driver()); //注册驱动了
} catch (SQLException var1) {
throw new RuntimeException("Can't register driver!");
}
}
}获取数据库的连接对象,返回值 java.sql.Connection
2)public static Connection getConnection(String url,
String user,
String password)
throws SQLExceptionurl: 协议://域名:端口/库名 (统一资源定位符号)
jdbc:mysql://localhost:3306/库名
user:mysql的用户名: root用户
password:密码
java.sql.Connection:与特定数据库连接会话 接口Statement createStatement() throws SQLException; 获取执行对象
返回返回的数据库执行对象--->里面创建具体子实现类对象
public class StatementImpl implements Statementjava.sql.Statement:用于执行静态SQL语句并返回其生成的结果的对象。
静态sql语句:
弊端
1)硬编码
2)存在sql字符串拼接String sql = "update account set balance = balance + 500 where id =1 " ;
两种通用操作
针对DDL语句(针对表/库相关的操作),DML语句的insert ,update,delete 更新操作
public int executeUpdate(String sql)针对DQL语句:数据库查询语句 ,返回表示数据库结果集的数据表，通常通过执行查询数据库的语句生成。
ResultSet executeQuery(String sql) throws SQLExceptionjava.sql.ResultSet 据库结果集的数据表
boolean next():是否下一个结果集
封装工具类
package com.qf.jdbc_utils_02;
import java.io.IOException;
import java.io.InputStream;
import java.sql.*;
import java.util.Properties;
/**
* @author 高圆圆
* @date 2022/12/5 10:27
*
* 提供这样一个工具类,构造方法私有,目的就是为了让外界不能new对象
* 封装哪些
*
* 1)每一次书写7大不步骤,都需要去获取数据库的连接对象,需要优化
* 2)每一次都要释放资源的代码,也需要优化
*/
public class JdbcUtils {
//成员变量声明三个变量
private static String url = null ;
private static String user = null ;
private static String password = null ;
private static String driverClass = null ;
//模拟 驱动jar包---Driver驱动类---提供静态代码块
static{
try {
//想办法获取这些参数---->提供配置文件 后缀名.properties---->放在src下面
//1)读取配置文件内容
InputStream inputStream = JdbcUtils.class.getClassLoader()
.getResourceAsStream("jdbc.properties");
//2)创建一个属性集合列表Properties
Properties prop = new Properties() ;
//System.out.println(prop) ;//测试 ---肯定空列表
//3)将1)获取资源文件的输入流对象---加载到属性集合列表中
prop.load(inputStream);
// System.out.println(prop) ; //测试--->有属性列表内容
//4)通过key获取value
driverClass = prop.getProperty("driverClass");
url = prop.getProperty("url") ;
user = prop.getProperty("user") ;
password = prop.getProperty("password") ;
//5)加载驱动类
Class.forName(driverClass) ;
} catch (IOException e) {
e.printStackTrace();
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}
private JdbcUtils(){}
/**
* 这个方法,获取数据库的连接对象
* @return
*/
public static Connection getConnection(){
try {
//需要驱动管理DriverManager获取连接对象
Connection connection = DriverManager.getConnection(url, user, password);//获取这三个参数的内容
return connection ;
} catch (SQLException throwables) {
throwables.printStackTrace();
}
return null ;
}
/**
* 释放资源,针对DQL语句操作释放的相关资源对象
* @param rs
* @param stmt
* @param conn
*/
public static void close(ResultSet rs,Statement stmt,Connection conn){
if(rs!=null){
try {
rs.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if(stmt!=null){
try {
stmt.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
if(conn!=null){
try {
conn.close();
} catch (SQLException throwables) {
throwables.printStackTrace();
}
}
}
/**
* 释放资源,针对DDL语句,DML语句
* @param stmt
* @param conn
*/
public static void close(Statement stmt,Connection conn){
close(null,stmt,conn);
}
}
项目开发中代码分层
包的命名:公司域名反写
com.qf.pojo/entity/domain---->实体类--->描述事物的属性和行为..
com.qf.service ---->业务服务层 ----->针对业务的接口
com.qf.service.impl----->针对业务的接口实现-------------------->以后开发中----大量的if.else...
com.qf.dao ----->DAO Data Access Object--->数据访问对象 ------>数据访问接口
XxxDao
com.qf.dao.impl
数据访问接口的实现------>JDBC代码
com.qf.test----->单元测试的
Day2
Statement和PreparedStatement预编译的区别(面试题)\
Statement执行sql的效率相对PreparedStatement非常低
1)每次书写一条sql就需要通过Statmeent将sql语句发送给数据库,效率低;同时,数据库的压力大!
2)发送的sql语句存在字符串拼接,就会出现安全问题--->SQL注入,恶意攻击数据库,造成安全漏洞!
PreparedStatement执行sql语句效率相对来说很高
1)将一条参数化 的sql语句发送给数据库,进行预编译将编译结果存储在预编译对象中,下一次直接赋值,
而且赋值很多次,发送一次sql,执行不同的参数!
2)参数化的sql语句不存在支持拼接,有效防止SQL注入,开发中使用PreparedStatement来对数据库CRUD
PreparedStatement原生的写法
package com.qf.preparedstatement_01; import com.qf.utils.JdbcUtils; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException; import java.util.Date; /** * @author 高圆圆 * @date 2022/12/6 10:41 * PreparedStatement原生的写法 * 1)注册驱动 * 2)获取数据库的连接对象 * 3)准备sql-------->参数化sql语句, 这些参数不能在sql写死,都是? 占位符号 * 4)通过数据库连接对象 获取预编译对象,同时将sql发送给数据库,(参数什么类型,第几个参数)都会存储在预编译对象中 * 5)给参数赋值 * 6)执行预编译的sql * 7)释放资源 * * */ public class PreparedStatementDemo { public static void main(String[] args) throws SQLException { //1)注册驱动 // 2)获取数据库的连接对象 Connection conn = JdbcUtils.getConnection(); //3)准备sql-------->参数化sql语句, 这些参数不能在sql写死,都是? 占位符号 //给员工表插入数据 String sql = "insert into employee(name,age,gender,salary,birthday) values(?,?,?,?,?)" ; //4)通过数据库连接对象 获取预编译对象,同时将sql发送给数据库,(参数什么类型,第几个参数)都会存储在预编译对象中 //Connection--->方法 PreparedStatement prepareStatement(String sql) throws SQLException System.out.println(sql) ; //interface PreparedStatement extends Statement{} PreparedStatement stmt = conn.prepareStatement(sql) ; //5)给参数赋值 //PreparedStatement //void setXX(int parameterIndex,XX实际值)throws SQLException //参数1:参数化sql里面第几个占位符号 第一个?--->1 stmt.setString(1,"盲僧") ; stmt.setInt(2,20) ; stmt.setString(3,"男") ; stmt.setInt(4,8000) ; stmt.setDate(5,new java.sql.Date(new Date().getTime())); //不断进行参数赋值 //6)通过预编译对象进行参数的赋值的操作 //int executeUpdate() throws SQLException 通用的更新操作 //ResultSet executeQuery() throws SQLException 通用的查询操作 int count = stmt.executeUpdate(); System.out.println(count); //7)释放资源 JdbcUtils.close(stmt,conn); } }
JDBC方式控制事务
package com.qf.jdbc_control_trasaction_03; import com.qf.utils.JdbcUtils; import java.sql.Connection; import java.sql.PreparedStatement; import java.sql.SQLException; /** * @author 高圆圆 * @date 2022/12/6 14:05 * * 之前通过sql指令的方式控制事务 (事务:让同时执行多个sql语句要么一块成功,要么一块失败!) * 1)开启事务 :start transaction ; * 2)执行多个sql语句/或者多张表的sql--添加/删除/修改 * 3)如果有问题,回滚事务 rollback; * 没有问题,提交事务 最终 commit ; * * * JDBC方式控制事务 * java.sql.Connection: * void setAutoCommit(boolean autoCommit) throws SQLException 设置提交模式 * 参数为false,表示禁用自动提交;为true,默认就是自动提交 * void rollback() throws SQLException 事务回滚,撤销之前的所有更新操作; (前提必须处于手动提交) * void commit() throws SQLException 提交事务,将数据永久保存! */ public class JdbcDemo { public static void main(String[] args) { Connection conn = null ; PreparedStatement ps1 = null ; PreparedStatement ps2 = null ; try { //操作账户表---完成转账操作 //jdbc方式 不控制事务 ---执行多个sql语句期间出问题了,会造成数据紊乱! //jdbc方式 控制事务 //获取连接对象 conn = JdbcUtils.getConnection(); //1)将自动提交设置手动提交模式----开启事务 /** * void setAutoCommit(boolean autoCommit) throws SQLException 设置提交模式 * 参数为false,表示禁用自动提交;为true,默认就是自动提交 */ conn.setAutoCommit(false) ; //准备多个sql---->参数化的sql语句 String sql1 = "update account set balance = balance - ? where id = ?" ; String sql2 = "update account set balance = balance +? where id = ?" ; //通过执行对象获取预编译对象 ps1 = conn.prepareStatement(sql1); ps2 = conn.prepareStatement(sql2); //参数赋值 ps1.setInt(1,500) ; ps1.setInt(2,2); ps2.setInt(1,500) ; ps2.setInt(2,4); //分别执行将参数给预编译sql进行操作 int count1 = ps1.executeUpdate(); System.out.println(count1); // int i = 10 / 0 ; //除数不能为0 (这块明显给了异常,开发中中间业务逻辑存在漏洞,造成程序异常) int count2 = ps2.executeUpdate(); System.out.println(count2); //提交事务 conn.commit(); } catch (SQLException throwables) { //void rollback() throws SQLException 事务回滚,撤销之前的所有更新操作; (前提必须处于手动提交) //如果中间出问题了,执行catch语句 try { conn.rollback(); } catch (SQLException e) { e.printStackTrace(); } throwables.printStackTrace(); //将异常信息处理--打印在控制台上 } finally { JdbcUtils.close(ps1,conn) ; JdbcUtils.close(ps2,conn) ; } } }
测试数据库连接池 Druid 获取连接对象的过程!
package com.qf.druid_04;
import com.alibaba.druid.pool.DruidDataSourceFactory;
import javax.sql.DataSource;
import java.io.IOException;
import java.io.InputStream;
import java.sql.Connection;
import java.util.Properties;
/**
* @author 高圆圆
* @date 2022/12/6 14:47
* 测试数据库连接池 Druid 获取连接对象的过程!
*/
public class DruidTest {
public static void main(String[] args) throws Exception {
//1)导包核心连接池的jar包 druid.jar
//2)准备了druid.properties配置文件
//3)创建属性集合列表
Properties prop = new Properties() ;
//4)读取src下面的连接池的配置文件
InputStream inputStream = DruidTest.class.getClassLoader().getResourceAsStream("druid.properties");
//5)将字节输入流内容加载到属性集合列表中
prop.load(inputStream);
//6)从连接池获取连接对象
//com.alibaba.druid.pool.DruidDataSourceFactory
//提供了静态方法public static DataSource createDataSource(Properties properties)
//创建数据源DataSource数据源接口对象---->本质----DruidDataSource实现类
DataSource ds = DruidDataSourceFactory.createDataSource(prop);
for(int x = 1;x<=11;x++){
Connection conn = ds.getConnection();
if(x == 3){
conn.close();// 将连接对象归还连接池中
}
System.out.println(conn);
}
}
}
Day3
针对预编译对象原生操作方式 -->引入Commons-dbUtils
package com.qf.dbutils_01;
import com.qf.dao.EmpDao;
import com.qf.pojo.Employee;
import com.qf.utils.DruidJdbcUtils;
import org.apache.commons.dbutils.QueryRunner;
import org.apache.commons.dbutils.handlers.BeanHandler;
import org.apache.commons.dbutils.handlers.BeanListHandler;
import org.apache.commons.dbutils.handlers.ScalarHandler;
import javax.management.Query;
import javax.sql.DataSource;
import java.sql.SQLException;
import java.util.List;
/**
* @author 高圆圆
* @date 2022/12/7 9:58
*
* Apache组织结构提供了开源工具类库,针对原生JDBC的一种简易封装,优化了代码,代码更加简洁!
* https://commons.apache.org/ 官网地址
*
* 1)导入核心包commons-dbutils-1.6/1.7 .jar
* 2)核心执行器:QueryRunner
* --->创建这个执行器
* public QueryRunner(DataSource ds) :指定数据源(连接池中核心参数....)
* 3)准备sql语句
* String sql = "insert into/update/delete from 增删改查 /"
* String sql = "select查询语句"
*
* 4)执行sql
* ---->使用反射完成
* 核心接口ResultSetHandler
*
* org.apache.commons.dbtuls.hadnlers. 下面的所有类都是
* 都是ResultSetHandler它的子实现类
* BeanListHandler---->将查询的结果集的所有数据封装带List<实体类类型>集合中,
* BeanHandler----> 将查询的某条记录封装到实体类中
* ScalarHandler--->将查询的结果集处理的时候返回的单行单列的数据
* 举例:统计总记录数
*
*/
public class DbutilsDemo {
public static void main(String[] args) throws SQLException {
//创建这个执行器
// public QueryRunner(DataSource ds) :指定数据源(连接池中核心参数....)
DataSource dataSource = DruidJdbcUtils.getDataSource();
QueryRunner qr = new QueryRunner(dataSource) ;
//准备sql语句
// String sql = "select * from employee" ;
//执行sql
//public <T> T query(String sql, ResultSetHandler<T> rsh, Object... params)
//参数1:sql语句
//参数2:查询的结果集的处理接口 子实现类BeanListHandler---->将查询的结果集封装带List集合中,
//参数3:SQL语句的参数(赋值的实际参数)
// public BeanListHandler(Class<T> type) :参数里面需要当前返回的实体类的字节码文件对象
/* List<Employee> list = qr.query(sql, new BeanListHandler<>(Employee.class));
for(Employee employee:list){
System.out.println(employee);
}*/
//通过员工的id查询员工---查询某个员工
//String sql = "select * from employee where id = ?" ;
//执行sql语句
//public <T> T query(String sql, ResultSetHandler<T> rsh, Object... params)
//参数1:sql语句
//参数2:查询的结果集的处理接口 子实现类BeanHandler---->将查询的某条记录封装到实体类中
//参数3:SQL语句的参数(赋值的实际参数)
// Employee employee = qr.query(sql, new BeanHandler<>(Employee.class), 4);
// System.out.println(employee);
//查询员工表的记录数
String sql = "select count(*) from employee" ;
//public <T> T query(String sql, ResultSetHandler<T> rsh, Object... params)
//参数1:sql语句
//参数2:查询的结果集的处理接口 子实现类ScalarHandler--->将查询的结果集处理的时候返回的单行单列的数据
// 举例:统计总记录数
//参数3:SQL语句的参数(赋值的实际参数)
Object object = qr.query(sql, new ScalarHandler<>());
//将Object-- String的valueOf(任何类型数据)--->数字字符串->Integer.parseInt(数字字符串)-->int
String numbStr = String.valueOf(object);
int count = Integer.parseInt(numbStr);
System.out.println(count);
}
}
前端三剑客
前端三剑客 :HTML,CSS,JavaScript
HTML : 超文本标记语言(Hyper Text Markup Language)
常用的标签:文本标签(换行/水平线/标题/段落/无序或者有序列表/上下标标签...)
超链接标签 :a
图形标签 img
表格标签 table
表单标签 ---必须熟练书写 (重要)
框架标签
h5标签 ---渲染视频/音频等等
CSS
CSS常用选择以及样式
DiV+CSS盒子模型 进行层级布局
JavaScript---livescript
运算符/变量(var定义变量)/流程控制语句
函数定义调用
js里面事件编程
js的dom编程
html入门以及常见的文本标签
<!DOCTYPE html> <!-- html文档声明 默认h5文档-->
<html>
<head>
<!-- 规定页面编码 -->
<meta charset="utf-8" />
<!-- 标题标签 -->
<title>html入门</title>
</head>
<body>
<!-- 书写标签内容 -->
<!-- <abc>helloword</abc> -->
<img src="img/adv.jpg" />
<button>点击</button>
<!-- 水平线 -->
<hr/>
<!--滚动标签
behavior="滚动方式"
scroll:穿入滚动
alternate:来回滚动
slide 滚动一边停掉
scrollamount ="正整数" 滚动速度
direction ="滚动方式"
left:右--左
right:左--右
down:上--下
up:下--上
bgcolor :背景色
-->
<marquee behavior="slide"
bgcolor="blue" direction="left" scrollamount="25">helloworld</marquee>
<!-- 段落标签p
特点:前后两端都携带空行
br:换行标签
-->
<p>helloHTML</p>
<p>helloJavaEE</p>
helloHTML<br/>
helloJavaEE
<!-- 列表标签 无序列表 ul li
有序列表 ol li
-->
<!-- 创建一个跳转标记 -->
<a name="ulFlag"></a>
<ul type="square">
<!--
type:标记列表前面的内容
disc:实心圆点
circle:空心圆点
square:实心正方形
-->
<li>手机数码</li>
<li>电脑办公</li>
<li>户外商品</li>
<li>数码专场</li>
</ul>
<ol type="1">
<!--
type="1/A/a/I" 指定列表项前面的标记
-->
<li>手机数码</li>
<li>电脑办公</li>
<li>户外商品</li>
<li>数码专场</li>
</ol>
<hr/>
<!-- 长引用 blockquote:针对文本进行缩进处理 类似于tab键的作用 -->
<blockquote>
猜一猜世界杯冠军
</blockquote>
<!--
div和span
div：块标签
后面结合CSS 控制元素,完成网页布局!(层级布局)
span:行内标签的作用 (后期用在js表单校验)
在表单项的后面动态提示,校验用户信息是否可用 使用行内标签
-->
<div>
<!-- 文本输入框-->
用户名:<input type="text" />
</div>
<div>
密码:<input type="password" />
</div>
昵称:<input type="text" id="name" onblur="checkUserName()" placeholder="请输入用户名"><span id="spanId"></span>
<br/><span>行内标签2</span>
<!-- 字体标签 font 以及居中标签 center-->
<center>helloworld</center>
<font color="red">手机数码</font>
</body>
<script>
//失去焦点
function checkUserName(){
//js代码
//获取id="name"的input标签对象
var name = document.getElementById("name").value ;
//alert(name) ;
//获取id="spanId"所在span标签对象,
var span = document.getElementById("spanId") ;
//如果获取到文本输入的内容不是"高圆圆",提出"用户名不满足格式"
if(name !="高圆圆"){
//用户名不满足格式
//span标签设置 innerHTML属性 :设置html文本
span.innerHTML = "用户名不满足格式".fontcolor("red") ;
}else{
span.innerHTML = "恭喜您可用".fontcolor("green") ;
}
}
</script>
</html>
图片标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图像标签</title>
<!--
img标签 ,空标题
<img/>
属性:
src:图像源属性 连接到url地址
访问本项目下的图片文件(相对路径)
title:在鼠标悬浮在图片上的文字提示
width/height:图片宽和高 (指定px,指定整个宽度或者高度所在的权重百分比)
alt:替代文本 当前图片连接url地址失效时(alt才起作用),后面的文字提示
-->
</head>
<!--
body通过属性background="设置背景图片"
这个图像必须和当前分辨率尺寸同等大,这个不会进行x轴和y轴重复
-->
<body >
<!--
src路径:相对路径
adv.jpg在img下面
页面是在"素材"文件夹里面
-->
<img src="img/adv.jpg" title="东鹏特饮" width="300px"
height="300px"
alt="这个东鹏特饮的广告图片"
/>
<hr/>
<!--
图像标签 在一些各种网站都会有存在,点击图片进行跳转
在img的外面会有a标签
超链接a标签
a 第一种用法:普通连接
href="url" 链接到的资源地址(后端接口/服务器地址)
target 打开到链接到的资源方式
_blank:新建窗口打开
_self:当前窗口直接打开
a 第二种用法:锚链接
1)创建一个跳转标记
<a name="锚点名称(标记名称)"></a>
2)创建一个跳转链接
不同页面的跳转
<a href="链接的url地址#锚点名称">xx文本</a>
超链接 的实际作用:
前后端交互: a标签里面href属性="url?携带参数"
url?key1=value1&key2=value2....
-->
<a href="../03_广告页面.html?keyword=手机" target="_self">
<img src="../img/adv.jpg" width="300px" height="300px" title="东鹏特饮" />
</a>
<br/>
<!-- 创建一个跳转链接-->
<a href="../01_html入门以及常见的文本标签.html#ulFlag">跳转到另一个地址的指定位置</a>
</body>
</html>
表格标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格标签</title>
<!--
table实际应用,就是后台管理模板里面使用数据表格完成数据CRUD
table表格标签
属性:
border="边框大小 指定像素大小"
width和height:宽和高(像素/权重百分比)
bgcolr:背景色
cellspacing:控制表格边框边框和单元边框之间空隙
align:表格对齐方式
子标签
caption:表格的标题
tr:行标签
th:表头内容,自动居中加粗的效果
td:单元格---理解为列
td单元格的合并
列合并:colspan="所占的单元格的数量"
行合并:rowspan="所占的单元格的数量"
table标签是早期可以布局的,现在很少用table布局
在一些很小的局部位置可能table,大部分布局div+css去布局!
-->
<style>
/*css样式*/
#add{
color: mediumseagreen;
float: right;
}
</style>
</head>
<body>
<input type="button" value="添加员工" id="add"/>
<table border="1px" width="600px" align="center" cellspacing="0" height="500px">
<caption>员工信息</caption>
<tr>
<th>员工ID</th>
<th>员工姓名</th>
<th>员工年龄</th>
<th>员工性别</th>
<th>员工工资</th>
<th>出生日期</th>
<th>员工操作</th>
</tr>
<tr align="center">
<td>1</td>
<td>文章</td>
<td>23</td>
<td>男</td>
<td>8000</td>
<td>1987-10-30</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>2</td>
<td>高圆圆</td>
<td>44</td>
<td rowspan="2">女</td>
<td>9000</td>
<td>1984-10-30</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>3</td>
<td>张佳宁</td>
<td>32</td>
<!-- <td>女</td> -->
<td>8000</td>
<td>1990-10-30</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td>4</td>
<td>王宝强</td>
<td>35</td>
<td>男</td>
<td>8000</td>
<td>1992-10-30</td>
<td>
<a href="#">修改</a>
<a href="#">删除</a>
</td>
</tr>
<tr align="center">
<td colspan="6">平均工资</td>
<td>7500</td>
</tr>
</table>
</body>
</html>
表单标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单标签</title>
<!--
表单标签 form
重要的几个属性
action="url地址 表单提交的后端地址"
method="表单提交方式get/post"
get提交和post提交的区别:
get提交
1)get提交是将信息数据提交地址栏上
url?key1=value1&key2=value2
2)相对post来说,不适合隐私数据(密码/输入动态密令---加密)
3)get提交到地址栏上,数据大小有限制的!
post提交
1)post提交不会提交到地址栏上,直接在浏览器中F12 ---network网络可以查看到
2)相对get来说,安全一些, (密码/输入动态密令---加密)
MD5加密
权限框架shiro---使用md5加密 (给原始密码上面进行 加盐)
123 +"qianfeng"
3)post提交不会将信息提交地址栏上,所以提交数据大小无限制!
-->
</head>
<body>
<form action="06_server.html" method="post">
<!--
表单项里面所有 的必须带name属性,给后端地址标记用户书写的内容!
文本输入框 -->
用户名:<input type="text" name="username" />
<br/>
<!-- 密码输入框,非明文显示 -->
密码:<input type="password" name="password" /><br/>
<!-- 单项按钮 radio -->
性别:
<input type="radio" value="1" name="sex" />男
<input type="radio" value="2" name="sex" />女<br/>
<!-- 复选框 checkbox -->
爱好:
<input type="checkbox" value="1" name="hobby" />足球
<input type="checkbox" value="2" name="hobby" />篮球
<input type="checkbox" value="3" name="hobby" />跑步
<input type="checkbox" value="4" name="hobby" />打游戏
<br/>
<!-- 文件上传组件file -->
上传图片:
<input type="file" name="photo" /><br/>
<!-- 日期组件 date -->
出生日期:
<input type="date" name="birthday" /><br/>
<!-- 下列菜单select -->
籍贯:
<select name="province">
<option value="0">请选择</option>
<option value="1">陕西省</option>
<option value="2">山西省</option>
<option value="3">广西省</option>
</select>
<br/>
<!-- 文本域textarea
rows:文本域的行数
cols:文本域中一行指定的字符数
-->
自我介绍:
<textarea rows="2" cols="20">
我很好,helloworld
</textarea><br/>
<!-- 普通按钮 -->
<input type="button" value="添加" />
<!-- 表单提交按钮 -->
<br/>
<input type="reset" value="清空" />
<input type="submit" value="注册" />
<!-- button标签和 input type="submit"都是提交数据-->
<!-- <button>注册</button> -->
</form>
</body>
</html>
Day4
CSS选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS选择器</title>
<!-- 常用的CSS选择器 -->
<style>
/*标签选择器*/
/* div{
font-size: 20px;
color: aquamarine;
} */
/* 类选择器 class
在标签中给定class属性,同一个html页面,class属性可以同名
类选择器 > 标签名称(元素)选择器
*/
/* .div1{
font-size: 30px;
color: red;
} */
/*
id选择器, 在标签指定id值,id值必须唯一!
不能重复
#id属性值{
}
id选择器优先级>class选择器>标签名称选择器
*/
/* #di1{
text-decoration: underline;
color: blue ;
} */
/*子元素选择器
选择器1 选择器2...
*/
/* #di1 span{
color: greenyellow;
font-size: 15px;
} */
/*
并集选择器
选择器1,选择器2....
*/
/* #di1,span,.div1{
font-size: 30px;
color: darkgray;
text-decoration: underline;
} */
/*
伪类选择器(锚伪类)
描述元素(标签)的一种状态:
link:鼠标没有经过的状态
hover:标经过状态
active:鼠标激活(点击元素,没有松开)的状态 (获取焦点)
visited:鼠标访问过的状态(点击并且松开了)
选择器名称:状态名称(不区分大小写){
控制样式;
}
注意事项:
a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效！
a:active 必须在 CSS 定义中的 a:hover 之后才能生效！
伪类名称对大小写不敏感。
*/
a:link{
color: darkorange;
font-family: "楷体";
}
a:visited{
color: darkgrey;
text-decoration: none;
}
a:hover{
color: green ;
font-size: 25px;
/* 去掉下划线 */
text-decoration: none;
}
a:active{
color:blue;
font-size: 30px;
text-decoration: underline;
}
/* 鼠标经过状态 */
#btn:hover{
color: #008000;
}
</style>
</head>
<body>
<div class="div1" id="di1">
<span>手机数码</span>
</div>
<div class="div1">电脑办公</div>
<span>数码专场</span>
<hr/>
<a href="02_CSS使用.html">跳转</a>
<input type="button" id="btn" value="按钮" />
</body>
</html>
CSS (Cascading Style Sheet :层叠样式表)
CSS:使用方式:三种 (行内/内部/外部)
CSS选择器 (重点)
id
class
标签名称(元素)
子元素选择器
并集选择器
伪类选择器
CSS常见的样式属性(重点)
font-size/color....
text-alitn/decoration
background-image/color/repeat/position
table表格
float:浮动样式
CSS盒子模型 (div+CSS层级布局)--->(重点)
万物皆盒子 将所有的标签都看盒子
将元素使用div包起来,进行样式控制
CSS定位属性
绝对定位
相对定位
固定定位
Day5
Java注解
Java注解----称为"Java标注",被解析应用到程序中;
所有的注解都有继承自 java.lang.annotation Annotation公共接口
注解本质就是一个接口---里面的方法名---->称为注解的"属性",而且注解中有且仅有一个value属性 (value()),
给属性赋值,value可以省略不写!
jdk提供内置注解---->标记 当前一些使用访问
@Override:标记当前这个方法是否重写方法(父类或者接口)
@SuppressWarnings: 抑制警告 :项目部署上线的,所有的类不能出现黄色警告线
@Deprecated:标记这个方法已经过时
@FunctionalInteface:标记接口用的,是否为函数式接口(接口中有且仅有一个抽象方法)
内置注解依赖一些"元注解"
@Target:标记指定的注解使用的范围
ElementType[] value(); value属性的返回值枚举类型的数组
ElementType:说明@Target使用的范围 (这四个经常用)
TYPE, 标记注解使用类上或者接口上
FIELD, 标记注解使用在成员变量上
METHOD, 标记这个注解可以在方法上用
PARAMETER 标记你这个注解可以在形式参数上用
@Retention: 标记当前这个注解能够在什么级别下用
RetentionPolicy value(); value属性返回值枚举RetentionPolicy
三个级别(三个阶段)
SOURCE, 源代码代码编译阶段
CLASS, 当前注解中类相关的加载阶段
RUNTIME 运行阶段
@Documented :解析的时候,针对类或接口上使用这个注解,保留文档注释!
js的使用方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js使用方式</title>
<!--
方式1,内部方式
head标签体中 写script标签,书写js代码
方式2,外部方式
前端人员, 在当前页码导入外部.js文件
script标签体 里面src属性="外部.js文件"
-->
<!-- <script>
//常用的函数: window.alert("提示框")
alert("hello,javascript") ; //window可以不写
//window里面确认提示
var flag = confirm("您忍心删除吗?") ;
//prompt带有一个消息和文本输入框
window.prompt("请输入动态密令:") ;
//向浏览器输出内容
document.write("hello,javaScript") ;
//浏览器中控制台打印内容
console.log("hello,javascript") ;
</script> -->
<script src="js/01.js"></script>
</head>
<body>
</body>
</html>
js中变量以及数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js中变量以及数据类型</title>
<script>
/*
javasript:弱类型语言(语法结构不严谨)
js中定义任何变量以及创建对象 使用var (var可以省略不写)
数据类型:
1)无论整数还是小数都是number 数值类型 --提升为 js内置对象 Number对象
2)boolan类型--- 提升内置对象 Boolean对象
3)无论是字符还是字符串 都是string类型 -- 提升js内置对象 String对象
4)对象类型 object 提升 Object---代表所有js对象的模板
5)未定义类型undefined--没有值
查看js中的变量的数据类型 typeof(变量名)
*/
a = 10
a = 20
var b = 3.14 ;
var c = true ;
var d = 'A';
var e = "hello" ;
var f = new Object();
var g ;
document.write("a的值是:"+a+",a的数据类型是:"+typeof(a)+"<br/>") ;
document.write("b的值是:"+b+",b的数据类型是:"+typeof(b)+"<br/>") ;
document.write("c的值是:"+c+",c的数据类型是:"+typeof(c)+"<br/>") ;
document.write("d的值是:"+d+",d的数据类型是:"+typeof(d)+"<br/>") ;
document.write("e的值是:"+e+",e的数据类型是:"+typeof(e)+"<br/>") ;
document.write("f的值是:"+f+",f的数据类型是:"+typeof(f)+"<br/>") ;
document.write("g的值是:"+g+",g的数据类型是:"+typeof(g)+"<br/>") ;
</script>
</head>
<body>
</body>
</html>
js的运算符_流程控制语句
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js的运算符_流程控制语句</title>
<script>
/**
* 运算符
* 算术 +,-,*,/,%
* 比较 :==,!=,<,<=,>,>=
* 逻辑:&&,|| 前端中使用 (提高执行效率:短路效果)
* 三元:(表达式)?执行成立的结果:否则不成立的结果;
* 赋值运算符: = ,+=,-=,*=,%/...
*/
//var a = 3 ;
//var b = false ; //true---1 成立
//false--0 不成立
//document.write((a+b)+"<br/>") ;
var x = 3 ;
var y = 4 ;
document.write((x+y)+"<br/>") ;
document.write((x-y)+"<br/>") ;
document.write((x*y)+"<br/>") ;
document.write((x/y)+"<br/>") ;
document.write((x%y)+"<br/>") ;
document.write("<hr/>") ;
document.write((x>=y)+"<br/>") ;
document.write((x==y)+"<br/>") ;
document.write((x!=y)+"<br/>") ;
document.write("<hr/>") ;
var m = 4 ;
var n = 5 ;
document.write("m:"+m+",n:"+n+"<br/>") ;
document.write(((++m==4) && (--n==4))+"<br/>") ;
document.write("m:"+m+",n:"+n+"<br/>") ;
document.write("<hr/>") ;
var age = 19 ;
document.write((age>18)?"成年人":"未成年人") ;
document.write("<hr/>") ;
/*
js流程控制语句
顺序结构语句:代码由上而下依次加载
选择结构语句 :
if语句
if
if...else
if ...else if...else...
switch(表达式或变量){
case "可以变量/也可以是常量":
语句1;
break ;
...
default :
语句n;
break ;
}
for-in语句:针对数组以及对象的属性进行遍历--类似于Java中的增强for
for(var 变量名 in 数组对象或者对象名){
使用变量名
}
*/
/* var num = "10" ;
if(num ==10){ //string:数值字符串和number进行比较==,将string-->number进行比较
alert("成立") ;
} */
var num = "10" ;
//alert(typeof(num)) ;
//js提供类型转换--strig---number
var num = parseInt(num) ;
//alert(typeof(num)) ;
switch(num){
case 10:
document.write("10匹配成功") ;
break ;
case 11:
document.write("11匹配成功") ;
break ;
default:
document.write("上面都不匹配") ;
break ;
}
</script>
</head>
<body>
</body>
</html>
88
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
