[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,一经查实,立即删除!

相关文章

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。 接口指的是业务功能。 …

Wireshark自定义Lua插件

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

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…

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…

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; 基本概念 …

Nvidia/算能 +FPGA+AI大算力边缘计算盒子:中国舰船研究院

中国舰船研究院又称中国船舶重工集团公司第七研究院&#xff0c;隶属于中国船舶重工集团公司&#xff0c;是专门从事舰船研究、设计、开发的科学技术研究机构&#xff0c;是中国船舶重工集团公司的军品技术研究中心、科技开发中心&#xff1b;主要从事舰船武器装备发展战略研究…

PDF编辑与转换的终极工具智能PDF处理Acrobat Pro DC

Acrobat Pro DC 2023是一款功能全面的PDF编辑管理软件&#xff0c;支持创建、编辑、转换、签署和共享PDF文件。它具备OCR技术&#xff0c;可将扫描文档转换为可编辑文本&#xff0c;同时提供智能PDF处理技术&#xff0c;确保文件完整性和可读性。此外&#xff0c;软件还支持电子…

竞拍商城系统源码后端PHP+前端UNIAPP

下载地址&#xff1a;竞拍商城系统源码后端PHP前端UNIAPP

手把手教你入门vue+springboot开发(二)

文章目录 前言一、开发环境搭建二、创建项目三、编写代码1.插件下载2.编写代码 四、测试验证总结 前言 前面我们构建了一个查询用户信息的简单springboot后端demo&#xff0c;今天我们先搭建VSCodevue的开发环境&#xff0c;然后在这个开发环境上构建一个demo&#xff0c;连接…

肠道病原体感染定植的三个关键角色——炎症、营养与共生菌群

谷禾健康 日常生活中大部分人都可能碰到过食用了不卫生或过期变质食物以及水源后&#xff0c;出现过恶心、腹痛&#xff0c;并伴有腹泻、食欲不振、呕吐等症状&#xff1f;如果有就要当心&#xff0c;这可能是病原体感染引起的胃肠道炎症。 但是&#xff0c;即使食用了同样食物…

mysql中 redo日志(下)

大家好。上篇文章我们介绍了什么是redo日志以及redo日志的写入过程。建议没看过上篇文章的同学先看一下上一篇文章&#xff0c;今天我们继续来说一说redo日志。 一、redo日志文件 1. redo日志刷盘时机 我们知道mtr运行过程中产生的一组redo日志在mtr结束时会被复制到log buf…

从VS Code源码看清晰代码之美

VS Code的产品做的很优秀&#xff0c;其源码也质量颇高&#xff0c;清晰、整洁、富有美感。 下面是 src\vs\workbench\common\notifications.ts 文件中的两段代码&#xff0c;大家感受一下&#xff1a; get sticky(): boolean {if (this._sticky) {return true; // explicitl…

冲刺面试加油

1、HTML语义化&#xff1f; 对于开发者而言&#xff0c;语义化标签有着更好的页面结构&#xff0c;有利于代码的开发编写和后期的维护。 对于用户而言&#xff0c;当网络卡顿时有良好的页面结构&#xff0c;有利于增加用户的体验。 对于爬虫来说&#xff0c;有利于搜索引擎的…