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)

前端展示:

相关推荐
Lisonseekpan1 小时前
Java Stream 流式编程
java·后端
程序员小假1 小时前
运行时有出现过什么异常?
java·后端
凤山老林1 小时前
还在用JDK8?JDK8升级JDK11:一次价值千万的升级指南
java·开发语言·jvm·spring boot·后端·jdk
Java之路行者2 小时前
Spring Boot防重复提交实战:让接口安全提升200%!
spring boot·后端·安全
rengang662 小时前
134-Spring AI Alibaba OceanBase 向量数据库示例
java·人工智能·spring·oceanbase·rag·spring ai·ai应用编程
陈随易2 小时前
改变世界的编程语言MoonBit:配置系统介绍(下)
前端·后端·程序员
知其然亦知其所以然2 小时前
SpringAI + ONNX:打造不花钱、不联网的向量引擎!
后端·spring·aigc
priority_key2 小时前
TCP 如何保证传输的可靠性?
服务器·网络·后端·网络协议·tcp/ip
一语长情3 小时前
Go高并发背后的功臣:Goroutine调度器详解
后端·架构·go
Lemon程序馆3 小时前
Kafka | Broker 工作原理
后端·kafka·消息队列