工作实践体系
samyzh
2023-11-17

wdp前端相关交接文档

# wdp-web

老版本wdp项目；

# 总体【核心】

# 环境

开发环境

  • nodejs版本：v10，而新版本wdp-fe要14版本；
  • 系统版本：目前发现的话，只能是centos7【推荐】和window10环境下才可以跑起来wdp环境；
yum install git wget curl unzip gcc make python3 cmake gcc-c++ -y

wget http://10.xx.xxx.xxx:58888/files/nodejs/10.24.0/node-v10.24.0-linux-x64.tar.gz \
  && tar xvf node-v10.24.0-linux-x64.tar.gz \
  && mv node-v10.24.0-linux-x64 nodejs \
  && mv nodejs /usr/local/nodejs \
  && ln -s /usr/local/nodejs/bin/npm /usr/local/bin/ \
  && ln -s /usr/local/nodejs/bin/node /usr/local/bin/ \
  && ln -s /usr/local/nodejs/bin/npx /usr/local/bin/ \
  && npm config set registry https://registry.npm.taobao.org/
1
2
3
4
5
6
7
8
9
10

# npm/yarn源

  • 淘宝源：https://registry.npm.taobao.org
  • 116内部源：http://10.45.xxx.116:18081/repository/npm/ 用在【内部服务器】
npm config set registry https://registry.npm.taobao.org
#npm config set registry http://10.45.xx.116:18081/repository/npm/

./node_modules/.bin/yarn config set registry https://registry.npm.taobao.org/ -g
./node_modules/.bin/yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
#./node_modules/.bin/yarn config set registry http://10.45.xx.116:18081/repository/npm/ -g
./node_modules/.bin/yarn config list
1
2
3
4
5
6
7

# 打包

# 主要事项

  • 要注意views的目录下的files项目是用yarn build的,其他4个项目使用npm;
  • files中scss库c++相关库，得注意系统环境和node版本的区别，拷贝node_modules时要考虑下这个；

# 主要功能

  • 生成环境下，国际化等替换；
  • 打印版本配置信息；
  • 5个项目build构建；

# build.sh

sh build.sh
1

自行参考里面脚本设置：

echo '=====build all pro====='
sleep 2
printVersion

sleep 2
buildAdmin
sleep 2
buildWeb
sleep 2
buildCapacity
sleep 2
buildFiles
sleep 2
buildPages
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 打包参数

echo '=====初始化env配置====='
isPro=$(getEnvConf isPro)
defaultLang=$(getEnvConf defaultLang)
isHideLang=$(getEnvConf isHideLang)
isTokenAuth=$(getEnvConf isTokenAuth)
echo "====isPro=${isPro}======"
echo "====defaultLang=${defaultLang}======"
echo "====isHideLang=${isHideLang}======"
echo "====isTokenAuth=${isTokenAuth}======"
1
2
3
4
5
6
7
8
9

.env对应的现场版本

Env 构建参数 对应现场版本说明
.env.default build.sh 标准版本默认
.env.defaultCookie build.sh defaultCookie 标准版本Cookie验证方式
.env.intl build.sh intl 国际版本全英文，无切换国际化功能
.env.intlCookie build.sh intlCookie 国际版本Cookie验证方式
# 前端可定制参数
可定制的参数 参数说明 可选及默认 备注
isPro 是否是生产环境 默认true 不能代理的情况下，web,capacity两项目用到
defaultLang 默认系统语言 默认zh;可选zh,en 目前与isHideLang连用
isHideLang 是否屏蔽切换国际化功能 默认false 目前与defaultLang连用
isTokenAuth 是否使用Token权限验证 默认true
# 现场版本对比env映射
版本 对应env 备注
国内版本：token验证 .env.default
国内版本：cookie验证 .env.defaultCookie
国际版本：token验证 .env.intl
国际版本：cookie验证 .env.intlCookie

# 版本跟踪

# 提交在web目录下处理打印版本信息
printVersion() {
    cd ${curDir}
    echo "==================================printVersion===================================="
    curBranch=$(git describe --all | sed 's|.*/\(.*\)|\1|')
    commitID=$(git rev-parse --short HEAD)
    commitTime=$(git show --pretty=format:"%ci" | head -1)
    buildTime=$(date "+%Y-%m-%d %H:%M:%S")
    echo "{
    \"version\":{
        \"curBranch\": \"$curBranch\",
        \"commitID\": \"$commitID\",
        \"commitTime\": \"$commitTime\"
    },
    \"buildCfg\":{
        \"buildTime\": \"$buildTime\",
        \"envName\":\"$envName\",
        \"isPro\":$isPro,
        \"defaultLang\":$defaultLang,
        \"isHideLang\":$isHideLang,
        \"isTokenAuth\":$isTokenAuth
    }
}" > $versionDist
    echo "=====版本记录生产version.json成功========"
    cat $versionDist
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

生成后线上路径地址：

http://10.45.xxx.133:8080/web0/version.json

{
    "version":{
        "curBranch": "2.0.0",
        "commitID": "fd67c28",
        "commitTime": "2023-02-08 06:03:22 -0500"
    },
    "buildCfg":{
        "buildTime": "2023-03-20 05:56:54",
        "envName":".env.default",
        "isPro":true,
        "defaultLang":"zh",
        "isHideLang":false,
        "isTokenAuth":true
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 发布

上面打包build后，会生成dist目录下面几个文件夹;里面的子目录文件对应线上不同目录；

# replace.sh

#!/bin/bash
#
# @time: 2021-03-11 15:59:05
# @modAuthor: samy
# @modTime: 2021-03-15 17:24:01
# @desc: dist引用
# Copyright © 2015~2021 BDP FE
###
distDir=/home/iwdp/fe-deploy/dist
#已经换成新的路径web0
webDir=/usr/lib/wdp-server/web0
admDir=/var/lib/wdp-server/resources/views/work/ADMIN_VIEW\{1.0}
capacityDir=/var/lib/wdp-server/resources/views/work/CAPACITY-SCHEDULER{1.0}
filesDir=/var/lib/wdp-server/resources/views/work/FILES{1.0}

cp -R ${distDir}/web/* ${webDir}
cp -R ${distDir}/admin/* ${admDir}
cp -R ${distDir}/views/capacity/* ${capacityDir}
cp -R ${distDir}/views/files/* ${filesDir}
echo "静态资源替换成功！"
wdp-server stop
echo "wdp-server 重启中"
wdp-server start --skip-database-check
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# 特别注意

Docker build程序兼容views组件相关配置；后端*.xml,和*.properties相关配置不做维护处理，只更新前端dist; 修改为替换前端静态文件；

  • admin目录下，一样要保留原来的view.xml和META-INF目录；
  • capacity/files目录下，一样要保留原来的view.xml和META-INF，WEB-INF，view.log4j.properties 目录；
  • 上面view.xml文件参考wdp-web各子目录上级resources上都有相应的文件；

# web

# 简介

# 技术栈

ember.js（版本：v1.0.pre）

# 总体结构

主程序是web,其他capacity-scheduler和pages都是通过iframe内嵌过去的；记得后端设置打开跨域功能；

# 启动跑通

参考build.sh中的，设置启动；

buildWeb() {
    curPro='buildWeb'
    echo "==================================${curPro}===================================="
    cd ${webDir}
    # 要设置环境
    replacePro ${webDir}/app/conf.js isPro $isPro
    replacePro ${webDir}/app/conf.js defaultLang $defaultLang
    replacePro ${webDir}/app/conf.js isHideLang $isHideLang
    replacePro ${webDir}/app/conf.js isTokenAuth $isTokenAuth
    echo "=====${curPro}项目==config中的apiPrefix===替换成功===="

    npm i
    npm run build
    echo "=====${curPro}项目===构建成功====="
    cp -R public/* ${curDir}/${webDirDist}/
    echo "=====${curPro}项目===拷贝成功====="
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 主要事项

  • vendor/scripts目录不要有多余的.bak等相关文件；

# 详细细节

# 访问地址

http://localhost:4444

# 构建代理

  • web/brunch-config.js 类似webpack；
  • web/brunch-server.js 接口代理；

# 参数配置

web/app/conf.js

/*
 * @Author: samy
 * @email: yessz#foxmail.com
 * @time: 2021-06-03 14:41:41
 * @modAuthor: samy
 * @modTime: 2022-01-11 15:13:23
 * @desc: 独立的配置，跟config不一样，不依俩app相关；
 * Copyright © 2015~2021 BDP FE
 */
var isPro = true;
var defaultLang = "zh";
var isHideLang = false;
var isTokenAuth = true;

/**是否v2版本已经实现的功能 */
var isUseV2 = true;
var targetApi = 'http://10.45.xxx.131:8080' // 开发模式接口代理地址
var proxyApi = '/api/'
var pagePath = isPro ? 'pages' : 'http://localhost:9800'; // 对应pages多页面基路径
var localPort = '4444'; // 本地开发端口
module.exports = {
  isPro,
  targetApi,
  proxyApi,
  pagePath,
  localPort,
  isHideLang,
  defaultLang,
  isTokenAuth,
  isUseV2,
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

web/app/config.js

var App = require('app');
var Conf = require('./conf');

App.isUseV2 = Conf.isUseV2; // 是否v2版本已经实现的功能
App.xToken = 'X-Token'; // token name
App.USERNAME = 'wdp-name'; // token name
App.isPro = Conf.isPro; // 是否是生产环境
App.pagePath = Conf.pagePath; // 对应pages多页面基路径
App.isHideLang = Conf.isHideLang;
App.defaultLang = Conf.defaultLang;
App.isTokenAuth = Conf.isTokenAuth;
....
1
2
3
4
5
6
7
8
9
10
11
12

# 网络通信

  • Stomp部分：web/app/utils/stomp_client.js
  • Ajax部分：web/app/utils/ajax/ajax.js

# 模块加入

  • web/app/controllers.js
  • web/app/views.js
  • web/app/templates.js

# admin

# 简介

# 技术栈

  • angularjs1.x + bower + gulp3.x

# 启动跑通

参考build.sh中的，设置启动;

buildAdmin() {
    curPro='buildAdmin'
    echo "==================================${curPro}===================================="
    cd ${admDir}
    replacePro ${admDir}/app/scripts/app.js defaultLang $defaultLang
    replacePro ${admDir}/app/scripts/app.js isHideLang $isHideLang
    replacePro ${admDir}/app/scripts/app.js isTokenAuth $isTokenAuth
    echo "=======bower使用==zip==命令========="
    unzip -o ${admDir}/app/assets/zip/bower_components.zip -d ${admDir}/app/
    npm i
    npm run build
    echo "=====${curPro}项目===构建成功====="
    cp -R dist/* ${curDir}/${admDirDist}/
    echo "=====${curPro}项目===拷贝成功====="
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

# 主要事项

  • 本地开发时，记得先bower_components.zip解压到指定目录开发；
  • 因为admin没有登录用户信息，要先在web登录后拷贝token到localstorge里面；

# 详细细节

# 访问地址

http://localhost:9010

# 构建代理

  • admin/main/resources/ui/admin-web/gulpfile.js gulp构建及代理；
const jsonPlaceholderProxy = createProxyMiddleware('/api/v1', {
  target: 'http://10.45.xxx.131:8080',
  changeOrigin: true,
});

browserSync({
    notify: false,
    port: 9010,
    server: {
      baseDir: ['dist'],
      middleware: [jsonPlaceholderProxy]
    },
    open: false
  });
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 参数配置

admin/main/resources/ui/admin-web/app/scripts/app.js

/*
 * @Author: samy
 * @email: yessz#foxmail.com
 * @time: 2021-06-03 14:41:41
 * @modAuthor: samy
 * @modTime: 2022-01-11 15:13:23
 * @desc: 独立的配置，跟config不一样，不依俩app相关；
 * Copyright © 2015~2021 BDP FE
 */
'use strict';
//常量配置
const isHideLang = false;
const defaultLang = "zh";
const xToken = 'X-Token';
const isTokenAuth = true;
const baseUrlWeb = 'web0';
const isUseV2 = true;

angular.module('wdpAdminConsole', [
  'ngRoute',
  'ngAnimate',
  'ui.bootstrap',
  'restangular',
  'toggle-switch',
  'pascalprecht.translate'
])
.constant('Settings', {
  testMode: false,
  siteRootNew: `{proxy_root}/`.replace(/\{.+\}/g, ''),//web管理端基本页面
  siteRoot: `{proxy_root}/${baseUrlWeb}/`.replace(/\{.+\}/g, ''),//web管理端基本页面
	baseUrl: '{proxy_root}/api/v1'.replace(/\{.+\}/g, ''),//接口基础路径
  mockDataPrefix: 'assets/data/',
  isLDAPConfigurationSupported: false,
  isLoginActivitiesSupported: false,
  maxStackTraceLength: 1000,
  errorStorageSize: 500000,
  minRowsToShowPagination: 10,
  isHideLang,
  defaultLang,
  isTokenAuth,
  xToken,
  isUseV2,
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

# 网络通信

admin/main/resources/ui/admin-web/app/scripts/app.js

if (Settings.isTokenAuth) {
  const xTokenL = window.localStorage.getItem(xToken)
  $httpProvider.defaults.headers.post[xToken] = xTokenL;
  $httpProvider.defaults.headers.put[xToken] = xTokenL;
  $httpProvider.defaults.headers.common[xToken] = xTokenL;
}
$httpProvider.interceptors.push(['Settings', '$q', function(Settings, $q) {
  return {
    'request': function(config) {
      if (Settings.testMode) {
        if (config.method === 'GET') {
          config.url = (config.mock) ? Settings.mockDataPrefix + config.mock : config.url;
        } else {
          config.method = "GET";
        }
      }
      return config;
    }
  };
}]);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

# views

# capacity-scheduler

# 简介

里面就一个页面，在上云基础数据dateMeta里面已经实现了react版本；后面可以通过微前端部分方式引入；

# 技术栈
  • Brunch1.x, 跟web项目类似；
# 注意点
  • bower依赖提前先下好zip, 再解压使用；
# 启动跑通

参考build.sh中的，设置启动

buildCapacity() {
    curPro='buildCapacity'
    echo "==================================${curPro}===================================="
    cd ${viewCapDir}
    replacePro ${viewCapDir}/app/initialize.js isPro $isPro
    replacePro ${viewCapDir}/app/initialize.js isTokenAuth $isTokenAuth
    echo "=======bower使用==zip==命令========="
    unzip -o ${viewCapDir}/zip/bower_components.zip
    npm i
    npm run build
    echo "=====${curPro}项目===构建成功====="
    cp -R public/* ${curDir}/${viewCapDirDist}/
    echo "=====${curPro}项目===拷贝成功====="
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 主要事项
  • 本地开发时，记得先bower_components.zip解压到指定目录开发；
  • 因为admin没有登录用户信息，要先在web登录后拷贝token到localstorge里面；
  • 确保在web中安装了yarn组件，同时确保admin配置相关视图数据；
# 详细细节
# 访问地址

http://localhost:9000

# 构建代理

  • views/capacity-scheduler/src/main/resources/ui/config.coffee 类似webpack；

      server:
    path: 'brunch-server.js'
    port: 9000
    base: '/'
    run: 'no'
    1
    2
    3
    4
    5

  • views/capacity-scheduler/src/main/resources/ui/brunch-server.js 接口代理；

    const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

exports.startServer = (port, path, callback) => {
  app.use(express.static(path));
  app.use('/api/', createProxyMiddleware({ target: 'http://10.45.xxx.xxx:8080', changeOrigin: true}));
  app.listen(port, function () {
    callback();
  })
}
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
# 参数配置

views/capacity-scheduler/src/main/resources/ui/app/initialize.js

var isPro = false;//线上环境部署的话会用脚本替换掉；
var isTokenAuth = true;//线上环境部署的话会用脚本替换掉；

window.App = require('app');

// Set this value to true to run in test mode with local data
App.testMode = false;
App.isPro = isPro;
App.xToken = 'X-Token';
App.isTokenAuth = isTokenAuth;
1
2
3
4
5
6
7
8
9
10
# 网络通信

views/capacity-scheduler/src/main/resources/ui/app/adapters.js

function _ajaxOptions(url, type, hash) {
  hash = hash || {};
  hash.url = url;
  hash.type = type;
  hash.dataType = 'json';
  hash.context = this;

  hash.beforeSend = function (xhr) {
    xhr.setRequestHeader('X-Requested-By', 'view-capacity-scheduler');
    if (App.isTokenAuth) {
      xhr.setRequestHeader(App.xToken, window.localStorage.getItem(App.xToken));
    }
  };
  return hash;
};
function _ajaxError(jqXHR) {
  if (jqXHR && typeof jqXHR === 'object') {
    jqXHR.then = null;
  }

  return jqXHR;
};
function _ajax(url, type, hash) {
  return new Ember.RSVP.Promise(function (resolve, reject) {
    hash = _ajaxOptions(App.isPro ? url : 'http://localhost:9000' + url, type, hash);

    hash.success = function (json) {
      Ember.run(null, resolve, json);
    };

    hash.error = function (jqXHR, textStatus, errorThrown) {
      Ember.run(null, reject, _ajaxError(jqXHR));
    };

    Ember.$.ajax(hash);
  }, "App: Adapters#ajax " + type + " to " + url);
};


App.ConfigAdapter = DS.Adapter.extend({
  defaultSerializer: 'config',
  namespace: 'api/v1'.replace(/^\//, ''),
  findQuery: function (store, type, query) {
    var adapter = this;
    var uri = [_getCapacitySchedulerViewUri(this), 'getConfig'].join('/') + "?siteName=" + query.siteName + "&configName=" + query.configName;

    if (App.testMode)
      uri = uri + ".json";

    return new Ember.RSVP.Promise(function (resolve, reject) {
      _ajax(uri, 'GET').then(function (data) {
        Ember.run(null, resolve, data);
      }, function (jqXHR) {
        jqXHR.then = null;
        Ember.run(null, resolve, false);
      });
    }, "App: ConfigAdapter#findQuery siteName : " + query.siteName + ", configName : " + query.configName);
  }
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

# files

基本上没用过这个

# 简介
# 技术栈
  • ember全家桶，ember2.x，相对其他算比较新的技术；
# 启动跑通

参考build.sh中的，设置启动

buildFiles() {
    # 要考虑到后端的yarn组件命令会跟前端包管理的命令冲突问题；
    curPro='buildFiles'
    echo "==================================${curPro}===================================="
    echo "======================yarn预处理=====yarn版本==========源配置=================="
    cd ${curDir}
    replacePro ${viewFileDir}/config/environment.js isTokenAuth $isTokenAuth
    npm i
    # ./node_modules/.bin/yarn config set registry https://registry.npm.taobao.org/ -g
    # ./node_modules/.bin/yarn config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/ -g
    ./node_modules/.bin/yarn config set registry http://10.45.46.116:18081/repository/npm/ -g
    ./node_modules/.bin/yarn config list

    cd ${viewFileDir}
    # 这个项目不用做配置替换直接用的ember自带的环境
    echo "=======bower使用==zip==命令========="
    unzip -o ${viewFileDir}/zip/bower_components.zip
    ${curDir}/node_modules/.bin/yarn install
    ${curDir}/node_modules/.bin/yarn build
    echo "=====${curPro}项目===构建成功====="
    cp -R dist/* ${curDir}/${viewFileDirDist}/
    echo "=====${curPro}项目===拷贝成功====="
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
# 主要事项

# pages

# 简介

# 技术栈

  • Vue2.x项目，单页面的；就元数据备份两个页面，目前没有用到；

# 启动跑通

参考build.sh中的，设置启动

buildPages() {
    curPro='buildPages'
    echo "==================================${curPro}===================================="
    cd ${pagesDir}
    # 不用配置环境isPro
    replacePro ${pagesDir}/.env VUE_APP_isTokenAuth $isTokenAuth
    npm i
    npm run build
    echo "=====${curPro}项目===构建成功====="
    cp -R dist/* ${curDir}/${webDirDist}/
    echo "=====${curPro}项目===拷贝成功====="
}

#npm run serve
1
2
3
4
5
6
7
8
9
10
11
12
13
14

# 主要事项

  • pages项目线上部署，生成的dist，是放在web目录下的；

# 详细细节

# 访问地址

http://localhost:9800/admin/backupTaskList

# 参数配置

pages/.env.development

NODE_ENV=development
VUE_APP_IS_MOCK=false
VUE_APP_API_PREFIX=/api/v1
VUE_APP_API_TARGET=http://172.21.xxx.21:8080/
VUE_APP_PORT=9800
PUBLIC_PATH='/'
VUE_APP_xToken="X-Token"
VUE_APP_isTokenAuth=true
1
2
3
4
5
6
7
8

pages/vue.config.js

# 单页面对应

pages/titles.js

module.exports = {
  'sys/login': '登录 | WDP',
  'admin/backupTaskList': '备份任务列表 | WDP',
  'admin/periodicBackupTaskList': '周期备份任务列表 | WDP'
}
1
2
3
4
5

# wdp-fe

新版本wdp项目；

# 简介

# 技术栈

# 启动跑通

yarn start
1

# 主要事项

  • 项目构建后，是放在原来的的web目录。原来老的web项目目录迁移到web0；

# 详细细节

# 访问地址

http://localhost:8686

# 参数配置

  • config/config.ts

  • config/proxy.ts

# 网络通信

  • Stomp部分：src/stompClient.ts
  • request部分：src/requestConfig.ts

# 新老系统过渡

# 分支

  • 2.0-beta 登录验证过渡版本
  • dev-2.0.0 开放版本

# localstorge

  • xToken:X-Token
  • USERNAME:wdp-name

# 部署目录

  • Web:wdp-fe
  • Web0:wdp-web/web；admin和capacity-scheduler项目目录不变；
上次更新: 2023/11/17, 05:08:19
ambari前端功能业务再次整理
wdp功能介绍

← wdp功能介绍→

Copyright © 2015-2023 友一升 | yessz
×