代码之家 › 专栏 › 技术社区 › Mohammad

Vue JS应用程序中未定义AXIOS

axios vue.js

0

Mohammad · 技术社区 · 7 年前

我正在开发Visual Studio 2017中的购物车项目。我使用VueJS进行前端开发,使用MySQL进行后端开发。我在HTML代码中添加了AXIOS脚本。当我运行应用程序时,我在Google Chrome控制台窗口中跟踪错误。

uncaught(in promise)referenceerror:axios is not defined
at promise.then.products(index.html:75)
新承诺(<匿名>)
在vue.getallproducts(index.html:74)
在index.html:130
index.html:110未捕获(承诺中)引用错误:未定义AXIOS
at promise.then.vendors(index.html:110)
新承诺(<匿名>)
在vue.findallvendors(index.html:109)
在index.html:131
这是我的HTML代码。


<!文档类型HTML>
<html lang=“en”>
<头部>
<title>引导示例</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>

<正文>
<nav class=“navbar navbar expand sm bg dark navbar dark”>
<ul class=“导航栏导航”>
<li class=“nav item active”>
<a class=“nav link”href=“index.html”>购物</a>
</li>
<li class=“nav item”>
<a class=“nav link”href=“index.html”>显示所有产品</a>
</li>
<li class=“nav item”>
<a class=“nav link”href=“/addproducts.html”>添加产品</a>
</li>
<li class=“nav item”>
<A class=“nav link”href=“cart.html”>购物车</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='>选择任何值</option>

<option v-for=“v in vendors”:value=“v.id”>v.name lt;/option>
<!--<option value=“v.id”>v.name</option>-->
<!--<option value=“2”>英里</option>-->
</选择>
<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>产品名称:</B>产品名称
<DIV class=“row”>
<DIV class=“col-4 m-3 p-3”>
<B>价格:</B>product.price
</DIV>
<DIV class=“col-4 m-3 p-3”>
<B>供应商:</B>product.vendor.name
</DIV>
<DIV class=“col-6 m-2 p-3”>
<button class=“col btn btn primary”v-on:单击“添加到图片(product.id)”>购买</button>
</DIV>
</DIV>
</DIV>
<br/>
</DIV>
</DIV>
<脚本>
让app=new vue({
el:“应用程序”,
数据:{
新任务:“”,
ID:0,
url:“/todos”,
状态:假,
产品:[],
供应商:[]
},请
方法:{
getAllProducts()。{
新承诺((解决)=>。{
axios.get(“/api/products”).then(函数(响应){
解析(response.data)
})
})。然后((数据)=>。{
this.products=数据
//console.log(this.products)
})
},请
添加到开始(ID){
//控制台日志(id)
var obj=产品ID:ID_
//控制台日志(obj)
新承诺((解决)=>。{
axios.post('/api/cart/',obj).then(函数(响应){
解析(response.data)
})
})。然后((数据)=>。{
//console.log(数据)
console.log(数据)
console.log(data.id)
如果(!数据.id){

//console.log(“首次登录”)
window.alert(“首次登录”)
window.location=“登录.html”;
}
其他{
//console.log(“成功添加到购物车”)
window.alert(“产品已添加到您的购物车中”)
}

})
},请
findallvendors()。{
新承诺((解决)=>。{
axios.get(“/api/vendor”).then(函数(数据){
解析(data.data)
//console.log(data.data)
})
})。然后((数据)=>。{
this.vendors=数据
})
},请
应用筛选器(ID){
新承诺((解决)=>。{
axios.get('/api/products/'+id).then(函数(响应){
解析(response.data)
})
})。然后((数据)=>。{
this.products=数据
//console.log(this.products)
})
}
}
})
app.getAllProducts();
app.findallvendors();</script>
</body>
</html>
下面是我运行应用程序时的屏幕截图。


.

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>


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

1 回复 | 直到 7 年前

1

2

Will Yang 7 年前

您尝试导入它了吗?也许可以在head标签中添加这个。

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