资讯专栏INFORMATION COLUMN

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

ChristmasBoy / 782人阅读

摘要:自从一年前发布了小书的电子书,也有些日子没有碰过它们了,现在因为项目的缘故,需要使用全栈开发。说起来搭建全栈开发环境,设计到的东西真的不少。这个案例的数据模型就是对一个,的对象进行创建删除列表。

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

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

大的选择是这样的:

前端采用Vuejs

后端采用Nodejs

存储使用Mongodb。

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

vue-router,前端路由管理

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

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

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

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

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

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

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

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

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

所以,文章会包括这些:

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

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

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

使用Axios访问后端CRD服务

整合全栈服务

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

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/108162.html

相关文章

  • 预告JavaScript模块全览

    摘要:之前写的文章急速全栈教程得到了不错的阅读量,霸屏掘金头条天,点赞过千,阅读近万,甚至还有人在评论区打广告,可见也是一个小小的生态了。今天看到的霸屏的,也是讲全栈的,见参考文章接下来要写的是模块。全局命名污染和命名冲突依赖管理。 之前写的文章急速Js全栈教程得到了不错的阅读量,霸屏掘金头条3天,点赞过千,阅读近万,甚至还有人在评论区打广告,可见也是一个小小的生态了;)。看来和JS全栈有关...

    focusj 评论0 收藏0
  • 新书《全栈数据之门》预告

    摘要:终于,可以给各位关心全栈数据之门的亲人朋友一个交待了经过出版社三个多月的编辑与排版,目前已经编辑完成了最后的版本。书名最后定为全栈数据之门,是因为全栈的概念太大了。 showImg(https://segmentfault.com/img/bVIBpi?w=988&h=608); 终于,可以给各位关心《全栈数据之门》的亲人、朋友一个交待了! 经过出版社三个多月的编辑与排版,目前已经编辑...

    Lin_R 评论0 收藏0
  • 新书《全栈数据之门》预告

    摘要:终于,可以给各位关心全栈数据之门的亲人朋友一个交待了经过出版社三个多月的编辑与排版,目前已经编辑完成了最后的版本。书名最后定为全栈数据之门,是因为全栈的概念太大了。 showImg(https://segmentfault.com/img/bVIBpi?w=988&h=608); 终于,可以给各位关心《全栈数据之门》的亲人、朋友一个交待了! 经过出版社三个多月的编辑与排版,目前已经编辑...

    zero 评论0 收藏0
  • 新书《全栈数据之门》预告

    摘要:终于,可以给各位关心全栈数据之门的亲人朋友一个交待了经过出版社三个多月的编辑与排版,目前已经编辑完成了最后的版本。书名最后定为全栈数据之门,是因为全栈的概念太大了。 showImg(https://segmentfault.com/img/bVIBpi?w=988&h=608); 终于,可以给各位关心《全栈数据之门》的亲人、朋友一个交待了! 经过出版社三个多月的编辑与排版,目前已经编辑...

    tainzhi 评论0 收藏0
  • 新书《全栈数据之门》预告

    摘要:终于,可以给各位关心全栈数据之门的亲人朋友一个交待了经过出版社三个多月的编辑与排版,目前已经编辑完成了最后的版本。就等过完年,吃好喝好玩好后回来,就可以开始印刷了。还有几天就过年了,愿每一位朋友都能快乐吉祥 showImg(https://segmentfault.com/img/bVIBpi?w=988&h=608); 终于,可以给各位关心《全栈数据之门》的亲人、朋友一个交待了! 经...

    wfc_666 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<