PC前端脚手架

端架构是技术中台提供的中台2.0前端架构，默认与建协云融合为基础搭建，可实现建协云授权登录下开发新项目。开发者可以在该开源架构下根据个人需要做除中台2.0前端核心代码外的个性化调整，和开发新项目模块。

当前版本是第一个版本，中后期版本会将建协云相关功能模块移出，整合到建协云服务器。也就是说，项目部署的服务器必须能访问建协云服务器，否则可能无法实现与建协云融合。

当前框架使用简单，附带使用文档，熟悉该架构。本文档重点讲述如何搭建授权登录开发环境，测试、生产环境同理，不多叙述。

本文档不会讲述如何融入jenkins、docker、rancher，如需了解向技术中心索取相关文档。

应用技术

技术栈

• 项目管理：npm
• 运行环境：Nodejs
• 项目框架：Vuejs
• UI框架：Element-UI
• 路由管理：Vue-Router
• 网络请求：Axios
• 全局状态：Vuex

框架

目录结构

├── dist                        // 打包后文件
├── node_modules                // 依赖包
├── public                      // html模板和静态文件
├── src                         // 源代码（模块应与apis里的js一一对应）
│   ├── apis                    // 后端接口
│   ├── assets                  // 静态资源
│   ├── components              // 全局公用组件
│   ├── layout                  // 布局
│   ├── mock                    // 模拟接口请求
│   ├── router                  // 路由
│   ├── store                   // 全局状态管理
│   ├── utils                   // 全局公用方法
│   ├── views                   // 前端页面代码
│   │   ├── demo                // demo模块
│   │   │   ├── table           // table页面
│   │   │   │   ├── components  // 页面组件
│   │   │   │   ├── Index.vue   // 页面入口
│   ├── App.vue                 // 入口页面
│   └── main.js                 // 入口 加载组件 初始化等
├── .env                	    // 默认配置文件
├── .env.dev                	// 开发环境配置文件
├── .env.test                	// 测试环境配置文件
├── .env.prod                	// 生产环境配置文件
└── package.json                // 依赖包管理

组件

• 中台封装了一些前端组件和方法，供开发者使用：

  • 网页端 - 公用组件。
  • 网页端 - 公用方法。

  还提供了demo实例

  • 前端框架样例 (opens new window)

下载依赖

• 下载依赖：

  npm install
  或者
  cnpm install
  或者
  yarn install
  

  运行命令后会在项目的根目录生成node_modeles文件夹

基础属性配置

• 环境配置

.env.dev 是开发环境，开发运行项目时，自动加载该环境。

.env.test 是测试环境，发布到测试环境时，自动加载该环境。

.env.prod 是生产环境，发布到生产环境时，自动加载该环境。

开发者只需要在所需环境下配置好开发、测试、生产的属性项即可。

1. VUE_APP_PORT是建协云api访问地址，项目中登录、菜单等建协云功能都会用到，开发环境无需改变，如有变向技术中台索取，测试和生产环境同理。
2. VUE_APP_CONCRETE_PORT是“商混后端”访问地址，因为该文档以“商混”为例子，所以这里配置的是商混后端地址。开发者可以根据自己开发的后端自行定义该参数。参数格式是VUE_APP_XXX，只要带VUE_APP_前缀即可。如：检测监管，可以是VUE_APP_JCJG_PORT、VUE_APP_JCJG_ADDR等。
3. 用户中心授权登录的client_id，向技术中台索取。如果不配置，默认使用项目默认的登录界面，使用项目默认的登录界面就要求“前端”和“后端”都接入建协云的集群了。接入建协云集群方案不讲术，有兴趣的自行咨询技术中台。
4. VUE_APP_UC_URL是跳转授权登录界面的地址，向技术中台索取，测试和生产环境同理。

登录接口配置

在src->store下的index.js中，配置ucLoginUrl参数，为开发者的认证接口。

即：

ucLoginUrl: process.env.VUE_APP_CONCRETE_PORT + "/authentication"

VUE_APP_CONCRETE_PORT是在“环境配置”章节中说到的应用后端地址。

退出接口配置

登录只会默认退出用户中心登录，各应用也需要退出则需要

在src->store下的index.js中，配置logoutUrl参数，为业务端的退出认证接口。

即：

logoutUrl: process.env.VUE_APP_CONCRETE_PORT + "/authenticationLogout"

VUE_APP_CONCRETE_PORT对应的业务端后端地址。

启动项目

• 运行项目

  npm run serve
  

• 启动其它环境

  以生产环境为例，在package.json中加上--mode prod如下图，则会默认调用.env.prod配置

  

打包发布

• 打包发布

  // 开发环境
  npm run build-dev
  // 测试环境
  npm run build-test
  // 正式环境
  npm run build-prod
  

• 其它环境

  如果默认的三个环境不满足使用，还可以新增其它的配置文件，如.env.prod.hlj;

  然后在package.json文件中加上打包命令，如下

  

  最后打包命令为

  npm run build-prod.hlj
  

进阶

用户中心登录界面

• 介绍

  使用用户中心提供的授权登录页面，需按模板规范提交资源内容到数字中台协助开发登录页面。

  用户中心升级默认为每周三下班后升级，如需紧急升级需项目数字中台说明。

  模板下载：应用登录&注册信息提供规范1.0.docx

• 整体说明

  1.此规范适用于使用中台框架2.0搭建的PC端应用； 2.多个PC端应用时需要提供各自应用的登录、注册页信息； 3.中台提供的登录页登录框设计成公共样式，不支持调整，部分功能支持可选； 4.中台提供的注册页设计成公共样式，不支持调整； 5.提供项分为【必须、标配、可选】，在说明中标识，【必须】是指项目上必须提供的，【标配】是指基础提供的，不可更改，【可选】是指项目上按需指定的； 6.系统logo需要提供两个，一个适用于登录、注册页、一个适用于系统内页头； 7.如有规范外的特殊要求请单独说明。

• 详细规范

  1、登录页

  提供项	说明
  系统logo	必须，应用logo必须为正方形，像素为100*100，100k以内的png图片
  应用名称	必须，建议3-20个字
  应用编码	必须，systemCode
  背景图	必须，像素为1920﹡930，300k以内的jpg、png图片
  账号密码登录	标配，支持账号/手机号+密码登录
  移动端扫码登录	可选，支持配套移动端扫二位码方式登录
  微信授权登录	可选，支持微信授权登录（需主体申请接入微信开放平台）
  注册	可选，支持企业/单位等组织注册
  忘记密码	可选，支持重新设置密码（需确认并接入短信）
  记住密码	可选，支持记住密码
  页脚信息	必须，其中浏览器兼容说明标配，一般可包含按版权信息，备案信息、技术支持

  2、注册页

  提供项	说明
  系统logo	必须，与登录页保持一致
  应用名称	必须，与登录页保持一致
  应用编码	必须，与登录页保持一致
  背景图	可选，像素为1920﹡930，300k以内的jpg、png图片，默认通用背景图

  3、系统头部

  提供项	说明
  图标	必须，像素为100*100,100k以内png图片
  名称	必须，与登录页保持一致

  4、参考案例

  基础参数标注：https://codesign.qq.com/s/JMwy0bApLG9O6LB

自定义登录页面

• 嵌入用户中心登录页

  1、在路由中使用已封装好的登录，配置如下

  {
      path: '/login',
      meta: { title: '登录', isLogin: false},
      component: SANHUI.Login
    },
  

  2、删除.env.xxx配置文件中的clientId

  3、在vuex（store -> index.js）中，配置接入中户中心的systemCode，如：

  

  4、systemCode及为应用编码，在新建应用时填写

  

• 嵌入用户中心登录框

  1、删除.env.xxx配置文件中的clientId

  2、在vuex（store -> index.js）中，配置接入中户中心的systemCode

  3、创建自己的登录页，以iframe形式嵌入，如下：

  <template>
    <div class="box">
      <iframe :src="url" width="100%" height="100%" frameborder="0"></iframe>
    </div>
  </template>
  
  <script>
  export default {
    data () {
      return {
        url: `${this.$store.state.env.VUE_APP_UC_URL}/#/loginForm?systemCode=${this.$store.state.systemCode}&target=_parent`
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
  .box{
    position: fixed;
    top: 30%;
    right: 10%;
    width: 400px;
    background: #fff;
    padding: 20px;
    height: 400px;
  }
  </style>
  

• 用户中心登录框url参数

  参数名	类型	默认值	描述
  systemCode	String	CLOUD	应用编码
  showRememb	Boolean	false	显示记住密码
  showQR	Boolean	false	显示二维码登录
  tabShow	Boolean	false	显示切换个人和企业登录
  showCodeLogin	Boolean	false	显示短信登录
  showRegister	Boolean	false	显示注册按钮
  showApplicationIn	Boolean	false	显示申请入住按钮
  showPwd	Boolean	false	显示忘记密码按钮
  showWX	Boolean	true	显示微信扫码登录

修改密码

默认在右上角个人信息处修改密码

也可以在任意一处调用封装方法打开修改密码弹框:

SANHUI.updatePassword()

如果要强制用户不能关掉弹框

SANHUI.updatePassword(true)