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)

前端展示:

相关推荐
k***82518 小时前
springboot整合libreoffice(两种方式,使用本地和远程的libreoffice);docker中同时部署应用和libreoffice
spring boot·后端·docker
tan180°8 小时前
Linux网络TCP(上)(11)
linux·网络·c++·后端·tcp/ip
l***46688 小时前
springboot使用redis
spring boot·redis·后端
嘟嘟w8 小时前
Spring 核心注解深度分析
java·后端·spring
武子康8 小时前
大数据-160 Apache Kylin Cube 实战:从建模到构建与查询(含踩坑与优化)
大数据·后端·apache kylin
q***96589 小时前
深入解析Spring Boot中的@ConfigurationProperties注解
java·spring boot·后端
Jamesvalley9 小时前
flask处理所有logging
后端·python·flask
databook10 小时前
别急着转投 Polars!Pandas 3.0 带着“黑科技”杀回来了
后端·python·数据分析
烟袅10 小时前
为什么调用 OpenAI Tools 后,还要再请求一次大模型?——从代码看 LLM 工具调用的本质
后端·python·llm
e***09610 小时前
SpringBoot下获取resources目录下文件的常用方法
java·spring boot·后端