mock数据的好工具

对于web前端开发来讲,在UI有了基本的模样之后就需要考虑添加数据的问题了,没有数据很多UI的交互效果都不好开发。

Mock数据的工具也有很多很多。这里介绍一个商业化的产品,当然对于大部分的简单应用来讲免费的功能已经足够了。

这款工具叫做Mockaroo,这里主要介绍两个方面的内容,一是数据生成器的一些技巧,用来生成一些比较复杂的mock数据;另一个是它提供的REST API服务,让开发变得更容易更接近最终的产品。

数据生成器

 

1

默认状态下,mockarro会为用户生成一个新的schema,在进行了设置之后,用户可以保存这个schema

Schema描述一个table的结构,每一个元素是一个field,可以定义基本的name,另外是type,这是最基本。

关于Type,这个平台提供了很多默认的type,如下:

 

2

urlip地址这些类型就非常方便,其他的type选项也都挺有帮助的,能加速你mock data的速度,而且mock出来的data语义化也更好,比如你需要name,那么它生成的就真的是各种实际的name,而不是杂乱的字符串,让下一步的开发体验更好一点。

当然build-intype不可能面面俱到,总需要自定义很多东西,在我的使用中碰到了下面几种情况与技巧,可以生成出关系更复杂的数据。

fx函数处理

 

3

这里面可以对随机生成的数据做各种处理,比如此处 ‘Service’ + this, this指向的就是当前的随机数据,处理之后会在前面加上Service_的前缀。其他的函数处理估计还有更加复杂的功能

Regular express

 

4

type设置成regular expression. 就可以按照你的需要生成具有一些约束的数据。比如我的case里,serviceType需要是0,1,2中的一个,这个时候就可以用正则表达 ((0|1|2){1})来实现。

Formula

如果一个field的数据依赖于另一个field的数据,那么就可以通过formula在两个数据之间建立联系。比如希望一个新fieldapiDescribe,等于现有的一个fieldserviceDescribe,就可以如下设置:

 

5

嵌套的对象数据

Web应用中有很多时候都会用到嵌套的对象数据,对于这点,这个平台支持的也不错。比如我当前的schema中有一个数据inputParams,它是本身就是一个对象,包含id, serviceid,paramName等属性。这种情况可以如下设置:

 

6

inputParams设置为JSON Array,然后它的下层属性名按照: inputParams.xxx的方式去写。所有的相关数据就形成了一个嵌套的对象数据。

REST API

这个功能还是很不错的,当然它支持把数据download下来,但是如果能直接接受http请求不是更好吗?这个平台就提供了这个功能,不过貌似只能接受get请求。使用的方法也挺简单,把api_key加到url里就行了。另外把刚刚创建并保存的schema加上就行了。

 

7

vuex初步解析

原文链接:https://metricloop.com/blog/how-to-use-vuex-in-a-laravel-spark-project

期初最开始学习Vuejs2.0版本的时候,就发现它并不支持build-in的消息机制,比如$broadcast$emit之类的,因为自己之前都是使用AngularJS的,对于这个消息机制还是觉得挺方便的,尤其是在兄弟组建之间传递参数的时候(不过貌似从Angular2开始,好像也不再支持这些消息api了)。

vue的框架下,一般有两种解决方案,一种是开发一个event hub或者event busvue实例,专门来处理各种消息。另外一种方法就是使用vuex状态管理器。

code前的一点儿思考

关于这两种方法的思考如下: 一个简单的event hub,会随着前端组件的复杂化而变得越来越不受控制。另外,使用event hub的方案其实也并不像vue这个框架本身处理问题的风格。其实观察下vue2.0相比vue1.0的变化就可以发现,设计者在极力的浓缩vue的核心功能,为此他们把额外的功能放到了其他的包里面,或者依赖第三方的包,甚至直接从这个系统中移出去了。所以还是使用vuex是正道。

开始动手code

第一件事儿就是安装Vuexnpm install vuex。安装完成之后,首先需要创建一个新的文件: store.js,这里定义的就是整个app的状态管理器。

我们还需要把这个状态管理器storeveu实例结合起来,需要到入口文件app.js (根据你的实际项目而定)中引入vuex,并在注册vue实例的时候,加入store做个饭属性,这样整个应用的所有子组件就都可以获取store中的状态值了,像下面这样:

1

定义store状态管理器

在正确的引用和设置了相应的vuex之后,下面就可以来定义store了。首先需要在stoer.js文件中引入vuevuex

2

现在就可以放心大胆的创建全局的vuex store了。关于vuex下面这个官方文档中的图,可以很好的解释其中的一些关键概念:

3

可以这样理解其中的几个部分之间的关系:vue组件在接受用户的一些操作之后,可以在相应函数中想vuex提交action(dispatch action). action中,一般可以做跟后台的异步操作,然后在操作完成之后,提交mutation(commit muation),另外一个action中还可以对多个mutation进行封装,这样比较省事,这是action的俩个主要的价值,因为其实在vue组件中是可以直接commit mutation的。而mutation是唯一能改变state值的操作。在state的值发生变化之后,组件的UI得到渲染,一般组件可以通过它的computed计算属性来获得state的值,但是通用的最佳实践是通过storegetter来封装一层,再跟组件进行交互。

4

上面这段代码采用了模块化的方法来定义store,而不是把所有的东西都放在store内部,这样其实是很好的代码风格。这里主要定义了四个const,每一个都是vuex的关键组成部分。

state常量里,定义了state的初始状态值,其实就和组件的data属性是一个样的。然后在getters常量里,对count值进行了加1的操作,getter能够让组件获取countPlusOne,其实getter就和组件的computed很类似。第三个常量是mutation, 里面只有INCREMENT一个操作,这样当它被commited的时候,count值就会加1。最后一个是actions常量,里面定义一个increment action,可以从组件中被dispatch,并进一步commit INCREMENTmutation

在组件中使用Vuex中的state

定义好store中的state之后,下一步就是让vue组件和state进行交互。为此我们定义了一个很简单的组件,点击按钮实现加1效果,很简单的组件吧。

5

这是一个非常典型的Vue组件,通过.vue格式的单文件来定义。这里面有三个东西比较新鲜,这些新鲜玩意是让我们跟vuex state进行通信的。vuex提供很多方便的语法糖,这些语法糖可以让组件和vuex的交互更加方便。比如在这个组件模块中,我们引入了mapGettersmapActions,这就是组件和vuexgetteractions进行通信的映射语法糖。在computed计算属性中,我们用mapGettersstate映射到组件中。注意到这里采用了对象语法,{‘count’: ‘countPlusOne’}, 相当于是把countPlusOne重命名为count. 同样的方法,也可以用mapActionsincrement action映射到组件的method里。注意这里都使用了这种扩展运算符。