hqy-cli

template

技术栈:vue vueX vue-Route axios webpack4

使用方式

子模块没有,会向主模块root进行查找

• store 注意:state属性禁止设置为undefined,避免root模块和当前模块同名问题

# I18n
  $getI18n('buttons.login')


# Validator
  rules: {
    loginUsername: [GET_MODULE_VALIDATORS('required')]
  }



# Api
  // api 定义
  {
    index: 'login',
    url: '/upmsapi/system/login',
    method: 'post'
  }

  // api 调用
  let params = {}
  $http('login',params).then()


# store 方法
  $commitStore('setTask','taskOne')


# store 属性
  $getStore('taskId')

​

目录说明

Public 暂时保留

├─README.md		  //工程说明文档
├─UPDATALOG.md		  //工程更新文档
├─build			  //webpack 相关
│ │─css-module.js
│ │─utils.js
│ │─webpack.base.conf.js  //公共
│ │─webpack.dev.conf.js   //开发环境
│ │─webpack.prod.conf.js  //生产环境
│
├─config
│ │─index.js              //打包配置
│ │─proxy.js              //代理配置
│
├─deploy                  // 部署相关
│ │─default.conf          // nginx 配置模版
│ │─Dockerfile            // docker file
│ │─nginx.sh              // nginx 启动命令
│
└─src		          //源码目录
    │─main.js             //独立运行入口
    │─micro.js	          //微服务入口
    │─utils               //工具
      │─automatic         //自动化模块导入相关
        │─enum.js         //枚举
        │─index.js        //汇总导出importModule
        │─loader.js       //加载器
        │─merger.js       //合并器
        │─scan.js         //扫描加载模块
      │─globalApi.js      //全局方法
      │─i18n.js           //i18n实例化
      │─index.js          //汇总
      │─interceptors      //拦截
        │─http.js         //axios拦截
        │─router.js       //路由拦截
      │─request.js        //axios封装
      │─router.js         //实例化路由
      │─store.js          //实例化store
    │─views		  //模块文件
       │─layout  	  //公共模块
          │─api		  //axios网络请求定义
          │─assets        //静态图片资源文件 打包的时候，会被编译
          │─components	  //公共组件
          │─i18n	  //国际化
          │─lib		  //静态资源 不会被编译
          │─router	  //vue-router路由配置
          │─store	  //vuex的状态管理
          │─css		  //css样式
          │─utils	  //工具类
          │─pages	  //前端页面
          │─mock	  //mock 数据

api

# src/utils/request.js

• 全局封装axios各类方法
  • header设置
    • 写在api中,静态字符串格式
    • 写在$http()第三个参数,动态变量形式,
    • 静态动态同时存在,动态优先
• 全局拦截器
  • 请求拦截器
    • setToken
  • 响应拦截器
    • 重置Token
    • 状态码判断

router

全局路由实例

全局路由守卫

• 纳管各模块路由组件
• 路由守卫
  • 动态加载路由
  • 判断登陆状态
  • 路由权限实现动态路由就不需要判断路由权限了

views

每个文件夹为一个模块,模块名为文件夹的名字

api

const baseUrl = '/paas-web';

const apis = [{
    index: 'updateUserAuthority',
    url: baseUrl + '/upmsapi/authority/updateUserAuthority',
    method: 'post'
}, {
    index: 'machineCode',
    url: '/licenseapi/license/machineCode',
    method: 'get'
}];
export default apis;

store

const module = {
    state: {

    },
    mutations: {

    },
    getters: {

    },
    actions: {

    }
}

export default module;

router

const task = () => import('../pages/List.vue')

export default [
    {
        path: '/app/boc-dashboard',
        name: 'task',
        component: task,
    },
]

modules

自动化导入

模块默认导出文件 :

• Validators 表单校验规则
• Api
• Store
• i18n

#src/modules.js
//生成总对象
export let exportObject = {
    routes: [],
    store: {},
    i18n: {
        zh: {},
        en: {}
    },
    api: {},
    validator: {}
}

//扫描模块
const scanData = scan()

//生成模块
export const m = generateModule(scanData);

export const {routes, store: store, i18n,validator,api} = m;

globalApi.js

import {store, i18n, validator, api} from '../modules'
import {doGet, doPost,doDelete,doPut} from './getMethods/request'

const globalModule = 'layout'


const map = new Map([
    [/^get$/, doGet],
    [/^post$/, doPost],
    [/^delete$/, doDelete],
    [/^put$/, doPut]
])
#api
function get_module_Api(ApiName, params) {
    let ModuleName = this.$route.meta.moduleName
    let apiName = getApiName(ModuleName, ApiName)
    let methods = apiName.method;
    let apiPromise = null;
    ;[...map].filter(([reg]) => reg.test(methods)).forEach(([key, value]) => apiPromise = value(apiName,params))
    return apiPromise
}

#Store
function get_module_Store(stateName) {
    let ModuleName = this.$route.meta.moduleName
    let state = getStoreName(ModuleName, stateName)
    return state
}

#commit Store
function commit_module_Store(mutationName, params) {
    let ModuleName = this.$route.meta.moduleName;
    let _mutations = this.$store._mutations
    let CommitMutationName = commitStoreName(ModuleName, _mutations, mutationName)
    this.$store.commit(CommitMutationName, params)
}

#I18n
function get_module_I18n(name) {
    let ModuleName = this.$route.meta.moduleName;
    let I18nName = `${ModuleName}.${name}`
    return getI18n(ModuleName, name)
}

#Validators
function get_module_Validators(ValiName) {
    let ModuleName = this.$route.meta.moduleName;
    return getValidatorName(ModuleName, ValiName)
}


export default {
    GET_MODULE_API: get_module_Api,
    GET_MODULE_STORE: get_module_Store,
    COMMIT_MODULE_STORE: commit_module_Store,
    GET_MODULE_I18N: get_module_I18n,
    GET_MODULE_VALIDATORS: get_module_Validators,

}

main.js

import {hijack, routes, store, i18n} from './modules'
import globalApi from "./modules/globalApi";

// 状态管理  modules
const router = Router(routes);
const STORE = new Vuex.Store({
    state:{},
    mutations:{},
    acrtions:{},
    modules:{...store}   //https://vuex.vuejs.org/zh/guide/modules.html
});

let vue = new Vue({
  store:STORE,
  router,
  i18n:vueI18n,
  render: h => h(App),
  beforeCreate: function(){
      //全局注册 改变this执行Vue实例
      globalRegister(this)
  }
}).$mount('#app');

//全局注册
function globalRegister (that){
    Object.keys(globalApi).forEach(x=>{
        let func = globalApi[x]
        window[x] = func.bind(that)
    })
}

打印modules

csanData

#layout
layout:
files: (27) ["./layout/api/login.js", "./layout/i18n/en/button.js", "./layout/i18n/en/commom.js", "./layout/i18n/en/header.js", "./layout/i18n/en/index.js", "./layout/i18n/en/labels.js", "./layout/i18n/en/msg.js", "./layout/i18n/en/notice.js", "./layout/i18n/en/placeholder.js", "./layout/i18n/en/titles.js", "./layout/i18n/zh/button.js", "./layout/i18n/zh/header.js", "./layout/i18n/zh/labels.js", "./layout/i18n/zh/msg.js", "./layout/i18n/zh/notice.js", "./layout/i18n/zh/placeholder.js", "./layout/i18n/zh/status.js", "./layout/i18n/zh/tableHeaders.js", "./layout/i18n/zh/titles.js", "./layout/main.module.js", "./layout/pages/layout/layout.js", "./layout/pages/layout/main.js", "./layout/router/layout.js", "./layout/store/login.js", "./layout/utils/eventBus.js", "./layout/utils/objUtil.js", "./layout/validator/validators.js"]
#api
api: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
#i18n
i18n:
en: {header: {…}, titles: {…}, msg: {…}}
zh: {buttons: {…}, header: {…}, labels: {…}, msg: {…}, notice: {…}, …}
#route
route: Array(3)
0: {path: "/", meta: {…}}
1: {path: "/login", name: "login", meta: {…}, component: ƒ}
2: {path: "/app", children: Array(3), meta: {…}, component: ƒ}
#store
store:
namespaced: true
state: {isManager: true, taskId: 2222222222222222, tokenOverdue: "", token: "", userToken: "", …}
mutations: {setTokenOverdue: ƒ, clusters: ƒ, clusterInfo: ƒ, clearCompTemplates: ƒ, set_token: ƒ, …}
getters: {}
actions: {getClusterInfo: ƒ, getRegistryInfo: ƒ}

#validator
validator:
required: {required: true, trigger: "change", zh: "不能为空", en: "Can not be empty"}

# task  upms 模块
task: {files: Array(15), api: Array(1), i18n: {…}, main: {…}, route: Array(1), …}
upms: {files: Array(27), api: Array(9), i18n: {…}, main: {…}, route: Array(2), …}

生成模块 m

#routes: Array(3)
0: {path: "/", meta: {…}}
1: {path: "/login", name: "login", meta: {…}, component: ƒ}
2: {path: "/app", children: Array(3), meta: {…}, component: ƒ}


#store:
layout: {namespaced: true, state: {…}, mutations: {…}, getters: {…}, actions: {…}}
task: {namespaced: true, state: {…}, mutations: {…}, getters: {…}, actions: {…}}
upms: {namespaced: true, state: {…}, mutations: {…}, getters: {…}, actions: {…}}

#i18n:
zh:
layout: {buttons: {…}, header: {…}, labels: {…}, msg: {…}, notice: {…}, …}
task: {buttons: {…}}
upms: {buttons: {…}, header: {…}, labels: {…}, msg: {…}, notice: {…}, …}

en: {layout: {…}, task: {…}, upms: {…}}

#api:
layout: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
task: [{…}]
upms: (9) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

#validator:
layout: {required: {…}}
task: {task: {…}}
upms: {required: {…}}

环境

mock

dev

uat

pro

Eslint 未开始

增量检查

lint-staged   //只检查本次提交修改过的
husky  //git 钩子

单元测试 未开始

持续集成 持续部署 持续交付

mock 未开始

mock server 内置

easy mock 外部搭建

TS 未开始

子工程配置

Package.json

  "scripts": {
    "start": "cross-env PRODUCT_TYPE=boms ROOT_PATH=../../.. webpack-dev-server --config ./node_modules/bn-template/build/webpack.dev.config.js",
    "build": "cross-env ROOT_PATH=../../.. webpack --config ./node_modules/bn-template/build/webpack.prod.config.js",
    "analyz": "cross-env ROOT_PATH=../../.. webpack --config ./node_modules/bn-template/build/webpack.analyz.config.js"
  },

  "dependencies": {
    "bn-template": "x.x.x"
  }

Webpack

  module.exports = {
    mode: 'development'
  }


  config/webpack.dev.config.js

  module.exports = {
    mode: 'development'
  }


  config/webpack.prod.config.js

  module.exports = {
    mode: 'production'
  }

Proxys

  config/proxys.js

  module.exports = [{
    target: 'http://10.20.21.11:9022',
    intercept: 'paas-web',
    rewrite: true,
    ws: true
  }]

Setting

module.exports = {

}

子工程目录

├─README.md                 // 工程说明文档
├─UPDATALOG.md              // 工程更新文档
├─package.json              
├─config                    // 配置相关
│ │─proxys.js               // 代理配置,内容参考examples/proxys.js,可选(可以没有此文件）
│ │─webpack.base.config.js  // webpack配置,内容参考examples/webpack.base.config.js,可选(可以没有此文件）
│ │─webpack.dev.config.js   // webpack配置,内容参考mples/webpack.dev.config.js,可选(可以没有此文件）
│ │─webpack.prod.config.js  // webpack配置,内容参考examples/webpack.prod.config.js,可选(可以没有此文件）
│
└─src                     //源码目录
    │─main.js             //独立运行入口
    │─settings.js         //包含应用相关配置，如:应用名称appName
    │─views               //模块文件
       │─layout           //公共模块
          │─api           //axios网络请求定义
          │─assets        //静态图片资源文件 打包的时候，会被编译
          │─components    //公共组件
          │─i18n          //国际化
          │─lib           //静态资源 不会被编译
          │─router        //vue-router路由配置
          │─store         //vuex的状态管理
          │─css           //css样式
          │─utils         //工具类
          │─pages         //前端页面
          │─mock          //mock 数据

部署包(koa)

制作物理部署包

 1,安装node环境
   wget https://nodejs.org/dist/v12.16.1/node-v12.16.1-linux-x64.tar.xz
   tar -xf node-v12.16.1-linux-x64.tar.xz
   echo export PATH=\$PATH:/home/zhangs/installs/node-v12.16.1-linux-x64/bin > /etc/profile.d/node.sh
   source /etc/profile.d/node.sh
 2,安装git
   yum install git -y 
 3,拉取代码
   git clone -b develop http://zhangshuai@58.210.98.198:8888/fore-end/micro-service/bn-template.git
 4,安装依赖
   npm i --unsafe-perm
 5,静态资源打包
   npm run build
 6,打部署包(server目录就是部署包)
   sh ./build/build.sh(子工程执行:sh ./node_module/bn-template/build/build.sub.sh)

制作docker镜像(koa)

 1,执行制作物理部署包
 2,打镜像
   docker build -f ./docker/Dockerfile-koa -t xxx:xxx .(子工程执行:docker build -f ./node_modules/bn-template/docker/Dockerfile-koa -t xxx:xxx .)

部署

物理部署

 1,获取部署包至目标服务器（参考上面打包)
   scp -r server [e-mail]:/
 2,安装依赖
   sh server/bin/install.sh
 3,启动
   pm2 start server/koa.js

docker

   docker run -d --name test -p5000:3000 xxx:xxx