flask vue登录界面

Flask是一个基于Python的轻量级Web框架，Vue是一个流行的JavaScript框架，它们可以结合使用来构建现代化的Web应用程序。下面是一个简单的Flask Vue登录界面的实现：

1. 创建Flask后端应用程序

在Python环境中，使用pip安装Flask框架，并创建一个名为app.py的文件。在文件中添加以下代码：

from flask import Flask, jsonify, request

app = Flask(__name__)

@app.route('/login', methods=['POST'])
def login():
    username = request.json['username']
    password = request.json['password']
    # TODO: 验证用户名和密码是否正确
    return jsonify({'message': 'success'})

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

这个应用程序定义了一个/login路由，它接受POST请求并返回JSON响应。在实际应用中，我们需要编写验证用户身份的代码来代替TODO注释。

2. 创建Vue前端应用程序

使用Vue CLI创建一个名为my-app的Vue应用程序：

vue create my-app

进入my-app目录，安装axios库来发送HTTP请求：

cd my-app
npm install axios

在src目录下创建一个名为Login.vue的文件。这个文件定义了一个登录表单和一个处理表单提交的方法。在文件中添加以下代码：

<template>
  <div>
    <h1>Login</h1>
    <form @submit.prevent="submitForm">
      <div>
        <label>Username:</label>
        <input type="text" v-model="username" required>
      </div>
      <div>
        <label>Password:</label>
        <input type="password" v-model="password" required>
      </div>
      <button type="submit">Login</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    submitForm() {
      axios.post('/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        console.log(response.data.message)
        // TODO: 处理登录成功后的逻辑
      }).catch(error => {
        console.error(error)
        // TODO: 处理登录失败后的逻辑
      })
    }
  }
}
</script>

这个组件渲染一个表单，当表单提交时会发送一个POST请求到Flask后端应用程序的/login路由，并处理响应。在实际应用中，我们需要编写处理登录成功或失败后的逻辑来代替TODO注释。

3. 运行应用程序

使用两个终端窗口分别运行Flask后端应用程序和Vue前端应用程序：

# 终端窗口1
export FLASK_APP=app.py
flask run

# 终端窗口2
npm run serve

在浏览器中打开http://localhost:8080/，就可以看到登录表单了。当表单提交时，可以在终端窗口1中看到Flask后端应用程序输出了类似于以下内容的日志：

127.0.0.1 - - [01/Jan/2022 12:00:00] "POST /login HTTP/1.1" 200 -

这表示Flask后端应用程序已成功处理了表单提交，并返回了200状态码。