javaWeb+前端
html:超文本标记语言
-
标签：
格式：
双标签 <标签名> </标签名>
单标签 <标签名/>
<body>
标签内部
</body>
-
属性:不能独立存在；必须定义在标签里
<标签名 属性名="值"></标签名>
<标签名 属性名="值" />
-
结构标签
-
文本标签
1.文字标签：<font size = "字体大小" color="颜色" face="样式"></font>
RGB三原色:
Red 红
Blue 蓝
Green 绿
#00ced1---用0~255之间的十进制表示颜色，转为00-FF之间的十六进制表示颜色
2.实体字符
空格：
<: <
>: >
3.换行：<br>
4..标题标签：加粗、换行
<h1></h1>
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
5.列表标签：
无序：
<ul type="square(正方形) circle(圆) desc(实心圆)">
<li></li>
</ul>
有序：
<ol type="1数字a小写字母A大写字母 i小写古罗马 I大写罗马">
<li></li>
</ol>
自定义列表:
<dl>
<dt></dt>列表标题
<dd></dd>列表内容
<dd></dd>列表内容
....
</dl>
-
表格标签：
<table border="边框" width="表格宽" align="表格水平对齐：center(居中)" >
<tr heght="行高">
<td width="列宽"></td>
<td></td>
<td></td>
</tr>
<tr>
<td colspan="3">任何内容</td> <!--列合并-->
</tr>
<tr>
<td></td>
<td></td>
<td rowspan="2"></td> <!--行合并-->
</tr>
</table>
注：每行的列数必须相等
table必须包含tr，tr必须包含td，td里面可以定义任何内容
-
图标标签：
<img src="图片地址" width="宽度" height="高度"/>
地址：
相对路径：从当前位置所在位置出发的一个路径
当前位置/上一级目录../下一级目录
绝对路径：文件存储的真实路径
-
表单标签
<form action="表单提交地址" method="提交方式get/post" enctype="表单类型：普通表单/上传表单"></form>
get提交：提交的数据大小不超过2kb，在地址栏没有显示提交内容，建议查询/删除
post提交：提交的数据理论上没有限制，在地址栏没有显示提交内容，建议新增/1修改
普通表单：application/x-www-form-urlencoded
上传表单：multipart/forem-data
<input type="">
文本框：text
密码框：password
单选框：radio 同一组单选按钮的name属性值必须相同
复选框：checkbox
日期：date
隐藏域：hidden
上传组件：file
电子邮箱：email
数值：number
表单提交：submit
内容重置：reset
普通按钮：button
图片提交按钮：image
<select></select>下拉框
<select>
<option>1<option>
<option>2<option>
<option>3<option>
</select>
<textarea></textarea>多行文本框
注：所有表单元素必须定义在form标签里才有效
-
连接标签：
<a href="跳转的地址" target="打开方式_blank新窗口_self原窗口中打开"></a>
<body link="链接本身的颜色" alink="访问时的颜色" vlink="已访问的颜色"></body>
css
层叠样式表，美化页面
-
选择器
标签选择器：标签名做选择器
类选择器：class属性值做选择器
id选择器：id属性值做选择器
选择器的组合：
选择器1,选择器2{...}，表示：有相同的属性，但没有包含关系
选择器1 选择器2{...}，表示：选择器1包含了选择器2
-
语法：
选择器{属性名：值;}
例：img{width:100px;} 给所有图片宽度为100像素;
.a1{height:200px;width:100px;} 给class名为a1的对象高度为200像表、宽度为100像素;
#ip{width:300px;} 给id值为ip的唯一对象设置宽度为300像素；
方式一：<img style="width:300px; height: 100px;" />
方式二：
<head>
<style type="text/css">
属性
</style>
</head>
方式三：推荐***
<head>
<link type="text/css" rel="stylesheet" href="css独立文件" />
</head>
方式四：有的浏览器不支持
<head>
@import url("引入外部CSS独立文件"); //外部导入文件
</head>
-
常用属性：
| 性名 | 属性值 | 含义 |
|---|---|---|
| background-color | 颜色--英文|RGB三原色 | 背景色 |
| width | 数值，例：200px | 宽度 |
| height | 数值，例：200px | 高度 |
| border | 样式；颜色；粗细 | 上下左右四个边框架的样式、颜色、粗细 |
| border-top | 样式；颜色；粗细 | 上边框架的样式、颜色、粗细 |
| border-bottom | 样式；颜色；粗细 | 下边框架的样式、颜色、粗细 |
| border-left | 样式；颜色；粗细 | 左边框架的样式、颜色、粗细 |
| border-right | 样式；颜色；粗细 | 右边框架的样式、颜色、粗细 |
| color | 颜色--英文|RGB三原色 | 字体颜色 |
| float | left;right; | 使用块级div同行向左或向右对齐； |
-
定位postion：
absolute绝对定位
不参与页面布局；脱离页成的文档流；默认从页面左上定点开始定位；一般结合：top/left使用
relative相对定位
fiexd固定定位
javascript
弱类型语言是一种浏览器解释的脚本语言
分为三部分：
1.基本语法
2.文档对象模型DOM
3.浏览器对象模型BOM
-
JS使用方式
第一种：在HTML页面中添加
<script type="text/javascript">
//JS语法
</script>
第二种：引入独立外部JS文件
<script type="text/javascript src="外部JS文件路径"></scripte>
-
基本语法
声明变量：
var声明局部变量
不用var声明全局变量
数据类型：
基本类型：数值number 字符string 布尔boolean
异常--undefined未定义；null空值；NaN非数值；
引用类型：(后续json数据格式中的重点)：{属性名:值,属性名:值}
数组类型：[元素，元素，...] 类型不需要统一 长度不固定
输出方式：
弹框：
提示框：alter();
询问框:confirm();
询问并提示回答：prompt();
前端浏览器控制台打印：console.log(...);
直接输出在页面（了解）：document.write(内容);
运算符/条件判断语句/循环语句
for(var s in 数组名){
数组名[s];//s是下标
}
事件：用户在前端页面中触发一个行为
<标签名 onXXX="函数名(实参列表)"></标签名>
onmouseenter：鼠标进入事件--只触发当前标签进入事件
onmouseover：鼠标经过事件--触发当前标签进入事件，如果内部有子标签，也会触发函数
onclick：单击
ondblclick：双击
onmouseout：与onmouseover对应
onmouseleave：与onmouseenter对应
onmouseup：鼠标抬起
onmousedown：鼠标按下
onkeyup：键盘抬起
onkeydown：键盘按下
onfocus：获得焦点
onblur：失去焦点
onsubmit：表单提交
onchange：内容改变
oninput：内容输入
函数：及方法
定义：
function 函数名(形参列表){
//执行的JS部分
}
调用：
通过事件调用； 当事件触发时执行函数
通过定时器调用；
正则表达式：用于验证字符的内容格式
元字符：特殊的字符
\w： 任一个数字、字母、下划线
\d： 任一个数字
\s： 任一个空白字符
\b： 单词的边界；单词指的是连接的字符
\W： 与\w相反
\D: 与\d相反
\S： 与\s相反
\B: 与\b相反
量词：表示元字符的重复次数：元字符在左边，量词在右边
+: 至少重复一次
*： 不限制次数
?: 重复0次或1次
{m}: 重复m次
{m,}: 至少重复m次
{m,n}： 重复m-n次
[范围]:范围中任意一个字符，例：[a-z0-9A-Z] [aA9]
(): 表示整体括号中为一体
/内容/： 正则的定义边界
^: 开始的边界
$: 结束的边界
验证方法：
exec：查找满足条件的字符设置
test：返回true或flase的验证结果
使用:
//被验证的字符串
var val="abc";
//正则规则
var reg=/^\w+$/;
//用正则规则验证字符串格式的正确性
reg.test(val);-----返回true
reg.exec(val);-----返回下标
-
文档对象模型DOM
将文档对象树的结构展示：
获得元素：
通过class属性获得：
document.getElementsByClassName("class属性值");
注：得到一个数组
通过id属性获得：
document.getElementById("id属性值");
注：得到一个唯一对象
更改元素属性：
html属性：定义在标签里，<img src=""/>,src是html属性
对象名.属性名
css属性：style里的，<div style="width:100px"></div>,width是css属性
对象名.style.属性名
-
浏览器对象模型BOM
定时器：
定时每个固定时间执行一次：setInterval("函数名"，毫秒时间)
关闭定时器：clearInterval(定时器名)
在固定时间之后只执行一次：setTimeout("函数名"，毫秒时间)
关闭定时器：clearTimeout(定时器名)
jsp
运行服务器的页面
jsp页面内容：html标签/css样式/js脚本/java代码
在jsp中添加java代码：
<%
java代码
%>
<%= 表达式%>
-
javaweb项目
-
目录结构
src
web
WEB-INF:对外是隐藏目录
web.xml
jsp/html页面
环境：tomcat服务器
2.服务器
tomcat8,创建工程并且关联服务器；
将项目工程部署到服务器；启动服务器，此时工程就可以通过发布部署路径进行访问；
协议：IP地址：端口号/资源名称
http://localhost:8080/资源名index
3.servlet
运行在服务器端的应用程序；
功能：可以应答客户端的请求的一个特殊的java类；实现Servlet接口的类；有映射地址，通过映射地址访问类；用于控制层
-
创建servlet：由服务器创建实例，单实例多线程，由客户端发起请求时再由服务器提供两个参数(HttpServletRequest请求/HttpServlerResponse响应)
实现servlet接口：
重写五个方法：
init初始化方法---当前servlert被实例化后执行的方法
init()--初始化加载配置
init(ServletConfig config)--在加载配置信息，同时还需要读取初始化参数
destroy销毁方法
service应答所有请求方法
getServletConfig读取配置参数方法
getServletInfo获得servlet信息
继承HttpSrevlet类：
class 类名 extends HttpServlet{
//当页面中有请求时，doGet/doPost会自动应答
//重写doGet方法--biaodanget提交
//重写doPost方法--表单post提交
}
-
注册servlet：
配置方式：
web/WEB-INF/web.xml中添加配置
<servlet>
<servlet-name>相同的名称</servlet-name>
<servlet-class>全类名</servlet-class> 实际调用的是这个类中的doGet/doPost方法
<init-param>
<param-name>rowsperpage</param-name>
<param-value>10</param-value>
</init-param>
</servlet>
<servlet>
<servlet-name>相同的名称<servlet-name>
<url-pattern>路径</url-patten> 客户端浏览器访问这个路径
</servlet>
注解方式
在类的声明处添加@webservlet("映射路径")
4.MVC三层架构
M 模型层--dao/pojo
数据访问层dao
封装jdbc常用增删改查方法
业务层service
调用dao的方法
V 视图层--html页面的前端渲染数据
将控制层的数据渲染到页面中；
C 控制层--Servlet/SpringMVC应答客户端的请求，并且将模型层的数据渲染导数据层
接收前端请求参数：参数.getParameter("参数名")
调用业务层
返回数据到页面
JSTL标签：
java server page tag language标签库
替代jsp页面中的java代码
1.导入环境依赖：
jstl.jar
standard0jar
2.在使用标签的jsp页面加入：
<@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
3.使用：
3.1循环标签：
<c：forEach item="通过EL取出数据" var="变量">---变量对应的是EL取出的集合数据中
${变量.属性} ---变量的属性，需要get方法的支持
</c:forEach>
<c:forEach var="变量" begin="开始" end="结束" step="每次增加几">
${变量}
</c:forEach>
3.2单条件判断
<c:if test="条件表达式"> == if(条件表达式){}
执行的语句
</c:if>
3.3多重判断
<:choose>
<c:when test="条件表达式">
<c:when>
<c:when test="条件表达式">
<c:when>
<c:when test="条件表达式">
<c:when>
...
<otherwise>
</otherwise>
</c:choose>
EL表达式
expression language表达式语言，用于简化jsp页面；
替换getAttribute("名称")
-
语法：
${对象.名称}
${名称}---默认从小到大范围查找(pageScore当前页、requestScore请求域、sessionScope会话域、applicationScope服务器范围)
通过EL定义的隐式对象获得名称对应值；
pageScope page 作用域
requestScope request 作用域
sessionScope session 作用域
applicationScope application 作用域
param Request 对象的参数，字符串
parmValues Request 对象的参数，字符串集合
header HTTP 信息头，字符串集合
init Param上下文初始化参数
cookie Cookie值
pageContext 当前页面的pageContext
empty判断取出的对象是否为空：${empty(名称)},空-true;非空-false
controller控制层
每个controller对应一个模块，例UserController实现用户模块；--- 类内高类聚，类间弱耦合
-
问题一：每个controller中只有doget/dopost方法，对应get/post请求；如果某个模块有两个以上的业务，无法在当前控制层内类聚？
-
解决方案：重写service，它可以应答所有请求.
-
-
问题二：所有请求都由service方法应答，怎么在类内区分不同的业务？
-
解决方案：在请求时携带一个参数method，再根据method的不同值调用不同的方法，所以需要在类内定义不同业务的方法，
例：login方法，register方法，logout方法；并且这些方法的参数与service方法相同，因为这些都是由服务器创建.
实现：前端是表单提交，通过隐藏域实现参数的提交，他们的name="method"，value="不同"，后端根据method所携带不同的值判断调用哪个方法；在后端通过反射实现调用.
-
-
问题三：所有控制层controller里都需要进行反射实现统一调用，代码重复性高？
-
解决方案：创建一个controller的父类，把反射实现统一调用在父类中，由子类各自继承，由此实现代码的复用；只需要在子类中定义核心业务
-
-
controller层的返回处理：
原因：所有控制层都有处理结果的跳转；
结果：在父类中接收反射调用方法的返回值；再将值统一的跳转
request.getRequestDispatcher(返回值).forward(request,response);
重定向和请求转发
区别：请求转发对客户端而言，只发起一次请求，作用于服务器端；
重定向对客户端而言，发起多次请求，作用于客户端；
-
请求转发：客户端发起一次请求，服务器端将最终的结果直接返回客户端，在其中可能需要服务器端的其他资源，服务器请求其他资源，并返回给客户端；
-
重定向：客户端发起一次请求，服务器端将请求的结果地址返回给客户端，由客户端再次发起请求并获得结果；
cookie和session
-
cookie：在客户端存储技术，安全性低
实现：在客户端记录密码功能
客户端向服务器首次请求时创建cookie，并且由服务器响应回给客户端，客户端后续再次请求时，由服务器查询cookie的值
首次请求：
在服务器端的处理：
创建cookie并记录信息
Cookie cookie = new Cookie();
设置时间：
cookie.setMaxAge(秒)
通过response响应给客户端：
response.addCookie(cookie);
后续请求：向服务器发请求，服务器端查找cookie值，根据查到的结果再进一步处理；(后续异步处理实现)
-
session：在服务器端存储技术，也叫会话，后续实现购物车，安全性高
实现：记录用户登录状态、购物车信息、验证码...
由服务器自动创建，并保存在客户端的cookie中，有一个唯一的sessionid；如果在sessionid不变的情况下，那么就判断为同一个会话期间，可以在这个会话期间存取数据；
获得session：
HttpSession session = request.getSession();
存数据：
session.serAttribute(String名，Object值)
取数据:
session.getAttribute(String名)
结合EL表达式：
内置对象：sessionScope
${requestScope.名} 同理 ${sessionScope.名}
session时间：
默认30分钟
在web.xml中修改：
<session-config>
<session-timeout>10</session-timeout>
</session-config>
指的是连续的动作中间的空闲时间：
注：到时间，session会话失效，需要重新登陆；
注销功能：
session.invalidata()方法：强制session失效；
异步请求ajax
局部刷新技术；由事件触发函数，在函数中向服务器发起请求；
-
步骤：
1.创建异步对象：
var xxhr = new XMLHttpRequest();
异步请求基于这个对象；大部分浏览器都支持；
如果不支持，增加判断：
window.XMLHttpRequest返回值；
创建新对象：new ActiveXObject(Microsoft.XMMHTTP)
2.发送请求地址和请求方式：
xxhr.open("请求方式","请求地址")
get：路径中携带参数
xxhr.open("get","请求地址?参数名=值&参数名=值")
post：可以再send中携带参数，必须在send前边添加：
xxhr.open("请求方式","请求地址")
xxhr.setRequrstHearder("Content-type","application/x-www-form-urlencoded")
3.发送：
get:xxhr.send();
post:xxhr.send("请求地址?参数名=值&参数名=值")
....服务器处理过程
4.判断向服务器发送请求状态：
请求的五种状态码：
0：请求初始化 1：服务器已连接 2：请求已接收 3：请求处理中 4：请求已完成
xxhr.onreadystatechange=function(){
5.服务器的请求状态完成
再次判断，确定请求已被接受、服务器的连接已经建立、请求处理已完成；
if(xxhr.readyState==4){
6.判断客户端的响应状态
在请求完成后，判断响应码：4xx 5xx 3xx... 200表示响应成功
if(xxhr.status==200){
7.接收服务器端的返回数据
处理服务器返回的数据：字符串类型、json、xml
//--字符、json通过typof判断返回结果类型
//如果是json串，通过json.parse(json串)转为引用对象
xxhr.responseText
}
}
}
json
数据交互格式；JavaScript Object Notation，（js对象标记）
-
语法
{} 表示对象
[] 表示数组
: 表示属性与值之间的间隔
, 表示属性之间的分隔
例：{"name":"hello","age":20,"gender":true,"hobby":["1","2","3"]}
-
json解析：java类与字符串之间的转换
解析技术：FastJson、Gson、JackSon
例：FasteJson.jar
转为字符串：JSON.toJsonString(java类)
转为Java类：JSON.parseObject(json类，类对象)
-
浏览器处理JSON串
json转为JS的引用对象：JSON.parse(json串); 返回js引用对象
JS引用对象转为json串：JSON.stringify(引用对象); 返回json串
中文乱码问题
服务器端与客户端编码不一致导致的
-
处理响应的编码方式:
HttpServletResponse类型 respone----响应对象
respone.setCharacterEncoding("utf-8");
-
接收前端表单提交的中文乱码：
方案：使用String对象重新构造
new String(属性.getBytes("原编码"),"新编码")
例：String gender=new String(gender.getBytes("iso-8859-1"),"utf-8");
项目目标
javaweb项目： 前端页面：jsp页面、bootstrap前端框架、jquery(JS函数库)、ajax异步刷新技术(jquery封装ajax)、css(样式布局)、html(定义标签)、vue前端框架 后端：servlet控制器、MVC架构、jstl+el数据展示、maven工程(自动化构建工程)
电商项目：用户模块、商品模块、类别模块、地址模块、购物车模块、订单模块、后台管理模块 前台：给用户展示数据，提供浏览--查---jsp页面、bootstrap搭建页面 后台：管理员对数据的管理，体现对数据的增、删、改(DML)---html页面、vue展示数据
maven
自动化构建工具： 管理jar包; 自动编译、打包、测试、部署等
下载
配置环境变量： MAVEN_HOME：maven的安装根目录 path：bin目录
-
配置环境变量：
本仓库：目录，用于存放下载好的jar文件
conf/settings.xml配置文件：
本地仓库路径：<localRepository>E:/maven/repository</localRepository>
设置jdk版本号：
<profiles>
<!-- 在已有的profiles标签中添加profile标签 -->
<profile>
<id>myjdk</id>
<activation>
<activeByDefault>true</activeByDefault>
<jdk>1.8</jdk>
</activation>
<properties>
<maven.compiler.source>1.8</maven.compiler.source>
<maven.compiler.target>1.8</maven.compiler.target>
<maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion>
</properties>
</profile>
</profiles>
<!-- 让增加的 profile生效 -->
<activeProfiles>
<activeProfile>myjdk</activeProfile>
</activeProfiles>
-
仓库：
用于存放jar的目录
本地仓库：
settings.xml中设置 localRepository标签 中央仓库： 地址：http://repo.maven.apache.org/maven2/ 搜索依赖坐标的地址：https://mvnrepository.com/ 公共仓库：在settings.xml中配置 miror标签
<mirror>
<id>aliyun</id>
<!-- 中心仓库的 mirror(镜像) -->
<mirrorOf>central</mirrorOf>
<name>Nexus aliyun</name>
<!-- aliyun仓库地址 以后所有要指向中心仓库的请求，都会指向aliyun仓库-->
<url>http://maven.aliyun.com/nexus/content/groups/public</url>
</mirror>
bootstrap前端框架
-
布局容器：
<div class="container"></div>
-
栅格：
每行用row定义
<div class="row"></div>
每行分为多个列，最多12行
<div class="col-md-列数"></div>
注：sm-小屏幕；lg-大屏幕；md-中等屏幕；
注：设置列宽；行列高度自适应；需要设置内容高度；
-
样式/组件/插件
直接将bootstrap官网的内容直接CV并且相应的修改
jQuery
是js的函数库；
-
基本语法：从文档加载开始，当加载完成获得dom对象，并且绑定事件，以及事件触发时所执行的函数
//替换window.onload=function(){}
$(function(){
//加载文档
//替换domcument.getElementById()
$("#id名").事件名(function(){
//由事件引起的函数
})
})
-
选择器：获得一个dom对象
$("选择器名称") ---获得jquery对象
注：document.getElementById();获得的是一个dom对象；
jquery对象不能与dom对象直接相等；
-
函数：
需要由事件来调用
function(){
//执行的代码
}
-
jquery-ajax
get请求:
$.get(url,params,fn,type)
poat请求：
$.post(url,params,fn,type)
*$.getJSON(url,params,fn)：直接返回json数据
url：请求的路径
params：参数，key：value
fn：请求成功后的回调函数，请求成功后执行的函数
type：返回数据格式，默认text文本 可转成json格式
过滤器
过滤器有拦截功能，可以解决service中冗余代码、登录验证功能；
编写：实现filter接口
重写方法 init/destroy/doFilter
Class 类名 implements Filter{
@Override
public void init(FilterConfig filterConfig) throw ServletException{
//初始化方法
}
public void doFilter(ServletRequest servletRequest,ServletResponse servletRespones) throw IOExeption,ServletExceotion{
//过滤链：处理业务逻辑判断
//再根据结果跳转不同地址
//放行
filterChain.doFilter(servletRequest ,servletResponse)
//拦截 跳转其他路径
}
@Override
public void destroy() {
//销毁方法
}
}
注册：web.xml中配置
<filter>
<filter-name></filter-name>
<filter-class></filter-class>
</filter>
<filter-mapping>
<filter-name></filter-name>
<filter-class></filter-class>
</filter-mapping>
注解：
@WebFilter("映射路径")
过滤器中路径映射方式：
精确匹配：/user
后缀匹配：***.后缀**，例：user.do goods.action
通配符：/*，匹配任意路径
监听器
xxxListener,用于监听请求域、会话域、服务器域的创建、销毁、添加对象、更改对象、移除对象
创建监听接口：实现接口，重写抽象方法
ServletRequestListener 监听请求创建、销毁
ServletRequestAttributeListener 监听请求添加对象、更改对象、移除对象
HttpSessionListener 监听会话创建、销毁
HttpSessionAttributeListener 监听会话添加对象、更改对象、移除对象
ServletContextListener 监听服务器创建、销毁
ServletContextAttributeListener 监听服务器添加对象、更改对象、移除对象
注册监听：
配置：
web.xml：
<listener>
<listener-class>全类名称</listener-class>
</listener>
注解：@WebListener
验证码
依赖于servlet类型，实现BufferedImage的绘制，最终以输出流形式向页面展示；
BufferedImage图形绘制
new BufferedImage(宽,高，颜色类别Rgb)
Graphics图形上下文对象
设置相关的图形、颜色、字体、背景、字符....
获得对象：
Graphics g = getGraphics();
ImageIO图象输入/出流对象
write(bufferedImage对象，文件类型，输出流)；
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通