cdjsgsmtunnel

v1.0.2

Published

8 months ago

| - `assets` 静态资源目录 | - `entry` 入口 | - | - `admin` 管理端入口 | - | - `main` 用户端入口 | - | - | - `router` 路由 | - | - | - `views` 根视图集 | - | - | - `theme` 全局样式主要是对`iview-ui`的主题样式覆盖 | - | - | -

Downloads

0High
0Medium
0Low

mr_nhh

高速公路监控系统

项目结构

| - 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 是对代码规范最重要的一条，具体来说，项目需要满足如下配置要求：

必须从项目根目录打开项目，比如项目目录为 C:/xx/projects/Face，那么应该将 Face 文件夹以打开文件夹功能打开，或者将此文件夹拖入编辑器的工作区中打开
所有多人合作的项目都必须配置 line 功能，优先选择 eslint 插件及其附属工具集
在项目初始化后及配置好对应的 lint 规则
所有项目成员在编辑项目施都必须打开 lint 功能，且必须保证所写代码严格符合规则
提交代码前需执行 lint 检查
代码提交时不允许有 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