详解vue-admin和后端(flask)分离结合的例子

下面我将为您详细讲解如何使用flask和vue-admin进行前后端分离，并给出两个示例说明。

背景

前端开发中，随着前端框架的不断推陈出新，后端的开发出现了一种趋势，就是将前端和后端进行分离。

准备工作

在使用flask和vue-admin分离前，有几个准备工作：

• 安装flask
• 安装vue-cli
• 安装vue-admin

具体安装方法这里不再赘述，可以在官网找到详细的教程。

示例一：使用flask提供后端数据

首先，我们需要在flask中编写接口，提供数据给vue-admin调用。以提供用户列表为例，我们可以编写一个返回json格式数据的接口：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/users')
def users():
    users = [{'id': 1, 'name': 'Alice'},
             {'id': 2, 'name': 'Bob'},
             {'id': 3, 'name': 'Charlie'},
             {'id': 4, 'name': 'Dave'}]
    return jsonify(users)

在vue-admin中，可以通过axios发起请求，并将返回的数据渲染到页面中：

<template>
  <div>
    <el-table :data="users" border>
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      users: []
    }
  },
  created() {
    axios.get('/users').then(response => {
      this.users = response.data
    })
  }
}
</script>

示例二：使用flask发送邮件

除了提供数据接口，flask还可以用来发送邮件。以发送注册确认邮件为例，我们可以编写一个发送邮件的接口：

from flask import Flask, request

app = Flask(__name__)

@app.route('/register', methods=['POST'])
def register():
    username = request.form['username']
    email = request.form['email']
    # send confirmation email
    return 'Confirmation email sent'

在vue-admin中，可以通过axios向该接口发送邮件信息：

<template>
  <div>
    <el-form ref="registerForm" :model="registerForm" :rules="rules">
      <el-form-item label="Username" prop="username">
        <el-input v-model="registerForm.username"></el-input>
      </el-form-item>
      <el-form-item label="Email" prop="email">
        <el-input v-model="registerForm.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="register">Register</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      registerForm: {
        username: '',
        email: ''
      },
      rules: {
        username: [
          { required: true, message: 'Please input username', trigger: 'blur' }
        ],
        email: [
          { required: true, message: 'Please input email', trigger: 'blur' },
          { type: 'email', message: 'Please enter a valid email address', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    register() {
      this.$refs.registerForm.validate(valid => {
        if (valid) {
          axios.post('/register', this.registerForm).then(response => {
            this.$message.success(response.data)
          })
        }
      })
    }
  }
}
</script>

结论

通过以上两个示例，我们可以看到，flask和vue-admin的分离非常容易实现，它们可以非常好地协作。在实践中，我们可以灵活使用这种架构，将前端和后端进行分离，从而更好地组织我们的代码。