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更多功能仍在完善...

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/275635.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/275635.shtml
英文地址,請注明出處:http://en.pswp.cn/news/275635.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

你不知道的 Chrome DevTools 玩法

大家好,我是若川。今天再分享一篇 chrome devtools 的文章。之前分享過多篇。Chrome DevTools 全攻略!助力高效開發 前端容易忽略的 debugger 調試技巧?筆者在前段時間的開發時,需要通過 Chrome DevTools來分析一個接口,調試中發…

matlab擬合四次函數表達式,用matlab編寫程序求以冪函數作基函數的3次、4次多項式的最小二乘曲線擬合,畫出數據散點圖及擬合曲線圖...

共回答了18個問題采納率:83.3%x[0.0 0.1 0.2 0.3 0.5 0.8 1.0]; %輸入數組>> y[1.0 0.41 0.50 0.61 0.91 2.02 2.46];>> f1inline(poly2sym(polyfit(x,y,3))); %polyfit擬合得到系數,poly2sym由系數得到多項式,inline轉換內聯函數>> f2inline(pol…

排版人員 快速排版_選擇排版前應了解的事項

排版人員 快速排版Design is everywhere, and with design comes text and the content that you’re trying to reach the user with. But before creating your design and choosing what font you want to use, there are some things you should know that will help you a…

matlab光順拐點,基于MATLAB的最大誤差雙圓弧逼近曲線的算法及實現.pdf

基于MATLAB的最大誤差雙圓弧逼近曲線的算法及實現.pdf第31卷第6期 基于MⅢB的最大誤差雙圓弧逼近曲線的算法及實現文章編號:1004—2539120町】06一唧一∞基于MAⅡ.AB的最大誤差雙圓弧逼近曲線的算法及實現淮海工學院機械工程系,扛蘇連云港笠a…

若川誠邀你加源碼共讀群,幫助更多人學會看源碼~

小提醒:若川視野公眾號面試、源碼等文章合集在菜單欄中間【源碼精選】按鈕,歡迎點擊閱讀,也可以星標我的公眾號,便于查找。回復pdf,可以獲取前端優質書籍。最近我創建了一個源碼共讀的前端交流群,希望嘗試幫…

體育木地板的施工

文章來源:http://www.bjfhrd.com 體育木地板上有許多暗門,以制造特殊效果,如火焰、煙霧,使房屋、樹木、山或人物在一瞬間出現或銷售。這種特殊的要求,對于專業體育木地板德施工就有了一定的要求。 專業體育木地板施工&…

imessage_重新設計iMessage以獲得更好的用戶體驗— UX案例研究

imessage體驗設計 (EXPERIENCE DESIGN) Communication is a vital part of our everyday lives. We almost don’t even have to think about it. With social media and our devices as prime tools, we’re constantly finding new ways to stay connected. Instant messagin…

mysql 生成時間軸,MYSQL 時間軸數據 獲取同一天數據的前3條

創建表數據CREATE TABLE praise_info (id bigint(20) NOT NULL AUTO_INCREMENT COMMENT ID,pic_id varchar(64) DEFAULT NULL COMMENT 圖片ID,created_time datetime DEFAULT CURRENT_TIMESTAMP COMMENT 創建時間,PRIMARY KEY (id),KEY pic_id (pic_id) USING BTREE) ENGINEInn…

【招聘】永輝招前端

大家好,我是若川。這應該招聘第六期。友情幫好友宣傳招聘。之前在跟各位讀者朋友分享下公眾號運營策略 文中提到 公眾號主旨是幫助5年內前端小伙伴提升,找到好工作,所以有招聘文。上海 高級前端 本科 25k-50k 16薪崗位職責:1、…

C語身教程第三章: C說話挨次籌算匹面(1)

C說話挨次籌算本課先容C說話挨次籌算的根基要領和根基的挨次語句。從挨次流程的角度來看,挨次可以分為三種根基構造, 即挨次構造、分支構造、循環構造。 這三種根基構造可以組玉成部的種種重年夜挨次。C說話供給了多種…

插圖 引用 同一行兩個插圖_插圖的目的

插圖 引用 同一行兩個插圖If you’re a designer in tech you’ve likely come across them. Any search for UI or product design on Dribbble will yield at least a few. Amid the sea of pastel blues and pinks, accented neon purples and gamboge yellows, these facel…

php 轉碼iconv,PHP iconv()函數轉字符編碼的問題(轉)

在php函數庫有一個函數:iconv(),iconv函數庫能夠完成各種字符集間的轉換,是php編程中不可缺少的基礎函數庫。最近在做一個小偷程序,需要用到iconv函數把抓取來過的utf-8編碼的頁面轉成gb2312,發現只有用iconv函數把抓取…

VSCode 竟然可以無縫調試瀏覽器了!

大家好,我是若川。今天周末,分享一篇相對比較簡單的文章。學習源碼系列、面試、年度總結、JS基礎系列。2021-07-16 微軟發布了一篇博客專門介紹了這個功能,VSCode 牛逼!在此之前,你想要在 vscode 內調試 chrome 或者 e…

最少的編碼

Knowing how to code HTML email can bring you many opportunities, such as working as a digital designer, collaborating with front end developers, finding freelancing projects.知道如何對HTML電子郵件進行編碼可以為您帶來許多機會,例如擔任數字設計師&a…

Hulu CEO預計網站本年營收將達5億美元

網易科技訊 3月2日動靜,據國外媒體報道,美國在線視頻網站Hulu CEO杰森吉拉爾(Jason Kilar)明天不日發揮分析,Hulu本年告白及訂閱營收將達5億美元,是去年的兩倍。吉拉爾周一在由互聯網告白局舉辦的“2011年年…

webRTC——瀏覽器里的音視頻通話

背景 webRTC是Google在2010年收購GIP公司之后獲得的一項技術。如下圖所示,它提供了音視頻的采集、處理(降噪,回聲消除等)、編解碼、傳輸等技術。webRTC的目標是實現無需安裝任何插件就可以通過瀏覽器進行P2P的實時音視頻通話及文件傳輸,來看看…

面對 this 指向丟失,尤雨溪在 Vuex 源碼中是怎么處理的

1. 前言大家好,我是若川。好久以前我有寫過《面試官問系列》,旨在幫助讀者提升JS基礎知識,包含new、call、apply、this、繼承相關知識。其中寫了 面試官問:this 指向 文章。在掘金等平臺收獲了還算不錯的反饋。最近有小伙伴看我的…

轉:Python: threading.local是全局變量但是它的值卻在當前調用它的線程當中

原文地址:http://www.cnblogs.com/fengmk2/archive/2008/06/04/1213958.html 在threading module中,有一個非常特別的類local。一旦在主線程實例化了一個local,它會一直活在主線程中,并且又主線程啟動的子線程調用這個local實例時&#xff0c…

matlab的邊緣檢測方法,常用圖像邊緣檢測方法及Matlab研究

2011 年 2 月 15 日第 34 卷第 4 期 現代電子技術 Modern Electronics Technique Feb. 2011 Vol. 34 No. 4 常用圖像邊緣檢測方法及 Matlab 研究 韋  煒 (西安文理學院 , 陜西 西安   710065) 摘  要 :邊緣檢測在數字圖像處理中有著重要的作用。為了在實際應用中能夠選擇最佳…

單選按鈕步驟流程向導 js_創建令人愉快的按鈕的6個步驟

單選按鈕步驟流程向導 jsThere is no modern interactive UI without buttons. They are an fundamental part of every digital solution. Learn how to improve the style of your buttons and delight users with perfect style.沒有按鈕,就沒有現代的交互式UI。…