1.配置相关文件:
在config文件夹下面配置index.js文件,在这里面配置跨域,公共接口,以及代理地址
2.封装api
建好文件夹和文件后,先下载axios,在文件中引入axios并创建axios实例对象,再配置请求拦截和响应拦截,然后声明变量并接收返回的一个异步请求,如果成功就用resolve返回,失败用reject返回
3.封装请求
配置完公共接口和api之后,封装请求,声明一个变量并通过箭头函数来设置传参的内容,有三个参数,url接口地址,methods是请求方法,params是get请求的传参方式,data是post的请求方式
4.登录页面
在登录页面引入封装好的请求,看文档需要传哪些参数,请求成功之后根据返回数据内容来进行下一步操作,需要注意的是,没有登录的话不能进入其他页面,就要用全局路由守卫来守卫登录页面,但是用了之后会发现页面就没有了,是因为他把登录的页面也给守卫了,需要设置next才能放行,进入其他页面的时候进行判断,如果有存入的token,就跳转,不然就回到登录页面
5.一级路由(侧边栏)
登录成功之后进入一级路由页面,左边是侧边栏,右边是显示二级页面,侧边栏aside标签,里面点击下拉的样式可以用elment来完成,点击标签右边二级页面显示对应内容可以通过<router-link>标签来实现路由跳转,前提是要配置好相关路由
6.首页
点击侧边栏的首页,跳转到首页页面,头部欢迎用户以及鼠标滑到区域显示退出登录这些都可以写成组件,因为每个页面都
HAPPYMMALL项目总结
最新推荐文章于 2024-09-09 09:35:48 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)