## 说明

​	此项目前端基于IoincR6模板发布，后台是基于R6后台模板发布，主要有八大工作流程的信息化管理，包括请假、车辆、公文流转、公章办理、办公用品、会议室使用、资金使用、合同办理等功能，此项目的整个结构直接导入到开发工具中，启动即可。

## 技术栈

​	ionic4 + angular7 + webpack + ES6/7 + less

## 项目运行

```
git clone  http://demo.ibizlab.cn/pfdemosln/ionicdemo

cd  app_Mob

yarn install

ionic  serve 或者 ng  serve

yarn  build

```

## 工作目录文件目录结构

![](README.assets/1567994849327.png)

见上图，开发人员比较关注的是项目中的项目目录，就src下的主要文件目录做一阐述：

app：项目的根目录

```
app-routing.module.ts：项目的路由入口文件
```

assets：项目的资源目录，主要包含项目的静态资源，包括图片，图标等文件

engine：视图的引擎，主要包括每种视图的自持逻辑

environments：环境配置，主要包括项目的一些基础性配置，如：文件上传/下载路径，远程登录路径等

global：项目的基础文件集合

```
components：项目的基础组件文件夹

directives：项目的基础指令文件夹

guard：项目的路由守卫文件夹

helper：基础文件的辅助类/组件文件夹

interface：项目的接口类，主要包含应用功能，代码表和视图传递类

model：表单的模型类

service：服务类的集合，包括应用级App服务对象，AppInitService服务对象，代码表CodeList服务对象，前后端交互对象Http服务对象，加载状态Loading服务对象，弹框AppNotification服务对象以及拦截器Interceptors服务对象。

util：常用的工具类集合

global.module.ts：项目的基础组件和基础指令的注册中心
```

pages：项目的所有视图集合，它是以前端应用模块来分文件夹管理的

share：应用的共享模块

theme：项目的主题文件夹集合，其中用户自定义样式可以放在user.scss文件夹中

widget：项目的所有部件集合，它是以实体来分文件夹管理的

global.scss：项目样式的入口文件

index.html：项目的入口文件

## 部分截图

![](README.assets/1567995599318.png)

![](README.assets/1567995646710.png)

![](README.assets/1567995691371.png)

![](README.assets/1567995737178.png)

![](README.assets/1567995787382.png)

![](README.assets/1567995823693.png)

## 常见问题

### 1.proxy文件的配置

​	前后端分离开发是现在主要的开发模式，前端作为单独的容器存在，访问后台需要配置代理，在前端项目主目录下的的proxy.conf.json文件进行相关配置，具体配置如下：

```
{
    *"/"*: {

        *"target"*: "http://127.0.0.1:1007/DemoApp"

    }
}
```

其中：http://127.0.0.1:1007是后台的ip和端口号，DemoApp是后台启动的项目名。

### 2.自定义主题

​	移动端的主题实现主要基于ionic扩展，我们需要自定义主题时我们首先在theme文件夹下app-theme-config.ts文件下设置相应的主题对象，然后创建自己的主题文件，注意主题文件的类名必须和app-theme-config.ts的id一致，然后在主题文件中设置自己的样式。项目初始化主题是在app/app.component.ts里面，修改主题样式可以根据自己的需求进行设置。