weixin_50876978
2021-06-26 17:57
采纳率: 50%
浏览 91

axios get 传值

求大神解答,做不出来

 

  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • CSDN专家-微编程 2021-06-26 18:05
    已采纳

    组件未定义,检查一下你的组件defineComponent有什么问题,另外 id:this.id没有这样写的,你可以给他赋值一个初始值,或者一空字符串,就像number:1一样,如果你还改不了,建议你吧前端代码发出来,(使用代码格式化,在回答框里面有一个代码端的按钮),这样才能知道前端哪里出问题了

    已采纳该答案
    1 打赏 评论
  • weixin_50876978 2021-06-26 18:17

    打赏 评论
  • weixin_50876978 2021-06-26 18:31
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
    <%@ page contentType="text/html;charset=UTF-8" language="java" %>
    <html>
    <head>
        <title>
            Dessert's Best 小甜品,甜香四溢
        </title>
        <link rel="stylesheet" href="/static/fontawesome-free-5.11.2-web/css/all.css">
        <link rel="stylesheet" href="https://unpkg.com/element-plus/lib/theme-chalk/index.css">
        <link rel="stylesheet" href="/static/bootstrap/basic/css/bootstrap.css">
        <link rel="stylesheet" href="/static/layui/css/layui.css" />
        <script src="https://unpkg.com/element-plus/lib/index.full.js"></script>
        <script src="/static/bootstrap/basic/js/jquery.js"></script>
        <script src="/static/bootstrap/basic/js/bootstrap.js"></script>
        <script src="/static/layui/layui.js"></script>
        <script src="/static/vue/axios.js"></script>
        <script src="/static/vue/vue.js" type="text/javascript" charset="utf-8"></script>
    
    
        <link rel="stylesheet" href="/static/css/cart.css">
    </head>
    <body>
    <div class="container-header-panel">
        <div class="header">
            <div class="header-left-top"></div>
            <div class="header-left">
                <div class="header-bullhorn">
                    <i class="fas fa-bullhorn"></i>
                </div>
                <%--<div class="middle-div"></div>--%>
                <div class="header-words">
                    <h4>全场满249免配送费!</h4>
                </div>
            </div>
            <div class="header-right">
                <div class="header-shopping">
                    <a href="/shopping/index">
                        <i class="fas fa-shopping-cart"></i>
                    </a>
                </div>
                <div class="header-login">
                    <a href="/signUp/login"><h4>|登录|注册</h4></a>
                </div>
                <div class="header-login-div"></div>
            </div>
            <%--<div class="header-right-button"></div>--%>
        </div>
        <div class="bottom">
            <div class="bottom-left">
                <div class="bottom-left-github">
                    <i class="fab fa-github"></i>
                </div>
                <div class="bottom-middel-div"></div>
                <div class="bottom-left-span">
                    <div class="span-div">
                            <span class="layui-breadcrumb" lay-separator="|">
                                <a href="">首页</a>
                                <a href="">产品</a>
                                <a href="">推荐购买</a>
                                <a href="">关于我们</a>
                            </span>
                    </div>
                </div>
            </div>
            <div class="bottom-right">
                <input type="text" id="name"
                       name="name"
                       autocomplete="off"
                       placeholder="蛋糕">
                <button class="layui-btn layui-btn-xs" lay-submit lay-filter="formDemo"
                        type="button"  id="btnSubmit"  ><i class="fa fa-search fa-lg"></i></button>
            </div>
        </div>
    </div>
        <div class="container-middle-cart">
            <div class="cart-left"></div>
            <div class="cart-header">
                <div class="cart-words">
                    <h3>购物车</h3>
                </div>
                <div class="cart-table">
                    <table class="table">
                    <thead>
                    <tr style="color: #390C20;background-color: #f0f0f0">
                        <th>产品信息</th>
                        <th style="margin-left: 100px">价格</th>
                        <th>尺寸</th>
                        <th>个数</th>
                        <th>总价</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${commodity}" var="item">
                        <tr id="app">
                            <td><img src="/static/img/all/${item.picture}" style="width: 50px; height: 50px">${item.name}</td>
                            <td><fmt:formatNumber type="currency" value="${item.price}"></fmt:formatNumber></td>
                            <td>${item.size}</td>
                            <div>
                            <td >
                                <button type="button" class="btn btn-default" @click = "sub"  v-if="number>0">-</button>
                                <button type="button" class="btn btn-default"> {{ number }}</button>
                                <button type="button" class="btn btn-default" @click = "add">+</button>
                            </td>
                            </div>
                            <td>{{ number*${item.price} }}</td>
                            <td>
                                <button type="button" class="layui-btn layui-btn-normal"
                                        data-toggle="modal"
                                        data-target="#myModal">购买</button>
                            </td>
                        </tr>
                    </c:forEach>
    
                    </tbody>
                </table>
                    <div class="modal fade" id="myModal"
                         tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                                    <h4 class="modal-title" id="myModalLabel"></h4>
                                </div>
                                <div class="modal-body">
                                    <div class="price">
                                        <h4>您需要支付:<c:forEach items="${commodity}" var="c">
                                            <fmt:formatNumber type="currency" value="${c.price}"></fmt:formatNumber>
                                        </c:forEach></h4>
    
                                    </div>
                                    <div class="modal-style-price">
                                        <h4>请选择支付方式:</h4>
                                    </div>
                                    <div class="middle-font">
                                        <div class="middle-font-left"></div>
                                        <div class="alipay">
                                            <i class="fab fa-alipay"></i>
                                        </div>
                                        <div class="weixin">
                                            <i class="fab fa-weixin"></i>
                                        </div>
                                        <div class="amazon-pay">
                                            <i class="fab fa-cc-amazon-pay"></i>
                                        </div>
                                        <div class="diners">
                                            <i class="fab fa-cc-diners-club"></i>
                                        </div>
                                        <div class="middle-font-right"></div>
                                    </div>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary">确认</button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal -->
                    </div>
                </div>
            </div>
            <div class="cart-right"></div>
        </div>
        <div class="more-cart">
            <div class="more-words">
                <h5>更多推荐>>></h5>
            </div>
            <div class="cart-all">
                <c:forEach items="${commoditie}" var="list">
                    <div class="cart-photo">
                        <a href="#">
                        <img src="/static/img/recommend/${list.picture}">
                        <h5>${list.name}</h5>
                        <p> <fmt:formatNumber type="currency" value="${list.price}"></fmt:formatNumber>/
                            ${list.size}
                            <i class="fas fa-shopping-cart"></i>
                        </p>
                        </a>
                    </div>
                </c:forEach>
            </div>
        </div>
        <%--底部--%>
        <div class="footer-bottom">
            <%--底部上--%>
            <div class="footer-dessert-Icon">
                <div class="footer-dessert">
                    <div class="footer-dessert-left"></div>
                    <div class="footer-dessert-words">
                        <p>4005-13-14520<br>
                            order@dessert.com</p>
                    </div>
                    <div class="footer-dessert-right"></div>
                </div>
                <div class="footer-container">
                    <div class="footer-container-left">
                        <i class="fas fa-grip-lines-vertical"></i>
                    </div>
                    <div class="footer-container-middle">
                        <i class="fab fa-alipay"></i>
                    </div>
                    <div class="footer-container-right">
                        <i class="fas fa-grip-lines-vertical"></i>
                    </div>
                </div>
                <div class="footer-Icon">
                    <div class="footer-Icon-left"></div>
                    <div class="footer-Icon-container">
                        <div class="footer-crow">
                            <i class="fas fa-crow"></i>
                        </div>
                        <div class="footer-tea">
                            <i class="el-icon-milk-tea"></i>
                        </div>
                        <div class="footer-sugar">
                            <i class="el-icon-sugar"></i>
                        </div>
                        <div class="footer-watermelon">
                            <i class="el-icon-watermelon"></i>
                        </div>
                        <div class="footer-orange">
                            <i class="el-icon-orange"></i>
                        </div>
                    </div>
                    <div class="footer-Icon-right"></div>
                </div>
            </div>
            <%--底部下--%>
            <div class="footer-words">
                <p>长沙小甜品餐饮管理有限公司<br>
                    长沙市望城区金山桥街道普瑞西路139号欧泊泰克软件学院<br>
                    Copyright 2010-2021 小甜品,Ltd 湘ICP备12046340</p>
                <div class="footer-end"></div>
            </div>
    
        </div>
    </body>
    </html>
    <script type = "text/javascript">
        var vm = new Vue({
            el: '#app',
            data: {
                id:1,
                number:1,
                price:""
    
            },
            methods: {
                add: function () {
                    this.number ++;
                    axios.get("/cart/updateNumber",{
                        params:{
                          id:this.id,
                            number:this.number
                        }
                }).then(function (value) {
                        console.log(value);
                    }).catch(function (reason) {
                        console.log(reason);
                    })
                },
                sub: function () {
                    this.number--;
                    axios.get("/cart/updateNumber",{
                        params:{
                            id:this.id,
                            number:this.number
                        },
    
                    }).then(function (value) {
                        console.log(value)
                    }).catch(function (reason) {
                        console.log(reason);
                    })
                }
            }
        });
    </script>
    package com.obtk.controller;
    
    import com.obtk.pojo.Commodity;
    import com.obtk.pojo.Shopping;
    import com.obtk.service.CommodityService;
    import com.obtk.service.ShoppingService;
    import org.springframework.beans.factory.annotation.Autowired;
    import org.springframework.stereotype.Controller;
    import org.springframework.ui.Model;
    import org.springframework.web.bind.annotation.PathVariable;
    import org.springframework.web.bind.annotation.RequestMapping;
    import org.springframework.web.bind.annotation.ResponseBody;
    
    import java.util.HashMap;
    import java.util.List;
    import java.util.Map;
    
    @Controller
    @RequestMapping("/cart/")
    public class CartController {
        @Autowired
        private ShoppingService shoppingService;
        @Autowired
        private CommodityService commodityService;
        @RequestMapping("index/{id}")
        public String cart(@PathVariable  int id, Model model){
            List<Commodity> commoditie=commodityService.getFront();
            List<Shopping> shoppings=shoppingService.getAll();
            List<Commodity> commodities=commodityService.getOne(id);
            model.addAttribute("commodity",commodities);
            model.addAttribute("shopping",new Shopping());
            model.addAttribute("shoppings",shoppings);
            model.addAttribute("commoditie",commoditie);
            return "/cart/index";
        }
        @RequestMapping("updateNumber")
        @ResponseBody
        public Map<String,Integer> updateNumber(Commodity commodity){
            int n=commodityService.updateNumber(commodity);
            int cId=commodity.getId();
            Map<String,Integer> map=new HashMap<String, Integer>();
            map.put("n",n);
            return map;
        }
    }
    
    打赏 评论

相关推荐 更多相似问题