# nanniwanfront

**Repository Path**: shetienanniwan/nanniwanfront

## Basic Information

- **Project Name**: nanniwanfront
- **Description**: 南泥湾前端工程
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: V9.3
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2025-06-05
- **Last Updated**: 2025-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# constructionApp-front
设备管理系统是采用前后端分离的方式开发的。前端由vue+iview实现，其中涉及到的技术有：

- webpack--模块打包工具
- babel--与webpack配合编译es6
- node--开发运行环境
- es6--主要编程语言
- vue--前端框架
- vue-router--路由组件
- less--css预处理语言
- iview--UI组件库
- axios--HTTP库
- eslint--规范前端代码质量

开发项目之前至少需要了解以上知识。

## 环境准备
1.安装Node.js，从[官网](https://nodejs.org/en/)下载，下载稳定版本，不要最新版本，现在应该是10.16版本，最新版本不稳定，可能有未知的错误。

2.从GITEE上git clone前端项目代码，GITEE路径为 https://gitee.com/easylinkin/Link-App

3.为了编程风格的统一，编辑器统一安装EditorConfig插件

4.前端IDE统一使用VSCode，谷歌浏览器统一安装devtools来Debug

5.进入Link-App，在命令行终端执行以下命令

```bash
npm --registry=https://registry.npm.taobao.org install
```
等待命令执行完成，如果提示npm命令不存在，则表示Node.js没有安装正确，可以运行此命令检查
```bash
npm --version
```
## 运行
### 工程目录说明
```
|-dist (在运行npm run build后会出现，为编译后的压缩代码，不加入版本控制)
|-node_modules (在运行npm install后会出现，为依赖模块，不加入版本控制)
|-src (工程源码，源码编译后将放到dist目录中)
|  |-components (自定义组件，添加vue文件后需要在index.js内注册)
|  |-config
|  |  config.js (项目配置文件)
|  |  env.js (自动生成，标记当前环境是否为开发环境，不加入版本控制)
|  |-images (图片路径)
|  |-libs (自定义函数工具)
|  |-styles (外部定义的样式文件)
|  |-template (编译生成主页面的模板文件)
|  |-views (编写的页面都放在这里，根据路由来绑定页面)
|  app.vue (根组件)
|  main.js (入口js文件)
|  router.js (路由文件，将路由和views目录下问页面文件绑定)
|  vendors.js (项目依赖的库文件)
.babelrc (配置babel)
.eslintignore (配置eslint忽略文件)
.eslintrc.json (配置eslint规则)
.gitignore (配置git忽略文件)
.stylelintrc.json (配置stylelint规则)
index.html (入口页面)
LICENSE (版权许可证)
package.json (项目所需要模块及配置信息)
README.en.md (项目英文介绍及使用文档说明)
README.md (项目中文介绍及使用文档说明)
webpack.base.conf.js (webpack基础配置)
webpack.dev.conf.js (webpack开发环境配置)
webpack.prod.conf.js (webpack生产环境配置)
```
### 开发模式
运行以下命令
```bash
npm run init(运行一次即可，生成index.html)
npm run dev
```
开发模式采用webpack的插件web-dev-server实现热部署，每次有文件更新会自动编译，不用重新运行，也不需要刷新浏览器。
另外需要注意webpack.dev.config.js里面关于DevServer的配置，这个是为了将数据访问接口代理到后台去的配置，请根据实际
情况配置。

### 生产模式
运行以下命令，编译打包。编译生成的文件在项目更目录下的dist。
```bush
npm run build
```
发布时只需要把生成的dist目录与index_prod.html拷贝至后台项目的webapp目录下即可，注意在webapp下面将index_prod.html改为index_v4.1.html

### 开发规范
项目是单页应用，使用的是vue-router。所有的路由跳转基本上都在首页的菜单上。下面就简单说下加一个菜单的开发过程。

1.在./src/view下对应的模块目录中添加路由组件xxx.vue

2.在index的菜单下添加配置项，如下
```bash
     <Submenu name="basic">
        <template slot="title">
            <Icon type="gear-a"></Icon>
            <span>系统管理</span>
        </template>
        <MenuItem name="company"><span>公司管理</span></MenuItem>         </Submenu>
```
类似于公司管理，加一个MenuItem，注意此处MenuItem要与下方的路由配置中的
name一致。

3.在router.js中，配置路由。我们的菜单在index.vue上，因此我们添加的路由都是`/manage`的子路由。在`/manage`的children下添加以下格式的代码：
```bash
{
    name: 'xxx',
    path: 'xxx',
    component: (resolve) => require(    ['./views/rule/xxx.vue'], resolve),
    meta: {authCode: 'xxx',  parentMenu: 'xxx'}
}
```
`name`--路由名称，要与对应的MenuItem保持一致。
`path`--路由路径匹配
`component`--路由组件
`meta`--路由元数据，其中authCode是菜单权限码，加之前需要确认数据库中是否已经将此权限添加，parentMenu的值需要与步骤2中MenuItem的父节点Submenu的name保持一致。

4.在xxx.vue编写代码实现。
5.给模块加权限v-auth

### UI规范定义

- 根据UI规范，本项目将UI规范参数定义于difinitions.less文件中

- 组件的样式建议使用less书写

- 有自闭合标签且没有附带内容，尽量使用自闭合，如`<Input />`

- 当样式中需要用到difinitions.less中定义的变量和mixin，需要引入定义文件，如下

```less
@import "../../styles/difinitions.less";
```

- UI规范按钮类型对应

|type   |对应UI规范|
|-------|----|
|default|按钮一规范|
|dashed |按钮二规范(灰)|
|ghost  |按钮二规范(彩)|
|info   |按钮三规范|
|primary|按钮四规范|

项目中使用方法
```html
<!-- 按钮一规范 -->
<Button>按钮一</Button>
<!-- 按钮二规范(灰) -->
<Button type="dashed">按钮二(灰)</Button>
<!-- 按钮二规范(彩) -->
<Button type="ghost">按钮二(彩)</Button>
<!-- 按钮三规范 -->
<Button type="info" icon="ios-search">按钮三</Button>
<!-- 按钮四规范 -->
<Button type="primary" icon="ios-search">按钮四</Button>
```
- 设计图中的图标可暂时用 https://www.iviewui.com/components/icon ivew中的图标代替，后续统一改

### 编码规范说明

#### Javascript

- 自定义函数需要有文档注释，包含：函数说明，参数类型，参数名，参数说明，返回值类型，返回说明，格式示例如下：

``` javascript
/**
* 给菜单列表添加对应等级的子菜单
* @param {map<string,object>} parentMenuMap 父菜单的键值对
* @param {object} childMenuItem 子菜单项
* @param {integer} level 子菜单级别
* @returns {list<object>} 返回添加子菜单后的结果列表
*/
```

- 二元运算符与操作变量间需要有空格，一元运算符与操作变量间不能有空格

- 点运算符前后不能有空格

- 对象键值对中的冒号后需要有空格

- 函数参数列表括号和参数列表间不能有空格

- 逗号操作符后需要加空格，逗号前不加空格

- 缩进为4个空格，代码块需要有正确缩进

- this的别名只能定义为_this

- 本项目中使用es6规范，需要严格使用let和const定义变量或常量，避免使用var定义

- 注释后加一个空格，如`// console.log()`

- 箭头函数箭头前后加空格，如`() => {}`

- if/else括号前后需要加空格，如`if () {} else () {}`

- js代码块一致先使用单引号优先''，html代码块一致使用双引号优先""

- 使用Mustache语法时，双括号内左右需空格，如`{{ msg }}`

#### Vue书写规范

##### 必要

-   组件名为多个单词，禁止单个单词，且必须有语义

-   使用驼峰命名法

-   组件的data必须是一个函数

-   prop定义应该尽量详细，且必须设置属性类型

-   为v-for设置键值，且键值在最前

-   为组件样式设置作用域

-   私有属性名前缀 $_

-   if/else块众多时，使用switch语句替换

-   尽量不使用setTimeout/setInterval

-   尽量不使用直接操作DOM的语句，用$refs替代

#####

-   其他详见__(Vue风格指南)[https://cn.vuejs.org/v2/style-guide/]__

#### mockjs模拟数据
mockjs拦截的请求都用Util.requestT发送，这样到时候与后台对接口，直接换成Util.request,其他部分基本上不用修改

### 存在的问题
- 提交的代码中存在debugger
- 代码中对象的拷贝，数组的遍历等没有使用es6中的方法，实现比较复杂，代码不够简洁
- 组件中的method以及变量命名没有遵循小驼峰规则，存在用下划线分隔。


# 动态跳转系统使用说明

## 概述

动态跳转系统允许在登录成功后根据当前访问的IP地址自动跳转到不同的系统，无需修改代码即可适应不同环境的部署需求。

## 功能特性

- ✅ 支持通过URL参数动态配置跳转地址
- ✅ 根据当前IP地址自动匹配跳转目标
- ✅ 支持内网/外网不同环境配置
- ✅ 提供默认跳转地址作为兜底方案
- ✅ 支持运行时调试和配置查看

## 使用方法

### 1. 通过URL参数配置（推荐）

在访问登录页面时，通过URL参数传入跳转配置：

```
http://your-domain/login.html?jumpConfig=ip1:url1,ip2:url2
```

#### 示例：

**内网测试环境：**
```
http://172.16.10.25:8092/login.html?jumpConfig=172.16.10.25:http://172.16.10.25:16015/#/home,58.49.208.18:http://58.49.208.18:54947/#/home
```

**外网正式环境：**
```
http://58.49.208.18:8092/login.html?jumpConfig=172.16.10.25:http://172.16.10.25:16015/#/home,58.49.208.18:http://58.49.208.18:54947/#/home
```

### 2. 配置文件方式

在 `src/config/config.js` 中修改默认配置：

```javascript
jumpSystem: {
  // 默认跳转配置（当没有匹配到IP时使用）
  defaultJumpUrl: 'http://172.16.10.25:16015/#/home',
  // IP地址映射配置
  ipMappings: [
    {
      ip: '172.16.10.25',
      url: 'http://172.16.10.25:16015/#/home',
      description: '内网测试环境'
    },
    {
      ip: '58.49.208.18', 
      url: 'http://58.49.208.18:54947/#/home',
      description: '外网正式环境'
    }
  ]
}
```

## 配置参数说明

### URL参数格式

```
jumpConfig=ip1:url1,ip2:url2,ip3:url3
```

- `ip1:url1` - 第一个IP地址和对应的跳转URL
- `ip2:url2` - 第二个IP地址和对应的跳转URL
- 多个配置用逗号分隔

### 配置对象结构

```javascript
{
  defaultJumpUrl: '默认跳转地址',
  ipMappings: [
    {
      ip: 'IP地址',
      url: '跳转URL',
      description: '环境描述'
    }
  ]
}
```

## 工作原理

1. **IP检测**：系统自动获取当前访问的IP地址（hostname）
2. **配置匹配**：在配置列表中查找匹配的IP地址
3. **跳转执行**：如果找到匹配项，跳转到对应的URL；否则使用默认地址
4. **日志记录**：在控制台输出跳转过程信息，便于调试

## 调试功能

### 查看当前配置

在浏览器控制台中执行：

```javascript
// 查看当前跳转配置信息
console.log(jumpSystem.getCurrentConfig());
```

输出示例：
```javascript
{
  currentIP: "172.16.10.25",
  jumpConfig: {
    defaultJumpUrl: "http://172.16.10.25:16015/#/home",
    ipMappings: [...]
  },
  targetUrl: "http://172.16.10.25:16015/#/home"
}
```

### 动态更新配置

```javascript
// 运行时更新配置
jumpSystem.updateConfig({
  defaultJumpUrl: 'http://new-default-url.com'
});
```

## 部署建议

### 开发环境

使用配置文件方式，在 `config.js` 中设置开发环境的跳转地址。

### 测试环境

通过URL参数传入测试环境的配置，便于快速切换不同的测试环境。

### 生产环境

1. 在部署脚本中动态生成包含正确跳转配置的URL
2. 或者使用配置文件方式，确保生产环境的配置正确

## 注意事项

1. **IP地址格式**：确保IP地址格式正确，建议使用完整的IP地址
2. **URL格式**：跳转URL必须是完整的URL，包含协议（http/https）
3. **参数解析**：URL参数中的特殊字符需要进行URL编码
4. **浏览器兼容性**：系统使用了现代JavaScript API，建议在较新的浏览器中使用

## 故障排除

### 常见问题

1. **跳转到默认地址**
   - 检查当前IP是否在配置列表中
   - 确认IP地址格式是否正确

2. **参数解析失败**
   - 检查URL参数格式是否正确
   - 确认参数中的特殊字符已正确编码

3. **跳转失败**
   - 检查目标URL是否可访问
   - 确认网络连接正常

### 调试步骤

1. 打开浏览器开发者工具
2. 查看控制台输出的跳转信息
3. 使用 `jumpSystem.getCurrentConfig()` 查看当前配置
4. 检查网络请求是否正常

## 更新日志

- v1.0.0 - 初始版本，支持基本的IP匹配和跳转功能
- 支持URL参数配置
- 支持配置文件方式
- 提供调试和监控功能