【axios】 vue3项目 请求服务器数据 登录和注册

已于 2024-04-26 14:45:20 修改
阅读量475 收藏
点赞数 2
分类专栏： vue3+ivew plus项目开发 文章标签： view design spring boot mybatis vue.js
于 2024-04-26 14:03:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zi__you/article/details/138215585
版权
本文介绍了如何在SSM架构中结合Redis缓存实现用户注册和登录功能，包括数据库操作、前端提交请求、错误提示处理以及登录验证过程。
摘要由CSDN通过智能技术生成

1. 运行数据库（ssm）

在这里插入图片描述

3. 运行redis高速缓存(登录的用户信息保存在此）

在这里插入图片描述

5. 运行后台代码（基于spring boot+mybatis 提供了登录和注册接口）

在这里插入图片描述

在这里插入图片描述
查看注册请求的路径：
在这里插入图片描述

6. 前端发送注册请求（修改注册组件的handleSubmit方法）

注册组件的创建见上一篇文章
在这里插入图片描述

7. 页面注册功能实现(注册成功，直接跳到了登录界面）

在这里插入图片描述

在这里插入图片描述

8.查看后台数据库，数据被更新

在这里插入图片描述

9、发送登录请求

注意：登录的请求路径也是服务器的路径 localhost可以改成本地局域网的地址
在这里插入图片描述

10、登录验证

错误提示
在这里插入图片描述
正确提示：
登录成功，跳转到电影网（电影网是测试数据）
在这里插入图片描述

zi__you
关注
专栏目录
vue3【使用axios并封装axios请求】
蜗牛~~
05-12 2870
由于 Vue3中，在setup中无法通过this获取组件实例，console.log(this)打印出来的值是undefined。1、我们可以通过window.location.protocol和window.location.host获取协议和主机ip端口，然后统一设置axios的默认请求baseURL。来绑定的，例如 Vue.prototype.$toast = Toast。proxy是getCurrentInstance()对象中的一个属性，然后通过对象的解构赋值方式拿到proxy。
vue3-登录小案例（借助ElementPlus+axios）
LxyingINGing的博客
06-26 492
vue3项目中借助ElementPlus+axios实现登录功能
关于vue3全局配置axios与使用
qq_52497862的博客
06-24 1486
在实际项目开发中，几乎每个组件中都会用到 axios 发起数据请求。此时会遇到如下两个问题：① 每个组件中都需要导入 axios（代码臃肿）② 每次发请求都需要填写完整的请求路径（不利于后期的维护）
Vue登录注册与axios请求
nys666的博客
07-23 1043
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中axios的github: https://github.com/axios/axiosAxios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中。React等框架的出现，促使了Axios轻量级库的出现，因为Vue等，不需要操作Dom，所以不需要引入Jquery.js了。
vue+axios新手实践实现登陆
weixin_33918114的博客
06-06 1167
其实像这类的文章网上已经有很多很好的,写这篇文章，相当于是做个笔记，以防以后忘记用到的：1、 vuex 2、axios 3、vue-route 登陆流程为：1、提交登陆表单，拿到后台返回的数据2、将数据存入vuex vuex配置 这里直接跳过安装之类的，百度一大堆，我直接上代码 // store index.js import Vue f...
vue3+springboot+mybatis+mysql项目实践--简单登录注册功能实现
最新发布
m0_65985318的博客
07-11 1199
这里是一次对vue3+springboot+mybatis+mysql的项目实现，简单实现前后端分离的登录注册功能，主要工具：idea,navicat。
Vue3+axios+Mock.js实现登录功能
m0_52043522的博客
04-26 3796
基于Vue3 + TypeScript的项目，利用Mock.js模拟后端数据，axios实现请求来完成一个登录功能。
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
10-17
总结来说，通过在Vue项目的全局配置中设置axios的`withCredentials`属性为`true`，我们可以确保在发送Ajax请求时携带cookie，从而实现身份验证和其他基于cookie的会话管理。这是一个基本的登录权限验证解决方案，但...
VUE项目axios请求头更改Content-Type操作
10-15
在Vue项目中，使用axios库进行HTTP请求时，经常需要对请求头（Request Headers）进行配置。对于特定请求类型，如POST请求，更改Content-Type字段是一个常见的操作，它用于指定客户端发送数据的格式。Content-Type...
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
10-15
在开发Vue3项目时，我们通常会遇到一个问题：在本地开发环境中，项目能够顺利地请求到后台接口，但在打包部署到服务器后，却无法获取到数据。这种情况通常是由于请求的远程地址发生了变化，导致接口调用失败。本文将...
vue+vuex+axios实现登录、注册页权限拦截
12-29
在GitHub上有很多写好的模板，这个项目也是基于模板做的。 现在记录一下我做的过程 1、修改config文件夹里的dev.env.js里的BASE_API，把地址改成请求后端的公共部分 BASE_API: 'http://192.168.xx.xx', 2、接下来就是操作src文件，先在 views里写好vew组件（login.vue,regist.vue），写好到router里的index.js里配置好路径 login.vue <el-form autoComplete=on :model
Vue使用axios出现options请求方法
10-16
在Vue项目中，我们经常使用axios库来进行HTTP...理解这些知识点后，当在Vue项目中遇到OPTIONS请求时，就能明白这是由于CORS机制引起的正常行为，而如何配置服务器以正确处理这种请求，取决于你的应用需求和安全策略。
jeecgbootvue3页面获取登录人信息/获取urlIP地址和端口号信息
m0_65360496的博客
10-24 964
获取IP和端口号信息。
vue+axios实现登录注册
热门推荐
Executioner975的博客
09-08 1万+
vue+axios实现登录注册安装配置axiosaxios发送登录请求 安装配置axios 安装axios npm install axios 在mian.js中配置axios，用prototype挂载就可以在别的vue组件使用就可以使用this.$axios来发送axios请求 var axios = require('axios')//引用axios axios.defaults.baseURL = 'https://adny.utools.club/api'//设置一个基础请求地址 Vue.pr
vue3+axios+router实现页面跳转及登录
qq_53541336的博客
08-24 5996
2.由于vite构建的项目中需要自己手动下载路由以及创建路由文件夹，所以在创建好的项目文档中找到src文件夹，在src文件夹下创建router文件夹，并且在其下创建index文件，对于index文件中要写的内容如下，在此之前还需要创建一个views文件夹，本次项目主要用到三个页面，所以需要在views文件夹下需创建三个文件，包括HomeView.vue、AboutView.vue、UserLoginView.vue。1.开始搭建项目框架，使用vite来构建项目。7.最后来看看实际效果吧。
如何在Vue3中使用axios实现数据请求？
有我更精彩的博客
06-08 1803
Vue.js 是一个渐进式的 JavaScript 框架，用于构建用户界面。Axios 是一个基于 Promise 的 HTTP 客户端，它可以用于发送异步 HTTP 请求到 REST 终端并执行各种 CRUD 操作。在 Vue 3 中，我们可以很方便地使用 Axios 进行数据请求，从服务器获取数据并在界面中显示。本文将详细介绍如何在 Vue 3 中使用 Axios 实现数据请求，并提供相关的示例代码，以帮助您更加直观地理解和应用这一过程。
vue--注册登录、请求封装（axios，基地址，本地存储的封装）（vue脚手架的目录详解）---demo
DcTbnk的博客
07-18 426
随便写几个文件,详细的去7.14号的文件里文件看 有底部导航切换，有登录，注册，config.js、auth.js、request.js文件 App.vue <template> <div id="app" class="container"> <div class="header">小乖-shopping</div> <router-view class="content"></router-view>
【VUE】三 vue使用axios实现用户登录案例
春天的波菜
02-28 1021
axios，他是一个HTTP 库，可以发送Http请求。
Vue3：Axios配置及使用
米拉
01-09 3835
在package-lock.json文件可以查看axios版本milliaAxios.js 配置axiosapi.js 接口基地址及接口路径api.js里的基地址和代理接口 需同vue.config.js的配置一致，即。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值