详解前后端分离之VueJS前端

前后端分离是现代web开发中非常流行的一种技术架构，该架构将前端与后端分离开来，前端负责展示数据，后端只负责提供数据接口。VueJS是一种流行的前端JS框架，本文将从如何搭建VueJS前端的角度来详解前后端分离架构的实现。

步骤一：安装VueJS及相关依赖

在搭建VueJS前端之前，需要先安装好VueJS及相关依赖。在命令行中输入以下命令：

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install

上述命令依次完成了以下任务：

全局安装VueJS脚手架工具vue-cli
用该工具创建VueJS项目模板my-project
进入项目目录并安装相关依赖

步骤二：设置前端请求API

接下来我们需要编写代码来请求后端API接口。

在代码的/src/api/index.js文件中，我们可以写入以下代码，从而设置前端请求API：

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8080/api'  //设置后端API的地址
export default axios

在上面的代码中，我们引入了axios库用于发起网络请求，并设置后端API的地址是http://localhost:8080/api，该地址需要根据实际情况进行修改。这样我们就完成了前端请求API的设置，能够与后端进行通信了。

步骤三：组件编写

在VueJS中，以组件的形式来管理UI界面是一个非常好的实践。因此，在接下来的步骤中，我们需要编写VueJS的组件。

我们在项目的/src/components文件夹中新建一个MyComponent.vue文件，然后在该文件中写入下述代码：

<template>
  <div>
    <button @click="clickHandler">Click me</button>
    <div>{{ message }}</div>
  </div>
</template>

<script>
  import axios from '../api'
  export default {
    data () {
      return {
        message: ''
      }
    },
    methods: {
      clickHandler () {
        axios.get('/hello')
        .then(response => { this.message = response.data })
        .catch(error => { console.log(error) })
      }
    }
  }
</script>

上述代码定义了一个名为MyComponent的VueJS组件，并实现了一个点击按钮后向后端请求数据，并将该数据显示在页面上的逻辑。

步骤四：集成到页面中

在VueJS中，将组件集成到页面中是一个非常简单的事情。我们只需要在页面的HTML代码中引入组件并设置标签的显示，就可以让VueJS将页面渲染出来。

我们在项目的/src/App.vue文件中，引入上述编写的MyComponent组件，并将其集成到页面中，代码如下：

<template>
  <div id="app">
    <MyComponent />
  </div>
</template>

<script>
  import MyComponent from './components/MyComponent.vue'
  export default {
    components: {
      MyComponent
    }
  }
</script>

上述代码定义了一个名为App的VueJS组件，并在其中将MyComponent组件引入并集成到页面中。

示例一：展示用户列表

如何展示用户列表，是一个非常常见的需求。下面简单介绍一种实现思路。

在后端代码中，我们需要提供一个获取用户列表的API接口。在VueJS前端代码中，我们可以编写一个名为UserList.vue的组件，并在其中调用后端给出的获取用户列表API接口，最终展示出用户列表。

<template>
  <div>
    <ul>
      <li v-for="item in list" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
  import axios from '../api'
  export default {
    data () {
      return {
        list: []
      }
    },
    created () {
      axios.get('/users')
      .then(response => { this.list = response.data })
      .catch(error => { console.log(error) })
    }
  }
</script>

上述代码定义了一个名为UserList的VueJS组件，并在其中实现了一个请求后端API接口获取用户列表的逻辑，最终将列表数据展示在页面上。

示例二：展示数据可视化图表

除了展示用户列表，如何展示数据可视化图表也是很多业务逻辑中的需求。下面简单介绍一种实现思路。

在VueJS中，有非常多优秀的数据可视化库可供使用。这里我们选择vue-chartjs来展示数据可视化图表。vue-chartjs是一个基于Chart.js封装的VueJS图表库。

我们在项目的/src/components文件夹下新建一个MyChart.vue文件，然后在该文件中编写以下代码：

<template>
  <div>
    <canvas ref="canvas"></canvas>
  </div>
</template>

<script>
  import { Line } from 'vue-chartjs'
  export default {
    extends: Line,
    props: {
      chartData: {
        type: Object,
        default: null
      },
      options: {
        type: Object,
        default: null
      }
    },
    mounted () {
      this.renderChart(this.chartData, this.options)
    }
  }
</script>

上述代码定义了一个名为MyChart的VueJS组件，并使用vue-chartjs来展示数据可视化图表。在组件的props中定义了两个属性：chartData和options，分别用于传入图表数据和图表配置项。在组件的mounted生命周期中，调用renderChart方法，将图表数据和图表配置项渲染出来。

在页面上引入该组件，并调用后端API接口获取数据，代码示例如下：

<template>
  <div>
    <my-chart :chart-data="chartData" :options="chartOptions"></my-chart>
  </div>
</template>

<script>
  import MyChart from './MyChart.vue'
  import axios from '../api'
  export default {
    data () {
      return {
        chartData: null,
        chartOptions: {
          title: {
            text: 'Chart Title'
          },
          scales: {
            yAxes: [{
              ticks: {
                beginAtZero: true
              }
            }]
          }
        }
      }
    },
    components: {
      MyChart
    },
    created () {
      axios.get('/chart-data')
      .then(response => { this.chartData = response.data })
      .catch(error => { console.log(error) })
    }
  }
</script>

上述代码定义了一个名为MyChartWrapper的VueJS组件，并在其中引入了MyChart组件。在组件的created生命周期中调用后端API接口，获取数据并将其传递给MyChart组件进行图表展示。同时，还定义了一个名为chartOptions的属性，用于配置图表的相关属性。最终将图表展示在页面上。

通过以上两个实例的说明，我们可以看到：前后端分离之VueJS前端的实现过程非常容易，并且在开发实践中非常好用。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：详解前后端分离之VueJS前端 - Python技术站