vue3+flask 简易登录功能实现

最新推荐文章于 2024-08-01 22:10:27 发布

laoyaotask

最新推荐文章于 2024-08-01 22:10:27 发布

阅读量1.6k

点赞数

分类专栏： Vue Python 文章标签： flask vue

本文链接：https://blog.csdn.net/laoyaotask/article/details/131297362

版权

本文介绍了一个使用Vue3和Flask搭建的简易登录功能实现。未登录用户被引导至登录组件，登录成功后跳转至首页。重点讨论了Flask中的session管理和接收前端数据的方法，以及Vue3组件间导航。

摘要由CSDN通过智能技术生成

功能说明

如果未登录，则跳转到登录组件；在登录组件中登录成功，则跳转到首页组件。用户信息在mysql数据库中。较为关键的几个点有：flask中session功能的应用和接收前端传递数据的方式、vue3中的组件跳转等。

一、前端Vue程序

1、创建登录组件Login.vue

<template>
  <el-row style="margin: 0.5rem 0;">
    <el-col :span="24">
        <h2 style="text-align: center;font-weight: bold;">用户登录</h2>
    </el-col>
  </el-row>
  <el-row style="margin: 0.5rem 0;">
    <el-col :span="24">
      <el-input v-model="un">
        <template #prepend>账号</template>
      </el-input>
    </el-col>
  </el-row>
  <el-row  style="margin: 0.5rem 0;">
    <el-col :span="24">
      <el-input v-model="pwd" type="password" show-password>
        <template #prepend>密码</template>
      </el-input>
    </el-col>
  </el-row>
  <el-row  style="margin: 0.5rem 0;text-align: center;">
    <el-col :span="24">
        <el-button type="primary" round @click="submithandle">提交</el-button>
        <el-button type="info" round>重置</el