Flask+Vue3前后端分离项目极简易版

• Vue前端开发

参照上一篇博客搭建好一个Vue项目，下面对Vue项目中的文件进行添加和修改

安装需要的模块

在自己项目目录下执行下面的命令

npm install element-plus --save

打开element plus官网，可以看到组件列表

安装router

npm install vue-router@4

安装axios

npm install axios --save

新建一个组件UserLogin.vue

代码如下：

<template>
  <div>
    <h2>Login Form</h2>
    <form @submit.prevent="submitForm">
      <div class="form-group">
        <label for="username">Username:</label>
        <input type="text" id="username" v-model="formData.username" required>
      </div>
      <div class="form-group">
        <label for="password">Password:</label>
        <input type="password" id="password" v-model="formData.password" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import axios from 'axios';

const formData = ref({
  username: '',
  password: ''
});

const submitForm = () => {
  axios.post('http://localhost:5000/login', formData.value, {
    headers: {
      'Content-Type': 'application/json'
    }
  })
      .then(response => {
        console.log(response.data);
        // 处理成功响应
      })
      .catch(error => {
        console.error(error);
        // 处理错误
      });
};
</script>

submitForm函数使用Axios库发送POST请求到Flask后端的http://localhost:5000/login路由（这里如果你的后端路由不一样，需要更改为你定义的路由），这个是使得前后端连接的重要部分

如果能成功 运行的话该页面显示如下：

App.vue

在app.vue中做如下修改：

<template>
  <router-view/>
  <h1>我是一个test</h1>
  <el-row class="mb-4">
    <el-button>Default</el-button>
    <router-link to="/login">
    <el-button type="primary">Login</el-button>
    </router-link>
    <el-button type="success">Success</el-button>
    <el-button type="info">Info</el-button>
    <el-button type="warning">Warning</el-button>
    <el-button type="danger">Danger</el-button>
  </el-row>
</template>

<script>

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

App.vue是主界面，一打开页面如下：

在router文件夹下，新建index.js文件

import { createRouter, createWebHistory } from "vue-router";
import UserLogin from "@/components/UserLogin.vue";  //导入路由
const routes = [
    {
        path:'/login', // 要路由到的url路径
        name:'UserLogin',
        component:UserLogin,//导入路由页面的路径

    }
];

const router = createRouter({    // 定义一个路由器
    history:createWebHistory(),
    routes
});

export default router;

定义了一个路由规则，将/login路径与名为UserLogin的组件关联起来。

修改main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import router from './router/index'



createApp(App).use(ElementPlus).use(router).mount('#app')

至此，前端部分就写完了。

Flask后端开发

就是新建一个app.py，然后添加如下代码：

from flask import Flask, jsonify, request
from flask_cors import CORS

# instantiate the app
app = Flask(__name__)
app.config.from_object(__name__)

# 用CORS（跨域资源共享）支持，允许跨域请求
CORS(app, resources={r'/*': {'origins': '*'}}, supports_credentials=True)

# 定义一个路由， 接收并处理数据，然后返回一个成功响应
@app.route('/login', methods=['POST'])
def index():
    data = request.get_json()  # 获取前端发送的JSON数据
    app.logger.info("Received data: %s", data)  # 记录接收到的数据到日志

    # 打印数据到控制台
    print("Received data:", data)
    return jsonify({'message': 'Login successful'})


if __name__ == '__main__':
# 运行Flask应用，监听默认端口（5000）
    app.run()

确保上述代码能够运行。

启动vue项目和flask项目

vue打开的初始页面时App.vue，

显示如下：

然后点击上面的login登录按钮，就会到login页面，也就是你写的UserLogin组件，如下所示：

启动flask项目。

然后用户在登录页面输入用户名和密码

点击提交，这是flask的控制台就会打印出用户名和密码

至此，前端Vue3和后端Flask App已经连接起来了，可以在后端定义前端传过来的数据处理逻辑。