javascript
ESMap+Html5+SpringBoot+FastDFS实现导航导购App
github鏈接
項目實現的簡要概述
服務器部分
測試階段使用的是雙系統的開發模式,在Linux服務器上部署了輕量級分布式文件系統fastdfs,且整合了高性能的HTTP和反向代理服務器nginx;在本地的服務器上使用Spring Boot框架,使用其內置的tomcat作為web服務器。兩者的結合通過Spring Boot中的組件以及依賴實現。在項目正式上線后會將本地服務器的內容打包成jar包發布到Linux服務器中。 項目的開發使用的是領域模型中的貧血模型,可以將整個項目分為controller,service,mapper三層,POJO作為載體,mapper作為數據持久層,service作邏輯處理,controller作請求處理。向前端提供了掃碼定位,獲取商品類目列表,通過商品類目查詢對應商品,通過商品名稱查詢商品信息等接口。
數據庫部分
數據庫使用關系型數據庫管理系統mySQL,在其中建立了店鋪,商品,商品類目三個表,通過其中的特定字段使兩表關聯,從而實現了簡單的聯表查詢。
前端部分
App前端的開發使用的是輕量級的HBuilder編輯器,解決了碎片化的語法定義和傳統App開發的臃腫性問題,在本App中融合了html5,css,JavaScript,jQuery等語言,主要功能為地圖的展示,以及適時地向服務器發送請求。
地圖部分
地圖的繪制使用的是ESMap提供的地圖編輯器進行繪制的,實現了對地圖的房間,POI,路徑,樓層,主題的自定義,使地圖開發過程變得高效而靈活,可以充分考慮業主與開發商的需求。
功能介紹
(1)搜索定位
(2)掃碼定位
(3)圖像識別店鋪商標定位
(4)導航
(5)導購
數據庫
區域表
這里的room表示商店中的一個店鋪,或者是超市中的一個區域
商品表
商品類目表
后端結構與接口
controller包提供如下接口:
(1)searchRoom 掃描店鋪二維碼后傳給后端id,后端從數據庫中查詢對應的店鋪,并返回給前端
(2)searchProduct 掃描商品二維碼后傳給后端id,后端從數據庫中查詢對應的商品,并返回給前端
(3)productCategoryList 獲取商品類目列表
(4)productList 傳入商品類目,查詢該類目的所有商品
(5)productInfo 通過商品的名稱查詢商品的所有信息
測試效果
導航模塊地圖預覽 [以華發一角為例]
導航功能
搜索功能
掃碼定位功能
導購模塊地圖預覽
商品搜索功能
導購功能
App更多功能仍在完善...
總結
以上是生活随笔為你收集整理的ESMap+Html5+SpringBoot+FastDFS实现导航导购App的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 前端学习(3234):react生命周期
- 下一篇: Android 四大组件之 Activi