adm-front

sagacloud-admin

A Vue.js project

Build Setup

npm install
npm install vuex axios element-ui echarts font-awesome
npm install less less-loader node-sass sass-loader --save-dev

# serve with hot reload at localhost:8080
npm run dev
# build for production with minification
npm run build
# build for production and view the bundle analyzer report
npm run build --report

项目结构说明

目录结构

│  .editorconfig                        # 格式化配置,修改缩进为2
│  index.html                           # 修改页面title
│  package.json                         # 包
│  README.md                            # 说明文档
│
├─build                                 # 不变
│
├─config
│      dev.env.js                       # 开发环境变量
│      index.js                         # 设置代理
│      prod.env.js                      # 生产环境变量
│
├─src
│  ├─api                                # 业务逻辑api, http的请求都放在这里
│  │  |─framework.js                    # 框架预留接口,实现登录,权限校验等功能
│  │  └─httputils.js                    # http 工具类
│  ├─assets                             # 静态资源, 替换logo图片
│  ├─components                         # 业务相关组件
│  ├─data                               # 业务相关静态数据
│  │      menus.js                      # 菜单数据
│  ├─demo                               # Demo主目录
│  │  │  demo-menus.js                  # Demo按钮
│  │  │  demo-routes.js                 # Demo路由
│  │  └─views                           # Demo页面
│  ├─framework                          # 框架主目录
│  │  ├─components                      # 业务无关组件
│  │  │
│  │  ├─demo                            # Demo主目录
│  │  │  │  demo-menus.js               # Demo按钮
│  │  │  │  demo-routes.js              # Demo路由
│  │  │  └─views                        # Demo页面
│  │  │
│  │  ├─layout                          # 框架主目录
│  │  │      layout-store.js            # 框架状态定义
│  │  │      Login.vue                  # 登录页
│  │  │      Main.vue                   # 框架主页
│  │  │      PageHeader.vue             # 顶部栏
│  │  │      PageSidebar.vue            # 左侧菜单栏
│  │  │
│  │  ├─plugins                         # 插件,业务无关
│  │  │      components.js
│  │  ├─style                           # 样式
│  │  │
│  │  ├─template                        # 页面模板
│  │  │      TablePageTemplate.vue
│  │  │
│  │  └─utils                           # 工具类,业务无关
│  │
│  ├─router                             # 主路由
│  │      index.js
│  │      system.js
│  │
│  ├─store                              # vuex
│  │      index.js
│  │
│  └─views                              # 业务页面主路径
|
└─static
        .gitkeep

/api/framework.js

必须实现以下方法

export default {

    // 路由拦截
    routerBeforeEach: async function(to, from, next){},

    // 获取左侧菜单数据
    getMenus: function(permissions){},

    // 跳转到登录页面
    toLoginPage: function(){},

    // 登录接口
    login: function(username, password){}

    // 加载当前登录用户信息
    loadUserInfo: function(){},

    // 退出登录
    toLogout: function(){}
}

工具类说明

/src/utils/basicutils.js

    formatDateByPattern(date, pattern) // 日期格式化
    indexInArray(arr, key, val)        // 找出数组arr中第一个属性key的值等于val的元素的下标
    itemInArray(arr, key, val)         // 找出数组arr中第一个属性key的值等于val的元素
    deleteInArray(arr, key, val)       // 从数组中将属性key的值等于val的所有元素删除

/src/api/httputils.js // 一般在服务端接口 API 中使用,不建议在别的地方使用,有授权标记

    getCookie(name)                    // 获取cookie值
    getJson(url, params)               // 发送GET请求
    postJson(url, data)                // 发送POST请求

/src/utils/storage.js

    set(key, value, fn)                // 在浏览器缓存中设置数据, 如果value是对象会转化成json
    get(key, fn)                       // 在浏览器缓存中取出数据, 取出数据后会尝试js对象返回
    remove(key)                        // 在浏览器缓存中删除数据

设置面包屑方法

在路由router中配置meta.breadcrumbs,在进入路由页面时会自动解析为面包屑
this.$store.dispatch('setBreadcrumb', [{ label: 'Demo' }, { label: 'Form'  ])
this.$store.dispatch('setBreadcrumb', [{ label: 'Demo', path: '' }, { label: 'Form' , path: ''}])

上传管理器调用方法(上传较大文件时使用)

在组件中引入Bus中央时间总线
    Bus.$emit('openUploader', query, file)    //添加文件到上传管理器中, query为参数, file为H5原生的文件对象
    Bus.$on('fileAdded', () => {})            //文件选择后的回调
    Bus.$on('fileSuccess', () => {})          //文件上传成功后的回调