VueJS-CLI学习教程 - 2 - 前后端分离

为了方便记忆和学习，整理了一下之前学习VueJS的要点，并通过在中的代码注释来阐述知识点。
需要自行下载bootstrap.css文件，并修改文件名或修改代码中引用的名称和路径：
bootstarp-3.3.7-flatly.min.css 下载flatly皮肤的bootstarp

本章重点：前后端分离，调用后端API获取数据。
GitHub前端代码 - liyingxuan/vue-cli-tutorial
GitHub后端代码 - liyingxuan/lara-vue-api

1. 安装imcvampire/vue-axios

$ npm install --save axios vue-axios

2. 配置axios

在main.js中增加：

import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)

3. 使用axios调用后端API数据

修改App.vue中JS部分：

  import Todos from './components/Todos' // 引用组件Todos
  import TodoForm from './components/TodoForm' // 引用组件TodoForm

  export default {
    name: 'app',
    data() { // 基础数据和变量
      return {
        todos: [] // 新建一个空变量，接受后端API提供的数据
      }
    },
    mounted() { // 调用后端API接口获取数据
      this.axios.get('http://localhost/api/todos').then(response => {
        this.todos = response.data
      })
    },
    computed: { // 页面中需要处理之后展示的数据，统一放这里
      todoCount() {
        return this.todos.length
      }
    },
    components: {
      Todos, TodoForm // 注册组件
    }
  }

GitHub后端代码 - liyingxuan/lara-vue-api

后端代码传输数据：

后端代码传输数据示意图

The end.

→ VueJS-CLI学习教程 - 3 - VueRouter
← VueJS-CLI学习教程 - 1 - 代码重构