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页面

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

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

相关文章

c++调用Lua(table嵌套写法)

通过c调用lua接口将数据存储到虚拟栈中&#xff0c;就可以在lua脚本在虚拟栈中取得数据 c调用lua库&#xff0c;加载lua文件&#xff0c; lua_State* L;//定义一个全局变量***************************L luaL_newstate();luaL_openlibs(L);//打开Lua脚本文件std::string pat…

数据结构之栈的讲解

&#x1f495;" 春宵一刻值千金&#xff0c;花有清香月有阴。 "&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;leetcode刷题之哈希表的应用(1) 1.栈的概念 栈是一种只允许在一端&#xff08;栈顶&#xff09;进行数据操作的数据结构&#xff0c;具…

如何把A3 pdf 文章打印成A4

1. 用Adobe Acrobat 打开pdf 2 打印 选择海报 进行调整即可如下图,见下面红色的部分。

说一下类的生命周期

&#x1f47d;System.out.println(“&#x1f44b;&#x1f3fc;嗨&#xff0c;大家好&#xff0c;我是代码不会敲的小符&#xff0c;双非大四&#xff0c;Java实习中…”); &#x1f4da;System.out.println(“&#x1f388;如果文章中有错误的地方&#xff0c;恳请大家指正&a…

Spring依赖注入之@autowire注解详解

目录 autowire用法 autowire注解底层逻辑 逻辑处理类AutowiredAnnotationBeanPostProcessor postProcessMergedBeanDefinition获取注入点 postProcessProperties针对注入点字段或者方法获取bean 字段注入 set方法注入 autowire用法 属性上&#xff1a;先根据属性类型去找…

MySQL MHA高可用配置及故障切换

一、MHA相关概念 1&#xff0e;什么是 MHA MHA&#xff08;MasterHigh Availability&#xff09;是一套优秀的MySQL高可用环境下故障切换和主从复制的软件。 MHA 的出现就是解决MySQL 单点的问题。 MySQL故障切换过程中&#xff0c;MHA能做到0-30秒内自动完成故障切换操作。 …

String转JsonObject 再转list<Map<String,Object>>

String转JsonObject 再转list<Map<String,Object>>&#xff1a; 要将字符串 "[{“a”:“1”},{“a”:“2”},{“a”:“3”}]"要将字符串 “[{“a”:“1”},{“a”:“2”},{“a”:“3”}]” 转换为 List>&#xff0c;首先需要将字符串解析为 JSONObje…

二百零七、Flume——Flume实时采集5分钟频率的Kafka数据直接写入ODS层表的HDFS文件路径下

一、目的 在离线数仓中&#xff0c;需要用Flume去采集Kafka中的数据&#xff0c;然后写入HDFS中。 由于每种数据类型的频率、数据大小、数据规模不同&#xff0c;因此每种数据的采集需要不同的Flume配置文件。玩了几天Flume&#xff0c;感觉Flume的使用难点就是配置文件 二、…

信号的处理时机(内核态,用户态,如何/为什么相互转换,内核空间,cpu寄存器),信号的处理流程详细介绍+抽象图解

目录 信号的处理时机 引入 思考 -- 什么时候才能算合适的时候呢? 用户态转为内核态 引入 内核地址空间 引入 思考 -- 进程为什么能切换成内核态呢? 虚拟地址空间 注意点 原理 (总结一下) 为什么如何进入内核态 引入 介绍 底层原理(int 80) cpu的寄存器 用…

nodejs express vue uniapp新闻发布系统源码

开发技术&#xff1a; node.js&#xff0c;mysql5.7&#xff0c;vscode&#xff0c;HBuilder nodejs express vue uniapp 功能介绍&#xff1a; 用户端&#xff1a; 登录注册 首页显示搜索新闻&#xff0c;新闻分类&#xff0c;新闻列表 点击新闻进入新闻详情&#xff0…

Jetson JetPack-5.1.2-L4T-R35.4.1 修复deskew algorithm的问题

1. 前言 官方Orin Nano开发套件 版本: JetPack 5.1.2 2. 问题描述 使用的是带有Orin Nano EVK的GMSL相机,但我无法看到MIPI帧。 这里是媒体设备信息: Media controller API version 5.10.120Media device information ------------------------ driver tegra-…

MySQL内部存储代码常用实现方式

MySQL内部存储代码方式包括SQL语言、存储过程、触发器、函数等。其中&#xff0c;最常用的是SQL语言和存储过程。 一个应用场景是&#xff0c;假设有一个电商网站的订单系统&#xff0c;需要在用户下单成功后自动发送一封邮件通知用户订单号和交易金额。这时可以通过存储过程实…

SSH配置免密登录

配置免密登录的步骤 要配置SSH免密登录&#xff0c;需要进行以下几步&#xff1a; 步骤一&#xff1a;生成SSH密钥对 首先&#xff0c;在本地计算机上生成SSH密钥对。这包括一个私钥&#xff08;private key&#xff09;和一个公钥&#xff08;public key&#xff09;。 打…

计算机网络——网络可靠性及网络出口配置

1. 前言&#xff1a; 学习目标&#xff1a; 1.了解链路聚合的作用 2. 了解ACL的工作原理 3. 了解NAT的工作原理和配置 2. 网络可靠性方案 网络可靠性是指网络在面对各种异常情况或故障时&#xff0c;能够维持正常运行和提供服务的能力。这包括防止网络中断、减小数据丢失的可能…

spring boot零配置

spring boot是如何选择tomcat还是Jett作为底层服务器的呢&#xff1f; springboot通过ServletWebServerApplicationContext的onRefresh()方法&#xff0c;会创建web服务 protected void onRefresh() {super.onRefresh();try {// 创建web服务createWebServer();}catch (Throwab…

PyTorch 之 Dataset 类入门学习

PyTorch 之 Dataset 类入门学习 Dataset 类简介 PyTorch 中的 Dataset 类是一个抽象类&#xff0c;用来表示数据集。通过继承 Dataset 类可以进行自定义数据集的格式、大小和其它属性&#xff0c;供后续使用&#xff1b; 可以看到官方封装好的数据集也是直接或间接的继承自 …

6.Gin 路由详解 - GET POST 请求以及参数获取示例

6.Gin 路由详解 - GET POST 请求以及参数获取示例 GET POST 请求以及参数获取示例 Get 请求&#xff1a;获取 Quary 参数 // 获取query参数示例&#xff1a;GET /user?uid20&namejack&page1 r.GET("/user", func(c *gin.Context) {// 获取参数// Query获取参…

[机缘参悟-119] :一个IT人的反思:反者道之动;弱者,道之用 VS 恒者恒强,弱者恒弱的马太效应

目录 前言&#xff1a; 一、道家的核心思想 二、恒者恒强&#xff0c;弱者恒弱的马太效应 三、马太效应与道家思想的统一 3.1 大多数的理解 3.2 个人的理解 四、矛盾的对立统一 前言&#xff1a; 马太效应和强弱互转的道家思想&#xff0c;都反应了自然规律和社会规律&…

SVN 修改版本库地址url路径

一、win11用户 1. win11系统右链菜单比较优秀&#xff0c;如果菜单中选择“TortoiseSVN”找不到“重新定位”&#xff0c;如下图所示&#xff0c;则需要添加右键菜单&#xff1a; 2.添加右键菜单&#xff1a;选择“TortoiseSVN”&#xff0c;点击设置&#xff0c;如下图所示&a…

Vue 项目实战——如何在页面中展示 PDF 文件以及 PDFObject 插件实战

文章目录 &#x1f4cb;前言&#x1f3af;使用 HTML 标签&#x1f9e9; embed 标签&#x1f9e9; object标签&#x1f9e9; iframe标签&#x1f9e9;完整代码 &#x1f3af;使用 PDFObject 插件&#x1f9e9;为什么使用 PDFObject 插件&#xff08;AI翻译&#xff09;&#x1f…