当前位置: 首页 > news >正文

vue3+elementPlus登录向后端服务器发起数据请求Ajax

后端的url登录接口

先修改main.js文件

// 导入Ajax 前后端数据传输
import axios  from "axios";
const app = createApp(App)
//vue3.0使用app.config.globalProperties.$http
app.config.globalProperties.$http = axios 
app.mount('#app');

login.vue

页面显示部分 
<template><el-form ref="loginForm" :model="loginForm" :rules="rules"  > <el-form-item label="用户"><el-input  v-model="loginForm.username" placeholder="请输入用户名"> </el-input></el-form-item><el-form-item label="密码"><el-input  v-model="loginForm.password" type="password" placeholder="请输入密码" show-password></el-input><el-form-item>  <el-button  @click="login">登录</el-button></el-form-item> </div></div>
</template>
登录过程的js 点击登录按钮 methos里面调用login登录方法export default {name: "Login",data(){return{// 登录表单的数据绑定对象loginForm: {username: 'admin',password: '123'}},methods:{login(){this.$refs.loginForm.validate(valid => {if (!valid) return//登录调用的doLogin进行登录const result = this.$http.post('/api/doLogin',this.loginForm)  //先打印到浏览器控制台,看结果console.log(result)// 跳转到home页面this.$router.push('/home')})}}}

此时前端有跨域问题 先配置跨域

vue.config.js  项目中如果没有这个文件 请自行创建。

module.exports = {// 基本路径 baseURL已经过时publicPath: './',// 输出文件目录outputDir: 'dist',// eslint-loader 是否在保存时检查lintOnSave: false,devServer: {// 前端显示端口号port: 8080,// 配置不同的后台API地址proxy: {'/api': {target: 'http://localhost:8000/api',    // 后台地址,根据实际后端接口ws: true,changeOrigin: true,   //允许跨域secure: false,       //是否为https接口pathRewrite: {'^/api': ''}}}}
}

此时可以看到跳转到登录到home页面

相关文章:

vue3+elementPlus登录向后端服务器发起数据请求Ajax

后端的url登录接口 先修改main.js文件 // 导入Ajax 前后端数据传输 import axios from "axios"; const app createApp(App) //vue3.0使用app.config.globalProperties.$http app.config.globalProperties.$http axios app.mount(#app); login.vue 页面显示部分…...

存储区域

将应用程序加载到内存空间执行时&#xff0c;操作系统负责代码段、数据段和BSS段的加载&#xff0c;并在内存中为这些段分配空间。 栈段亦由操作系统分配和管理&#xff0c;而不需要程序员显示地管理&#xff1b;堆段由程序员自己管理&#xff0c;即显示地申请和释放空间。 进…...

C#串口通信从入门到精通(27)——高速通信下解决数据处理慢的问题(20ms以内)

前言 我们在开发串口通信程序时,有时候会遇到比如单片机或者传感器发送的数据速度特别快,比如10ms、20ms发送一次,并且每次发送的数据量还比较大,如果按照常规的写法,我们会发现接收的数据还没处理完,新的数据又发送过来了,这就会导致处理数据滞后,软件始终处理的不是…...

Redis-Redis高可用集群之水平扩展

Redis3.0以后的版本虽然有了集群功能&#xff0c;提供了比之前版本的哨兵模式更高的性能与可用性&#xff0c;但是集群的水平扩展却比较麻烦&#xff0c;今天就来带大家看看redis高可用集群如何做水平扩展&#xff0c;原始集群(见下图)由6个节点组成&#xff0c;6个节点分布在三…...

2023全球数字贸易创新大赛-人工智能元宇宙-4-10

目录 竞赛感悟: 创业的话 好的项目 数字工厂,智慧制造:集群控制的安全问题...

go defer用法_类似与python_java_finially

defer 执行 时间 defer 一般 定义在 函数 开头, 但是 他会 最后 被执行 A defer statement defers the execution of a function until the surrounding function returns. 如果说 为什么 不在 末尾 定义 defer 呢, 因为 当 错误 发生时, 程序 执行 不到 末尾 就会 崩溃. d…...

Log4j2.xml不生效:WARN StatusLogger Multiple logging implementations found:

背景 将 -Dlog4j.debug 添加到IDEA的类的启动配置中 运行上图代码&#xff0c;这里log4j2.xml控制的日志级别是info&#xff0c;很明显是没生效。 DEBUG StatusLogger org.slf4j.helpers.Log4jLoggerFactory is not on classpath. Good! DEBUG StatusLogger Using Shutdow…...

【LeetCode】挑战100天 Day14(热题+面试经典150题)

【LeetCode】挑战100天 Day14&#xff08;热题面试经典150题&#xff09; 一、LeetCode介绍二、LeetCode 热题 HOT 100-162.1 题目2.2 题解 三、面试经典 150 题-163.1 题目3.2 题解 一、LeetCode介绍 LeetCode是一个在线编程网站&#xff0c;提供各种算法和数据结构的题目&…...

VMware安装windows操作系统

一、下载镜像包 地址&#xff1a;镜像包地址。 找到需要的版本下载镜像包。 二、安装 打开VMware新建虚拟机&#xff0c;选择用镜像文件。将下载的镜像包加载进去即可。...

历时半年,我发布了一款习惯打卡小程序

半年多前&#xff0c;我一直困扰于如何记录习惯打卡情况&#xff0c;在参考了市面上绝大多数的习惯培养程序后&#xff0c;终于创建并发布了这款习惯打卡小程序。 “我的小日常打卡”小程序主要提供习惯打卡和专注训练功能。致力于培养用户养成一个个好的习惯&#xff0c;改掉…...

被DDOS了怎么办 要如何应对

DDoS攻击的特点和类型 1. 特点 DDoS攻击的特点是通过大量合法的请求或者无效的请求&#xff0c;消耗目标服务器的网络带宽和系统资源&#xff0c;使其无法正常运行。攻击者通常使用多个主机发起攻击&#xff0c;以达到更高的攻击效果。 2. 常见类型 &#xff08;1&#xff09;S…...

时间序列预测实战(十七)PyTorch实现LSTM-GRU模型长期预测并可视化结果(附代码+数据集+详细讲解)

一、本文介绍 本文给大家带来的实战内容是利用PyTorch实现LSTM-GRU模型&#xff0c;LSTM和GRU都分别是RNN中最常用Cell之一&#xff0c;也都是时间序列预测中最常见的结构单元之一&#xff0c;本文的内容将会从实战的角度带你分析LSTM和GRU的机制和效果&#xff0c;同时如果你…...

【免费使用】基于PaddleSeg开源项目开发的人像抠图Web API接口

基于PaddleSeg开源项目开发的人像抠图API接口&#xff0c;服务器不存储照片大家可放心使用。 1、请求接口 请求地址&#xff1a;http://apiseg.hysys.cn/predict_img 请求方式&#xff1a;POST 请求参数&#xff1a;{"image":"/9j/4AAQ..."} 参数是jso…...

Centos7 Python环境和yum修复

1、删除现有残余包 [rootlocalhost ]# rpm -qa|grep python|xargs rpm -ev --allmatches --nodeps[rootlocalhost ]# rpm -qa|grep yum|xargs rpm -ev --allmatches --nodeps[rootlocalhost ]# whereis python |xargs rm -frv[rootlocalhost ]# whereis python ##验证清除&…...

Ubuntu下使用protoBuf

一、protobuf简介&#xff1a; 1.1 protobuf的定义&#xff1a; protobuf是用来干嘛的&#xff1f; protobuf是一种用于 对结构数据进行序列化的工具&#xff0c;从而实现 数据存储和交换。 &#xff08;主要用于网络通信中 收发两端进行消息交互。所谓的“结构数据”是指类…...

AT89S52单片机

目录 一.AT89S52单片机的硬件组成 1.CPU(微处理器) (1)运算器 (2)控制器 2.数据存储器 (RAM) (1)片内数据存储器 (2)片外数据存储器 3.程序存储器(Flash ROM) 4.定时器/计数器 5.中断系统 6.串行口 7.P0口、P1口、P2口和P3口 8.特殊功能寄存器 (SFR) 常用的特殊功…...

数字孪生智慧校园 Web 3D 可视化监测

当今&#xff0c;智慧校园发展阶段亟需推动信息可视化建设与发展&#xff0c;将大数据、云计算、可视化等高新技术相融合&#xff0c;为校园师生创造科学智能的学习环境&#xff0c;并实现教学资源最大化和信息服务智能化。帮助学校更好地应用校园可视化技术&#xff0c;提升校…...

Python Web框架的三强之争:Flask、Django和FastAPI

JetBrains 公布 2022 Python 开发者调查结果。 完整报告地址&#xff1a;https://lp.jetbrains.com/zh-cn/python-developers-survey-2022/ 这是由 Python 软件基金会 (PSF) 和 JetBrains 共同开展的第六次官方年度 Python 开发者调查&#xff0c;回复于 2022 年 10 月至 12 …...

本地缓存与分布式缓存

一、缓存的概念 在服务端编程当中&#xff0c;缓存主要是指将数据库的数据加载到内存中&#xff0c;之后对该数据的访问都在内存中完成&#xff0c;从而减少了对数据库的访问&#xff0c;解决了高并发场景中数据库容易成为性能瓶颈的问题&#xff1b;以及基于内存的访问速度高…...

LabVIEW如何获取波形图上游标所在位置的数值

LabVIEW如何获取波形图上游标所在位置的数值 获取游标所在位置数值的一种方法是利用波形图的游标列表属性。 在VI的程序框图中&#xff0c;右键单击波形图并选择创建引用 &#xff0c;然后将创建的引用节点放在程序框图上。 在程序框图上放置一个属性节点&#xff0c;并将其…...

告别‘Unable to find suitable Visual Studio toolchain’:一份给Flutter开发者的Windows环境自查清单

Flutter开发者的Windows环境终极自查指南&#xff1a;从工具链报错到健壮环境搭建 当你在Windows上运行flutter run -d windows时&#xff0c;那个刺眼的红色错误信息"Unable to find suitable Visual Studio toolchain"是否让你感到沮丧&#xff1f;这不仅仅是安装…...

2026年山东GEO优化服务商排行最新版:8家口碑服务商实力盘点

2025-2026年&#xff0c;生成式AI在各行业的应用持续深化&#xff0c;用户获取信息与服务的习惯逐步从传统搜索框&#xff0c;转向与豆包、DeepSeek、文心一言等AI对话产品的自然交互&#xff0c;这一变革催生了营销领域的新方向——生成式引擎优化&#xff08;GEO&#xff09;…...

零设计基础,3 分钟搞定符合期刊要求的科研插图

作为一名已经顺利完成课题的研究生&#xff0c;我想很多研究生都和我有过一样的经历&#xff1a;熬了几个月做完实验&#xff0c;整理好了数据&#xff0c;写好了论文正文&#xff0c;结果卡在了论文插图这一步——明明实验设计严谨、结果漂亮&#xff0c;就是画出来的插图要么…...

Qt信号槽传自定义类型踩坑记:qRegisterMetaType的正确打开方式(附完整代码)

Qt信号槽传自定义类型&#xff1a;从编译错误到深度实践的完全指南 第一次在Qt信号槽中使用自定义数据类型时&#xff0c;那个鲜红的错误提示框跳出来的时候&#xff0c;我盯着屏幕愣了三秒——明明代码逻辑完全正确&#xff0c;为什么连接信号槽时会报错&#xff1f;相信很多Q…...

Qwen3.5-9B-AWQ-4bit参数详解教程:温度值与最大输出长度调优指南

Qwen3.5-9B-AWQ-4bit参数详解教程&#xff1a;温度值与最大输出长度调优指南 1. 模型简介 Qwen3.5-9B-AWQ-4bit是一个支持图像理解的多模态模型&#xff0c;能够结合上传图片与文字提示词&#xff0c;输出中文分析结果。这个量化版本特别适合处理以下任务&#xff1a; 图片主…...

FanControl深度解析:从基础配置到专业级风扇调校全指南

FanControl深度解析&#xff1a;从基础配置到专业级风扇调校全指南 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Trending/f…...

保姆级教程:用InsightFace搞定人脸3D关键点检测(附Python代码与106点标注解析)

从零实现高精度人脸3D关键点标注&#xff1a;InsightFace实战指南 人脸关键点检测技术早已从实验室走向产业应用&#xff0c;从美颜相机到虚拟试妆&#xff0c;从表情分析到身份核验&#xff0c;这项基础能力正悄然改变着人机交互的方式。作为计算机视觉工程师&#xff0c;我曾…...

从编码原理到实战:彻底搞懂QT中文乱码,让你的应用告别“火星文”(UTF-8/GBK转换详解)

从编码原理到实战&#xff1a;彻底搞懂QT中文乱码&#xff0c;让你的应用告别“火星文”&#xff08;UTF-8/GBK转换详解&#xff09; 在QT开发中&#xff0c;中文乱码问题就像一位不请自来的“老朋友”&#xff0c;总会在你最意想不到的时候出现。无论是控件显示、文件读写还是…...

Python实战:用PyCryptodome构建你的数据安全防线

1. PyCryptodome&#xff1a;Python开发者的加密利器 当你需要为Python应用添加加密功能时&#xff0c;PyCryptodome绝对是个绕不开的名字。这个库的前身是著名的PyCrypto&#xff0c;现在已经成为Python生态中最强大的密码学工具之一。我在多个实际项目中使用过它&#xff0c;…...

LFM2-2.6B-GGUF多场景应用:法律合同要点提取、医疗报告术语解释

LFM2-2.6B-GGUF多场景应用&#xff1a;法律合同要点提取、医疗报告术语解释 1. 项目介绍 LFM2-2.6B-GGUF是由Liquid AI公司开发的一款轻量级大语言模型&#xff0c;经过GGUF量化处理后&#xff0c;体积大幅缩小但保留了强大的文本处理能力。这个模型特别适合在资源有限的设备…...