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, requestfrom flask_cors import CORS# instantiate the appapp = 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已经连接起来了，可以在后端定义前端传过来的数据处理逻辑。