Vue学习使用系列八【axios使用get以及post请求】

1:code
  1 <!DOCTYPE html>
  2 <html lang="en">
  3 
  4 <head>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7     <title>Document</title>
  8     <script src="../assets/vue.js"></script>
  9     <script src="../assets/axios.js"></script>
 10 </head>
 11 
 12 <body>
 13     <div id="app">
 14         <table>
 15             <tr v-for="(item, index) in info">
 16                 <td>{{item.name}}</td>
 17                 <td>{{item.age}}</td>
 18             </tr>
 19         </table>
 20         <table>
 21             <tr v-for="(item ,index) in infoget02">
 22                 <td>{{item.name}}</td>
 23                 <td>{{item.age}}</td>
 24             </tr>
 25         </table>
 26         <table>
 27             <tr v-for="(item ,index) in infoget03">
 28                 <td>{{item.name}}</td>
 29                 <td>{{item.age}}</td>
 30             </tr>
 31         </table>
 32         <table>
 33             <tr v-for="(item ,index) in infoget04">
 34                 <td>{{item.name}}</td>
 35                 <td>{{item.age}}</td>
 36             </tr>
 37         </table>
 38     </div>
 39     <script>
 40         new Vue({
 41             el: "#app",
 42             data: {
 43                 info: [],
 44                 infoget02: [],
 45                 infoget03: [],
 46                 infoget04: []
 47             },
 48             methods: {
 49                 doget: function() {
 50                     axios.get("http://localhost:5000/api/appsetjson/getappsetting").then(respose => {
 51                         this.info = respose.data;
 52                         console.log("请求到数据！");
 53                     }).catch(function(error) {
 54                         console.log("异常" + error);
 55                     })
 56                 },
 57                 dopost01: function(name, age) {
 58                     /* 后端的代码
 59                       [HttpPost("getdata01")]
 60                       public dynamic getData01(string name, int age)
 61                     */
 62                     axios({
 63                         method: "post",
 64                         url: "http://localhost:5000/api/appsetjson/postdata01",
 65                         params: { //类似get请求
 66                             name: name,
 67                             age: age
 68                         },
 69                         timeout: 3000
 70                     }).then(resp => {
 71                         this.infoget02 = resp;
 72                     }).catch(function(error) {
 73                         console.log(error);
 74                     })
 75                 },
 76                 dopost02: function() {
 77                     /*
 78                      [HttpPost("postdata02")]
 79                      public dynamic postdata02(tempPerson person)
 80                      //后端使用跨域的时候新增:SetPreflightMaxAge(System.TimeSpan.FromMinutes(10))
 81                     */
 82                     axios({
 83                         method: "post",
 84                         url: "http://localhost:5000/api/appsetjson/postdata02",
 85                         data: { //注意这里是data
 86                             name: "后端是一个对象",
 87                             age: 23
 88                         }
 89                     }).then(respos => {
 90                         this.infoget03 = respos;
 91                     })
 92                 },
 93                 dopost03: function(name, age) {
 94                     /*
 95                     [HttpPost("postdata03/{name}/{age}")]
 96                     public dynamic postdata03(string name, int age)
 97                     */
 98                     axios({
 99                         method: "post",
100                         url: "http://localhost:5000/api/appsetjson/postdata03/" + name + "/" + age
101                     }).then(respos => {
102                         this.infoget04 = respos;
103                         console.log(respos);
104                     })
105                 }
106             },
107             mounted() {
108                 this.doget();
109                 this.dopost01("小张哥", 22);
110                 this.dopost02();
111                 this.dopost03("restFull风格的请求", 19);
112             }
113         })
114     </script>
115 </body>
116 
117 </html>
2:测试效果