adonis adminify

Adonis 관리자(Nodejs + Vue 관리자 대시보드)

AdonisJs 및 Adminify(Vuetify 기반)를 기반으로 하는 관리 대시보드 애플리케이션에 대한 자세한 내용은 Adonis China에서 확인하세요. 키워드: NodeJs, VueJs, AdonisJs, ORM, 관계, SQLite, MySQL, 미들웨어, Restful, CRUD, 머티리얼 디자인

시작하기

서버측

1. git clone https://github.com/adonis-china/adonis-admin.git
2. cd adonis-admin
3. cp .env.example .env
4. npm install && npm run serve:dev API 서버 시작
5. ./ace migration:refresh --seed 채우기 데이터베이스(Windows에서는 node ace 사용)

클라이언트 측

1. git submodule update --recursive --remote --init 풀 하위 모듈
2. cd adminify
3. cp src/config.sample.js src/config.js Windows에서 copy 사용합니다.
4. src/config.js 에서 debug.mock false 로 변경하세요.
5. npm install && npm run dev 클라이언트 시작
6. 브라우저에서 http://localhost:8080 (또는 다른 포트)을 엽니다.

중국에서는 npm 대신 cnpm 사용하세요

UI 스크린샷

작업 흐름 - 리소스에 대한 CRUD 추가

• ./ace make:model -m Page , 페이지 관리를 위한 마이그레이션으로 Page 모델을 생성합니다.
• /database/migrations/1496388160682_create_page_table.js 열고 일부 필드를 추가하세요.

   table . increments ( )
  table . integer ( 'type_id' ) . unsigned ( ) . nullable ( )
  table . foreign ( 'type_id' ) . references ( 'types.id' )
  table . string ( 'title' ) . notNullable ( )
  table . text ( 'body' )
  table . timestamps ( )

• ./ace migration:run
• /app/Model/Page.js 열고 belongsTo 관계를 추가하세요:

   class Page extends Lucid {
    type ( ) {
      return this . belongsTo ( 'App/Model/Type' )
    }
  }

• /app/Http/Controllers/Admin/Api/EmptyController.js PageController.js 에 복사하고 다음과 같이 변경합니다.

 'use strict'

const RestController = require ( './RestController' )
const Page = use ( 'App/Model/Page' )
const Type = use ( 'App/Model/Type' )

class PageController extends RestController {
  get resource ( ) {
    return 'pages'
  }

  get expand ( ) {
    return [ 'type' ]
  }


  * gridData ( ) {
    //change the fields
    return {
      options : {
        sort : 'id' , //or '-id' as desc
        create : true ,
        update : true ,
        delete : true
      } ,
      // filters: false,
      filters : {
        model : {
          title : '' ,
          created_at : ''
        } ,
        fields : {
          title : { label : 'Title' } ,
          created_at : { label : t ( 'fields.Page.created_at' ) , Page : 'date' }
        } ,
        rules : { } ,

      } ,
      columns : [
        { text : t ( 'fields.Page.id' ) , value : 'id' } ,
        { text : t ( 'fields.Page.title' ) , value : 'title' }
        
      ]
    }
  }

  * formData ( request , response ) {

    let model = {
      title : '' ,
      type_id : null ,
      body : '' ,
    }
    let id
    if ( request ) {
      id = request . input ( 'id' )
      if ( id ) {
        model = yield Page . query ( ) . where ( 'id' , id ) . first ( )
      }
    }

    let typeOptions = yield Type . query ( ) . select ( 'id' , 'name' ) . fetch ( )
    for ( let type of typeOptions ) {
      type . text = type . name
      type . value = type . id
    }

    return {
      
      model : model ,
      fields : {
        title : { label : 'Title' , hint : 'Page Title' , required : true } ,
        type_id : {
          label : 'Type' , type : 'select' , options : typeOptions , required : true ,
        } ,
        body : { label : 'Body' , type : 'html' , required : false } ,
      } ,
      rules : model . rules ,
      messages : model . messages
    }
  }

  
}

module . exports = PageController

• /app/Http/routes.js:26 에 경로 추가

  const resources = [ 'posts' , 'users' , 'types' , 'comments' , 'settings' , 'pages' ]

• /adminify/src/menu.js 에 메뉴를 추가하면 왼쪽 메뉴에 표시되는 것을 볼 수 있습니다.

{ "href" : " /crud/pages " , "title" : " Pages " , "icon" : " view_list " },

• http://localhost:8080/#/crud/pages 로 이동하면 모든 페이지의 그리드 목록 보기를 얻을 수 있습니다.
• plus 버튼을 눌러 페이지를 추가하고 추가한 후 편집할 수도 있습니다.