全棧篇主要介紹一些工作或開(kāi)發(fā)流程技巧，通過(guò)這些技巧來(lái)找編程思路或者搞清楚工作內(nèi)容，讓自己知道如何去做東西，該怎么著手去開(kāi)發(fā)一個(gè)網(wǎng)站（系統(tǒng)）。經(jīng)常有人說(shuō)，自己想開(kāi)發(fā)一個(gè) WebGIS 系統(tǒng)，但不知道怎么做的情況，在這篇章節(jié)，你就可以找到你想要的答案，希望能對(duì)你有幫助。

怎樣才算一個(gè)完整的系統(tǒng)

一個(gè)系統(tǒng)，要多復(fù)雜就可以有多復(fù)雜，要多少功能就可以有多少功能，主要在于產(chǎn)品設(shè)計(jì)和技術(shù)實(shí)現(xiàn)上。完整的系統(tǒng)應(yīng)該分為兩個(gè)部分：前端+后端。前端可能是PC端軟件、Web瀏覽器端、手機(jī)端H5、App、小程序、快應(yīng)用等，是一個(gè)有界面可人機(jī)交互的終端。后端則是接口服務(wù)，跑在服務(wù)器上的，提供數(shù)據(jù)接口，計(jì)算分析等。

但一個(gè)最簡(jiǎn)單的完整系統(tǒng)可以分為：

·后端：簡(jiǎn)單增刪查改表數(shù)據(jù)

·前端：有頁(yè)面（界面），前端接口調(diào)用增刪查改接口展示數(shù)據(jù)和交互

簡(jiǎn)單 WebGIS 系統(tǒng)技術(shù)實(shí)現(xiàn)方案

為什么編程語(yǔ)言那么多，框架那么多，技術(shù)棧選擇那么多，都是因?yàn)槟承╊I(lǐng)域或是業(yè)務(wù)場(chǎng)景的解決方案不是最好的，才會(huì)有人去研究和探討更好的解決方案。有些技術(shù)棧是適合做企業(yè)級(jí)的復(fù)雜系統(tǒng)，有些技術(shù)?？梢杂脕?lái)快速開(kāi)發(fā)簡(jiǎn)單的系統(tǒng)。這里列舉一下可以用來(lái)實(shí)現(xiàn)WebGIS系統(tǒng)的技術(shù)棧：

（1）后端

Java

Java 無(wú)可爭(zhēng)議，可做簡(jiǎn)單的網(wǎng)站，更能做復(fù)雜的企業(yè)級(jí)系統(tǒng)。數(shù)據(jù)庫(kù)的話選擇有三種 MySQL/Oracle/PostgreSQL，MySQL 開(kāi)源免費(fèi)好用，是很多公司的選擇。Oracle 的話和ArcGIS Server搭配比較好，官方也有很大解決方案。PostgreSQL的話看個(gè)人喜好了，也是免費(fèi)的。個(gè)人認(rèn)為如果不選擇ArcGIS Server的話，建議選擇MySQL，對(duì)新手來(lái)說(shuō)，也比較易學(xué)。有很多開(kāi)源免費(fèi)的簡(jiǎn)單快速開(kāi)發(fā)的框架，比如JFinal，很小很輕量，可以快速用來(lái)搭建簡(jiǎn)單的系統(tǒng)。

.NET

這個(gè)不多介紹，熟悉的話可以選擇，不熟悉的話建議選擇Java路線是趨勢(shì)

Node.js

使用JavaScript來(lái)開(kāi)發(fā)后端，如果選擇了Node.js，那就是JavaScript全棧搞定了，對(duì)那種學(xué)不好Java的同學(xué)來(lái)說(shuō)（學(xué)Java的難度和時(shí)間等代價(jià)非常高），推薦走Node.js路線。Node.js現(xiàn)在也有成熟的框架選擇，比如eggjs、nestjs，開(kāi)發(fā)框架的話有express、koa。 數(shù)據(jù)庫(kù)方面，node.js 因?yàn)槭荍avaScript開(kāi)發(fā)，所以天生和 MongoDB 這種

NoSQL數(shù)據(jù)庫(kù)搭配較好，對(duì)應(yīng)也有 MongoGIS 來(lái)處理地理數(shù)據(jù)。不過(guò)解決空間矢量數(shù)據(jù)的方案不如 MySQL 和 Oracle 多。

曾經(jīng)用 Node.js + MongoDB + LayUI 一天開(kāi)發(fā)完成并上線過(guò)一個(gè)網(wǎng)站，網(wǎng)站功能有：登錄注冊(cè)、注冊(cè)用戶審核、前臺(tái)商品列表展示、商品詳情頁(yè)面、后臺(tái)商品增刪查改（商品有富文本編輯框）、后臺(tái)商品列表查詢、前臺(tái)用戶留言反饋、后臺(tái)用戶留言反饋列表管理。說(shuō)這個(gè)目的為了說(shuō)明，簡(jiǎn)單的網(wǎng)站，Node.js快速開(kāi)發(fā)的效率很高。

（2）地圖服務(wù)器

除了超圖和中地?cái)?shù)碼的產(chǎn)品外，用的最多的是 ArcGIS Server 或者 GeoServer，區(qū)別就是 ArcGIS Server 商業(yè)收費(fèi)且成套比較貴（但很強(qiáng)大好用），GeoServer開(kāi)源免費(fèi)，基本

滿足一般的要求。選擇ArcGIS Server 的話一般都配套 ArcGIS API for JavaScript，選擇GeoServer更多的搭配OpenLayers 和 Leaflet。

（3）前端

前端就是Web網(wǎng)頁(yè)端的技術(shù)棧了，地圖JS庫(kù)的選擇很多，如ArcGIS API for JavaScript、OpenLayers 、 Leaflet、Mapbox、百度地圖API、高德地圖API、騰訊地圖API等。專業(yè)的

WebGIS 系統(tǒng)開(kāi)發(fā)更多的選擇是前三者（這里不包括超圖和中地的產(chǎn)品）。在第三章中，也介紹了常用的幾種地圖JS庫(kù)的特點(diǎn)區(qū)別，這里不再列舉了。

網(wǎng)頁(yè)端實(shí)現(xiàn)的話編程語(yǔ)言必然是 JavaScript、HTML/CSS 的天下，前端框架選擇的話有 Angular、React、Vue.js三種，如果未來(lái)兼容低版本瀏覽器，建議原生js和

jquery來(lái)開(kāi)發(fā)前端。有了各種限制要求，選擇就不多且比較明確了。如果需要開(kāi)發(fā)三維球展示的話，不使用其他公司的現(xiàn)場(chǎng)產(chǎn)品，可以了解嘗試一下開(kāi)源免費(fèi)的

CesiumJS，基于WebGL實(shí)現(xiàn)的三維地球，也有豐富的API。缺點(diǎn)就是不過(guò)低版本瀏覽器不兼容。

（4）綜上總結(jié)

·后端（mysql/Oracle/PostgreSQL + java 或 mongodb + nodejs 或 mysql + php等）

·前端（原生js、jquery或者三大框架/庫(kù)：React、Angular、Vue.js，地圖JS庫(kù)：OpenLayers、Leaflet、ArcGIS for JavaScript等）

·地圖服務(wù)（在線地圖：百度、高德、天地圖 或 切片地圖服務(wù)發(fā)布：ArcGIS或GeoServer等）

初學(xué)者選擇的話，優(yōu)先看自己熟悉后端編程語(yǔ)言的類型，如果是Java，那就建議選擇：Java + Mysql + 在線地圖/或選擇自己發(fā)布地圖服務(wù)。如果不懂后端，只懂前端，可以學(xué)習(xí)一下Node.js，然后選擇：Node.js + Mongodb + 在線地圖 的技術(shù)方案。這樣就可以開(kāi)發(fā)一個(gè)簡(jiǎn)單的完整的 WebGIS 系統(tǒng)了。地圖JS庫(kù)見(jiàn)第三節(jié)介紹，選擇自己喜歡的就可以。

如果你不懂后端，也不想學(xué)后端，只能模擬后端接口請(qǐng)求或者是寫(xiě)死數(shù)據(jù)，類似前面章節(jié)介紹開(kāi)發(fā)的臺(tái)風(fēng)路徑和地圖相冊(cè)Demo一樣。也可以用第4節(jié)中介紹的json-server來(lái)模擬假后端，但是沒(méi)有真正系統(tǒng)的效果。

說(shuō)說(shuō)我個(gè)人的可選方案：我算是個(gè)全棧開(kāi)發(fā)工程師了，擅長(zhǎng)前端開(kāi)發(fā)、可獨(dú)立開(kāi)發(fā)后端、移動(dòng)端APP（技術(shù)棧React Native、Ionic）、微信小程序、微信公眾號(hào)開(kāi)發(fā)等。

可以選擇的后端編程語(yǔ)言有Java、Node.js，Java我不是很熟練，不過(guò)對(duì)于做簡(jiǎn)單網(wǎng)站系統(tǒng)，應(yīng)用難度不高的東西是夠用的。數(shù)據(jù)庫(kù)選擇有Oracle、MySQL、MongoDB，都用得相對(duì)熟悉。前端的話技術(shù)棧通吃，隨意選擇。所以我一般這么考慮：搞清楚系統(tǒng)級(jí)別多大，需要滿足多大的用戶要求，功能特點(diǎn)是什么，WebGIS系統(tǒng)的話有沒(méi)有矢量數(shù)據(jù)的讀寫(xiě)存儲(chǔ)要求，沒(méi)什么限制優(yōu)先選擇 Node.js + MongoDB ，有限制就 Java + MySQL 。

開(kāi)發(fā)一個(gè)完整系統(tǒng)需要準(zhǔn)備什么

正常軟件開(kāi)發(fā)流程保護(hù)但不局限于：需求分析、原型設(shè)計(jì)、UI設(shè)計(jì)、需求評(píng)審、測(cè)試用例編寫(xiě)、開(kāi)發(fā)階段（前端后端并行）、接口測(cè)試/功能測(cè)試、回歸測(cè)試、交付上線。

大公司和小公司的流程差別可能比較大，一個(gè)嚴(yán)格的流程是為了把控質(zhì)量和進(jìn)度。這里只是簡(jiǎn)單提一下，但不細(xì)說(shuō)這些流程，目的只是讓新人了解這些而已。

如果你想一個(gè)人開(kāi)發(fā)一個(gè)完整的系統(tǒng)，至少有幾個(gè)步驟需要去做的。

（1）、弄清楚需求

就是需求分析，搞清楚要做什么，這個(gè)系統(tǒng)（產(chǎn)品）有什么功能，這些功能為了解決什么問(wèn)題。如果是別人找你做網(wǎng)站，一般要求對(duì)方給個(gè)需求文檔，需要做什么東西都有說(shuō)明，或者和對(duì)方口頭溝通清楚每個(gè)需求，自己列出需求清單出來(lái)。

（2）、功能設(shè)計(jì)

這里可以是原型設(shè)計(jì)和UI設(shè)計(jì)，功能點(diǎn)細(xì)節(jié)明確。作為個(gè)人開(kāi)發(fā)來(lái)說(shuō)，如果你不是一個(gè)真正的全棧開(kāi)發(fā)工程師，可能你搞不來(lái)這些東西。可以根據(jù)個(gè)人的實(shí)際能力來(lái)做這個(gè)步驟，如果你懂得原型設(shè)計(jì)軟件，可以自己畫(huà)原型，不然就用筆簡(jiǎn)單畫(huà)輪廓圖也可以；懂得UI設(shè)計(jì)就自己設(shè)計(jì)，不然就網(wǎng)上找別人的作為參考，只要功能明確要做成什么樣，UI圖的樣子都是找到類似的去參考的。如果都不行，就找一些網(wǎng)站模板去參考，模仿著修改。因?yàn)檫@個(gè)步驟，最大的好處是能幫助你思考怎么設(shè)計(jì)和開(kāi)發(fā)，整個(gè)網(wǎng)站的功能清單就很熟悉，改怎么做都決定好了，后期代碼編寫(xiě)就不需要花時(shí)間思考那么多。

網(wǎng)站模板網(wǎng)上也有很多可以參考，直接搜即可，UI圖資源有幾個(gè)網(wǎng)站可以推薦參考：

·https://www.easyicon.net/

·https://www.iconfont.cn/

·https://dribbble.com/

·https://www.vcg.com/

（3）、技術(shù)選型

需求和功能、設(shè)計(jì)都清楚了，那就到技術(shù)選型了，什么樣的技術(shù)，實(shí)現(xiàn)這些功能點(diǎn)最方便就選什么樣的技術(shù)，前后端各選擇什么技術(shù)。當(dāng)然，這可能對(duì)開(kāi)發(fā)人員的經(jīng)驗(yàn)和能力有要求，如果開(kāi)發(fā)人員會(huì)的技術(shù)種類不多，那就只能選擇自己懂的技術(shù)去實(shí)現(xiàn)了。時(shí)間允許的話，知道有更好的實(shí)現(xiàn)技術(shù)方案，就選擇新方案，邊學(xué)習(xí)邊開(kāi)發(fā)。技術(shù)選型自己拿不定主意可以找人問(wèn)，或者網(wǎng)上參考借鑒別人的經(jīng)驗(yàn)分享。對(duì)于 WebGIS 系統(tǒng)的技術(shù)方案，前面已經(jīng)列舉了幾種前后端和數(shù)據(jù)庫(kù)的選擇搭配，第三章節(jié)也有介紹各種地圖JS庫(kù)的特點(diǎn)，這里就不詳細(xì)說(shuō)了，根據(jù)自己的情況去做技術(shù)選型。

（4）、編碼和測(cè)試

前面三個(gè)步驟都確定了，自然的就可以去編碼實(shí)現(xiàn)功能了，邊開(kāi)發(fā)邊測(cè)試，做前端功能時(shí)，更重要的還有一點(diǎn)是用戶體驗(yàn)。

（5）、部署上線

編碼完成后，測(cè)試沒(méi)問(wèn)題了，就可以部署上線了。一般都是部署到云服務(wù)器。不同的編程語(yǔ)言和不同的服務(wù)器系統(tǒng)，都有不同的部署方式。

總之，如果一個(gè)人找你做系統(tǒng)，你解決不了前三個(gè)步驟的問(wèn)題，那就只能答復(fù)做不了。當(dāng)然，解決問(wèn)題的時(shí)候可以找合作伙伴，就是團(tuán)隊(duì)，每個(gè)人負(fù)責(zé)不同的方向，做自己擅長(zhǎng)的，最終的目的是交付一個(gè)功能完整可用的系統(tǒng)就行了。對(duì)于一個(gè)合格的全棧開(kāi)發(fā)工程師來(lái)說(shuō)，以上都不是問(wèn)題吧。

如何評(píng)估系統(tǒng)開(kāi)發(fā)周期

不管是在公司，或是答應(yīng)給別人做網(wǎng)站，肯定是要做工作量評(píng)估的，也只有做好工作量評(píng)估才能給對(duì)方一個(gè)相對(duì)準(zhǔn)確的交付日期。不然隨便說(shuō)，就會(huì)存在完不成的風(fēng)險(xiǎn)。

一般來(lái)說(shuō)，經(jīng)驗(yàn)越豐富的開(kāi)發(fā)人員就會(huì)越能把握這個(gè)節(jié)奏。但是不管經(jīng)驗(yàn)多豐富的人，有時(shí)候也是無(wú)法評(píng)估出精確的工作量，特別是團(tuán)隊(duì)協(xié)作的情況下，多人協(xié)作的效率情況，開(kāi)發(fā)人員能力不一致，每個(gè)模塊或領(lǐng)域邊緣聯(lián)調(diào)缺失等情況，都是存在工作量評(píng)估不精確的風(fēng)險(xiǎn)。保險(xiǎn)起見(jiàn)，一般都會(huì)預(yù)留一下bug修復(fù)的時(shí)間。軟件工作量評(píng)估方法是個(gè)大學(xué)問(wèn)，更細(xì)節(jié)的東西可以參考這篇文章

工作分解結(jié)構(gòu) WBS

WMS（工作分解結(jié)構(gòu)）是把項(xiàng)目按階段可交付成果將項(xiàng)目工作分解成較小的，更易于管理的組成部分的過(guò)程。工作上，不管我們接受的是一個(gè)新系統(tǒng)開(kāi)發(fā)，還是一個(gè)新需求開(kāi)發(fā)而已，都建議把需求拆分為小需求，把系統(tǒng)功能拆分為小功能，并按階段可交付的成果來(lái)評(píng)估工作量。一般建議是一個(gè)功能點(diǎn)，工作量不要超過(guò)2天，如果工作量超 過(guò)了兩天，就再將該功能細(xì)分一下，使得工作量評(píng)估更準(zhǔn)確。比如一個(gè)系統(tǒng)功能為倉(cāng)庫(kù)管理，倉(cāng)庫(kù)管理 是個(gè)一級(jí)菜單，菜單下有兩個(gè)二級(jí)菜單分別為 入庫(kù)單 和 出庫(kù)單，然后入庫(kù)單 和 出庫(kù)單 下還有細(xì)分的小功能，都一一分解出來(lái)，然后再單獨(dú)評(píng)估每個(gè)小功能點(diǎn)開(kāi)發(fā)完成需要多少工作量，開(kāi)發(fā)工作量也是根據(jù)開(kāi)發(fā)人員能力和檢驗(yàn)的不同而不同的，根據(jù)自己的實(shí)際情況進(jìn)行評(píng)估即可。

功能WBS拆分

本章小結(jié)

本章主要介紹進(jìn)行一個(gè)完整的系統(tǒng)開(kāi)發(fā)需要的步驟和注意點(diǎn)，新手或者對(duì)一個(gè)人開(kāi)發(fā)完整的系統(tǒng)沒(méi)有能力的話可以參考文章中介紹的內(nèi)容，其實(shí)，項(xiàng)目經(jīng)理對(duì)整個(gè)流程會(huì)更加熟悉，盡管項(xiàng)目經(jīng)理不是一個(gè)全棧開(kāi)發(fā)工程師，他也要能把握住每個(gè)環(huán)節(jié)的問(wèn)題，這樣才能做好管理，對(duì)于開(kāi)發(fā)人員來(lái)說(shuō)，清楚每個(gè)步驟每個(gè)環(huán)節(jié)，也是學(xué)習(xí)成長(zhǎng)的過(guò)程，如果想往全棧開(kāi)發(fā)方向發(fā)展，這些也都是必須懂的了。文章中對(duì)全棧開(kāi)發(fā)工程師介紹的不多，全棧開(kāi)發(fā)不單單只文章中的內(nèi)容，會(huì)涉及更多的領(lǐng)域或者技能，所以也不能認(rèn)為自己能做一個(gè)完整的系統(tǒng)了，就是一個(gè)全棧開(kāi)發(fā)了，只是往全棧更接近而已，如果想對(duì)全棧發(fā)展學(xué)習(xí)了解更多，可以參考主頁(yè)置頂文章。

全棧篇主要介紹一些工作或開(kāi)發(fā)流程技巧，通過(guò)這些技巧來(lái)找編程思路或者搞清楚工作內(nèi)容，讓自己知道如何去做東西，該怎么著手去開(kāi)發(fā)一個(gè)網(wǎng)站（系統(tǒng)）。經(jīng)常有人和我說(shuō)，自己想開(kāi)發(fā)一個(gè) WebGIS 系統(tǒng)，但不知道怎么做的情況，在這篇章節(jié)，你就可以找到你想要的答案，希望能對(duì)你有幫助。

深入學(xué)習(xí)：gis616（添加備注Webgis學(xué)習(xí)）

（持續(xù)更新中.....）