# huangpu

**Repository Path**: yunye526/huangpu

## Basic Information

- **Project Name**: huangpu
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2016-11-16
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Export Java

#### Supported Node.js versions 0.10, 0.12, 1, 2, 3, 4, 5, 6 and 7.

## 环境准备

安装nodejs，并设置环境变量，终端窗口输入
```
node --version
```

显示如下版本号即是安装成功
```
v6.2.2
```

安装gulp工具，终端窗口输入如下命令执行安装
```
npm install gulp -g
```

终端窗口输入
```
gulp --version
```

显示如下版本号即是安装成功
```
[11:17:15] CLI version 3.9.1
[11:17:15] Local version 3.9.1
```


## 开发环境运行

```
gulp serve
```

## 打包编译

```
gulp build
```
编译好的代码将保存在dist目录下


## 项目结构

* `.tmp` (临时文件) - 临时文件.
* `bower_components` (第三方依赖库) - 第三方依赖库
* `src` (开发目录) - 项目源代码:
  * `app` () - app源代码
     - `components` (组件) - directive
     - `login` (登录模块) - 登录页面和控制器
     - `machinecode` (机器码模块) - 机器码页面和控制器
     - `main` (首页) - 首页和控制器
     - `other` (404模块) - 404页面和控制器
     - `playcode` (播放码模块) - 我的播放码页面和控制器
     - `register` (注册模块) - 注册页面和控制器
     - `uploadcode` (机器码上传模块) - 机器码上传页面和控制器
     - `index.config.js` () - app配置
     - `index.constants.js` () - app常量
     - `index.module.js` () - 模块定义
     - `index.route.js` () - 路由配置
     - `index.run.js` () - main函数，只运行一次
     - `index.scss` () - app样式scss源代码
     - `index.service.js` () - 与服务端的数据交互（rest)
  * `assets` (静态资源) - 图片、文件等
     - `images` () - app图片
     - `ZeroClipboard.swf` () - flash播放文件



## 代码规范

#### 一个模块一个文件夹，模块名称与路由配置的名称匹配：

```javascript
    .state('machinecode',{
		url:'/machinecode',
		templateUrl:'app/machinecode/machinecode.html',
		controller:'MachineCodeController',
        controllerAs: 'machinecode'
	})
```


#### 增加第三方依赖库按照如下方式：

```
    bower install --save <第三方依赖库名称>
```


#### 所有请求增加了拦截器(index.route.js)：

```javascript
    function myInterceptor($rootScope, $q,client,MyAuth){
      return {
          'request':function(config){
              config.headers['Content-Type'] = 'application/json';
              config.headers['source'] = '' + client.source;
              config.headers['token'] = '' + (MyAuth.loggedIn() || '');
              
              if(config.data){
                  config.data.head = {source:client.source,token:MyAuth.loggedIn() || ''}
              }
              return config;
          },
          'requestError':function(rejection){
              return $q.reject(rejection);
          },
          'response':function(response){
              if(response.status == 401 || response.status === 403) {
                  $rootScope.$broadcast('event:auth-require',response);
                  return $q.reject(response);
              }else{
                  if(response.head && response.head.errorCode == '401'){
                      return $q.reject(response.head);
                  }
                  return response;
              }
          },
          'responseError':function(rejection){
              if(rejection.status === 401 || rejection.status === 403){
                  $rootScope.$broadcast('event:auth-require',rejection);
              }else{
                  return $q.reject(rejection);
              }
          }
      };
  }
```



## 涉及知识点

* `nodejs` (开发构建环境) - 开发环境必备，提供丰富的开发工具库，提升开发流程效率.
* `gulp` (任务管理) - 基于流的任务调度管理.
* `angular` (mvvm框架) - 分层.
* `angular-ui-router` (路由控制) - 通过hash变化控制前端页面交互逻辑.
* `bootstrap-sass` (bootstrap栅格sass源码) - 提供响应式栅格化布局、组件样式、元素样式等.
* `angular-bootstrap` (集成angular方式的bootstrap工具) - 提供table、弹窗、菜单、个性化tab等丰富的UI组件库.
* `angular-toastr` (toast组件) - tip|alert|confirm|dialog.
* `ngstorage` (本地存储) - 本地存储.
* `zeroclipboard` (复制函数) - 基于flash的复制功能函数（IOS上不支持）.