vue ajax 前端页面和后台数据进行交互 json
vue 库
下载：
npm install axios

访问页面：
   网址：127.0.0.1:8080

安装http-server:   
npm install http-server -g 

HTML中

<div id="app">
            <router-link to='/home'>首页</router-link>
            <router-link to='/detail'>详情页</router-link>
            <router-view></router-view>
        </div>
        <script src="js/vue.js"></script>
        <script src="js/vue-router.js"></script>
        <script src="js/axios.js"></script>
        <script>
            var Home={
                template:`
                  <h1>这是首页内容</h1>
                `
            }
            var Detail ={
                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 fruList'>
                                 <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{
                        fruList:null
                    }
                },
                mounted:function(){
                    var self=this;
                    axios({
                        method:'get',
                        url:'fruit.json'
                    }).then(function(resp){
                        console.log(resp.data)
                        self.fruList=resp.data
                    }).catch(function(err){
                        
                    })
                }
                
            }
                const routes=[
                   {path:'/',component:Home},
                   {path:'/home',component:Home},
                   {path:'/detail',component:Detail}
                ]
                
                const router =new VueRouter({
                    routes:routes
                })
            new Vue({
                el:'#app',
                router:router
            })
        </script>

json文件

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