Mithril.js पर नमूना सरल नोट्स एसपीए

मिहिरिल क्या है

<div></div>

आपको एक उदाहरण के लिए क्या चाहिए

• Mithril.js संस्करण 2.0.4
• सीएसएस पुस्तकालय pure.css संस्करण 1.0.1
• माउस के लिए फ़ॉन्ट v5.12
• आवेदन के निर्माण के लिए रोलअप.जेएस संस्करण 1.32
• पश्चगामी संस्करण 5.2.0, बैकएंड REST सर्वर के रूप में
• डेटाबेस के रूप में Postgresql संस्करण 9.6 या उच्चतर।

db-uri = "postgres://postgres:user1@localhost:5432/testbase"
server-port= 5000
# The name of which database schema to expose to REST clients
db-schema= "public"
# The database role to use when no client authentication is provided.
# Can (and probably should) differ from user in db-uri
db-anon-role = "postgres" 

-- Postgrest sql notes table 
create table if not exists notes (
id serial primary key,
title varchar(127) NOT NULL,
content text NOT NULL,
created timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,
completed timestamp with time zone,
ddel smallint default 0
)

postgrest test.conf

किसी प्रोजेक्ट की योजना बनाना

1. हम एक स्थानीय ऑब्जेक्ट में एप्लिकेशन डेटा संग्रहीत करेंगे, आइए इसके मॉडल को कॉल करें
2. एपीआई अनुप्रयोगों को एक अलग फ़ाइल में संग्रहीत किया जाएगा
3. हम एक अलग फ़ाइल में एप्लिकेशन मार्ग संग्रहीत करेंगे
4. पथ फ़ाइल अनुप्रयोग के निर्माण के लिए प्रवेश बिंदु होगा।
5. प्रत्येक अलग घटक (और मैं घटक प्रतिपादन योजना का उपयोग करूंगा) और इसके साथ जुड़े कार्यों को एक अलग फ़ाइल में संग्रहीत किया जाएगा
6. प्रत्येक घटक जो मॉडल डेटा प्रदान करता है, उसके पास मॉडल तक पहुंच होगी।
7. घटक DOM ईवेंट हैंडलर घटक में स्थानीयकृत होते हैं

अनुप्रयोग फ़ोल्डर संरचना

rollup –c

एपीआई और राउटर

// used by backend server
export const restApi= {
  notes: { url: 'notes', editable: ['add', 'edit', 'del'] }
}

// used by routers
export const appApi = {
  root: "/",
}
// used by navBar
// here array of arrays though it may be hash eg
export const appMenu = [
  [`${appApi.root}`, 'Home'],
  [`${appApi.root}`, 'About'],
  [`${appApi.root}`, 'Contacts'],
]

import { restApi, appApi } from './appApi';
import { moModel } from './model/moModel';
import { vuView, vuApp } from './view/vuApp';
import { vuNavBar } from './view/vuNavBar';

// application router
const appRouter = { [appApi.root]: {
  render() {
    const view = m(vuApp, {
      model: moModel.getModel( restApi.notes ),
    });
    return vuView( {menu: vuNavBar}, view);
  }
}};

// once per app
m.route(document.body, "/", appRouter);

अनुप्रयोग मॉडल

getModel(
    {url=null, method="GET", order_by='id', editable=null} = {}
  ) {
/**
  * url - string of model's REST API url
  * method - string of model's REST method
  * order_by - string "order by" with initially SELECT 
  * editable - array defines is model could changed
*/
    const model = {
      url: url,
      method: method,
      order_by: order_by,
      editable: editable,
      key: order_by, // here single primary key only
      list: null, // main data list 
      item: {}, // note item
      error: null, // Promise error
      save: null, // save status
      editMode: false, // view switch flag
      word: '' // dialog header word
    };  
    model.getItem= id => {
      model.item= {};
      if ( !id ) {
        model.editMode= true;
        return false;
      }
      const key= model.key;
      for ( let it of model.list ) {
        if (it[key] == id) {
          model.item= Object.assign({}, it);
          break;
        }
      }
      return false;
    };
    return model;
  },

प्रतिनिधित्व

• vuApp - अनुप्रयोग का मूल घटक,
• vuNavBar - नेविगेशन बार,
• vuNotes - नोटों की एक सूची,
• vuNoteForm - नोट संपादन फ़ॉर्म,
• vuDialog - HTML संवाद तत्व

export const vuView= (appMenu, view)=> m(vuMain, appMenu, view);

const vuMain= function(ivnode) {
  // We use ivnode as argument as it is initial vnode
  const { menu }= ivnode.attrs;
  return { view(vnode) {
    // IMPORTANT !
    // If we use vnode inside the view function we MUST provide it for view
    return [
      m(menu),
      m('#layout', vnode.children)
    ];
  }};
};

export const vuApp= function(ivnode) {
  const { model }= ivnode.attrs;
  //initially get notes
  moModel.getList( model );
  
  return { view() { 
    return [
      m(vuNotes, { model }),
      m(vuNoteForm, { model }),
      vuModalDialog(model)
    ];
  }};
}

• vuNotes - ऐड बटन के साथ नोटों की एक सूची,
• vuNoteForm - नोट संपादन फ़ॉर्म,
• vuModalDialog - एक संवाद तत्व जिसे हम आवश्यक रूप से दिखाएंगे, और आवश्यक होने पर स्लैम करेंगे।

//Notes List
export const vuNotes= function(ivnode) {
  const { model }= ivnode.attrs;
  const _display= ()=> model.editMode ? 'display:none': 'display:block';
  const vuNote= noteItem(model); // returns note function
  
  return { view() {
    return model.error ? m('h2', {style: 'color:red'}, model.error) :
    !model.list ? m('h1', '...LOADING' ) :
    m('div', { style: _display() }, [
      m(addButton , { model } ),
      m('.pure-g', m('.pure-u-1-2.pure-u-md-1-1',
        m('.notes', model.list.map( vuNote ) )
      ))
    ]);
  }};
}

const noteItem= model=> {
  // click event handler
  const event= ( msg, word='', time=null)=> e=> {
    model.getItem(e.target.getAttribute('data'));
    if ( !!msg ) {
      model.save= { err: false, msg: msg };
      model.word= word;
      if ( !!time )
        model.item.completed= time;
      vuDialog.open();
    } else {
      model.editMode= true;
    }
  };
  // trash icon's click handler
  const _trash= event('trash', 'Dlelete');
  
  // check icon's click handler
  const _check= event('check', 'Complete',
    // postgre timestamp string
    new Date().toISOString().split('.')[0].replace('T', ' '));
  
  // edit this note
  const _edit= event('');
  
  const _time= ts=> ts.split('.')[0];
  
  // Single Note 
  const _note= note=> m('section.note', {key: note.id}, [
    m('header.note-header', [ m('p.note-meta', [
      // note metadata
      m('span', { style: 'padding: right: 3em' }, `Created: ${_time( note.created )}`),
      note.completed ? m('span', `  Completed: ${_time( note.completed )}`) : '', 
      // note right panel 
      m('a.note-pan', m('i.fas.fa-trash', { data: note.id, onclick: _trash } )),
      note.completed ? '' : [
        m('a.note-pan', m('i.fas.fa-pen', {data: note.id, onclick: _edit } )),
        m('a.note-pan', m('i.fas.fa-check', { data: note.id, onclick: _check} ))
      ]
    ]),
      m('h2.note-title', { style: note.completed ? 'text-decoration: line-through': ''}, note.title)
    ]),
    m('.note-content', m('p', note.content))
  ]);
  return _note;
}

// form submit handler
  const _submit= e=> {
    e.preventDefault();
    model.item.title= clean(model.item.title);
    model.item.content= clean(model.item.content);
    const check= check_note(model.item);
    if ( !!check ) {
      model.save= { err: true, msg: check }; 
      model.word= 'Edit';
      vuDialog.open();
      return false;
    } 
    return moModel.formSubmit(e, model, _method() ).then(
      ()=> { model.editMode=false; return true;}).catch(
      ()=> { vuDialog.open(); return false; } );
  };

निष्कर्ष