axios

Vue中的ajax
ajax作用：前端页面和后台数据做交互
在写是需要有一个.json的文档

axios({
  method:'get'//发送请求 get、 post,
  url:'路径'
}).then(function(rext){//请求成功
  console.log(rext.data)
}).catch(function(tex){//请求失败
  console.log(tex)
})

用git来模拟服务器
在执行时，需要使用git安装http-server
安装指令：npm install http-server -g回车等待
开启一个服务：http-server

html、vue

<div id="app">
    <router-link to="/home">首页</router-link>
    <router-link to="/user">登录</router-link>
    <router-view></router-view>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.js"></script>
<script src="https://cdn.bootcss.com/axios/0.18.0/axios.js"></script>

<script>
    var home={
        template:`
        <h1>我是首页</h1>
        `
    }
    var user={
        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="value in text">
                         <td>{{value.num}}</td>
                         <td>{{value.pname}}</td>
                         <td>{{value.price}}</td>
                         <td>{{value.count}}</td>
                         <td>{{value.sub}}</td>
                      </tr>

               </tbody>
         </table>
        </div>


        `,
        data:function(){
            return{
                text:null
            }
        },
        mounted:function(){
            var thiss=this
            axios({
                method:'get',
                url:'shuju.json'
            }).then(function(aaa){
                thiss.text=aaa.data
            }).catch(function(aaa){
                console.log(aaa)
            })
        }
    }
    const luyou=[
        {path:'/',component:home},
        {path:'/home',component:home},
        {path:'/user',component:user}
    ]
    const router=new VueRouter({
        routes:luyou
    })
    new Vue({
        el:'#app',
        router:router
    })
</script>

json

[
  {
    "num":1,
    "pname":"apple",
    "price":3,
    "count":2,
    "sub":6
  },
  {
    "num":2,
    "pname":"pear",
    "price":4,
    "count":3,
    "sub":12
  },
  {
    "num":3,
    "pname":"banana",
    "price":5,
    "count":4,
    "sub":20
  }
]