Axios基本使用简单记录

发起get请求示例

axios.get('user',ID='12345')

  .then(function (response){

  console.log(response);

})

.catch (function (response){

  console.log(error);      

}）

发起post请求示例

axios.post('/user', {

        firstName:'Fred',

        lastName: 'Flintstone'

})

.then(function (response){

        console.log(response);

})

.catch(function(error){

        console.log(error);

})

安装axios

npm i axios -S

或

npm install --save axios

（安装axios时，先切换到Vue工程的文件夹下，在运行axios的安装命令）

安装结束后，在main.js中添加配置，配置代码：

import axios from 'axios'

Vue.prototype.axios = axios

启动 工程jar包文件

java -jar 工程jar包

开发Vue工程        

在工程中安装axios(如上)

在向main.js导入axios配置

在App.js中删除<nav>节点，保留<route-view/>,为了能显示某个视图组件

router/index.js

HomeView是动态加载，映射的路径/home

LoginView是默认加载，映射的路径/login

const routes = [
  {
    path: '/home',
    component: () => import('../views/HomeView.vue')
  },
  {
    path: '/login',
    component: LoginView
  }
]

LoginView

将03工程中App.vue的代码cv到LoginView

启动工程

修改弹出警告框

在axios中获取弹出警告框位置格式验证示例代码

（在form表单部分）

使用axios与后端服务器交互

（要确保后端服务已经启动）
let url = "http://localhost:18080/user/login";
console.log("请求路径, ");
console.log(url);
let data ={
  username : this.ruleForm.username,
  password : this.ruleForm.pass
}
console.log("请求参数, ");
console.log(data);
this.axios.post(url, data)
    .then((response) => {
      let json = response.data;
      let state = json.state;
      if(state==200){
        console.log(json.message);
      }else{
        console.log(json.message);
        this.$message.error(json.message);
      }
    })
    .catch(function (error) {
      console.log(error);
    });