这里写目录标题

getParameter和getAttribute区别（超详细分析）
详解request.getRequestDispatcher().forward(request,response)和response.sendRedirect()的用法和区别
[Servlet 九大对象和四个作用域](https://www.cnblogs.com/vice/p/9125431.html)
request对象常用方法总结
javaWeb
设置欢迎页
jQuery DOM
- HTML的操作方法
- 文本内容的操作方法
- value的操作方法
jQuery效果
- 隐藏和显示
- - 隐藏显示速度
  - 可以使用toggle()方法来切换hide()和show()方法。
- 淡入淡出
- - fadeIn()用于淡入已隐藏的元素
  - fadeOut()方法用于淡出可见元素
  - fadeToggle()方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
PS: jQuery 事件 - ready() 方法
Ajax
- 三步曲
- jQuery方式
- - $.ajax()
  - $.get()
  - $.post()
案例
json
- Java对象转JSON
- - 步骤：
- JSON转Java对象
- - 步骤：
配置udbc
文件上传
- 上传对Servlet的限制
- 如何实现文件上传
- - 相关Jar包
- 具体步骤
- - 文件名或普通表单项乱码
  - 同名文件上传问题
JSTL
小技巧
- 转义字符，转json练习
- window.location.href的用法
- 删除提醒
- 分页显示
- logout
- 点击事件返回上一页面
- 满框parent.location效果
- 添加成功后弹窗，跳转## 添加成功后弹窗，跳转
- 非空校验jQuery
- Exception

设置欢迎页

<-- 配置欢迎首页，适用服务端  -->
<welcome-file-list><welcome-file>/admin/login.jsp</welcome-file></welcome-file-list>

<-- 配置欢迎首页，适用客户端  -->
<script>window.location.href='/apsfc/admin/login.jsp';</script>

jQuery DOM

HTML的操作方法

html()：获取元素的HTML
html(val)：设置元素的HTML

文本内容的操作方法

text()：获取元素的文本内容
text(txt)：设置元素的文本内容

value的操作方法

val()：获取元素的value内容
val(val)：设置元素的value内容

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><style>table {width: 500px;margin: auto;}</style><script src="js/jquery-3.4.1.min.js"></script><script>//非空校验function checkEmpty(id, infoId, info) {if($(id).val() == '') {$(infoId).text(info);return false;}return true;}//校验所有function checkAll() {if(checkEmpty("#username", "#usernameInfo", "用户名不能为空") && checkEmpty("#password", "#passwordInfo", '密码不能为空')) {return true;}return false;}function clearInfo(infoId) {$(infoId).text("");}$(function () {$("#username").blur(function () {checkEmpty("#username", "#usernameInfo", "用户名不能为空");}).focus(function () {clearInfo("#usernameInfo");});$("#password").blur(function () {checkEmpty("#password", "#passwordInfo", '密码不能为空');}).focus(function () {clearInfo("#passwordInfo");});$("#fm").submit(function (e) {if(!checkAll()) {e.preventDefault();}});});</script>
</head>
<body><form id="fm" action="#" method="post"><table><tr><td><label for="username">账号</label></td><td><input id="username" type="text"/></td><td><span id="usernameInfo"></span></td></tr><tr><td><label for="password">密码</label></td><td><input id="password" type="password"/></td><td><span id="passwordInfo"></span></td></tr><tr><td colspan="3" style="text-align: center;"><button type="submit">登录</button></td></tr></table></form>
</body>
</html>

jQuery效果

隐藏和显示

hide()隐藏html元素
show()显示html元素

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(function(){$("#hide").click(function(){$("p").hide();});$("#show").click(function(){$("p").show();});});</script>
</head>
<body><p>如果你点击“隐藏” 按钮，我将会消失。</p><button id="hide">隐藏</button><button id="show">显示</button>
</body>
</html>

隐藏显示速度

$(selector).hide(speed,callback);
$(selector).show(speed,callback);

可选的speed参数规定隐藏/显示的速度，可以取以下值：“slow”、“fast” 或毫秒。

可选的callback参数是隐藏或显示完成后所执行的函数名称。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){//$("p").hide(1000);//$("p").hide("slow");//$("p").hide("fast");$("p").hide(1000, function(){alert("Hide() 方法已完成!");});});});</script>
</head>
<body><button>隐藏</button><p>这是个段落，内容比较少。</p><p>这是另外一个小段落</p>
</body>
</html>

可以使用toggle()方法来切换hide()和show()方法。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script>$(document).ready(function(){$("button").click(function(){$("p").toggle();});});
</script>
</head>
<body><button>隐藏/显示</button><p>这是一个文本段落。</p><p>这是另外一个文本段落。</p>
</body>
</html>

淡入淡出

fadeIn()用于淡入已隐藏的元素

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeIn();$("#div2").fadeIn("slow");$("#div3").fadeIn(3000);});});</script>
</head><body><p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p><button>点击淡入 div 元素。</button><br><br><div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>
</html>

fadeOut()方法用于淡出可见元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="js/jquery-3.4.1.min.js"></script>
<script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeOut();$("#div2").fadeOut("slow");$("#div3").fadeOut(3000);});});
</script>
</head><body><p>以下实例演示了 fadeOut() 使用了不同参数的效果。</p><button>点击淡出 div 元素。</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

fadeToggle()方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><script src="js/jquery-3.4.1.min.js"></script><script>$(document).ready(function(){$("button").click(function(){$("#div1").fadeToggle();$("#div2").fadeToggle("slow");$("#div3").fadeToggle(3000);});});</script>
</head>
<body><p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p><button>点击淡入/淡出</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div>
</body>
</html>

PS: jQuery 事件 - ready() 方法

DOM（文档对象模型）已经加载，并且页面（包括图像）已经完全呈现时，会发生 ready 事件。

由于该事件在文档就绪后发生，因此把所有其他的 jQuery 事件和函数置于该事件中是非常好的做法。正如上面的例子中那样。

ready() 函数规定当 ready 事件发生时执行的代码。

ready() 函数仅能用于当前文档，因此无需选择器。

允许使用以下三种语法：

语法 1
$(document).ready(function)
语法 2
$().ready(function)
语法 3
$(function)

Ajax

三步曲

1.编写对应处理的Controller,返回消息或者字符串或者json格式的数据；
2.编写Ajax请求

1.url：Controller的请求
2.data:键值对
3.success:回调函数

3.给Ajax绑定事件，点击click，失去焦点onblur,键盘弹起keyup

jQuery方式

$.ajax()

语法：$.ajax({键值对})
参数：

url：请求路径
type：请求方式 ("POST" 或 "GET")，默认为 "GET"
data：请求参数，可以是“key=value”格式的字符串，也可以是JSON
dataType：预期服务器返回的数据类型 text
success：请求成功后的回调函数

function ajaxTest() {$.ajax({url:"${pageContext.request.contextPath}/ajaxServlet",//请求地址type:"GET",//请求方式data:"name=ZhangSan",//发送的数据success:function (data) {//成功之后的回调函数alert(data);},error:function (err) {//失败之后的回调函数console.log(err);}});
}

$.get()

语法：$.get(url, [data], [callback], [type])

参数：

url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

function ajaxTest() {/*** 四个参数：请求地址、请求数据、成功回调函数、预计的服务器响应的数据类型。*/$.get("${pageContext.request.contextPath}/ajaxServlet", "name=Tom", function (data) {alert(data);}, "text");
}

$.post()

语法：$.post(url, [data], [callback], [type])

参数：

url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

function ajaxTest() {$.post("${pageContext.request.contextPath}/ajaxServlet111", {name:"Tom"}, function (data) {alert(data);}, "text");
}

案例

$.post("${pageContext.request.contextPath}/admin/TypesController?method=findByName", //请求路径{'name':$("#name").val()},  //请求参数function(data) {   //回调函数if(data.code == 10000) {$("#info").css("color", "green");//说明可以添加$("#fm").submit();} else {$("#info").css("color", "red");}$("#info").text(data.msg);},'json'   //服务器响应结果类型为json)

json

Java对象转JSON

步骤：

导入Jackson的相关jar包；
创建Jackson核心对象 ObjectMapper；
调用ObjectMapper的相关方法进行转换。
- writeValueAsString(Object obj) — Java对象 —> JSON字符串
- writeValue(参数1，Object obj )

参数1：

File：将obj对象转换为JSON字符串，并保存到指定的文件中；
Writer：将obj对象转换为JSON字符串，并将json数据填充到字符输出流中；
OutputStream：将obj对象转换为JSON字符串，并将json数据填充到字节输出流中。

@Test
public void test1() throws IOException {//创建对象Person person = new Person();person.setId(10);person.setName("Tom");person.setAge(22);person.setAddr("QD");//创建jackson的核心对象ObjectMapper objectMapper = new ObjectMapper();//转换 Java对象 ---> JSON字符串String pStr = objectMapper.writeValueAsString(person);System.out.println(pStr);//转换 Java对象 ---> JSON字符串保存到文件中objectMapper.writeValue(new File("D:/a.txt"), person);objectMapper.writeValue(new FileWriter("D:/b.txt"), person);
}

JSON转Java对象

步骤：

1.导入jackson的相关jar包；
2.创建Jackson核心对象 ObjectMapper
3.调用ObjectMapper的相关方法进行转换

readValue(json字符串数据,Class)

@Test
public void test5() throws IOException {String person = "{\"id\":20,\"name\":\"Tom\",\"age\":23,\"addr\":\"QD\"}";ObjectMapper objectMapper = new ObjectMapper();Person p = objectMapper.readValue(person, Person.class);System.out.println(p);
}

   //使用fastjson（阿里巴巴）中的方法，来进行转换，java对象转json，json转换java对象// JSON.toJSON:java对象转json//方法 JSON.toJSONString(obj)  java转json//发放 JSON.parseObject(str,class)   json转java@Testpublic void test4(){Person p1 = new Person();p1.setAddr("QD");p1.setName("Jerry");p1.setAge(23);Object json = JSON.toJSONString(p1);System.out.println(json);//{"name":"Jerry","addr":"QD","age":23}转java对象//使用fastjson中的方法 JSON.parseObject(str, Person.class);String str = "{\"name\":\"Jerry\",\"addr\":\"QD\",\"age\":23}";Person person = JSON.parseObject(str, Person.class);System.out.println(person);}

配置udbc

driverClassName:com.mysql.jdbc.Driver
url:jdbc:mysql://localhost:3306/apsfc?useSSL=false&useUnicode=true&characterEncoding=utf8
username:
password:
initialSize:10
maxActive:100
minIdle:5

文件上传

<form action="xxx" method="post" enctype="multipart/form-data">用户名；<input type="text" name="username"/><br/>照　片：<input type="file" name="photo"/><br/><input type="submit" value="上传"/>
</form>

上传对Servlet的限制

request.getParameter("xxx")这个方法在表单为enctype="multipart/form-data"时，它作废了，它永远都返回null。

如何实现文件上传

具体步骤

1、创建工厂：DiskFileItemFactory factory = new DiskFileItemFactory()；

2、创建解析器：ServletFileUpload sfu = new ServletFileUpload(factory)；

3、使用解析器来解析request，得到FileItem集合：

List fileItemList = sfu.parseRequest(request)，

FileItem中常用方法：

boolean isFormField()：是否为普通表单项！返回true为普通表单项，如果为false即文件表单项
String getFieldName()：返回当前表单项的名称；
String getString(String charset)：返回表单项的值；
String getName()：返回上传的文件名称；
long getSize()：返回上传文件的字节数；
InputStream getInputStream()：返回上传文件对应的输入流；
void write(File destFile)：把上传的文件内容保存到指定的文件中。

文件名或普通表单项乱码

如何解决：

request.setCharacterEncoding(“utf-8”);
servletFileUpload.setHeaderEncoding(“utf-8”);

以上两个方案二选一

同名文件上传问题

使用UUID：fileName = UUID.randomUUID().toString().replace("-", “”) + “_” + fileName;

JSTL

<%@ taglib prefix="C" uri="http://java.sun.com/jsp/jstl/core" %>

小技巧

转义字符，转json练习

String str = "{\"username\":\"lisi\" , \"age\":15}";

window.location.href的用法

javascript中的location.href有很多种用法，主要如下。self.location.href="/url" 当前页面打开URL页面
location.href="/url" 当前页面打开URL页面
windows.location.href="/url" 当前页面打开URL页面，前面三个用法相同。
this.location.href="/url" 当前页面打开URL页面
parent.location.href="/url" 在父页面打开新页面
top.location.href="/url" 在顶层页面打开新页面如果页面中自定义了frame，那么可将parent self top换为自定义frame的名称,效果是在frame窗口打开url地址此外，window.location.href=window.location.href;和window.location.Reload()和都是刷新当前页面。区别在于是否有提交数据。当有提交数据时，window.location.Reload()会提示是否提交，window.location.href=window.location.href;则是向指定的url提交数据

删除提醒

<script>function beforDel(id, name) {if(confirm('您确定要删除【' + name + '】类别吗？')) {console.log(id, name);window.location.href = "${pageContext.request.contextPath}/admin/TypesController?method=del&id=" + id;}}
<button onclick="beforDel('${item.id}', '${item.name}')" class="btn btn-danger" type="button">删除</button>

分页显示

 <p style="text-align: center;"><span>第${page.currentPage}页 共${page.totalPage}页</span>&nbsp;&nbsp;<c:choose><c:when test="${page.currentPage == 1}">[首页]</c:when><c:otherwise><a href="${pageContext.request.contextPath}/admin/MenusController?method=findByPage&currentPage=1">[首页]</a></c:otherwise></c:choose><c:choose><c:when test="${page.currentPage==page.totalPage}">[尾页]</c:when><c:otherwise><a href="${pageContext.request.contextPath}/admin/MenusController?method=findByPage&currentPage=${page.totalPage}">[尾页]</a>&nbsp;&nbsp;</c:otherwise></c:choose><c:choose><c:when test="${not page.hasPrePage}">[上一页]</c:when><c:otherwise><a href="${pageContext.request.contextPath}/admin/MenusController?method=findByPage&currentPage=${page.currentPage-1}">[上一页]</a></c:otherwise></c:choose><c:choose><%--${not page.hasNextPage}--%><c:when test="${page.currentPage==page.totalPage}">[下一页]</c:when><c:otherwise><a href="${pageContext.request.contextPath}/admin/MenusController?method=findByPage&currentPage=${page.currentPage+1}">[下一页]</a></c:otherwise></c:choose></p>

    protected void findByPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, SQLException {//获取当前要查询的页码String currentPageStr = request.getParameter("currentPage");int currentPage = 0;if (currentPageStr == null) {currentPage = 1;}else {currentPage = Integer.parseInt(currentPageStr);}/*** 分页查询*  |* page对象*  |* 总记录数、当前页、每页显示的数量（3）**/long totalCount = menusService.totalCount();Page page = PageUtil.createPage(5, (int) totalCount, currentPage);page = menusService.findByPage(page);//将分页信息及查询结果存放在域中request.setAttribute("page",page);request.getRequestDispatcher("/admin/menus/menusList.jsp").forward(request,response);}public Page<MenusInfo> findByPage(Page<MenusInfo> page) throws SQLException {String sql = "select m.*,t.name typeName from menus m , types t where m.typeid = t.id limit ?,? ";//limit需要的值{page.getBeginIndex()获得查询起始点,page.getEveryPage()获得每页显示记录数Object [] params = {page.getBeginIndex(),page.getEveryPage()};QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());//将查询sql数据信息放入menusInfos 集合List中List<MenusInfo> menusInfos = qr.query(sql, new BeanListHandler<MenusInfo>(MenusInfo.class), params);//调用page中的set方法，给private list 赋值page.setList(menusInfos);return page;}//统计menus表中typeid列和types表中id相等的个数@Overridepublic Long totalCount() throws SQLException {String sql = "select count(*) from menus m ,types t where m.typeid = t.id";QueryRunner qr = new QueryRunner(JdbcUtils.getDataSource());Long count = qr.query(sql, new ScalarHandler<Long>());return count;}

<a href="${pageContext.request.contextPath}/admin/NoticeController?method=delNoticeController&id=${item.id}"><button class="btn btn-danger" type="button" name="">删除</button></a>method是key，delNoticeController是value
id是key，${item.id}是value
request.getParameter("method");  值：delNoticeController
request.getParameter("id");   值：${item.id}

logout

//让session失效request.getSession().invalidate();//重定向到login.jspresponse.sendRedirect(request.getContextPath() + "/admin/login.jsp");

点击事件返回上一页面

方法一、以按钮点击的方式实现：
<input type="button" name="Submit" value="返回上一页" onclick="javascript:window.history.back(-1);">
或者
<input type="button" name="Submit" value="返回上一页" onclick="javascript:history.back(-1);">方法二、以图片点击的方式实现：
<img src="图片的路径" onclick="javascript:window.history.back(-1);" title="返回上一页" alt="返回点击图片" />
或者
<img src="图片的路径" onclick="javascript:history.back(-1);" title="返回上一页" alt="返回点击图片" />方法三、文字点击的方式实现：
<a href="javascript:history.back(-1)">返回上一页</a>
或：
<a href="#" onClick="javascript:history.back(-1);">返回上一页</a>方法四、图片链接的方式实现：
<a href="javascript:window.history.back(-1)" target="_self"><img src="图片的路径" /></a>
或者
<a href="javascript:history.back(-1)" target="_self"><img src="图片的路径" /></a>方法五、过几秒钟后返回上一页代码：
<script language="javascript">setTimeout("window.history.go(-1)",3000)</script>
或者
<script language="javascript">setTimeout("history.go(-1)",3000)</script>

满框parent.location效果

 //让session失效request.getSession().invalidate();//重定向到login.jspresponse.getWriter().println("<script>" +"parent.location='" + request.getContextPath() + "/admin/login.jsp';" +"</script>");

添加成功后弹窗，跳转## 添加成功后弹窗，跳转

  response.getWriter().println("<script>" +"alert('添加成功');" +"window.location.href='" + request.getContextPath() + "/admin/MenusController?method=addMenus';" +"</script>");假定你的web application 名称为news,你在浏览器中输入请求路径：http://localhost:8080/news/main/list.jsp则执行下面向行代码后打印出如下结果：1、 System.out.println(request.getContextPath());打印结果：/news
2、System.out.println(request.getServletPath());打印结果：/main/list.jsp
3、 System.out.println(request.getRequestURI());打印结果：/news/main/list.jsp
4、 System.out.println(request.getRealPath("/"));打印结果：F:\Tomcat 6.0\webapps\news\test

非空校验jQuery

 <script src="js/jquery-3.4.1.min.js"></script><script>/**** @param id    被检验的输入框的id* @param infoid    提示信息的id* @param msg   提示信息*/function judge(id, infoid, msg) {if($(id).val() == '') {$(infoid).text(msg);return false;}return true;}function clearInfo(infoid) {$(infoid).text('');}$(function () {$("#username").blur(function () {//非空校验judge('#username', '#usernameInfo', '用户名不能为空');});$("#username").focus(function () {clearInfo("#usernameInfo");});$("#password").blur(function () {//非空校验judge('#password', '#passwordInfo', '密码不能为空');});$("#password").focus(function () {clearInfo("#passwordInfo");});//form提交之前校验$("#fm").submit(function (e) {if(!judge('#username', '#usernameInfo', '用户名不能为空') || !judge('#password', '#passwordInfo', '密码不能为空')) {//不准提交e.preventDefault();}});});</script>

Exception

java.sql.SQLException: Duplicate entry '1' for key 'PRIMARY' Query: update notice set id=? ,name=? ,content=? ,times=? Parameters: [1, <p>内容</p>
, 内容, 2021-58-16 19:09:706]解决：

香水pro学习专区？？？？？相关推荐

腾讯云开发者大会 | 腾讯云大学首次与业界顶尖厂商合作的线上学习专区重磅发布...
就在刚刚结束的Techo开发者大会上,我们看到了这些:"小程序·云开发"上线一年有余,就已经吸引超过50万的开发者使用并DIY小程序,腾讯云帮忙实现了小程序的开发梦想,赋能开发者仍 ...
ant design pro模板_Ant Design Pro 学习笔记
学习笔记摘要介绍 Ant Design Pro 是一个基于Ant Design搭建起来的模板项目.它提供了两个主要布局:BasicLayout.UserLayout,在布局基础上制作了20多个基础页 ...
ida pro学习笔记2022.3.19
2022.3.19学习笔记基本块:是一个不包含分支,从头执行到尾的最大指令序列.每个基本块,都有唯一的入口点(块中的第一条指令)和退出点(块中的最后一条指令). 基本块的第一条指令通常是分支指令的目 ...
Unity3d UGUI 通用Confirm确认对话框实现（Inventory Pro学习总结）
背景曾几何时,在Winform中,使用MessageBox对话框是如此happy,后来还有人封装了可以选择各种图标和带隐藏详情的MessageBox,现在Unity3d UGui就没有了这样的好事情 ...
antd pro学习入门笔记+todolist实例
AntD Pro零散笔记 antd pro 4.0是一个集成了前后端服务.mock模拟接口.dva容器.typescript.less的一个解决方案,有助于快速的二次开发(不过感觉脚手架真的很大) 文 ...
antd pro学习记录
antd pro是一个后台模板,但上手之后还是有种劝退的感觉,要读懂代码还是得花点功夫. 把区块装好会自动生成路由对象,启动项目后为什么会重定向到/user/login? routes: [{path ...
java 监听器分类_java过滤器和监听器详解分类：学习专区
过滤器 1.Filter工作原理(执行流程) 当客户端发出Web资源的请求时,Web服务器根据应用程序配置文件设置的过滤规则进行检查,若客户请求满足过滤规则,则对客户请求/响应进行拦截,对请求头和请求 ...
#react 之ant design Pro 学习研究#----启动项目
2019独角兽企业重金招聘Python工程师标准>>> #首页 src/index.js import '@babel/polyfill'; import 'url-polyfill ...
野火FPGA征途Pro学习笔记（IP核）
分频器偶分频器通过always语句,对系统时钟进型分频,例如4分频:对系统时钟进行计数四次,产生一个高电平的flag信号. 在后级模块中使用时,采用系统时钟&&flag==1 的 ...

香水pro学习专区？？？？？