wasei-vuebone

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': 实例