Axios网络请求

网页：Axios中文文档 | Axios中文网Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.jshttps://www.axios-http.cn/

安装命令npm install axios

上一节创建的项目终端安装，安装完成

生命周期函数

App.vue在上述位置加入代码

  created: function () {
    console.log('App组件被创建')
  },

movie.vue在上述位置加入

    created: function() {
        console.log("movie 组件被调用")
    },

运行成功，上面红色警告是之前日期选择组件没赋值

App.vue在上述位置加入下面代码

  mounted: function () {    
    console.log('App组件被挂载')
  },

刷新

打开之前创建mdbdemo项目，端口改成8088

启动，浏览器输入localhost:8088/user/findAll看到数据

修改App.vue代码

  created: function () {
    axios.get("http://localhost:8088/user/findAll")
     .then(function (response) {
        console.log(response)
      })
  },

加注解，解决跨域问题，vue的端口8080，springboot8088

刷新，数据接收成功

hello.vue修改代码

<template>
    <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      :row-class-name="tableRowClassName">
      <el-table-column
        prop="id"
        label="编号"
        width="180">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="birthday"
        label="生日">
      </el-table-column>
    </el-table>
    <el-date-picker
      v-model="value1"
      type="date"
      placeholder="选择日期">
    </el-date-picker>
    <i class="fa fa-camera-retro"></i> fa-camera-retro
    </div>
  </template>
  
  <style>
    .el-table .warning-row {
      background: oldlace;
    }
  
    .el-table .success-row {
      background: #f0f9eb;
    }
  </style>
  
  <script>
  import axios from 'axios';

    export default {
      methods: {
        tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
        }
      },
      created: function () {
        axios.get("http://localhost:8088/user/findAll").then((response)=>{
            this.tableData = response.data;
          })
      },
      data() {
        return {
          tableData: [],
        }
      }
      // data() {
      //   return {
      //     tableData: [{
      //       date: '2016-05-02',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1518 弄',
      //     }, {
      //       date: '2016-05-04',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1518 弄'
      //     }, {
      //       date: '2016-05-01',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1518 弄',
      //     }, {
      //       date: '2016-05-03',
      //       name: '王小虎',
      //       address: '上海市普陀区金沙江路 1518 弄'
      //     }]
      //   }
      // }
    }
  </script>

刷新网页，数据库显示在前端

与vue整合

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import 'font-awesome/css/font-awesome.min.css';
import axios from 'axios';

axios.defaults.baseURL = "http://localhost:8088";
Vue.prototype.$http = axios
Vue.use(ElementUI);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

修改hello.vue