脚本宝典收集整理的这篇文章主要介绍了

基于AdonisJs+Adminify的NodeJs+Vue后台管理系统 – Adonis Admin

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

https://github.com/adonis-chi...

Adonis Admin (Nodejs + Vue Admin dashboard)

An admin dashboard application based on AdonisJs and Adminify(based on Vuetify), see more at Adonis China.
Keywords: NodeJs, VueJs, AdonisJs, ORM, Relation, SQLite, MySQL, Middleware, Restful, CRUD, Material design

Getting Start

Server Side

  1. git clone https://github.com/adonis-china/adonis-admin.git

  2. cd adonis-admin && npm install && npm run serve:dev start the api server

  3. ./ace migration:refresh --seed fill database (use node ace on windows)

Client Side

  1. cd adminify && cp src/config.sample.js src/config.js use copy on windows

  2. npm install && npm run dev start the client

  3. Open http://localhost:8080 (or another port) in your browser.

use cnpm instead npm in china

UI Screenshots

1.png 2.png
3.png 4.png
5.png 6.png
7.png

Wrokflow - Add CRUD for a resource

  • ./ace make:model -m Page, Create Page Model with migration for Pages management.

  • Open /database/migrations/1496388160682_create_page_table.js, add some fields:

    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 to create table

  • Open /app/Model/Page.js, add a belongsTo relation:

    class Page extends Lucid {   type () {     return this.belongsTo('App/Model/Type')   } }
  • Copy /app/Http/Controllers/Admin/Api/EmptyController.js to PageController.js, and change to this:

'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 
  • add route in /app/Http/routes.js:26

  const resources = ['posts', 'users', 'types', 'comments', 'settings', 'pages']
  • add menu in /adminify/src/menu.js, then you can see it shows in left side menu

{ "href": "/crud/pages", "title": "Pages", "icon": "view_list" },
  • Navigate to http://localhost:8080/#/crud/pages you get a grid list view of all pages.

  • Press plus button to add a page, also you can edit it after added.

总结

以上是脚本宝典为你收集整理的

基于AdonisJs+Adminify的NodeJs+Vue后台管理系统 – Adonis Admin

全部内容,希望文章能够帮你解决

基于AdonisJs+Adminify的NodeJs+Vue后台管理系统 – Adonis Admin

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过