# iview-admin-grid

**Repository Path**: sunshine_xiaoma/iview-admin-grid

## Basic Information

- **Project Name**: iview-admin-grid
- **Description**: 网格化平台
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 2
- **Created**: 2020-09-10
- **Last Updated**: 2024-04-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


# iView Admin

[![](https://img.shields.io/github/release/iview/iview-admin.svg)](https://github.com/iview/iview-admin/releases)
[![](https://img.shields.io/travis/iview/iview-admin.svg?style=flat-square)](https://travis-ci.org/iview/iview-admin)
[![vue](https://img.shields.io/badge/vue-2.5.10-brightgreen.svg?style=flat-square)](https://github.com/vuejs/vue)
[![iview ui](https://img.shields.io/badge/iview-3.1.3-brightgreen.svg?style=flat-square)](https://github.com/iview/iview)
[![npm](https://img.shields.io/npm/l/express.svg)]()

[更新日志](https://github.com/iview/iview-admin/releases)

[使用文档](https://lison16.github.io/iview-admin-doc/#/)

[在线访问](https://admin.iviewui.com/)

[简化版模板](https://github.com/iview/iview-admin/tree/template)

[教学视频(26课时)](https://segmentfault.com/ls/1650000016221751?utm_source=banner)

`注：在线版本会在开发版本新小版本发布后更新到相应版本，所以如果想体验最新版本iview-admin，请clone完整项目代码到本地运行。`

## Install
```bush
// install dependencies
npm install
```
## Run
### Development
```bush
npm run dev
```
### Production(Build)
```bush
npm run build
```

## 简介
  iView admin是基于Vue.js，搭配使用[iView](https://www.iviewui.com) UI组件库形成的一套后台集成解决方案，由TalkingData前端可视化团队部分成员开发维护。iView admin遵守iView设计和开发约定，风格统一，设计考究，并且更多功能在不停开发中。
如果您想查看iview-admin的更新动态，您可以到[更新日志](https://github.com/iview/iview-admin/releases)查看了解最新更新；如果您是新手，想快速入手iview-admin，您可以到[使用教程](https://github.com/iview/iview-admin/wiki)查看讲解；如果您想在线体验iview-admin，您可以到[在线访问](https://admin.iviewui.com/)体验。如果你只是想要一个清醒爽朗的界面，那你可以下载[简化版模板](https://github.com/iview/iview-admin/tree/template)来做开发。

## 功能

- 登录/登出
- 权限管理
    - 列表过滤
    - 权限切换
- 多语言切换
- 组件
    - 富文本编辑器
    - Markdown编辑器
    - 城市级联
    - 图片预览编辑
    - 可拖拽列表
    - 文件上传
    - 数字渐变
    - split-pane
- 表单编辑
    - 文章发布
    - 工作流
- 表格
    - 可拖拽排序
    - 可编辑表格
        - 行内编辑
        - 单元格编辑
    - 可搜索表格
    - 表格导出数据
        - 导出为Csv文件
        - 导出为Xls文件
    - 表格转图片
- 错误页面
    - 403页面
    - 404页面
    - 500页面
- 高级路由
    - 动态路由
    - 带参页面
- 换肤
- 收缩侧边栏
- tag标签导航
- 面包屑导航
- 全屏/退出全屏
- 锁屏
- 消息中心
- 个人中心

## 文件结构
```shell
.
├── build  项目构建配置
├── config  开发相关配置
├── public  打包所需静态资源
└── src
    ├── api  AJAX请求
    └── assets  项目静态资源
        ├── icons  自定义图标资源
        └── images  图片资源
    ├── components  业务组件
    ├── config  项目运行配置
    ├── directive  自定义指令
    ├── libs  封装工具函数
    ├── locale  多语言文件
    ├── mock  mock模拟数据
    ├── router  路由配置
    ├── store  Vuex配置
    ├── view  页面文件
    └── tests  测试相关
```
### 接口请求说明
1.接口需要在src/api里面添加接口文件和接口函数
```shell
export const menus = () => {
  return axios.request({
    url: '/api/ac/sc/menuService/getVueMenuList?menu_id=296c841693a84572b458dc6ea1d8add6',
    method: 'get',
    params: { ab: 1 },
    php: true,
    await: true
  })
}
export const goods = (access) => {
  return axios.request({
    url: '/Api/Api/tt',
    data: { abc: 123 },
    method: 'post',
    php: true,
    await: true
  })
}
```
####参数说明
php 是调用php接口的时候需要传递为true，默认false
await 默认false，传递true 执行等待回调。调用页面写法如下
```shell
async awaitGoods () {
      let wx = await goods()
      console.log(wx, '等待返回来的数据')
      let next = await menus()
      console.log(next, '下一个等待返回来的数据')
    }
```    
2.使用接口：在页面引用接口文件
```shell
import { menus, goods } from '@/api/goods'
``` 
普通调用
```shell
upBase64(data).then(data => {
        that.loading = false
        that.result_photo = data.data.result
        this.comparison(this.user_idcard, data.data.result)
      })
```