How to use Vue to achieve front-end and back-end separation and interface docking?

With the continuous development of front-end technology, the architectural model of separation of front-end and back-end is becoming more and more popular. The advantages of front-end and back-end separation are obvious. The front-end and back-end can be developed independently, each with its own technology selection and development rhythm, which can improve the maintainability and scalability of the system. As a popular front-end framework, Vue can bring a better user experience. This article will introduce in detail how to use Vue to implement the architectural pattern of front-end and back-end separation, and demonstrate the interface docking method.

1. Back-end implementation

For back-end implementation, we can choose languages ​​and frameworks that we are familiar with, such as java's Spring framework or python's Django framework, etc. I won’t go into too much detail here.

2. Front-end implementation

Vue is a lightweight, easy-to-use front-end framework, which is very suitable for realizing the architectural pattern of front-end and back-end separation. The steps to use Vue to achieve front-end and back-end separation are as follows:

1. Create a Vue project

First, we need to create a new Vue project through the command line tool. Here we are using Vue-cli scaffolding, the command is as follows:

npm install -g vue-cli         // 全局安装Vue-cli
vue init webpack my-project   // 创建一个webpack项目

2. Modify the configuration file

In the configuration file config/index.js, configure the proxyTable attribute as The address of the proxy backend:

module.exports = {
  // ...
  dev: {
    // ...
    proxyTable: {
      '/api': {
        target: 'http://localhost:8888',   // 后端接口地址
        changeOrigin: true      // 是否跨域
      }
    }
  }
}

3. Writing front-end pages and interface calls

The core idea of ​​Vue is componentization. We can define a front-end page as a component. At the same time, the interface is called through ajax, and the Vue-resource library can be used here:

<template>
  <div>
    <h2 id="用户列表">用户列表</h2>
    <table>
      <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="user in users" :key="user.id">
          <td>{{ user.id }}</td>
          <td>{{ user.name }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

export default {
  name: 'UserList',
  data () {
    return {
      users: []
    }
  },
  created () {
    Vue.http.get('/api/users')
      .then(response => {
        this.users = response.data
      })
      .catch(error => {
        console.log(error)
      })
  }
}
</script>

In the above code, we define a component named UserList, and call the interface to obtain the user list by triggering the created event. , and finally bind the data to the page. It should be noted that the interface address called here is "/api/users". Because we have set the proxy in the configuration file, we actually access the backend address "http://localhost:8888/api" /users".

4. Building and Deployment

After we finish writing the front-end code, we can build and package the Vue project through the command:

npm run build

After packaging The generated folder is the folder we need to deploy. Just deploy this folder to the web server in the normal way.

3. How to connect the interface?

Interface docking is the core content of the front-end and back-end separation architecture. In the above code, we involve accessing the backend address "http://localhost:8888/api/users". In fact, there are two methods of connecting to the backend.

1. JSON data format docking

In this case, we need the backend to provide an API interface that returns JSON format, and the frontend calls this interface through ajax to obtain the data . The data format returned by the backend is as follows:

{
    "code": 0,
    "message": "",
    "data": [{ "id": 1, "name": "张三" }, { "id": 2, "name": "李四" }]
}

In the front-end code, we need to parse and display the data returned by the backend:

Vue.http.get('/api/users')
      .then(response => {
        if (response.body.code === 0) {
          this.users = response.body.data
        } else {
          alert(response.body.message)
        }
      })

In the above code, if the backend If the returned data code attribute is 0, the list data is displayed on the page, otherwise a warning box will pop up to prompt an error message.

2. Restful interface docking

In this case, our backend needs to expose the RESTful API interface. For example, in a user-managed system, we can have the following API interface:

##/usersGETGet all users/users/{id}GETGet the specified user information/usersPOSTCreate a new user/users/{id}PATCHUpdate the specified user information/users/{id}DELETEDelete the specified user

Interface name	Request method	Function

In the front-end code, call these interfaces Examples of methods are as follows:

// 获取所有用户
Vue.http.get('/api/users')
    .then(response => {
        // ...
    })

// 获取指定用户信息
Vue.http.get('/api/users/' + userId)
    .then(response => {
        // ...
    })

// 新建一个用户
let data = { name: '张三', age: 20 }
Vue.http.post('/api/users', data)
    .then(response => {
        // ...
    })

// 更新指定用户信息
let data = { name: '李四', age: 30 }
Vue.http.patch('/api/users/' + userId, data)
    .then(response => {
        // ...
    })

// 删除指定用户
Vue.http.delete('/api/users/' + userId)
    .then(response => {
        // ...
    })

In the above code, we demonstrate how to call different RESTful interfaces to implement different business functions. Vue-resource can easily realize the interface docking function through simple method calls.

In short, the architectural pattern of front-end and back-end separation through Vue can greatly improve the maintainability and scalability of the system. This article introduces in detail how to use Vue to realize the architectural pattern of front-end and back-end separation from three aspects: implementation principle, front-end code implementation and interface docking. At the same time, it should be noted that in the actual development process, you need to make fine-tuning and transformation according to your actual situation to achieve a more beautiful front-end and back-end separation architecture.

The above is the detailed content of How to use Vue to achieve front-end and back-end separation and interface docking?. For more information, please follow other related articles on the PHP Chinese website!