文章内容并不完备, 也有可能存在许多错误, 更多是给予后台开发人员一个进入前端领域的参考, 也是笔者进入前端领域的一次尝试和记录.
前言
一个后台想要学习前端的原因无非就是想向全栈工程师靠拢, 要不就是被逼的. 哈哈… 当然笔者不是在工作业务上被逼的(例如某些小小小作坊出于经济原因会要求后台工程师前后端都会).
事出有因, 笔者在日常工作中, 分配有一台服务器用于辅助开发和调试.为了提高进程的管理和部署效率从而引入了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.
简介
部分成品展示
经过两天的辛苦奋斗, 终于撸出一件成品.
本博会持续记录进入前端领域的各种踩坑和学习经历.
