Cdjsgsmtunnel NPM

高速公路监控系统

项目结构

| - assets 静态资源目录
| - entry 入口
| - | - admin 管理端入口
| - | - main 用户端入口
| - | - | - router 路由
| - | - | - views 根视图集
| - | - | - theme 全局样式主要是对iview-ui的主题样式覆盖
| - | - | - plugins 管理端的插件引入
| - | - signin 登录页入口
| - modules 模块集合
| - | - main
| - | - | - components 模块内组件集合
| - | - | - services 模块内服务集合
| - | - | - views 模块视图（组件）集合
| - | - | - readme.md 模块readme文件
| - | - | - const 模块常量集合(可选)
| - | - | - theme 模块内部共享样式(可选)
| - | - | - router.ts 模块路由配置（可选） | - | - ... 其他模块
| - | - module.json 当前激活模块配置 | - plugins 插件集合
| - type typescript类型集合
| - shims-tsx.d.ts js类型定义文件
| - shims-vue.d.ts vue类型定义文件

说明

本项目使用typescript作为脚本语言，代码结构上也充分利用了注解特性，项目代码中使用了如下自定义注解:

@Injectable(root?: boolean, moduleRoot?: string) 用于将一个类注册为服务，通过 root参数可以选择是否将服务注册为全局可访问的，默认为 true
@Inject(moduleRoot?: string) 可以在一个类中将某个服务作为类成员引入
@Mutex(key: string) 可以保证某个方法按照key作为唯一依据在同一时间内只调用一次

通过上述前两个注解，本项目中简单实现了依赖注入的功能，同时本项目并未启用 vuex，数据使用依赖注入的服务(service)来请求并处理，所有的服务都是单例模式（整个程序中只存在一个实例，在多处位置引入使用时都是访问同一个对象实例），这就能保证数据的唯一性，效果与vuex一致增加服务的示例如下

@Injectable()
export default class SocketService {

}

依赖注入的示例如下

export default class UserView extends Vue {
  @Inject()
  private socketService!: SocketService;
}

关于网络请求

本项目支持socket.io访问模式，且通过SocketService进行封装，前端接口调用示例如下：

  let { success, data } = await this.socketService.send('user.login', {
    username: '',
    password: ''
  });

SocketService提供了send、on、off三个方法提供统一的网络访问

关于模块 modules

项目主要功能代码都集中在 modules 目录，功能按照模块划分后以单个模块独立一个文件夹组织，模块分两种：

路由模块模块目录中存在 router.ts文件，这种模块可以在 modules/module.json中引入并且可以通过路由导航，主要是界面结构性的大功能集，比如项目进度管理模块project
功能模块用于给其他模块提供某种特定功能，且本模块可以抽象并复用，比如甘特图模块

所有模块都应该遵循原子性规则，即每个模块在功能上都是独立的，自成一个功能集合

模块的引入

上述过程已经定义了模块，接下来需要将路由添加到 vue 的路由插件中，此步骤需要在 src/modules 目录下生成 module.json 文件并写入需要包含的页面模块，如

{
  "main": [
    "statistics-base",
    "statistics-logs",
    "statistics-hdmy",
    "statistics-devrep",
    "statistics-topicsv3",
    "assets",
    "emergency",
    "info",
    "monitor",
    "overview",
    "ps",
    "routine",
    "video-monitor",
    "wizard"
  ],
  "admin": [
    "admin-base",
    "admin-item",
    "admin-map",
    "admin-ps",
    "admin-system",
    "admin-user",
    "system"
  ],
  "signin": []
}

规范

注释

代码中函数的注释应该标明函数作用,所需的参数实际意义以及函数的返回值(如果有的话)

<script lang="ts">
		/**
		 * 返回行星轨道的组合体
		 * @param starLiteSize 行星的大小
		 * @param starLiteRadius 行星的旋转半径
		 * @param rotation 行星组合体的x,y,z三个方向的旋转角度
		 * @param speed 行星运动速度
		 * @param imgUrl 行星的贴图
		 * @param scene 场景
		 * @returns {{satellite: THREE.Mesh, speed: *}} 卫星组合对象;速度
		 */
    initSatellite(starLiteSize, starLiteRadius, rotation, speed, imgUrl, scene){
      // do something
    }
</script>

方法内部的注释使用默认双斜杠格式，如 // 测试
vue框架生命周期函数以及及其简单的方法不需要注释，其他自定义的方法都需要加注释
意义非常明确的变量不需要加注释，其他自定义变量都需要加注释

接口调用及数据处理

系统所有接口调用功能都在服务service中完成
系统所有接口获取到的数据处理以及数据存储都在服务service中完成

lint

VS Code 支持丰富的插件功能，其中 lint 是对代码规范最重要的一条，具体来说，项目需要满足如下配置要求： 1. 必须从项目根目录打开项目，比如项目目录为 C:/xx/projects/Face，那么应该将 Face 文件夹以打开文件夹功能打开，或者将此文件夹拖入编辑器的工作区中打开 2. 所有多人合作的项目都必须配置 line 功能，优先选择 eslint 插件及其附属工具集 3. 在项目初始化后及配置好对应的 lint 规则 4. 所有项目成员在编辑项目施都必须打开 lint 功能，且必须保证所写代码严格符合规则 5. 提交代码前需执行 lint 检查 6. 代码提交时不允许有 lint 错误

命名规范

本文所属命名规范主要以 typescript 为示例语言，其他语言中特殊的规则在对应文件中有单独说明
原则上所有研发人员都需要严格总受本问规定的命名规范

普通变量名必须符合小写字母开头的驼峰式规范，如

  let nextNode = null;
  let remoteState = 'normal';

通过访问器 get 开放变量时，需要定义同名的私有变量并在尾部追加下划线，如:

  private count_ = 0;   // 私有变量存储实际值
  public get count() {  // 访问器返回只读变量
    return this.count_;
  }

代码块内部的局部变量应符合变量用途，如for循环中的索引可以使用 i、j、k 等约定俗成的变量名，如

  for (let i = 0; i < 10; i++) {

  }
  for(let i in lists) {

  }

for of 循环中的变量命名同普通变量命名，应能明确表现出变量的用途，如

  for (let item of items) {

  }

常量名必须全部大写，且多个单词之间以下划线连接，如

  const MATH_PI = 3.1514026;

变量名必须能清楚描述变量作用，使用英文单词组合，如 firstElementOfMap、idOfTicket 等
类名必须以大写字母开头的单词组合组成，且以驼峰式组织，如

  class TableHeader {

  }

接口名必须以大写字母 I 开头，接上大写开头的单词组合，如

  interface ICarLight {

  }

方法名要求同普通变量名，且名称尽可能表明方法功能，注意介词的使用，如

  fetchItemWith(id: string) {

  }
  getTypeOf(item: any) {

  }

严禁无意义单字母变量名，如

  let a = 1;
  let c = '';

阿里图标替换流程

如果已有阿里图标库账号请直接看第3条。
登陆阿里图标库官网(https://www.iconfont.cn/)，点击用户登录使用微博app扫码登陆
找ui相关负责人把你的阿里账号加入相应项目的图标库中
点击下载至本地，将下载的压缩包解压，把解压后的文件(重命名为font-icon)放入项目各个模块的根文件夹下
在font-icon文件夹里的iconfont.js文件首行插入 / eslint-disable / 语句，屏蔽ES6的错误提示

把font-icon文件夹里的iconfont.css文件的每个图标的.icon(.icon-)前缀改为.ivu-icon-,如

  .icon-shijianxuanzeqi:before {
    content: "\e8aa";
  }
  改为
  .ivu-icon-shijianxuanzeqi:before {
    content: "\e8aa";
  }

更换图标样式

  将
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 24px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  替换为如下
  .ivu-iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .ivu-iconfont,
  .ivu-icon {
    font-family: "iconfont" !important;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    display: inline-block;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
  }

其他

基础的vue代码规范可以参考 [风格指南](https://cn.vuejs.org/v2/style-guide/)

打包发布

获取项目文件所有最新代码
修改public/config/xxx.js文件中version.number,变更版本号
确认打包地址,npm run build进行打包
上传打包后的文件dist,编辑本次更新修改的内容说明,发布

重新安装node_modules需注意

将 node_modules\view-design\types\iview.components.d.ts 和 node_modules\view-design\types\collapse.d.tsCollapsePanel 两个文件中的 CollapsePanel 更名为 Panel

1 month ago

1 month ago

1 month ago

1 month ago