摘要:自從一年前發布了小書的電子書,也有些日子沒有碰過它們了,現在因為項目的緣故,需要使用全棧開發。說起來搭建全棧開發環境,設計到的東西真的不少。這個案例的數據模型就是對一個,的對象進行創建刪除列表。
自從一年前發布了Vuejs小書的電子書,也有些日子沒有碰過它們了,現在因為項目的緣故,需要使用JavaScript全棧開發。所以,我得把這個全棧環境搭建起來。
說起來搭建JS全棧開發環境,設計到的東西真的不少。
大的選擇是這樣的:
前端采用Vuejs
后端采用Nodejs
存儲使用Mongodb。
大的定了,小的也就跟著來,前端配套的話需要:
vue-router,前端路由管理
vuex,前端數據管理,專業一點的說法,就是狀態管理,這些數據,可能是屬性,數組,對象等等,可以跨組件訪問,而不像是data函數那樣提供的數據只能被本組件訪問,可以想到,稍微大一點的前端工程都必須前端狀態管理的。
axios,前端HTTP訪問,以promise的形式,封裝了類似fetch,AJAX的能力
buefy,前端微型框架,可以使用自定義標簽使用自定義組件,并且CSS框架為Bulma
Bulma,盡管使用了微框架,只是讓對CSS framework的了解降到最低,但是不是說就不需要了解了。還是得學習的。Bulma相對于老牌的Bootstrap,是不需要依賴于JS框架,也沒有任何JS代碼,因此可以和任何一框架很好的結合,比如這里的Vuejs。這就是我選擇它的原因
webpack&babel。有了vue-cli,對webpack&babel的了解可以降到最低,但是也不能不學,稍微需要一些定制的配置,也是離不開它的。起碼得知道如何啟動一個開發服務器,已經發布build,還有把前端服務經過proxyChain跳轉到后端服務去等等。
vue-cli,前端腳手架工具,它可以把以上的組件整合起來到一個工程內,這是我們的全棧開發的開始,因此這個工具也是需要學習的,盡管它并不難
一個最為基礎的vue-cli工程腳手架的創建,現在得需要160M左右的空間占用。在我的電腦和網絡情況下,需要2分半的時間才會完成,可見如今的前端開發已經變得越來越復雜了。
接下來看后端,一般習慣就是使用Nodejs+Express.js的搭配。這個沒有多少說的,都是老東西了。為了訪問Mongodb,也需要一套框架,基于Callback的,或者基于Promise+Await+Async的,也是需要選擇的。
為了便于理解,我會用一個最小的案例完成整個開發過程,就是案例在現實中并不存在,但是也是有用的,就是你可以當它們是模板,直接拷貝代碼,然后填充你的內容。天下代碼一大抄嘛,沒有什么不對的,畢竟這些寫代碼是最快的。這個案例的數據模型就是對一個{id,name}的對象進行CRD(創建刪除列表)。
所以,文章會包括這些:
使用Vuejs腳手架,快速搭建一個{id,name}的對象進行CRD的界面。這里會使用vuex管理狀態,使用vue-router管理路由
使用Mongodb存儲和提供后端CRD服務 https://juejin.im/post/5b727a...
使用Nodejs搭建{id,name}的對象的后端CRD服務
使用Axios訪問后端CRD服務
整合全棧服務
整個系列,是會采用我的一貫風格,就是不疾不徐,娓娓道來,學習完畢,你可以掌握我提到的全系列的知識,并把它用到你的項目中。
前端說就是一些腳本和標簽,其實復雜度真的不低,這篇文章的圖,可以窺視到前端復雜的一角了。Modern Frontend Developer in 2018
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/108162.html
摘要:之前寫的文章急速全棧教程得到了不錯的閱讀量,霸屏掘金頭條天,點贊過千,閱讀近萬,甚至還有人在評論區打廣告,可見也是一個小小的生態了。今天看到的霸屏的,也是講全棧的,見參考文章接下來要寫的是模塊。全局命名污染和命名沖突依賴管理。 之前寫的文章急速Js全棧教程得到了不錯的閱讀量,霸屏掘金頭條3天,點贊過千,閱讀近萬,甚至還有人在評論區打廣告,可見也是一個小小的生態了;)。看來和JS全棧有關...
摘要:終于,可以給各位關心全棧數據之門的親人朋友一個交待了經過出版社三個多月的編輯與排版,目前已經編輯完成了最后的版本。書名最后定為全棧數據之門,是因為全棧的概念太大了。 showImg(https://segmentfault.com/img/bVIBpi?w=988&h=608); 終于,可以給各位關心《全棧數據之門》的親人、朋友一個交待了! 經過出版社三個多月的編輯與排版,目前已經編輯...
閱讀 2161·2021-09-04 16:40
閱讀 1453·2021-08-13 15:07
閱讀 3605·2019-08-30 15:53
閱讀 3194·2019-08-30 13:11
閱讀 1069·2019-08-29 17:22
閱讀 1811·2019-08-29 12:47
閱讀 1469·2019-08-29 11:27
閱讀 2221·2019-08-26 18:42