后端表单验证回调方法 | vuex 商店 | Vue.js

Posted 2023-03-16

【中文标题】后端表单验证回调方法 | vuex 商店 | Vue.js

【英文标题】：Backend form validation callback approach | vuex store | vuejs

【发布时间】：2018-11-20 14:05:12

【问题描述】：

我的问题是关于使用 Vuex 商店向用户处理“数据库验证错误”。 （见下图） 关于如何处理这个问题的任何建议？

然后按字段显示我指定和“定位”的错误。 像这样的：

<label>Title</label>
<input type="text">
<p v-if="errors.title">errors.title</p>

我的第一个想法是将'vuex store action'接收到的'db errors'也传递给'store state attribute'，并在vuejs组件中使用带有“store getter”的计算属性来显示错误，但这对我来说感觉不对。

【问题讨论】：

这是个好问题。将错误存储在存储中时，您看到了哪些缺点？只是觉得“脏”？

如果它位于专用于管理错误的 Vuex 模块中怎么办？它可以充当一个错误包，显示错误消息的组件将在其中查看某个字段是否存在错误。

嗯，这很好，如果我的意图，但我害怕过于复杂的东西，但是是的，我可以在 vuex 商店中创建一个“错误属性”和一个“成功属性”，并填写这些基于“数据库模型响应”的属性，然后可以在我的 vuejs 组件中使用一个“计算属性”和一些逻辑来显示错误或成功消息（我再次希望我在这里不要过于复杂：P）

【参考方案1】：

我使用这个 json 模型从服务器获取数据：status: 0, result: , error: 。 在这种情况下，您可以检查 status 属性，以了解其余 api 调用是否成功。因此取决于status，您可以处理error 或result 变量。

在服务器端，如果捕获到任何错误/异常，您可以在错误变量中（具体而言）将其发送回客户端。

在您的情况下，例如：您在服务器端捕获了一个 db 错误，您为该错误定义了状态（例如）430，您将带有错误和状态代码的消息发回，即你可以很好地处理这个问题。

希望对你有帮助！ :)

【讨论】：

太好了，会继续跟进，非常感谢！

不客气！如果它的工作acpet the answer，或者对问题提供一些反馈。 ;)

我会 :)，不过想再问一个问题，您对这种方法的总体看法如何？ ，我还阅读了一些关于使用 SESSIONS 处理来自后端的错误的内容，（因为它更灵活的猜测？），想知道一些意见

其实一切都取决于目标。我的上一份工作是一个简单的网页。普通用户并不关心规范错误。我总是通知用户“错误 432：数据库错误”或“错误 480：加载错误，请刷新页面”。但是，我在控制台上做了一个规范日志，所以在支持期间，我可以要求用户检查规范错误的控制台，但错误代码也是如此。另一方面，如果服务器端出现错误，则应将其写入日志。

我认为将这些信息存储在会话中会更清晰。会话用于当前用户数据。但永远不要忘记您不能在客户端存储敏感数据。其余的 api 令牌也为您提供身份验证和授权。因此，使用 api 令牌您可以确定用户和用户权限。 :) 例如管理员可以看到规范错误，但普通用户看不到..等等