Code Monkey home page Code Monkey logo

adminify's Introduction

Adminify

[Deprecated]: Please check REST-ADMIN - admin dashboard based on vue 2 and bootstrap v4

Join the chat at https://gitter.im/vue-adminify/Lobby

  • An Admin dashboard based on Vuetify .
  • Data in demo use axios-mock-adapter
  • Better Server API is built on AdonisJs .
  • Also welcome to Adonis China .

Live Demo

http://adminify.genyii.com

Features

  • Vue + Vue Router + Vuex + Axios.
  • Material Design Style - Vuetify
  • Data Grid with server side sort,search,pagination and json config.
  • Dynamic Form Builder with text,textarea,radios,checkboxes,select,html input types and json config.
  • Built in localStorage proxy for any data types.
  • Axios Mock with axios-mock-adapter
  • Configurable side menu with json
  • i18n with vue-i18n
  • Basic and Main layouts
  • Stylus processor
  • And more of your requests.

Getting start

  1. git clone https://github.com/wxs77577/adminify.git
  2. Copy src/config.sample.js to src/config.js
  3. npm install
  4. npm run dev
  5. Remove line:6 ~ line:9 in /src/http.js to speed up page loading if you don't need http mock.

Use cnpm instead npm in China

Screenshots

1.png 2.png
3.png 4.png
5.png 6.png
7.png
Wechat Group Free Videos

Config

src/config.js

const baseUrl = 'http://localhost:3333'
const config = {
  locale: 'en-US', //en-US, zh-CN
  url: baseUrl,
  debug: {
    mock: 1, //enable mock
    http: true, //http request log
  },
  api: `${baseUrl}/admin/api`
  // locale: 'en', //en
  // api: 'http://192.168.1.108:3333/admin/api'
}

Menu Config

src/menu.js

export default [
  { "href": "/", "title": "Home", "icon": "home" },
  { "href": "/crud/types", "title": "Types", "icon": "view_list" },
  { "href": "/crud/posts", "title": "Posts", "icon": "view_list" },
  { "href": "/crud/posts/create", "title": "Create Post", "icon": "note_add" },


  { "href": "/crud/comments", "title": "Comments", "icon": "view_list" },
  { "href": "/crud/users", "title": "Users", "icon": "people" },
  
  
  
  { "href": "/chat", "title": "Chat", "icon": "chat" },
  {
    "title": "Pages",
    "icon": "domain",
    "items": [
      { "href": "/example", "title": "Example" },
      { "href": "/about", "title": "About" }
    ]
  },
  { "href": "/settings", "title": "Settings", "icon": "settings" },

  { "href": "/login", "icon": "lock", "title": "Logout" }
]

No more explaination needed right?

Routes

Part of src/router.js

  // The signature of `route` function :
  function route(path, file, name, children) {}

  //routes
  [
    route('/login', 'Login', 'login'),
    route('/error', 'Error', 'error'),

    //path, file(*.vue), name, children
    
    route('/', 'Main', null, [
      route('/', 'Home', 'home'),
      route('/crud/:resource', 'CrudGrid', 'grid'),
      route('/crud/:resource/:id/edit', 'CrudForm', 'edit'),
      route('/crud/:resource/create', 'CrudForm', 'create'),
      route('/crud/:resource/:id/:action', 'CrudForm', 'action'),
      route('/crud/:resource/:action', 'CrudForm', 'indexAction'),
      route('/example', 'Example'),
      route('/settings', 'Settings'),
      route('/theme', 'Theme'),
      route('/chat', 'Chat'),
      route('/about', 'About'),
    ]),
    

    // Global redirect for 404
    { path: '*', redirect: '/error', query: {code: 404, message: 'Page Not Found.'} }
  ]

Grid View Config

src/mock/index.js

mock.onGet('/types/grid').reply(200, {
  "options": {
    "sort": "id", //default sort column
    "create": false, //show Create button
    "update": true, //show update button
    "delete": false //show delete button
  },
  "filters": {
    "model": {
      "name": "",
      "created_at": ""
    },
    "fields": { //filters fields config
      "name": {
        "label": "Name"
      },
      "created_at": {
        "label": "Created At",
        "type": "date"
      }
    },
    "rules": {}
  },
  "columns": [ //columns config
    {
      "text": "Id", //column header text
      "value": "id" //field name
    },
    {
      "text": "Name",
      left: true, //make text align left, default is right
      "value": "name"
    }
  ]
});

Grid View Data

src/mock/index.js

mock.onGet(/\/(posts|users|types|comments)$/).reply(({ params = { page: 1, perPage: 10 }, url }) => {
  let resource = url.split('/')[1]
  let offset = (params.page - 1) * params.perPage
  let models = data[resource]
  return [200, { //return like this format
    currentPage: params.page,
    lastPage: Math.ceil(models.length / params.perPage),
    perPage: params.perPage,
    total: data[resource].length,
    data: models.slice(offset, offset + params.perPage)
  }]
});

Form Builder Config

src/mock/index.js

mock.onGet('/settings/form').reply(({ params }) => {
  return [200, {
    "model": { //form model
      name: 'Adminify',
      logo: 'http://placeimg.com/128/128/any',
      date: null,
      
      type: 1,
      status: 1,
      
      tags: [],
      description: 'An Awesome Site',
      intro: '',
    },
    "fields": { //form fields
      "name": {label: 'Name'}, //default type is 'text'
      "logo": {label: 'Logo', type: 'image'}, //working in progress
      "date": {label: 'Created At', type: 'date'},
      "type": {label: 'Type', type: 'select', options: [
        {text: 'Blog', value: 1},
        {text: 'Company', value: 2},
        {text: 'Game', value: 3},
      ]},
      "status": {label: 'Status', type: 'radios', width: 'md3', options: [
        {text: 'Enabled', value: 1},
        {text: 'Disabled', value: 2}
      ]},
      "tags": {label: 'Tags', type: 'checkboxes', width: 'md3', options: [
        {text: 'Enabled', value: 1},
        {text: 'Disabled', value: 2}
      ]},
      "description": {label: 'Description', type: 'textarea'},
      "intro": {label: 'Intro', type: 'html'},
    }
  }]
})

Comunication

Gitter IM

https://gitter.im/vue-adminify/

adminify's People

Contributors

acampagnaro avatar gitter-badger avatar lucy1990 avatar wxs77577 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

adminify's Issues

hot reload not work

Does This release support to hot reload? Even it work well by start localhost:3335 by myself. But chrome did not show the homepage automatically when I start .

Thanks

Clarify license

Please clarify what license this is released under to allow reuse (if desired)

hi, i have this error console please what happen

View issues
vue.esm.js?65d7:628 [Vue warn]: Do not use built-in or reserved HTML elements as component id: switch
vue.esm.js?65d7:9077 Download the Vue Devtools extension for a better development experience:
https://github.com/vuejs/vue-devtools
vue.esm.js?65d7:9088 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html
createError.js?f777:16 Uncaught (in promise) Error: timeout of 1000ms exceeded
at createError (createError.js?f777:16)
at XMLHttpRequest.handleTimeout (xhr.js?14ed:95)
createError.js?f777:16 Uncaught (in promise) Error: timeout of 1000ms exceeded
at createError (createError.js?f777:16)
at XMLHttpRequest.handleTimeout (xhr.js?14ed:95)
createError.js?f777:16 Uncaught (in promise) Error: timeout of 1000ms exceeded
at createError (createError.js?f777:16)
at XMLHttpRequest.handleTimeout (xhr.js?14ed:95)
2
createError.js?f777:16 Uncaught (in promise) Error: timeout of 1000ms exceeded
at createError (createError.js?f777:16)
at XMLHttpRequest.handleTimeout (xhr.js?14ed:95)

Side bar does not work correct.

My browsers show the sidebar when windows is wide and do not show when it narrow. Menu button does not work. It means I can not hide the sidebar when the window wide and can not open it when the window narrow.

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.