前言:学习JavaWeb和前端基础学的比较匆忙,基础不是很牢固。到现在脑海中还只剩下一些零散的知识点以及项目,因此此篇博客浅浅的记录一下巩固所学,根据自己理解,如有错误欢迎指正。
学习路程:
JavaWeb学习之前学习了一些预备知识:HTML超文本标记语言,CSS样式,JavaScript脚本语言,jQuery框架,学完之后做了一个前端页面项目(模仿vivo商城),但只有一些简单的特效如轮播图,导航栏,地址填写,使用cookie进行页面数据的传递,购物车的功能,放大镜。个人感觉项目有好多地方,需要完善,例如,放大镜实现存在Bug,页面特效不完整等等。并且HTML和css样式,学起来很简单,可真正手写代码时,很痛苦,代码重复,量还多。
当明白前端是如何实现的时候,开始接触后端也就正式的开始学习JavaWeb,首先学习的是服务器tomcat,web静态资源,动态资源。web项目的创建配置web项目的配置文件。Web的三大组件Serlet,过滤器,监听器.会话技术,cookie,还有写在HTML代码中的el表达式,jstl以及之前很火的jsp(java servlet pages)。
重点:
jQuery:
jQuery一款主流浏览器的JavaScript库,封装了JavaScript相关方法调用,简化JavaScript对HTML DOM操作包含了
- HTML 事件函数
- CSS操作
- AJAX
- HTML 元素操作等等。
使用jQuery我们可以少写很多代码,多做事情。就像我们之前学习JavaScriotp获取DOM文档对象模型时的三种方式:
(1)通过 ID 属性:document.getElementById()
(2)通过 class 属性:getElementsByClassName()
(3)通过标签名:document.getElementsByTagName()使用jQuery获取文档对象时,是需要$(#id),$(.class)$(标签名)这样减少了很多代码
上面的DOM对象是由JavaScript创建的js对象,而要使用jQuery中的 方法必须要把DOM对象转换为JQuery对象,只需要$(dom对象)。
代码:
<body>
<div align="center">
<input type="button" id="btn" value="我要成为jQuery对象" onclick="btnClick()" />
</div>
</body>
转换:
<script type="text/javascript" src="js/jquery-3.5.1.js"></script>
<script type="text/javascript">
function btnClick(){
//使用js方法获取DOM对象
var domBtn = document.getElementById("btn");
alert("1="+domBtn.value)
//使用jQuery函数$()把DOM对象转换jQuery对象
var $btn = $(domBtn);
//调用jQuery方法val()
alert("2="+$btn.val());
}
</script>
获取jQuery对象之后,就可以对象调用他的方法。而它的方法这里就不一一介绍了,可以查jQuery的官方文档。
使用jQuery实现购物车:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>我的购物车</title>
<!-- 引入facicon.ico网页图标 -->
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 引入css 初始化的css 文件 -->
<link rel="stylesheet" href="css/base.css">
<!-- 引入公共样式的css 文件 -->
<link rel="stylesheet" href="css/co">
<!-- 引入car css -->
<link rel="stylesheet" href="css/car.css">
<!-- 先引入jquery -->
<script src="js/jquery.min.js"></script>
<!-- 在引入我们自己的js文件 -->
<script src="js/car.js"></script>
</head>
<body>
<div class="car-header">
<div class="w">
<div class="car-logo">
<b>我的购物车</b>
</div>
</div>
</div>
</div>
<div class="c-container">
<div class="w">
<div class="cart-filter-bar">
<em>全部商品</em>
</div>
<!-- 购物车主要核心区域 -->
<div class="cart-warp">
<!-- 头部全选模块 -->
<div class="cart-thead">
<div class="t-checkbox">
<input type="checkbox" name="" id="" class="checkall"> 全选
</div>
<div class="t-goods">商品</div>
<div class="t-price">单价</div>
<div class="t-num">数量</div>
<div class="t-sum">小计</div>
<div class="t-action">操作</div>
</div>
<!-- 商品详细模块 -->
<div class="cart-item-list">
<div class="cart-item check-cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" checked class="j-checkbox">
</div>
<!-- 第一个 -->
<div class="p-goods">
<div class="p-img">
<img src="upload/p1.jpg" alt="">
</div>
<div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
</div>
<div class="p-price">¥12.60</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥12.60</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<!-- 第二个 -->
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p2.jpg" alt="">
</div>
<div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
</div>
<div class="p-price">¥24.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥24.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
<!-- 第三个 -->
<div class="cart-item">
<div class="p-checkbox">
<input type="checkbox" name="" id="" class="j-checkbox">
</div>
<div class="p-goods">
<div class="p-img">
<img src="upload/p3.jpg" alt="">
</div>
<div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
</div>
<div class="p-price">¥29.80</div>
<div class="p-num">
<div class="quantity-form">
<a href="javascript:;" class="decrement">-</a>
<input type="text" class="itxt" value="1">
<a href="javascript:;" class="increment">+</a>
</div>
</div>
<div class="p-sum">¥29.80</div>
<div class="p-action"><a href="javascript:;">删除</a></div>
</div>
</div>
<!-- 结算模块 -->
<div class="cart-floatbar">
<div class="select-all">
<input type="checkbox" name="" id="" class="checkall">全选
</div>
<div class="operation">
<a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
<a href="javascript:;" class="clear-all">清理购物车</a>
</div>
<div class="toolbar-right">
<div class="amount-sum">已经选<em>1</em>件商品</div>
<div class="price-sum">总价: <em>¥12.60</em></div>
<div class="btn-area">去结算</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery.min.js">
</script>
<script src="js/checkAll.js">
</script>
</body>
</html>
js代码:
// 全选按钮
$(".checkall").change(function(){
$("input").prop("checked",$(this).prop("checked"));
});
// 比较长度,判断是否选中
$(".j-checkbox").change(function(){
if($(".p-checkbox input:checked").length==$(".p-checkbox input").length){
$(".checkall").prop("checked",true);
}else{
$(".checkall").prop("checked",false);
}
if($(this).prop("checked")){
$(this).parent().parent(".cart-item").addClass("check-cart-item");
}else{
$(this).parent().parent(".cart-item").removeClass("check-cart-item");
}
// console.log($(".p-checkbox input:checked").length);
// console.log($(".p-checkbox input").length);
});
// 计算商品小计
$(".increment").click(function(){
// console.log(12131312);
// 找到兄弟文本框
let count=$(this).siblings(".itxt").val();
count++;
// 把值赋值给文本框
$(this).siblings(".itxt").val(count);
//得到同一模块中的数量和单价相乘,得到该商品的小计
// 先找到他的父类,之后找到他的父类的兄弟
let p=$(this).parents(".p-num").siblings(".p-price").html();
// 相乘
p=p.substr(1);
// 保留两位小数
let price=(count*p).toFixed(2);
// 传入小计模块的值
$(this).parents(".p-num").siblings(".p-sum").html("¥"+price);
getSum();
})
// 减号
$(".decrement").click(function(){
let count=$(this).siblings(".itxt").val();
if(count==1){
return false;
}
count--;
$(this).siblings(".itxt").val(count);
//得到同一模块中的数量和单价相乘,得到该商品的小计
// 先找到他的父类,之后找到他的父类的兄弟
let p=$(this).parents(".p-num").siblings(".p-price").html();
// 相乘
p=p.substr(1);
// 保留两位小数
let price=(count*p).toFixed(2);
// 传入小计模块的值
$(this).parents(".p-num").siblings(".p-sum").html("¥"+price);
getSum();
})
// 用户操作文本框中的数据,计算小计的数量
$(".itxt").change(function(){
// 先得到数据
let count=$(this).val();
// 价格
let p=$(this).parents(".p-num").siblings(".p-price").html();
//单价和数量相乘,得到小计
let price=(p*count).toFixed(2);
// 把小计赋值给price
$(this).parents(".p-num").siblings(".p-sum").html("¥"+price);
getSum();
})
// 计算总额和总数量
function getSum(){
let money=0;//总额
let count=0;//总数
$(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-num").children(".quantity-form").children(".itxt").each(function (i, em) {
count += parseInt($(em).val());
});
$(".amount-sum em").text(count);
$(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-sum").each(function (i, em) {
money += parseFloat($(em).text().substr(1));
});
$(".price-sum em").text("¥" + money.toFixed(2));
}
// 删除商品
//删除单个商品
$(".p-action").click(function(){
$(this).parents(".cart-item").remove();
getSum();
})
// 删除所有的商品
$(".clear-all").click(function(){
$(".cart-item").remove();
getSum();
})
//删除选中的商品
$(".remove-batch").click(function(){
$(".j-checkbox:checked").parents(".cart-item").remove();
getSum();
})
servlet:
jsp:
JSP(Java Server Pages)是JavaWeb服务器端的 动态资源 。它与html页面的作用是相同的, 显示数据和获取数据 。由Java代码+HTML+JSP标签组成。
JSP脚本就是Java代码片段,它分为三种:
<%...%>:Java语句;
<%=…%>:Java表达式;
<%!...%>:Java定义类成员;
注意点:
有些对象是创建的,JSP有九大内置对象:
-
out(JspWriter):等同与response.getWriter(),用来向客户端发送文本数据;
-
config(ServletConfig):对应“真身”中的ServletConfig;
-
page(当前JSP的真身类型):当前JSP页面的“this”,即当前对象;
-
pageContext(PageContext):页面上下文对象,它是最后一个没讲的域对象;
-
exception(Throwable):只有在错误页面中可以使用这个对象;
-
request(HttpServletRequest):即HttpServletRequest类的对象;
-
response(HttpServletResponse):即HttpServletResponse类的对象;
-
application(ServletContext):即ServletContext类的对象;
-
session(HttpSession):即HttpSession类的对象,不是每个JSP页面中都可以使用,如果在某个JSP页面中设置<%@page session=”false”%>,说明这个页面不能使用session。
在这9个对象中有很多是极少会被使用的,例如:config、page、exception基本不会使用。
request&respose
:Web端无非是发送响应和接收请求,所以响应和请求就很重要了
详情见: 见:servlet详解
总结:
总的来讲,JavaWeb学了很多的东西,可知识点理解不够深入,自己同时在很多地方没有拓展,只是知道基本代码怎么写,基本的流程是一个怎样的。希望之后自己改正这个还没有把思路理清楚,条件搞明白,就写代码的这个坏习惯。