vue加python实现一个登陆页面

首先在Vue项目中创建一个login组件，用来展示登陆页面的界面。

1. 安装axios和vue-axios

npm install axios vue-axios --save

2. 在login.vue中引入axios和vue-axios

import axios from 'axios'
import VueAxios from 'vue-axios'

3. 在login.vue中注册vue-axios

Vue.use(VueAxios, axios)

4. 在login.vue中添加data属性，用于存储用户输入的账号和密码

data () {
  return {
    username: '',
    password: ''
  }
}

5. 在login.vue中添加一个login方法，用于向后端发送登陆请求

methods: {
  login () {
    this.$http.post('/api/login', {
      username: this.username,
      password: this.password
    }).then(response => {
      // 登陆成功，跳转到首页
      this.$router.push('/')
    }).catch(error => {
      // 登陆失败，提示错误信息
      console.log(error)
      alert('登陆失败，请检查用户名和密码')
    })
  }
}

6. 在login.vue中添加一个login按钮，绑定login方法

<template>
  <div>
    <input type="text" v-model="username" placeholder="请输入用户名">
    <input type="password" v-model="password" placeholder="请输入密码">
    <button @click="login">登陆</button>
  </div>
</template>

7. 在后端编写一个login API，用于验证用户的账号和密码

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 == 'admin':
        return jsonify({'msg': 'success'})
    else:
        return jsonify({'msg': 'error'})

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

8. 启动后端服务，并将前端代码打包后部署到服务器上

npm run build

9. 在前端代码中修改API请求地址，指向后端服务的地址

Vue.axios.defaults.baseURL = 'http://localhost:5000'

10. 在浏览器中访问登陆页面，输入正确的账号和密码，即可登陆成功。