wasei-vuebone

一个将融合vue2.x、vue-router^3.0.3、状态管理、数据请求/格式化等基础功能的集成开发环境

内置功能

• 自动加载路由文件并且初始化vue-router
• 自动加载状态文件(state对象)并且设定响应式，通过框架api快捷访问
• 自动加载请求文件(service类)，通过框架api快捷访问
• 请求文件中可通过规则对请求数据和响应数据进行格式化或自定义
• 提供持久化保存全局状态

引用

• CommonJS

const { Vuebone, Request, install } = require('wasei-vuebone');

• ES Module

import vuebone from 'wasei-vuebone';

or webpack下

import { Vuebone, Request, install } from 'wasei-vuebone';

• 浏览器

const { Vuebone, Request, install } = window[ 'wasei-vuebone' ]

示例

• 定义资源模块

  1.路由数据

    // src/routes/index.js
    import Index from './index.vue';
    import IndexHome from './index-home.vue';
  
    export default {
      path: '/',
      redirect: '/home/homeNiu',
      component: Index,
      children: [{
        path: 'home',
        component: IndexHome,
        children: [{
          path: 'homeNiu',
          component: () => import('./index-home-niu.vue')
        }]
      }]
    } 
    // => 会被Vuebone组装成routes数组，然后用于初始化Vue-Router

  2.State

  // src/states/global.js(定义全局状态的数据，文件名必须是global.js，因为Vuebone会将此命名的数据做本地存储)
  export default {
    token: 'token'
  }; // => 会被Vuebone组装成状态库的数据，转换成state的格式为{ global: { token: 'token' } } global就是模块名

  3.Request类

    // src/requests/user.js
    import { Request } from 'wasei-vuebone';
  
    export default class UserCar extends Request {
      constructor(opts) {
        opts.baseURL = 'http://localhost:7979';
        super(opts, {
          ids: 'toArray',
          value: 'toStr',
          quantity: 'toNumber', 
          dateStr: [ 'formatDate:yyyy-MM-dd' ],
          amount: 'formatAmount:2',
          nm: val => val * 100
        });
      }
  
      queryAllUser(payload) {
        return this.create('/api/users', payload);
      }
    }
  
    // => 会被Vuebone实例化然后以user

• 初始化Vuebone Vuebone的配置参数

  | 参数名称 | 参数类型 | 是否必填 | 参数说明 | |-------|-------|-------|-------| | routeLoader | Function | 是 | 路由模块加载器 | | stateLoader | Function | 是 | State模块加载器 | | requestLoader | Function | 是 | Request模块加载器 | | onReactive | Function | 是 | 实现状态响应式 | | onSet | Function | 是 | Vue.set引用 | | onDel | Function | 是 | Vue.delete引用 | | request| Object | 否 | Vuebone的Request基类配置参数，可在项目中的request模块的构造器中进行修改 | | request.baseURL | String | 否[ baseURL = '' ] | 相对url或者http开头的url | | request.timeout | String | 否[ timeout = 5 ] | 超时秒数 | | request.responseField | Object | 否 | 接口返回字段映射名 | | request.responseField.code | String | 否[ code = 'code' ] | 接口返回的code字段名，当code代表的属性值为0时候代表接口返回正确 | | request.responseField.message | String | 否[ message = 'message' ] | 接口返回的message字段名 | | request.responseField.data | String | 否[ data = 'data' ] | 接口返回的data字段名 | | request.getToken | Function | 否[ getToken = () => window.localStorage.getItem('token') || undefined ] | 传给接口的header token的获取方法 | | request.showError | Function | 否[ showError = errMsg => alert(errMsg) ] | 显示接口异常的函数 |

    import Vue from 'vue';
    import { Vuebone, install } from 'wasei-vuebone';
      
    Vue.use(install);
  
    const vuebone = new Vuebone({
      routeLoader: require.context('./routes', true, /\.js$/),
      stateLoader: require.context('./states', true, /\.js$/),
      requestLoader: require.context('./requests', true, /\.js$/),
      onReactive: Vue.observable.bind(Vue),
      onSet: Vue.set.bind(Vue),
      onDel: Vue.delete.bind(Vue),
      request: {
        baseURL: 'http://localhost:8888/api',
      }
    });
    const router = vuebone.getRouter(Vue);
    new Vue({
      el: '#app',
      vuebone,
      router,
      render(h) {
        return h(App);
      }
    });

• 组件中调用Vuebone实例完成功能 1.获取/新增/修改/删除state

  $vuebone.store.getValue(moduleName, key) // 获取

  $vuebone.store.setValue(moduleName, key, value) // 新增/修改

  $vuebone.store.deleteValue(moduleName, key) // 删除

  2.数组state的shift/unshift/pop/push

  $vuebone.store.push(moduleName, key, value)

  $vuebone.store.unshift(moduleName, key, value)

  $vuebone.store.pop(moduleName, key)

  $vuebone.store.shift(moduleName, key)

  | 参数名称 | 参数类型 | 是否必填 | 参数说明 | |-------|-------|-------|-------| | moduleName | String | 是 | 模块名（操作global.js文件下的token，那么模块名就是global）| | key | String | 否 | 属性名，支持通过.方式引用嵌套属性，只有在调用deleteValue的时候如果不传就是删除该模块 | | value | Any(任意类型) | 是 | 属性值，只有在调用setValue传入才有效 |

  <template>
    <div>
      <div>global模块下的token值: {{ $vuebone.store.getValue('global', 'token') }}</div>
      <button @click="$vuebone.store.setValue('global', 'token', 100)">设置global模块下的token值</button>
      <div>user模块下的token的第一个元素的name属性值: {{ $vuebone.store.getValue('user', '0.name') }}</div>
      <button @click="$vuebone.store.setValue('user', '0.name', '测试')">设置user模块下的token的第一个元素的name属性值</button>
      <div>user模块下的token的第一个元素的name属性值: {{ $vuebone.store.getValue('user', '0.name') }}</div>
      <button @click="$vuebone.store.setValue('user', '0.name', '测试')">设置user模块下的token的第一个元素的name属性值</button>
    </div>
  </template>
  
  <script>
    export default {};
  </script>

  3.定义请求的数据格式化和响应的数据格式化规则 | 规则名称 | 规则说明 | |-------|-------| | toArray | 字符串转为数组 | | toStr | 数组转为字符串 | | toNumber | 字符串转数字 | | formatDate|yyyy-MM-dd | 日期格式； yyyy-MM-dd代表转换的格式； yyyy:年 MM:月 dd:日 HH:时 ii:分 ss: 秒；默认为yyyy-MM-dd HH:ii:ss | | formatAmount|2 | 金额格式；2代表按2位数字进行分割；默认为3 | | () => {} | 自定义规则 |

    //src/requests/user.js文件模块
    import { Request } from 'wasei-vuebone';
  
    export default class UserCar extends Request {
      constructor(opts) {
        // 如果想自定义值，因为opts就是初始化Vuebone的构造器参数对象的request属性对象 可直接通过opts.属性进行覆盖
        opts.baseURL = 'http://localhost:7979';
        // super第2个参数是注入请求前数据格式化规则对象
        // super第3个参数是注入响应后数据格式化规则对象
        super(opts, {
          ids: 'toArray',
          value: 'toStr',
          quantity: 'toNumber', 
          dateStr: [ 'formatDate:yyyy-MM-dd' ],
          amount: 'formatAmount:2',
          nm: val => val * 100
        });
      }
  
      queryAllUser(payload) {
        return this.create('/api/users', payload);
      }
    }
  
    // 组件中request.user对应src/requests/user.js定义的类的实例对象
    this.$vuebone.request[ 'user' ].queryAllUser({
      ids: '0x1,0x2,3,true',
      value: [1, 2, 3],
      dateStr: Date.now(),
      amount: 13000232342.02,
      quantity: '29.02', 
      nm: 101,
      name: 'demo'
    });
    /* => 最终传给接口的为 { 
      ids: [ '0x1', '0x2', 3, true ],
      value: '1,2,3',
      dateStr: "2024-05-24"
      amount: '1,30,00,23,23,42.02',
      quantity: 29.02,
      nm: 10100,
      name: 'demo' 
    }
    */

  4.Vuebone的Request的方法，被项目中的Request类继承 create(url, data, isNoRepeat = false) 发送post请求

  | 参数名称 | 参数类型 | 是否必填 | 参数说明 | |-------|-------|-------|-------| | url | String | 是 | 请求url | | data | Object | 否 | 请求数据 | | isNoRepeat | Boolean[ isNoRepeat = false ] | 否 | 是否禁止重复请求 |

  fetch(url, params, isNoRepeat = false) 发送get请求

  | 参数名称 | 参数类型 | 是否必填 | 参数说明 | |-------|-------|-------|-------| | url | String | 是 | 请求url | | params | Object | 否 | 请求数据 | | isNoRepeat | Boolean[ isNoRepeat = false ] | 否 | 是否禁止重复请求 |

  cancel 取消当前请求

注意

• 定义state模块文件时，如果需要定义持久化状态，文件名必须为global.js
• 定义Request模块类，需要继承Vuebone.Request，并且支持嵌套目录；如user/car.js会被解释成'user/car': 实例