devbox
花生_TL007
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

JavaWeb总结：_java wed 的实现总结报告

作者：花生_TL007 | 2024-03-05 14:21:59

赞

踩

java wed 的实现总结报告

 前言：学习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对象)。

代码：

  1. <body>
  2. 		<div align="center">
  3. 			<input type="button"  id="btn" value="我要成为jQuery对象" onclick="btnClick()" />
  4. 		</div>
  5. </body>

转换：

  1. <script type="text/javascript" src="js/jquery-3.5.1.js"></script>
  2. <script type="text/javascript">
  3. 			function btnClick(){
  4. 				//使用js方法获取DOM对象
  5. 				var domBtn = document.getElementById("btn");
  6. 				alert("1="+domBtn.value)
  7. 				//使用jQuery函数$()把DOM对象转换jQuery对象
  8. 				var $btn = $(domBtn);
  9. 				//调用jQuery方法val()
  10. 				alert("2="+$btn.val());
  11. 			}
  12. </script>

 获取jQuery对象之后，就可以对象调用他的方法。而它的方法这里就不一一介绍了，可以查jQuery的官方文档。

使用jQuery实现购物车：

  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3.  
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <title>我的购物车</title>
  7.     <!-- 引入facicon.ico网页图标 -->
  8.     <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
  9.     <!-- 引入css 初始化的css 文件 -->
  10.     <link rel="stylesheet" href="css/base.css">
  11.     <!-- 引入公共样式的css 文件 -->
  12.     <link rel="stylesheet" href="css/co">
  13.     <!-- 引入car css -->
  14.     <link rel="stylesheet" href="css/car.css">
  15.     <!-- 先引入jquery  -->
  16.     <script src="js/jquery.min.js"></script>
  17.     <!-- 在引入我们自己的js文件 -->
  18.     <script src="js/car.js"></script>
  19. </head>
  20.  
  21. <body>
  22.  
  23.  
  24.     <div class="car-header">
  25.         <div class="w">
  26.             <div class="car-logo">
  27.                 <b>我的购物车</b>
  28.             </div>
  29.         </div>
  30.     </div>
  31.  
  32.     </div>
  33.     <div class="c-container">
  34.         <div class="w">
  35.             <div class="cart-filter-bar">
  36.                 <em>全部商品</em>
  37.             </div>
  38.             <!-- 购物车主要核心区域 -->
  39.             <div class="cart-warp">
  40.                 <!-- 头部全选模块 -->
  41.                 <div class="cart-thead">
  42.                     <div class="t-checkbox">
  43.                         <input type="checkbox" name="" id="" class="checkall"> 全选
  44.                     </div>
  45.                     <div class="t-goods">商品</div>
  46.                     <div class="t-price">单价</div>
  47.                     <div class="t-num">数量</div>
  48.                     <div class="t-sum">小计</div>
  49.                     <div class="t-action">操作</div>
  50.                 </div>
  51.                 <!-- 商品详细模块 -->
  52.                 <div class="cart-item-list">
  53.                     <div class="cart-item check-cart-item">
  54.                         <div class="p-checkbox">
  55.                             <input type="checkbox" name="" id="" checked class="j-checkbox">
  56.                         </div>
  57. <!-- 第一个 -->
  58.                         <div class="p-goods">
  59.                             <div class="p-img">
  60.                                 <img src="upload/p1.jpg" alt="">
  61.                             </div>
  62.                             <div class="p-msg">【5本26.8元】经典儿童文学彩图青少版八十天环游地球中学生语文教学大纲</div>
  63.                         </div>
  64.                         <div class="p-price">￥12.60</div>
  65.                         <div class="p-num">
  66.                             <div class="quantity-form">
  67.                                 <a href="javascript:;" class="decrement">-</a>
  68.                                 <input type="text" class="itxt" value="1">
  69.                                 <a href="javascript:;" class="increment">+</a>
  70.                             </div>
  71.                         </div>
  72.                         <div class="p-sum">￥12.60</div>
  73.                         <div class="p-action"><a href="javascript:;">删除</a></div>
  74.                     </div>
  75.                     <!-- 第二个 -->
  76.                     <div class="cart-item">
  77.                         <div class="p-checkbox">
  78.                             <input type="checkbox" name="" id="" class="j-checkbox">
  79.                         </div>
  80.                         <div class="p-goods">
  81.                             <div class="p-img">
  82.                                 <img src="upload/p2.jpg" alt="">
  83.                             </div>
  84.                             <div class="p-msg">【2000张贴纸】贴纸书 3-6岁 贴画儿童 贴画书全套12册 贴画 贴纸儿童 汽</div>
  85.                         </div>
  86.                         <div class="p-price">￥24.80</div>
  87.                         <div class="p-num">
  88.                             <div class="quantity-form">
  89.                                 <a href="javascript:;" class="decrement">-</a>
  90.                                 <input type="text" class="itxt" value="1">
  91.                                 <a href="javascript:;" class="increment">+</a>
  92.                             </div>
  93.                         </div>
  94.                         <div class="p-sum">￥24.80</div>
  95.                         <div class="p-action"><a href="javascript:;">删除</a></div>
  96.                     </div>
  97.                         <!-- 第三个 -->
  98.                     <div class="cart-item">
  99.                         <div class="p-checkbox">
  100.                             <input type="checkbox" name="" id="" class="j-checkbox">
  101.                         </div>
  102.                         <div class="p-goods">
  103.                             <div class="p-img">
  104.                                 <img src="upload/p3.jpg" alt="">
  105.                             </div>
  106.                             <div class="p-msg">唐诗三百首+成语故事全2册 一年级课外书 精装注音儿童版 小学生二三年级课外阅读书籍</div>
  107.                         </div>
  108.                         <div class="p-price">￥29.80</div>
  109.                         <div class="p-num">
  110.                             <div class="quantity-form">
  111.                                 <a href="javascript:;" class="decrement">-</a>
  112.                                 <input type="text" class="itxt" value="1">
  113.                                 <a href="javascript:;" class="increment">+</a>
  114.                             </div>
  115.                         </div>
  116.                         <div class="p-sum">￥29.80</div>
  117.                         <div class="p-action"><a href="javascript:;">删除</a></div>
  118.                     </div>
  119.  
  120.                 </div>
  121.  
  122.                 <!-- 结算模块 -->
  123.                 <div class="cart-floatbar">
  124.                     <div class="select-all">
  125.                         <input type="checkbox" name="" id="" class="checkall">全选
  126.                     </div>
  127.                     <div class="operation">
  128.                         <a href="javascript:;" class="remove-batch"> 删除选中的商品</a>
  129.                         <a href="javascript:;" class="clear-all">清理购物车</a>
  130.                     </div>
  131.                     <div class="toolbar-right">
  132.                         <div class="amount-sum">已经选<em>1</em>件商品</div>
  133.                         <div class="price-sum">总价： <em>￥12.60</em></div>
  134.                         <div class="btn-area">去结算</div>
  135.                     </div>
  136.                 </div>
  137.             </div>
  138.         </div>
  139.  
  140.     </div>
  141.  
  142. <script src="js/jquery.min.js">
  143. </script>
  144.     <script src="js/checkAll.js">
  145.     </script>
  146.  
  147.  
  148. </body>
  149.  
  150. </html>

 js代码：

  1. // 全选按钮
  2. $(".checkall").change(function(){
  3.     $("input").prop("checked",$(this).prop("checked"));
  4. });
  5. // 比较长度，判断是否选中
  6. $(".j-checkbox").change(function(){
  7.     if($(".p-checkbox input:checked").length==$(".p-checkbox input").length){
  8.         $(".checkall").prop("checked",true);
  9.     }else{
  10.         $(".checkall").prop("checked",false);
  11.     
  12.     }
  13.     if($(this).prop("checked")){
  14.         $(this).parent().parent(".cart-item").addClass("check-cart-item");
  15.     }else{
  16.         $(this).parent().parent(".cart-item").removeClass("check-cart-item");
  17.     }
  18.     // console.log($(".p-checkbox input:checked").length);
  19.     // console.log($(".p-checkbox input").length);
  20. });
  21.  
  22. // 计算商品小计
  23. $(".increment").click(function(){
  24.     // console.log(12131312);
  25.     // 找到兄弟文本框
  26.     let  count=$(this).siblings(".itxt").val();
  27.     count++;
  28.     // 把值赋值给文本框
  29.     $(this).siblings(".itxt").val(count);
  30.     //得到同一模块中的数量和单价相乘，得到该商品的小计
  31.     // 先找到他的父类，之后找到他的父类的兄弟
  32.     let p=$(this).parents(".p-num").siblings(".p-price").html();
  33.     // 相乘
  34.     p=p.substr(1);
  35.     // 保留两位小数
  36.     let price=(count*p).toFixed(2);
  37.     // 传入小计模块的值
  38.     $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
  39. getSum();
  40. })
  41. // 减号
  42. $(".decrement").click(function(){
  43.     let count=$(this).siblings(".itxt").val();
  44.     if(count==1){
  45.         return false;
  46.     }
  47.     count--;
  48.     $(this).siblings(".itxt").val(count);
  49.      //得到同一模块中的数量和单价相乘，得到该商品的小计
  50.     // 先找到他的父类，之后找到他的父类的兄弟
  51.     let p=$(this).parents(".p-num").siblings(".p-price").html();
  52.     // 相乘
  53.     p=p.substr(1);
  54.     // 保留两位小数
  55.     let price=(count*p).toFixed(2);
  56.     // 传入小计模块的值
  57.     $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
  58.     getSum();
  59.  
  60. })
  61.  
  62.     // 用户操作文本框中的数据，计算小计的数量
  63. $(".itxt").change(function(){
  64.     // 先得到数据
  65.     let count=$(this).val();
  66.     // 价格
  67.     let p=$(this).parents(".p-num").siblings(".p-price").html();
  68.     //单价和数量相乘，得到小计
  69.     let price=(p*count).toFixed(2);
  70.     // 把小计赋值给price
  71.     $(this).parents(".p-num").siblings(".p-sum").html("￥"+price);
  72.     getSum();
  73.  
  74. })
  75.  
  76. // 计算总额和总数量
  77. function getSum(){
  78.     let money=0;//总额
  79.     let count=0;//总数
  80.  
  81.     $(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-num").children(".quantity-form").children(".itxt").each(function (i, em) {
  82.         count += parseInt($(em).val());
  83.     });
  84.  
  85.     $(".amount-sum em").text(count);
  86.     $(".j-checkbox:checked").parents(".p-checkbox").siblings(".p-sum").each(function (i, em) {
  87.         money += parseFloat($(em).text().substr(1));
  88.     });
  89.     $(".price-sum em").text("¥" + money.toFixed(2));
  90.  
  91. }
  92.  
  93. // 删除商品
  94. //删除单个商品
  95. $(".p-action").click(function(){
  96.     $(this).parents(".cart-item").remove();
  97.     getSum();
  98. })
  99. // 删除所有的商品
  100. $(".clear-all").click(function(){
  101.     $(".cart-item").remove();
  102.     getSum();
  103. })
  104. //删除选中的商品
  105. $(".remove-batch").click(function(){
  106.     $(".j-checkbox:checked").parents(".cart-item").remove();
  107.     getSum();
  108. })
  109.  
  110.

servlet：

见：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学了很多的东西，可知识点理解不够深入，自己同时在很多地方没有拓展，只是知道基本代码怎么写，基本的流程是一个怎样的。希望之后自己改正这个还没有把思路理清楚，条件搞明白，就写代码的这个坏习惯。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/花生_TL007/article/detail/191659
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号