Question

我正在Visual Studio 2017中开发购物车项目。我在前端开发中使用vue js，在后端中使用mysql。我在HTML代码中添加了axios脚本。当我运行该应用程序时，我在google chrome控制台窗口中看到错误。

Uncaught (in promise) ReferenceError: axios is not defined
    at Promise.then.products (index.html:75)
    at new Promise (<anonymous>)
    at Vue.getAllProducts (index.html:74)
    at index.html:130
index.html:110 Uncaught (in promise) ReferenceError: axios is not defined
    at Promise.then.vendors (index.html:110)
    at new Promise (<anonymous>)
    at Vue.findAllVendors (index.html:109)
    at index.html:131

这是我的html代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="bootstap.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.map"></script>

    <body>
        <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
            <ul class="navbar-nav">
                <li class="nav-item active">
                    <a class="nav-link" href="index.html">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Show All Products</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="/AddProducts.html">Add Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="cart.html"> cart</a>
                </li>
            </ul>
        </nav>
        <br />
        <div class="container" id="app">
            <select class="form-control" id="sel1" v-on:change="applyfilters($event.target.value)">
                <option value="">Select Any value</option>

                <option v-for="v in vendors" :value="v.id">{{ v.name }} </option>
                <!-- <option value="v.id">{{v.name}}</option>-->
                <!--<option value="2">MI</option>-->
            </select>
            <br />
            <div class="row col-12" id="product-list">
                <div class="col-4 card mx-2 p-2" v-for="product in products" style="margin-bottom: 20px">
                    <b>Product Name :</b>{{product.name}}
                    <div class="row">
                        <div class="col-4 m-3 p-3">
                            <b>Price :</b>  {{product.price}}
                        </div>
                        <div class="col-4 m-3 p-3">
                            <b>Vendor :</b>  {{product.vendor.name}}
                        </div>
                        <div class="col-6 m-2 p-3">
                            <button class="col btn btn-primary" v-on:click="addToCart(product.id)">Buy</button>
                        </div>
                    </div>
                </div>
                <br />
            </div>
        </div>
        <script>
    let app = new Vue({
                el: "#app",
                data: {
                    newTask: '',
                    id: 0,
                    url: '/todos',
                    status: false,
                    products: [],
                    vendors: []
                },
                methods: {
                    getAllProducts() {
                        new Promise((resolve) => {
                            axios.get('/api/products').then(function (response) {
                                resolve(response.data)
                            })
                        }).then((data) => {
                            this.products = data
                            // console.log(this.products)
                        })
                    },
                    addToCart(id) {
                        // console.log(id)
                        var obj = { productId: id };
                        // console.log(obj)
                        new Promise((resolve) => {
                            axios.post('/api/cart/', obj).then(function (response) {
                                resolve(response.data)
                            })
                        }).then((data) => {
                            // console.log(data)
                            console.log(data)
                            console.log(data.id)
                            if (!data.id) {

                                // console.log("fist login")
                                window.alert("Fist login ")
                                window.location = "signin.html";
                            }
                            else {
                                // console.log("successfully add to cart")
                                window.alert("product has been added to your cart")
                            }

                        })
                    },
                    findAllVendors() {
                        new Promise((resolve) => {
                            axios.get('/api/vendor').then(function (data) {
                                resolve(data.data)
                                // console.log(data.data)
                            })
                        }).then((data) => {
                            this.vendors = data
                        })
                    },
                    applyfilters(id) {
                        new Promise((resolve) => {
                            axios.get('/api/products/' + id).then(function (response) {
                                resolve(response.data)
                            })
                        }).then((data) => {
                            this.products = data
                            // console.log(this.products)
                        })
                    }
                }
            })
            app.getAllProducts();
            app.findAllVendors();</script>
    </body>
</html>

这是我运行应用程序时的屏幕截图。

Answer 1

您尝试导入它吗？也许将此添加到head标签中的导入中。

 <script src="https://unpkg.com/axios/dist/axios.min.js"></script>

在vue js应用程序中未定义Axios

1 个答案: