react+redux 实战(二)---- 搭建 express 将应用连接到数据库 mongodb

939 阅读7分钟

上一篇文章:
react+redux实战(一)----基本流程

主要完成了基本页面的搭建,但是对于数据的交互还并不支持,因此为了构建一个完整的数据流,开始尝试将应用连接到数据库。

数据库选型(可以略过)

选型最基本的要求就是可用js操作。在选型阶段发现了wilddog(野狗),以简单的实时通信著称。

野狗确实特别合适flux,flux是为了给react或者其他前端框架做全局数据同步用的,野狗做的事情恰好就是各个客户端和服务器的数据同步,试想一下,我在手机上点了一个赞,更新了本地数据,然后本地数据自动同步了线上数据,线上数据又自动同步了你手机上的数据,然后state的改变触发重绘,在你的界面上弹出一个小红点。而这一系列的数据比对,传递,同步,重绘都是野狗和框架自动完成的。(摘自知乎)

而且它是也是js操作,使用事件方式来对数据库进行操作,而且数据库是以后台云方式存在的,如果只是构建react的完整数据流,完全可以不用后台,只搭配野狗就实现。我又没用野狗,还说这么多是想表达什么呢?感慨这实在是简单,用过的朋友希望能介绍下经验,后边有机会想尝试一把敏捷开发。

言归正传。

目前前端的主流方法还是利用ajax或者fetch这种方式向指定api请求数据,然后router处理请求返回数据,如果使用野狗提供的方法,可以将这一步和对数据库的读写操作综合为一步。确实高效快捷,然而这次本着学习的目的,想一探web应用的整个流程,还是选择走主流,所以这次选择使用mongodb,然后使用express作为后台。

将webpack-dev-server集成到整个web应用

既然选定后台使用express作为自己的web服务器,那么第一步就需要将webpack dev server集成进来,否则就不能使用webpack提供的模块实时打包和热加载功能。最简单的方式如下:



就是在入口html文件载入打包的js文件时指定完整的url地址,如