后台进入前端领域的一次尝试(一: 前言&简介)

文章内容并不完备, 也有可能存在许多错误, 更可能是给予后台开发人员一个进入前端领域的参考, 也是笔者进入前端领域的一次尝试和记录.

前言

一个后台想要学习前端的缘由无非就是想向全栈工程师靠拢, 要不就是被逼的. 哈哈… 固然笔者不是在工做业务上被逼的(例如某些小小小做坊出于经济缘由会要求后台工程师先后端都会).

事出有因, 笔者在平常工做中, 分配有一台服务器用于辅助开发和调试.为了提升进程的管理和部署效率从而引入了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.

简介

部分红品展现

通过两天的辛苦奋斗, 终于撸出一件成品.

本博会持续记录进入前端领域的各类踩坑和学习经历.