来来来,你可能没见过这么全的实战吧

习惯,后期若有修改会在此处作全局说明。

前言

作为一个自认为高产博主,我已经好久没发文了,之前在segmentfault上面发的文也是删的差不多了,还是怪我一开始给自己挖坑乱定目标,结果都滞后了,而且也没有什么动静,反思了好久,决定不做太过宏伟的目标,但是也不想简略了事,所以归结了本篇内容,做了一份涵盖一些前端圈如今比较流行的技术实战,包括(Node, Koa, Express, Pug, MongoDB, Sass, Gulp, React, Vue, Webpack, React-Native, Weapp, Electron)等等等等等,不过不是同一个应用里都用了哦…不要误会我瞎搞,整个项目拆分了多个应用也就是多个不同的包,分别应用了其中一些技术。

忘了说做个什么东西了…大概就是一个分享交流的社区,具体的样子下面我在细说。

在我发文的之前,我已经把用Express搭建的API服务和用Pug模板输出传统网站的形式两个包完成了,可能之后会修修补补,不过大概意思已经出来了。

还有一点…本篇只是做统筹性的说明,没有涵盖太多技术相关的内容,所以没有发在博客上。

项目地址:你没有见过的终极实战

管理

虽然东西非常的多,但是强迫症的我并不想给它拆分成很多仓库(一个仓库是一个包的形式),所有内容我都放在了一个仓库里(practice),只是以根文件夹做区分,用yarnworkspace的方式来管理所有的包,分别是server(API数据服务)site(传统模板网站)manage(后台管理系统)weapp(微信小程序)spa(移动端单页应用)native(原生APP)desktop(桌面应用)。由于暂时只完成了serversite,所以其他目录就暂时删除了,后续写的时候在加回来。

关于

我还是要详细的说一下整个项目和计划,不然大家可能也不知道我做的是个什么东西,分别用上述的技术做什么地方。每个包产生的应用我尽量多贴一下图片,吸引一下大家的目光,嘻嘻。

server

首先是API服务,我一开始本来是打算用Koa写的,但是我本身对Express更熟悉一点,为了快速迭代就还是用了Express,不过也准备这一波API没有问题的话还是换成Koa来写,不想同一个技术用多次嘛,这里我就贴一个测试覆盖率的图吧。

《来来来,你可能没见过这么全的实战吧》

其中没有跑到的测试是由于当时在处理异常的时候,没有统一抛到一个地方,导致很多异常处理测试跑不到,后来问了几个前辈才知道要把异常抽离了,真笨啦…不过大体还是跑完了的,初始化大概三十几个API,也单独写了一份API文档,,详细说明大家就看API文档吧。

site

然后是传统网站的形式,也就是类似于java(jsp)的形式,本来这种形式数据应该来源于数据库的,但是为了我上述的API服务的公共性,所以这个包,并没有操作数据库的内容,所有数据还是来源于API服务,技术栈为Express结合Pug完成。

本来我是打算做完server就发文的,但是还是怕没有效果图,大家兴趣欠佳,所以还是把这个整站弄出来给大家看一下大概是什么类型的应用。

《来来来,你可能没见过这么全的实战吧》
《来来来,你可能没见过这么全的实战吧》
《来来来,你可能没见过这么全的实战吧》
《来来来,你可能没见过这么全的实战吧》

本来想截个gif,但是好像有点大,还是算了,静态图片大概也能看出是个什么东东,类似于掘金cnode或者是segmentfault的社区网站,只是功能简单了一些而且。页面也参照了不少,还请见谅。

在写site的时候虽然已经吸取了了一些经验,但是还是觉得不够完美,强迫症哎,除了本身ExpressPug以外,样式用了Sass,编译用了Gulp,虽然少,但是还是涉及到了,不过测试没有写诶,实在是时间太少,脑子太疼,后续再补测试吧,毕竟我这个包是个应用包….见谅!

计划

记于2018-07-19:由于刚刚发项目,可能里面的我没有察觉的bug会陆续暴露出来,所以准备这一段时间都用来完善serversite,等到这两包趋于稳定之后,就会启动manage后台管理系统的内容,技术栈为ReactAntd,我是特别喜欢这两个东东的,所以其实内心还是希望快点的…

博客

由于本身内容还是比较多的,所以博客我也是每一篇对应一个内容,详细的实现过程会在博客里面体现出来,如果错误除了帮忙指正一下还请多多包涵,现阶段完成了两篇:

  1. 终极实战(一) – 搞个 Node 的数据服务
  2. 终极实战(二) – 用 Pug 模板输出传统网站

结语

其实当时做这个的时候目的很简单,想要更熟练的使用这些技术、想要小星星等等,做的时候收获真的很多,有很多非常好的前辈帮我答疑解惑,让我不断的推翻之前写的代码,不断的优化它们(PS:现在可能也还有很多缺陷),我本身也提升了蛮多的,同时也希望自己的博客或者是代码能带给更多人帮助!!!

    原文作者:青湛
    原文地址: https://segmentfault.com/a/1190000015695804
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞