Background data request in node.js mock, axios

Posted by petrb on Sat, 04 Apr 2020 11:58:38 +0200

<! -- Axios handles the cross domain background configuration
1. Install cnpm install -- save dev Axios

2.Introduce axios To project or component(Current component use only)
-->
    // Using axios requests
Axios.get("/getuser")
  .then(res => {
    //succss
    console.log(res.data.result);
  })
  .catch(error => {
    //error
    console.log(error);
  })
  .finally(() => {
    console.log("Last action performed");
  });

Axios.post("/gettable")
  .then(res => {
    //succss
    console.log(res.data.result);
  })
  .catch(error => {
    //error
    console.log(error);
  })
  .finally(() => {
    console.log("Last action performed");
  });

//For example, get background api receive parameters
// Axios.get("http://www/maodou.com/getdata?id=1&name=zhangsnan")
//   .then(res => {
//     //succss
//     console.log(res);
//   })
//   .catch(error => {
//     //error
//     console.log(error);
//   })
//   .finally(() => {
//     console.log("last action performed");
//   });
// Axios.get("", {
//   params: {
//     id: 1,
//     name: "Zhang San"
//   }
// })
//   .then(res => {
//     //succss
//     console.log(res);
//   })
//   .catch(error => {
//     //error
//     console.log(error);
//   })
//   .finally(() => {
//     console.log("last action performed");
//   });
//For example, the api receiving parameters in the post background
// Axios.post("", {
//   id: 1,
//   name: "Zhang San"
// })
//   .then(res => {
//     //succss
//     console.log(res);
//   })
//   .catch(error => {
//     //error
//     console.log(error);
//   })
//   .finally(() => {
//     console.log("last action performed");
//   });

//Because axios returns a promise object 
//You can use ES6 Async
// async function (){

// }

     computed: {
//Calculated attribute
//Complex logic can be written in computed
//  It can also write getter setter
// getData() {
//   console.log("method in calculation attribute");
// },
getData: {
  get() {
    //getter
    return this.num1 * this.num2;
  },
  set(newValue) {
    //setter
    this.num1 = newValue;
    this.num2 = newValue / 10;
  }
},
changeStatus() {
  console.log("Called in the method executed by the event");
}

},
watch: {
//The watch monitoring property or the data on the watch monitoring component changes
//Only when the monitoring method written in watch monitoring has the same name as the variable can the change of the variable be monitored
msg(afterValue, beforeValue) {
console.log(afterValue, beforeValue);
}
},
beforeCreate() {},
created() {},
beforeMount() {},
mounted() {
//Execute after the mount is completed
//The method in computed does not need to be executed with parentheses when it is called
//this.getData; / / property
this.getData = 100;
console.log(this.getData);
},
beforeUpdate() {},
updated() {},
beforeDestroy() {},
destroyed() {}
};

<! -- Vue resource plug-in
1. Cnpm install -- save dev Vue resource installation
2. Configuration project uses mainjs

  The vue project uses mockjs to simulate background data
  1. Install cnpm install mockjs -- save dev
  2. Configure files of mockjs simulation data
  3. Import mock to vue project to mainjs
-->

Topics: Web Development axios Vue mockjs Attribute