Vue前端开发

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

安装需要的模块

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

npm install element-plus --save

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

安装router

npm install vue-router@4

安装axios

npm install axios --save

新建一个组件UserLogin.vue

代码如下：

  
    
Login Form
    
      
        Username:
        
      
      
        Password:
        
      
      Submit
    
  


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);
        // 处理错误
      });
};

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

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

App.vue

在app.vue中做如下修改：

  
  
我是一个test
  
    Default
    
    Login
    
    Success
    Info
    Warning
    Danger
  




#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;
}

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已经连接起来了，可以在后端定义前端传过来的数据处理逻辑。