vue-element-admin 新手学习笔记 - (1)

小白的一点点小小经验,大神手下留情,如有不好的地方,或者不对的地方请大家多多指教
因为本人是用 vue-element-admin 来做的,所以就用vue-element-admin 来说,但是推荐使用 vue-admin-template

1:项目初始化

vue-element-admin
vue-element-template
vue-element-admin 文档
先从给git上下载下来vue-element-admin,然后 npm install , npm run dev 这样项目就运行起来了。

2:项目配置

  1. 如果该项目上的页面都是不需要用到的,则可在src/views下面删除该页面,只剩余dashboard、error-page、login、redirect。
  2. 在src/router/index.js中删除路由配置,保留上述1中所说的剩余页面的路由配置在这里插入图片描述
  3. 在src/settings.js中设置
    title : 设置项目的标题,在这里插入图片描述
    在这里插入图片描述 showSettings: 设置控制面板是否显示
    在这里插入图片描述
    fixedHeader: 头部是否固定,在这里插入图片描述
    sidebarLogo: 左侧菜单栏顶部的图标是否显示在这里插入图片描述
  4. 由于该项目中的所有请求用的是mock.js,所以如果要连接后台调试,在vue.config.js中先把mock注释掉,然后配置接口域名,在找到devServer中配置,在这里插入图片描述 在这里插入图片描述
    端口号配置在这里插入图片描述
  5. 完成上述配置之后开始运行项目,这是点击登录会调不到接口是由于vue.config.js中把
    mock去掉了,这时先看一下登录接口代码,src/views/login/index.vue,从handleLogin中可以看出来在点击登录后通过校验会进入stroe中modules下面的user中的actions中login方法里,在这里插入图片描述
    在login中可以看到通过调用login接口(登录接口在src/api/login),把获取到的token存储起来,setToken函数是把token存储到cookie中的一个方法,在src/utils/auth.js中可以看到在这里插入图片描述
    在登录获取到token后跳转路由前会去做一些验证,
    参考-https://blog.csdn.net/weixin_43564110/article/details/105117991

3:axios讲解

  • 该项目中在utils下面的request.js中自定义了一个axios, axios.create创建一个新的axios,timeout:这是请求超时的时间,withCredentials 是跨域请求时可以携带cookie,在这里插入图片描述
    请求拦截器,可通过config.headers设置请求头, 当然这个是看各自项目的需求,由于本人的项目中需要修改请求头中的content-Type在这里插入图片描述
    在修改完content-Type后传参给后台是字符串,但是需要的是key=value形式的,所以这时可以就用到了qs, 在改项目中安装qs, 然后在请求拦截器中设置,在这里插入图片描述
    响应拦截器,按照各自项目的要求修改状态码在这里插入图片描述
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值