继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

预告:Javascript全栈开发的系列文章

翻翻过去那场雪
关注TA
已关注
手记 60
粉丝 7
获赞 25

自从一年前发布了Vuejs小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用JavaScript全栈开发。所以,我得把这个全栈环境搭建起来。

说起来搭建JS全栈开发环境,设计到的东西真的不少。

大的选择是这样的:

  1. 前端采用Vuejs

  2. 后端采用Nodejs

  3. 存储使用Mongodb。

大的定了,小的也就跟着来,前端配套的话需要:

  1. vue-router,前端路由管理

  2. vuex,前端数据管理,专业一点的说法,就是状态管理,这些数据,可能是属性,数组,对象等等,可以跨组件访问,而不像是data函数那样提供的数据只能被本组件访问,可以想到,稍微大一点的前端工程都必须前端状态管理的。

  3. axios,前端HTTP访问,以promise的形式,封装了类似fetch,AJAX的能力

  4. buefy,前端微型框架,可以使用自定义标签使用自定义组件,并且CSS框架为Bulma

  5. Bulma,尽管使用了微框架,只是让对CSS framework的了解降到最低,但是不是说就不需要了解了。还是得学习的。Bulma相对于老牌的Bootstrap,是不需要依赖于JS框架,也没有任何JS代码,因此可以和任何一框架很好的结合,比如这里的Vuejs。这就是我选择它的原因

  6. webpack&babel。有了vue-cli,对webpack&babel的了解可以降到最低,但是也不能不学,稍微需要一些定制的配置,也是离不开它的。起码得知道如何启动一个开发服务器,已经发布build,还有把前端服务经过proxyChain跳转到后端服务去等等。

  7. vue-cli,前端脚手架工具,它可以把以上的组件整合起来到一个工程内,这是我们的全栈开发的开始,因此这个工具也是需要学习的,尽管它并不难

一个最为基础的vue-cli工程脚手架的创建,现在得需要160M左右的空间占用。在我的电脑和网络情况下,需要2分半的时间才会完成,可见如今的前端开发已经变得越来越复杂了。

接下来看后端,一般习惯就是使用Nodejs+Express.js的搭配。这个没有多少说的,都是老东西了。为了访问Mongodb,也需要一套框架,基于Callback的,或者基于Promise+Await+Async的,也是需要选择的。

为了便于理解,我会用一个最小的案例完成整个开发过程,就是案例在现实中并不存在,但是也是有用的,就是你可以当它们是模板,直接拷贝代码,然后填充你的内容。天下代码一大抄嘛,没有什么不对的,毕竟这些写代码是最快的。这个案例的数据模型就是对一个{id,name}的对象进行CRD(创建删除列表)。

所以,文章会包括这些:

  1. 使用Vuejs脚手架,快速搭建一个{id,name}的对象进行CRD的界面。这里会使用vuex管理状态,使用vue-router管理路由

  2. 使用Mongodb存储和提供后端CRD服务 https://juejin.im/post/5b727a...

  3. 使用Nodejs搭建{id,name}的对象的后端CRD服务

  4. 使用Axios访问后端CRD服务

  5. 整合全栈服务

整个系列,是会采用我的一贯风格,就是不疾不徐,娓娓道来,学习完毕,你可以掌握我提到的全系列的知识,并把它用到你的项目中。

前端说就是一些脚本和标签,其实复杂度真的不低,这篇文章的图,可以窥视到前端复杂的一角了。Modern Frontend Developer in 2018

原文链接:https://segmentfault.com/a/1190000016010041

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP