axios get 传值
求大神解答，做不出来
组件未定义，检查一下你的组件defineComponent有什么问题，另外 id:this.id没有这样写的，你可以给他赋值一个初始值，或者一空字符串，就像number:1一样，如果你还改不了，建议你吧前端代码发出来，（使用代码格式化，在回答框里面有一个代码端的按钮），这样才能知道前端哪里出问题了
<%@ 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">×</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;
}
}