HAPPYMMALL项目总结

本文总结了HAPPYMMALL项目的前端开发过程,包括配置相关文件、API封装、登录页面实现、路由守卫、侧边栏及首页建设、商品管理、品类管理、订单管理和用户列表等功能。涉及Vue.js、axios和Element UI等技术。
摘要由CSDN通过智能技术生成

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.首页
点击侧边栏的首页,跳转到首页页面,头部欢迎用户以及鼠标滑到区域显示退出登录这些都可以写成组件,因为每个页面都

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值