nginx 请求接口强制前端页面跳转_前端服务开发体验 – 学习使用数据流转管理页面数据...

网络请求

Axios请求库

「axios」是流行的HTTP请求库，可快速集成在项目中，可以通过以下命令快速安装axios：

yarn add axios或npm install ——save axios

axios请求可以通过async await取得最终的请求返回数据。基于axios封装get和post的函数工具，在一级目录下新建axios文件夹，新建tools.js文件：

Message弹窗组件

Message是页面全局提示组件，可以用来对于请求异常返回码进行弹窗，提示网络状况，编写函数对请求返回code码进行判断。

API封装

在tool.js中定义了请求的方法，将各请求写入组件将变得难以维护和管理，统一将API请求写进axios/index.js。

Dva管理数据

如何在header组件内选择不同设备，主页自动请求跳转此设备相关的数据？

Dva提供了简单易用的解决方案，所有的组件存储在一个状态对象state中，各组件通过请求改变state。

在dva中有三个核心概念：state、action和view。

State是中心数据仓库，通过组件的props连接到组件内部，组件发生操作会dispatch一个action给state，从而通知state完成改变。

随着前端组件增多，功能划分分散，所有的组件维护同一个state是非常危险的。Model是dva中state的单元，每个前端功能块一个model实现解耦。

多个小的model的state以namespace为key合成，开发者可以依照业务逻辑，通过namespace来对state进行划分，最终交给dva处理。

Model的常用配置有namespace、state、reducers、effects：

Namespace：当前model的名称。整个应用的state，有多个小的model的state以

namespace为key合成。

State：该model当前的状态。数据保存在这里，直接解决了视图层的输出。

Reducers：action处理器，处理同步动作，用来算出最新的state（必须返回一个新的

state）。

Effects：action处理器，处理异步动作（进行网络请求的调用，再调用执行reducers刷新

state）。

编辑主页model

新建主页model，新建main/models/main.js，分为namespace、state、reducer和effect。

Model与组件的connect

在model中定义了组件所需要的数据和网络请求函数，用connect将组件所需数据和请求函数绑定。

「connect」将model和组件联系在一起，可以让组件访问state中的数据，调用state中reducer方法和effect方法，一个model可以connect到多个组件，多个组件可以共用一整套数据，共享一整套方法，model中数据的改动会实时改变在组件的UI显示上（通过props传入，组件对应的声明周期函数会被调用（componentWillReceiveProps））。

Model和组件connect后的项目示例代码打包在项目仓库/exercise3下，启动前通过yarn命令安装依赖。

项目打包

前端项目文件多，体系复杂，一般使用打包工具对项目进行打包压缩，最终只需要部署压缩后的文件。Umi集成了打包工具webpack，在项目主目录下执行umi build：

打包构建的输出在dist文件夹下，众多的js文件被压缩打包进umi.js，css被打包压缩进umi.css，图片等前端素材被打包进static文件夹，打包后目录结构如下所示：

执行umi build打包后的前端内容想要实现应用文件的高性能分发，还需要将项目部署到高性能服务器上去，「nginx」是一款流行的免费开源服务器软件，配置简单，性能强大，经常在生产环境中使用。

Windows环境下nginx配置内容与Ubuntu基本一致，目录地址与Ubuntu稍有差异，文件系统地址需要改为”/”，nginx 1.14版下载地址： https://nginx.org/download/nginx-1.14.2.zip，下载解压后，修改conf文件夹下nginx.config内容即可，点击解压文件夹下.exe文件，即可启动nginx，windows环境下nginx的重启与关闭可以通过任务管理器执行。

参考资料：[HTML]教程：http://www.runoob.com/html/html-tutorial.html

[CSS教程]：http://www.runoob.com/css/css-tutorial.html

[JavaScript教程]：http://www.runoob.com/js/js-tutorial.html

[React学习教程]：http://www.runoob.com/react/react-tutorial.html

[React中文文档]：https://react.docschina.org/

[UMI官方网站]：https://umijs.org/zh/

[Ant Design官方网站]：https://ant.design/index-cn

[DVA官网网站]：https://dvajs.com/

点击链接观看更多相关课程

电堂科技​c.51diantang.com