使用axios 请求库结合iview组件做登录页面

于 2022-09-06 14:41:12 发布
阅读量379 收藏
点赞数
文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sl105105/article/details/126724922
版权
      Axios，是一个基于 promise   的网络请求库，作用于 node.js 和 浏览器 中，它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在 服务端 它使用原生node.js  http 模块, 而在客户端 (浏览端) 则使用XMLHttpRequest。
axios地
址如下
iview地址如下:
     我们需要在iview中去复制他的样式代码,但是由于他是个人团队维护,所以会出现小部分不能实现的问题,
    我们只需在homeView黏贴我们复制过来的代码.可以使用接口来实现页面
接下来我们俩学习 axios 请求库
下载axios
全局使用 axios
Axios 的 get post
 
 
 
Axios 全面配置的方式
 
全面配置 axios Post 传参的使用 data:
 
Get 请求需要使用 params 传递
 
请求拦截器：
axios . interceptors 拦截器设置属性
axios . interceptors. request 请求拦截器设置对象
axios . interceptors . response 响应拦截设置对象
请求拦截,响应拦截的设置必须基于 .use 函数完成回调方法注册
下述代码为自定义响应式拦截器处理方法
NProgress是一种插件
网址如下: progressbar.js - npm
 
状态码
sl105105
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
iview 常用登陆页面
liuhao9999的博客
04-28 5111
<template> <div class="login" :style="{ height: height }"> <div class="card" :padding="30"> <img style="width:auto;height:70px;display:block;margin:0 auto" src="./logo1.png" alt="logo"> &.
iview-admin登录完整代码附后台代码
12-12
根据iview-admin最新版本，纯手撸的登录完整代码，附带后代框架代码，包括登录失败提示，登录获取用户信息，token过期处理
iview-admin
08-16
iview-admin 好多人在 GitHub 下不下来，这块提供下载包
vue Iview 后台页面
05-15
vue Iview 搭建的后台页面 1. 自定义主题index.less 2. 国际化VUE18n 3. 动态菜单 4.自定义组件 5.组件联动 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
login组件的两种用法_Vue.js 组件该如何正确的复用和扩展
weixin_39675215的博客
11-25 138
软件编程有一个重要的原则是 D.R.Y(Don't Repeat Yourself)，讲的是尽量复用代码和逻辑，减少重复。组件扩展可以避免重复代码，更易于快速开发和维护。那么，扩展 Vue 组件的最佳方法是什么？Vue 提供了不少 API 和模式来支持组件复用和扩展，你可以根据自己的目的和偏好来选择。本文介绍几种比较常见的方法和模式，希望对你有所帮助。扩展组件是否必要扩展往往通过继承基础...
使用axios请求时,发送formData请求的示例
10-16
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
在Vue组件化中利用axios处理ajax请求的使用方法
08-29
主要给大家介绍了在Vue组件化中利用axios处理ajax请求的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习吧。
vue 使用axios 数据请求第三方插件的使用教程详解
10-16
主要介绍了vue 使用axios 数据请求第三方插件的使用 ,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
今天小编就为大家分享一篇vue项目使用axios发送请求让ajax请求头部携带cookie的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue使用axios出现options请求方法
10-16
主要介绍了Vue使用axios出现options请求，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue基于iview实现登录密码的显示与隐藏功能
12-28
iview简介 iView 是一套基于 Vue.js 的开源 UI 组件库，主要服务于 PC 界面的中后台产品。 1.背景 近期，在使用abp开发项目过程中，前端vue输入登录密码时默认隐藏，但是如果用户输错密码需要切换显示跟隐藏。故有此文。 2.实现最终效果 2.1 隐藏密码   2.2 显示密码   显示密码需要点击密码框左侧眼睛 3.实现思路 3.1 v-if判断当前密码显示状态 密码输入框跟密码图标最外层用Div标签包住，并且用vue的v-if v-else监听其显示还是隐藏状态。 <div v-on:c
将Vue样式库iview中的Modal模态框改造为漂亮的登录模态框
qq_21005325的博客
03-29 3310
目录 1 前言 1.1遇到的问题 1.2不想放弃iview的Modal组件的原因 2改造要点 2.1template部分 2.1.1模态框触发部分 2.1.2 模态框部分 2.2script部分 3最终效果 4 总结 1 前言 1.1遇到的问题 之前试图将iview中的...
Vue iView二次封装axios（以实现登录功能为例）
qq_36649922的博客
06-01 1053
一般为了便于管理axios（Ajax）请求，我们都会对axios进行封装，这样即减少了代码的数量，又便于管理，不用出错了就修改很多代码。 1. 在src/api文件夹下创建
iView Admin 中使用的相关组件
weixin_34392435的博客
10-26 359
为什么80%的码农都做不了架构师？>>> ...
IView-admin学习笔记——Login篇
没沙发
03-15 5549
IView-admin学习笔记——Login篇 1.1、点击登陆按钮触发handleSubmit方法 // @/view/login/login.vue handleSubmit ({ userName, password }) { this.handleLogin({ userName, password }).then(res =&amp;amp;amp;gt; { this.ge...
vue+iview+axios+spring前后端分离项目登录实例idea创建
啊琪专栏
08-22 622
最近开始学习vue,从网络上看到很多贴子讲解如何创建，现将过程总结如下，欢迎学习交流。过程中用到网友图或者内容请原谅，再此对各位表示感谢！！ 1.项目涉及工具及环境 jdk1.8 maven spring-boot idea node.js npm vue iview axios 2.前端创建 2.1 node.js安装 下载地址：https://nodejs.o...
VUE学习日记——配合axios
终极香蕉大菠萝的博客
04-03 127
Axios Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。 Features 1、从浏览器中创建 XMLHttpRequests 2、从 node.js 创建 http 请求 3、支持 Promise API 4、拦截请求和响应 5、转换请求数据和响应数据 6、取消请求 7、自动转换 JSON 数据 8、客户端支持防御 XSRF 导入Axios包 ...
vue 写的登录页面
m0_67183922的博客
09-01 1808
提示：以下是本篇文章正文内容，下面案例可供参考发送axios请求是我自己比较容易遗忘的地方。
spring boot + Vue + iView前后端分离架构(Mac版) -- (二)登录页面与国际化
JingLisen的博客
03-29 3678
spring boot + Vue + iView前后端分离架构(Mac版) – 登录页面与国际化(二) [小景哥哥博客][http://www.jinglisen.top] 接下来我们首先实现国际化，然后实现登录页面。 一、实现国际化 打开项目hep-admin-web工程，在src目录下创建一个local的目录，再在local目录下创建lang的文件夹，此文件夹用于存放国际化文件，国际化文件包...
vue使用axios请求 实现登录
最新发布
03-30
1. 安装axios ```bash npm install axios --save ``` 2. 在vue组件中引入axios ```javascript import axios from 'axios'; ``` 3. 在vue组件中使用axios发送请求 ```javascript axios.post('/api/login', { username: 'admin', password: '123456' }) .then(response => { console.log(response.data); }) .catch(error => { console.log(error); }); ``` 4. 在服务器端实现登录接口 ```javascript const express = require('express'); const bodyParser = require('body-parser'); const app = express(); app.use(bodyParser.json()); app.use(bodyParser.urlencoded({ extended: true })); app.post('/api/login', (req, res) => { const { username, password } = req.body; if (username === 'admin' && password === '123456') { res.send({ code: 0, message: '登录成功' }); } else { res.send({ code: -1, message: '用户名或密码错误' }); } }); app.listen(3000, () => { console.log('Server is running on http://localhost:3000'); }); ``` 以上代码仅供参考，实际项目中需要根据具体需求进行修改。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值