Vue3 Flask全栈实战：构建问卷网站登录页面

手把手制作Vue3+Flask全栈项目 全栈开发之路实战篇 问卷网站（一）login页面

全栈Vue3+Flask项目实战篇：创建登录页面

全栈开发实战工作开始本节我们将实现调查站点的登录功能，分为前端和前端后端部分。

1. 实现后端Flask

创建一个“social”文件夹，用于存放后端数据库操作，如dataset_info.py：

在dataset_info.py中设置数据库信息，建议将文件分开，方便项目维护和部署。

然后创建数据库对象，避免循环导入，如database.py：

在database.py中创建数据库连接，并配置共享作用域，实现前后端分离结束分离。

主程序main.py负责连接flask服务和数据库：

在main.py中编写输入程序并运行服务。
通过cmd执行pythonmain.py来启动服务。

登录逻辑在token_ex.py中进行处理，包括加解密逻辑：

确定密钥，使用可逆加密实现token的生成和验证。

在login_blueprint.py中添加登录函数来处理登录请求：

定义登录视图，验证用户输入，生成令牌并在成功后返回。

2. 前端Vue实现

在Login中，创建登录界面，绑定账号并输入密码，保存token，验证通过后跳转：

编写login.vue登录界面交互逻辑。

配置路由器并添加登录和首页路由：

在router.js中设置路由规则，并配置访问指向登录页面。

将路由集成到app.vue中：

在app.vue中引入并配置路由。

查看效果

登录页面完成后，项目初步创建完成。
未来将开发管理员和数据管理后端功能。

安全提示：Token应该是暂时有效的，防止长期使用带来安全风险。

前后端结合

后端仅在用户登录成功时生成token，前端将其存储在本地以维护登录状态。

访问时，如果有token，则返回数据； 否则将返回空。

Vue+SpringBoot简单登录界面的实现

本文将展示如何使用Vue和SpringBoot构建一个简单的登录界面，包括注册和修改密码功能。
后端集成SpringBoot和Mybatis进行数据库操作。

必要的开发工具和环境：HBuilderX、IDEA、Maven、JDK1.8、MySQL。

1. 创建一个Vue项目

首先，确保安装了node.js。
如果没有，请从官方网站下载并按照说明完成安装。
安装完成后，执行以下步骤：

检查安装是否成功：输入“node-v”和“npm-v”。
如果显示版本号，则说明安装成功。
使用淘宝NPM镜像：运行`npminstall-gcnpm--registry=registry.npm.taobao.org`。
全局安装 vue-cli：使用 `cnpminstallvue-cli-g`。
初始化项目：执行`vueinitwebpack+项目名称`。
进入项目目录，使用 npminstall 安装依赖项，然后运行 ​​npmrundev 启动项目。
2. 页面实现

开发过程中，创建了以下页面：登录界面 `Login.vue`、注册页面 `Register.vue`、修改密码页面 `ChangePwd.vue` 和成功页面 `Success.vue` 。
3. 页面路由配置

在`src/router/index.js`中配置页面路由，实现页面之间的跳转。

4.运行项目

切换到项目根路径，运行`npmrundev`启动项目。
5. 后端实现具体步骤包括创建实体、结果集、控制器、服务、数据库访问DAO和配置文件。
相关详细步骤请参阅其他文章。

创建单位。
创建结果集。
创建一个控制器（如“UserContrloller.java”）。
创建一个服务（例如“UserService.java”）。
创建一个数据库访问 DAO（如“UserMapper.java”）。
配置文件。
要解决跨域问题，可以使用配置类来解决。
6、操作效果总结

通过这个简单的界面，实现了登录、注册、修改密码等基本功能，旨在提供参考和帮助。

原文作者：钱尚义刘念，原文链接：https://segmentfault.com/a/1190000023961648，原文来源：CSDN。