vue连接本地服务器

vue 连接本地服务器做后端。

后端服务

使用springboot新建一个基于restful的接口,访问如下的地址,返回值。
在这里插入图片描述

vue构建

新建一个vue项目,安装访问服务器的插件。

npm install axios vue-axios --save

修改main.js使用axios,最终结果如下

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import VueAxios from 'vue-axios'const app = createApp(App);
app.use(VueAxios, axios)
app.mount('#app')

在新建的vue工程中,HelloWorld.vue中新建访问的方法。添加mounted方法。完整的js如下

<script>
export default {name: 'HelloWorld',props: {msg: String},mounted() {let api = "/test/searchByConditon";this.axios.get("/myapi"+api).then(response =>{console.log(response.data);}).catch(error =>{console.log(error);})}
}
</script>

检验

运行vue工程,打开项目。如下就是已经连接上了本地的后端的服务器。打印出如下的信息。
在这里插入图片描述

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

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

相关文章

Mybatis插件入门

专栏精选 引入Mybatis Mybatis的快速入门 Mybatis的增删改查扩展功能说明 mapper映射的参数和结果 Mybatis复杂类型的结果映射 Mybatis基于注解的结果映射 Mybatis枚举类型处理和类型处理器 再谈动态SQL Mybatis配置入门 Mybatis行为配置之Ⅰ—缓存 Mybatis行为配置…

Ubuntu - VMware Workstation 常用快捷键

Ctrl Alt T&#xff1a;打开终端窗口。 Ctrl Shift W &#xff1a;关闭终端窗口。 Ctrl L&#xff1a; 清屏终端窗口 Ctrl Alt L&#xff1a;锁定屏幕。 Alt Tab&#xff1a;切换应用程序。 Alt F2&#xff1a;打开运行命令对话框。 Ctrl Alt Arrow&#xff0…

GPT4All : 便捷易用的本地智能问答推理软件(乱记)

安装与使用 去官网 https://gpt4all.io/index.html下载可执行文件。 打开应用即可看到是否共享数据的选项&#xff1a; 然后自动进入模型下载界面 测试 内存占用 缺点&#xff1a;在我本地的轻薄本上运行时&#xff0c;风扇会有轻微噪声&#xff0c;关闭软件很久都没停止。…

校准算法的处理

校准算法是用于校准设备或系统的方法和计算。这涉及到消除误差和校准输出以实现准确性和可靠性的技术。具体的方法如下&#xff1a; 确定校准目标&#xff1a;首先&#xff0c;确定您希望校准的具体参数或指标&#xff0c;例如温度、压力、电流、电压等。收集数据&#xff1a;…

《深入理解JAVA虚拟机笔记》运行时栈帧、方法分派、动态类型

运行时栈帧结构 Java 虚拟机以方法作为最基本的执行单元&#xff0c;“栈帧”&#xff08;Stack Frame&#xff09;则是用于支持虚拟机进行方法调用和方法执行背后的数据结构&#xff0c;它也是虚拟机运行时数据区中的虚拟机栈的栈元素。栈帧存储了方法的局部变量表、操作数栈…

【教学类-43-04】20231229 N宫格数独4.0(n=2,4,6,8) (ChatGPT AI对话大师生成 回溯算法)

作品展示&#xff1a; 背景需求&#xff1a; 幼儿表示自己适合做5宫格 第一次AI生成九宫格数独python代码 【教学类-43-03】20231229 N宫格数独3.0&#xff08;n1、2、3、4、6、8、9&#xff09; &#xff08;ChatGPT AI对话大师生成&#xff09;-CSDN博客文章浏览阅读162次&…

代码随想Day52 | 300.最长递增子序列、674. 最长连续递增序列、718. 最长重复子数组

300.最长递增子序列 这道题目的重点在于动态数组的定义 dp[i]&#xff1a;以nums[i]为结尾的最长递增子序列&#xff0c;因为这样定义可以进行递推&#xff1b; 递推&#xff1a;j从0-i进行对比&#xff0c;如果nums[i]大于nums[j]&#xff0c;dp[i]dp[j]1&#xff1b; 初始化…

CSS3学习之01

box-sizing: border-box&#xff1a;width是整体的大小 content-box&#xff1a;width是内容区大小 flex box弹性布局 弹性布局子元素通常在同一行内显示。 flex-direction&#xff1a;布局内子元素的排列方式 row&#xff1a;默认从左到右 row-reverse&#xff1a;从右到…

用例状态

章节目录&#xff1a; 一、用例状态类型二、passed三、failed四、error五、xfail六、结束语 一、用例状态类型 用例执行完成后&#xff0c;每条用例都有自己的状态&#xff0c;常见的状态有&#xff1a; passed&#xff1a;测试通过。failed&#xff1a;断言失败。error&#x…

【二叉树】【DFS】104.二叉树的最大深度

题目 法1&#xff1a;DFS class Solution {public int maxDepth(TreeNode root) {if (root null) {return 0;} else if (root.left null && root.right null) {return 1;} else {return Math.max(maxDepth(root.left), maxDepth(root.right)) 1;}} }

深入理解Dockerfile —— 筑梦之路

FROM 基础镜像 可以选择现有的镜像&#xff0c;比如centos、debian、apline等&#xff0c;特殊镜像scratch&#xff0c;它是一个空镜像。 如果你以 scratch 为基础镜像的话&#xff0c;意味着你不以任何镜像为基础&#xff0c;接下来所写的指令将作为镜像第一层开始存在。 不…

英飞凌TC3xx之一起认识GTM系列(四)如何实现GTM与GPIO关联的配置(ATOM/TIM实例)

英飞凌TC3xx之一起认识GTM系列(四)说一说GTM的实现 1 各系列芯片的子模块集成能力2 TC38x芯片的子模块连接性总览3 GTM到GPIO的连接3.1 GTM对外输出时钟信号3.2 GTM输出到端口配置寄存器TOUTSEL3.3 时钟输出选择寄存器3.4 应用举例4 GPIO到GTM的连接4.1 Port到GTM的端口配置寄…

webpack打包批量替换路径(string-replace-webpack-plugin插件)

string-replace-webpack-plugin 是一个用于在 webpack 打包后的文件中替换字符串的插件。它可以用于将特定字符串替换为其他字符串&#xff0c;例如将敏感信息从源代码中移除或对特定文本进行本地化处理。比如文件的html、css、js中的路径地址想批量更改一下 http://localhost:…

【2023年终总结】纵是一路仆仆风尘,也莫忘了仰头

文章目录 1. 写在前面2. 关于生活3. 关于工作4. 关于以后 【作者主页】&#xff1a;吴秋霖 【作者介绍】&#xff1a;Python领域优质创作者、阿里云博客专家、华为云享专家。长期致力于Python与爬虫领域研究与开发工作&#xff01; 【作者推荐】&#xff1a;对JS逆向感兴趣的朋…

搭建flink集群 —— 筑梦之路

Apache Flink 是一个框架和分布式处理引擎&#xff0c; 用于在无边界和有边界数据流上进行有状态的计算。 Flink 能在所有常见集群环境中运行&#xff0c;并能以内存速度和任意规模进行计算。 Flink并没有依靠自身实现所有分布式系统需要解决的问题&#xff0c; 而是在已有集群…

系列十一、解压文件到指定目录

一、解压文件到指定目录 1.1、需求 Linux的/opt目录有一个文件zookeeper-3.4.11.tar.gz&#xff0c;我现在想把该文件解压至/usr/local/目录&#xff0c;那么应该怎么做呢&#xff1f; 语法&#xff1a;tar -zxvf xxx -C /usr/local/ tar -zxvf zookeeper-3.4.11.tar.gz -C /u…

【一致性】角色 - 表情差异生成 【1】

原理&#xff1a;通过segment 局部重绘 可以根据lora 产生面部表情图片 模型&#xff1a;sam_vit_h_4b8939.pth 导入图片到segment 开启&#xff1a;Enable GroundingDINO GroundingDINO Detection Prompt &#xff1a;输入 face 然后点击&#xff1a;Preview Segmentation …

ES6的默认参数和rest参数

✨ 专栏介绍 在现代Web开发中&#xff0c;JavaScript已经成为了不可或缺的一部分。它不仅可以为网页增加交互性和动态性&#xff0c;还可以在后端开发中使用Node.js构建高效的服务器端应用程序。作为一种灵活且易学的脚本语言&#xff0c;JavaScript具有广泛的应用场景&#x…

使用Promise.all来并行调用多个异步函数;依次同步调用函数

场景&#xff1a; 在一个 vue页&#xff0c;有个form表单数据需要使用到三个后端接口返回的数据&#xff08;常见的就是详情回显&#xff0c;需要下拉数据&#xff09;&#xff0c;要求拿到三个接口返回的数据后&#xff0c;再赋值给表单form。 总结&#xff1a;将方法从同步执…

基于遗传算法的双层规划,基于ga的双层规划

目录 背影 遗传算法的原理及步骤 基本定义 编码方式 适应度函数 运算过程 代码 结果分析 完整代码: 基于遗传算法的双层规划,基于ga的双层规划(代码完整,数据齐全)资源-CSDN文库 https://download.csdn.net/download/abc991835105/88674651 背影 基于遗传算法的双层规划…