flask和vue结合写智能机器人，代码示例

Flask是一个轻量级的Python Web框架，而Vue.js是一个流行的前端JavaScript库，用于构建用户界面。将两者结合起来创建一个简单的智能机器人应用，首先你需要安装必要的依赖。以下是一个基本的步骤：

1. **设置项目结构**:
- 创建一个Python项目文件夹，并初始化一个虚拟环境。

   python -m venv my_flask_vue_bot
   source my_flask_vue_bot/bin/activate

2. **安装Flask和Vue CLI**:

   pip install Flask vue-cli

3. **创建Flask API** (服务器端):
使用Flask创建一个简单的路由，例如`app.py`:

   from flask import Flask, jsonify

   app = Flask(__name__)

   @app.route('/api/say', methods=['POST'])
   def say():
       data = request.get_json()
       response = {"message": "Hello, you said: " + data["text"]}
       return jsonify(response)

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

4. **创建Vue前端**:
使用Vue CLI生成一个新的项目并选择模板，这里假设我们选择的是脚手架项目 (`vue create my_robot_app`)。
然后在`src/App.vue`中添加API调用:

   <template>
     <div>
       <input v-model="text" placeholder="Type your message...">
       <button @click="send">Send</button>
       <p>{{response.message}}</p>
     </div>
   </template>

   <script>
   import axios from 'axios';

   export default {
     data() {
       return {
         text: '',
         response: {}
       };
     },
     methods: {
       send() {
         axios.post('http://localhost:5000/api/say', { text: this.text })
           .then(response => (this.response = response.data));
       }
     }
   };
   </script>

5. **运行项目**:
- 启动Flask服务: `python app.py`
- 使用Vue CLI启动前端: `cd my_robot_app && npm run serve`

现在你可以访问`http://localhost:8080`（默认Vue端口），输入消息并点击发送，智能机器人会在Flask后端处理请求并返回响应。