2018-09-25 axios

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

访问页面：
网址：127.0.0.1:8080

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

1.写入方式

axios({
            method:'get',//发送数据方式
            url:'请求数据路径'
        }).then(function(参数){
            //请求成功
        }).catch(function(参数){
            //请求失败
        })

//status：200 
//为响应状态码 响应成功值为200

2.简单的表单例子

需要在git中输入安装口令：（$ npm install -g http-server）

然后配置服务器，口令：（$ http-server）

命名中不能出现中文，否则容易出现未知错误呀！

<div id='app'>

<!--       1.-->
       <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  //声明一个null值可以对应字符串或者数组，不会报错
                 }
         },

         mounted:function(){
             var self=this;     //声明的变量this才能指向当前的内容
             axios({
                 method:'get',//发送数据的方式
                 url:'fruit.json'
             }).then(function(resp){//请求成功
                 console.log(resp.data)
                 self.fruList=resp.data  //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>

后台写入的数据，本例在fruit.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
    }
]

请求成功示例图如下：

1.png