後臺進入前端領域的一次嘗試(一: 前言&簡介)

文章內容並不完備, 也有可能存在許多錯誤, 更可能是給予後臺開發人員一個進入前端領域的參考, 也是筆者進入前端領域的一次嘗試和記錄.

前言

一個後臺想要學習前端的緣由無非就是想向全棧工程師靠攏, 要不就是被逼的. 哈哈… 固然筆者不是在工做業務上被逼的(例如某些小小小做坊出於經濟緣由會要求後臺工程師先後端都會).

事出有因, 筆者在平常工做中, 分配有一臺服務器用於輔助開發和調試.爲了提升進程的管理和部署效率從而引入了supervisor進程管理工具(py寫的).在使用supervisor的過程當中須要頻繁進出服務器進行部署工做,爲了減小頻繁進出服務器進行部署的麻煩,啓用了supervisor的http功能.

但supervisor頁面實在太過醜陋而且沒有上傳和一些文件夾管理功能(筆者有一點外貌協會).所以筆者但願編寫一個supervisor的http擴展插件. 插件須要有UI和接口, 固然接口對於後臺來講不是什麼問題, 問題在於UI, 原本想讓前端同事幫忙擼頁面, 無奈最近工做繁重,最後就不了了之了.最後仍是決定本身親力親爲,一勞永逸,永不求人!

筆者學習前端的目標很明確, 就是擼出知足需求的頁面便可,這裏全系列以supervisor http擴展插件爲例.通過一天的資料準備和試探.最終得出如下方案:

• 編輯器: vscode
• 腳本語言: es5 + vue.js
• html/css: bootstrap
• http庫: axios

筆者的目標很簡單, 擼出一個有交互, 有樣式, 能與後臺接口對接的頁面便可.

編輯器的篩選, 筆者是Java coder, 使用的IDE是intellij idea社區版. 咋看之下, 節省上手時間的最佳方案是使用同屬intellij platform的webstorm, 無奈webstorm沒有社區版, 筆者但願本身的使用的軟件儘量是正版的, 不使用盜版軟件, 但又沒有錢, 惟一的出路就是使用開源軟件了.

腳本語言, 筆者在此以前已有較好的js基礎, 但並無系統化的學習過js, 所以須要作一次es5掃盲, 同時須要一款可以快速上手的js框架, vue.js再適用不過了, vue.js對es6支持並不友好, 因此學習完es5足以.

樣式, 筆者在此以前已有較好的html/css基礎, 僅須要使用合適的樣式庫便可.筆者初略對比了element-ui 和 bootstrap, bootstrap雖然沒有對vue的支持, 但樣式與js分離較好, element-ui須要完成node.js 和較高階的前端知識才能使用自如, 出於速成的目的選擇了bootstrap. 這裏對於js庫和css庫的使用都是cdn頁面引入方式, 省去了學習node.js和其餘使用環境的成本.

http庫, 與後臺接口對接須要一套完備的http庫, 固然能夠使用原生 XMLHttpRequests, 但出於效率仍是選擇了axios.

簡介

部分紅品展現

通過兩天的辛苦奮鬥, 終於擼出一件成品.

本博會持續記錄進入前端領域的各類踩坑和學習經歷.