vue-element-admin登录全流程分享

目录
  • 1.安装最新的vue-element-admin
  • 2.如有需要可以去掉eslint
  • 3.删除所有的eslint文件
  • 4.开始安装依赖包
  • 5.启动服务
  • 6.进入登录页面
  • 7.后端编写登录接口
  • 8.如需验证码，对登录页面进行改造
  • 9.（重点）进行登录请求
  • 10.刚刚发送的登录请求就进入下面这个函数里面去

1.安装最新的vue-element-admin

2.如有需要可以去掉eslint

在下面这个文件里面全局搜索

3.删除所有的eslint文件

4.开始安装依赖包

npm install

5.启动服务

npm run dev ,但是打开的是两个窗口，需要把open设置为false;

6.进入登录页面

7.后端编写登录接口

这里以java为列:

验证码根据需求来进行设置;

8.如需验证码，对登录页面进行改造

9.（重点）进行登录请求

出现this.$store，看到这个东西就去store目录下面找东西

根据给的地址前面的一段来找，user，就找user

根据后面的找到对应的函数名

说到这里应该对项目结构应该比较清晰了，如果还觉得绕的话，只能说明你对项目的结构理解还不够彻底;

10.刚刚发送的登录请求就进入下面这个函数里面去

那么现在又看到一个login函数，从哪里来的呢?

可以看到，所有的接口都来自api ,根据花裤衩大佬的模式，直接api目录下面找user就行

就这样没了？ No.No.No…

直接return request({xxxxx}),request是干嘛的？从哪来的呢？

继续根据花裤衩大佬的模式，直接去utils目录下面找request

request是干嘛的？(当然是发送请求的撒)

request是封装好的axios，主要用于发送网络请求。

里面的东西好复杂，看不懂怎么办？

没关系，你只需要知道怎么拿数据就行了

这个请求代码里面主要是看这一段

规定的是后台返回的值里面是需要有一个code码的，花裤衩大佬这里规定的是20000是正常的，你只需要将这里改成你自己定义的正常的就行，比如我的是0 (实际以后端为准)

说了这么多，这里就完了，这个项目里面也没有后台，却能发送网络请求，还能拿到数据，怎么做到的呢？

看代码，发现配置的代理到了mock的地方，继续根据项目的架构走，直奔mock就行咯。

mock里面果然有user，还有login的地址

（重点来咯）关键是现在我们要用我们自己的地址，不能用模拟数据，所以我们要换成我们自己的地址；

开始修改配置参数:

直接给代理地址改成你后台的地址，我后台的contentpath是sys就直接改成sys即可

在我实际使用的时候发现session会丢失，也就是登录不进去，查找资料发现是因为不在一个域的原因，怎么解决呢？

这里需要改成一样的

直接给里面的改成sys就ok了

由于修改了配置，需要重新启动服务器:npm run dev

可以看到我的验证码没出来，下面也报错了，这是什么原因呢?

可以看到我框出来的地方，有个啥东西没定义

这个是我不想用原来的api，我觉得太麻烦，就直接将request放到全局了

现在我们把request注册到全局

把request挂载到vue实例上去，这样就可以注册到全局了;

验证码还是没有出来，还报错了

这个时候就需要自己调试了

打断点发现我这怎么直接走到error了，肯定是有地方和项目的配置不一样

code也是undefined

和我的逻辑不一样就让其和我一样的

让别人的东西成为自己的

直接骚一波 (哈哈、牛皮!)

ok，验证码出来了，证明后台通了

完了，404(卡了我一天，头发又少了) ，怎么办?

好好想想404是什么？没有找到接口啊

一看，我的登录接口是sys/login (后端接口地址)

前端的接口地址还是user/login；需要我们直接改;

现在不是404了，但是还是error

控制台也没报错，这是咋回事？

一看是我后台的问题。。。

去后台看看什么问题：

打个debug看看发现前端没有把参数带过来;

现在我们好好想想，我们参数确定是传过来了的，怎么会没有呢？

仔细一看，这是要问号跟参，不能给参数放到body里面

ok,改

直接改成这样就可以了!

登录成功！

等等，怎么发现没有跳转啊，咋回事，一脸懵逼!(一个个门槛搞得好心慌)

咱们一步步的回推，看看vuex里面调用了登录函数之后发生了啥，直接打断点调试

进来了，发现原来的框架需要有个data，我这里没有哇，怎么办呢？

走到原框架取登录数据的地方，看到data里面丢了一个

咱们没有这个数据怎么办？

直接手动给

又404了，发现有个info的接口，这个接口哪来的？

继续看，发现是user/info

老规矩直接找

不知道在哪调用的就全局搜索

这里找到了两个地方有这个路径，一个是api，一个是mock,mock直接忽略掉，api里面getInfo函数，直接全局找在哪调用的

发现还是在store目录下的user里面引用的

突然想来了，我没有这个接口怎么办？这一块业务对我来说貌似没什么卵用

那还不好说，直接干掉不就完了

但是看看他调用成功还要执行一堆操作，我又看不懂，删掉出了问题怎么办？

这个时候想起来了，我登录不是也是写死的数据，我这里为什么不行？直接不调用接口，将数据直接写死

屏蔽调用，data写死

登录成功，大功告成!

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • vue-element-admin如何设置默认语言

    vue-element-admin如何设置默认语言

    目录 vue-element-admin设置语言 vue-element-admin使用常见问题 vue-element-admin添加快捷导航 去掉Mock使用真实数据. vue-element-admin设置语言 今天下了一个vue-element-admin框架来玩玩儿,下完之后发现默认语言是英文的,那可不行. 后来发现自己下错了,其实这个应该是这样的,如果要中文版,你要下载 i18n 分支的才行,地址是这个 i18n 分支 . 下载完之后然后还需要改一个地方,\src\lang\inde

  • vue-element-admin搭建后台管理系统的实现步骤

    近期在搞一个会议健康申报系统时,要搞一个后台,用到了vue-element-admin模板,使用的是PanJianChen(源码地址:https://github.com/PanJiaChen/vue-admin-template) 第一步:当前是下载源码了,下载地址:https://github.com/PanJiaChen/vue-admin-template 第二步:修改登录页面,登录接口(/store/modules/admin.js/login()),根据实际情况修改用户信息接口(/s

  • vue-element-admin 全局loading加载等待

    vue-element-admin 全局loading加载等待

    最近遇到需求: 全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 百度了一下,发现好多是写在拦截器内的,在拦截器内调用element ui的loading方法,在接口请求的时候开始启动加载loading,在接口返回和接口报错抛异常的时候关闭loading 在这个思路上改动了一下,因为和我的需求有一点不同,我们的需求是可以手动控制是否展示加载等待的功能,既然是手动控制那么肯定不能直接在拦截器里面才开始调用loading方法了,往前推一步,在调接口的时候就开始控制是否启用loa

  • vue-element-admin如何转换成中文

    vue-element-admin如何转换成中文

    目录 vue-element-admin转换成中文 vue-element-admin中文问题 vue-element-admin转换成中文 从admin官网上git下来的默认是英文,是修改不了语言的. 如果需要转换成中文,在vscode终端里git checkout i18n,然后npm install,npm run dev之后就是中文的了 如图: vue-element-admin中文问题 今天刚看到vue-element-admin项目,下载下来后发现是英文的 要切换成中文,需要下载它的

  • Vue-Element-Admin集成自己的接口实现登录跳转

    Vue-Element-Admin集成自己的接口实现登录跳转

    1.先看一下请求配置文件,看axios.create这个方法,baseURL是基础路由 baseURL:process.env.VUE_APP_BASE_API, 路径:src-utils-request.js 2.然后再看service.interceptors.request.use,设置token请求头,我后端集成的是jwt,所以请求头是Authentication,如图 config.headers['Authentication'] = getToken() 3.设置自己的状态码,看s

  • vue-element-admin登录全流程分享

    vue-element-admin登录全流程分享

    目录 1.安装最新的vue-element-admin 2.如有需要可以去掉eslint 3.删除所有的eslint文件 4.开始安装依赖包 5.启动服务 6.进入登录页面 7.后端编写登录接口 8.如需验证码,对登录页面进行改造 9.(重点)进行登录请求 10.刚刚发送的登录请求就进入下面这个函数里面去 1.安装最新的vue-element-admin 2.如有需要可以去掉eslint 在下面这个文件里面全局搜索 3.删除所有的eslint文件 4.开始安装依赖包 npm install 5.

  • vue element后台鉴权流程分析

    前言: 最近项目遇到一个管理系统,感觉权限配置挺有意思,记录一下流程实现的过程,便于自己学习以及整理思路,部分思路整合在代码的注释中: 路由拦截鉴权常用的两种方法 1:路由拦截:单纯给路由加字段标识符,通过路由拦截实现 2:动态路由:第二种是通过路由的拆分另外需要后端的配合去实现的动态路由配置 比较: 路由拦截实现方式比较简单,只需要简单的在router.beforeEach中根据路由配置信息过滤页面是否有权限前往改组件,若相对于的权限不够则不前往相应的组件 动态路由实现相对比较复杂,并且需要后

  • vue+Element实现登录随机验证码

    本文实例为大家分享了vue+Element实现登录随机验证码的具体代码,供大家参考,具体内容如下 验证码验证只是前端,无需后台交互 首先,创建一个identify.vue页面,用于写各种:随机数字/字母,随机颜色,干扰点/线 identify.vue <template>  <div class="s-canvas">   <canvas id="s-canvas" :width="contentWidth" :he

  • 关于vue设置环境变量全流程

    关于vue设置环境变量全流程

    目录 vue设置环境变量 创建不同环境变量文件 给.env文件添加内容 在package.json中添加不同环境对应的执行语句 使用 多环境变量 什么是多环境变量? 配置流程 vue设置环境变量 在开发的时候一般会有是三个环境:开发环境 测试环境 线上环境 vue 中有个概念就是模式,默认先vue cli 有三个模式 development模式用于 vue-cli-service serve production模式用于 vue-cli-service build 和 vue-cli-servi

  • 如何利用vue+element ui实现好看的登录界面

    如何利用vue+element ui实现好看的登录界面

    目录 界面效果图 下面直接上代码: 附加背景图片 总结 闲暇之余使用vue+element ui制作了个登录界面 话不多说,先上 界面效果图 下面直接上代码: <template> <div class="loginbody"> <div class="logindata"> <div class="logintext"> <h2>Welcome</h2> </div&

  • vue element和nuxt的使用技巧分享

    1.element的时间选择提交的格式转化 例如 Fri Sep 07 2018 00:00:00 GMT+0800 (中国标准时间) 转化为 2020-01-11的格式 这记载datepicker中添加一句value-format="yyyy-MM-dd" <el-date-picker type="date" v-model="createdate" @change="formatTime" value-format

  • Vue Element前端应用开发之整合ABP框架的前端登录

    Vue Element前端应用开发之整合ABP框架的前端登录

    概述 ABP框架作为后端,是一个非常不错的技术方向,但是前端再使用Asp.NET 进行开发的话,虽然会快捷一点,不过可能显得有点累赘了,因此BS的前端选项采用Vue+Element来做管理(后续可能会视情况加入Vue+AntDesign),CS前端我已经完成了使用Winform+ABP的模式了.本篇随笔主要介绍Vue+Element+ABP的整合方式,先从登录开始介绍. 1.ABP开发框架的回顾 ABP是ASP.NET Boilerplate的简称,ABP是一个开源且文档友好的应用程序框架.AB

  • vue+node+socket io实现多人互动并发布上线全流程

    vue+node+socket io实现多人互动并发布上线全流程

    一.背景 1. 前端使用vue + vuex + socket.io-client npm install socket.io-client --save-dev 2. 后端使用node + express + socketio 1.搭建node开发环境 npm init -y 安装所需依赖 npm install express --save-dev npm install socket.io-client --save-dev 二. socket.io相关用法概览 1. 发送事件 socke

  • vue element实现将表格单行数据导出为excel格式流程详解

    由于业务内容的需要,我们有时候需要将表格中的单行数据做导出,生成一个excel表格,以下操作主要实现将element中的table数据生成一个excel表格并做下载操作. 效果图如下: 点击单行导出按钮,导出数据为excel表格 如下图: 具体操作步骤如下: 1.下载按照依赖 npm install -D script-loader 2.在src文件夹的目录下方创建两个js文件 (1):Blob.js (2):Export2Excel.js 如下图: (Blob.js) (function (v

  • Vue之文件加载执行全流程

    目录 Vue项目结构 主要配置文件 Vue项目启动代码执行流程分析 Vue加载时文件的执行顺序 Vue内部页面的执行顺序 总结 Vue项目结构 使用webpack构建的Vue项目的结构如下所示: 主要配置文件 1.package.json package.json是一个json文件,这是vue项目的表述文件. package.json定义了项目所需要的各种模块,以及项目的配置信息(名称.版本.许可证等),npm install命令也是根据这个配置文件自动下载项目所需的模块. { "name&qu

随机推荐