Vue-element-UI中实现自己接口的登录步骤

最新推荐文章于 2024-06-18 23:00:46 发布
最新推荐文章于 2024-06-18 23:00:46 发布
阅读量529 收藏 1
点赞数 1
分类专栏： vue 文章标签： vue.js ui javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44211097/article/details/121020789
版权
本文介绍了在Vue-element-UI框架中如何实现自定义接口的登录步骤，涉及`src/views/login/index.vue`中登录表单的数据处理，`store/modules/user.js`的用户状态管理，`api/user.js`接口调用，以及`utils/request.js`的请求逻辑。此外，还讲解了如何在`Layout/components/Navbar.vue`和`store/modules/user.js`中完成头像修改的功能。
摘要由CSDN通过智能技术生成

1、src-->views-->login-->index.vue

这里面会有一个loginForm数据存储密码和账号，method里面有一个用于处理登录逻辑的方法handleLogin()：

2.去store-->modules-->user.js

3.api-->user.js文件

4.utils-->request.js

最低0.47元/天 解锁文章
辉娜
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue中实现登录控制
土家稀哥
03-02 7028
vue中使用vue-router实现登录的控制在做后台管理系统中很常见，但是不想之前熟悉的流程那样，不过只要大家理解vue-router的使用也是很好实现的。首先我们需要编写登录页面和主页面：<template> <div class="login"> <table width="100%" height="100%"> <tr
vue前端登录接口对接
weixin_43312391的博客
05-18 1915
实现目标：实现登录接口的对接，并将接口返回的token存至本地localStorage中。 接口信息： api的js文件中： import axios from 'axios'; export function loginD(params) { return axios.get(`${g_config.base__URL}/xxxx/${params.username}/${params.password}`); } 其中，g_config.base__URL已在global.co
vue实现登陆功能
最新发布
2401_85124905的博客
06-18 179
input type=“text” v-model=“test1” placeholder=“请输入账号” maxlength=“11” onkeyup="value=value.replace(/[^0-9.]/g,‘’) " ref=“input1” @blur=“changeName(test1)”>
（四）Vue项目——轻社区：实现用户登录功能
m0_71824048的博客
06-24 787
Vue项目“轻社区”，实现用户登录注册+用户中心+邮件激活+分类管理+点赞+回复操作等功能。打造微一站式互动轻社区。
vue+element-ui 登录流程分析
qq_51441779的博客
08-16 325
登录 页面结构的搭建，样式的美化 把这些都建立好以后，我们就可以写功能了
基于vue+element-ui设计的优美后台登录页及接口调用方式介绍
歪歪坨的博客
08-20 1793
基于vue+element-ui设计的优美后台登录页，以及接口调用方式介绍~
vue-element-ui学习之登录
qq_40307753的博客
04-23 347
1.登录页面 this.$store访问store选项，dispatch派发一个异步动作，参数为action的路径（压缩之后）和数据data 2./src/store/modules/user.js：action 将登录的用户信息存储起来，然后发送一个请求以获得token 3./src/api/user.js：function 4.utils–>setToken到cookies ...
vue-element-admin 集成框架设置中文语言
11-10
在"vue-element-admin 集成框架设置中文语言"这个主题中，我们主要讨论如何在vue-element-admin项目中实现中文语言的集成。Element UI本身提供了多语言支持，包括中文，因此在vue-element-admin中设置中文语言并不...
Vue-Element UI集成ECharts实现数据统计分析页代码部分(如果帮助到你，感谢关注点赞)
04-29
以上就是使用Vue.js、Element UI和ECharts实现数据统计分析页面的基础步骤。你可以根据实际需求扩展这个示例，添加更多的图表类型、交互功能或者数据动态更新。记得在实际项目中导入所需的数据，并将其应用到ECharts...
vue-element-admin v4.4 指南.pdf
02-28
《vue-element-admin v4.4 指南》是一份详细的文档，主要针对基于Vue.js和Element-UI的后台前端解决方案vue-element-admin的v4.4版本进行深入讲解。这个项目旨在提供一个集成化的后台管理界面，包含了众多实用功能，...
vue-admin-element+Electron打包exe可执行文件(输出为dist文件夹即可)
04-24
在标题和描述中提到的“vue-admin-element+Electron打包exe可执行文件”，意味着开发者正在尝试将基于Vue.js和Element UI的管理后台应用与Electron结合，打包成Windows平台的.exe可执行文件。这个过程通常是为了将...
Vue+ElementUI搭建登陆页面
qq_64230952的博客
05-05 9879
1.使用vue-cli脚手架工具创建一个vue项目 2.安装elementUI插件依赖 注意 ：i 指的是 install 的缩写 npm install 下载全部依赖 npm install xxx -g 全局安装，下载到%NODE_HOME%\node_global npm install xxx -S 下载指定依赖,写入到package.json中的dependencies，当前项目 npm install xxx -D 下载指定依赖,写入到package.json中的...
vue+ElementUI+后台接口实现登录页面
Alisa的博客
07-29 1万+
1.工具：vscode、eclipse、chrome 2.过程 （1）在src/pages下新建文件夹，在该文件夹中新建index.vue，代码如下： <template> <div class="login-container"> <el-form :model="ruleForm2" :rules="rules2" sta...
vue项目后台给登录页面如何接入？一个接口+Vue-Router+Vuex简简单单实现登录
ProgramarQin的博客
08-29 1万+
有时候急着学更多新知识会把最基础的遗忘，以前使用PHP那会还知道表单序列化，最近通过form获取里面所有name属性对应的控件值却把document.getElementById('表单Id').serializeArray()给遗忘了，通过遍历name属性去获取表单控件值-----勿忘初心 需求：之前项目大都是后台进行最后的登录接入，现在用了vue需要前端自己通过实现登录页面，以博客登录为例，...
Vue实现登录功能全套详解（含封装axios）
热门推荐
陈新科的博客
08-24 2万+
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
Vue-Element-Admin的项目集成自己的接口，登录跳转
小星博博的博客
06-20 1万+
1、
Vue项目登录页面接口搭建并跳转主页
weixin_43288858的博客
05-18 3873
22222
vue-element-admin配置到自己登陆接口（接上一篇）
song766426的博客
09-01 3111
当端口和API都设置好之后可能会遇到如下问题： 这个问题是因为设置的全局守卫中response.code的原因，如果自己的项目里没有这一条可以加如下代码： 添加完之后，便可以成功访问到首页。 当我再次重启项目之后便有了新的错误： 小tip 报错的时候遇到有地址的，你可以在项目中搜索一下。例如下面的user/info 这个报错，根据从网上找到的解决方案，出错的原因是vue-element-admin 默认写的是登录成功一个接口，还需要获取登录的用户身份信息...
vue-element-ui前后端交互实现分页查询
02-26
在使用vue-element-ui进行前后端交互实现分页查询时，需要先在前端页面上定义分页器和表格组件，然后在后端API接口中获取分页信息和查询结果...通过以上步骤，就可以在vue-element-ui中实现前后端交互的分页查询功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值