前端代码生成

工程示例

系统应用前端示例工程打开 (opens new window)

本内容你将获得

• 前端代码工程结构
• 前端工程打包方式
• 前端的变量配置
• 前端动态后端地址配置
• 前端容器化打包方式
• 前端整合七牛 cdn 方式
• 前端覆盖原界面方式

自动生成前端工程说明

前端工程包含为基础的工程骨架，类似于 seed 工程模式，此为后台的管理界面，需配置后台地址才可以跑起来， 如有单独的前端维护，可按实际团队架构进行调整

前端工程结构说明

前端工程基于组件化思路进行的开发，提取出alinesno-ui (opens new window)基础前端组件，此组件由平台维护，默认的业务工程结构如下:

├── babel.config.js
├── docker                       # docker打包配置
│   ├── Dockerfile               # Dockerfile配置
│   ├── build-docker.sh          # 集成一键打包脚本，包含镜像上传
│   └── replace_api_url.sh       # 前端变量/占位符变换，这里配置动态后台地址
├── k8s-dev-ingress.yaml         # k8s-ingress配置
├── k8s-dev.yaml                 # k8s-服务配置
├── package.json
├── pom.xml                      # 打包的相关配置，这里配置了yarn的版本和打包dist的目录，集成maven工具
├── public                       # 公共路径
│   ├── config.js                # 这里配置相关环境变量
│   ├── favicon.ico
│   └── index.html
├── qiniu-upload.sh              # 七牛cdn上传工具类，这里自己写了一个上传组件，主要结合jenkins使用
├── src                          # 开发源码路径，这里主要是以vue的规范为主
│   ├── api
│   ├── asserts
│   ├── components
│   ├── main.js
│   ├── permission.js
│   ├── router
│   ├── store
│   └── views
├── vue.config.js

以上可以按自己实际的情况自动配置和修改，以符合自己的架构习惯

前端工程打包方式

这里主要使用yarn + maven结合打包的方式，当前 yarn 的下载路径为自定义的配置路径，原下载地址无法下载，配置方式如下:

<!-- 其它具体配置，请查看[frontend-maven-plugin]插件 -->
<configuration>
  <nodeDownloadRoot>https://npm.taobao.org/mirrors/node/</nodeDownloadRoot>
  <npmDownloadRoot>https://registry.npm.taobao.org/npm/-/</npmDownloadRoot>
  <yarnDownloadRoot>http://data.linesno.com/web-tools/yarn/</yarnDownloadRoot>
</configuration>

前端整个打包过程如下

• 使用 mvn 打包生成 dist 目录，这里的 node 和 yarn 版本为固定版本，工程会自动下载
• 打包生成的目录会保存到docker目录下面，结合镜像打包
• 配置 build-docker.sh 打包变量，执行 build-docker.sh 命令
• 打包之后上传镜像仓库

配置打包变量说明，此处可以结合jenkinsfile进行整合效果更佳，这里的镜像以阿里云镜像仓库 (opens new window)为整合例子

# 镜像参数
docker_repostory=$docker_repostory            # 镜像仓库地址
docker_registry_name=$docker_registry_name    # 镜像仓库空间
project_artifactid=$project_artifactid        # 打包的名称
project_version=$project_version              # 镜像版本号

这里加了显示的密码配置，此为不安全，可通过 jenkins 权限拦截进行配置， 隐匿的可使用 jenkins 的特性

前端的变量配置

前端环境变量使用的 config.js 与 env 配置，有几个固定变量的说明：

其中env.develope环境变量说明

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_ENV = 'development'                     # 此变量必须，在alinesno-ui中会有部分通过此字段进行判断环境，且为固定值
VUE_APP_BASE_API = ''                           # 后端地址
CDN_PATH = 'SERVER_CDN_URL'                     # CDN路径配置，会在vue.config.js中使用此变量，默认为根路径'/'

# 文件上传_start
VUE_APP_UPLOAD_URL = ''                         # 文件上传地址，此处需要文件上传云文件的时候需要，前端组件默认集成头像上传通过此变量配置
VUE_APP_DISPLAY_URL = ''                        # 文件预览路径，前端组件默认集成头像显示变量和默认的图片上传组件通过此变量
# 文件上传_end

# saas env                                      # 以下环境为默认的平台变量，如团队自定义了主题，以下会被覆盖
VUE_APP_SASS_TITLE='ACP数字中台'
VUE_APP_SASS_URL='http://alinesno-saas.beta.linesno.com'
VUE_APP_SAAS_LOGO_URL='http://training-static.linesno.com/fox_cloud/fox_header_color.png'

前端动态后端地址配置

前后端基于容器化的分开部署，反向代理请求，动态配置相关打包之后的环境变量，这里使用的是sed命令进行的切换

命令如下:

# 这里镜像中默认的工具空间是/usr/share/nginx/html
find '/usr/share/nginx/html' -name '*.js' -exec sed -i -e 's,SERVER_URL,'"$API_BASE_URL"',g' {} \;

如不考虑修改或者特殊的变量，不修改replace_api_url.sh文件，此处亦可在打包之后，通过 jenkins 提前替换变量

前端整合七牛 cdn 方式

这里整合 cdn 主要是考虑到相关互联网访问的情况下的场景，这里主要是集成七牛 cdn查看 (opens new window)，其它的 sdk 可参考

配置七牛的环境变量，此部分密钥可结合 jenkins 进行配置或者集成到服务器中，隐式声明，如下：

export accessKey=
export secretKey=-
export spaceBucket=
export remoteFolder=
export domain=

在构建完成之后，执行上传命令，会自动刷新七牛目录，上传效果如下:

+ bash qiniu-upload.sh 上传的目录

文件 path = alinesno-cloud-authority-ui/config.js 上传成功.
...

refreshFloder # 刷新目录
200

访问通过domain+remoteFolder即可访问

前端覆盖原界面方式

这里采用的是自定义组件，同时保留原组件的特性的方式，以组件化的方式进行的调整，具体可查看例子 (opens new window)

以下为新布局示例说明：

// 这里为平台默认的组件
import RightPanel from 'alinesno-ui/packages/Layout/components/RightPanel'
import {
  AppMain,
  Navbar,
  Settings,
  Sidebar,
  TagsView
} from 'alinesno-ui/packages/Layout/components'
import ResizeMixin from 'alinesno-ui/packages/Layout/mixin/ResizeHandler'
import { mapState } from 'vuex'
import variables from 'alinesno-ui/src/assets/styles/variables.scss'

// 这里是自定义的组件
import SaasTopHeader from './TopHeader/index'

其它的方式，待在梳理

其它

• 无