axios

axios是独立的项目，不是vue里面的一部分，使用axios经常和vue一起使用，用于实现ajax的操作

在浏览器中可以帮助我们完成 ajax请求的发送
在node.js中可以向远程接口发送请求

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale==1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <table style="border: 1px solid #cccccc;width: 60%;">
            <tr>
                <th>序号</th>
                <th>用户名</th>
                <th>年龄</th>
            </tr>
            <tr v-for="(user,index) in userList">
                <td>{{index}}</td>
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="/vue.min.js"></script>
    <script src="/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            //固定的结构
            data: { //在data定义变量和初始值
                //定义变量，值空数组
                userList:[]
            },
            created(){ //页面渲染之前执行
                //调用定义的方法
                this.getUserList()        
            },
            methods:{   //编写具体的方法
                //创建方法，查询所有的用户数据
                getUserList(){
                    //使用axios发送ajax请求
                    //axios.提交方式("请求接口路径").then(箭头函数).catch(箭头函数)
                    axios.get("data.json")
                        .then(response=>{
                            //response就是请求之后的返回数据
　　　　　　　　　　　　　　　　 //通过response获取具体数据，赋值给定义空数组
                            this.userList=response.data.data.items
                            console.log(this.userList)

                        }) //请求成功执行then方法
                        .catch(error=>{

                        }) //请求失败执行catch方法
                }
            }

        })
    </script>
</body>
</html>

data.json

{
    "success":true,
    "code":20000,
    "message":"成功",
    "data":{
        "items":[
            {"name":"lucy","age":30},
            {"name":"lily","age":33},
            {"name":"wangxiaoli","age":41}
        ]
    }
}

 

axios是独立于vue的一个项目，基于promise用于浏览器和node.js的http客户端
在浏览器中可以帮助我们完成 ajax请求的发送 
<script>
// 1. 定义（路由）组件。
// 可以从其他文件 import 进来
const Welcome = { template: '<div>欢迎</div>' }
const Student = { template: '<div>student list</div>' }
const Teacher = { template: '<div>teacher list</div>' }
// 2. 定义路由
// 每个路由应该映射一个组件。
const routes = [
　　　　{ path: '/', redirect: '/welcome' }, //设置默认指向的路径
　　　　{ path: '/welcome', component: Welcome },
　　　　{ path: '/student', component: Student },
　　　　{ path: '/teacher', component: Teacher }
]
// 3. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
routes // （缩写）相当于 routes: routes
})
// 4. 创建和挂载根实例。
// 从而让整个应用都有路由功能
const app = new Vue({
el: '#app',
router
})
// 现在，应用已经启动了！
</script>

 

在node.js中可以向远程接口发送请求

posted @ 2021-11-30 13:26  关陈七  阅读(608)  评论(0)    收藏  举报