前端项目：电商管理系统笔记（一）

最新推荐文章于 2024-03-12 12:49:03 发布

VIP文章今天写代码了没？

最新推荐文章于 2024-03-12 12:49:03 发布

阅读量701

点赞数 2

分类专栏：电商管理系统文章标签：前端 vue.js javascript elementui

本文链接：https://blog.csdn.net/zPinky95/article/details/123124246

版权

看的是b站视频 Vue实战项目：https://www.bilibili.com/video/BV1E7411c7M8?p=22

下面是看P21-24写的笔记，主要包括axios的用法，我个人对es6和异步函数真的非常不熟悉，所以认真写了很多笔记。

axios

import axios from 'axios'
//配置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$http = axios

这里的validate是elementui里定义的表单方法

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VmAYsaWh-1645721883680)(C:\Users\11316\AppData\Roaming\Typora\typora-user-images\image-20220224221857626.png)]

this.$refs.loginFormRef.validate( valid =>{})

这里的valid就是boolean，第二个object没有写，然后箭头函数嘛，参数以及=>箭头函数，后面是函数体，慢慢应该就能看习惯了。

this.$http.post(“login”,this.loginForm)

在api接口文档中有写
在这里插入图片描述
那么post是请求方法，然后login是请求路径，loginForm在data中定义过，是一个包括username和password的对象，就直接用this.loginForm来作为参数。

const res = this.$http.post(“login”,this.loginForm);
console.log(res)

先打印一下res看会得到什么，发现浏览器会返回一个 Promise结果。
因为这是一个异步，所以用 async+await 来展现。
await只能用在async修饰的的方法中，所以就应该把valid前面加一个async

this. $KaTeX parse error: Expected '}', got 'EOF' at end of input: \dots=await== this.$ http.post(“login”,this.loginForm);
console.log(res)

此时打印res之后就会得到具体的axios封装好的响应对象

在这里插入图片描述
然后解构一下

const {data:res} = await this.$http.post(“login”,this.loginForm);
console.log(res)

此时打印出来的就是只有data，没有其他我们不需要的数据了

这里都是看开发者工具里面的
提示弹框登陆成功，登陆失败是怎么做的呢（我这里全局导入了elementui所以其实是可以不用再main.js

关注