Wasei-vuebone NPM

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

vue-framework common-framework vue-develop-env

vue-router wasei-useful-util

1.0.1

1 year ago

1.0.0

1 year ago