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)

前端展示:

相关推荐
_Evan_Yao9 小时前
Redis 缓存穿透、击穿、雪崩,一次讲清!
java·spring·mybatis
王中阳Go10 小时前
两个入口答案不一致先别调模型:6 行入口口径对账表(附脚本)
人工智能·后端·python·大语言模型·1024程序员节
码事漫谈11 小时前
消除AI幻觉,普通人能做的五件事
后端
金銀銅鐵13 小时前
[Java] 用 GUI 展示 EnumSet 增减元素时的内部变化(下)
java·后端·ai编程
Mk5987814 小时前
给 Agent 装上对话框 —— AgentScope-Java 接入 Spring Boot 与 SSE 流式实战
后端
付威202314 小时前
从 Loop 到 Runtime:rpi Agent Loop 与 Cordis 的边界、取舍与组合
后端
IT_陈寒14 小时前
Redis的LRU淘汰策略坑了我一整天
前端·人工智能·后端
paopaokaka_luck15 小时前
心理咨询管理系统(WebSocket实时沟通、基于用户的协同过滤、 ECharts多维分析、 预约业务流程、预约校验与定时处理)
java·vue.js·spring boot·mysql·spring·echarts·1024程序员节
考虑考虑16 小时前
JDK26的JEP 500属性
java·后端·java ee