vue前端登录

要实现前端登录，你可以使用 Vue.js 与后端 API 进行交互。以下是一个简单的示例：

1. 创建一个登录组件 Login.vue，包含用户名和密码的表单。当用户提交表单时，可以使用 Axios 库将登录请求发送到后端 API。

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

<script>
import axios from 'axios';

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

2. 在后端 API 中处理登录请求，验证用户名和密码是否正确，如果正确则返回一个包含用户信息的 JSON 响应。

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/api/login', methods=['POST'])
def login():
    username = request.json.get('username')
    password = request.json.get('password')
    # 验证用户名和密码是否正确
    if username == 'admin' and password == '123456':
        # 返回一个包含用户信息的 JSON 响应
        return jsonify({'id': 1, 'username': 'admin', 'email': 'admin@example.com'})
    else:
        return jsonify({'error': 'Invalid username or password'}), 401

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

3. 在登录成功后，可以将用户信息保存到 Vuex 存储中，以便在其他组件中使用。在 Login.vue 组件中，可以使用 Vuex 的 `commit` 方法来触发一个 mutation，将用户信息保存到存储中。

import { mapMutations } from 'vuex';

export default {
  // ...
  methods: {
    ...mapMutations(['login']),
    login() {
      axios.post('/api/login', {
        username: this.username,
        password: this.password
      }).then(response => {
        // 保存用户信息到 Vuex 存储中
        this.login(response.data);
        // 跳转到首页或其他需要登录的页面
        this.$router.push('/');
      }).catch(error => {
        // 处理登录失败后的逻辑
      });
    }
  }
}

4. 在 Vuex 存储中定义一个 `login` mutation，用于保存用户信息。可以使用 `state` 对象来保存用户信息，并在 `login` mutation 中更新 `state` 对象。

export default new Vuex.Store({
  state: {
    user: null
  },
  mutations: {
    login(state, user) {
      state.user = user;
    }
  }
});

这是一个简单的前端登录示例，你可以根据具体情况进行调整和扩展。