[Vue3:axios]:实现实现登陆页面前后端请求,并用Vite解决跨域问题

文章目录

  • 一:前置依赖
    • 查看依赖
    • 安装 axios:npm install axios
  • 二:配置文件:创建一个用于全局使用的axios实例,并在main.js或main.ts文件中将其配置为全局属性。
    • 根目录mainjs文件引入axios
  • 三:登录页面发送登录请求:发送请求,成功则用localStorge用户id
    • 成功后跳转页面router.push('/page')
  • 四:解决跨域问题:配置Vite服务器的代理功能来实现
    • 出现CORS跨域异常:
    • 解决跨域异常:vite配置代理
    • 查看发送的CURL:
      • http://localhost:5173/api/base/login 代理到 http://localhost:8092/base/login
  • 五:页面效果:
    • 登录成功:
    • 登录失败:

一:前置依赖

查看依赖

根目录下 package.json 文件

“dependencies”: {
“axios”: “^1.7.2”,
“element-plus”: “^2.7.4”,
“vue”: “^3.4.21”,
“vue-router”: “^4.3.2”
},

安装 axios:npm install axios

PS E:\WorkContent\shanghaikaifangdaxue\shujukuyingyong\testFour\sys-instruction> npm install axiosadded 9 packages, and audited 94 packages in 5s15 packages are looking for fundingrun `npm fund` for detailsfound 0 vulnerabilities

二:配置文件:创建一个用于全局使用的axios实例,并在main.js或main.ts文件中将其配置为全局属性。

根目录mainjs文件引入axios

import { createApp } from 'vue'
import './style.css'
import App from './App.vue' 
import router from './router' //引入router
import ElementPlus from 'element-plus' //引入ElementPlusconst app=createApp(App)app.use(router) //使用router
app.use(ElementPlus) //使用ElementPlusapp.mount('#app')

三:登录页面发送登录请求:发送请求,成功则用localStorge用户id

成功后跳转页面router.push(‘/page’)

 const submitForm = () => {loginForm.value.validate((valid) => {if (valid) {const resp = axios.post("/api/base/login",{username: form.username,pwd: form.password}).then(resp => {debuggerif (resp.data.code == 500) {alert(resp.data.message)}if (resp.data.code == 200) {localStorage.setItem('username', resp.data.data.id)router.push('/page')}})// Handle login logic here} else {alert('登录失败');}});};

<template><div><el-form ref="loginForm" :model="form" :rules="rules"><div class="title-container" style="margin-top: 20px;"><h3 class="title">学生管理平台</h3></div><el-form-item prop="username"><el-input v-model="form.username" placeholder="Username"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="form.password" placeholder="Password"></el-input></el-form-item><el-form-item><el-button @click="submitForm">Login</el-button></el-form-item></el-form></div>
</template><script>
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';
import axios from "axios";export default {name: 'Login',setup() {const loginForm = ref(null);const form = reactive({username: '',password: ''});const rules = {username: [{ required: true, message: 'Please input username', trigger: 'blur' }],password: [// { required: true, message: 'Please input password', trigger: 'blur' },// { min: 6, message: 'Password length should be greater than 6', trigger: 'blur' }]};const router = useRouter();const submitForm = () => {loginForm.value.validate((valid) => {if (valid) {const resp = axios.post("/api/base/login",{username: form.username,pwd: form.password}).then(resp => {debuggerif (resp.data.code == 500) {alert(resp.data.message)}if (resp.data.code == 200) {localStorage.setItem('username', resp.data.data.id)router.push('/page')}})// Handle login logic here} else {alert('登录失败');}});};return {loginForm,form,rules,submitForm};}
};
</script>

四:解决跨域问题:配置Vite服务器的代理功能来实现

出现CORS跨域异常:

{"message": "Request failed with status code 404","name": "AxiosError","stack": "AxiosError: Request failed with status code 404\n    at settle (http://localhost:5173/node_modules/.vite/deps/axios.js?v=082c756d:1216:12)\n    at XMLHttpRequest.onloadend (http://localhost:5173/node_modules/.vite/deps/axios.js?v=082c756d:1562:7)\n    at Axios.request (http://localhost:5173/node_modules/.vite/deps/axios.js?v=082c756d:2078:41)","config": {"transitional": {"silentJSONParsing": true,"forcedJSONParsing": true,"clarifyTimeoutError": false},"adapter": ["xhr","http","fetch"],"transformRequest": [null],"transformResponse": [null],"timeout": 0,"xsrfCookieName": "XSRF-TOKEN","xsrfHeaderName": "X-XSRF-TOKEN","maxContentLength": -1,"maxBodyLength": -1,"env": {},"headers": {"Accept": "application/json, text/plain, */*","Content-Type": "application/json"},"method": "post","url": "/api/baseStudentCourse/login","data": "{\"username\":\"sdafasda\",\"pwd\":\"adsfadfadsfa\"}"},"code": "ERR_BAD_REQUEST","status": 404
}

在这里插入图片描述

解决跨域异常:vite配置代理

  1. 打开项目中的vite.config.js文件(如果你使用的是vite.config.ts,则是相同的配置)。

  2. 在配置文件中,添加一个proxy配置项,指定需要代理的API地址以及相应的目标服务器地址

默认配置:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],
})

变更后配置:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue()],// 添加代理配置server: {proxy: {'/api': {target: 'http://localhost:8092/', // 目标服务器地址changeOrigin: true, // 是否改变源地址rewrite: (path) => path.replace(/^\/api/, ''), // 重写路径}}}
})

查看发送的CURL:

curl 'http://localhost:5173/api/base/login' \-H 'Accept: application/json, text/plain, */*' \-H 'Accept-Language: zh-CN,zh;q=0.9' \-H 'Connection: keep-alive' \-H 'Content-Type: application/json' \-H 'Origin: http://localhost:5173' \-H 'Referer: http://localhost:5173/login' \-H 'Sec-Fetch-Dest: empty' \-H 'Sec-Fetch-Mode: cors' \-H 'Sec-Fetch-Site: same-origin' \-H 'User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36' \-H 'sec-ch-ua: "Google Chrome";v="125", "Chromium";v="125", "Not.A/Brand";v="24"' \-H 'sec-ch-ua-mobile: ?0' \-H 'sec-ch-ua-platform: "Windows"' \--data-raw '{"username":"asdfadsf","pwd":"adfadfaf"}'

在这里插入图片描述

http://localhost:5173/api/base/login 代理到 http://localhost:8092/base/login

五:页面效果:

登录成功:

在这里插入图片描述

在这里插入图片描述

登录失败:

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/24814.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【React】dayjs -- 格式化时间 的使用

中文文档 1.安装 Node.js 项目中使用 Day.js&#xff0c;只需使用 npm 安装 npm install dayjs其它地方使用&#xff0c;参考中文文档 2.引入 import dayjs from dayjs3.使用 时间格式化 dayjs().format() // 默认返回的是 ISO8601 格式字符串 2020-04-02T08:02:17-05:0…

Polar Web【中等】xxe

Polar Web【中等】xxe Contents Polar Web【中等】xxe思路&探索EXP运行&总结 思路&探索 如题目所示&#xff0c;此题考查XXE漏洞&#xff0c;具体细节需要逐步深挖 打开站点&#xff0c;提示了flag所在的文件&#xff0c;点击按钮&#xff0c;可见php的配置信息&am…

一款免费文件夹同步工具,旨在帮助用户在不同磁盘或文件夹间进行文件和目录的复制、移动和同步工作

一、简介 1、一款免费文件夹同步工具&#xff0c;旨在帮助用户在不同磁盘或文件夹间进行文件和目录的复制、移动和同步工作。这款工具因其简单易用、高度可定制化的特点&#xff0c;受到了广大用户的青睐。SyncToy支持多种同步模式&#xff0c;包括镜像同步、单向同步以及增量同…

Mysql使用中的性能优化——索引数对INSERT性能的影响

表的索引可以给数据检索提升效率&#xff0c;但是也给表的增删改操作带来代价。本文我们将关注&#xff0c;索引数量对INSERT操作的影响。 结论 索引数的新增会造成INSERT操作效率下降&#xff0c;约每增一个索引会降低10%效率。 实验数据 可以看到0个索引的效率是7个索引效…

Java Web学习笔记21——前后端分离开发

前后端混合开发&#xff1a; 沟通成本比较高。 分工不明确。 不便管理&#xff0c;不便于后期的维护和拓展。 前后端分离开发&#xff1a; 当前主流的开发模式&#xff1a;前后端分离开发&#xff1a; 接口文档&#xff1a; 接口并不是interface。 接口指的是业务功能。 …

学习java第九十六天

AOP有哪些实现方式&#xff1f; AOP有两种实现方式&#xff1a;静态代理和动态代理。 静态代理 静态代理&#xff1a;代理类在编译阶段生成&#xff0c;在编译阶段将通知织入Java字节码中&#xff0c;也称编译时增强。AspectJ使用的是静态代理。 缺点&#xff1a;代理对象需要与…

Wireshark自定义Lua插件

背景&#xff1a; 常见的抓包工具有tcpdump和wireshark&#xff0c;二者可基于网卡进行抓包&#xff1a;tcpdump用于Linux环境抓包&#xff0c;而wireshark用于windows环境。抓包后需借助包分析工具对数据进行解析&#xff0c;将不可读的二进制数转换为可读的数据结构。 wires…

React+TS前台项目实战(三)-- 国际化配置

文章目录 前言一、安装国际化相关插件包二、在src/locales目录下创建en.json和zh.json语言包文件三、配置与使用1. i18n.ts配置详细代码及注释如下2. 在layout布局组件中初始化&#xff0c;并处理路由跳转问题 总结 前言 本文主要讲项目的国际化配置和相关常用方法封装。 一、…

pytho入门教程

文章目录 随机数据生成的方式list操作方式数据操作方式处理缺失数据数据框操作方式画图的方式 随机数据生成的方式 # 随机生成数据的方式 # 1. 随机生成10-20之间的浮点数 holdForce random.uniform(10,20) # print(holdForce)# 2.for循环输出50个数据的方式 # for i in rang…

element-plus的el-text组件(文本组件)的介绍和使用

el-text&#xff08;适合文本操作的组件&#xff09; 设置文本type,如default,primary,success,info,warning,danger超出容器尺寸自动省略&#xff0c;tuncated属性设置size属性控制文本大小&#xff0c;有large,default,small设置tag属性&#xff0c;值为html5标签名&#xf…

前端工程化工具系列(十二)—— PostCSS(v8.4.38):CSS 转换工具

PostCSS 是转换 CSS 语法的工具。它提供 API 来对 CSS 文件进行分析和修改它的规则。 PostCSS 本身并不能直接使用&#xff0c;主要是使用基于 PostCSS 编写的插件。 1 安装 pnpm add -D postcss-import postcss-nested postcss-preset-env cssnano2 配置 在项目根目录下创…

基本类型值,是按值复制的,而不是按引用复制的。(深浅拷贝)

let obj[1,2,4] let obj2Array.from(obj) obj2[0]23 console.log(obj) 这是浅拷贝吗&#xff1f; 在给出的例子中&#xff0c;Array.from(obj) 实际上执行的是对数组 obj 的浅拷贝。这是因为数组在JavaScript中是一种特殊的对象&#xff0c;其元素存储在索引属性中。Array.fr…

Spring Cloud、Spring Cloud LoadBalancer、Nacos 和 OpenFeign整合

版本 Spring Cloud 3.1.1spring cloud loadbalancer 3.1.1nacos 2021.1open feign 3.1.1 引入依赖 在项目的 pom.xml 文件中添加相关依赖&#xff1a; <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter…

Nagios的安装和使用

*实验* *nagios安装和使用* Nagios 是一个监视系统运行状态和网络信息的监视系统。Nagios 能监视所指定的本地或远程主机以及服务&#xff0c;同时提供异常通知功能等. Nagios 可运行在 Linux/Unix 平台之上&#xff0c;同时提供一个可选的基于浏览器的 WEB 界面以方便系统管…

【创作活动】面对层出不穷的AI大模型产品我们应该怎么选择?

&#x1f604; 19年之后由于某些原因断更了三年&#xff0c;23年重新扬帆起航&#xff0c;推出更多优质博文&#xff0c;希望大家多多支持&#xff5e; &#x1f337; 古之立大事者&#xff0c;不惟有超世之才&#xff0c;亦必有坚忍不拔之志 &#x1f390; 个人CSND主页——Mi…

Vue CLI 4与项目构建实战指南

title: Vue CLI 4与项目构建实战指南 date: 2024/6/9 updated: 2024/6/9 excerpt: 这篇文章介绍了如何使用Vue CLI优化项目构建配置&#xff0c;提高开发效率&#xff0c;涉及配置管理、项目部署策略、插件系统定制以及Webpack和TypeScript的深度集成技巧。 categories: 前端…

五、身份与访问管理—身份管理和访问控制管理(CISSP)

目录 1.身份管理 1.1 目录技术 1.2 单点登录 1.2.1 Kerberos认证 1.2.2 SESAME认证 1.2.3 KryptoKnight认证 1.3 联合身份管理 1.3.1 SAML安全断言标记语言 1.3.2 标记语言 1.3.3 OpenID 1.3.4 OAuth 1.3.5 OIDC(OpenID Connect) 2.身份即服务(IDaaS) 2.1 AA…

深度神经网络是什么?

深度神经网络&#xff08;Deep Neural Network, DNN&#xff09;是机器学习领域中的一种重要技术&#xff0c;特别是在深度学习领域。以下是关于深度神经网络的详细回答&#xff1a; 1. 定义与结构 定义&#xff1a;深度神经网络是由多层人工神经元相互连接而成的网络结构&am…

Rocky linux 搭建DNS主从服务器+keepalived实现高可用

接上两篇文章&#xff0c;这篇文章跟上两篇没有直接关系。 第一篇&#xff1a;linux rocky 搭建DNS服务和禁止AD域控DNS&#xff0c;做到独立DNS并加域_linux 域控-CSDN博客文章浏览阅读519次&#xff0c;点赞20次&#xff0c;收藏10次。使用linux rocky 搭建DNS服务&#xff…

【个人博客搭建】(22)申请QQ开发者

这里我们要引入的一个概念是OAuth - OAuth 2.0是一个行业标准的授权协议&#xff0c;用于处理用户数据访问和分享的安全问题。它允许用户将他们对某些服务的访问权限授权给第三方应用&#xff0c;而无需分享他们的用户名和密码。以下是对OAuth 2.0的介绍&#xff1a; 基本概念 …