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)

前端展示:

相关推荐
喵个咪1 分钟前
开箱即用的 GoWind Admin|风行,企业级前后端一体中后台框架:深度解析 Wire 依赖注入集成实践
后端·go
回家路上绕了弯1 分钟前
代码的三大核心素养:如何同时兼顾可维护性、可扩展性、可测试性
分布式·后端
快手技术3 分钟前
入围AA总榜Top 10,Non-Reasoning Model榜单第一!KAT-Coder-Pro V1 新版本踏浪归来!
前端·后端·前端框架
小坏讲微服务4 分钟前
Spring Boot4.0整合RabbitMQ死信队列详解
java·spring boot·后端·rabbitmq·java-rabbitmq
苏三说技术6 分钟前
工作中最常用的6种缓存
后端
tc&34 分钟前
Kamailio SIP脚本编程核心概念总结
后端·kamailio
考虑考虑36 分钟前
maven项目使用指定JDK版本打包
java·后端·maven
鸽鸽程序猿1 小时前
【项目】【抽奖系统】查询中奖记录
java·spring
咕白m6251 小时前
使用 C# 设置 Word 段落对齐样式
后端·c#
Kiri霧1 小时前
Go切片详解
开发语言·后端·golang