# ControlProject-Vue_iView

**Repository Path**: dew_admin/ControlProject-Vue_iView

## Basic Information

- **Project Name**: ControlProject-Vue_iView
- **Description**: 控制台项目框架，包括前端和后端，开箱即用，直接进行业务开发，前端采用Vue+iView，后端采用Nodejs，该项目对Vue目录结构进行了相应的改造，webpack 支持在同一框架下进行多多项目的生成和开发，模块化布局，适用于团队协作，力争尽量减少多人需要同时编辑同一个文件的问题，比如路由文件， 目的是更清晰，更方便与业务配合。前端支持多项目入口，一个项目一个文件夹，前端支持路由文件自动生成，后端也支持api路由动态加载，不需要手动创建。管理后台已经实现了用户管理，用户角色管理，系统模块设置，用户权限划分，静态字典表管理，系统参数管理，等管理系统基本功能。菜单支持上 左 Main区顶部，自定义定位，其中 左边菜单支持无限极子菜单。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2019-05-26
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# ControlProject-Vue_iView
从前端到后端的控制项目自动化工厂。
控制台项目框架，包括前端和后端，开箱即用，直接进行业务开发，前端采用Vue+iView，后端采用Nodejs。

# 项目地址
码云 https://gitee.com/tianling/ControlProject-Vue_iView 

#数据库
MySql5.6


# 项目特点
该项目对Vue目录接口进行了大量的改造，目的是更清晰，更方便与业务配合，前端支持多项目入口，一个项目一个文件夹，前端支持路由文件自动生成，后端也支持api路由动态生成，不需要手动创建。管理后台已经实现了用户管理，用户角色管理，系统模块设置，用户权限划分，静态字典表管理，系统参数管理，等管理系统基本功能。菜单支持上 左 中间顶部，自定义定位，其中 左边菜单支持无限极子菜单。

## package.json 中的 命令说明

```bash
# 项目安装
npm install

# 创建前端Vue主模块
npm run createVueSubject [项目名称] 如：npm run createVueSubject demo

# 运行开发模式 端口8080 请在config目录中index.js 中修改
npm run dev [项目名称]

# 发布vue模块到 dist 目录中
npm run build [项目名称]

# 手动生成vue 路由 文件
npm run createVueRouter [项目名称]

# 手动生成数据库访问层 位置：my_modules/data-base
npm run createDb
```
# 前端Vue文件的命名
因为前端路由文件在开发模式下，如果文件改变，会自动生成路由文件 routers.js ,所有文件名的创建是有规则的

## 母版页
母版页统一命名为_layout.vue，切每个目录下只能有一个_layout.vue,当目录下存在_layout.vue时，其余文件包括子目录中文件将是
_layout.vue 的children，children 你懂得。

## 强制不使用母版页
如果某个页面不需要母版页，比如manage中的login 页面，这时可在文件名后加-nolayout 如：login-nolayout.vue

## 参数化的文件名
如果希望在某个url中，用到 /path/:id 之类的，需要在文件名创建参数。比如 manage/modules/system/iframeDict{label}.value url会被解析为 /manage/system/iframeDict/:label

## 下划线的解析
如果有文件如： /manage/modules/label_cc.vue 那么他的url 将被解析为 /manage/label/cc

# 重要目录说明

## /config/index.js
前端vue开发模式和发布的配置文件，业务功能配置请不要放在这里

## /config/server-config.js
后端应用配置 数据库 redis 等

## /areas
后端模块目录，该目录下一个目录一个模块，模块下的子模块，放在 controls 下,
如：/areas/api/controls/system/admin-user.js 访问地址为：http://lcoation:3000/api/system/admin-user
admin-user.js 如下
```nodejs
router.post("/getItems", async function(req, res) {
    var Result = new WebTools.CallBackData();
    try {
        var Ret = await GetAdminUserItems(req, res);
        Result.Result = 1;
        Result.Data = Ret;
    } catch (err) {
        Result.Result = 0;
        Result.Msg = JSON.stringify(err);
    }
    res.json(Result);
});
````

访问url地址为 http://lcoation:3000/api/system/admin-user/getItems

## /areas/[后端模块名称]/router.js
后端模块路由文件，每个总模块一个，总模块指的是areas目录下直接目录，系统运行后，会自动加载 areas 目录下的所有 router.js ，每个router.js 只用负责当前模块，该文件可以自由编辑，以保证绝对的可扩展行。

## /dist
发布的前端项目都在这里

## /static
全局公用静态资源模块

## /build
生成项目程序目录

## index-template
前端 index.html 模板目录，命名规则为 [项目名称]-index.html

## my_modules
私有 nodeJs 模块 目录
## /src
前端vue模块目录，一个主模块一个目录，主模块中包括自己的私有静态资源模块，私有组件目录，私有子模块目录，私有入口文件，私有路由问题，在开发模式下，私有路由文件会自动生成。 创建vue项目 请使用 npm run createVueSubject [项目名称] 进行创建。