Skip to content

T
together
提交 af27183e 作者: 潘亚楠
操作

添加 README.md

上级
正在显示 包含 574 行增加 和 0 行删除
README.md 0 → 100644
[TOC]
# 公共库
## ElementUI组件库
日期|修订人|版本|描述
--|--|--|--
2019-6-7|刘秋月|1.0.0|初定版本
2019-12-12|刘秋月，王磊|1.0.1|稳定版本
### 组件库使用指导
> web端组件库cdn新地址
> - 200 使用地址
> - http://192.168.10.200:7400/libs@1.0.1/index.js
> - http://192.168.10.200:7400/libs@1.0.1/theme-chalk/index.css
> - 测试环境地址
> - https://dweb.allhome.com.cn/libs@1.0.1/index.js
> - https://dweb.allhome.com.cn/libs@1.0.1/theme-chalk/index.css
> - 线上环境地址
> - https://web.allhome.com.cn/libs@1.0.1/index.js
> - https://web.allhome.com.cn/libs@1.0.1/theme-chalk/index.css
> web端组件库cdn老地址
> - 200 使用地址
> - http://192.168.10.200:7400/index.js
> - http://192.168.10.200:7400/theme-chalk/index.css
> - 测试环境地址
> - https://dweb.allhome.com.cn/index.js
> - https://dweb.allhome.com.cn/theme-chalk/index.css
> - 线上环境地址
> - https://web.allhome.com.cn/index.js
> - https://web.allhome.com.cn/theme-chalk/index.css
### 使用方法
- 在 `index.html` 中引入上述地址，示例代码如下：
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 引入样式(地址根据环境配置) -->
<link rel="stylesheet" href="https://web.allhome.com.cn/theme-chalk/index.css">
<title>埋点demo</title>
</head>
<body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- 引入组件库(地址根据环境配置) -->
<script src="https://web.allhome.com.cn/index.js"></script>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
```
- 在 `build` 文件夹中找到 `webpack.base.conf.js` 文件，在 `module.exports` 中添加如下代码：
```JSON
externals: {
'vue': 'Vue',
'element-ui': 'ELEMENT'
}
```
- 找到 `main.js` 文件，按照正常引用组件库的方式引入就可以了，因为在 `index.html` 文件中引入了样式，不需要再特意引入主题样式。
## CubeUI组件库
> ## 千家Web标准库使用说明文档
- [简介](#1-简介)
- [安装](#2-安装)
- [引用](#3-引用)
- [使用介绍](#4-使用介绍)
> #### 1. 简介
为提高现有工作开发效率，能够更加的规范化各个项目代码情况，开发web端标准库，针对各个项目中常用方法进行封装，以达到代码规范化初步效果。
> #### 2. 安装
web端标准库上传到公司内部管理仓库中，若想使用npm安装使用，需要先将下载源指向公司内部地址：
```
// 私有仓库
npm config set registry http://39.106.145.141:9000/repository/node-public/
// 公共仓库
npm config set registry http://registry.npmjs.org/
```
安装：
```
npm install --save-dev common
```
cdn引用
```
<script src="https://qjsl.allhome.com.cn/index.js"></script>
externals: {
"common": 'QjMethod'
}
```
> #### 3. 引用
安装完成之后需要在项目中正常引用
```
import common from "common";
```
由于现版本功能不完善提供的东西不是太多，包括内容：
1. middleware - Vue中间件
2. Request - axios二次封装
3. ControlToken - 控制token的设置与获取(统一登录)
4. ProxyIframe - 跨页面通信(统一登录)
> #### 4. 使用介绍
介绍各个模块的使用方法：
> middleware
```
import {middleware} from "common";
Vue.use(middleware);
```
middleware中包含V-by指令，用于统一登录按钮权限，v-by:
```html
<el-button v-by:arg="['123']" limit="123">导出</el-button>
```
方法：
```JavaScript
let a = {a:1};
// 目前只有深度拷贝对象方法
let o = this.$Qj.cloneDeep(a);
```
> Request
使用：
*.js
```JavaScript
import {Request} from "common";
import api1 from "@/api/a2.js";
// 默认参数
// 第一个参数axios配置
// 当前环境变量
// 项目名称
let request = new RequestFactory({
baseURL: "http://192.168.10.200:8010/api"
},"development","domes");
// 拦截器
request.interceptors({
request:(config) => {
return config;
},
response:(config) => {
let {data} = config;
if(data.StatusCode && data.StatusCode !== 200) return Promise.reject(data);
return data.Model;
},
error:error => {
return Promise.reject(error.data);
}
})
// 添加数据
request.add("api1",api1);
// 创建
let a1 = request.create("api1");
// 发起请求
a1.getHead({
param:["head"],
query:{
b:132132
},
data:{
a:1321231
}
}).then((res) => {
console.log(res);
})
```
a2.js
```JavaScript
const apiArr = [
{
url:"/list/tabel",
method:"get",
defaultData:{
a:1
},
name:"getHead"
}
];
export default apiArr;
```
> ControlToken
setToken 仅限 `globalToken`和`token`
```JavaScript
let controlToken = new ControlToken();
controlToken.setToken("globalToken","23211321312121");
console.log(controlToken.getToken());
```
> ProxyIframe
父应用：
```JavaScript
import {ProxyIframe} from "common";
const globalPath = new Map([
['development', {
domain: "qj.com",
portal: "http://wrp.qj.com"
}],
['lan', {
domain: "qj.com",
portal: "http://wrp.qj.com"
}],
['pred', {
domain: "allhome.com.cn",
portal: "https://dmis.allhome.com.cn"
}],
['production', {
domain: "allhome.com.cn",
portal: "https://mis.allhome.com.cn"
}]
])
// 生产环境变量
const env = process.env.NODE_ENV;
// 实例化代理
const proxyIframe = new ProxyIframe({env,type:"prent"});
// 对比token
// 子应用更新token时,对比token是否发生改变,未改变重写cookie
let contrastToken = "";
// 正在写入token...
let cookieWriteing = null;
!function proxyInit() {
proxyIframe.solve(globalPath);
proxyIframe.run("globalToken", () => {
// 正在写入token...,并且有对照token
if (cookieWriteing && contrastToken) return contrastToken;
// 有token返回token
if (cookieToken) return cookieToken;
}, val => {
if (!val) return
// 没有对照token或者token发生改变,写入token
if (!contrastToken || (contrastToken != val)) {
// 更新cookie中...
cookieWriteing = setTimeout(() => {
clearTimeout(cookieWriteing);
cookieWriteing = null;
}, 1000)
// 写入token
contrastToken = val;
}
});
}();
```
子应用：
```JavaScript
import {ProxyIframe} from "common";
const globalPath = new Map([
['development', {
domain: "qj.com",
portal: "http://wrp.qj.com"
}],
['lan', {
domain: "qj.com",
portal: "http://wrp.qj.com"
}],
['pred', {
domain: "allhome.com.cn",
portal: "https://dmis.allhome.com.cn"
}],
['production', {
domain: "allhome.com.cn",
portal: "https://mis.allhome.com.cn"
}]
]);
const env = process.env.NODE_ENV;
const proxyIframe = new ProxyIframe({env,type:"child"});
proxyIframe.solve(globalPath);
proxyIframe.run("token",
() => parent.window.globalToken,
val => parent.window.globalToken = val);
```
> ### 导出excel
```JavaScript
import {DownExcel} from "common";
let downExcel = new DownExcel({
// 表头数据
head,
// 导出数据
data:res,
// data数据中所需要导出数据的字段
key:"data",
// 文件名称
fileName:"Exportsuccess",
// 导出数据表头所需导出数据的字段
headKey:"headerFirst",
// 合并单元格信息
merge:{
// 头部信息
head:[
['部门', null, null, '其它信息']
],
// 合并单元格
info:[
// 设置A1-C1的单元格合并
{
// 开始
// r：第几行
// c：第几个单元格
s: {r: 0, c: 0},
// 结束
// r：第几行
// c：合并到第几个单元格，从0开始
e: {r: 0, c: 2}
},
{
s:{r:0, c:3},
e:{r:0, c:11}
}
]
}
}).
downExcel(). // 开始导出
then(() => {
console.log("导出成功");
})；
```
> ### 异步队列同步请求
```JavaScript
AsyncWhile(() => {
return // 条件
}, async () => {
// 请求
}).then((res) => {
// 请求成功 res为数据集合
}).catch((error) => {
// 其中有数据请求错误
// error错误信息
});
```
> ### 常用正则
```JavaScript
// 存在对象中
import {collectionRegExp} from "common";
// ticketDeal chinese
// 为函数
chinese("0,50") // 0-50的个中文字符
```
> ### 常用校验方法
```JavaScript
// 存放一些常用的校验方法
import {testMethod} from "common";
```
> ### 原型添加方法
```JavaScript
import {mountNumber,
mountArray,
mountString} from "common";
mountNumber();
// 数字查用方法
// changeToChinese 转中文 ****元
// micrometer 添加千分符
// numberToChinese 数字转大写
mountArray();
// 数组常用方法
// checkEl 查找元素
// checkIndex 获取index
// plan 数组占总数值的百分比是多少
// sort 排序
mountString();
// 常用校验方法
// mountTrim 去除空格
// passwordCheck 密码强度校验
// 常用校验方法 例如："1380013800".isPhone();
```
> ### 单例
```JavaScript
import {Singleton} from "common";
let singleton = new Singleton();
// 存储
singleton.createInstance("需要创建的实例","s实例名称","...参数");
// 创建
singleton.getInstance("$_requestFactory");
```
## Node标准库
## 前端脚手架
## ElementUi表单设计器
## CubeUi表单设计器
## 模板设计器
# 公共服务
## 房源验真
## 短信服务
## 平台日志
### 用户操作日志对接文档
#### 更新 2019.11.14
1.更新请求拦截器，造成部分项目不执行，去除异步。
最新版本：<script src="https://cdn.jsdelivr.net/npm/web_notebook@0.0.7/libs/BuriedPoint.js"></script>
#### 说明
目前整个mis平台的日志系统，没有将前后端的日志串联起来，基于全链路追踪日志的设计，需要设计出一款适用于整个平台的日志系统。
平台日志的组件库可能与原有组件架子不同，所以使用平台日志组件的项目须仔细查看样式。
#### 日志形成及流向
+ 用户的交互操作(如按钮点击),会由组件库(或插件)生成统一的唯一key(时间戳+账号信息)；
+ 组件库(或插件)将该key + 用户交互信息发送到日志服务, 写入数据库；
+ 因该次操作所产生的业务请求,也会携带key, 发送到业务服务;
+ 标准库中的拦截器将key + 业务服务的正常/异常响应,通过MQ发送到日志服务,日志服务消费之后，通过key形成用户操作到服务响应的闭环
#### 前端对接
##### 安装依赖
``` bash
1. index.html中组件库新地址测试和线上
<script src="https://dwebv2.allhome.com.cn/index.js"></script>
<link rel="stylesheet" href="https://dwebv2.allhome.com.cn/theme-chalk/index.css">
<script src="https://webv2.allhome.com.cn/index.js"></script>
<link rel="stylesheet" href="https://webv2.allhome.com.cn/theme-chalk/index.css">
2. index.html中加载CDN模块
<script src="https://cdn.jsdelivr.net/npm/web_notebook@0.0.6/libs/BuriedPoint.js"></script>
3. webpack配置依赖 webpack.base.conf.js
externals: {
'buriedPoint':'BuriedPoint',
},
```
##### 指令使用 项目入口文件 main.js
``` bash
// 操作收集指令
import buriedPoint from 'buriedPoint';
Vue.use(buriedPoint);
```
##### axios替换
将axios替换为buriedPoint模块的Request, 该Request为[web标准库](https://git.allhome.com.cn/NetWorksDatas/Public/standard/blob/master/%E5%8D%83%E5%AE%B6Web%E6%A0%87%E5%87%86%E5%BA%93%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E%E6%96%87%E6%A1%A3.md)中封装的
##### 由easy-mock-cli生成的的api, 修改instance.js, 参考如下:
``` bash
'development' 下面只是环境的例子，项目需要传'process.env.NODE_ENV'
import config from '../config';
import { Request } from 'buriedPoint';
const baseURL = {
mock: 'http://mock.allhome.com.cn/mock/5db2630933901100102f2e2f/javaLog',
development : 'http://192.168.10.12:8991',
lan: `http://192.168.10.200:8009/projectName`,
pred: `https://dtgateway.allhome.com.cn/projectName`,
production: `https://gateway.allhome.com.cn/projectName`
}['development'];
const request = new Request({
baseURL,
timeout: 60000,
}, 'development', 'yourWebAppName');
const devToken = 'tokenString';
const token = window.token? window.token: (window.token = devToken);
// 设置拦截器
request.interceptors({
request: config => {
config.headers.token = token;
return config
},
response: res => {
let {message, result, statusCode} = res.data
// 退出登录状态码
let logoutCodes = new Set([435001, 435011, 436050])
if (statusCode === 1000) {
// 更新全局token
let {pragma} = res.headers
if (pragma) window.token = pragma
// 返回数据
return result
} else if (logoutCodes.has(statusCode)) {
setTimeout(() => window.logout(), 1000)
return Promise.reject({message})
} else {
return Promise.reject({message,statusCode})
}
},
error: error => Promise.reject(error.response.data),
})
export default request.axios;
// 如未使用easy-mock-cli 可export default request, 然后参考web标准库编写api
```
#### 已配置组件
##### 根据已有项目集中了一些组件进行测试。
<html>
<!--在这里插入内容-->
<div style="color: #1FB19E; font-size: 14px;">el-advanced-search 高级搜索 日志范围：联想查询点击下拉框选项会产生日志，回车搜索会产生日志（如加入防抖，搜索的值会与防抖时间依赖，所以用户点回车的时候在防抖时间内不会产生日志，则项目内也不会走业务接口，所以回车日志会与业务接口同步），并会返回查询内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-button 按钮组件 日志范围：点击即产生日志，返回按钮内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-cascader 级联选择器 日志范围：点击下拉框内选项产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-checkbox 多选 日志范围：点击产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-nav-bar 统一登录导航菜单 日志范围：点击产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-pagination 分页组件 日志范围：点击选择页数展示产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-radio 单选按钮 日志范围：点击展示产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-select 选择器 日志范围：点击下拉框内选项产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-tree 数组件 日志范围：点击树节点选项产生日志，返回选项内容。</div>
<div style="color: #1FB19E; font-size: 14px;">el-dropdown 下拉菜单 日志范围：点击下拉框内选项产生日志，返回选项内容。</div>
</html>
<!-- ### 子路由注意事项
为了更精准的收集用户在哪个资源注册中心页面的操作,如果你的资源注册中心页面使用了子路由, 则子路由需要使用父路由的页面编码, 如下面路由结构
```
// vue-router.js
export default new Router({
routes: [
{
path: '/logTest',// 该路由为资源注册中心的某个页面
name: 'LogTest',
redirect: { name: 'LogMd'},
component: () => import('@/views/LogTest/Index'),
children: [
// 对接文档子路由
{
path: 'md',
name: 'LogMd',
component: () => import('@/views/LogTest/LogMd'),
},
// 按钮测试子路由
{
path: 'buttonTest',
name: 'ButtonTest',
component: () => import('@/views/LogTest/ButtonTest')
}
]
}
]
})
```
'/logTest'是资源注册中心的某个页面,mis平台的资源注册中心已为该页面分配了页面编码, 可以通过$route.query.code获取,为行文方便取名parentCode,那么跳转到children路由'buttonTest'时,因为资源注册中心不为子路由分配页面编码, 所以应使用父路由的页面编码创建query如: router.push({ name: 'ButtonTest', query: { code: parentCode } });从而达成了将用户在子路由的交互操作与资源注册中心页面关联起来的目的. -->
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论