IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 书城项目三等 -> 正文阅读

[JavaScript知识库]书城项目三等

书城项目三

在用户登录之后显示”欢迎某某登录“并且在返回主页面也显示欢迎某某登录

  • 在UserServlet中的login方法中加入 在获取到用户信息之后加入

HttpSession session = req.getSession();
session.setAttribute("user",user); ?//保存用户登录之后的信息
  • 在jsp页面中采用sessionScope.user.username 来动态获取登录的名字

 ? ? ? ? ? ? ? ? ? <!--注意是sessionScope,不是requestScope-->
<span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临尚硅谷书城</span>
  • 用户在登录之后跳转主页耶显示用户名

 <c:if test="${empty sessionScope.user.username}"> <!--如果username等于空,就显示登录和注册-->
 ? ?<a href="pages/user/login.jsp">登录</a> |
 ? ?<a href="pages/user/regist.jsp">注册</a> &nbsp;&nbsp;
 </c:if>
<c:if test="${not empty sessionScope.user.username}"> ?<!--如果username不等于空,就显示用户名-->
 ? <!--注意是sessionScope,不是requestScope-->
 ? <span>欢迎<span class="um_span">${sessionScope.user.username}</span>光临尚硅谷书城</span>
 ? <a href="pages/order/order.jsp">我的订单</a>
 ? <a href="index.jsp">注销</a>&nbsp;&nbsp;
</c:if>

注销

  1. 注销功能的实现呢,是通过将session保存的信息立马删除,然后跳转到主页 简单来说就是删除session

  2. 在UserServlet中定义一个注销的方法loginOut

    public void loginOut(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     ? ? ? ? //获取引用第一次创建的session的id值username
     ? ?HttpSession session = req.getSession();
     ? ? ?//删除session
     ? ? session.invalidate();
     ? ? //重定向到主页
     ? ?resp.sendRedirect(req.getContextPath());
    ?
    }

    然后在注销的表单,添加路径地址

    <a href="UserServlet?action=loginOut">注销</a>&nbsp;&nbsp;

验证码

  1. 验证码流程

    • 第一步先导入谷歌的专业验证码的jar包

    • 第二步到xml文件张配置验证码

    • <servlet>
       ? ?<servlet-name>KaptchaServlet</servlet-name>
       ? ?<servlet-class>com.google.code.kaptcha.servlet.KaptchaServlet</servlet-class>
      </servlet>
      <servlet-mapping>
       ? ?<servlet-name>KaptchaServlet</servlet-name>
       ? ?<url-pattern>/kaptcha.jpg</url-pattern>
      </servlet-mapping>
    • 第三步,复制kaptcha.jpg去验证码路径,

    • 第四步去注册的Servlet文件中,创建Sessin并且 保存Session,然后立刻删掉Session

    •  ? ?//创建Session
      HttpSession session = req.getSession();
       ? ?//保存SEssion
       ? String attribute =(String) session.getAttribute(Constants.KAPTCHA_SESSION_KEY);
    • 给验证码绑定一个点击就自动刷新的事件

    •  //给验证码图片绑定一个单击事件,每一次点击图片自动刷新
      $("#doce_img").click(function (){
       ? ? this.src="${basePth}kaptcha.jpg?="+new Date();
      });

购物车实现

cartServlet文件代码

  1. public class CartServlet extends BaseServlet{
     ? ? ? ? ? ? ? ?BookService bookService = new BookServiceImpl();
     ? ? public void addItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     ? ? ? ? ? ? ? ?//System.out.println("假如购物车");
     ? ? ? ? ? ?//将cart对象加入Session中的id值中去,这样以后每一次的用addItem方法,都不会重新创建一个新的cart出来
     ? ? ? ? ? ?//而是调用以前的sessio
     ? ? ? ? // n中的id值
     ? ? ? ? ? ?//获取请求的参数  req.getParameter("id");
     ? ? ? ? int id = WebUtils.change(req.getParameter("id"), 0);
     ? ? ? ? ? ?//根据id查找图书信息
     ? ? ? ? Book book = bookService.queryBookById(id);
     ? ? ? ? ?//查找到后,将图书转换成CartItem类型
     ? ? ? ? CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
     ? ? ? ? System.out.println(cartItem);
     ? ? ? ? //将cart加入session
     ? ? ? ? ? Cart cart = (Cart) req.getSession().getAttribute("cart");
     ? ? ? ? ? //先判断是否已经有了cart
     ? ? ? ? if (cart==null){
     ? ? ? ? ? ? ? cart = new Cart();
     ? ? ? ? ? ? ? req.getSession().setAttribute("cart",cart);
     ? ? ? ? }
     ? ? ? ? //将查找到的图书加入
     ? ? ? ? ? cart.addItem(cartItem);
     ? ? ? ? ? ? System.out.println(cart);
     ? ? ? ? ? //重定向回主页
     ? ? ? ? ? ?resp.sendRedirect(req.getContextPath());
     ? ? 
     ? ? }
    }

帮index.jsp绑定单击事件

  1. <script type="text/javascript">
     ? ? $(function (){
     ? ? ? ?//给加入购物车的按钮绑定单机事件
     ? ? ? ? $("button.addToCart").click(function (){
     ? ? ? ? ? ? var bookId = $(this).attr("bookId");
     ? ? ? ? ? ?location.href="http://localhost:8080/bookstore_student/cartServlet?action=addItem&id="+bookId;
    ?
     ? ? ? ? });
     ? ? });
    </script>

定义一个CartItem 类

  1. private Integer id;
    private String name;
    private Integer count;
    private BigDecimal price;
    private BigDecimal totalPrice;
    // 给出set get tostring方法

在创建一个Cart类

  1. 该文件里面写 增加商品, 删除商品,跟新商品数量,清空购物车的方法

  2. public class Cart {
     ? ? private Integer totalCount;
     ? ? private BigDecimal totalPrice;
     ? ? private Map<Integer,CartItem> items = new LinkedHashMap<Integer,CartItem>();
    ?
    ?
     ? ? //增加商品
     ? ?public void addItem(CartItem cartItem){
     ? ? ? ? ?//先判断 集合中是否已经含有这个商品
     ? ? ? ?CartItem item = items.get(cartItem.getId());
     ? ? ? ? //如果没有,那么就添加进去,如果有 数量加一
     ? ? ? ? if (item==null){
     ? ? ? ? ? ? items.put(cartItem.getId(),cartItem);
     ? ? ? ? }else{
     ? ? ? ? ? ? ?//数量+1(取出原来的数量+1)
     ? ? ? ? ? ? item.setCount(item.getCount()+1);
     ? ? ? ? ? ? //金额翻倍(注意是总金额翻倍)
     ? ? ? ? ? ? ?item.setTotalPrice(item.getPrice().multiply(new BigDecimal(item.getCount())));
     ? ? ? ? }
     ?  }
     ? ? ?//删除商品
     ? ? public void delete(Integer id){
     ? ? ? ?//直接删除
     ? ? ? ? items.remove(id);
     ? ? }
     ? ?//清空购物车
     ? ?public void clear(){
     ? ? ? ? //直接清空集合
     ? ? ? ?items.clear();
     ?  }
     ? ?//跟新商品数量
     ? ?public void updateItem(Integer id,Integer count){
     ? ? ? ? ?//现根据id获取到要跟新的东西
     ? ? ? ? ? CartItem cartItem= items.get(id);
     ? ? ? ? ? //如果没有商品,不跟新,有才跟新
     ? ? ? ?if (cartItem!=null){
     ? ? ? ? ? ? //跟新
     ? ? ? ? ? ?cartItem.setCount(count);
     ? ? ? ? ? ?cartItem.setTotalPrice(cartItem.getPrice().multiply(new BigDecimal(cartItem.getCount())));
     ? ? ?  }
     ?  }
    ?
     ? ?public Cart() {
     ?  }
    ?
     ? ?public Cart(Integer totalCount, BigDecimal totalPrice, Map<Integer, CartItem> items) {
     ? ? ? ?this.totalCount = totalCount;
     ? ? ? ?this.totalPrice = totalPrice;
     ? ? ? ?this.items = items;
     ?  }
    ?
     ? ?public Integer getTotalCount() {
     ? ? ? ? ? ? totalCount = 0;
     ? ? ? ? //遍历集合
     ? ? ? ?for(Map.Entry<Integer,CartItem> entry:items.entrySet()){
     ? ? ? ? ? ?Integer count = entry.getValue().getCount();
     ? ? ? ? ? ?totalCount = totalCount+count;
     ? ? ?  }
     ? ? ? ?return totalCount;
     ?  }
    ?
    ?
    ?
     ? ?public BigDecimal getTotalPrice() {
     ? ? ? ? ? totalPrice = new BigDecimal(0);
     ? ? ? ?//遍历集合
     ? ? ? ?for(Map.Entry<Integer,CartItem> entry:items.entrySet()){
     ? ? ? ? ? ? ? ?totalPrice = totalPrice.add( entry.getValue().getTotalPrice());
     ? ? ?  }
     ? ? ? ?return totalPrice;
     ?  }
    ?
    ?
     ? ?public Map<Integer, CartItem> getItems() {
     ? ? ? ?return items;
     ?  }
    ?
     ? ?public void setItems(Map<Integer, CartItem> items) {
     ? ? ? ?this.items = items;
     ?  }
    ?
     ? ?@Override
     ? ?public String toString() {
     ? ? ? ?return "Cart{" +
     ? ? ? ? ? ? ? ?"totalCount=" + getTotalCount() +
     ? ? ? ? ? ? ? ?", totalPrice=" + getTotalPrice() +
     ? ? ? ? ? ? ? ?", items=" + items +
     ? ? ? ? ? ? ? ?'}';
     ?  }
    }
  3. 特别注意!:其中的getlotalPrice和getlotaCount方法中,要进行遍历和给出值

CartServlet 代码

  1.  ? ? ? ? ? ?BookService bookService = new BookServiceImpl();
     public void addItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     ? ? ? ? ? ?//System.out.println("假如购物车");
     ? ? ? ?//将cart对象加入Session中的id值中去,这样以后每一次的用addItem方法,都不会重新创建一个新的cart出来
     ? ? ? ?//而是调用以前的sessio
     ? ? // n中的id值
     ? ? ? ?//获取请求的参数  req.getParameter("id");
     ? ? int id = WebUtils.change(req.getParameter("id"), 0);
     ? ? ? ?//根据id查找图书信息
     ? ? Book book = bookService.queryBookById(id);
     ? ? ?//查找到后,将图书转换成CartItem类型
     ? ? CartItem cartItem = new CartItem(book.getId(),book.getName(),1,book.getPrice(),book.getPrice());
    ?
     ? ? //将cart加入session
     ? ? ? Cart cart = (Cart) req.getSession().getAttribute("cart");
     ? ? ? //先判断是否已经有了cart
     ? ? if (cart==null){
     ? ? ? ? ? cart = new Cart();
     ? ? ? ? ? req.getSession().setAttribute("cart",cart);
     ? ? }
     ? ? //将查找到的图书加入
     ? ? ? cart.addItem(cartItem);
    ?
     ? ? ? //重定刚才点击加入购物车的网址
     ? ? ? ?resp.sendRedirect(req.getHeader("Referer"));
     
     }
    public void clear(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     ? ? ? ? ? ? ? Cart cart = (Cart)req.getSession().getAttribute("cart");
     ? ? ? ? ? ? ? if (cart!=null){
     ? ? ? ? ? ? ? ? ? cart.clear();
     ? ? ? ? ? ? ? }
     ? ? ? ? ? ? ? ?//重定向
     ? ? ? resp.sendRedirect(req.getHeader("Referer"));
    ?
    }
    public void delete(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     ? ? ? ? ? ? ? ? ? ? ? ? ? //获取删除的id值
     ? ? ? ? ? ?int id = WebUtils.change(req.getParameter("id"),0);
     ? ? ? ? ? ? ? ? //获得购物车对象
     ? ? ? Cart cart = (Cart)req.getSession().getAttribute("cart");
     ? ? ? ?//判断购物车是否为空
     ? ? if (cart!=null){
     ? ? ? ? ? cart.delete(id);
     ? ? }
     ? ? ? ?//重定向回到购物车
     ? ? ? resp.sendRedirect(req.getHeader("Referer"));
    }
     ? public void updateItem(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
     ? ? ? ? ? ? ? ?//获取要修改的书的id和数量
     ? ? ? ?int id = WebUtils.change(req.getParameter("id"), 0);
     ? ? ? ?int count = WebUtils.change(req.getParameter("count"), 1);
     ? ? ? ? ? Cart cart = (Cart)req.getSession().getAttribute("cart");
     ? ? ? ? ? ? cart.updateItem(id,count);
     ? ? ? ? ? ? ? ? ?//重定向回购物车
     ? ? ? ? ? resp.sendRedirect(req.getHeader("Referer"));
    ?
    ?
     ?  }
  2. 输入书本数良

})
//给输入图书数量绑定一个change事件
?
$(".updateCount").change(function (){
  var name = $(this).parent().parent().find("td:first").text();
var count = this.value;
var id = $(this).attr('bookId');
  //如果为true
 ? if ( confirm("你确定要对【"+name+"】的数量修改为:" + count + "吗?")){
 location.href="http://localhost:8080/bookstore_student/cartServlet?action=updateItem&count="+count+"&id="+id;
}else{
 ?  //如果为false
 this.value=this.defaultValue;
}
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-12-09 11:33:50  更:2021-12-09 11:36:13 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 7:21:55-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码