Giter VIP home page Giter VIP logo

vue-admin-easy-old's Introduction

vue-admin-easy

致力于简单易用,可扩展的后台脚手架

一、自定义布局

目录结构

--| lib
----| layouts
------| BlankLayout 空白布局,如登录注册页
------| HeaderSideLayout 由顶栏和侧边栏和内容区组成的布局
--------| 详细见github项目目录

在哪配置layout?

路由配置的meta.layout字段

  {
    path: '/index',
    component: () => import('@/pages/Index'),
    meta: {
      layout: 'HeaderSideLayout'
    }
  }

二、路由与导航

设计理念:扁平化路由,将路由拆分为模块,简单易配置

2.1目录结构

-| router
----| guestRouter.js 游客可访问路由
----| routerConfig.js 所有的权限列表中的路由
----| userCommonRouter.js 所有登陆用户都可访问路由
----| navConfig.js 路由导航配置,支持`顶部+侧边`三级导航
----| index.js 路由初始化

2.2 路由初始化index.js

  1. 只对对guestRouter进行路由实例化
  2. 当本地存有tocken时,发起请求,获得用户信息和权限路由列表。(本地无tocken时只能访问guestRouter.js中的路由,非其中路由会跳转登录)
  3. 通过用户的权限路由列表,过滤出可访问路由的配置和导航菜单配置
  4. 使用addRoutes进行动态挂载过滤出来的路由配置

2.3 导航配置router/navConfig.js

  1. 支持两级导航和三级导航,详见router/navConfig.js
  2. 支持Font Awesome icon

三、弹窗表单(dialogForm)

3.1 dialogForm分层

dialog 弹窗层
  form 表单层,包含提交表单等操作
    form-item 表单元素 单个字段对应得表单元素

3.2 dialogForm配置文件

{
    title: 'dialog 标题',
    show: false,
    formComponent: 'basic-form',
    form: {
      option: '', // 'edit' | 'create'
      formData: {},
      formItems: [
        {
          name: 'username',
          label: '昵称',
          options: ['edit', 'create'],
          placeholder: '请输入昵称',
          rules: [
            { required: true, message: '昵称不能为空', trigger: 'blur' },
            { max: 16, message: '昵称长度不能超过16个字符', trigger: 'blur' }
          ]

          // disabled: true // edit 和 create状态下都会被禁用,如果只要禁用其中一个,看下面四个属性
          // 以下四个属性使用情景:当编辑状态与创建状态表单的 readonly 或 disable 状态不同时
          // create_readonly: true, // 或 edit_readonly: true
          // create_disabled: true // 或 edit_disabled: true

        },
        {
          name: 'sign',
          label: '签名',
          options: ['edit'],
          rules: [
            { max: 200, message: '昵称长度不能超过200个字符', trigger: 'blur' }
          ]
        },
        {
          name: 'email',
          label: '邮箱',
          placeholder: '请输入邮箱',
          options: ['edit', 'create'],
          rules: [
            { required: true, message: '邮箱不能为空', trigger: 'blur' },
            { type: 'email', message: '邮箱格式错误', trigger: 'blur' }
          ]
        },
        {
          name: 'phone',
          label: '手机',
          placeholder: '请输入手机',
          options: ['edit', 'create'],
          rules: [
            { required: true, message: '手机不能为空', trigger: 'blur' },
            { validator: validators.isPhone, trigger: 'blur' }
          ]
        },
        {
          name: 'role',
          options: ['edit', 'create'],
          label: '权限',
          component: 'easy-select',
          componentData: [
            { value: 'admin' },
            { value: 'user' },
            { value: 'guest' }
          ],
          edit_disabled: true
        }
      ]
    } // 表单所需数据
  }

四、未来功能

  • 在dialogForm上进一步封装页面级别组件,一个配置文件,即可生成增删改查的表格页面
  • 丰富可视化组件库

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.