1.0.1 • Published 1 year ago

wasei-vuebone v1.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
1 year ago

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';

示例

  • 定义资源模块

    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的配置参数

    参数名称参数类型是否必填参数说明
    routeLoaderFunction路由模块加载器
    stateLoaderFunctionState模块加载器
    requestLoaderFunctionRequest模块加载器
    onReactiveFunction实现状态响应式
    onSetFunctionVue.set引用
    onDelFunctionVue.delete引用
    requestObjectVuebone的Request基类配置参数,可在项目中的request模块的构造器中进行修改
    request.baseURLString baseURL = '' 相对url或者http开头的url
    request.timeoutString timeout = 5 超时秒数
    request.responseFieldObject接口返回字段映射名
    request.responseField.codeString code = 'code' 接口返回的code字段名,当code代表的属性值为0时候代表接口返回正确
    request.responseField.messageString message = 'message' 接口返回的message字段名
    request.responseField.dataString data = 'data' 接口返回的data字段名
    request.getTokenFunction getToken = () => window.localStorage.getItem('token') || undefined 传给接口的header token的获取方法
    request.showErrorFunction 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)

    参数名称参数类型是否必填参数说明
    moduleNameString模块名(操作global.js文件下的token,那么模块名就是global)
    keyString属性名,支持通过.方式引用嵌套属性,只有在调用deleteValue的时候如果不传就是删除该模块
    valueAny(任意类型)属性值,只有在调用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请求

    参数名称参数类型是否必填参数说明
    urlString请求url
    dataObject请求数据
    isNoRepeatBoolean isNoRepeat = false 是否禁止重复请求

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

    参数名称参数类型是否必填参数说明
    urlString请求url
    paramsObject请求数据
    isNoRepeatBoolean isNoRepeat = false 是否禁止重复请求

    cancel 取消当前请求

注意

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

1 year ago

1.0.0

1 year ago