如何使用axios使用Vue.js制作用户登录页面

Question

我是vue.js前端实习生，我的主要开发人员正在测试我的技能，以克隆公司Web应用程序的登录页面。我有一个使用该应用程序的帐户（用户名和密码），但是我完全不知道该怎么做，我知道的唯一信息是使用axios向服务器发出发布请求以进行身份​​验证，以便我可以从中检索数据服务器并在登录后构建页面。

对不起，如果听起来令人困惑，我一直在搜索并没有发现任何东西，基本上是因为我不知道要搜索什么，我真的对HTTP请求和Ajax东西不好。如果足够幸运，您可以理解我的意思，请非常感谢您。

一些有用的文章也可以提供帮助，我完全可以自己解决这个问题，只是我不知道从哪里开始

Answer 1

我不知道Vue的工作原理，但我将尝试解释一般概念。

大多数单页JavaScript Web应用程序框架都使用state来存储应用程序的状态（例如用户是否登录等）。运作方式如下：

• 您将拥有一个包含表单的登录页面
• 在提交表单时，您将ajax请求发送到身份验证服务器（在这种情况下，是您公司的请求）
• 根据响应，您将设置适当的设置（即，loginIn：true或类似名称）。现在，基于此状态，您将重定向到其他页面或在同一页面上显示错误消息。
• 在新页面上，您将从服务器中提取数据并显示它。

现在，您可以通过几种方式来执行Ajax任务。由于您是ajax的新手，因此建议您了解基本概念。谷歌搜索可以助您一臂之力，或者this。您将看到它是由XMLHttpRequest完成的。

axios（和其他几个http req库）使您可以编写更少的代码，看起来也更加干净，从而使工作变得更加轻松。但是在内部，AFIAK都使用相同的东西，即XMLHttpRequest。看看this。向下滚动到“示例”部分，您将看到如何发出“发布”请求。

提示： 在新项目中尝试axios。尝试将发帖请求发送到您公司的身份验证地址（实习领导应已通知您）并console.log()进行回复，以查看其外观。确保使用正确的键。

另外，一个简单的Google搜索“带有vue和axios的登录页面”就带给我this。另外，以后您可能会发现this帖子很有帮助。

希望这会有所帮助！

PS：您应该先谷歌搜索。正如aBiscuit在他的评论中提到的，建议不要在此网站上寻求建议。