axios

作者: 身痞味 | 来源:发表于2018-09-25 19:21 被阅读0次

    下载:npm install axios
    vue中的axios 前端页面和后台数据进行交互
    服务器下载:npm install http-server -g
    安装:http-server
    链接:先vue后vue-router最后axios

    <div id='app'>
         <router-link to="/home">首页</router-link>
        <router-link to="/det">详情页</router-link>
        <router-view></router-view>
    </div>
    <script>
      var Home={
            template:`
                <h1>这是首页</h1>
            `
        }
        var Det={
            template:`
            <div>
                <h1>这是详情页</h1>
                <table border=1 cellspacing=0>
                    <thead>
                        <tr>
                            <th>编号</th>
                            <th>品名</th>
                            <th>单价</th>
                            <th>数量</th>
                            <th>小计</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="val in fuss">
                            <td>{{val.bian}}</td>
                            <td>{{val.pin}}</td>
                            <td>{{val.dan}}</td>
                            <td>{{val.shu}}</td>
                            <td>{{val.xiao}}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
            `,
            data:function(){
                return{
                    fuss:null
                }
            },
            mounted:function(){
                var self=this;
                axios({
                    method:'get',//发送数据的方式
                    url:'fu.json'
                }).then(function(resp){//请求成功
    //                console.log(resp.data)
                    self.fuss=resp.data
                }).catch(function(err){//请求失败
    
                })
            }
        }
        const a=[
            {path:'/home',component:Home},
            {path:'/det',component:Det}
        ]
        const b=new VueRouter({
            routes:a
        })
        new Vue({
            el:'#app',
            router:b
        })
    </script>
    

    fu.json

    [
        {
            "bian":1,
            "pin":"banana",
            "dan":2,
            "shu":3,
            "xiao":6
        },
        {
            "bian":2,
            "pin":"pear",
            "dan":3,
            "shu":4,
            "xiao":12
        },
        {
            "bian":3,
            "pin":"pear",
            "dan":4,
            "shu":5,
            "xiao":20
        }
    ]
    

    相关文章

      网友评论

          本文标题:axios

          本文链接:https://www.haomeiwen.com/subject/aonloftx.html