IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> vue-element-admin 的使用记录(一) -> 正文阅读

[JavaScript知识库]vue-element-admin 的使用记录(一)


登录模块


项目场景:

基于vue-element-admin 修改一个blog管理后台。
vue-element-admin 拉取代码后能够正常的运行,现在需要修改登录为自己的API接口

解决方案:

  1. 首先根据官方文档,关闭调mock模拟数据
    在这里插入图片描述

  2. 修改.env.development的api地址
    在这里插入图片描述

  3. 在浏览器中调试可以看出,api请求基础url已经修改,但是具体请求接口仍然没有变
    在这里插入图片描述

  4. 全局搜索找/user/login,结果如下
    在这里插入图片描述

  5. mock模块数据忽略,直接修改api的地址为我们本地地址即可
    在这里插入图片描述

  6. 改为本地系统中的用户名,报错如下,直接进行全局搜索

    在这里插入图片描述

  7. 发现系统默认对登录的用户名有校验,只能允许admin’, 'editor’进行登录,直接取消校验,直接调用callback()
    在这里插入图片描述

  8. 登录成功,返回也成功了,但是没有进行跳转,前端没有报错,我们只能从代码入手,通过request方法进入request.js方法中发现,作者自定义了一套返回响应码的机制,修改为我们自己api对应的响应码就ok了。
    在这里插入图片描述

  9. 再次进行登录,/vue-element-admin/user/info直接404了,看了一下我们的api是没有这个接口的,直接先干掉
    在这里插入图片描述

  10. 仍然报错,在看了一下,尴尬了还不能直接干掉,返回了一堆乱七八糟的数据,突然想到取mock中看看返回的数据长啥子样子 ,根据请求的url在mock中找到了相应的数据,把admin的返回数据copy到getinfo()中,等我们稍后再回过头来处理
    在这里插入图片描述

  11. 登录成功,可以看见内容了,但是404又出来了,/vue-element-admin/transaction/list的url获取失败,继续上一次方法,去mock中看看返回的数据格式。原来就是一个列表数据对象,我们的工程不需要这个模块,直接干掉。注释掉index.vue中TransactionTable的相关内容就好了。
    在这里插入图片描述

  12. 到此为止,我们的不报错的登录就OK了.

  • 取消掉项目中eslint的代码检查,删除掉package.json中的这2个部分,和package.json所有包含eslint的条目即可
    在这里插入图片描述
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2021-08-24 15:27:49  更:2021-08-24 15:28:37 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年12日历 -2024/12/27 4:37:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码
数据统计