欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

axios

程序员文章站 2022-07-02 16:54:27
...

vue ajax 前端页面和后台数据进行交互 json
下载：
npm install axios
访问页面:
网址：127.0.0.1:8080
安装http-server
npm install http-server -g

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
       <div id='app'>
            <router-link to='/home'>首页</router-link>
            <rouetr-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){//请求失败
             
         })
     }    
   } 
     
   //3.配置路由
     const routes=[
         {path:'/',component:Home},
         {path:'/home',component:Home},
         {path:'/detail',component:Detail}
     ]
    
   //4.
     const router=new VueRouter({
         routes:routes
     }) 
     //5.
   new Vue({
       el:"#app",
       router:router
   })
              }
         </script>
</body>

friut.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
    }
]

上一篇： Axios的基本使用

下一篇： axios

推荐阅读