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)

前端展示:

相关推荐
hqxstudying20 分钟前
java依赖注入方法
java·spring·log4j·ioc·依赖
春生野草1 小时前
关于SpringMVC的整理
spring
martinzh1 小时前
Spring AI 项目介绍
后端
Bug退退退1232 小时前
RabbitMQ 高级特性之重试机制
java·分布式·spring·rabbitmq
前端付豪2 小时前
20、用 Python + API 打造终端天气预报工具(支持城市查询、天气图标、美化输出🧊
后端·python
爱学习的小学渣2 小时前
关系型数据库
后端
武子康2 小时前
大数据-33 HBase 整体架构 HMaster HRegion
大数据·后端·hbase
前端付豪2 小时前
19、用 Python + OpenAI 构建一个命令行 AI 问答助手
后端·python
凌览2 小时前
斩获 27k Star,一款开源的网站统计工具
前端·javascript·后端
全栈凯哥2 小时前
02.SpringBoot常用Utils工具类详解
java·spring boot·后端