Javascript 如何使用axios使用Vue.js创建用户登录页面

Javascript 如何使用axios使用Vue.js创建用户登录页面,javascript,ajax,vue.js,httprequest,axios,Javascript,Ajax,Vue.js,Httprequest,Axios,我是vue.js前端实习生,我的首席开发人员正在测试我克隆公司web应用程序登录页面的技能。我有一个使用appusername和密码的帐户,但我完全不知道如何操作,我知道的唯一信息是使用axios向服务器发出post请求以获得身份验证,这样我就可以从服务器检索数据并在登录后构建页面 抱歉,如果这听起来让人困惑,我一直在四处搜索,但什么也没找到,基本上是因为我不知道要搜索什么,我对HTTP请求和ajax之类的东西非常不熟悉。如果幸运的话,你能理解我的意思,请帮助我,非常感谢 一些有用的文章也有帮助

我是vue.js前端实习生,我的首席开发人员正在测试我克隆公司web应用程序登录页面的技能。我有一个使用appusername和密码的帐户,但我完全不知道如何操作,我知道的唯一信息是使用axios向服务器发出post请求以获得身份验证,这样我就可以从服务器检索数据并在登录后构建页面

抱歉,如果这听起来让人困惑,我一直在四处搜索,但什么也没找到,基本上是因为我不知道要搜索什么,我对HTTP请求和ajax之类的东西非常不熟悉。如果幸运的话,你能理解我的意思,请帮助我,非常感谢


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

我不知道Vue是如何工作的,但我会尝试解释一下一般概念

大多数单页JavaScript web应用程序框架使用所谓的状态来存储应用程序的状态,如用户是否登录等。其工作原理如下:

您将拥有一个包含表单的登录页面 在表单提交时,您将向认证服务器发送一个ajax请求,在本例中是您公司的认证服务器 根据响应,您将设置正确的设置,即loggedIn:true或类似的设置。现在,基于此状态,您可以重定向到其他页面,也可以在同一页面上显示错误消息。 在新页面上,您将从服务器中提取数据并显示它。 现在,您可以用几种方法来处理ajax。由于您是ajax新手,我建议您了解基本概念。谷歌搜索可以帮上忙,或者。您将看到它是由XMLHttpRequest完成的

axios和其他几个http req库让您编写的代码更少,看起来也更干净,从而使生活更加轻松。但在内部,它们都使用相同的东西,即XMLHttpRequest。看一看。向下滚动到示例部分,您将看到如何发出Post请求

提示: 在新项目中试用axiosin。尝试将post请求发送到您公司的授权地址,您的实习生领导应该已经通知您,并将其发送到console。记录响应以查看其外观。确保使用正确的钥匙

另外,使用vue和axios在谷歌上搜索登录页面也让我受益匪浅。你们以后可能会发现这篇文章很有帮助

希望这有帮助


PS:你应该先用谷歌搜索。正如他在评论中提到的,在这个网站上征求建议是不可取的。

如果你在这个问题标题中搜索关键词,可以找到很多材料。根据StackOverflow:要求我们推荐或查找书籍、工具、软件库、教程或其他非网站资源的问题是离题的。@aBiscuit,谷歌在评论中有点像跳跳虎。总是正确的,但大多没有信息。如果对你来说是一款简单的谷歌,请考虑将一些有价值的内容链接为评论中的链接。这不是一个简单的谷歌,它可能不是一个简单的兔子洞初学者或任何其他人谁在这个网页上登陆谷歌在未来。这就是说,这个问题实在太宽泛了,无法用一个单一的资源或参考来回答,因此,应该在OP@KyleMit谢谢,我理解你的观点并同意。在这种情况下,将谷歌关键词添加到评论中似乎是合理的建议,因为搜索vue.js登录axios会返回一个全面的文章列表,这可能比这里给出的任何答案都要好。虽然标记文章太宽对操作没有帮助,但我试过了。感谢您的评论。我发现Christian Nwamba@codebeast的这篇文章是在Vue中实现身份验证的一个很好的入门模板。