2019年11月

接上一篇:http://blog.ixiewei.com/index.php/archives/205.html

项目配置到这里之后,接下来就需要处理以下配置了:
1 国际化
2 store的数据存储结构

国际化和store数据结构的设计:

此处采用immutable数据格式(immutable一款很棒的数据操作工具,此处不做详解,有兴趣的同学可自行学习),把数据存于model,同样国际化的判断参数定为: i18n 存于app的model中,取值来源于浏览器的本地缓存localStorage用户若设置了某种语言,则存在这里,用户下次访问系统,也依然能唤起上次所选中的语言,当初次访问时,语言默认先取自浏览器,若依然取不到则默认咱们的中文。



- 阅读剩余部分 -

思索良久,决定还是记录下心得体会:一个基于create-react-app官方脚手架,搭建起来的dva开发模式的react项目。

当然现今的前端市场如此强大,你可以在网络上找到你想要的任何脚手架,并且很多可以开箱即用,不可否认它们很优秀,开发它们的人或团队更值得我们竖起大拇指,为他们点赞!比较适合国人还是阿里系的一套react开发脚手架,dva-cliantdUmi等,当然gitHub上也有诸多优秀的脚手架,有兴趣的同学可以自行查阅学习。

这里,仅仅以react官方脚手架开启项目,安装采用dva方式的,构建项目,展示记录过程中遇到的各种点和Keng,若你也遇到类似问题,也许能帮上你。

- 阅读剩余部分 -

最近项目中有此需求,react地图组件的开发:

1 输入地址可查询出对应地图位置并标记点
2 能返回经纬度,并提交服务端保存
3 在地图上点击某一点,也能返回对应经纬度和地址信息
4 国内,国外均可使用

经过调研决定,采用谷歌地图和高德地图来封装组件,当渲染地图组件时,先试图请求谷歌map的api,若能访问则使用谷歌地图,若不能访问,则调用国内高德地图。




- 阅读剩余部分 -

众所周知,作为前端开发人员,经常会遇到跨域联调的场景,那么Chrome浏览器也是我们首选的调试浏览器。

解决Blocked current origin from receiving cross-site document at问题,即跨域问题。

Chrome浏览器跨域设置方法:

在快捷方式中设置:--disable-web-security --user-data-dir

- 阅读剩余部分 -

最近公司的某产品中,有动态热图的展现,分别展现某个时间段的热图时间变化,例如:最近一周七天内,每天的热图分布变化图;客户提出一个需求,这个动态变化的图生成一个gif图提供下载是否可行?

实现方案:

1.可通过服务端生成对应gif,然后前端请求下载
2.前端自己实现生成gif图片,自行下载


- 阅读剩余部分 -

最近公司项目中,有对文件的导出(下载)的功能,当然普通的下载方式,比如访问一个后台文件流地址,直接生成对应的文件,下载即可,地址栏中也可携带一些控制参数等(例如?a=1&b=2),但这个项目的api接口,均采用的在headers中传控制参数方式,故而就只能采用其他方式了。

于是,经过考虑,通过ajax方式请求到后台的二进制流文件,采用Blob对象的方式保存在本地,这样文件的名称,后缀规则均可由前端自定定义完成,具体方式如下:

- 阅读剩余部分 -

npm是一个很好用的工具,全场是Node Packet Manager,是一个nodejs的包管理工具,但是美中不足的是当我们去安转包的时候却发现下载的速度太慢,但是没关系,还是有方法的就是利用淘宝的国内镜像,一下是3个设置的方法:

镜像使用方法(三种办法任意一种都能解决问题,建议使用第三种,将配置写死,下次用的时候配置还在):

- 阅读剩余部分 -