用户登录

把客户端上生产出来的数据发送给服务端处理,一般服务端会设计一个支持使用 HTTP 的 POST 方法请求的接口。下面我们可以在这个 vue 应用里试一下,使用 axios 发送 post 类型的 http 请求。

比如在我们服务端应用提供一个用户登录接口,支持使用 post 类型的 http 请求。 用一组 try ,catch ,先处理一下发出错误的时候要做的事情,可以设置一下组件里的 errorMessage,让它等于 error 参数里的 message。

然后在 try 这个区块里,添加一个 response,await ,用一下 apiHttpClient,这个东西是之前我们创建的一个 axios 实例。用一下它上面的 post 方法,这样它发送请求的时候就会使用 post 这种 http 方法。

第一个参数是请求的地址,用户登录接口的地址是 /login, 第二个参数可以是在请求里包含的数据,比如用一下组件里的 user 这个数据。

在组件的 data 里,先手工设置一下 user 这个数据, 它是一个对象,里面有 name 属性,对应的值是一个用户名,还有一个 password,对应的值是用户的密码。

请求得到了响应之后,可以在这个响应输出到控制台上检查一下。

再回到浏览器观察一下浏览器的控制台,这里输出的就是使用 post 这种 http 方法,请求服务端的用户登录接口的时候得到的响应数据。

这个数据里的 token 是服务端给用户签发的令牌。

在组件里可以添加一个 token 数据,默认的值是一个空白。 请求登录成功以后,可以设置一下这个 token 的值,让它等于 response.data 里的 token。

发送 POST 类型的 HTTP 请求《 Vue.js 前端应用 #9:请求接口 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点