y900-components v0.0.119-0

项目介绍

云盾系统-公共UI组件库

脚手架介绍

https://github.com/stephenliu1944/scaffolding-ui-lib-es6

部署

1. 注册和登陆

注册npm账号, 执行后会依次提示输入用户名, 密码, 邮箱.

npm adduser  

登录npm服务, 便于发布.

npm login

2. 发布

1. 发布X版本号执行 bin/publish-major.bat, 表示有重大更新, 并且不兼容老的版本.
2. 发布Y版本号执行 bin/publish-minor.bat, 表示有功能更新, 并且兼容老的版本.
3. 发布Z版本号执行 bin/publish-patch.bat, 表示有bug修复, 并且兼容老的版本.
4. 发布预发布版本号执行 bin/publish-prerelease.bat, 表示该版本还在开发测试中, 可能会有较大改动.
5. 从服务端卸载模块执行 bin/unpublish.bat.

使用

DI

依赖注入，用于公共组件组件中需要依赖项目对象方法，可通过依赖注入的方式传给公共组件库

/**
 * DI, 依赖注入
 */
var dependencies = {};

export function inject(modules) {
    Object.assign(dependencies, modules);
}

export function extract(name) {
    var module = dependencies[name];
    
    if (!module) {
        throw `未注入模块"${name}"`;
    }
    return module;
}

使用

import { DI } from 'y900-components';

// http 为某一个对象，如：axios
DI.inject(http);

HttpSettings

@easytool/http 组件项目公共配置

import requestInterceptor from './requestInterceptor';
import beforeRequest from './beforeRequest';
import afterResponse from './afterResponse';

export default {
    cache: false,
    timeout: 10000,
    withCredentials: false,
    validateStatus(status) {
        return status < 500;
    },
    requestInterceptor,
    beforeRequest,
    afterResponse,
    responseFilter(response) {
        return response.data.data;
    }
};

使用

import { settings, proxyHost, HttpMethod } from '@easytool/http';
import { HttpSettings } from 'y900-components';

settings({
    ...HttpSettings,
    method: HttpMethod.POST,          // 默认都是post请求
    proxyPath: __DEV__ && proxyHost,
    isDev: __DEV__
})

Enums

项目枚举项配置

// http协议头Content-Type
export const ContentType = {
    JSON: 'application/json',
    FORM_URLENCODED: 'application/x-www-form-urlencoded'
};
// 接口前缀
export const API = {
    // 版本
    V1: '/api/v1.0',
    // 门户
    HOMEPAGE: '/api/v1.0/homepage-service',
    // 数据支撑系统
    SUPPORT_SERVICE: '/api/v1.0/backup-service',
    // 数据综合管理
    DATA_MANAGEMENT: '/api/v1.0/index-service'
};

使用

import { Enums } from 'y900-components';

console.log(Enums.API);

StatusCodes

项目公共状态码

// http 状态码
export const SUCCESS = 200;            // 请求成功
export const NOT_AUTH = 401;           // 未登录 
export const NOT_PERMIT = 403;         // 没有权限访问
export const INVALID_AUTH = 426;       // TOKEN 失效

// response 状态码
export const OK = 1000;                 // 成功
export const FAIL = 2000;               // 失败

使用

import { StatusCodes } from 'y900-components';

console.log(StatusCodes.SUCCESS);

Routes

获取前端子系统地址

// 门户首页
Routes.getHomepageHost() 
// 数据采报系统
Routes.getCollectServiceHost()
// 数据支撑系统
Routes.getSupportServiceHost()
// 数据综合管理
Routes.getDataManagementHost()  
// 检验登录状态
Routes.checkLogin()
// 跳转登录页面
Routes.goSignIn()

注意: 在项目 package.json > devEnvironments > globals 中可配置开发环境的跳转地址

"devEnvironments": {
  ...
  "globals": {
    "__HOMEPAGE_HOST__": "",
    "__COLLECT_SERVICE_HOST__": "",
    "__SUPPORT_SERVICE_HOST__": "",
    "__DATA_MANAGEMENT_HOST__": "",
  }
}

server

获取后端API服务地址

// 门户子系统
Servers.getHomepageServer()
// 采报子系统
Servers.getCollectServiceServer()
// 数据支撑系统
Servers.getSupportServiceServer()
// 数据综合管理
Servers.getDataManagementServer

注意: 在项目 package.json > devEnvironments > globals 中可配置开发环境接口服务根路径地址

"devEnvironments": {
  ...
  "globals": {
    "__HOMEPAGE_API__": "",
    "__COLLECT_SERVICE_API__": "",
    "__SUPPORT_SERVICE_API__": "",
    "__DATA_MANAGEMENT_API__": "",
  }
}

UI 组件

Demo

UI组件案例