vue+python

### 如何将Vue.js与Python集成用于Web开发

为了实现前端使用Vue.js而后台采用Python的架构，通常会利用Django或Flask这样的框架来创建RESTful API服务。通过这些API接口，前后端可以相互通信并交换数据。

#### 使用Flask作为后端服务器

Flask是一个轻量级的WSGI Web应用框架，在Python社区非常流行。它易于上手，并且能够快速搭建起支持JSON响应的服务端程序[^1]。

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/api/data', methods=['GET'])
def get_data():
    data = {"message": "Hello from Flask!"}
    return jsonify(data)

if __name__ == '__main__':
    app.run(debug=True)

这段简单的代码展示了如何设置一个返回JSON对象的基础路由。对于更复杂的应用场景，则可以通过定义模型类、数据库连接等功能模块进一步扩展此基础结构。

#### 前端部分：Vue实例化组件并与后端交互

在客户端项目中引入`axios`库可以帮助简化HTTP请求操作。下面的例子说明了怎样在一个Vue单文件组件内发起异步调用来获取来自上述Flask API的数据：

<template>
  <div id="app">
    {{ message }}
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'App',
  data() {
    return { message: '' };
  },
  mounted() {
    axios.get('http://localhost:5000/api/data')
      .then(response => (this.message = response.data.message));
  }
};
</script>

这里的关键在于理解Vue生命周期钩子函数`mounted()`的作用——当DOM挂载完成后执行指定逻辑；同时掌握Axios发送网络请求的方式及其链式回调处理机制。

#### 配置跨域资源共享(CORS)

由于浏览器的安全策略，默认情况下不允许不同源之间的资源访问。因此如果Vue和Flask运行在同一台机器上的不同端口下，就需要配置CORS以允许合法的跨站请求。可以在Flask应用里安装第三方包flask-cors来轻松解决这个问题[^2]。

pip install -U flask-cors

接着修改之前的Flask入口脚本如下所示：

from flask_cors import CORS

...

cors = CORS(app, resources={r"/api/*": {"origins": "*"}})

这样就完成了基本的Vue.js与Python集成方案介绍。实际生产环境中还需要考虑更多因素比如安全性验证、错误捕获等细节优化措施。