江苏龙网

  1. 首页 > 人文 > >

感谢 Vue.js 拯救我这个前端渣渣，让 PowerJob 有了管理后台界面

本文适合有Java基础知识的人群
HelloGitHub推出的《讲解开源项目》[1]系列 。
对于大部分非前端程序员来说 ， 写网页无疑是一件非常痛苦的时间 。 如果说JavaScript还属于能够勉强搏一搏的水平 ， 那HTML无疑是那座无法逾越的大山 。 什么 ， 你说你翻过HTML这座大山了？没想到吧 ， CSS在天上正望着你呢 。 总而言之 ， 对我来说 ， 写前端页面一直以来都是令我头疼不已的事情 ， 就不提DOM元素操作这种高端操作了 ， 就一个最简单的文字水平加垂直居中 ， 一百度都能搜出一堆千奇百怪各不相同的方法来 。 关键是 ， 在我全部尝试以后 ， 字 ， 依旧没有出现在我预期的地方 。 不知道大家有没有经历过这种前端开发的绝望 ， 反正作为过来人 ， 我可是有倒不完的苦水呐！
看了上面这一大段话 ， 如果你以为本文的主旨是吐槽前端的话 ， 那你就大错特错了 。 曾经 ， 我的前端世界一片黑暗 ， 直到我遇见了vue～
一、《记录Vue.js》观后感PowerJob呢 ， 是一个用Java写的任务调度中间件 ， 自然用武之地也是在后端 。 而vue呢 ， 是一个非常强大的前端框架 。 PowerJob除了前端页面是用vue写的以外 ， 看上去和vue没有任何交集（实际上呢也没什么交集） 。 而我之所以在这里单开一个章节净扯这些有的没的 ， 也不纯是为了凑字数 ， 主要还是借这个机会 ， 写一篇观后感 。
“观后感？这个人在说什么？最近写bug脑子写坏掉了吧～”
看这部纪录片的时候 ， PowerJob（OhMyScheduler）的1.0.0版本刚发布不久 ， 虽说1.0.0版本功能并没有现在那么丰富 ， 稳定性和用户体验也没有现在那么好 ， 但依旧可以说是比别的任务调度框架强上一截 。 所以 ， 在正式发布之前 ， 我常常会去幻想这个框架能够掀起的大风大浪 ， 然后暗自窃喜 ， 每天快乐得活在自己幻想出来的乌托邦里面 ， 不亦乐乎 。 然而 ， 正式发布后别说风浪了 ， 连涟漪都没有 。 仿佛这件事从来没有发生过 。
所以在那一段时光 ， 我其实还是蛮丧的 。 之前幻想的有多美好 ， 现实带来的反差感就越强烈 。 也是在这样的环境下 ， 我偶然得知vue有一部纪录片 ， 讲述了vue诞生至今的故事 。
当然 ， 我并没有直接去看 ， 毕竟我是“双非”人士 ， 一般情况是对这种东西提不起兴趣的 。 但不知怎么的 ， 我最后还是打开了（YouTube发现是英文的然后打开了）bilibili 。
我想 ， 我可能是为了寻找心理平衡而准备去看这个视频的 。 毕竟即便是我 ， 也知道vue起源于尤大大的个人项目 。 那既然是个人项目 ， 是不是也会有我这样的窘境嘞～要是全球闻名的前端框架起步阶段都有我这种伯乐难寻的烦恼 ， 那我还烦恼个啥呢～
然而 ， 我想要寻找的东西并没有找到 。 Vue发布初期 ， 就取得了不小的关注度 ， 也迅速在GitHub上积累了一群小用户 。 而我...emmmm ， 不过 ， 虽然心理慰藉没找到 ， 但看完整个视频 ， 我找到了动力 。
我下定决心离开了朝九晚五的岗位 ， 做着一件基本能让我热情投入的工作 ， 这确实挺让我感到自豪的 。 有时候我会看看统计数据 ， 比如看下我们有多少用户 ， 多少下载量之类的 。 但要说什么最能给我对工作的某种成就感 ， 或者说满足感的话 ， 那还是当我看到（自己所影响的）人的时候 。 尤其是在会议结束以后 ， 很多人会来找我 。 比如大家经常会跟我握手 ， 说「谢谢Evan你做的东西 ， 它真的让我的生活方便了很多」这样子 。 这些时候我都会感觉到 ， 这就是我做Vue的动力 。 我把它做了出来 ， 我把它分享给了大家 ， 希望它能让大家生活更方便 。 然后还真的会有人来单独找我 ， 会有人来感谢我所做到的事情 。 于是整个循环就这样连通起来了 。
二、双剑合璧：vue+element-ui讲完了故事 ， 讲“技术” 。
【感谢 Vue.js 拯救我这个前端渣渣，让 PowerJob 有了管理后台界面】对于后台管理类型的前端项目 ， 说白了其实就那几个功能（侧边导航栏、顶部导航栏、表单、表哥、输入框、按钮等） ， 因此选择一款好的模版组件能让开发效率大大大大大大提升 。 比如 ， 用了element-ui以后 ， 我就从写代码转变成了拷代码 ， 可以说是很愉悦了～
废话环节结束 ， 下面就让我们进入vue+element-ui构成的不一样的前端世界～
2.1新建项目首先 ， 后台管理网站虽然简单 ， 但好歹也是个前端项目 。 因此 ， 不能再用小白最爱的新建html文件打开方式了 。 而是需要先初始化一个完整的前端项目 ， 好在vue为我们提供了完整的工具包 ， 只需要运行命令：
vuecreatepowerjob-console根据提示选择指定的配置就能生成完整的vue工程 。 命令行运行结束后 ， cd进去创建的工程 ， 运行本地调试命令npmrunserve即可看到你的第一个vue网页服务了～
2.2引入element-uielement-ui的官方标语是“Element ， 一套为开发者、设计师和产品经理准备的基于Vue2.0的桌面端组件库” 。 可见其使用有多简单～element-ui提供了大量的常用模版 ， 同时每一个模版下面都携带了大量的代码实例 ， 是一个真·只需要复制黏贴改几个参数就能用的组件库 。 那还等什么 ， 安装啊～
element-ui为vue-cli准备了专用的插件 ， 安装也十分简单 ， 只需要进入项目目录 ， 执行
vueaddelemenz等待进度条走完之后 ， element-ui就安装完毕了～
2.3安装插件至此 ， 项目主体初始化完毕 ， 理论上可以正式开始开发了 。 然而 ， 此时面对一个原始的vue工程 ， 我等前端小白还是难以下手 。 因此这个时候就要各种功能强大的框架出马进一步降低我们的开发成本了 ， 以下列举一些我常用的（应该也是大家常用的）插件供大家参考：
axios：网络请求库 ， 简化网络操作vue-router：vue的路由插件 ， 用于构建单页面web程序vuex：中心化状态管理方案 ， 我主要用来存储一些公共数据插件的安装是一条npm通用名称 ， 格式为npminstall插件名称--save 。 --save参数才会把模块写入到packages.json ， 当换个环境运行npminstall时就会自动安装 ， 否则还需重新安装该插件 。
2.4依葫芦画瓢到这里 ， 前置开发准备可以说是全部完成了 ， 接下来就正式进入开发环节 。 在这里 ， 我推荐使用的方法是在GitHub找一个现成的项目工程（比如PowerJob-Console）照着改 。 对于一个后台管理项目来说 ， 网页的布局是固定的 ， 整体风格也是类似的 ， 具体的组件也几乎都是重合的 ， 因此很容易上手和修改 。 拿PowerJob-Console来说 ， 需要重点关注的其实就4个文件 ， 分别是：main.js、router.js、Navbar.vue和Sidebar.vue 。
main.js主要完成各个插件的初始化 ， 要改的东西不多 ， 无非就是baseURL、请求拦截等看一眼就知道这里要改的内容 。
router.js则定义了单页面下的跳转规则 ， 里面的东西虽然看不懂 ， 但结合Sidebar.vue一起看 ， 就知道要怎么改了～这...大概就是复制黏贴的快乐吧 。
经过这一阵折腾 ， 你已经有了如下样式的通用后台 ， 只需要完成具体页面的开发即可～而具体的页面嘛...无非就是表单什么的 ， 打开element-ui官网 ， 你就明白了什么是真正的面向复制编程～
下一期 ， 可能会给大家带来MapReduce处理器的原理剖析（核心科技了解一下） ， 当然也可能是～其他～～～
“什么？你说我讲了半天 ， vue相关的知识一点都没讲？”
“什么？vue相关的知识还要讲？看一遍文档就能写了 。 对小白 ， 就是那么友好～”


    推荐阅读


    上一篇：健康产业|长寿时代面临新课题：如何让老人各取所需、各有所归

    下一篇：海博|达达集团旗下海博系统已应用超1200家连锁商超门店