Wmock开发之路1

前言

之前一直有个冲动,就是开发一个自己的Mock服务器,它即插即用,可以写接口文档,简单方便。用了市面上大多数的Mock类插件,还是无法满足需求。因此打算自己开发。

正文

准备阶段

首先肯定是确定需求,然后画结构图。


1.能提供随机生成合理的中文名 (独立模块)
  能根据参数生成指定姓氏,指定数量的中文名列表 (独立模块)

2.支持全国住址动态生成(独立模块)
  支持全国住址指定区域,指定数量列表生成(独立模块)

3.提供两种方式的服务(Web,命令行) 通过 mmock –web / mmock –cmd 命令区分
4.提供自定义服务端口并动态监听
5.提供各种基础模板的快速构建
=> 提供基础REST访问 并动态修改本地json
=> 提供自定义的复杂的数据处理方法
=> 提供自定义图片库(上传,删除,列表)

6.支持多项目数据分离
7.方便地管理项目中的所有 API与文档
=> API 接口 管理支持
   名称()
   /项目名/路径(需实现动态路由)
   描述
   请求类型(GET/POST)
   数据构造方式 => 动态生成
                   json导入
8.API 文档清晰直观并且方便查
9.支持热更新
10.跨域处理(使用后台转发 XMLHttpRequest 请求,无需配置 CORS)
11.提供简易版 postman 测试真实接口功能

imgn

imgn

随机中文名模块

关于这个模块一开始我是觉得很多mock生成中文字符串都是对一个区间的unicode码随机截取返回,对于长字符串而言这个结果还是可以的。这对于中文名而言这就不是很正常了。因此我们需要考虑怎么生成一个比较符合常规的中文名。 按照我一开始的想法就是先做一个百家姓的姓氏集合,然后再搭配随机中文。 然后在写之前我先去看了下现在大概有几种思路:


1.自定义姓氏 + 随机中文(不分繁体简体)
2.自定义姓氏 + 随机简体中文
3.自定义姓氏 + 小量名字库
4.随机中文名库
5.对汉字编码进行加权运算得出小概率正常的名字

随机中文有几种方法,一种是javascript里直接指定范围的unicode码转换。一种是区位码组合成汉字,需要指定高低位。

随机中文有个坏处就是还不是很符合中国起名的押韵和含义。虽然它已经是不错的选择。随机中文名字库需要一个大量的词典作为基础,因此也不符合。 而且还要考虑的男女名字的不同。因此我个人觉得不如自己做一个常用中文名的名字库,分单字和双字,分男女。

这个模块我发布到了npm上,直接输入npm install randomCname 即可。或者去github上下载。

随机地址

关于生成中国地址这里需要一个省市区街道的数据,但你如果搜索谷歌大半只有三级联动的,但是你github搜一下你会发现已经有前辈搜集了不少信息。当然你可以去把淘宝那一套扒下来,那个数据库是比较全的。

这个模块我发布到了npm上,直接输入npm install randomCaddress 即可。或者去github上下载。

开发流程设计

imgn

首先需要明确项目所需要的技术,不能为了炫技加一些黑科技上来。

1.为了快速开发引用css库semantic-ui
这个网上几种方法但是我试过后发现`import`方式不行
因此我改了一下方案
首先肯定是`npm install semantic-ui --save`
然后不用管webpack的配置。
直接在main.js里面添加
require('semantic-ui-css/semantic.css')
require('semantic-ui-css/semantic.js')

然后再vue组件的<Script><scirpt>中添加
import $ from 'jquery'


然后一切完成

2.使用vue2.0作为前端开发框架
使用路由切换的时候有个问题,因为打算在子组件里面修改vuex里的数据,一开始我是

  watch: {
    '$route' (to, from) {
      this.$store.dispatch('setNav', 'Project')
    }
  },
  
  但是效果是慢一拍显示,只有切换第二个页面的时候才会显示第一个数据。
  后来修改为即可:
    watch: {
    '$route' (to, from) {
      this.$store.dispatch('setNav', to.name)
    }
  }
  
3.整个应用开始设计想法是将所有数据存在前端的localstorage,因此需要大量对其进行读写操作,因此我打算在vuex开发数据交互层。虽然用mongondb作为数据库保存也可以但是我认为这样会影响简便易用,因为一开始是想做一个开盖即用的东西。

 
Table of Contents