手把手制作Vue3+Flask全栈项目 全栈开发之路实战篇 问卷网站（一）login页面
Vue3+Flask全栈项目实战篇：搭建登录页面全栈开发实战入门本节我们将实现问卷网站的登录功能，分为前端和后端部分 -end 。
创建一个'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中添加登录函数来处理登录请求：
定义登录视图，验证用户输入，成功后生成并返回token。
在login.vue中，创建登录界面，关联账号和密码输入，保存token，验证通过后跳转：
在login.vue中编写登录界面交互逻辑。
配置路由器并添加登录和首页路由：
在router.js中设置路由规则并初始化登录指向登录页面。
将路由集成到app.vue中：
在app.vue中引入并配置路由。
完成登录页面后，项目就初步建立了。
未来将开发行政后端和数据管理功能。
安全提示：Token必须是临时有效的，防止长期使用带来安全风险。
后端仅在用户登录成功时生成token，前端将其存储在本地以维持登录状态。
登录时，如果有token则返回数据，否则返回null；
用vue框架做项目遇到的问题(vue项目常见问题)
小白研究项目部署-部署你的项目的一些问题剩下基本使用root，其他，try_files，我开始尝试部署你的项目。
我也研究了上一篇文章中的行为
早些时候，我听说很多朋友在你的历史旅程中遇到了各种问题，比如在路上。
如果找不到静态资源，刷新404页面等。
项目部署环境一般可以分为三类：生产环境、测试环境、开发环境。
开发环境：服务器开发环境，供开发程序员专用。
相对随机的配置可能特别有趣。
生产环境：生产环境属于对外提供公共服务的环境。
一般情况下，错误报告是关闭的，错误日志是打开的。
分支主机通常部署分支。
测试环境：一般情况下，样例配置与生产环境是封闭的。
如果程序在测试环境中不能正常运行，那么就不应该将其发布到生产服务器以将环境从开发环境过渡到生产环境。
如果在分支环境中测试错误，通常不会被用户和其他人看到，并且测试环境将尽可能与生产环境相似。
环境和生产环境如何区分？
process.env.NODE_ENV属性是进程节点全局变量。
它的作用是区分本站的环境是生产环境还是开发环境：理解webpack process.env.NODE_ ENV
其实一般情况下，Vue单页应用项目，路径不能匹配，或者支持引用错误是由这些属性引起的，他们必须已经知道它们是：
然后我将解释以下属性的使用。
根据网站上的解释，把schema用法：
当开启HTML5history.pushState时，会被限制为“close to publicPath”，即历史记录。
使用的方法，publicPath 需要是绝对路径。
然后在vue.config.js文件中，需要这样配置：
在nginx配置文件中，需要这样配置：
单个项目名为my放在/usr/local/webserver/nginx/myProject目录下，如tre.history。
e-image
例如：Chedoli服务器（点击跳转会使用熔断器
如果你的配置页面出现空白页，或者404访问错误，或者支持报告问题（可观察F12），那么你需要检查publicPath、assetsDir以及nginx是否配置正确。
404.那么有一个简单的解决方案：您需要添加一个候选者来覆盖所有情况，如果Home不匹配任何静态资源，它应该返回您的应用程序页面所依赖的相同的index.html页面，即。
使用try_files来查找index.html。
可以参考nginx原理图：
但是这样配置之后，你的服务器将不再返回404错误页面，因为index.html。
.html 文件将返回到 为了避免这种情况，您需要覆盖 Vue 应用程序中的所有中继条件，然后呈现 404 页面，这可能没有正确配置。
接口问题很多。
最近，我们在项目中发现了开发和环境之间的接口方式问题，对于初学者来说会很难理解，所以写这篇博客来和刚刚的小萌新详细分享一下接口形态的想法开始在项目中使用Vue。
Webpack提供了两个配置表来实现environment和environment.自动切换到不同的界面。
话不多说，这里就是上图。
第一步，在vue-cli项目的config文件夹下找到dev.env.js。
请求后台数据如下：
url_api是我设置的，可以自定义。
这是它在开发环境中的接口方式。
然后找到prod.env.js，默认如下图：
另外在这个文档中添加接口行：
最后。
在axios中自己封装这个接口：
自定义变量= process.env.url_api（这是在两个配置文件中自定义的），并将封装后的URL拼接到axios中。
最后，在生产环境中使用npmrundev时，会以同名调用刚刚在dev.env.js中定义的接口。
此外：十字架的出口
有些朋友可能在Vue中配置了传递代理，导致代理失败，跨越了分割的URL。
-domain 仍然出现。
我个人解决这个问题的想法是保持代理配置不变，只需将dev.env.js中的本地接口替换为空字符串即可。
开发者没有跨域问题。
如果你不明白，你可以问我。
链接：
使用vue-iter时出现的问题发起者vue问题记录
问题1.使用vue-iter时遇到的登录页面。
空白问题
我之前使用vue-cli创建了vue项目，默认使用vue-roque。
呃，带有path目录的目录结构，其中包含index.js
但是当我创建另一个项目时，默认情况下vue-path不存在 - 没有立即创建path目录。
搜索模式显示不会创建该路径目录，因为项目指定的路径目录是之前创建的并且其中的文件正在使用。
在使用过程中，我为新创建的项目单独编写了Login.vue。
我想使用此登录页面来配置协议，并使用 vue-route 进行配置。
我更改了路径目录中的index.js。
如下：
在main.js中引入iter.js。
如下：
下面是我找到的配置登录页面的资料。
另外，我不使用route-links，所以我没有更改App.vue。
我以为配置完成了，直接启动项目，发现页面是空白的。
后来发现App.vue中并没有使用路由视图。
App.vue中添加route-view/path，启动成功即可显示登录页面。
总结：使用vue-route，
1. 在main.js文件
3.App.vue iew中使用iter-v
最终检测到问题。
访问中的favicon时不显示；
访问中的favicon时显示
通过测试发现，似乎是浏览器的问题。
问题2.使用vue-iter时，子项不显示问题
问题描述，我的项目从登录页面开始，登录页面的设计显示为默认; 登录成功后显示 登录成功后显示的默认页面。
经过分析数据，原因是父cast组件没有使用路由视图。
我的复合标头由两个组件组成。
只需在组件头部添加一个route-view，登录成功后即可正常显示默认页面。
在HeadLayout.vue中添加路由视图，解决子路由不显示的问题
总结：使用spindle，需要使用route并在父组件中使用。
问题3.跳转子路径问题
问题描述：本来我用的是MainMenu.vue链接。
我添加了改变点击路径的方法，但是总是失败，第二页的闪烁，然后第一页的显示出来。
写法如下：
第二个子页面的闪烁
第一个子页面的终于显示
这样导致压力来自 href 中的链接。
我刚刚清理了里面的东西。
我需要将属性或值更改为 href="javascript:;",
参考解析：
更改为路径链接到Vue 官方使用的引擎或手动创建项目。
因为问题就是加载时间。
Vue 是一个用于构建用户界面的渐进式框架。
与其他重型框架不同，Vue 采用完全增量的开发策略。
Vue的核心库只关注视图层。
但如果你建立的账号有上百条路由，并且使用 webpack 更新热代码，速度会超级慢，开发者需要担心。
首先我们需要定义一个变量。
登录功能(iview-admin login)
iview-admin 自带登录模块，但有以下修改点。找到登录页面组件@/view/login/login.vue子组件：@/view/components/login-form/login-form.vue流程：在界面上输入用户信息（@/view/components/login- form/log in-form.vue)->调用父组件(@/view/login/login.vue)的handleSubmit方法->调用Vuexactions方法 handleLogin(@/store/user.js)->调用axios方法login(@/api/user.js)->请求后接口数据
