Thymeleaf计算总价，如何让后台数据库数据和前台数据相乘

@Controller
public class ProductController {

    @Autowired
    private ProductService productService;

    @GetMapping("/product")
    public String getProduct(Model model) {
        // 从数据库中获取商品的单价
        double price = productService.getProductPrice();

        // 将单价传递给前台页面
        model.addAttribute("price", price);

        return "product";
    }
}

@Service
public class ProductService {

    public double getProductPrice() {
        // 从数据库中获取商品的单价并返回
    }
}

<div class="prize_bar">
    <div class="num_name fl">单价：</div>
    <span class="show_price">¥<em id="price" th:text="${price}"></em></span>
    <span class="show_unit">单位：个</span>
</div>
<div class="goods_num clearfix">
    <div class="num_name fl">数量：</div>
    <div class="num_add fl">
        <input id="quantity" name="quantity" type="text" class="num_show fl" th:value="1">
        <a type="button" class="add fr" onclick="valueAdd()">+</a>
        <a type="button" class="minus fr" onclick="valueSub()">-</a>
    </div>
</div>
<div class="total_price">
    <span>Total Price: </span>
    <span id="totalPrice" th:text="${#numbers.formatDecimal(price * 1, 2)}"></span>
</div>

function valueAdd() {
    var quantity = parseInt($("#quantity").val());
    quantity++;
    $("#quantity").val(quantity);
    calculateTotalPrice();
}

function valueSub() {
    var quantity = parseInt($("#quantity").val());
    if (quantity > 1) {
        quantity--;
        $("#quantity").val(quantity);
    }
    calculateTotalPrice();
}

function calculateTotalPrice() {
    var price = parseFloat($("#price").text());
    var quantity = parseInt($("#quantity").val());
    var totalPrice = price * quantity;
    $("#totalPrice").text(totalPrice.toFixed(2));
}