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)

前端展示:

相关推荐
Victor35614 分钟前
MongoDB(36)如何使用聚合进行分组?
后端
天远云服16 分钟前
天远企业司法认证API对接实战:PHP构建B2B供应链合规防火墙
大数据·开发语言·后端·node.js·php
Victor35617 分钟前
MongoDB(37)如何使用聚合进行排序?
后端
222you44 分钟前
Ubuntu当中的Docker安装和镜像管理
ubuntu·spring cloud·docker
IT_陈寒1 小时前
JavaScript 性能优化的5个隐藏技巧:90%开发者都不知道的实战方案!
前端·人工智能·后端
AlphaNil1 小时前
.NET + AI 跨平台实战系列(三):云端多模态API实战——用GPT-4V让App看懂世界
人工智能·后端·.net·maui
6+h2 小时前
【Spring】深度剖析IoC
java·后端·spring
程序员牛奶2 小时前
硬核干货!一口气搞懂 Java AQS
后端
初次攀爬者2 小时前
Spring中Bean的生命周期
后端·spring
PPPPickup2 小时前
深信服公司---java实习生后端一二面询问
java·后端·ai