topfullstack / Adminify
Licence: mit
An Admin Dashboard based on Vuetify material
Stars: ✭ 923
Projects that are alternatives of or similar to Adminify
Rest Admin
Restful Admin Dashboard Based on Vue and Boostrap 4
Stars: ✭ 565 (-38.79%)
Mutual labels: adonisjs, dashboard, admin
Vuetify Admin Dashboard
A Crud Admin panel made from Vue js and Vuetify
Stars: ✭ 481 (-47.89%)
Mutual labels: vuetify, admin
Jet Bridge
Jet Bridge – Admin Panel Framework for your application
Stars: ✭ 904 (-2.06%)
Mutual labels: dashboard, admin
Ngx Admin
Customizable admin dashboard template based on Angular 10+
Stars: ✭ 23,286 (+2422.86%)
Mutual labels: dashboard, admin
Django Admin Bootstrap
Responsive Theme for Django Admin With Sidebar Menu
Stars: ✭ 787 (-14.73%)
Mutual labels: dashboard, admin
Leaa
Leaa is a monorepo restful CMS / Admin built with Nest.js (@nestjsx/crud, node.js) and Ant Design.
Stars: ✭ 375 (-59.37%)
Mutual labels: dashboard, admin
Cleopatra
Admin Dashboard Template Built On Tailwind CSS
Stars: ✭ 521 (-43.55%)
Mutual labels: dashboard, admin
Xboot
基于Spring Boot 2.x的一站式前后端分离快速开发平台XBoot 微信小程序+Uniapp 前端:Vue+iView Admin 后端:Spring Boot 2.x/Spring Security/JWT/JPA+Mybatis-Plus/Redis/Elasticsearch/Activiti 分布式限流/同步锁/验证码/SnowFlake雪花算法ID 动态权限 数据权限 工作流 代码生成 定时任务 社交账号 短信登录 单点登录 OAuth2开放平台 客服机器人 数据大屏 暗黑模式
Stars: ✭ 3,432 (+271.83%)
Mutual labels: dashboard, admin
Kaffy
Powerfully simple admin package for phoenix applications
Stars: ✭ 617 (-33.15%)
Mutual labels: dashboard, admin
Flask Profiler
a flask profiler which watches endpoint calls and tries to make some analysis.
Stars: ✭ 622 (-32.61%)
Mutual labels: dashboard, admin
Shards Dashboard Vue
A free Vue admin dashboard template pack featuring a modern design system and lots of custom templates and components.
Stars: ✭ 363 (-60.67%)
Mutual labels: dashboard, admin
Coreui Free Laravel Admin Template
CoreUI Free Laravel Bootstrap Admin Template
Stars: ✭ 353 (-61.76%)
Mutual labels: dashboard, admin
Kongdash
An elegant desktop client for Kong Admin API
Stars: ✭ 449 (-51.35%)
Mutual labels: dashboard, admin
Airframe React
Free Open Source High Quality Dashboard based on Bootstrap 4 & React 16: http://dashboards.webkom.co/react/airframe
Stars: ✭ 3,659 (+296.42%)
Mutual labels: dashboard, admin
Sail
Sail is a lightweight Rails engine that brings an admin panel for managing configuration settings on a live Rails app
Stars: ✭ 484 (-47.56%)
Mutual labels: dashboard, admin
Nuxt Material Admin
Vue-CLI Boilerplate based on Nuxt and vue-material-admin template.
Stars: ✭ 310 (-66.41%)
Mutual labels: vuetify, admin
Sleek Dashboard
Sleek Dashboard - Free Bootstrap 4 Admin Template and UI Kit
Stars: ✭ 690 (-25.24%)
Mutual labels: dashboard, admin
Adminify
REST-ADMIN - admin dashboard based on vue 2 and bootstrap v4
[Deprecated]: Please check- 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
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
andMain
layouts - Stylus processor
- And more of your requests.
Getting start
git clone https://github.com/wxs77577/adminify.git
- Copy
src/config.sample.js
tosrc/config.js
npm install
npm run dev
- Remove
line:6 ~ line:9
in/src/http.js
to speed up page loading if you don't need http mock.
Use
cnpm
insteadnpm
in China
Screenshots
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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].