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

Springcloud项目-前后端联调(一)

项目采用SpringCloud整体构建,nacos作为注册中心,Mysql和Redis进行数据存储,整体项目类似于平时使用的出行APP,idea2023编写后端,vscode编写前端

后端代码先前已经编写完毕

这部分功能主要是通过前端输入出发地和目的地之后调用后端接口计算得到总价返回到前端进行展示:

以下是前端界面,前端采用Vue框架搭建,可以使用element-ui美化界面

前端输入出发地和目的地调用高德地图提供的API计算得到出发地经纬度和目的地经纬度

可到高德地图API注册得到key

获取成功之后可以到console.log(F12查看控制台)打印获取到的经纬度,看是否能获取到

前后端联调:

后端开启Nacos后,启动以下两个微服务

前端采用npm run dev运行:

联调时可能存在跨域问题:后端可以加上@CrossOrigin(前端可以有其他解决方法)

后端接口参数进行了封装,包含以下6个参数:

前端调用三方接口得到经纬度之后加上cityCode,vehicleType共6个参数传递到后端

后端计算得到总价(与计价规则有关)返回到前端:

控制台展示:

计价规则接口:城市代码,车辆类型,起步费用,起步公里数,每公里多少钱,每分钟多少钱(可提前设定存入Mysql)

前端展示:

相关文章:

Springcloud项目-前后端联调(一)

项目采用SpringCloud整体构建,nacos作为注册中心,Mysql和Redis进行数据存储,整体项目类似于平时使用的出行APP,idea2023编写后端,vscode编写前端 后端代码先前已经编写完毕 这部分功能主要是通过前端输入出发地和目的地之后调用…...

洛谷P1525 [NOIP2010 提高组] 关押罪犯(种子并查集基础)

题目链接:P1525 [NOIP2010 提高组] 关押罪犯 - 洛谷 | 计算机科学教育新生态 题目难度:普及+/提高 题目描述: S 城现有两座监狱,一共关押着 N 名罪犯,编号分别为 1∼N,有m对罪犯,每对之间有仇恨值,问如何分配罪犯使得现 Z 市长要看到其中最大的矛盾值最小。 输入格…...

【算法刷题指南】模拟

前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。点击跳转到网站 🌈个人主页: 南桥几晴秋 🌈C专栏: 南桥谈C 🌈C语言专栏: C语言学习系…...

学习笔记078——Java Properties类使用详解

文章目录 概述常见方法写入读取遍历 概述 Properties 继承于 Hashtable。表示一个持久的属性集,属性列表以key-value的形式存在,key和value都是字符串。 Properties 类被许多Java类使用。例如,在获取环境变量时它就作为System.getPropertie…...

若依使用 Undertow 替代 Tomcat 容器

文章目录 需求提出应用场景解决思路注意事项完整代码第一步:在 ruoyi-framework/pom.xml 文件中进行依赖配置第二步:修改 application.yml 配置文件第三步:修改文件上传工具类 FileUploadUtils.java 运行结果 需求提出 在开发若依框架的前后…...

多输入多输出 | Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入多输出预测

多输入多输出 | Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入多输出预测预测效果基本介绍模型背景程序设计参考资料 预测效果 基本介绍 Matlab实现WOA-CNN鲸鱼算法优化卷积神经网络多输入…...

Elasticsearch:基础概念

一、什么是Elasticsearch Elasticsearch是基于 Apache Lucene 构建的分布式搜索和分析引擎、可扩展数据存储和矢量数据库。它针对生产规模工作负载的速度和相关性进行了优化。使用 Elasticsearch 可以近乎实时地搜索、索引、存储和分析各种形状和大小的数据。Elasticsearch 是…...

Spring MVC的@ResponseBody与@RequestBody

ResponseBody注解用于将Controller的方法返回的对象,通过springmvc提供的HttpMessageConverter接口转换为指定格式的数据如:json,xml等,通过Response响应给客户端。 RequestBody注解用于读取http请求的内容(字符串),通过springmv…...

智能商业分析 Quick BI

Quick BI 是阿里云提供的一款智能商业分析(BI)工具,旨在帮助企业快速获取业务洞察、优化决策过程、提升数据分析效率。通过强大的数据可视化和分析功能,Quick BI 能够帮助用户轻松连接多种数据源、创建多维度的报表和仪表盘&#…...

LUA基础语法

目录 变量篇 算数运算符 条件分支语句与循环语句 函数 表 Table 全局变量与本地变量 协程 元表 面向对象(封装,继承,多态) 常用自带库 垃圾回收 变量篇 print("hello") print("lua") --注释 --[[…...

SpringBoot的pom.xml文件中,scope标签有几种配置?

1.compile(默认) 含义:表示该依赖在项目的所有阶段(编译、测试、运行)都需要。 当你依赖一个库,并且这个库是你项目的核心部分,比如 Spring Boot 的spring - boot - starter - web&#xff0c…...

Leetcode729: 我的日程安排表 I

题目描述: 实现一个 MyCalendar 类来存放你的日程安排。如果要添加的日程安排不会造成 重复预订 ,则可以存储这个新的日程安排。 当两个日程安排有一些时间上的交叉时(例如两个日程安排都在同一时间内),就会产生 重复…...

青少年编程与数学 02-006 前端开发框架VUE 02课题、创建工程

青少年编程与数学 02-006 前端开发框架VUE 02课题、创建工程 一、开发环境(一)WebStorm安装WebStorm配置WebStorm安装中文语言包安装 Translation插件 (二)Node.jsWindows系统安装Node.jsLinux系统安装Node.jsNode.js与Vue.js的关…...

Redis的生态系统和社区支持

Redis的生态系统和社区支持 1. Redis 生态系统 1.1 Redis核心 Redis 是一个高性能的内存存储系统,支持丰富的数据结构(如字符串、列表、集合、哈希和有序集合)。它的核心提供了: 高性能数据存储:单线程模型支持每秒数百万级别的操作。多种数据结构:适用于多样化场景,如…...

Tomcat解析

架构图 核心功能 Tomcat是Apache开源的轻量级Java ServletServlet容器,其中一个Server(Tomcat实例)可以管理多个Service(服务),一个Service包含多个Connector和一个Engine,负责管理请求到应用的…...

UML之组合与聚合

关联和链接关系在很多情况下是对称的,即被关联的两个类都有以自己为源端对方为目标端的角色存在,而且角色与源端类的属性是等价的,即在关联一端的关联端(角色)等价于另外一端的属性。例如,在下图中&#xf…...

数据结构理论篇(期末突击)

找往期文章包括但不限于本期文章中不懂的知识点: 个人主页:我要学编程(ಥ_ಥ)-CSDN博客 所属专栏: 学校课程突击 下面均是为了应付学校考试所用,如果有涉及部分知识点下面未说明,可以去我的数据结构专栏看看或者自行在…...

《一文读懂PyTorch核心模块:开启深度学习之旅》

《一文读懂PyTorch核心模块:开启深度学习之旅》 一、PyTorch 入门:深度学习的得力助手二、核心模块概览:构建深度学习大厦的基石三、torch:基础功能担当(一)张量操作:多维数组的神奇变换(二)自动微分:梯度求解的幕后英雄(三)设备管理:CPU 与 GPU 的高效调度四、to…...

摆脱Zotero存储限制:WebDAV结合内网穿透打造个人文献管理云平台

文章目录 前言一、Zotero安装教程二、群晖NAS WebDAV设置三、Zotero设置四、使用公网地址同步Zotero文献库五、使用永久固定公网地址同步Zotero文献库 前言 如果你是科研工作者、学生或者任何需要频繁处理大量学术资料的人士,你一定对如何高效管理和引用文献感到头…...

Flutter封装一个三方ViewPager学习

Flutter如何实现一个增强的 PageView,支持自定义页面切换动画。 前置知识点学习 CrossAxisAlignment CrossAxisAlignment 是 Flutter 中用于控制布局子组件在交叉轴(cross axis)方向上的对齐方式的一个枚举类。它主要在 Flex 布局模型中使…...

服务器数据恢复—离线盘数超过热备盘数导致raidz阵列崩溃的数据恢复

服务器数据恢复环境&故障: 一台配有32块硬盘的服务器在运行过程中突然崩溃不可用。经过初步检测,基本上确定服务器硬件不存在物理故障。管理员重启服务器后问题依旧。需要恢复该服务器中的数据。 服务器数据恢复环境: 1、将服务器中硬盘…...

nginx-nginx的缓存集成

缓存的概念 缓存就是数据交换的缓冲区,被称作cache,访用户想要获取数据时,就会先从缓存中去查询数据,如果缓存中有就会直接返回给用户,若果缓存中没有,则会发出请求从服务器中重新查询数据,将数…...

【Vim Masterclass 笔记01】Section 1:Course Overview + Section 2:Vim Quickstart

文章目录 Section 1:Course Introduction 课程概述S01L01 Course Overview 课程简介课程概要 S01L02 Course Download 课程资源下载S01L03 What Vim Is and Why You Should Learn It 何为 Vim?学来干啥?1 何为 Vim2 为何学 Vim Section 2&…...

【数据库系列】Spring Boot 中使用 MyBatis 详细指南

一、基础介绍 1.1 MyBatis MyBatis 是一款优秀的持久层框架,它支持定制化 SQL、存储过程以及高级映射。MyBatis 避免了几乎所有的 JDBC 代码和手动设置参数以及获取结果集。MyBatis 可以使用简单的 XML 或注解来配置和映射原生信息,将接口和 Java 的 P…...

Azure Airflow 中配置错误可能会使整个集群受到攻击

网络安全研究人员在 Microsoft 的 Azure 数据工厂 Apache Airflow 中发现了三个安全漏洞,如果成功利用这些漏洞,攻击者可能会获得执行各种隐蔽操作的能力,包括数据泄露和恶意软件部署。 “利用这些漏洞可能允许攻击者以影子管理员的身份获得…...

Python跨年烟花

目录 系列文章 写在前面 技术需求 完整代码 下载代码 代码分析 1. 程序初始化与显示设置 2. 烟花类 (Firework) 3. 粒子类 (Particle) 4. 痕迹类 (Trail) 5. 烟花更新与显示 6. 主函数 (fire) 7. 游戏循环 8. 总结 注意事项 写在后面 系列文章 序号直达链接爱…...

【代码】Python|Windows 批量尝试密码去打开加密的 Word 文档(docx和doc)

文章目录 前言完整代码Githubdocxdoc 代码解释1. msoffcrypto 方法(用于解密 .docx 文件)read_secret_word_file 函数密码生成与解密尝试try_decrypt_file 函数 2. comtypes 方法(用于解密 .doc 文件)read_secret_word_file 函数注…...

java开发中注解汇总​​

注解作用位置注意mybatis Data Getter Setter ToString EqualsAndHashCode AllArgsConstructor NoArgsConstructor Data 代替:无参构造,get,set,toString,hashCode,equals Getter Setter 可放在类和方法上&…...

C# 设计模式(结构型模式):外观模式

C# 设计模式(结构型模式):外观模式 (Facade Pattern) 在复杂系统中,往往会涉及到多个子系统、模块和类。这些子系统的接口和功能可能会让使用者感到困惑和复杂。在这种情况下,我们可以使用外观模式(Facade…...

PowerShell 常见问题解答

PowerShell 是微软开发的一种功能强大的命令行界面和脚本语言,广泛应用于系统管理和自动化任务。以下是一些使用 PowerShell 时常见的问题及其解决方法。 什么是 PowerShell? PowerShell 是基于 .NET 的命令行界面(CLI)和脚本语言…...