使用umi+antd+dva开发单页应用

最近都在用一些React的框架进行前端开发,起初学习成本挺大,也晦涩难懂,学懂了以后确实非常舒适。

之后就开始追求使用一些框架开发,在探索过程中就了解到了这个antd,最开始也是用得一脸懵逼,官方说要和umi一起用,就翻了翻umi和antd的文档,用熟练了也感觉是个神器。

umi是一个脚手架,即搭建开发环境的工具,根据文档所写,首先在自己电脑里安装好node + npm,再通过npm安装一个tyarn(主要是用于加速依赖的下载过程),就可以快速使用这个脚手架了。

进入自己的项目文件夹,输入:

成功以后我们就可以看到在项目文件夹底下已经创建好了各种文件夹和配置文件:

.umirc.ts是用于写配置信息的,dist是在构建应用后生成文件的目录,src是自己写代码的地方,layouts是单页应用的全局布局(一般是一些菜单栏之类的),pages是一些页面组件的代码。

在umi中约定了很多目录应该存放什么信息,这是它的特点之一,这样做的好处是省略了繁琐的路径配置,坏处就是在文档里没解释清楚每个部分代码应当怎么写。

为了把配置更好的整理成一个个文件,我们可以选择在项目目录下创建config文件夹,并在里面新建config.js文件,该文件在没有.umirc.ts文件时会成为默认的配置文件。

在单页应用里,比较麻烦的问题就是路由处理,但是在umi中,我们只需要通过维护一张路由表即可解决路由问题。

具体方案是,新建config/routes.js文件,在文件内写入:

之后在config/config.js文件内写入:

在src/layouts/index.jsx中写入:

在src/pages/index.jsx中写入:

即可完成一个简单的 布局+页面组件 的配置。之后运行指令tyarn start,打开浏览器输入localhost:8000即可看到显示出一些信息。

那么这四个文件和umi在构建时分别完成了什么事情呢?

config.js只是简单的把routes.js里的路由表信息告诉umi,而routes.js中,返回了一个数组,该数组中每个元素是一个对象,每个对象描述了在遇到什么路由时(path),返回哪个组件(component),并且说明了路由是否要精确匹配(exact),而当我们描述的组件是一个布局(即写在layouts里面的组件),我们可以编写一些子路由(routes)。

在这个例子中,如果只是单纯访问 / 路由,即只会看到 Yay! Welcome to umi! ,但是我们访问 /index 路由时,可以看到多了一行 Page index。

原因是我们这样编写路由表时,umi会得知layouts/index.jsx是一个布局文件,因此,在我们访问/index时,它把/index所对应的页面组件作为布局文件的一个属性传给了布局,所以我们可以通过props.children将该页面组件放置到布局当中,就完成了一个简单的单页应用。

知道这样一个逻辑后,我们就可以将antd里的菜单组件放到layouts/index.jsx文件中,定制一个单页应用的菜单,再在pages里的页面组件组装各种antd的组件快速搭建一个应用。

还有一个问题就是组件间数据共享的问题,该问题一直都存在于React中,因此有了React-redux这样的解决方案,而dva也是基于React-redux的一个处理数据的框架(不得不吐槽官方的文档写得一般般啊)。

应用场景例如:在登录页面(pages/login.jsx)中登录成功,想要在菜单栏里显示用户名,当然可以在布局文件中下放一个函数作为login组件的一个属性,但是这样不优雅,如果要跨多层就比较不好搞。

使用dva的话先在package.json中写入dva的依赖,再新建src/models/global.js文件,写入:

该文件定义了一个命名空间为global的模型,初始化将username设置为null,在该命名空间里定义了一个函数setUserInfo,该函数会在接收到username后更新state里的username。

接下来我们在src/pages/login.jsx里编写:

而在布局文件里只需要编写:

这样就能完成数据传输,以后在任何文件要调用都只需要像布局文件中这样的方式编写映射函数即可。

具体构建后的应用效果,可以看一下我最近耗时三周从前端到后端再到评测机均独立完成的DPOJ:https://dpoj.ghyer.com

-- 热度:272 ℃
-- 于 共写了2106个字
-- 文内使用到的标签:

评论已关闭。